As mobile devices become increasingly capable and the mobile audience becomes increasingly sophisticated, companies are stretching the bounds of possibility when it comes to mobile sites, native applications and Web apps. It becomes all the more important to consider not just graphical design, but also the physical design of your mobile product. It is essential to know not only who will be using it, but how and where they will be using it.
This is the fifth in our series of six app-related articles. See also:
• Mobile applications: native v Web apps – what are the pros and cons?
• What is a mobile Web app? Here’s expert opinion from the W3C
• Do mobile apps deliver ROI?
• The open market approach: Q&A with GetJar, the No1 independent app store
• How museums bring collections to life with augmented reality
The following guide was compiled from the responses of the following mobile design and usability gurus:
- Kevin Arthur, usability analyst, Synaptics
- Barbara Ballard, president, Little Springs Design
- Josh Clark, designer, developer, author, Global Moxie
- Suzanne Ginsburg, principal, Ginsburg Design
- Jason Grigsby, partner, Cloud Four
- Ian Homer, founder, Bemoko
- Steven Hoober, director of interaction design, Little Springs Design
- Greg Nudelman, principal, Design Caffeine
- Corey Pressman, president and CEO, Exprima Media
- Nancy Proctor, director of mobile, Smithsonian Institution
- Alan Tifford, principal experience designer, Intuit
- Itai Vonshak, co-CEO, Elements
- Scott Weiss, head of user experience, Symbian
- Luke Wroblewski, entrepreneur in residence, Benchmark Capital
- Special thanks to Barbara Ballard for organizing this guide.
All these experts spoke at Design for Mobile in Chicago, USA, September, 2010.
If you missed it read this show review by Ian Homer of Bemoko
The anatomy of good mobile design
1) Putting things in context
Understand, respect and design for your users’ contexts. These include:
• Environmental: don’t make noise when I’m in a meeting; how do you get my attention on a noisy bus; when it’s cold, can I use the touch screen with my gloves on?
• Social: when I’m working, don’t distract me with updates from my social network; when I’m playing don’t distract me with work-related stuff.
• Technical: I’m on a BlackBerry, so why does this app look and work like an iPhone?
• Personal: have you considered that I might not have perfect sight, hearing or coordination. Did you consider that I prefer/need to use the phone one-handed or I may be left-handed?
Contributors: Ballard, Hoober, Vonshak
2) The mobile context
Mobile means ‘on the go’ and ‘away from my desk’. But I might be on the peak of Kilimanjaro, curled up on the couch or anywhere in-between.
• Establish the mobile contexts when I’m most likely to access your app/site.
• In this context, what are the potential opportunities for you and distractions for me?
• Design with this context in mind. Make it convenient, necessary and easy for me to use. What are the most appropriate features, controls and input methods?
• The mobile impulse usually boils down to one of three mindsets:
a) I’m micro-tasking. Optimize for quick bursts of activity. Identify the recurring tasks and then polish, polish, polish.
b) I’m local. Take advantage of location, audio and video sensors to establish context.
c) I’m bored. Distract me by taking me on a journey of discovery.
Contributors: Clark, Ballard, Hoober
3) Make the most of the Platform
Always design for mobile first – don’t just re-purpose your web site/app. Design/redesign from the ground up to take advantage of the new opportunities that mobile offers which desktop PCs and other channels don’t.
• Mobile devices have on-board GPS, compass, camera, accelerometer, microphone and other functions.
• Advanced mobile devices are sensor-rich – phones can tell where they are, the direction they’re facing, the angle they’re titled at, what they can hear or see.
• Different mobile devices have different capabilities and limitations. Play to the strengths of each and try to avoid watering down the experience on one device because of constraints on another.
• If you are designing for a particular device/OS, make sure you know it intimately. Whatever the handset does normally, do that. Inconsistency leads to errors and frustration. So if the handset usually saves changes automatically, don’t expect people to press a save button.
Contributors: Nudelman, Homer, Hoober, Pressman, Tifford, Wroblewski
But:
• Don’t complicate things unnecessarily. Keep the user interface as simple and intuitive, as possible.
• Maintain consistency of look and feel across channels. Yes the functionality, capability and visual may vary, but the experience should be intuitive and familiar when switching from PC Web to mobile, for example.
Contributors: Nudelman, Homer
4) Mind your fingers and thumbs
Many high-end handsets now have touch screens. Rather than being operated/navigated by buttons and cursor, the phone is operated by touch or tapping and movements of the fingers and thumb called gestures. Touch interaction requires careful design. This isn’t just graphic design, it is now industrial design, as you are designing a physical interface to be explored by human hands.
• Obey the touch-target rules. The norm for touch-target fields is one centimeter, but all platforms (iPhone, Android, Symbian et• will deviate slightly. If the target field is less than one centimeter – as is often the case with the input fields adjacent to advertising links – it is harder to tap with precision.
• Remember fingers and thumbs are imprecise tools. Be forgiving of imperfect input. A touch control, such as a virtual button, shouldn’t perform an action immediately on contact. Indicate the contact with visual feedback and give users a chance to slide their finger away if they touched the wrong control. Only activate the control when the finger lifts off from the button.
• The design of your interface is as important as the handset itself, with honest-to-god ergonomic issues. Consider how the interface feels in the hand, where fingers naturally come to rest, where it’s comfortable to tap. Organize the screen for the fingers or, more importantly, the thumb, since that’s the digit that gets the workout when you work a mobile phone one-handed. While a thumb can manage to sweep the entire screen, it can only reach a third of the screen effortlessly – that’s the side of the screen opposite the thumb. All frequently used buttons and tap targets should be in this tap zone. This is why on touch-screen phones the toolbars are always at the bottom.
• Don’t overdo gestures. Gestures are a great way to interact with content, but they should be used sparingly and carefully. Some gestures are well-known such the pinch to resize pictures etc, but many users won’t know all gestures, so never make a gesture the only way to perform an action.
Contributors: Weiss, Clark, Arthur
5) Accommodate the challenges of mobile
Mobile devices have many constraints including small screens, lower processing power, limited battery power, intermittent connectivity, varying connection speeds, in-pocket interaction.
• Don’t fight the constraints of mobile, work with them to guide your design to an elegant solution.
• Beware of pocket calls – they can be costly. Touch-screen devices have difficulty distinguishing between intentional taps and swipes from fingers and accidental ones from warm body parts even through clothing (especially on hot days). Use physical lock buttons or multi-digit or multi-point gestures to activate.
• Minimize the pain. Mobile is unpredictable. Try to minimize the impact on the user experience when the network connection is lost (by using data caching) and keeping the user informed.
• Fast load or action times are important, but visual feedback is, perhaps, more important. Use distraction graphics – but don’t use too much processing power – while the app/site loads, and always keep up the illusion that the user is in control of the device.
• Just because mobile can do it, doesn’t mean it is best. Take a museum tour, for example, if visitors don’t have ear plugs, will they want to hold their phone to their ear for a 45-minute audio tour, or hold the phone aloft for an augmented-reality (AR) tour? Mobile is great for two-way interaction, but will visitors want to be constantly switching from ear to eye?
Contributors: Weiss, Ginsburg, Wroblewski, Proctor
6) Empower your customers
• You’d be amazed what people are prepared to do on a mobile phone, as long as it is useful, straight-forward and fun. Yes, even paying taxes. Look for things you couldn’t imagine anyone using their phone to do, research it, then build it.
• The content is the interface. Mobile screens are tiny in comparison to desktop computer screens, thus every pixel of UI should add value to the user experience. Make it beautiful, but make it useful.
• Make it quick and easy. Remember screens are small, entering information is difficult and mobile users are often multi-tasking, using a phone one-handed, or in a hurry. Minimize errors and make users more efficient, by storing preferences and recent queries, and suggesting matches.
Contributors: Tifford, Ginsburg
7) Test, test, test
Test the app/site on actual devices, with real customers, using it in the typical and expected real-world contexts/situations.
• Emulators are great, but they are not the same thing as real testing on real devices on real mobile networks by real people.
• Break the glass barrier when working with users. Be flexible and mobile with your testing strategies. Go to where they are more often. Ensure the entire team engages with users directly even if that means you need to bring them to the labs.
• The hardware should always be considered… the handling (or gripping) of a device can change the entire usability of your app [see above]. In the early days of design process, print off the screens and stick them to a plastic model.
Contributors: Grigsby, Ballard, Tifford, Vonshak
8) The iconic icon
The icon is most commonly associated with the download app. However, increasingly mobile sites and Web apps also use mobile launchers, which are icons that hyperlink to the Web address.
• Do not underestimate the importance of this tiny collection of pixels. Give this icon a disproportionate amount of design attention and polish. If you don’t have the design expertise, hire a professional – it is worth it.
• The icon – more so than the name or description – is what catches the eye of the customer and encourages them to find out more/download the app. Once downloaded, the icon needs to jump out of the mobile start page/home screen every time the device is switched on.
• Make your icon colorful, make it memorable, make it fun, but whatever you do, don’t make it mysterious. The icon is an advertisement, so it has to be clear about what it’s selling. The icon is the product packaging, so it’s great if it’s pretty, but it’s more important to be descriptive and identifiable at a glance. Don’t be too clever or cryptic.
Contributors: Clark, Ginsburg
• Special thanks to Barbara Ballard for organizing this guide.
• Catch up with all these experts (and more) at Design for Mobile in Chicago, USA, September 20-24, 2010. For details see http://www.design4mobile.mobi. mobiThinking readers can save 15 percent on the regular price using the special code: “mobithinking”.
• Comment below or email editor (at) mobiThinking.com.
Further reading on mobile apps:
• Mobile applications: native v Web apps – the pros and cons?
• What is a mobile Web app? Expert opinion from the W3C
• Do mobile apps deliver ROI?
• The open market approach: Q&A with GetJar
• Bring your mobile campaign to life, virtually: the insider’s guide to augmented reality
• How museums bring collections to life with augmented reality
And don’t miss:
• Guide to mobile agencies
• Guide to mobile industry awards
• Guide to mobile ad networks
• Compendium of global mobile stats
• The insiders’ guides to world’s greatest markets
• Conferences & awards for mobile marketers, with offers
• The big page of essential links
Leave a Reply