The Life Cycle Of A Wireframe: LOL Cats Style

The Life Cycle of
a Wireframe
Nick Finck
March 17, 2010

MIX10 - Las Vegas

The Life Cycle of t y l e
a Wireframe t S
C a
Nick Finck
March 17, 2010
L O L

MIX10 - Las Vegas

Nick Finck
Blue Flavor

‣ Principal & Director of User Experience

‣ Over 15 years of experience working in the web ﬁeld
‣ Has worked with Adobe, Boeing, CBS, Cisco, CitiGroup,
Comcast, FDIC, HP, IBM, and, yes, Microsoft

‣ Co-organized and curated more than 10 national and
international web conferences & events
‣ BlueFlavor.com
‣ Judged the Webby’s and several other web awards
‣ NickFinck.com
‣ Former publisher of Digital Web Magazine

‣ Expertise in information architecture, interaction design,
and user research

3
IA is a
Three-Step
process

Step One:
Understanding
the Problem

Finding the sweet spot

Tec
s
tive

hn
ica
je c

lR
Ob

equ
ess
Sweet

irem
sin

Spot
Bu

ent
s
Customer (or User) Needs

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

Step Three:
Presenting the
Solution

?
What makes a good
Wireframe?

There are many
Types of
Wireframes

Part One:
Navigation &
Wayﬁnding

Where iz I?

Photo by Adrian Campﬁeld - http://www.ﬂickr.com/photos/adrians_art/90598537/

Haz no content?
Photo by Jimmy Leo - http://www.ﬂickr.com/photos/babykailan/375532425/

Where
do I want
to go to
next?
Photo by Chris Straight - http://www.ﬂickr.com/photos/logwater/1976472604/

We haz been
here b 4

Photo by kat_cat - http://www.ﬂickr.com/photos/sumidog/384096174/

Sitemap
About SXSW Contact 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

Higher Priority

Reading Pattern
Written english is read left to right,
top to bottom. The top left is the
ﬁrst location the reader looks.

Lower Priority

Fitts’s Law
The 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 Spool
User Interface Engineering

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

Part Two:
Layout & Page
Structure

What do I notice ﬁrst?

Photo by marloez - http://www.ﬂickr.com/photos/passaatsail2005/47464445/

I haz organize skillz!

Photo by Eric Hart - http://www.ﬂickr.com/photos/eqqman/2817270561/

i da samez!
Photo by Dave Morris - http://www.ﬂickr.com/photos/davemorris/5165181/

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

Common Location
of web Objects

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

Law of Closure
The mind may experience elements it
does not perceive through sensation,
in order to complete a regular ﬁgure
(that is, to increase regularity).

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.

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

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

Part Three:
Page Detail &
Content Integration

What is here?

Photo by Nick Finck - http://www.ﬂickr.com/photos/digitalweb/16122964/

I escapez!

Photo by Shawn - http://www.ﬂickr.com/photos/missypatt811/2473186183/

Information
Architecture
Principals

Magic Number Seven
Perceived channel capacity of a
number of human cognitive and
perceptual tasks.
George A. Miller
Department of Psychology, Princeton University

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.

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

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

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

Part Four:
Interaction &
Dynamic Elements

Iz clickzable?

Photo by Carol Stohs - http://www.ﬂickr.com/photos/carolmyra/362699219/

How long will
this take?

Photo by Kimblah - http://www.ﬂickr.com/photos/kimblahg/104059913/

What just
happened?

Photo by ThinkGeek - http://www.ﬂickr.com/photos/thinkgeekmonkeys/4032424725/

undo?
Can I haz
Photo by goodwin71 - http://www.ﬂickr.com/photos/85107706@N00/660586487/

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

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

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

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 ﬁelds where appropriate.

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 ﬁle 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

Photo by Ariel Bo Bariel - http://www.ﬂickr.com/photos/15762702@N02/3056380801/

I haz question

Photo by Kirstie Shanley - http://www.ﬂickr.com/photos/kirstiecat/470689373/

I haz bookz

The Life Cycle of a
Wireframe
Nick Finck
@nickf
nick@blueﬂavor.com
http://blueﬂavor.com

iz sleepy time
Photo by Rasmus Rasmussen - http://www.ﬂickr.com/photos/theprint/3903655718/

The Life Cycle Of A Wireframe: LOL Cats Style

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie The Life Cycle Of A Wireframe: LOL Cats Style

Ähnlich wie The Life Cycle Of A Wireframe: LOL Cats Style (19)

Mehr von Nick Finck

Mehr von Nick Finck (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

The Life Cycle Of A Wireframe: LOL Cats Style