1. The Life Cycle of a
Wireframe
Nick Finck
May 28, 2009
Use #pssigchi when commenting on twitter
Puget Sound SIGCHI - Seattle

2. ?
Who the f#@k
is this dude?
Puget Sound SIGCHI - Seattle

3. Nick Finck
• Principle & Director of User Experience at Blue Flavor
• Based in Seattle, Washington
• Over 13 years of experience working in the web field
• Projects: Adobe, Cisco, CitiBank, Converse, FDIC,
HP, IBM, Intel, Microsoft, Oprah, PBS, Peet’s Coffee
• Co-Organizer of Refresh Seattle
• Former publisher of Digital Web Magazine
Puget Sound SIGCHI - Seattle

4. 3
IA is a three
step process
Puget Sound SIGCHI - Seattle

5. Understanding
the Problem
Puget Sound SIGCHI - Seattle

6. Puget Sound SIGCHI - Seattle

7. Bu
sin
ds
ess
ee
N
Co
er
ns
Us
tra
int
s
Technical Requirements
Puget Sound SIGCHI - Seattle

8. Finding a
Solution
Puget Sound SIGCHI - Seattle

9. Photo by DrJoanne - http://www.flickr.com/photos/drjoanne/10026716/
Puget Sound SIGCHI - Seattle

10. Presenting the
Solution
Puget Sound SIGCHI - Seattle

11. ?
What makes a good
Wireframe?
Puget Sound SIGCHI - Seattle

12. 4
Wireframes in
four parts
Puget Sound SIGCHI - Seattle

13. Part One:
Navigation &
Wayfinding
Puget Sound SIGCHI - Seattle

14. Questions
Puget Sound SIGCHI - Seattle

15. ?
Where am I?
Puget Sound SIGCHI - Seattle

16. ?
Is what I am
looking for here?
Puget Sound SIGCHI - Seattle

17. ?
Where do I want
to go next?
Puget Sound SIGCHI - Seattle

18. ?
Where have I
already been?
Puget Sound SIGCHI - Seattle

19. Inputs
Puget Sound SIGCHI - Seattle

20. Content Inventory
Puget Sound SIGCHI - Seattle

21. Content Audit
Puget Sound SIGCHI - Seattle

22. Content Strategy
Puget Sound SIGCHI - Seattle

23. Sitemap About SXSW Contact
SXSW Site Structure
New Site Structure
Market at SXSW Tools
History SXSW SMS
SXSW.com Gydget
Sponsors
Sustainability Facebook
News &
Register Getting Around Trade Shows Merchandise Interactive Film Music
Information
Opera Mini
Glossary
Brochures and Hotels for Utterz
Austin Map Music Exhibition
Forms (PDFs) SXSWeek 2008
Music Music Player
Conference
Mailing Lists Travel Discounts iF! Exhibition
Center
News & Flatstock Poster
Schedule Talks Shows Parties & Play Getting Around Press
Information Show
Subscribe International Carver Center
The Daily Chord Talks Speakers Artists Austin Map Press Releases
SXSWorld Online Reg Day Stage Cafe
Magazine Directory
Keynote Conference
FAQ Shows SXSW Live Press Kit
Auditorium Center
My SXSWorld Mentor Sessions
Shores Stage
Stories
Video Parties & Play Quickies Sessions FAQ
Any additional Demo Listening
venues Podcasts Sessions Press Credentials
CLE
Photo Policy
Interactive
News & ScreenBurn
Schedule Talks Parties & Play Web Awards Getting Around Press
Information Gaming Fest
Interactive Hub Talks Speakers Winners Austin Map Press Releases
Opening Remarks Conference
FAQ Parties & Play Finalists Press Kit
Center
Keynotes
Video Ceremony FAQ
Book Readings
Film
Core
Podcasts Dewey Award Press Credentials
Conversations
News &
Schedule Talks FIlms Parties & Play Global Doc Days Getting Around Press
Information
Speaking
Opportunities Photo Policy
The News Reel Talks Speakers Film Trailers Austin Map Press Releases
Panel Picker
Speaking Conference
FAQ Films Past Winners Press Kit
Opportunities Center
Key
Video Parties & Play FAQ
Panel Picker
Primary navigation
Podcasts Press Credentials
a Secondary navigation
a Link to separate section
Photo Policy
a Separate sub-site
a Future navigation
Modified: Tue May 27 2008
Puget Sound SIGCHI - Seattle

