12 key mobile usability guidelines you need to implement now

Marta Rauch

12 Key Mobile Usability

Guidelines to Implement

Now

Marta Rauch Intelligent Content 2012

@martarauch

Marta Rauch

+Marta Rauch

• Mobile is the new PC

• 12 key mobile usability guidelines

• Mobile resources

What We'll CoverKey Takeaway:

It’s about the

content. If you

are involved with

intelligent

content, you can

contribute to

mobile usability

2


Detailed information is in my STC Intercom article:Twelve Mobile Usability Guidelines to Implement Now

Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012.

Mobile is the New PC

3

Why Should I Care?

4Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012.

As big as the shift to radio, TV, or Internet

In 2010 and 2011, smartphones sold more than PCs

The Megatrend of the 21st Century

5

The number of mobile-connected devices will exceed the world’s population in 2012


Over a billion apps per month downloaded from the Apple App Store as of October, 2011

In March 2012, Apple will hit 25 billion downloads

Mobile app revenue to grow

Mobile is Big Business

6

Mobile app revenue to growfrom $10.2 B in 2010 to $100 Billion in 2015


12 Key Mobile Usability

Guidelines

7

Who, What, When, Where, and Why mobile

Do a task analysis:

• What mobile tasks do users need to perform?

• What is the context (environment)?

1. Understand Your Mobile Users

8

• What do users want to do?

Create mobile personas

Build use cases that include the mobile context


Who are your mobile users?

What are their mobile tasks?

What environment are they in?


What types of

devices do they

use?


Do the tasks

involve a lot

of reading?


Do the tasks

involve a lot

of data

entry?


1. Games

2. Weather

3. Social networking

4. Maps, navigation, search

5. Music

6. News

7. Entertainment

8. Video, movies

9. Shopping, retail

Most Frequent Mobile Tasks

13

9. Shopping, retail

10. Dining, restaurant

11. Sport

12. Productivity

13. Communication

14. Food, drink

15. Travel

16. Health

17. Education, learning

18. Household, personal, car


http://www.nngroup.com/

Top 10 Android app download categories for the 1 billionth download:

1. Games2. Entertainment3. Tools4. Communication5. Productivity6. Personalization

Most Frequent Android App Downloads

14

7. Music & Audio8. Social9. Media & Video10. Travel & Local

Via +Android on Google+, 12/2011

https://plus.google.com/u/0/104629412415657030658#104629412415657030658/about


2. Define the Mobile Content Strategy

• What your mobile customers want

• Mobile tasks and context

• How this will address their mobile needs

• Align with competitors’ mobile offerings

• An app or a mobile-friendly web site

• Target mobile devices

• Mobile architecture


• Mobile architecture

• Structure

• User experience, interface

• User assistance

• Context-sensitivity• Accessibility

• Resources, schedule, budget, tools, process, development, Content Management metadata and tagging, output formats, testing, translation, distribution, feedback, analytics, updates…

3. Adopt Mobile Style Guidelines

Edit, Edit, Edit


- Josh Clark, http://globalmoxie.com/

Tips for Ruthless Editing

Ask:

• What is the primary purpose of this screen?

• Will users know how to interact with it within three seconds?


with it within three seconds?

• Is the information too dense?What can be removed?

- Rachel Hinman, http://rachelhinman.com/

4. Define Touch Gestures, Terminology

• Touch

• Press

• Tap

• Drag

• Flick

• Slide

A mobile must-read

for touch devices


• Slide

• Swipe

• Pinch

• Rotate

• And others…plus multi-gesture combinations

Touch Gesture Reference Guide: http://www.lukew.com/touch/TouchGestureGuide.pdf

Adhere to OS Design Guidelines

Example: the Back control

iOS: Software Back control


Android: Physical Back control at bottom of device

Back control

5. Develop Effective Mobile UI, User Assistance

Examples:

• Gestures

• Labels: icons, buttons, tabs, lists(no tool tips or hover text)

• Getting started, tour

• Instructions, examples


• Instructions, examples

• Tips, overlays

• Cautions

• Confirmations

• Error messages

• Alternative text

Examples: Welcome, Getting Started Tour


Welcome Getting Started Tour

Examples: Instruction, Illustration, Progress Message


Instruction Illustration Progress Message

Examples: Embedded, Tip, Overlay, Discoverable


From Theresa Neil’s Mobile Design Patterns. http://www.uxbooth.com/blog/mobile-design-patters/Look for her new book, Mobile Design Pattern Gallery

Embedded DiscoverableTip Overlay

6. Make the Most of Small Screens

Mobile content is twice as difficult to read

What you can do:

• Provide most important content first

• Plan for partial attention


• Plan for partial attention

• Make tasks obvious

• Use design to focuson critical content

Provide a Mobile-friendly Website

Responsive design

or

Separate mobile site

Links: Mobile Site, Full Site

Which version of

the news would

you rather view on

your phone?

Full Site Mobile Site

25

Fast download

Optimized for browsers used by target customers

Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.

Responsive Design

26Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.

Jquery Mobile Framework, Todd Parker, Scott Jehl

Tip: The HTML viewport meta tag

resizes content to fit the screen.

Example:

<meta name = "viewport" content =

"width = device-width">

Accommodate Different Displays


• Usable labels

• Intuitive gestures

• Embedded hints

• Tips as necessary

