Designing for mobile User Experiences

Designing for mobile User Experiences

Mobile is so hot now, yet presents its own challenges when doing
research with users, designing User Interfaces or providing content
for that platform.

Forget all you know about desktop computing and start over with a
fresh mind, expect lots of iterations. A few observations about
mobile devices:

Mobile means small

Viewing complex content through a small handheld display is like
drinking the water of a lake with a straw. The user can only see one
screen at a time and often content is broken up across multiple
screens. Keeping a sense of where the user is in terms of navigating
across an application is a real challenge not present on desktop
applications.

In order to cram more pixels into even smaller devices, modern LCD
displays boost the dots per inch (dpi) ratio well beyond the 72-96
dpi customary for desktop systems. One would think that this means
more data can be displayed on a smaller form factor. Not true: to
maintain legibility for users across different vision capabilities
text and graphics have to be made larger, thus allowing for less
content on a screen

Mobile means different screen quality

Often development of a mobile application starts by porting over from
desktop applications. If you were to use the same visual appearance,
colors, icons etc you would be in for a big surprise. They don’t look
at all like what they appear on a desktop computer. Saving power
being paramount, most handheld color displays are not optimized for
color fidelity. For example in a research it was found that the Palm
Treo screen favors red and pink hues over yellow ones with blue being
also strong, while many Pocket PC screens seem to tend towards
yellow. Even within the same model group, color replications vary
widely. Saturation and Contrast are greatly diminished, so on-screen
appearance looks washed out and the user may see a black line but not
the light blue rectangle that looked so good on the desktop.

Different usage on the Go

We found that often users carry the handheld device to stay informed,
occasionally look up information and respond to incoming events. This
means users frequently spend short amounts of time with the device.
This differs greatly from when they are at their desktop, where users
may be involved in a task for multiple hours or a full day.

In fact, handheld activities maybe not even be the primary task,
instead they may be waiting for a flight to board, sitting in a cab
or are attending a meeting. Because of this mobile tasks may be
interrupted (Your flight is now boarding) or abandoned altogether.

Because of this and the tradeoffs between mobility and functionality
in the hardware, mobile users tend to do much less content creation
then they do responding to, viewing or triaging content.

Mobile means unpredictable connectivity

Events external to the device can also interrupt a mobile task, for
example when the user sits in cab that drives through a tunnel, and
the connectivity is gone.

Another difference to the desktop model is that currently connection
speeds are only a fraction of what users might be accustomed to on a
DSL or T1 line. In fact responses to actions might arrive long after
the initial request was completed due to the data traveling at a
slower speed. Users may not be in the same context anymore that they
were in when they started the task and because of the slow speed we
found users tend to want to queue up multiple tasks for later
completion.

Mobile means unpredictable location

Developers usually test the target device screen in well lit
conditions on their desk, or even on an emulator which is in stark
contrast to what the device user actually encounters. Lighting are
often marginal when on the go, further compounding the challenging
contrast and color issues on a handheld screen.

If you have tried to set a control on a touch screen of one of those
modern in-car navigation system while driving you know how hard it is
to reliably hit something on a moving surface. That’s precisely the
situation that GoodLink users encounter as they check their device
between meetings, walking in an airport or standing on an escalator.

Mobile means constrained input

Some of Good’s customers like the handheld’s best that support one-
handed navigation. Why is this important? Imagine a GoodLink user
waiting in line at the airport, in one hand carrying baggage, while
the other tries to navigate the mobile device triaging incoming
messages. That is a very real usage scenario very not often simulated
in a R&D lab.

Many devices have stylus, but we are finding most users will try to
do without it for as long as they possibly can, and would rather
attempt to use fingers to tap on-screen controls then pull out a
stylus.

Keyboards on Treo and Pocket PC are hardly equivalent to their
desktop counterparts. Because of the small size only about 30 keys
fit (vs. over 100 on a desktop keyboard) and mobile keyboard use
modes in conjunction with modifier keys such as Fn and Alt to switch
Caps, numeric and special characters. The trouble is there is no
standard like on desktop keyboards and keyboards vary widely on which
keys are available and where they are. For example across devices
that GoodLink supports, some have a have distinct Backspace, Delete
and Esc keys while other only have two of them and the smallest
device has only one that has to do all these functions based on
context.

Mobile means less power and battery life

This one may be obvious but in order to be small mobile devices have
to be constrained in terms of both battery life and horse power.

As device manufacturers are trying to make mobile handhelds more
powerful (using multi-hundred MHz RISC CPUs) were are seeing battery
life being greatly reduced. If any of you remembers the first
PalmPilot could go some weeks on a single AA cell, while today’s most
advanced Pocket PCs last a day only. We are also finding that most
users are happy to adapt to a “charge once a night” mode, but having
less battery life then that would probably not be acceptable.

This also more direct consequence for the user experience: Animations
may look cool on Windows XP, but on the lower powered devices they
cause the experience to be less responsive and the battery life to be
shortened.

