The Life Cycle Of A Wireframe

The Life Cycle of a Wireframe Nick Finck May 28, 2009 Use #pssigchi when commenting on twitter

Puget Sound SIGCHI - Seattle

?

Who the f#@k is this dude?

Puget Sound SIGCHI - Seattle

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

3

IA is a three step process Puget Sound SIGCHI - Seattle

Understanding the Problem

Puget Sound SIGCHI - Seattle

Puget Sound SIGCHI - Seattle

s ee d er N

s

t ain str

Us

n Co ss

ine

s Bu Technical Requirements

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 good Wireframe?

Puget Sound SIGCHI - Seattle

4

Wireframes 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

Sitemap

Ycl\ ]cXmfi

SXSW Site Structure New Site Structure



About SXSW

Register

Brochures and Forms (PDFs)

Hotels for SXSWeek 2008

Austin Map

Music Exhibition

Mailing Lists

Travel Discounts

Conference Center

iF! Exhibition

Subscribe

International

Carver Center

SXSWorld Magazine

Online Reg Directory

Day Stage Cafe

Getting Around

Trade Shows

Merchandise

Interactive

Film

Market at SXSW

Tools

History

SXSW SMS

Sponsors

Gydget

Sustainability

Facebook

SXSW.com News & Information

Contact

Music Opera Mini

Glossary

Utterz

Auditorium Shores Stage

My SXSWorld Stories

Music Player

Music News & Information

Schedule

Talks

Shows

The Daily Chord

Talks

Speakers

FAQ

Shows

Keynote

Parties & Play

Flatstock Poster Show

Getting Around

Press

Artists

Austin Map

Press Releases

SXSW Live

Conference Center

Press Kit

Mentor Sessions Video

Any additional venues

Parties & Play

Quickies Sessions

FAQ

Demo Listening Sessions

Podcasts

Press Credentials

CLE Photo Policy

Interactive News & Information

Schedule

Talks

Interactive Hub

Talks

Speakers

FAQ

Parties & Play

Opening Remarks

Parties & Play

ScreenBurn Gaming Fest

Getting Around

Press

Winners

Austin Map

Press Releases

Finalists

Conference Center

Press Kit

Web Awards

Keynotes Video

Book Readings

Ceremony

FAQ

Dewey Award

Press Credentials

Film Podcasts News & Information

Schedule

The News Reel

Talks

Speakers

Film Trailers

Austin Map

Press Releases

FAQ

Films

Speaking Opportunities

Past Winners

Conference Center

Press Kit

Video

Parties & Play

Talks

FIlms

Parties & Play

Global Doc Days

Getting Around

Core Conversations

Press Speaking Opportunities

Photo Policy

Panel Picker

Key

FAQ Panel Picker

Podcasts

Press Credentials

Photo Policy

Primary navigation

a

Secondary navigation

a

Link to separate section

a

Separate sub-site

a

Future navigation

Modified: Tue May 27 2008

Puget Sound SIGCHI - Seattle

Process Flow

Puget Sound SIGCHI - Seattle

Navigation Principals Puget Sound SIGCHI - Seattle

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

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

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

!

The Navigation Schema

Puget Sound SIGCHI - Seattle

Navigation Schema

Ycl\ ]cXmfi

GiantCampus.com Information Architecture Navigation Schema



Global Navigation 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

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 Ycl\ ]cXmfi

Sample Company Name

Home Page



1

2

3

Main call to action

Search

About company

Page Description Diagrams

Notes

Gets users thinking about the brand and specific actions they can make.

A useful site search should always be An outline of what your company is all available on the page to allow users an about. alternative method for finding your Sign-up Privacy, Terms of Use, Etc. content. A call to action that encourages peoMost of the information that is curLink list ple to sign up for recently added conrently listed in the footer should retent on the site. A list of semi-recently added link con- main there. The contact and address tent. This list should contain 5-7 links information can easily be moved to Featured article or essay with date and comment meta inforthe contact page, though. We also Shows the first paragraph of an article mation for each. recommend adding in some navigawith associated image, as well as the tional links, where possible. day it was published and the number of comments made.

The homepage has been shifted to emphasize content that’s currently buried elsewhere in your site. The proposed navigation structure reinforces this goal. The home page should provide a clean path to the various sections of the site.

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

Layout Principals

Puget Sound SIGCHI - Seattle

Common Location of web Objects

Michael L. Bernard Software Usability Research Laboratory, Wichita State University

Puget Sound SIGCHI - Seattle

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

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

Law of Proximity Spatial 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 Continuity The mind continues visual, auditory, and kinetic patterns.

Puget Sound SIGCHI - Seattle

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

Puget Sound SIGCHI - Seattle

Law of Common Fate Elements 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

Sitemap

Ycl\ ]cXmfi

SXSW Site Structure New Site Structure



About SXSW

Register

Brochures and Forms (PDFs)

Hotels for SXSWeek 2008

Austin Map

Music Exhibition

Mailing Lists

Travel Discounts

Conference Center

iF! Exhibition

Subscribe

International

Carver Center

SXSWorld Magazine

