thumbs and fingers_2011
DESCRIPTION
TRANSCRIPT
Disclosure, duplication, or use of the document, or any of its contents, for purposes other than those authorize by Raizlabs without the written permission of Raizlabs is prohibited.
© Raizlabs Corporation 2011. All Rights Reserved.
Designing interfaces for thumbs and fingers
Greg Raiz @graiz
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
We’ve come a long way
2
Photo: Telefon AB LM Ericsson
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Hand held interfaces
3
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
A lot has changed
BlackBerry 6710
4
Nokia 1100 iPhone 1st Gen
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
What’s new?
• We’re more connected– We always have internet
• AdapBve Screen– Use every pixel
• LocaBon– GPS, Compass
• End-‐user apps– Non-‐technical users are installing apps
5
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
1. Physical
2. Typing and Tapping
3. Reading Content
4. LocaBon
5. Context
Designing for mobile
6
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
1. Physical
7
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
One Hand Free No Hands Free
2. Input ConsideraBons
8
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Know anyone like this?9
3. Reading ConsideraBons
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
4. LocaBon LocaBon LocaBon
• AcBonable Proximity
• Designing for someone who’s not in front of their desk
10
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Design for locaBon
• Home
• Work
• Car/Bus/Subway
• Walking
• Restaurant
• Shopping
• School
• Bathroom
11
Wednesday, February 23, 2011
5. Context around you
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential13
5. Object Context
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Design pa[erns that work on a PC may not work on a touch phone
The phone is not a PC
14
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Mobile vs. Desktop
14-‐18pt fonts typicalLarge hit targets 60-‐100pxOpBmize for 640x960AcBons:TapTap HoldSwipePinchRotateShake
Web/Desktop
10-‐12pt fonts typicalHit targets 16-‐32px squareOpBmize 1024x768AcBons:ClickRight ClickDouble ClickClick Drag
15
Mobile
Wednesday, February 23, 2011
Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith
TitleBack Done
VoicemailKeypadRecents ContactsFavorites
search
S
Visual Design
• Use large presentaBon fonts
• Use large finger Bp size targets
Wednesday, February 23, 2011
Quantity, not size
Minimize on-screen elements
Wednesday, February 23, 2011
Wednesday, February 23, 2011
Make things easy to tap
Wednesday, February 23, 2011
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
• Bu[on
• Slider
• Picker/Spinner
• Tabs
• NavigaBon
• * Lists *
Common Controls
21
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Lists and NavigaBon
22
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
1 screen 1 task
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Yes! But users don’t want to dig
Wednesday, February 23, 2011
Wire framing an iPhone Application
Also called storyboarding and pencil prototyping
Wednesday, February 23, 2011
Basic List Pattern
• We use wireframes to tell a story of how the interface is used. – Keep it simple– Less is more– Use established
design patterns when possible
Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith
TitleBack Done
VoicemailKeypadRecents ContactsFavorites
Wednesday, February 23, 2011
Basic List Secondary Action
Alphabetical long lists Searchable
Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith
Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith
Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith
Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith
Wednesday, February 23, 2011
Basic Table Pattern
• Tables are grouped into logical sections
• Each table cell is usually one of the following:– Text field– Label with details arrow– Label with status and arrow– Label with toggle
• Use a short descriptive footer to provide additional help
• Each grouping is usually connected logically
SettingsBack
Use text descriptions to make the application better
Status Good
Wi-Fi Not Connected
Sound
Advanced Configuration
LocationAuto-lock
Password Required
Name Required
Wednesday, February 23, 2011
Multi-line List Pattern
• Use the multi-line pattern to give users a peek at what may be in the details page.
• This uses up more vertical space so don't use it if you expect a lot of scrolling.
• Email is a good example where you usually read from the top and decide if you want details.
MessagesBack Done
Al Smith
Ben Smith
Carl Smith
Dave Smith
Eric Smith
Fred Smith
10:23pm
10:10pm
9:13pm
7:25pm
5:19pm
5:13pm
This is a short message that I'm writing to tell you that the thing you thought you did was…
I can't believe you didn't tell me you where going to be in town. I just talked to Peter…
Did You get the message about the meeting Next Wednesday? I think we should take…
Hey! Nice presentation. Before we sign the contract, let’s get a head start on the wire…
Should we order some pizzas? There’s a lot to do before we can ship this app, and we want…
I’m the finance minister of a remote island nation with a proposition for you. Please se…
Wednesday, February 23, 2011
Show Interaction
• The editing pattern allows you to add, edit and delete items from a list
• Consider supporting the swipe delete action
Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith
VoicemailKeypadRecents ContactsFavorites
TitleEdit
Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith
VoicemailKeypadRecents ContactsFavorites
TitleEdit
Delete
Swipe to delete gesture
Wednesday, February 23, 2011
Landscape Example
• For certain applications landscape may make sense• In this view the keyboard takes almost 50% of the space when
shown
Al SmithBen SmithCarl SmithDave Smith
Wednesday, February 23, 2011
Al Smith
Ben Smith
10:23pm
10:10pm This is a short message that I'm writing to tell you that the thing you thought you did was…
I can't believe you didn't tell me you where going to be in town. I just talked to Peter…
Are you sure?
• Simple modal UI to make decisions• Located near the thumb area, easy
to tap. • Quickly present a couple choices
Are you sure you want to delete?
Delete
Archive
Cancel
Wednesday, February 23, 2011
Progress Indicators
• There are three types of progress commonly used.– Title bar or tool bar spinner such as
in email. You can keep working.– Heads up display spinner. You have
to wait and we don't know how long.– Panel progress. You have to wait
but we can tell you how far along we are.
Downloading 2 of 4
Title
Wednesday, February 23, 2011
Free version: bit.ly/WireframeFree Pro version coming soon bit.ly/WireframePro
More Wireframes Online
Wednesday, February 23, 2011
Mobile Web
Wednesday, February 23, 2011
Wednesday, February 23, 2011
Wednesday, February 23, 2011
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Mobile Web Basics
• Can’t pinch/zoom with one hand
• Detect mobile browsers
• If you have the content the hard part is done
39
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Expect the unexpected
• No network
• Touch is not the same as Click
• Calls and Text messages
• Region Differences
40
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Tablets are Touch
41
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Hand-‐held
42
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Top Tablet Areas
• Magazine / Content
– Flipboard / Wired
• Field data collecBon
• Field sales tool
• Augmented TV experience
• Games
43
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
‘Coffee Shop’ usability
• Usability out in the real world
• Shoulder surfing
• Recruit, install, observe over coffee
• Fast iteraBon
44
Wednesday, February 23, 2011
Thank YouGregory Raiz
Follow me @graiz
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Slides not cujng it?
46
If you missed the presentaBon and would like to hire Raizlabs to give this talk please contact us.
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
About Raizlabs
• Based in Boston
• A growing team of 10 developers / designs• Developed over 40 mobile applicaBons
– 30 iPhone ApplicaBons– 5 Android ApplicaBons
– 5 iPad ApplicaBons
– Plus many prototypes
• Diverse experience in mulBple facets of mobile strategy design and development .
47
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Raizlabs Domain Experience
• Mapping technology
• Social networking tools
• Audio applicaBons
• E-‐commerce
• GEO-‐locaBon tracking
• Field data collecBon and calculaBon
• Magazine and book content presentaBon
• ApplicaBon deployment
• Enterprise apps
48
Wednesday, February 23, 2011
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
MulBple Plakorms
• ExperBse in leading mobile plakorms:– Android
– iPhone/iPad
• App creaBon targeBng mulBple plakorms– Common web APIs to Be mobile apps together
• Learn more at Raizlabs.com
49
Wednesday, February 23, 2011