The Life Cycle of a Wireframe
Post on 17-Aug-2014
26062 Views
Preview:
DESCRIPTION
Transcript
Puget Sound SIGCHI - Seattle
The Life Cycle of a WireframeNick FinckMay 28, 2009
Use #pssigchi when commenting on twitter
Puget Sound SIGCHI - Seattle
?Who the f#@k is this dude?
Puget Sound SIGCHI - Seattle
• 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
Nick Finck
Puget Sound SIGCHI - Seattle
3IA is a three step process
Puget Sound SIGCHI - Seattle
Understanding the Problem
Puget Sound SIGCHI - Seattle
Puget Sound SIGCHI - Seattle
Use
r N
eeds
Technical Requirements
Business C
onstraints
Puget Sound SIGCHI - Seattle
Finding a Solution
Puget Sound SIGCHI - Seattle
Photo by DrJoanne - http://www.flickr.com/photos/drjoanne/10026716/
Puget Sound SIGCHI - Seattle
Presenting the Solution
Puget Sound SIGCHI - Seattle
?What makes a goodWireframe?
Puget Sound SIGCHI - Seattle
4Wireframes in four parts
Puget Sound SIGCHI - Seattle
Part One:
Navigation & Wayfinding
Puget Sound SIGCHI - Seattle
Questions
Puget Sound SIGCHI - Seattle
?Where am I?
Puget Sound SIGCHI - Seattle
?Is what I am looking for here?
Puget Sound SIGCHI - Seattle
?Where do I want to go next?
Puget Sound SIGCHI - Seattle
?Where have I already been?
Puget Sound SIGCHI - Seattle
Inputs
Puget Sound SIGCHI - Seattle
Content Inventory
Puget Sound SIGCHI - Seattle
Content Audit
Puget Sound SIGCHI - Seattle
Content Strategy
Puget Sound SIGCHI - Seattle
SitemapSXSW Site Structure
New Site Structure
Modified: Tue May 27 2008
a
Key
a
Link to separate section
Secondary navigation
Primary navigation
a Future navigation
a Separate sub-site
SXSW.com
About SXSW
History
Sponsors
SustainabilityNews &
Information
Brochures and
Forms (PDFs)
Mailing Lists
Subscribe International
Merchandise
Glossary
Interactive Film MusicRegister
Market at SXSW
Trade Shows
Tools
Video
Hotels for
SXSWeek 2008
Travel Discounts
Online Reg
Directory
Music Exhibition
iF! Exhibition
SXSWorld
Magazine
My SXSWorld
Stories
SXSW SMS
Gydget
Opera Mini
Utterz
Music
News &
Information
The Daily Chord
Schedule Talks Shows
Carver Center
Parties & Play Press
Talks Artists
SXSW Live
Day Stage Cafe
Press Releases
Auditorium
Shores Stage
Getting Around
Austin Map
Interactive
News &
Information
FAQ
Schedule TalksScreenBurn
Gaming FestParties & Play Web Awards
Interactive Hub
Press
Dewey Award
Talks Speakers
Panel Picker
Winners
Finalists
Ceremony FAQ
Press Kit
Press Releases
Press Credentials
Photo Policy
Film
News &
Information
The News Reel
FAQ
Schedule Talks FIlms Parties & Play Press
Talks Speakers
Global Doc Days
Speaking
OpportunitiesFilms
Film Trailers
Past Winners
Press Releases
Music Player
Contact
Panel Picker
Getting Around
Austin Map
Parties & Play
Parties & Play
Shows
Getting Around
Getting Around
Austin Map
Conference
Center
Austin Map
Any additional
venues
Speakers
Flatstock Poster
Show
Parties & Play
Conference
Center
Conference
Center
Conference
Center
Keynote
Mentor Sessions
Quickies Sessions
Demo Listening
Sessions
CLE
Opening Remarks
Keynotes
Book Readings
Core
Conversations
Podcasts
Video
Podcasts
FAQ
Video
Podcasts
Speaking
Opportunities
FAQ
Press Kit
Press Credentials
Photo Policy
FAQ
Press Kit
Press Credentials
Photo Policy
Puget Sound SIGCHI - Seattle
Process Flow
Puget Sound SIGCHI - Seattle
Navigation Principals
Puget Sound SIGCHI - Seattle
Higher Priority
Lower Priority
Reading PatternWritten english is read left to right, top to bottom. The top left is the first location the reader looks.
Puget Sound SIGCHI - Seattle
Fitts’s LawThe time to acquire a target is a function of the distance to and size of the target.
Puget Sound SIGCHI - Seattle
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 SpoolUser Interface Engineering
Puget Sound SIGCHI - Seattle
!The Navigation Schema
Puget Sound SIGCHI - Seattle
Navigation SchemaGiantCampus.com Information ArchitectureNavigation Schema
1 Modified: Tue Sep 16 2008
Our Difference
Our Difference
Feedback | Legal | Careers | Press Room
Footer Navigation
Global Navigation
888-904-2267 | Live Help | Contact | Sign In / Sign Up
Search
Home > Courses > Flash Animation & Web Design > Web Design with Dreamweaver
Breadcrumb Navigation
Secondary Navigation
Game Design
3D Modeling
Digital Photography & Graphics
Video Production
Programming & Robotics
General Computing
Our Approach
Game Design
3D Modeling
Digital Photography & Graphics
Video Production
Programming & Robotics
General Computing
Our Approach
Game Design
3D Modeling
Digital Photography & Graphics
Video Production
Programming & Robotics
General Computing
Our Approach
Home
CommunityCourses Programs Locations AboutHome
Primary Navigation
CommunityPrograms Locations AboutCourses
Flash Animation & Web Design Flash Animation & Web Design Flash Animation & Web Design
888-904-2267 | Live Help | Contact
Puget Sound SIGCHI - Seattle
Part Two:
Layout & Page Structure
Puget Sound SIGCHI - Seattle
Questions
Puget Sound SIGCHI - Seattle
?What do I notice first?
Puget Sound SIGCHI - Seattle
?How is this information organized?
Puget Sound SIGCHI - Seattle
?What seems to be related?
Puget Sound SIGCHI - Seattle
Inputs
Puget Sound SIGCHI - Seattle
Personas
Puget Sound SIGCHI - Seattle
Page Description Diagram
Main call to action
Gets users thinking about the brand and specific actions they can make.
Sign-up
A call to action that encourages peo-ple to sign up for recently added con-
tent on the site.
Featured article or essay
Shows the first paragraph of an article with associated image, as well as the
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.
Search
A useful site search should always be available on the page to allow users an alternative method for finding your content.
Link list
A list of semi-recently added link con-tent. This list should contain 5-7 links with date and comment meta infor-mation for each.
About company
An outline of what your company is all about.
Privacy, Terms of Use, Etc.
Most of the information that is cur-rently listed in the footer should re-
main there. The contact and address information can easily be moved to the contact page, though. We also recommend adding in some naviga-tional links, where possible.
Notes
The homepage has been shifted to emphasize content that’s currently buried elsewhere in your site. The pro-posed navigation structure reinforces this goal.
The home page should provide a clean path to the various sections of the site.
Monday, September 24, 2007
Sample Company NamePage Description Diagrams
1 2 3
Highest Priority Lowest Priority
Home Page
Puget Sound SIGCHI - Seattle
Layout Principals
Puget Sound SIGCHI - Seattle
Common Location of web Objects
Michael L. BernardSoftware Usability Research Laboratory, Wichita State University
Puget Sound SIGCHI - Seattle
Law of ClosureThe 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
Law of SimilarityThe 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
Law of ProximitySpatial or temporal proximity of elements may induce the mind to perceive a collective or totality.
Puget Sound SIGCHI - Seattle
Law of Symmetry
[ ][ ][ ]
Symmetrical images are perceived collectively, even in spite of distance.
Puget Sound SIGCHI - Seattle
Law of ContinuityThe mind continues visual, auditory, and kinetic patterns.
Puget Sound SIGCHI - Seattle
Law of Common FateElements with the same moving direction are perceived as a collective or unit.
Puget Sound SIGCHI - Seattle
Law of Common FateElements with the same moving direction are perceived as a collective or unit.
Puget Sound SIGCHI - Seattle
!The Zone Diagram
Puget Sound SIGCHI - Seattle
Zone Diagram
Puget Sound SIGCHI - Seattle
Part Three:
Page Detail & Content Integration
Puget Sound SIGCHI - Seattle
Questions
Puget Sound SIGCHI - Seattle
?What is here?
Puget Sound SIGCHI - Seattle
?What can I do?
Puget Sound SIGCHI - Seattle
Inputs
Puget Sound SIGCHI - Seattle
Content Strategy
Puget Sound SIGCHI - Seattle
SitemapSXSW Site Structure
New Site Structure
Modified: Tue May 27 2008
a
Key
a
Link to separate section
Secondary navigation
Primary navigation
a Future navigation
a Separate sub-site
SXSW.com
About SXSW
History
Sponsors
SustainabilityNews &
Information
Brochures and
Forms (PDFs)
Mailing Lists
Subscribe International
Merchandise
Glossary
Interactive Film MusicRegister
Market at SXSW
Trade Shows
Tools
Video
Hotels for
SXSWeek 2008
Travel Discounts
Online Reg
Directory
Music Exhibition
iF! Exhibition
SXSWorld
Magazine
My SXSWorld
Stories
SXSW SMS
Gydget
Opera Mini
Utterz
Music
News &
Information
The Daily Chord
Schedule Talks Shows
Carver Center
Parties & Play Press
Talks Artists
SXSW Live
Day Stage Cafe
Press Releases
Auditorium
Shores Stage
Getting Around
Austin Map
Interactive
News &
Information
FAQ
Schedule TalksScreenBurn
Gaming FestParties & Play Web Awards
Interactive Hub
Press
Dewey Award
Talks Speakers
Panel Picker
Winners
Finalists
Ceremony FAQ
Press Kit
Press Releases
Press Credentials
Photo Policy
Film
News &
Information
The News Reel
FAQ
Schedule Talks FIlms Parties & Play Press
Talks Speakers
Global Doc Days
Speaking
OpportunitiesFilms
Film Trailers
Past Winners
Press Releases
Music Player
Contact
Panel Picker
Getting Around
Austin Map
Parties & Play
Parties & Play
Shows
Getting Around
Getting Around
Austin Map
Conference
Center
Austin Map
Any additional
venues
Speakers
Flatstock Poster
Show
Parties & Play
Conference
Center
Conference
Center
Conference
Center
Keynote
Mentor Sessions
Quickies Sessions
Demo Listening
Sessions
CLE
Opening Remarks
Keynotes
Book Readings
Core
Conversations
Podcasts
Video
Podcasts
FAQ
Video
Podcasts
Speaking
Opportunities
FAQ
Press Kit
Press Credentials
Photo Policy
FAQ
Press Kit
Press Credentials
Photo Policy
Puget Sound SIGCHI - Seattle
Navigation SchemaGiantCampus.com Information ArchitectureNavigation Schema
1 Modified: Tue Sep 16 2008
Our Difference
Our Difference
Feedback | Legal | Careers | Press Room
Footer Navigation
Global Navigation
888-904-2267 | Live Help | Contact | Sign In / Sign Up
Search
Home > Courses > Flash Animation & Web Design > Web Design with Dreamweaver
Breadcrumb Navigation
Secondary Navigation
Game Design
3D Modeling
Digital Photography & Graphics
Video Production
Programming & Robotics
General Computing
Our Approach
Game Design
3D Modeling
Digital Photography & Graphics
Video Production
Programming & Robotics
General Computing
Our Approach
Game Design
3D Modeling
Digital Photography & Graphics
Video Production
Programming & Robotics
General Computing
Our Approach
Home
CommunityCourses Programs Locations AboutHome
Primary Navigation
CommunityPrograms Locations AboutCourses
Flash Animation & Web Design Flash Animation & Web Design Flash Animation & Web Design
888-904-2267 | Live Help | Contact
Puget Sound SIGCHI - Seattle
Personas
Puget Sound SIGCHI - Seattle
Page Description Diagram
Main call to action
Gets users thinking about the brand and specific actions they can make.
Sign-up
A call to action that encourages peo-ple to sign up for recently added con-
tent on the site.
Featured article or essay
Shows the first paragraph of an article with associated image, as well as the
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.
Search
A useful site search should always be available on the page to allow users an alternative method for finding your content.
Link list
A list of semi-recently added link con-tent. This list should contain 5-7 links with date and comment meta infor-mation for each.
About company
An outline of what your company is all about.
Privacy, Terms of Use, Etc.
Most of the information that is cur-rently listed in the footer should re-
main there. The contact and address information can easily be moved to the contact page, though. We also recommend adding in some naviga-tional links, where possible.
Notes
The homepage has been shifted to emphasize content that’s currently buried elsewhere in your site. The pro-posed navigation structure reinforces this goal.
The home page should provide a clean path to the various sections of the site.
Monday, September 24, 2007
Sample Company NamePage Description Diagrams
1 2 3
Highest Priority Lowest Priority
Home Page
Puget Sound SIGCHI - Seattle
Zone Diagram
Puget Sound SIGCHI - Seattle
Information Architecture
Principals
Puget Sound SIGCHI - Seattle
Magic Number SevenPerceived channel capacity of a number of human cognitive and perceptual tasks.
George A. MillerDepartment of Psychology, Princeton University
Puget Sound SIGCHI - Seattle
Simon’s LawHierarchical 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
Progressive Disclosure
Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone.
Jakob NielsenNielsen Norman Group
Puget Sound SIGCHI - Seattle
The Knowledge GapIncreasing gap between higher and lower educated people Tichenor, Donohue and OlienUniversity of Minnesota
Puget Sound SIGCHI - Seattle
Clear Calls to ActionDraw the user to the goal of the page. Encourage the next action to be taken.
Puget Sound SIGCHI - Seattle
Use Patterns First, Innovate Last.
Know the rules before you break them.
Puget Sound SIGCHI - Seattle
!The Wireframe
Puget Sound SIGCHI - Seattle
Wireframe
Puget Sound SIGCHI - Seattle
Part Four:
Interaction & Dynamic Elements
Puget Sound SIGCHI - Seattle
Questions
Puget Sound SIGCHI - Seattle
?What happens when I do this?
Puget Sound SIGCHI - Seattle
?How long will this take?
Puget Sound SIGCHI - Seattle
?What just happened?
Puget Sound SIGCHI - Seattle
?Can I undo this?
Puget Sound SIGCHI - Seattle
Inputs
Puget Sound SIGCHI - Seattle
Process Flow
Puget Sound SIGCHI - Seattle
Wireframe
Puget Sound SIGCHI - Seattle
Interaction Principals
Puget Sound SIGCHI - Seattle
ConsistencyInteractions that are the same in principal should be consistent in behavior system wise. Be consistent with the user’s expectations.
Puget Sound SIGCHI - Seattle
Latency ReductionAllow for apparent quicker response times. Use AJAX, Cache information, etc. Anticipate the user’s next action.
Puget Sound SIGCHI - Seattle
Show StateAlways communicate what state the current interaction is at (active/inactive).
Puget Sound SIGCHI - Seattle
Do No HarmAllow 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
!The Storyboard
Puget Sound SIGCHI - Seattle
Storyboard
Manage Account
! Rename account
! Order checks
! Stop check
! Order check card
! Manage Statements
Manage Account
Use this form to place a stop check on a check that has been issued. Amount of the check will be credited back to your account (more info)
Account #: ...4324
From Check #:
To Check #:
Reason:
Note you will be chaged a $8.00 fee for each stop check order. (more info)
! Rename account
! Order checks
! Stop check
! Order check card
! Manage Statements
Manage Account
Order new checks for this account?
! Rename account
! Order checks
! Stop check
! Order check card
! Manage Statements
Stop Check
RenameHome Checking
Order Checks
Lost check
! Download
! Download
! Download
Manage Account
Note: If your card was lost or stolen please call 800-637-0852 to ensure deactivation. (more info)
Reason:
Rush Delivery?
Note you will be chaged a $45.00 fee for a rush delivery of a check card. (more info)
Charge to account:
! Rename account
! Order checks
! Stop check
! Order check card
! Manage Statements
Manage Account
Note: these changes will impact your savings account(s) as well. (more info)
! Rename account
! Order checks
! Stop check
! Order check card
! Manage Statements
Damaged check card
Order
Paper Statements
Go Paperless
Home checking (5423)
Manage Account
! Rename account
! Order checks
! Stop check
! Order check card
! Manage Statements
! Download
! Download
! Download
Download Now
Select file format...
Puget Sound SIGCHI - Seattle
!The Annotated Wireframe
Puget Sound SIGCHI - Seattle
Annotated Wireframe
Puget Sound SIGCHI - Seattle
Photo by Dan Buczynskihttp://www.flickr.com/photos/macwagen/225493960/
Puget Sound SIGCHI - Seattle
Relax, there is a map!
Peter Morville and Jeffery Callender
Puget Sound SIGCHI - Seattle
...and Books!
Puget Sound SIGCHI - Seattle
Thank you!
Puget Sound SIGCHI - Seattle
Thank you!
Remember, comment on twitter with #pssigchi
Puget Sound SIGCHI - Seattle
?Questions?
Puget Sound SIGCHI - Seattle
The Life Cycle of a WireframeNick Fincknick@blueflavor.comBlue Flavor - http://blueflavor.comPersonal - http://nickfinck.com
top related