Online Reg Directory

Day Stage Cafe

Getting Around

Trade Shows

Merchandise

Interactive

Film

Market at SXSW

Tools

History

SXSW SMS

Sponsors

Gydget

Sustainability

Facebook

SXSW.com News & Information

Contact

Music Opera Mini

Glossary

Utterz

Auditorium Shores Stage

My SXSWorld Stories

Music Player

Music News & Information

Schedule

Talks

Shows

The Daily Chord

Talks

Speakers

FAQ

Shows

Keynote

Parties & Play

Flatstock Poster Show

Getting Around

Press

Artists

Austin Map

Press Releases

SXSW Live

Conference Center

Press Kit

Mentor Sessions Video

Any additional venues

Parties & Play

Quickies Sessions

FAQ

Demo Listening Sessions

Podcasts

Press Credentials

CLE Photo Policy

Interactive News & Information

Schedule

Talks

Interactive Hub

Talks

Speakers

FAQ

Parties & Play

Opening Remarks

Parties & Play

ScreenBurn Gaming Fest

Getting Around

Press

Winners

Austin Map

Press Releases

Finalists

Conference Center

Press Kit

Web Awards

Keynotes Video

Book Readings

Ceremony

FAQ

Dewey Award

Press Credentials

Film Podcasts News & Information

Schedule

The News Reel

Talks

Speakers

Film Trailers

Austin Map

Press Releases

FAQ

Films

Speaking Opportunities

Past Winners

Conference Center

Press Kit

Video

Parties & Play

Talks

FIlms

Parties & Play

Global Doc Days

Getting Around

Core Conversations

Press Speaking Opportunities

Photo Policy

Panel Picker

Key

FAQ Panel Picker

Podcasts

Press Credentials

Photo Policy

Primary navigation

a

Secondary navigation

a

Link to separate section

a

Separate sub-site

a

Future navigation

Modified: Tue May 27 2008

Puget Sound SIGCHI - Seattle

Navigation Schema

Ycl\ ]cXmfi

GiantCampus.com Information Architecture Navigation Schema



Global Navigation 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

Personas

Puget Sound SIGCHI - Seattle

Page Description Diagram Ycl\ ]cXmfi

Sample Company Name

Home Page



1

2

3

Main call to action

Search

About company

Page Description Diagrams

Notes

Gets users thinking about the brand and specific actions they can make.

A useful site search should always be An outline of what your company is all available on the page to allow users an about. alternative method for finding your Sign-up Privacy, Terms of Use, Etc. content. A call to action that encourages peoMost of the information that is curLink list ple to sign up for recently added conrently listed in the footer should retent on the site. A list of semi-recently added link con- main there. The contact and address tent. This list should contain 5-7 links information can easily be moved to Featured article or essay with date and comment meta inforthe contact page, though. We also Shows the first paragraph of an article mation for each. recommend adding in some navigawith associated image, as well as the tional links, where possible. day it was published and the number of comments made.

The homepage has been shifted to emphasize content that’s currently buried elsewhere in your site. The proposed navigation structure reinforces this goal. The home page should provide a clean path to the various sections of the site.

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

Zone Diagram

Puget Sound SIGCHI - Seattle

Information Architecture Principals Puget Sound SIGCHI - Seattle

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

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

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

The Knowledge Gap Increasing gap between higher and lower educated people Tichenor, Donohue and Olien University of Minnesota

Puget Sound SIGCHI - Seattle

Clear Calls to Action Draw 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

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

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

Puget Sound SIGCHI - Seattle

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

Puget Sound SIGCHI - Seattle

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

!

The Storyboard

Puget Sound SIGCHI - Seattle

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

! Stop check

! Stop check

! Stop check

! Stop check

! Stop check

! Order checks

! Order checks

! Order checks

! Order checks

! Order checks

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)

Order new checks for this account?

! Order check card

! Order check card

! Order check card

! Order check card

Account #: ...4324

! Manage Statements

! Manage Statements

! Manage Statements

From Check #:

! Order check card

Note: If your card was lost or stolen please call 800-637-0852 to ensure deactivation. (more info)

! Download

To Check #:

! Manage Statements

Reason: Damaged check card

Reason: Lost check

! Download

Rush Delivery?

Home Checking

! Stop check

Rename

Note you will be chaged a $8.00 fee for each stop check order. (more info) Stop Check

Order Checks

Paper Statements Go Paperless

Note you will be chaged a $45.00 fee for a rush delivery of a check card. (more info)

Note: these changes will impact your savings account(s) as well. (more info)

! Download Select file format...

Download Now

! Download

Charge to account: Home checking (5423) Order

! Order checks ! Order check card

! Manage Statements

! Manage Statements

! Download

! Download

Puget Sound SIGCHI - Seattle

!

The Annotated Wireframe

Puget Sound SIGCHI - Seattle

Annotated Wireframe

Puget Sound SIGCHI - Seattle

Photo by Dan Buczynski http://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 Wireframe Nick Finck [email protected] Blue Flavor - http://blueflavor.com Personal - http://nickfinck.com

Puget Sound SIGCHI - Seattle