Improve Your Site’s iPad Usability in 1 Simple Step

Tap is the gesture that replaces the click, but unlike a pointer mouse that has pretty good accuracy, our fingers can often activate the wrong thing. And when things are difficult to activate, a user can give up.

Jakob Nielsen’s research on iPad usability consistently shows that “read-tap assymetry” is a major problem. (English translation: text that is large enough to read but too small to tap). When links are too close together, it’s all too easy to tap the wrong link and load (very slowly) the wrong content, or take the wrong action such as selecting the wrong size, color or payment option.

The beauty of the iPad is that it renders regular websites so well, so there’s little you need to do to design websites for the iPad. But the downside is we can think we don’t need to make design changes for usability. We should be aware that our current site designs may be problematic on tablets, and ensure our navigation menus, calls to action and configuration features are touch-screen friendly.

Website problems on tablets

Tiny menu text

Many sites use simple text menus in the left-hand column of the home and category results pages, which look clean and can fit more items above the fold. But on tablets, it can be harder to click tap these targets.

Zappos pads its text links just enough to be tap-friendly.

Tiny link targets

Cabela’s makes great use of space around link targets in it’s promotional header.

Pagination

Let’s not forget pagination — a usability nightmare under the best circumstances, small numbered links are very difficult to tap properly. Consider a large “View All” link or turn your page numbers into fatter buttons.

Buttons

Be careful when stacking calls-to-action buttons. Golfballs.com could swing a bit of extra space between its More Info and Buy Now buttons on category results pages.

Whether intentional or not, Zappos does a great job styling its CTAs on product pages. They are all large buttons, spaced nicely.

Check out how tappable your links are on the iPad itself or a simulator like iPadPeek. Making very simple styling changes can really pump up your usability on touch screens.

Looking for help with mobile commerce strategy? Contact the Elastic Path consulting team to learn how our ecommerce strategy and mobile strategy services can improve your business results.

Tags: , , , , ,


Related Articles

5 Responses to “Improve Your Site’s iPad Usability in 1 Simple Step”

  1. Bradley says:

    Great information Linda. It has been amazing to see the statistics that Google have published regarding the % of people that are using mobile devices to do their shopping this Christmas and I am positive a large number site could apply this information to make more sales instantly.

  2. I would also mention responsive design where the page is smart enough to resize / restructure itself using css @media queries.

    You can achieve a lot with a little css this way

  3. fjpoblam says:

    I fully agree. I style my own website accordingly. Where it gets frustrating is client websites. One case is a client who uses WordPress.com with paid-for custom CSS. The WordPress.com folks haven’t yet seen fit to include media queries in their CSS repertoir! Another client has a website provided by an ISP who encloses the client’s CSS inside the ISP’s CSS! The only bypass for both, unfortunately, is to display large buttons for ALL navigation links. Mobile first. Progressive enhancement gone wild.

  4. Jon says:

    One of my sites looks and functions very well on screen but links are small and tricky to click/tap with the iPad.

    This gives me some ideas how to configure this site. I have to get it sorted as my analytics prove to me how many people are viewing with an iPad.

  5. Cam says:

    I missed this post previously, but I thought I would add that hover/mouseover states tend to be problematic on tablets. Modal windows are also often problematic. That’s something we are working to address on our ecommerce site.

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS