The document discusses designing mobile interfaces and applications. It provides examples of common interface patterns like lists, tables, and editing interfaces. It also covers considerations for mobile web design such as touch targets and minimizing on-screen elements. Wireframing tips are presented such as using established patterns and keeping designs simple with less content.

1. !"#$%&$&%'$&(")*+,"#'
*-)'(./01#'+&2'3&%")#
4)"%'5+$6'''7%)+$6
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.
Wednesday, February 23, 2011

2. 8"9:"',-0"'+';-&%'<+=
Photo: Telefon AB LM Ericsson
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
2
Wednesday, February 23, 2011

3. >+&2'.";2'$&(")*+,"#
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
3
Wednesday, February 23, 2011

4. ?';-('.+#',.+&%"2
./%0#),,-- !"#$%!&''()*+,- 012/3&),45)6&3
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
4
Wednesday, February 23, 2011

5. 8.+(9#'&"<@
• 8"9)"'0-)"',-&&",("2
– 8"'+;<+=#'.+:"'$&(")&"(
• ?2+AB:"'C,)""&
– D#"'":")='A$E";
• F-,+B-&
– 4GCH'I-0A+##
• J&2K/#")'+AA#
– L-&K(",.&$,+;'/#")#'+)"'$&#(+;;$&%'+AA#
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
5
Wednesday, February 23, 2011

6. !"#$%&$&%'*-)'0-1$;"
MN G.=#$,+;''
ON P=A$&%'+&2'P+AA$&%
QN 5"+2$&%'I-&("&(
RN F-,+B-&
SN I-&("E(
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
6
Wednesday, February 23, 2011

7. MN'G.=#$,+;
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
7
Wednesday, February 23, 2011

8. ON'T&A/('I-&#$2")+B-&#
73&)8#39):'&& ./)8#394):'&&
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
8
Wednesday, February 23, 2011

9. QN'5"+2$&%'I-&#$2")+B-&#
February 18, 2011
U&-<'+&=-&"';$V"'(.$#@
Raizlabs © 2010 • Proprietary and Confidential
9
Wednesday, February 23, 2011

10. RN'F-,+B-&'F-,+B-&'F-,+B-&
• ?,B-&+1;"'G)-E$0$(=
• !"#$%&$&%'*-)'#-0"-&"'<.-9#'&-('
$&'*)-&('-*'(."$)'2"#V'
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
10
Wednesday, February 23, 2011

11. !"#$%&'*-)';-,+B-&
• >-0"
• 8-)V
• I+)WX/#WC/1<+=
• 8+;V$&%
• 5"#(+/)+&(
• C.-AA$&%
• C,.--;
• X+(.)--0
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
11
Wednesday, February 23, 2011

12. SN'I-&("E('+)-/&2'=-/
Wednesday, February 23, 2011

13. SN'Y1Z",('I-&("E(
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
13
Wednesday, February 23, 2011

14. P."'A.-&"'$#'&-('+'GI
!"#$%&'A+[")&#'
(.+('<-)V'-&'+'GI'
0+='&-('<-)V'-&'+'
(-/,.'A.-&"'
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
14
Wednesday, February 23, 2011

15. -1$;"':#N'!"#V(-A
+)#,-" !"#$%"&'()*
MRKM]A('*-&(#'(=A$,+; M_KMOA('*-&(#'(=A$,+;
F+)%"'.$('(+)%"(#'^_KM__AE >$('(+)%"(#'M^KQOAE'#b/+)"
YAB0$6"'*-)'^R_E`^_ YAB0$6"'M_OREc^]
?,B-&#a ?,B-&#a
P+A I;$,V
P+A'>-;2 5$%.('I;$,V
C<$A" !-/1;"'I;$,V
G$&,. I;$,V'!)+%
5-(+("
C.+V"
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
15
Wednesday, February 23, 2011

16. d$#/+;'!"#$%&
• D#"';+)%"'A)"#"&(+B-&'*-&(# Back Title Done
search
• D#"';+)%"'3&%")'BA'#$6"' S
Al Smith
(+)%"(# Ben Smith
Carl Smith
Dave Smith
Eric Smith
Fred Smith
Greg Smith
Hal Smith
Jane Smith
Favorites Recents Contacts Keypad Voicemail
Wednesday, February 23, 2011

17. Minimize on-screen
elements
Quantity, not size
Wednesday, February 23, 2011

18. Wednesday, February 23, 2011

19. Make things easy to tap
Wednesday, February 23, 2011

20. Wednesday, February 23, 2011

21. I-00-&'I-&()-;#
• X/[-&
• C;$2")
• G$,V")WCA$&&")
• P+1#
• L+:$%+B-&
• ./0,&(&/.
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
21
Wednesday, February 23, 2011

22. F$#(#'+&2'L+:$%+B-&
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
22
Wednesday, February 23, 2011

23. M'#,)""&'M'(+#V
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Wednesday, February 23, 2011

24. e"#f'X/('/#")#'2-&9('<+&('(-'2$%
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
Wednesday, February 23, 2011

25. Wire framing an
iPhone Application
Also called storyboarding and pencil prototyping
Wednesday, February 23, 2011

26. Basic List Pattern
• We use wireframes to Back Title Done
tell a story of how the
Al Smith
interface is used.
Ben Smith
– Keep it simple Carl Smith
– Less is more Dave Smith
– Use established Eric Smith
design patterns Fred Smith
when possible Greg Smith
Hal Smith
Jane Smith
Favorites Recents Contacts Keypad Voicemail
Wednesday, February 23, 2011

27. Basic List Secondary Action
Al Smith Al Smith
Ben Smith Ben Smith
Carl Smith Carl Smith
Dave Smith Dave Smith
Eric Smith Eric Smith
Fred Smith Fred Smith
Greg Smith Greg Smith
Hal Smith Hal Smith
Jane Smith Jane Smith
Alphabetical long lists Searchable
Al Smith
Ben Smith Al Smith
Carl Smith Ben Smith
Dave Smith Carl Smith
Eric Smith Dave Smith
Fred Smith Eric Smith
Greg Smith Fred Smith
Hal Smith Greg Smith
Jane Smith Hal Smith
Jane Smith
Wednesday, February 23, 2011

28. Basic Table Pattern
• Tables are grouped into logical
Back Settings
sections
• Each table cell is usually one of the Name Required
following: Password Required
– Text field
– Label with details arrow Status Good
– Label with status and arrow Wi-Fi Not Connected
– Label with toggle Sound
• Use a short descriptive footer to
Location
provide additional help
Auto-lock
• Each grouping is usually connected
logically Advanced Configuration
Use text descriptions to make the application better
Wednesday, February 23, 2011

29. Multi-line List Pattern
• Use the multi-line pattern to give
Back Messages Done
users a peek at what may be in the
details page. Al Smith 10:23pm
This is a short message that I'm writing to tell
• This uses up more vertical space so you that the thing you thought you did was…
Ben Smith 10:10pm
don't use it if you expect a lot of I can't believe you didn't tell me you where
going to be in town. I just talked to Peter…
scrolling. Carl Smith 9:13pm
• Email is a good example where you Did You get the message about the meeting
Next Wednesday? I think we should take…
usually read from the top and Dave Smith 7:25pm
decide if you want details. Hey! Nice presentation. Before we sign the
contract, let’s get a head start on the wire…
Eric Smith 5:19pm
Should we order some pizzas? There’s a lot to
do before we can ship this app, and we want…
Fred Smith 5:13pm
I’m the finance minister of a remote island
nation with a proposition for you. Please se…
Wednesday, February 23, 2011

30. Show
Interaction
Edit Title Edit Title • The editing pattern
allows you to add,
Al Smith Al Smith edit and delete
items from a list
Ben Smith Ben Smith Delete
• Consider
Carl Smith Carl Smith supporting the
swipe delete
Dave Smith Dave Smith action
Eric Smith Eric Smith
Fred Smith Fred Smith
Greg Smith Greg Smith
Hal Smith Hal Smith
Jane Smith Jane Smith
Swipe to delete gesture
Favorites Recents Contacts Keypad Voicemail Favorites Recents Contacts Keypad Voicemail
Wednesday, February 23, 2011

31. Landscape Example
Al Smith
Ben Smith
Carl Smith
Dave Smith
• For certain applications landscape may make sense
• In this view the keyboard takes almost 50% of the space when
shown
Wednesday, February 23, 2011

32. Are you sure?
• Simple modal UI to make decisions
• Located near the thumb area, easy
to tap. Al Smith 10:23pm
This is a short message that I'm writing to tell
you that the thing you thought you did was…
• Quickly present a couple choices Ben Smith 10:10pm
I can't believe you didn't tell me you where
going to be in town. I just talked to Peter…
Are you sure you want to delete?
Delete
Archive
Cancel
Wednesday, February 23, 2011

33. Progress Indicators
• There are three types of progress
Title
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
Wednesday, February 23, 2011

34. -)"'8$)"*)+0"#'Y&;$&"
Free version: bit.ly/WireframeFree
Pro version coming soon bit.ly/WireframePro
Wednesday, February 23, 2011

35. Mobile Web
Wednesday, February 23, 2011

36. Wednesday, February 23, 2011

37. Wednesday, February 23, 2011

38. Wednesday, February 23, 2011

39. -1$;"'8"1'X+#$,#
• I+&9('A$&,.W6--0'<$(.'-&"'.+&2
• !"(",('0-1$;"'1)-<#")#
• T*'=-/'.+:"'(."',-&("&('(."'.+)2'A+)('$#'2-&"
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
39
Wednesday, February 23, 2011

40. JEA",('(."'/&"EA",("2
• L-'&"(<-)V
• P-/,.'$#'&-('(."'#+0"'+#'I;$,V
• I+;;#'+&2'P"E('0"##+%"#
• 5"%$-&'!$g")"&,"#
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
40
Wednesday, February 23, 2011

41. P+1;"(#'+)"'P-/,.
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
41
Wednesday, February 23, 2011

42. >+&2K.";2
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
42
Wednesday, February 23, 2011

43. 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"#
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
43
Wednesday, February 23, 2011

44. iI-g""'C.-A9'/#+1$;$(=
• D#+1$;$(='-/('$&'(."')"+;'<-);2
• C.-/;2")'#/)3&%
• 5",)/$(H'$&#(+;;H'-1#"):"'-:")',-g""
• h+#('$(")+B-&'
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
44
Wednesday, February 23, 2011

45. C;$2"#'&-(',/j&%'$(@
T*'=-/'0$##"2'(."'
A)"#"&(+B-&'+&2'<-/;2'
;$V"'(-'.$)"'5+$6;+1#'(-'
%$:"'(.$#'(+;V'A;"+#"'
,-&(+,('/#N
%)+$67)+$6;+1#N,-0
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
46
Wednesday, February 23, 2011

46. Thank You
Gregory Raiz
graiz@raizlabs.com
Follow me @graiz
Wednesday, February 23, 2011

47. ?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
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
47
Wednesday, February 23, 2011

48. 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#
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
48
Wednesday, February 23, 2011

49. /;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
February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
49
Wednesday, February 23, 2011