A mobile device is much different to a PC. Sure, they are smaller, but it’s much more than that.
People bring a whole different set of expectations to their mobile devices. 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 smartphone 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 might 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. 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!
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. 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.
Use innovative ways to input data like photographs (Daily Burn’s MealSnap app uses photography to add food to its calorie counter (http://www.windowsphone.com/en-US/apps/a14809e5-da9d-e011-986b-78e7d1fa76f8), Quick Response codes (links, text and other data) and voice to input text into fields (Google search).
Use detected location (GPS) so users don’t have to manually enter a current address, and an accelerometer to select items by tilting the phone to indicate a choice. Take advantage of the hardware, Windows Phones have three dedicated buttons (back, start, and search) – use them to reduce clutter on the interface and therefor minimise error.
Context – where we use it
PCs are used in homes and offices; pretty predictable and stable places. What do we know about PCs and PC users? Good lighting, limited distractions and a relatively focused user. Take all those factors we know 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 it! Keep your application to the bare minimum and do it really well.
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.