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



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

3



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

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

4

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



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



MN G.=#$,+;''

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

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

RN F-,+B-&

SN I-&("E(

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

6



MN'G.=#$,+;

7



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

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

8



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

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



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

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

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

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

10



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

• >-0"

• 8-)V

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

• 8+;V$&%

• 5"#(+/)+&(

• C.-AA$&%

• C,.--;

• X+(.)--0

11


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


February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential13

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



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

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

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

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

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

14



\-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

+)#,-"


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"'

(+)%"(#


Quantity, not size

Minimize on-screen elements


Make things easy to tap



• X/[-&

• C;$2")

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

• P+1#

• L+:$%+B-&

• ./0,&(&/.

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

21



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

22



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



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


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

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


http://bit.ly/WireframeFree

http://bit.ly/WireframeFree

http://bit.ly/WireframePro

http://bit.ly/WireframePro

Mobile Web



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

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

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

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

39



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

• L-'&"(<-)V

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

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

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

40



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

41



>+&2K.";2

42



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



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

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

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

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

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

44



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

46

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

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

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

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

,-&(+,('/#N

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


mailto:[email protected]


Thank YouGregory Raiz

[email protected]

Follow me @graiz





?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



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



\/;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


user interface design for thumbs and fingers

Technology

moredave smith

simplecarl smith

raizlabs corporation

written permission of

basic list pattern

pixel locabon gps

multiline pattern

multiline list pattern