Channels ▼


7 Steps To A Killer Mobile UI

4. Prototype Quickly

A fast way to test a mobile interface at a project's start is to use a low-fidelity prototype. Before the Palm Pilot's launch, it's said that the inventor carried around a block of wood the size of the device to see how it would feel in his pocket. Later, he'd have several rough versions of the UI sketched on it.

An early Palm Pilot prototype side by side with the real thing.

Prototyping a mobile app is easy: A pencil and paper are all you need, and because screens are small, you won't have much to draw. Test your prototypes by asking users to try to accomplish tasks on them. See what they do, and ask them what they're thinking. The results will be surprising and help you improve the design. A great design mantra is "Don't Make Me Think!" If your mobile design fails this test, your app will fail as well.

5. Avoid Errors That Ruin the UX

When people start creating mobile applications, they typically make some known errors. First, if they're creating the mobile version of an existing website, developers often try to replicate every feature of the desktop, failing to consider the intent of the mobile user.

Another common error is to have a navigation structure with too many levels. Deep structures aren't well suited to mobile; simpler models work better. Expecting users to be able to easily input text is another mistake: Entering text is much harder on mobile devices, so you'll want to minimize the need for input.

The applications that work best on mobile let users read content more than write it. Think about it: Do any of your favorite mobile apps require you to enter a lot of text?

6. Add Delightful Details

A mobile phone is always with you and knows where you are, which is why mapping applications are so successful. Phones can hear what you hear and see what you see, which explains the popularity of apps like Shazam and Instagram. Using location, the camera, and the microphone are all smart ways to get the same context as the user, and you can take advantage of that context in unique ways.

Even if you aren't using the mobile device hardware, there are several tricks you can use to delight users. Animations can add excitement to your application. If you're creating a mobile Web app, cache static content, and consider using a content delivery network so pages load faster.

Another welcome touch for mobile Web apps is to let users add them to their home screen, making them look and feel like a native app. If you do this, remember to include a back button on your UIs, giving users an accessible exit option.

Remembering user selections across sessions (for example, a recent items list) is another smart touch that will make the app more context aware and free users from having to repeat navigation steps. Together, these usability quick-wins work to make the user's life easier.

7. Fail Early, Recover Fast

Even with a good team of designers and developers, your first attempt at creating a mobile app will likely fail. (A recent survey showed that 38% of people are unsatisfied with the branded apps they tried.) The best strategy is to fail early and iterate quickly, learning how people are using your app and improving it continuously. Agile methodologies are a great way to align the mobile UIs you deliver with what users need.

Making the killer mobile UI is hard, but the strategies outlined in this article will help. Follow them faithfully, and you're on your way to writing some great mobile apps!

Tiago Simões is a senior software engineer in the R&D group at OutSystems, a cloud-based application developer.

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.