24. Process Flow
Puget Sound SIGCHI - Seattle

25. Navigation
Principals
Puget Sound SIGCHI - Seattle

26. Higher Priority
Reading Pattern
Written english is read left to right,
top to bottom. The top left is the
first location the reader looks.
Lower Priority
Puget Sound SIGCHI - Seattle

27. Fitts’s Law
The time to acquire a target
is a function of the distance
to and size of the target.
Puget Sound SIGCHI - Seattle

28. The Scent of
Information
The organization of information to
reassure a user they are are on the
right path for locating the
information they are looking for.
Jared Spool
User Interface Engineering
Puget Sound SIGCHI - Seattle

29. !
The Navigation
Schema
Puget Sound SIGCHI - Seattle

30. Global Navigation
Navigation Schema GiantCampus.com Information Architecture
Navigation Schema
888-904-2267 | Live Help | Contact | Sign In / Sign Up
Search
Primary Navigation
Home Courses Programs Locations Our Difference Community About
Home Courses Programs Locations Our Difference Community About
Secondary Navigation
Game Design Game Design Game Design
3D Modeling 3D Modeling 3D Modeling
Digital Photography & Graphics Digital Photography & Graphics Digital Photography & Graphics
Flash Animation & Web Design Flash Animation & Web Design Flash Animation & Web Design
Video Production Video Production Video Production
Programming & Robotics Programming & Robotics Programming & Robotics
General Computing General Computing General Computing
Our Approach Our Approach Our Approach
Breadcrumb Navigation
Home > Courses > Flash Animation & Web Design > Web Design with Dreamweaver
Footer Navigation
Feedback | Legal | Careers | Press Room 888-904-2267 | Live Help | Contact
Puget Sound SIGCHI - Seattle

31. Part Two:
Layout & Page
Structure
Puget Sound SIGCHI - Seattle

32. Questions
Puget Sound SIGCHI - Seattle

33. ?
What do I
notice first?
Puget Sound SIGCHI - Seattle

34. ?
How is this
information
organized?
Puget Sound SIGCHI - Seattle

35. ?
What seems to
be related?
Puget Sound SIGCHI - Seattle

36. Inputs
Puget Sound SIGCHI - Seattle

37. Personas
Puget Sound SIGCHI - Seattle

38. Page Description Diagram
Sample Company Name
Home Page Page Description Diagrams
1 2 3
Main call to action Search About company Notes
Gets users thinking about the brand A useful site search should always be An outline of what your company is all The homepage has been shifted to
and specific actions they can make. available on the page to allow users an about. emphasize content that’s currently
alternative method for finding your buried elsewhere in your site. The pro-
Sign-up content. Privacy, Terms of Use, Etc. posed navigation structure reinforces
A call to action that encourages peo- Most of the information that is cur- this goal.
ple to sign up for recently added con- Link list rently listed in the footer should re-
tent on the site. A list of semi-recently added link con- main there. The contact and address The home page should provide a
tent. This list should contain 5-7 links information can easily be moved to clean path to the various sections of
Featured article or essay with date and comment meta infor- the contact page, though. We also the site.
Shows the first paragraph of an article mation for each. recommend adding in some naviga-
with associated image, as well as the tional links, where possible.
day it was published and the number
of comments made.
Latest entries
A short listing of the latest articles or
essays that have been posted. There
should be between 5-7 shown on the
home page. The featured article
should not be displayed in this list.
Highest Priority Lowest Priority
Monday, September 24, 2007
Puget Sound SIGCHI - Seattle

