We all work within constraints, and that’s even more evident in the world of mobile user experience design, where there are few accepted guidelines for what constitutes a good user experience. What’s more, the technology itself hampers the realization of that experience. Of late we have been pondering the ramifications of creating one design to suit a variety of mobile phone handsets. Is it possible to overcome the constraints of the each phone’s assortment of keys and screen resolution, and create one design that fits them all?

The user-experience design team at Punchcut is often called upon to assess and make recommendations on existing mobile phone applications. One of our clients, a startup tight on time and budget, came to us with a suite of applications built around a patent-pending technology that facilitates user interaction - making a purchase, participating in a poll, responding to reminders or alerts. With network carrier relationships in place, the applications needed to support a broad range of devices with varying screen resolutions and form factors.

Unfortunately, the client could not afford the many engineering cycles required to optimize the applications for each group of handsets. The original interface and interaction design thus took the path of least resistance, offering the user stacks of visually undifferentiated, vertical menus to browse and assigning specific keys to items requiring quick global access (”*” to access the main menu, for example). Similarly, visual design was limited to branding the application start screen and providing icons for the main-menu items. In other words, the overall user experience was at odds with the client’s aim to provide a “friction-free” consumer experience.

Before presenting the client with a user-experience strategy that better supported their overall user and business goals, we surveyed the list of target devices. We discovered there were similarities in their form factors that would allow us to recommend a more sophisticated approach to the interaction and visual design of the applications. We noted that all of the handsets had:

o Color displays
o Left and right softkeys
o Four navigational keys (next/back, up/down)
o A dedicated “Select” key

With this in mind, we determined our design recommendations:

o Improve navigational efficiency by making use of the softkeys for items requiring global access and context-dependent actions

o Offer lateral navigation for peer-level items using the next/back navigational keys

o Indicate focus in menus and lists of items

o Align content with brand on an application-by-application basis by re-examining nomenclature and tone of copy

o Develop a visual language (color palette, iconography, typography, images and spacing) consistent with brand on an application-by-application basis

o Capitalize on opportunities to reinforce that visual language, such as on the application launch screen

The problem of diverse resolutions remained, however. The target handsets had display areas ranging from a brief 128 x 128 to a comparatively generous 176 x 220. The spectrum of sizes and aspects did require we produce three sizes of images (small, medium and large) for screens that included a full-screen or full-width image. Our client’s engineers would need to produce three versions of each affected screen and include the appropriate screen when porting each application to the target handsets. Needless to say, the number of screens affected was kept to a minimum in each application, usually no more than two or three.

Scalability was a factor in some decisions: The menus remained vertically oriented and were primarily text lists; images, when used, were aligned top left or center; and we decided on a maximum number of scrolling screens of content to determine the need for pagination or additional navigation. Otherwise we aimed high, scaling back on “menu overload” by introducing more sophisticated, context-sensitive navigation options and allowing the brand speak more clearly through a coherent visual language.

Although we have not yet performed user studies to gauge the soundness of our user-experience design strategy, we are pleased how well it has translated across our client’s suite of applications.

Have you faced a similar design challenge? How did you approach your solution? Did you arrive at any design guidelines or principles that you have since applied in other situations? Share your thoughts and insights with the Idlemode community.

Add this to digg, del.icio.us, etc.

Trackback URI | Comments RSS