Channels ▼
RSS

Mobile

7 Steps To A Killer Mobile UI


Odds are, you have a smartphone and without realizing it, have developed a special, personal relationship with it. We only recently learned that Steve Jobs charged the team he assembled to create the first iPhone to "Create a phone that people will fall in love with." Whether we admit it or not, all of us have a special connection with our iPhone, Blackberry, Android, or Windows Phone.

But love is fickle. A recent Harris Interactive study revealed that bad mobile apps can dramatically damage a brand's reputation. Almost one-third of respondents said they told others when they had a bad experience with a mobile app. Still, more than half say they've recommended an app based on a positive experience.

Providing a good user experience in mobile applications is paramount. Here are seven steps to get you on the right path to delivering great mobile apps.

1. Define Your Goals

What are you trying to accomplish with the mobile app? Most importantly, what will your users want from it? You must define the goals your app will address. For this, you need to understand the day-to-day activities of your users related to this app, and their goals and motivations around it.

A good technique is to create personas — fictitious characters that represent your users — and write your specs as agile user stories. This approach puts you in the correct mindset to state requirements for your app. Something like this: "As a security officer, Johnny Bravo must check-in using his mobile phone to find out the next checkpoint that he should walk to so he can complete the randomized patrol tour." This tactic lets you see the application from the user's point of view.

There are, of course, differences between user stories for mobile and desktop applications, particularly when considering the mobile context. For instance, a mobile user might be walking or using one hand.

After gathering several of these stories, you must prioritize them according to their frequency. I'll explain why this is important shortly.

2. Analyze Existing Apps

If it's the first time you're creating a mobile app, take a close look at the interfaces of existing ones. Two obvious things that stand out: The screen size is much smaller and since many mobile devices use touch screen, the elements on the screen must be larger, so they're easy to touch.

The smaller screen and the larger elements mean that you can only put a limited number of items on the screen.

It can be a challenge to select what should go on the mobile screen; some usability experts even advocate that the mobile version of a website be created before the desktop version.

Prioritizing your user stories can help with this. You'll want to take a hard look at the features that your top priority users are using. Figuring out the 20% of the features that will be used 80% of the time is the goal of every usability expert. If you do this correctly with mobile, the desktop will also have its priorities right.

3. Native App or Mobile Web?

You'll need to decide whether to use HTML5 or native APIs. This decision has more implications for the technical implementation than for the user interface, however. Native apps usually run faster and are the best option for games, offline, and hardware intensive apps. Mobile Web apps are quicker to implement, easier to maintain, and often better-suited for enterprise applications. A hybrid approach makes sense if you want mobile Web apps' easy maintenance but need specific hardware capabilities, like the phone's camera or GPS.

Taking advantage of existing frameworks and platforms can be a solution, but whichever option you choose, make sure you can create and modify the UIs quickly, and that you'll be able to iterate often.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video