39. Layout Principals
Puget Sound SIGCHI - Seattle

40. Common Location
of web Objects
Michael L. Bernard
Software Usability Research Laboratory, Wichita State University
Puget Sound SIGCHI - Seattle

41. Law of Closure
The mind may experience elements it
does not perceive through sensation,
in order to complete a regular figure
(that is, to increase regularity).
Puget Sound SIGCHI - Seattle

42. Law of Similarity
The mind groups similar elements
into collective entities or totalities.
This similarity might depend on
relationships of form, color, size, or
brightness.
Puget Sound SIGCHI - Seattle

43. Law of Proximity
Spatial or temporal proximity of
elements may induce the mind to
perceive a collective or totality.
Puget Sound SIGCHI - Seattle

44. [ ][ ][ ]
Law of Symmetry
Symmetrical images are perceived
collectively, even in spite of distance.
Puget Sound SIGCHI - Seattle

45. Law of Continuity
The mind continues visual, auditory,
and kinetic patterns.
Puget Sound SIGCHI - Seattle

46. Law of Common Fate
Elements with the same moving direction
are perceived as a collective or unit.
Puget Sound SIGCHI - Seattle

47. Law of Common Fate
Elements with the same moving direction
are perceived as a collective or unit.
Puget Sound SIGCHI - Seattle

48. !
The Zone Diagram
Puget Sound SIGCHI - Seattle

49. Zone Diagram
Puget Sound SIGCHI - Seattle

50. Part Three:
Page Detail &
Content Integration
Puget Sound SIGCHI - Seattle

51. Questions
Puget Sound SIGCHI - Seattle

52. ?
What is here?
Puget Sound SIGCHI - Seattle

53. ?
What can I do?
Puget Sound SIGCHI - Seattle

54. Inputs
Puget Sound SIGCHI - Seattle

55. Content Strategy
Puget Sound SIGCHI - Seattle

56. Sitemap About SXSW Contact
SXSW Site Structure
New Site Structure
Market at SXSW Tools
History SXSW SMS
SXSW.com Gydget
Sponsors
Sustainability Facebook
News &
Register Getting Around Trade Shows Merchandise Interactive Film Music
Information
Opera Mini
Glossary
Brochures and Hotels for Utterz
Austin Map Music Exhibition
Forms (PDFs) SXSWeek 2008
Music Music Player
Conference
Mailing Lists Travel Discounts iF! Exhibition
Center
News & Flatstock Poster
Schedule Talks Shows Parties & Play Getting Around Press
Information Show
Subscribe International Carver Center
The Daily Chord Talks Speakers Artists Austin Map Press Releases
SXSWorld Online Reg Day Stage Cafe
Magazine Directory
Keynote Conference
FAQ Shows SXSW Live Press Kit
Auditorium Center
My SXSWorld Mentor Sessions
Shores Stage
Stories
Video Parties & Play Quickies Sessions FAQ
Any additional Demo Listening
venues Podcasts Sessions Press Credentials
CLE
Photo Policy
Interactive
News & ScreenBurn
Schedule Talks Parties & Play Web Awards Getting Around Press
Information Gaming Fest
Interactive Hub Talks Speakers Winners Austin Map Press Releases
Opening Remarks Conference
FAQ Parties & Play Finalists Press Kit
Center
Keynotes
Video Ceremony FAQ
Book Readings
Film
Core
Podcasts Dewey Award Press Credentials
Conversations
News &
Schedule Talks FIlms Parties & Play Global Doc Days Getting Around Press
Information
Speaking
Opportunities Photo Policy
The News Reel Talks Speakers Film Trailers Austin Map Press Releases
Panel Picker
Speaking Conference
FAQ Films Past Winners Press Kit
Opportunities Center
Key
Video Parties & Play FAQ
Panel Picker
Primary navigation
Podcasts Press Credentials
a Secondary navigation
a Link to separate section
Photo Policy
a Separate sub-site
a Future navigation
Modified: Tue May 27 2008
Puget Sound SIGCHI - Seattle

