2. Content
1. Take mobile web design seriously ................................................................................................................ 3
2. Get things right from the start: analyze! ................................................................................................... 3
2.1. Get to know your users .............................................................................................................................. 3
.
2.2. Analyze the mobile phones your users have .................................................................................... 5
2.3. Define your concept ....................................................................................................................................6
3. Choose wisely: mobile site or application? ............................................................................................... 7
3.1. Choose to design for some or for all ..................................................................................................... 7
3.2. Decide which technologies are needed ..............................................................................................8
3.3. Select the road to accessibility................................................................................................................8
3.4. The right pick .................................................................................................................................................9
4. Face the design challenges ..............................................................................................................................9
4.1. Show your user the way: design a clear navigation plan .............................................................9
4.2. Assist your user by providing easy-to-use interaction methods ............................................10
4.3. Make sure that form follows function ..............................................................................................10
4.4. Test, test and test: listen to your users’ feedback .......................................................................... 11
5. Create your own success story ..................................................................................................................... 12
2
3. Take mobile web design seriously
Viewing a website developed for a computer screen on a tiny mobile phone feels like sitting in
the front row of an Imax movie theater. You slowly become frustrated because you feel like you’re
missing the action and when it’s over you’ll leave with a headache.
Viewing a website designed for a computer screen on a phone screen often is an awful experience.
You really don’t want to confront your users with such an experience. If users have a bad experience
using your product, rest assured that they will avoid it in the future. Even worse, they will
discourage their friends and colleagues to try it. A good user experience will gain you loyalty and
trust. The user will be motivated to return and will even make publicity for your product. So, as mobile
web is gaining more and more followers, it is in your best interest to take mobile web seriously.
This white paper will put you on the right mobile design track. The first stop will be a thorough
analysis of your users and the mobile phones they use in order to define your concept. The second
station will explain the difference between a mobile site and a mobile application. Then we’ll travel
onwards to the final destination: design.
Buckle up, here we go!
Get things right from the start: analyze!
Don’t jump into the deep end before you can swim. The beginning of a mobile web success story is
always a good analysis.
So, how do you get your ducks in a row?
Get to know your users
Getting to know your users is a crucial part of the analysis phase. Knowing your users helps you to
focus your design on your users, and to address every user group in the appropriate way.
So one of the first questions you need to ask yourself is: whom
are you reaching out to? Do you have a specific audience, for
example teenagers, or a very diverse public?
Next, you should try to picture your audience in a mobile
context. In general, people use their phones, and therefore the
mobile web, on the go. This means mobile web sessions are
mostly short. Users need their information as quickly as possible.
3
4. In order to create the best possible mobile concept, you should get a thorough insight into your
users and their exact context by asking the questions when and where. For example, do they use
their smart phones when waiting for the bus at a bus stop?
Then you can start thinking of the needs or tasks of your users in this mobile context. What do
users need or want to do? If we take the example of public transport users a bit further, perhaps
they would like to look up which bus to take and whether the bus they’re taking is on time or has
been delayed.
A couple of useful techniques for charting out your users are task matrices and personas.
A task matrix enables you to differentiate between users or user groups based on the tasks
they perform. For example, users of a mobile shopping list application could be differentiated in a
group that only wants to make a traditional shopping list, and another group that might want to
take it a step further by making a shopping list based on selected recipes or circumstances, like
a dinner party, for example. Personas, on the other hand, are detailed characterizations of typical
users. They may not be actual users, but they are described as such -often using photographs-,
which helps you to keep your focus on them. Having a clear idea of who your users are is essential
in figuring out how and when these persons would use your product. Personas help you make
good design decisions.
4
5. Analyze the mobile phones your users have
Of course you can find general information on smart phone use in statistics, but those statistics
should be taken with a pinch of salt. For example, sales statistics on which phone is sold the most
don’t say anything about that phone being used to surf the web.
Identifying your users and their smart phones,
unlocks the path to the technical specifications
you need to dive into. What are the possibilities of
their smart phones, the type of browser...
Make a comparison of the specifications of the
smart phones used by your audience and find
the common denominators. The specifications
that you should definitely keep an eye out for are
screen resolutions, the supported interaction
methods, and if you’re thinking of taking things
a bit further than the basic stuff, you might also
want to check the other functionalities of the smart
phones.
We’ve already mentioned that designing for mobile is designing for a smaller screen, but before you
put your pen to paper, you will want to know the exact size of your canvas. So it’s definitely worth
looking at the most common screen resolutions and design for the lowest common denominator.
When analyzing the mobile phones of your users, it is important to include the differences
between the mobile operating systems (Mobile OS). The OS determines for a large part either the
browsers your mobile site needs to work on or the platform for your mobile application.
The supported interaction methods not only depend on the operating system, but also on the
hardware. It’s always good to check whether the smart phones in your target group have specific
interaction methods like a touch screen with a virtual keypad or a fixed keypad with for example a
track pad or jog ball for navigation purposes.
Check out the technologies supported by the mobile phones in your target group and see if you can
put them to use. Most phones have GPRS, Wi-Fi, Bluetooth, EDGE, … but every day new technologies
are added. So keep track and link the technologies to your users and their needs.
5
6. Define your concept
Because mobile phones accompany us everywhere, social network sites, such as Twitter, Facebook,
MySpace... were the first to go mobile. They all revolve around the fact that people want to share
personal information with friends, family or the world. So isn’t it great that you can share “what
you’re up to” immediately instead of
waiting until you reach a computer
connected to the Internet?
Social network sites have found an
easy transition to mobile, but how
do you go about?
Going mobile is all about toning
things down to the basics and to a
size that is manageable on a small
screen. Not only is the page size
smaller (size of the screen), but you
should also limit the number of
pages. Mobile phone processors aren’t as fast as those of regular computers so loading a web page
on a mobile phone is generally a bit slower.
When you define your mobile concept, make your users and their tasks the pivot: What are your
users’ most important tasks and needs in an “on the go” context? As a rule, skip everything the user
doesn’t necessarily need.
Let’s take the following banking example. If you compare money transfers with stock trading,
the latter would make the mobile cut. The very nature of stock trading is urgency. It is a fluctuating
business based on instant decisions, so a tool that allows users to quickly sell or buy stock would
be an added value. Most money transfers are not that urgent. Also because a transfer requires a lot
more input from a user, users may still prefer the full online banking tool.
If you are converting an existing site to mobile, it might be useful to check the statistics of your
site to get an idea of what the most popular functionalities are. Then you need to consider if those
functionalities are still useful in a mobile context.
“Going mobile is all about toning
things down to the basics”
6
7. Choose wisely: mobile site or application
When you know your audience and you have defined your concept, you can start thinking about
how you want to take your concept mobile. Should you go for a mobile application or should you
offer a mobile site?
To make a well-considered choice, you can fall back on that user analysis you’ve made and go a bit
deeper into the technicalities of things.
Choose to design for some or for all
Today, quite some mobile applications are designed for specific mobile phones. Of course, the
strength of having an application built for a specific mobile phone is that the application is entirely
optimized for that type of phone. This strength is at the same time the disadvantage of those mobile
applications. Developing an app for a specific phone implies that you either target a specific user
group, or that you need to build and maintain multiple apps to reach out to your entire user base.
If you opt for a mobile site, your audience is not limited to the users of a specific type of phone. Every
user that has a mobile phone with a browser should be able to access it.
7
8. Decide which technologies are needed
If you want to use the GPS, compass, 3G and other functionalities or interaction techniques of
today’s mobile phones or if users need to be able to consult some of the content when working
offline, you should consider building a mobile app for the type of phone that is most popular
amongst your target audience.
A good example of using the built-in
technologies of a specific smart phone is an
application to compose a shopping list which
sorts the items on your list in the order of
the store you are at. In this case, you use the
built in GPS functionality of the targeted
smart phone.
Mobile sites need to work on the browsers that come with different types of smart phones. In that
way, the technology that you can use is limited to the capabilities of the mobile browsers. Of course,
as technologies advance, the gap between the possibilities of applications and sites will narrow.
Select the road to accessibility
Another big difference between mobile applications and mobile sites is that mobile sites are freely
accessible. The content of your mobile site will automatically be accessible through search engines.
In order to use mobile applications however, users need to
download them from an application store and install them to get
them to work. This means that with an application you can enjoy
extra publicity when users browse through application stores.
On the other hand, to be able to add your app to the store, you need
approval of the third party storeowner.
8
9. The right pick
Basically, choosing between a mobile app and a mobile site comes down to the user group
you want to target:
• Does your target group work with specific smart phones and is the use of technology like GPS
essential for your concept? Go for a mobile app on the platform(s) that are most popular with
your target group.
• If it is important that you reach out to a wide and diverse audience and the use of fancy
technologies comes second in line? Choose to build a mobile site that is accessible on any
phone with web access.
This is a great rule of thumb, but it’s not carved in stone. If you have developed a great application,
it will create its own audience. Comparing the pros and cons is always a good idea, but at the end it
comes down to one thing: what is the best suitable option for your business model?
Face the design challenges
When your groundbreaking concept is taking its final shape and you have a clear view on who your
users are and the technology they use, you can start designing your site or application.
Show your user the way: design a clear navigation plan
It is imperative for every app or site to offer the user a clear workflow. So start with high-level
wireframes and navigation flows before you go into a detailed design of every page. This enables
you to nip any flaws or gaps in the bud at an early stage, and prevents you from wasting time on the
detailed design of pages that don’t make the final cut.
Limit the number of pages or screens to what
is really necessary and keep the structure of the
mobile site or application as flat as possible.
Spend enough time thinking through how the
user will navigate from one page to another.
Navigation as we know it on full sites will be fairly
complex on a smaller screen, so optimize your
navigation for a smaller screen size. For example,
it might be better to group navigation options in
one main control than to make all options visible.
You could also make mobile navigation easier on your users by redirecting them to your mobile site
when detecting that they are using a mobile browser.
9
10. Assist your user by providing easy-to-use interaction methods
Nowadays graphical user interfaces on computers are optimized for using a mouse as an input
device. Guess what: mobile phones don’t work with mice. At best, they include a
stylus, track pad, track ball, joy stick as a pointing device, but keep in mind
that there are subtle differences. As a rule, make everything that should be
clickable large enough. When using a touch screen phone, nothing is more
irritating than not being able to click on an item.
Optimize the interaction patterns of your product to the interaction
methods that are supported by the smart phones of your target
group. Users of touch screen phones will be used to different
interaction patterns than users of a classic keyboard phone.
When using non-typical interaction patterns, especially for the touch
screen phones, consider using watermark patterns. These patterns are
a sort of demo instructions that show the user how to do something, for
example pinching on an iPhone.
If the phone has a fixed keyboard, consider implementing quick access keys. This means that you
can make certain functionalities or pages accessible by pressing button 0-9 on the phone keyboard.
When dealing with non-touch-screen phones you need to indicate on the screen what the function
of some variable hard button is. Make sure you use clear labels so that your audience will know
immediately what the result of the button click will be.
Nobody likes typing long texts on a small keyboard, whether fixed or virtual, so try to limit text input.
Make sure that form follows function
In traditional web design a lot of attention is spent on an elaborate graphical design. For
mobile design, whether site or app, the graphical design is subordinate to the function
and content. The graphical design has to be tight and limited because there is just not enough
room for fancy decorations.
As the size of the screen is limited, try
chunking the information so that one chunk
fits the content of 1 page. You don’t want the
user to spend his limited time scrolling up and
down or left to right to view the information he
needs. To give users direct access to the most
important functions or information (for example,
search field / latest news item) show those
items at the top of the page.
10
12. Create your own success story
So, knock yourself out creating your own revolutionary mobile app or website and give your business
a boost! Be creative and innovative, because the technology to develop killer mobile apps and sites
is here today.
But don’t forget to pack the right user-centered design techniques for your journey. A rich and
addictive user experience is the difference between being a one-hit wonder or creating something
with staying power.
If you need some help, contact Human Interface Group.
Together we can give technology a human face.
Author: Hilde Van Horenbeeck
About Human Interface Group
Human Interface Group is Europe’s leading usability consultancy. Human Interface Group has
been coordinating usability projects for almost 20 years for a wide variety of larger and smaller
companies and public authorities.
We also have access to an extensive network of usability professionals throughout the world.
Human Interface Group is a partner in the International Usability Partners network, an
established network of independent usability companies who have joined up to provide
user experience services worldwide, from North America to the Far East.
Curious about how we can help you understand usability?
Visit www.higroup.com
Mail info@higroup.com
Call +32 (0) 15 40 01 38
12
