16. Visual
Design
• Use
large
presentaBon
fonts Back Title Done
search
• Use
large
finger
Bp
size
S
Al Smith
targets 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
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. More
Wireframes
Online
Free version: bit.ly/WireframeFree
Pro version coming soon bit.ly/WireframePro
Wednesday, February 23, 2011