57. Global Navigation
Navigation Schema GiantCampus.com Information Architecture
Navigation Schema
888-904-2267 | Live Help | Contact | Sign In / Sign Up
Search
Primary Navigation
Home Courses Programs Locations Our Difference Community About
Home Courses Programs Locations Our Difference Community About
Secondary Navigation
Game Design Game Design Game Design
3D Modeling 3D Modeling 3D Modeling
Digital Photography & Graphics Digital Photography & Graphics Digital Photography & Graphics
Flash Animation & Web Design Flash Animation & Web Design Flash Animation & Web Design
Video Production Video Production Video Production
Programming & Robotics Programming & Robotics Programming & Robotics
General Computing General Computing General Computing
Our Approach Our Approach Our Approach
Breadcrumb Navigation
Home > Courses > Flash Animation & Web Design > Web Design with Dreamweaver
Footer Navigation
Feedback | Legal | Careers | Press Room 888-904-2267 | Live Help | Contact
Puget Sound SIGCHI - Seattle

58. Personas
Puget Sound SIGCHI - Seattle

59. Page Description Diagram
Sample Company Name
Home Page Page Description Diagrams
1 2 3
Main call to action Search About company Notes
Gets users thinking about the brand A useful site search should always be An outline of what your company is all The homepage has been shifted to
and specific actions they can make. available on the page to allow users an about. emphasize content that’s currently
alternative method for finding your buried elsewhere in your site. The pro-
Sign-up content. Privacy, Terms of Use, Etc. posed navigation structure reinforces
A call to action that encourages peo- Most of the information that is cur- this goal.
ple to sign up for recently added con- Link list rently listed in the footer should re-
tent on the site. A list of semi-recently added link con- main there. The contact and address The home page should provide a
tent. This list should contain 5-7 links information can easily be moved to clean path to the various sections of
Featured article or essay with date and comment meta infor- the contact page, though. We also the site.
Shows the first paragraph of an article mation for each. recommend adding in some naviga-
with associated image, as well as the tional links, where possible.
day it was published and the number
of comments made.
Latest entries
A short listing of the latest articles or
essays that have been posted. There
should be between 5-7 shown on the
home page. The featured article
should not be displayed in this list.
Highest Priority Lowest Priority
Monday, September 24, 2007
Puget Sound SIGCHI - Seattle

60. Zone Diagram
Puget Sound SIGCHI - Seattle

61. Information
Architecture
Principals
Puget Sound SIGCHI - Seattle

62. Magic Number Seven
Perceived channel capacity of a
number of human cognitive and
perceptual tasks.
George A. Miller
Department of Psychology, Princeton University
Puget Sound SIGCHI - Seattle

63. Simon’s Law
Hierarchical structures reduce complexity -
the better you manage to provide users
with a sense of visual hierarchy, the easier
your content will be to perceive.
Puget Sound SIGCHI - Seattle

64. Progressive
Disclosure
Progressive disclosure defers advanced
or rarely used features to a secondary
screen, making applications easier to
learn and less error-prone.
Jakob Nielsen
Nielsen Norman Group
Puget Sound SIGCHI - Seattle

65. The Knowledge Gap
Increasing gap between higher
and lower educated people
Tichenor, Donohue and Olien
University of Minnesota
Puget Sound SIGCHI - Seattle

66. Clear Calls to Action
Draw the user to the goal of the page.
Encourage the next action to be taken.
Puget Sound SIGCHI - Seattle

67. Use Patterns First,
Innovate Last.
Know the rules before you break them.
Puget Sound SIGCHI - Seattle

68. !
The Wireframe
Puget Sound SIGCHI - Seattle

