Mobile Usability Guidelines to Implement Now

Mobile Usability Guidelines
to Implement Now

Marta Rauch

STC Silicon Valley
@martarauch
Marta Rauch
+Marta Rauch

What We'll Cover

• Mobile is the new PC
• Mobile usability guidelines
Key Takeaway:
• Mobile resources Information
developers can
play an important
role in mobile
usability.
Get involved!

Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.

Audience Poll:
Are you working on a mobile project now?

Do you expect to in the near future?


Assignment

Listen for the top 3 takeaways
to bring back to your workplace.


Mobile is the New PC

Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now " STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.

Why Should I Care?


The Megatrend of the 21st Century

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

Starting in 2010,
smartphones sold
more than PCs

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

Sources: Mary Meeker, Canalys, Cisco


Mobile is Big Business
Over a billion apps per month downloaded from
the Apple App Store as of October, 2011
In March 2012, Apple hit 25 billion downloads

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

Sources: TechCrunch, Apple, Forrester


It’s TIME for a Mobile Strategy

Cover article for TIME’s
8/2012 Wireless Issue:
“10 Ways Your Phone
is Changing the World”

Sources: TIME


Guidelines for
Mobile Usability


1. Understand Your Mobile Users
Who, What, When, Where, and Why mobile
Do a task analysis:
• Who are your mobile users?
• What mobile tasks do they need to perform, and why?
• Where are they when they do these tasks?

Build use cases based on
scenarios that include
the mobile context.

Create mobile personas.


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?


2. Define Your Mobile Content Strategy
Your plan for delivering what your mobile users
want and need.

• Understand your mobile product
Example: an app or a mobile-friendly web site?
• Align with competitors’ mobile offerings
• Plan output for target devices
• Match content to users’ mobile
tasks and environment
• Base strategy on your mobile
use cases, scenarios, personas


Challenge: Reach Customers Anywhere, Anytime,
on Any Device

• Do a content analysis
• Develop a unified content strategy
Resources: Ann Rockley, Scott Abel, Kristina Halvorson

Tips:
• Separate content from format
• Plan CMS metadata and tagging
• Set up output for target devices
• Consider using conditional content,
CSS, media queries
• Adjust workflow, tailor CMS


Example: Adaptive Content

Separate layers for information, presentation

Techniques such as media queries deliver appropriate layout

Biggest challenge: tables and graphics Content adapts to
multiple layouts,
resolutions, devices

Resources: Zoe Mickley Gillenwater , Karen McGrane http://mediaqueri.es/


3. Adopt Mobile Style Guidelines

Edit, Edit, Edit

Source: 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 3 seconds?
• Is the information too dense?
What can be removed?

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


Sample Mobile Writing Guidelines

Android Design, Writing Style:
• Be friendly.
• Talk directly to the reader.
• Make the user feel safe,
happy, and energized.

iOS Human Interface Guidelines:
• Use terminology that users understand.


4. Define Touch Gestures, Terminology
• Touch A mobile must-read
for touch devices
• Press
• Tap
• Drag
• Flick
• Slide
• Swipe
• Pinch
• Rotate
• And others…plus multi-gesture combinations
Touch Gesture Reference Guide:
http://www.lukew.com/touch/TouchGestureGuide.pdf


Example: NOOK Tablet Gestures

NOOK Quick Start Guide


Adhere to OS Design Guidelines
Example: the Back control on Android and iOS

iOS: Software
Back control

Android: Physical
Back control at
Android bottom of device iOS


5. Provide Effective User Assistance
Includes user interface strings.
Examples:
• Tabs, lists, icons, buttons
• Confirmations, progress messages
• Errors, cautions
• Alternative text

May also include:
• Instructions
• Link to FAQ or help
• Tips, overlays
• Getting started, tour


Examples: Welcome, Getting Started Tour

Welcome Getting Started Tour


Examples: Overlay Tour, Link to Online Help

Overlay Tour Link to Online Help


Examples: Instruction, Illustration, Progress Message

Instruction Illustration Progress Message


Examples: Embedded, Tip, Overlay, Discoverable

Embedded Tip Overlay Discoverable

From Theresa Neil’s Mobile Design Patterns and Mobile Design Pattern Gallery


6. Use Progressive Disclosure
Provide what they need, when they need it:
• Main tasks on the first screen
• Quick access to key tasks


7. 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
• Make tasks obvious
• Use design to focus
on critical content

Design resource: Noah Iliinsky, Beautiful Visualization

Make Your Website Mobile-friendly

Responsive design Which page
would you
Media queries, fluid layout, adaptive images
rather read?
or
Full Site Mobile Site
Separate mobile site
Links: Mobile Site, Full Site

Multi-device user experience
Fast download
Optimized for browsers
used by target customers

Marta Rauch, "Mobile Usability Guidelines to Implement Now" STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.

Example: Responsive Design

Content looks
great on any
device

Sources: Jquery Mobile Framework, Todd Parker, Scott Jehl
Responsive Web Design, Ethan Marcotte


Accommodate Different Displays
Tip: The HTML viewport meta tag
resizes content to fit the screen.
Example:
<meta name = "viewport" content =
"width = device-width">

