The Life Cycle of a Wireframe

Puget Sound SIGCHI - Seattle

The Life Cycle of a WireframeNick FinckMay 28, 2009

Use #pssigchi when commenting on twitter


?Who the f#@k is this dude?


• 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


3IA is a three step process


Understanding the Problem



Use

r N

eeds

Technical Requirements

Business C

onstraints


Finding a Solution


Photo by DrJoanne - http://www.flickr.com/photos/drjoanne/10026716/

http://www.flickr.com/photos/drjoanne/10026716/

http://www.flickr.com/photos/drjoanne/10026716/


Presenting the Solution


?What makes a goodWireframe?


4Wireframes in four parts


Part One:

Navigation & Wayfinding


Questions


?Where am I?


?Is what I am looking for here?


?Where do I want to go next?


?Where have I already been?


Inputs


Content Inventory


Content Audit


Content Strategy


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

Facebook

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


Process Flow


Navigation Principals


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.


Fitts’s LawThe time to acquire a target is a function of the distance to and size of the target.


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


!The Navigation Schema


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


Video Production


General Computing

Our Approach

Game Design

3D Modeling


Video Production


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


Part Two:

Layout & Page Structure


Questions


?What do I notice first?


?How is this information organized?


?What seems to be related?


Inputs


Personas


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


Layout Principals


Common Location of web Objects

Michael L. BernardSoftware Usability Research Laboratory, Wichita State University


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).


Law of SimilarityThe mind groups similar elements into collective entities or totalities. This similarity might depend on relationships of form, color, size, or brightness.


Law of ProximitySpatial or temporal proximity of elements may induce the mind to perceive a collective or totality.


Law of Symmetry

[ ][ ][ ]

Symmetrical images are perceived collectively, even in spite of distance.


Law of ContinuityThe mind continues visual, auditory, and kinetic patterns.


Law of Common FateElements with the same moving direction are perceived as a collective or unit.


Law of Common FateElements with the same moving direction are perceived as a collective or unit.


!The Zone Diagram


Zone Diagram


Part Three:

Page Detail & Content Integration


Questions


?What is here?


?What can I do?


Inputs


Content Strategy


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

Facebook

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


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


Video Production


General Computing

Our Approach

Game Design

3D Modeling


Video Production


General Computing

Our Approach

Game Design

3D Modeling


Video Production


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


Personas


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


Zone Diagram


Information Architecture

Principals


Magic Number SevenPerceived channel capacity of a number of human cognitive and perceptual tasks.

George A. MillerDepartment of Psychology, Princeton University


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.


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


The Knowledge GapIncreasing gap between higher and lower educated people Tichenor, Donohue and OlienUniversity of Minnesota


Clear Calls to ActionDraw the user to the goal of the page. Encourage the next action to be taken.


Use Patterns First, Innovate Last.

Know the rules before you break them.


!The Wireframe


Wireframe


Part Four:

Interaction & Dynamic Elements


Questions


?What happens when I do this?


?How long will this take?


?What just happened?


?Can I undo this?


Inputs


Process Flow


Wireframe


Interaction Principals


ConsistencyInteractions that are the same in principal should be consistent in behavior system wise. Be consistent with the user’s expectations.


Latency ReductionAllow for apparent quicker response times. Use AJAX, Cache information, etc. Anticipate the user’s next action.


Show StateAlways communicate what state the current interaction is at (active/inactive).


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.


!The Storyboard


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


!The Annotated Wireframe


Annotated Wireframe


Photo by Dan Buczynskihttp://www.flickr.com/photos/macwagen/225493960/

http://www.flickr.com/photos/macwagen/225493960/

http://www.flickr.com/photos/macwagen/225493960/


Relax, there is a map!

Peter Morville and Jeffery Callender

http://www.findability.org/archives/000230.php

http://www.findability.org/archives/000230.php


...and Books!


Thank you!


Thank you!

Remember, comment on twitter with #pssigchi


?Questions?


The Life Cycle of a WireframeNick [email protected] Flavor - http://blueflavor.comPersonal - http://nickfinck.com

mailto:[email protected]

mailto:[email protected]

http://blueflavor.com

http://blueflavor.com

http://nickfinck.com

http://nickfinck.com