Boost Your Mobile Site’s Appeal: Create a Touch-Optimized UI

September 26th, 2011 by

When building a mobile website, you want your customers to feel they can reach out and touch your products and services. That’s just what Disney had in mind for their Aulani Resort and Spa mobile site. Go to (developed by Trilibis) on your iPhone or Android device and explore the resort by tap expandable menus and Swipe galleries make it easy for anyone to browse the alluring photos and wallpaper section. Touch-optimized features like these makes exploring the resort via a smartphone as easy and relaxing as sunbathing by its Wailana Pool.

What Disney realizes is that smartphone and iPad users love the interactivity that swooshing, tapping and pinching provides, allowing them to connect with the brand on deeper level. By optimizing your mobile site’s UI for touch, your activate and engage your visitors’ curiosity. As a result, they will interact with more content, stay longer on your site, increasing the chances that they’ll take an action you want, such as signing up for your newsletter, joining a club, or making a purchase.

But how do we know that it actually works? And is it really worth the effort? Here are two recent client examples:

    • In the first six weeks after introducing a touch-optimized version for smartphones, one of our clients (a very popular consumer service) experienced a 65% increase in traffic. During the same period the number of unique users accessing the mobile site remained steady, indicating greater levels of engagement.
    • Another Trilibis client experienced a 50% increase in traffic over a 12-month period AND over a 100% increase in revenue after implementing a UI/UX (user interface/user experience) redesign specifically for smartphones.

So upgrading your first generation mobile site to a touch-optimized UI is an effective strategy for increasing traffic, engagement, conversions and ultimately revenue. But how do you build such a site? You can’t simply scale down your conventional website to fit it into a small screen. Mobile users want a website that’s as functional and interactive as an app they’ve downloaded from an app store.

You need to optimize your site by following a few tried-and-true principles:

    • Keep it simple. A home page should have less than 10 objects to click on.
    • Include small, clickable images that don’t require visitors to scroll.
    • Incorporate swiping, rotating, scaling or flickable scrolling
    • Be fat-finger friendly by allowing for a good amount of spacing between items with links.
    • Include actionable buttons. These are buttons that invite visitors to perform the actions you want most, whether that means contacting you, subscribing, browsing your sales catalog, or making a purchase.
    • Minimize the number of clicks (or taps or swipes) required to get to content. Without computer mice or keyboards, most mobile users have to click laboriously through top-level navigation.
    • Make sure your color choices provide sufficient contrast between foreground and background colors.
    • Accommodate fonts and characters of certain sizes.

After Fandango redesigned its mobile website, it saw a dramatic increase in mobile ticket purchases. In summer 2011, a full 20% of its ticket sales came from mobile devices. Not surprisingly, the site is optimized for touch: its home page contains just a few buttons and three menus, plus images of movies that invite exploration. On July 15, when the final installment of the Harry Potter series was released, Fandango set a new record for the most mobile movie tickets sold in a summer. You might say the site proved it has the winning “touch.”  Well, just last week, Trilibis and Fandango won the DigiDay’s 2011 Mobi Award Winner for Best Mobile Website.

So while winning awards is absolutely great, a modern, touch-optimized mobile site delivers tangible benefits, too — not only for your finger-pointing visitors, but also for your bottom line.

Related Posts Plugin for WordPress, Blogger...

1 Comment »

One Response to “Boost Your Mobile Site’s Appeal: Create a Touch-Optimized UI”

  1. [...] storage. Unlike the first four features in this series (location functionality, a whiz-bang UI, a touch-optimized UI, social networking) offline storage is largely untapped, primarily because it is still not widely [...]