Wednesday, October 10th, 2012
Will Your Site Withstand the Onslaught of Holiday Shoppers on iPads?
It’s likely over the past 12 months you’ve seen an increase in traffic to your site from iPads. If you’re lucky, you’ve also seen a corresponding increase in revenue driven from iPads. With the holidays right around the corner (you’ve started holiday planning, right?) and no shortage of growth in the iPad user arena, it’s critical your site be ready to deliver on customer expectations when they shop (and purchase) from their iPads this holiday season.
We know that customer behavior and purchase tendencies are different on tablets than from standard browsers and also from smartphones and those behaviors are starting to drive a serious divergence in customer expectations as they traverse your site across their various devices. As far as tablets go, customers expect a richer, more immersive, and, well FUN experience relative to their standard browsing and smartphone usage and that demands a different design approach to meet customer expectations. Simply delivering the standard browser experience to your iPad visitors will not differentiate your brand in the emerging ‘tablet-first’ design space. Customer expect more and if you can capitalize on that expectation, it’s likely you’ll also capture your visitors’ dollars.
Surprisingly, the majority of Internet Retailer Top 500 sites not only haven’t starting delivering tablet-specific experiences to deliver on customer expectations, but a wide swath of them deliver sites to the iPad that have serious usability issues. Issues that aren’t problems for the standard browser, but can present serious barriers and frustrations to visitors on iPads.
Assuming there’s no time at this point for a tablet-specific design for your brand’s site, I’ve created a list of common usability issues seen when standard experiences are delivered to iPads, as well as some hints on how to avoid them. Take a look and see any of these issues plague your site, and fix them pre-holiday. Then, start planning for next year!
#10 – Flash
By now, most brands are savvy to the fact that iOS doesn’t support Flash but don’t fall victim to this now classic blunder. You don’t need to get fancy with HTML5 animation to deliver a solid customer experience. If time is a factor, a static image is better than an “Image Not Found” icon for iPad (and any iOS) visitor.
#9 – Links Opening in a New Page
Everyone using an iOS device has experienced this. You’re humming along reading, browsing, interacting; you tap on a link and all of a sudden the page you’re on disappears and a new page appears in its place. What happened? Don’t force your visitor to lose context, ESPECIALLY during some sort of conversion process like checkout. Take a look at each embedded link and judge whether it’s necessary to open a new page (which in some cases might be legitimate) or if that content could just as easily be displayed as an in-line alert or in a small layer.
#8 – Orientation Awareness
Okay, okay. The “fold” on a standard browser really is a myth (as one of my colleagues fantastically puts it: “Do you customers use Facebook? Then they scroll.”) but that myth is more of a reality on a tablet. Not because people won’t scroll, or in this case, swipe, but more because sometimes they don’t realize there is more to swipe to. Take a look at the way your site renders and scales on the iPad and confirm critical content and calls to action are visible without swiping, otherwise, it could be easily overlooked.
Also, make sure your site renders the way you want it to in both portrait AND landscape mode. Pages and images scale based on orientation, sometimes oddly, so take a look at critical pages in both orientations.
In this example a customer looking for a store may think based on the way the page renders in landscape, that this is the only store in their area.
When in reality – there are more results when shown in portrait mode.
#7 – Input Awareness
I like to call this one “Give your Customer the Numeric Keyboard and They’ll Be Your Customer for Life.” It’s a long way of saying it may seem like a small thing to deliver the numeric keyboard when a customer taps into, say, a Zip Code field, but that moment of delight for your customer is priceless. Do it and they will love you.
#6 – Use of Scrolling areas or IFrames Within a Page
While this interaction is undoubtedly more well-known today than when the iPad was first released, the two-finger swipe is still not a natural behavior therefore any in-page scrolling on your site is likely to go unused due to ignorance on the part of your customer. Again, at best, the information isn’t critical but at worst, it is and customer abandon the site in favor of a competitor who doesn’t use iFrames on their site.
#5 – Fonts are Too Small
Too small. Especially when orientation gets switched. It’s relatively easy to bump up font sizes for iPad users using CSS so have mercy on older customers or people who fear wrinkles due to squinting.
#4 – Everything is Too Small
By “everything” what I really mean is any interaction element like checkboxes, radio buttons, swatches – any target a visitor is expected to be able to interact with is small, and the spaces between are too small. Make things BIG and targets tap-able and make the padding/spacing between such elements enough so that a customer isn’t frustrated by accidentally tapping the red swatch when he was aiming for the blue swatch.
Zappos, for all of its great points, doesn’t do a great job on this point. See below. It’s a bit of a nightmare getting to the brand page intended and once you get to a product detail page, you it better be the color you wanted!
#3 – OnHover. OnPurpose.
If you are going to use a Hover-type interaction, make sure it makes sense in the context of the iPad. Something that displays OnHover on a standard website actually takes two taps on the iPad because there’s no hover action to speak of (at least not now. iPad 4 rumors anyone?). Classic example is the “QuickView” action so commonplace on ecommerce sites today. It’s great for standard browsers but iPad users who tap on a thumbnail only to get the “QuickView” button only to tap on that to get the QuickView layer when ALL THEY WANTED was to get to the Product Detail Page are going to get frustrated really fast. Take a look at where you are using OnHover and see if it makes sense to either remove it from the iPad experience, or as in the case of QuickView, expose the action by default.
#2 – Things that are tapable should look tapable. Things that aren’t, shouldn’t.
This really boils down to a renewed need for clean, usable visual systems in web design. Heuristics evolved for standard browsers, but some of those heuristics are being blown away the the advent of a multi-touch interface. While any visual system is going to be magnified on the iPad where visitors expect EVERYTHING to be tapable (because tapping is fun), help visitors avoid disappointment by establishing a clear an obvious visual system to indicate what is tapable and what isn’t. I’m not advocating returning to the days of a bright blue “click here” everywhere, but depending on your demographic, it may serve your iPad experience to have more clear visual indicators of elements that will lead to new pages, open layers, give feedback, etc.
CharmingCharlie.com (shown below although they are currently undergoing a redesign) elected to go with a very Pinterest-y design for a while which works great on a standard browser where OnHover actions make it clear what’s clickable and what’s not, but on the iPad, visitors are likely to tap on most anything just to see what happens.
#1 – Feel the Need for Speed
Don’t assume your visitors use Wifi all the time on their iPads. Performance and responsiveness matters now more than ever. While you might not have control over wireless provider infrastructure and bandwidth, you do have control over page size, image size, tags, etc. on your pages. The heavier the page, the longer it will take to load. Sound like 1998 web design? Well, yeah. The evolution of web design and web technologies has enabled some pretty cool, interactive interfaces but those can sometimes take a lot of code. Likewise, the ability to track and analyze visitor info has translated into awesome “Big Data” but that can also translate into a lot of tags on your page. It’s all very powerful, but with great power comes great responsibility. Code bloat is a problem. Don’t be a part of the problem. Make sure your site loads reasonably quickly over non-Wifi connections and any in-page interactions are responsive. Or else? Well, or else customers will simply move on just like they’ve always done, but they’ll move on faster than they did before, and probably won’t give your site another chance.
The good news is that if you avoid these common issues your brand’s site will be in good shape for the holidays and you’ll see those mobile dollars increasing month over month, year over year. How much you choose to invest in tweaking site design to be device-specific should really be rooted in revenue driven from said devices, but this holiday season will be a great indicator of the kind of growth you can expect in the tablet-driven metrics going forward.