Resources: Joe Welinske’s Developing User Assistance for Mobile Apps, iOS Configuring the Viewport


8. Provide Effective Mobile Controls

• Usable labels Example: tip
for an unusual
• Embedded hints gesture

• Orientation
• Effective on multiple devices
• Handedness
• Tips only if necessary
such as for unusual gestures

http://developer.android.com/design/patterns/help.html

Design the Tappable Area

• Space between touch controls
• Size: Plan for
• Apple: fingertip-size, “44 x 44 points” changing
orientation
• Microsoft: 38 x 38 pixels
• Google: density-independent pixels (dp),
enables scaling

Marta Rauch, @martarauch "Mobile Usability Guidelines to Implement Now" STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.

Tablets and
Consider Ergonomics eReaders held
with two
hands while
seated

Smartphones
typically held in
one hand while
standing


Minimize the Need to Type

• Leverage mobile Spin dial
to select
platform tools numbers
• Use auto-complete
and suggestions
• Allow for typos, abbreviations
• Include defaults
• Compute field values
• Ensure textboxes
fit the screen
Use voice
commands


Include Some Awkward Controls

Prevent accidents with:
• Tricky gestures –
slide-to-unlock, answer,
power off, delete
• Confirmation screens
• Undo Slide to
unlock


9. Use Prototypes to Validate Mobile UX

• Use templates to create mobile mockups
for early feedback
• Build rapid prototypes with sketches, PPT, HTML
• Use simulators, emulators:
• iOS Interface Builder
• Android SDK
Resource: Joe Welinske

Keynotopia
templates

http://keynotopia.com/


Example: Android Template

Mock up
mobile
messages

http://worldinfo18.blogspot.com/2012/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 Provide
labels, hints,
Google: TalkBack accessibility service, alternative
third-party apps such as Sonalight text
texting-by-voice


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
• 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
• Localized icons, screenshots
• Language-specific characters
• Messages
• Installers, setup
Shailendra Musale, Localizing for Mobile Devices: A Primer


Summary: Guidelines Mobile Usability

1. Know your mobile users,
understand their mobile tasks
2. Define the mobile content strategy
3. Mobile style guidelines
4. Touch terminology
5. Effective UI, user assistance
6. Progressive disclosure
7. Small screen usability
8. Intuitive controls
9. Prototypes
10. Accessibility
11. Test on devices, in environment
12. Mobile translators


Selected Mobile Resources
• Marta Rauch, Twelve Key Mobile Usability Guidelines You Need to Implement Now
• Joe Welinske, Developing User Assistance for Mobile Apps: http://www.writersua.com/mobile/book.htm
• Josh Clark, Tapworthy: Designing Great iPhone Apps: http://shop.oreilly.com/product/0636920001133.do
• Luke Wroblewski, Mobile First: http://www.abookapart.com/products/mobile-first, Data Monday
• Ann Rockley, Managing Enterprise Content: A Unified Content Strategy and eBooks 101:
http://www.ebooks101book.com/
• Karen McGrane, Content Strategy for Mobile (coming soon from A Book Apart)
• Touch gesture reference guide: http://www.lukew.com/ff/entry.asp?1071
• Theresa Neil, Design patterns: http://www.uxbooth.com/blog/mobile-design-patterns/
Mobile Design Pattern Gallery
• Jakob Nielsen, Alertbox: http://www.useit.com/alertbox/mobile-writing.html
• Noah Iliinske, Beautiful Visualization: http://shop.oreilly.com/product/0636920000617.do
• Ethan Marcotte, Responsive Web Design: http://www.abookapart.com/products/responsive-web-design
• Stencils for iPhone, iPad, Android, Windows Phone 7: http://www.uistencils.com/
• Mobile prototyping, http://rachelhinman.com/ Rachel Hinman, The Mobile Frontier
• 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/


Keep an Eye on Mobile Trends

• Augmented reality (AR)
• Artificial Intelligence (AI)
• Sharing location via mobile (SoLoMo)
• Mobile payments
• HTML5, CSS3
• Biometrics
• New types of devices
• Multi-device UX
• New interfaces:
NUI, OUI


Top Takeaways

Share one of the top takeaways
you plan to bring back to your workplace.


What We Covered

• Mobile is the new PC
Key Takeaway:
• Guidelines for Information
mobile usability developers can
play an important
• Resources role in mobile
usability.
Get involved!
Any questions?


• Twitter: @martarauch
• LinkedIn: Marta Rauch
Connect
• Google+: +Marta Rauch with me!
• SlideShare: Marta Rauch

Join me at my upcoming presentations:
• LavaCon 2012
• STC webinar in October, 2012
• TC Camp, 2013
• Human-Computer Interaction International (HCII) 2013
• Intelligent Content 2013 mobile workshop
Marta Rauch, "Providing Effective User Assistance for Mobile Devices” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.

Mobile Usability Guidelines to Implement Now

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Mobile Usability Guidelines to Implement Now

Ähnlich wie Mobile Usability Guidelines to Implement Now (20)

Mehr von Marta Rauch

Mehr von Marta Rauch (14)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Mobile Usability Guidelines to Implement Now