Thumbs and fingers_2011

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



Hand held interfaces

3



A lot has changed

BlackBerry 6710

4

Nokia 1100 iPhone 1st Gen



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



1. Physical

2. Typing and Tapping

3. Reading Content

4. LocaBon

5. Context

Designing for mobile

6



1. Physical

7



One Hand Free No Hands Free

2. Input ConsideraBons

8



Know anyone like this?9

3. Reading ConsideraBons



4. LocaBon LocaBon LocaBon

• AcBonable Proximity

• Designing for someone who’s not in front of their desk

10



Design for locaBon

• Home

• Work

• Car/Bus/Subway

• Walking

• Restaurant

• Shopping

• School

• Bathroom

11


5. Context around you


February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential13

5. Object Context



Design pa[erns that work on a PC may not work on a touch phone

The phone is not a PC

14



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


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


Quantity, not size

Minimize on-screen elements



Make things easy to tap




• Bu[on

• Slider

• Picker/Spinner

• Tabs

• NavigaBon

• * Lists *

Common Controls

21



Lists and NavigaBon

22



1 screen 1 task



Yes! But users don’t want to dig


Wire framing an iPhone Application

Also called storyboarding and pencil prototyping


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


TitleBack Done



Basic List Secondary Action

Alphabetical long lists Searchable






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


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…


Show Interaction

• The editing pattern allows you to add, edit and delete items from a list

• Consider supporting the swipe delete action



TitleEdit



TitleEdit

Delete

Swipe to delete gesture


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


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


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


Free version: bit.ly/WireframeFree Pro version coming soon bit.ly/WireframePro

More Wireframes Online


http://bit.ly/WireframeFree

http://bit.ly/WireframeFree

http://bit.ly/WireframePro

http://bit.ly/WireframePro

Mobile Web






Mobile Web Basics

• Can’t pinch/zoom with one hand

• Detect mobile browsers

• If you have the content the hard part is done

39



Expect the unexpected

• No network

• Touch is not the same as Click

• Calls and Text messages

• Region Differences

40



Tablets are Touch

41



Hand-‐held

42



Top Tablet Areas

• Magazine / Content

– Flipboard / Wired

• Field data collecBon

• Field sales tool

• Augmented TV experience

• Games

43



‘Coffee Shop’ usability

• Usability out in the real world

• Shoulder surfing

• Recruit, install, observe over coffee

• Fast iteraBon

44


Thank YouGregory Raiz

[email protected]

Follow me @graiz


mailto:[email protected]



Slides not cujng it?

46

If you missed the presentaBon and would like to hire Raizlabs to give this talk please contact us.

[email protected]





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



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



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


Documents

Thumbs and fingers_2011