7. Provide Effective Mobile Controls

28

• Tips as necessary

• Orientation

• Handedness


• Space between touch controls

• Size:

• Apple: fingertip-size, “44 x 44 points”

• Microsoft: 38 x 38 pixels

• Google: density-independent pixels (dp),

Design the Tappable Area

Plan for

changing

orientation

29

• Google: density-independent pixels (dp),enables scaling


Consider ErgonomicsTablets and

eReaders held

with two

hands while

seated


Smartphones

typically held in

one hand while

standing

• Use auto-completeand suggestions

• Provide error recovery

• Include defaults

• Compute field values

Minimize the Need to Type

Spin dial to select numbers

31

• Compute field values

• Ensure textbox fits screen

• Allow for typos, abbreviations

• Leverage mobile platform tools


Use voice commands

Include Some Awkward Controls

Prevent accidents with:

• Tricky gestures:

slide-to-unlock, answer, power off, delete

32

power off, delete

• Confirmation screens

• Undo


Slide to unlock

8. Provide What They Need, When They Need It

Progressive disclosure:

• Main tasks on the first screen

• Quick access to key tasks


9. Use Prototypes to Validate Mobile UX

• Get early feedback

• Use templates to create mobile mockups

• Build rapid prototypes with sketches, PPT, HTML

• Use simulators, emulators:

• iOS Interface Builder

34

• iOS Interface Builder

• Android SDK


Keynotopia

templates

http://keynotopia.com/

Example: Android Template

Mock up

mobile

messages


http://worldinfo18.blogspot.com/2011/02/51-free-mobile-ui-web-ui-wireframe-kits.html

Example: iPhone Template


http://developer.yahoo.com/ypatterns/about/stencils/

10. Build In Mobile Accessibility

Apple: Siri, VoiceControl, Speech Synthesis, VoiceOver

Google: TalkBack accessibility service, third-party apps such as Sonalight texting-by-voice

Provide

alternative

text


11. Test on the Target Mobile Devices

Mobile test considerations:

• Early tests on emulators

• Later tests in mobile environment

• Mobile usability

• Messages in all languages

• Download speed

38

• Download speed

• Third-party software, multiple browsers

• As many actual devices as possible

• Device labs (example: Device Anywhere)


12. Work with Mobile Translators

Get agreement on:

• Language for gestures

• Text truncation, resizing

• Line- and word-wrapping

• File size, format of icons, screenshots

• File names

39

• File names

• Localized icons, screenshots

• Language-specific characters

• Messages

• Installers, setup


Shailendra Musale, Localizing for Mobile Devices: A Primer

Summary: 12 Key Requirements for

Mobile User Assistance

1. Know your mobile users and understand their mobile tasks

2. Define the mobile Content Strategy

3. Mobile style guidelines

4. Touch terminology

5. Effective UI, user assistance


6. Small screen usability

7. Intuitive controls

8. Progressive disclosure

9. Prototypes

10. Accessibility

11. Test on devices, in environment

12. Mobile translators

• Augmented reality

• Artificial Intelligence

• Image recognition

• Biometrics

Keep an Eye on Mobile Trends

41

• Sharing, location

• Transactions

• HTML5

• New interfaces:NUI, OUI


• Twelve Mobile Usability Guidelines to Implement Now, http://intercom.stc.org/2011/11/twelve-key-mobile-usability-guidelines-you-need-to-implement-now/

• Developing User Assistance for Mobile Apps: http://www.writersua.com/mobile/book.htm

• Tapworthy: Designing Great iPhone Apps: http://shop.oreilly.com/product/0636920001133.do

• Mobile First: http://www.abookapart.com/products/mobile-first

• Alertbox: http://www.useit.com/alertbox/mobile-writing.html

• eBooks 101: http://www.ebooks101book.com/

• Beautiful Visualization: http://shop.oreilly.com/product/0636920000617.do

Selected Mobile Resources

42

• Beautiful Visualization: http://shop.oreilly.com/product/0636920000617.do

• Responsive Web Design: http://www.abookapart.com/products/responsive-web-design

• Touch gesture reference guide: http://www.lukew.com/ff/entry.asp?1071

• Stencils for iPhone, iPad, Android, Windows Phone 7: http://www.uistencils.com/

• Mobile prototyping: http://rachelhinman.com/

• Design patterns: http://www.uxbooth.com/blog/mobile-design-patters/ Mobile Design Pattern Gallery

• Translation: http://smusale.tripod.com/writing/wireless_primer.pdf

• Nielsen Norman Group seminars, articles, research: http://www.nngroup.com/

• User Interface Engineering seminars, articles, podcasts: http://www.uie.com/


• Mobile is the new PC

• 12 key mobile usability guidelines


What We Covered

Key Takeaway:

It’s about the

content. If you

43



content. If you

are involved with

intelligent

content, you can

contribute to

mobile usability

44

• Twitter: @martarauch

• LinkedIn: martarauch

• Google+: Marta Rauch

Marta Rauch, "Providing Effective User Assistance for Mobile Devices",” IEEE PCS IPCC. Copyright 2011.

Follow me!

12 key mobile usability guidelines you need to implement now

Technology

mobile users

number of mobile

mobile needsalign

mobile personas

mobile content strategywhat

mobile contextmarta

mobile mustread touch

frequent mobile tasks1