communication design for the mobile experience
DESCRIPTION
Presented to the Vancouver Chapter of the Society for Technical Communication at their May 2011 meeting. This is a discussion of issues, and strategies for creating usable, navigable, relevant content for mobile computing devices like smartphones. Included many examples and a case study.TRANSCRIPT
Communication Design for the Mobile Experience
by David Drucker
Society for Technical CommunicationTuesday, May 17, 2011
The State of the Market
What Do I Know Already?
Tips, Directions
Case Study
The State of the Mobile Phone Market
*Source : IDC, April 28, 2011 Worldwide Mobile Phone Tracker
The Global mobile phone market grew by just under 20% compared to Q1 of last year
2010: 310 million shipped
2011: 372 million shipped2010
2011
2010
2011
2010
2011
20102011
2010 2011
2010
2011
But, Smartphone shipments Grew at 4 times that rate
Smartphone shipments up 79.7%
Nokia maintained leadership position in the phone market, shipping 24.2 million units, with a 24.3% market share. Most of their sales are in the non-smartphone segment.
Source: IDC WorldWide Quarterly Mobile Phone Tracker
In Q1 of this year, phone shipments were actually a bit offExcept for Smartphone Manufacturers Apple & RIM
Unit S
hip
men
ts in M
illion
s
Nokia
Apple
RIM
Also, Tablets, particularly the iPad, have taken off
Smartphones & Tablets May Become the Main Computer for Some
Characteristics of this New Computer Specification
Small (and smaller) Screens
No Mouse
Touch screens operated by fingers (not styli)
Connected to networks wirelessly (either 802.11/Wi Fi or 3G/GSM)
In some cases, no physical keyboard (or optional keyboard)
Flat Screen
Camera(s), Speakers (and headphone jacks) and Microphones
Screen Dimensions
Device Portrait Landscape
iPhone 320 x 480 pixels480 x 320
pixels
iPad 768 x 1024 1024 x 768
RIM Playbook & Samsung Galaxy Tab
600 x 1024 1024 x 600
Also be aware
Limited Memory (RAM) (a short term situation)
People see One Screen at a Time (on Phones)
People Interact with One Application at a Time
Not a great deal of On-screen Help
No Hover
There is no Mobile Web. There is no Desktop Web. It’s just The Web in different situations.
The same goes for The Brain. New Situation.
Is What We Already Know Still Valid?
Is there Desktop Design and Mobile Design?
User-Centered Design
Who are the users?
What are their tasks and goals?
What’s their level of experience?
What functions do they need?
What information might they need?
How do they think the thing should work?
The User Model
PostureAre they standing? Sitting? Lounging?
AttentionDo you have full or partial attention of the user? Are they standing? Walking? Driving?
State of Mind/AttitudeAre they needing help? Panicking? Expecting difficulty or expecting a task to be simple?
The totality of the environment of a typical user
Photo by Calotype46 on Flickr
The User Model
Input constraintsCan they use both hands, only one hand or just their thumb? Can they talk or is it a noisy environment?
LightingIs it bright or dim in the room? Do they need large text or will smaller text do?
Time constraintsDo they have hours or seconds to perform a task?
The totality of the environment of a typical user
Photo by Calotype46 on Flickr
Standards and Rules of Thumb
Apple iOS and iPhone Human Interface Guidelines (HIG)
Android, RIM and Nokia UI Guidelines (not great, unfortunately)
Smashing Magazine “A User-Centered Approach To Web Design For Mobile Devices” by Lyndon Cerejo
The Mobify Blog: Top Ten Tips for Designing for Mobile E-Commerce (Parts 1 and 2) by ‘Nico’
Something to think about: Three Application Patterns
Productivity App
Utility App
Immersive App
Productivity App
Organizing the list
Adding to and subtracting from the list
Drilling down through successive levels of detail until the desired level is reached, then performing tasks with the information on that level
Utility App
Tend to present data in a flattened list
Users make Adjustments in a Settings section (in ‘back’)
Immersive App
Offers a full-screen, visually rich environment that’s focused on the content
Also includes games
Tends to hide much of the device’s user interface, replacing it with a custom user interface that strengthens the user’s sense of entering the world of the application
But about the Web...
Universally accessible
Less expensive to develop and maintain
Can be searched and accessed by all smartphones.
Most UI Principals Still Apply
Metaphors
Direct Manipulation
Objects on the screen remain visible while the user performs actions on them
The result of the user’s action is immediately apparent
Feedback
(Some of this is built into the browser)
Web Mobile Patterns are a bit differentThe mobile homepage should be a roadmap for the rest of the site
Don’t put too much on the homepage
Set different text sizes for portrait and landscape
Make Search work for youFor users of Google Site Search, a mobile version is
also available.
Make sure scan-ability is high
Making Lists more Scannable
Make sure lists are not too long
Consider filters to help make it shorter
Consider an index
If you absolutely have to have long pages, user something like lazy loading: load only when you need it, such as when you scroll down, or at the bottom, with a ‘more’ button.
Remember the Number 44
44 Pixels is the minimum height that we can usually handle on most phones today without needing to file down our fingertips
44 OK!
Flatten Navigation, where Possible
Consider Accordion views of information, like the one Wikipedia uses on their Mobile site
Each of these Sections Expands to show the content and the button name changes to ‘Hide’
Make it work for Mobile UsersPrioritize what your Web Site should offer to Mobile Users
Support some of the typical use cases (and states of mind) peculiar to Mobile Users:
Microtasking: Using the phone for short bursts of activity.
Local : Finding out what’s around the user.
Bored : Using the phone for distraction/entertainment*
*From Tapworthy – Designing Great iPhone Apps by Josh Clark
About those Smartphone users...
How to Make this happen?
You must Separate Content from Presentation
Even a simple web site has to separate the content (text and graphics) from the page layout and navigation.
Ways to do this:
Custom CSS for a Mobile Browser
A Content Management SystemIt doesn’t have to be much. Even Wordpress will do.
My Website on the desktop and iPhone
The WPTouch Plugin
Local developers, BraveNewCode.com
Automatically reformats a web site/blog for Mobile-based browsers
For more flexibility (and non-Wordpress Sites), products like Mobify can also do this (and more).
Case Study
The Problem
CURRENT DESIGN
CURRENT NEEDS
DESIGN MEETS NEEDS
The Problem
XKCD
Same Problem, Different Area
THE OATMEAL
Taking on the Problem:
