user interface design for thumbs and fingers

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.

!"#$%&$&%'$&(")*+,"#'

*-)'(./01#'+&2'3&%")#

4)"%'5+$6'''7%)+$6

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

8"9:"',-0"'+';-&%'<+=

2

Photo: Telefon AB LM Ericsson

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

>+&2'.";2'$&(")*+,"#

3

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

?';-('.+#',.+&%"2

!"#$%!&''()*+,-

4

./%0#),,-- 012/3&),45)6&3

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

8.+(9#'&"<@

• 8"9)"'0-)"',-&&",("2

– 8"'+;<+=#'.+:"'$&(")&"(

• ?2+AB:"'C,)""&

– D#"'":")='A$E";

• F-,+B-&

– 4GCH'I-0A+##

• J&2K/#")'+AA#

– L-&K(",.&$,+;'/#")#'+)"'$&#(+;;$&%'+AA#

5

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

MN G.=#$,+;''

ON P=A$&%'+&2'P+AA$&%

QN 5"+2$&%'I-&("&(

RN F-,+B-&

SN I-&("E(

!"#$%&$&%'*-)'0-1$;"

6

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

MN'G.=#$,+;

7

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

73&)8#39):'&& ./)8#394):'&&

ON'T&A/('I-&#$2")+B-&#

8

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

U&-<'+&=-&"';$V"'(.$#@9

QN'5"+2$&%'I-&#$2")+B-&#

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

RN'F-,+B-&'F-,+B-&'F-,+B-&

• ?,B-&+1;"'G)-E$0$(=

• !"#$%&$&%'*-)'#-0"-&"'<.-9#'&-('

$&'*)-&('-*'(."$)'2"#V'

10

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

!"#$%&'*-)';-,+B-&

• >-0"

• 8-)V

• I+)WX/#WC/1<+=

• 8+;V$&%

• 5"#(+/)+&(

• C.-AA$&%

• C,.--;

• X+(.)--0

11

Wednesday, February 23, 2011

SN'I-&("E('+)-/&2'=-/

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential13

SN'Y1Z",('I-&("E(

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

!"#$%&'A+[")&#'

(.+('<-)V'-&'+'GI'

0+='&-('<-)V'-&'+'

(-/,.'A.-&"'

P."'A.-&"'$#'&-('+'GI

14

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

\-1$;"':#N'!"#V(-A

MRKM]A('*-&(#'(=A$,+;

F+)%"'.$('(+)%"(#'^_KM__AE

YAB0$6"'*-)'^R_E`^_

?,B-&#a

P+A

P+A'>-;2

C<$A"

G$&,.

5-(+("

C.+V"

!"#$%"&'()*

M_KMOA('*-&(#'(=A$,+;

>$('(+)%"(#'M^KQOAE'#b/+)"

YAB0$6"'M_OREc^]

?,B-&#a

I;$,V

5$%.('I;$,V

!-/1;"'I;$,V

I;$,V'!)+%

15

+)#,-"

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

d$#/+;'!"#$%&

• D#"';+)%"'A)"#"&(+B-&'*-&(#

• D#"';+)%"'3&%")'BA'#$6"'

(+)%"(#

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

• X/[-&

• C;$2")

• G$,V")WCA$&&")

• P+1#

• L+:$%+B-&

• ./0,&(&/.

I-00-&'I-&()-;#

21

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

F$#(#'+&2'L+:$%+B-&

22

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

M'#,)""&'M'(+#V

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

e"#f'X/('/#")#'2-&9('<+&('(-'2$%

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

\-)"'8$)"*)+0"#'Y&;$&"

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

\-1$;"'8"1'X+#$,#

• I+&9('A$&,.W6--0'<$(.'-&"'.+&2

• !"(",('0-1$;"'1)-<#")#

• T*'=-/'.+:"'(."',-&("&('(."'.+)2'A+)('$#'2-&"

39

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

JEA",('(."'/&"EA",("2

• L-'&"(<-)V

• P-/,.'$#'&-('(."'#+0"'+#'I;$,V

• I+;;#'+&2'P"E('0"##+%"#

• 5"%$-&'!$g")"&,"#

40

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

P+1;"(#'+)"'P-/,.

41

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

>+&2K.";2

42

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

P-A'P+1;"('?)"+#

• \+%+6$&"'W'I-&("&(

– h;$A1-+)2'W'8$)"2'

• h$";2'2+(+',-;;",B-&

• h$";2'#+;"#'(--;

• ?/%0"&("2'Pd'"EA")$"&,"

• 4+0"#

43

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

iI-g""'C.-A9'/#+1$;$(=

• D#+1$;$(='-/('$&'(."')"+;'<-);2

• C.-/;2")'#/)3&%

• 5",)/$(H'$&#(+;;H'-1#"):"'-:")',-g""

• h+#('$(")+B-&'

44

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

C;$2"#'&-(',/j&%'$(@

46

T*'=-/'0$##"2'(."'

A)"#"&(+B-&'+&2'<-/;2'

;$V"'(-'.$)"'5+$6;+1#'(-'

%$:"'(.$#'(+;V'A;"+#"'

,-&(+,('/#N

%)+$67)+$6;+1#N,-0

Wednesday, February 23, 2011

Thank YouGregory Raiz

graiz@raizlabs.com

Follow me @graiz

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

?1-/('5+$6;+1#

• X+#"2'$&'X-#(-&

• ?'%)-<$&%'("+0'-*'M_'2":";-A")#'W'2"#$%&#

• !":";-A"2'-:")'R_'0-1$;"'+AA;$,+B-&#

– Q_'$G.-&"'?AA;$,+B-&#

– S'?&2)-$2'?AA;$,+B-&#

– S'$G+2'?AA;$,+B-&#

– G;/#'0+&='A)-(-(=A"#

• !$:")#"'"EA")$"&,"'$&'0/;BA;"'*+,"(#'-*'0-1$;"'

#()+("%='2"#$%&'+&2'2":";-A0"&('N

47

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

5+$6;+1#'!-0+$&'JEA")$"&,"

• \+AA$&%'(",.&-;-%=

• C-,$+;'&"(<-)V$&%'(--;#

• ?/2$-'+AA;$,+B-&#

• JK,-00"),"

• 4JYK;-,+B-&'()+,V$&%

• h$";2'2+(+',-;;",B-&'+&2',+;,/;+B-&

• \+%+6$&"'+&2'1--V',-&("&('A)"#"&(+B-&

• ?AA;$,+B-&'2"A;-=0"&(

• J&(")A)$#"'+AA#

48

Wednesday, February 23, 2011

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential

\/;BA;"'G;+k-)0#

• JEA")B#"'$&';"+2$&%'0-1$;"'

A;+k-)0#a

– ?&2)-$2

– $G.-&"W$G+2

• ?AA',)"+B-&'(+)%"B&%'

0/;BA;"'A;+k-)0#

– I-00-&'<"1'?GT#'(-'B"'

0-1$;"'+AA#'(-%"(.")

• F"+)&'0-)"'+('5+$6;+1#N,-0

49

Wednesday, February 23, 2011