69. Wireframe
Puget Sound SIGCHI - Seattle

70. Part Four:
Interaction &
Dynamic Elements
Puget Sound SIGCHI - Seattle

71. Questions
Puget Sound SIGCHI - Seattle

72. ?
What happens
when I do this?
Puget Sound SIGCHI - Seattle

73. ?
How long will
this take?
Puget Sound SIGCHI - Seattle

74. ?
What just
happened?
Puget Sound SIGCHI - Seattle

75. ?
Can I undo this?
Puget Sound SIGCHI - Seattle

76. Inputs
Puget Sound SIGCHI - Seattle

77. Process Flow
Puget Sound SIGCHI - Seattle

78. Wireframe
Puget Sound SIGCHI - Seattle

79. Interaction
Principals
Puget Sound SIGCHI - Seattle

80. Consistency
Interactions that are the same in
principal should be consistent in
behavior system wise. Be consistent
with the user’s expectations.
Puget Sound SIGCHI - Seattle

81. Latency Reduction
Allow for apparent quicker response
times. Use AJAX, Cache information,
etc. Anticipate the user’s next action.
Puget Sound SIGCHI - Seattle

82. Show State
Always communicate what state the
current interaction is at (active/inactive).
Puget Sound SIGCHI - Seattle

83. Do No Harm
Allow users to be able to undo what
they have done. Auto-save for the user
so information is not lost. Repopulate
form fields where appropriate.
Puget Sound SIGCHI - Seattle

84. !
The Storyboard
Puget Sound SIGCHI - Seattle

85. Storyboard
Manage Account Manage Account Manage Account Manage Account Manage Account Manage Account
! Rename account ! Rename account ! Rename account ! Rename account ! Rename account ! Rename account
Home Checking Rename ! Stop check ! Stop check ! Stop check ! Stop check ! Stop check
Use this form to place a stop check on a ! Order checks ! Order checks ! Order checks ! Order checks
! Stop check check that has been issued. Amount of the
check will be credited back to your account Order new checks for this account? ! Order check card ! Order check card ! Order check card
! Order checks (more info)
Order Checks
Note: If your card was lost or stolen please ! Manage Statements ! Manage Statements
! Order check card Account #: ...4324
call 800-637-0852 to ensure deactivation.
! Order check card (more info) Paper Statements ! Download
! Manage Statements From Check #:
To Check #: ! Manage Statements Reason: Damaged check card Go Paperless Select file format...
! Download
Reason: Lost check ! Download Rush Delivery?
Note: these changes will impact your Download Now
Note you will be chaged a $45.00 fee for a savings account(s) as well. (more info)
Note you will be chaged a $8.00 fee for
each stop check order. (more info) rush delivery of a check card. (more info)
! Download
Stop Check Charge to account: Home checking (5423)
Order
! Order checks
! Order check card ! Manage Statements
! Manage Statements ! Download
! Download
Puget Sound SIGCHI - Seattle

86. !
The Annotated
Wireframe
Puget Sound SIGCHI - Seattle

87. Annotated Wireframe
Puget Sound SIGCHI - Seattle

88. Photo by Dan Buczynski
http://www.flickr.com/photos/macwagen/225493960/
Puget Sound SIGCHI - Seattle

89. Relax, there is a map!
Peter Morville and Jeffery Callender Puget Sound SIGCHI - Seattle

90. ...and Books!
Puget Sound SIGCHI - Seattle

91. Thank you!
Puget Sound SIGCHI - Seattle

92. Thank you!
Remember, comment on twitter with #pssigchi
Puget Sound SIGCHI - Seattle

93. ?
Questions?
Puget Sound SIGCHI - Seattle

94. The Life Cycle of a
Wireframe
Nick Finck
nick@blueflavor.com
Blue Flavor - http://blueflavor.com
Personal - http://nickfinck.com
Puget Sound SIGCHI - Seattle