Creating beautiful apps: A mobile device is not just a small computer

By Marshall Datkowitz

imageA mobile device is much different than a PC. Sure they are smaller, but it’s much more than that. People bring to their mobile devices a whole different set of expectations. They use them differently, use them in different places, and want different things from them. Mobile devices make different physical and cognitive demands on users. This article will explore these differences and give you strategies you can put to work right away on your next mobile project.

First the most obvious – display size. The average size of a PC monitor is 21 inches, a display resolution no smaller than 1024 X 768. Compare that to the typical smart phone display, 3.9 inches and a resolution of 800 X 480. So clearly there is not as much space to work with. Your screens must be more concise, you can’t show as many options. The paths through your application have to be super clear; therefore you’ll need to spend more time on the functional design than you typically do. Strive to use less text and better icons.

If you want to rely on icons heavily to convey your features, functions and contents, your icons should be more concrete, less complex and represent the concept you’re trying to express as closely as possible. For example, you want to depict the concept of a note. For good concreteness your icon should look as much like a note as it can, perhaps a small piece of paper with a paperclip. For complexity you want it simple, so don’t include much detail – you don’t need lines on the paper or a texture on the clip. Finally, for representing the concept as closely as you can, go with the idea of a paper and pencil notes, a physical concept that just about everyone has experience with – be sure to stay away from confusing your concepts, don’t depict musical notes.

Your text should be as legible and as readable as possible. Legibility is how easy characters and words can be identified. To make your text more legible, use a font size of at least 10 points and turn up the contrast. Watch for Chromatic Aberration, that’s when you place red on dark blue (or dark blue on red) and cause the colours to vibrate – not good! Readability is how easily text can be read and understood. Keep your content simple and to the point, no need to wax poetic or be too technical. Get your point across as succinctly as you can, remember your users’ needs and try to address them without being too simple.

To wrap up screen size, here is what to remember: You don’t have as much room to work with so minimise the number of screens and options, minimise text – but when you do use text make it legible and readable – try to use icons instead. Your icons should look as real as they can, match what they do, and be simple.

Input – how we use it. The standard PC has several, but basically it boils down to a keyboard and a mouse. A mobile device relies mostly on fingers — gestures, on screen keyboard and tapping icons or buttons. The downside to the touch screen is that there is no tactile feedback like we have on a physical keyboard, therefore it is easier to make input mistakes and we are a lot slower using them. To compensate, provide sound or vibration for key presses and minimise text entry. Fingers can be large so make your buttons large (35 pixels square) and visually separated from other buttons or objects to reduce error.

imageUse innovative ways to input data like photographs (Daily Burn’s MealSnap app uses photography’s to add food to its calorie counter, Quick Response codes (links, text and other data), accelerometer to select items by tilting the phone to indicate a choice, use detected location (GPS) so users don’t have to manually enter a current address and lastly voice to input text into fields. Take advantage of the hardware – for example, Windows Phones have three dedicated buttons (back, start, and search) – use them to reduce clutter on the interface and therefore minimise error.

Context – where we use it. PC’s are used in homes and offices, which are pretty predictable and stable places, usually with good lighting, limited distractions and a relatively focused user. So take all those factors we know about PC users… and throw it all away for mobile users.

Environmental and cognitive issues that rarely occur at the desktop often appear in a mobile environment. Distractions such as noise will draw the user’s attention away from the device or at least interfere with detecting sounds from your application. Sun glare can obliterate the screen and make it difficult to use your application at all. A cognitive issue such as the overload of information makes it difficult for users to concentrate on your application – they look at the screen, look up at something else and then go back to the screen. Help users by paring down your application to the bare minimum so they can quickly understand what it is doing for them and allow them to readily find their way back when distracted.

Mobile device users (for the most part) are on the move. They have a limited amount of time and have come to your application for a specific reason. They come with questions that need to be answered immediately. If your application is to be successful it must help the users get to those answers quickly. If you can consistently help users they will come back often, they will spend time in your application.

Your users will be in a rush, so help them get to what they need!

Developers who are simply miniaturising the PC experience for the mobile device are missing the point. We need to focus our attention on what users want most from our applications and give it to them – simply but elegantly.

Marshal Datkowitz, InfragisticsMarshal Datkowitz
Senior User Experience Architect, Infragistics

http://www.infragistics.com

Marshal is a Senior User Experience Architect in the User Experience Group at Infragistics. He has over 15 years of experience in web and software UX design for business services, financial services and telecommunications. Marshal can be contacted via email at: mdatkowitz@infragistics.com.

Published by Sara Allison

Sara is the editor of Ubelly - when not heads down scouring Ubelly articles for typos (and not always catching them), she's scouting for new writing talent. Give her a shout @SaraAllison if you've got something to say about development/design and want to be heard.

3 Comments So Far, what do you think?

  1. rob de Beir

    Thanks.

    You say: “Windows Phones have three dedicated buttons (back, start, and search) – use them to reduce clutter on the interface and therefore minimise error.”

    Can you explain how to code/program/use the “start, and search” buttons in an app? Seems I can only use the “back” button in my app. Would very much like to use the “search” button to let users search in data in my app, but is not possible?

  2. Todd F Synder, Services - Principal Consultant, Infragistics

    Hi Rob -
    Marshal asked me to respond to your query. Applications have no direct control over the behavior of the standard WP7 device buttons. The back button keeps a stack of open applications (pages) and when the user hits the back button the previous page in the stack will be displayed. This may or may not be a page in your application. If a user hits the home or search button while your application is running the application will be tombstoned; if they then hit the back button your application will reload. Currently the behaviors for the home and search button are not accessible from 3rd party application; Microsoft has mentioned plans to allow this in the future and there will be support in Windows 8 for integrating the search charm bar button: http://msdn.microsoft.com/en-us/library/windows/apps/hh465238.aspx. For now the recommend approach is to include a search button in the WP7 application bar.
    I hope that helps

  3. Cesar

    Pretty component to content. I simply stumbled upon your weblog and in accession capital to say that I get in fact enjoyed account your blog posts.

    Any way I’ll be subscribing for your feeds or even I fulfillment you get entry to persistently
    fast.

    my web site :: recommended you read (Cesar)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>