Mobile means personal

As mobile messaging devices become smaller and smaller and as they
integrate phone functionality with data capabilities they will be the
one and only device many users will carry, covering both the roles of
a high-powered mobile phone with having laptop power. In many ways we
are seeing a trend towards more personalization much like we have
seen in the mobile phone space, whereas most desktop PCs are seen as
work horses without much need for personality.

As mobile designs inevitably live in a space full of trade-offs,
users’ opinions of what is a usable design varies greatly from person
to person. For example, we found that a percentage of mobile GoodLink
users would want to pack as much data as possible on the screen and
would rather sacrifice beauty and font size or white space. An
equally large group of users (especially those with more mature
eyesight capabilities) would rather have a legible easy to read font
and less data on their screens.

How does a camel fit through the eye of a needle?

Lose the desktop UI mind frame!

Lose that lavish heavy-handedness prevalent on most desktop
interfaces. Every pixel less drawn saves battery and horsepower,
makes the device faster, more responsive and lets user the focus on
what’s actually important.

Here are some thoughts to get you started:

Less is more

Don’t just shrink the interface

Make every pixel count

So how do we fit all this in?

Emphasize on what is important

Leave it out

Use emphasis sparingly

Be context sensitive

Use Progressive disclosure

Unroll the Interface into a sequence of screens

Deal gracefully with asynchronous behavior

Think about Customizability and Flexibility

Communicate!

Test, Test, Test

10 Good Design Lessons I have learned over time

Clear and simple from the start

Good Users are usually handed their device to them and expect to be
productive right away. Most users never read their manual or summon
help. Thus the UI needs to allow being productive from the start.
Never sacrifice simplicity for power.

Base the software User Interface on a small set of easy to learn and
remember core interactions that allows access to all basic
functionality.

Follow the 80/20 rule – 80% of usage is based on 20% of the available
functionality. Use concise content and wording, shorter is better.

Familiar and consistent

Design a set of screens or applications such that similar
functionality appears in the same places, using the same terminology
and functions the same way across all screens. Thus, users can apply
what they learned in one application to the next. Allow users to
leverage existing concepts, so they do not have to acquire new ones.
For example GoodLink lets users experience familiar terminology,
iconography and overall layout from Microsoft Outlook.

Design aspects to be consistent in include behaviors, control
placement, graphics and terminology. Use device OS conventions where
applicable, don’t reinvent the wheel. Real world conventions can also
help users with learning new software.

Minimize paths to the most common actions

We designed a very consistent hierarchy of screens for GoodLink users
to easily learn. What we found after usability testing is that users
would want to use certain features often from screens other that we
had anticipated in the original design. Where applicable we
added “direct tunnels” to those locations, for example “GoodLink
Preferences” from each application menu.

“Required effort” can be used to guide the user in terms of
importance of UI elements. 1 tap can be used for things that are in
the forefront, 2 taps away for things that hidden, while anything
further is usually perceived as deeply buried in the system. As
always testing these assumptions early will prevent costly changes
later.

User in control, UI forgiving

Given the small screen and the need to subdivide content into
multiple screens, users need to always know where they are and how to
get back to a known point in the application

Anticipate users to use the application in ways it wasn’t originally
designed for, because mobile applications have a less descriptive
interface and it’s easy to get lost.

Don’t trap users, always offer a way out and back to a known place.

Encourage exploration, ease users into power functionality

Expect the unexpected

It helps to expect the user to be disconnected or have a lousy
connection most of the time, be prepared for users to rip out their
memory cards or be interrupted by a phone call coming in. Design for
graceful response from the start for any of these events.

Allow for parallel task flow

In the wireless world things responses to user actions have
noticeable lag times, the system as whole works in an asynchronous
way. A mobile user interface has to be designed such that user can
work on another task while waiting for previous tasks to complete.
Users often want to then notified when a previous task completes.

Make it Customizable

Being highly personal, mobile devices and software running on it need
to be personalized. Also, as designs for mobile devices are always
trade-offs the concept of what is the moist important varies from
user to user.

Provide good feedback

Things are slower on a handheld and often require managing users’
expectations when actions take longer. So applications should make
use of progress indication to help the user understand how long a
command takes to complete. A good starting rule of thumb is to show a
wait indicator if something takes longer then 1.5 seconds and to show
progress if something takes longer then 6 seconds. Acknowledge user
actions immediately even if it will take (or even a network
connection) to complete the action. In those case show visual
information that the handheld has started processing the command

Look Good

A mobile device presents a very personal experience to users because
in many cases it is with them all the times, and in the case of
GoodLink it is the lifeline to their work when they are on the Go. As
such you want to convey a delightful, friendly and helpful experience
look and feel.

But: Never the let the visual enhancements get in the way of
functionality, otherwise a good user experience can quickly turn into
being frustrating. Keep in mind that there only few pixels to work
with. There are contrast issues while choosing colors and
backgrounds, and fancy fonts often get in the way of legibility on
lower resolution screens.