Boost Your Mobile Site’s Appeal: Design a Whiz-Bang UI

September 15th, 2011 by

Last week we launched the first in a series of posts on how to boost your mobile site’s appeal. This second post in the series will discuss creating a whiz-bang user interface (UI).

Even the best content can be rendered useless by an unfriendly UI. With the booming popularity of smartphones, and their hefty price tags, today’s tech-savvy consumers expect more from a mobile website than a simple list of text links with an occasional image sprinkled in between. If this describes your mobile site, you may be in dire need of an interface lift, especially if the bulk of your customers are smartphone users.

So how can turn your UI from drab to whiz-bang? In short, the key to a successful UI makeover consists of designing the UI for touch (a topic that deserves a separate post) and then kicking it up a couple of notches with sophisticated visual elements and features that accommodate common finger motions such as swipes, flicks, pinches, and resizes. Let’s take a look at a few great examples.

Take a business where “reach out and touch” has a special meaning: Match.com. Match’s mobile site has a whiz-bang UI that includes:

    • Custom image buttons that are responsive and large enough for touch
    • Drop-down and pop-up menus menus with options that are easy to read and select on a small bit of screen real estate
    • Tab-based navigation that encourages exploration and engagement with the site content

There are also some slick interface features you can implement on the small screen that you can’t do on a Web page as seen on a desktop or laptop. Take, for example, the mobile version of the Converse Shoes site. The mobile home page looks like a scaled-down version of the conventional desktop home page. But the two versions behave differently. On a desktop, the half-dozen or so images that are arranged in a collage are static. On a smartphone or iPad, though, all the images move in response to user gestures. Touch one image, and it jumps to the center of the screen and then expands, while the other images move out of the way. Resize the screen, and all the images “dance” away simultaneously.

Such responsiveness encourages further exploration. So do features like the ability to create custom shoes or to filter catalog listings by means of a color wheel: click a wedge on the wheel, and you only display shoes in the chosen shade.

Whether you’re designing your mobile website or upgrading it to achieve a new degree of functionality, consider two things:

  1. Creating custom looking buttons and menus to connect with your brand identity visually
  2. Adding features that help you take advantage of the interactive nature of mobile device screens. Here are a few examples to help you get going:
    • Swipe galleries: images that move from one to another in an animated fashion or that respond to swipes
    • Menus that “pop up” with easily clicked buttons next to each option
    • Collapsible menus that expand and collapse when clicked to hide supplementary content
    • Global navigation (via tabs or another type of layout) that encourages non-linear exploration of content

The mobile version of one of the most popular websites around, Amazon.com, was recently redesigned with a streamlined home page and easy-to-browse collapsible menus. If Amazon is strengthening its already beefy m-commerce website with an enhanced user experience, perhaps, it’s time you considered undergoing an “interface lift” for your mobile website, too.

Related Posts Plugin for WordPress, Blogger...

2 Comments »


2 Responses to “Boost Your Mobile Site’s Appeal: Design a Whiz-Bang UI”

  1. [...] — offline 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 [...]