16 Presentation Desc

Wireframes: A comparison of
purposes, process, and

products
Anders Ramsay, Dave Heller, Jeff

Lash, Laurie Gray, Todd Warfel
IA Summit 2006  Wireframes: A comparison of purposes, process, and products

The format
 The Intro
 The Methods (5 minutes each!)
 Todd – “Traditional" tools
 Dave – Flash
 Anders – XHTML/CSS
 Jeff – UI Specifications
 Laurie – Prototyping Tools
 The Discussion

What this is
 Presentation of various methods

 Honest discussion of what’s good /
bad about each
 Opportunity for you to learn new
methods and find out what’s best for
you

What this isn’t
 Debate about what method is best

 Discussion about what the “ideal” IA
tool would do

Traditional
Wireframing
Methods
Exploring the pros and cons of
electronic and paper-based
methods
Todd Warfel, Messagefirst
Copyright © 2004-2006 Todd Warfel. These slides may not be reproduced or distributed without prior written consent from Messagefirst
http://messagefirst.com
Traditional Wireframing Methods
It’s just
a tool
Why Wireframe?
To communicate
To explore
To test
Audience?
Designers
Developers executives
product management Us
Our Environment
Consulting. Clients with
varying skills. Designers
typically know Illustrator,
some Flash, limited HTML.
Use
Consumers take notes
on the document.
Engineers have
multiple versions.
Present in person and
Possible Options
Flash HTML Traditional
Tools
(Pencil & Paper, Illustrator, InDesign, Visio,
OmniGraffle)
Illustrator, ID,
Flash HTML
Visio
Initial Setup ***** ***** *****
Maintenance ***** ***** *****
Reuse ***** ***** *****
Delivery
Method ***** ***** *****
Behavior
Notes ***** ***** *****
Tool
Knowledge ***** ***** *****
RIAs ***** ***** *****
Consider this
method
Working with multiple
clients/vendors
Your environment needs a “leave
behind” artifact
Your designers don’t know HTML
You already know the tools
Make the Most of It

Create a template system
Use Multiple Master pages
Place Behavior Notes on a separate
layer
Have a Document Index
Have a Version History
Use Storyboards for RIA transitions
David Heller synapticburn.com
FLASH:
Designing and
Communicating
for TIME
David Heller
www.synapticburn.com
March 2006
IA Summit 2006
Vancouver, British Columbia, Canada
March 2006 IA Summit 2006

Design // Communicate // Test // Document

Purposes for Wireframes & Prototypes
●
For you
●
For development
●
For testing/validation
●
For the future

My World > IxD

●
Rapid development
– Agile
●
Web-applications
– More IxD than IA
– AJAX - intra-page interactions
●
Multiple technologies
– HTML (old school)
– AJAX (new school)
– Java & .NET

Time: “Our constant companion”

●
All user experience occurs over time
●
Different user experiences have different relationships
with time.
– Reading = passive
– Interactive = active
●
Active time usage patterns are more narrative.
●
Storyboards vs. prototype

Options for Interactive Prototypes

xHTML (or any HTML variant)
●
Very dynamic < code />
●
Easy to make object oriented
●
Code to be “used” (at least for web apps)
●
Not really a design environment (i.e. can’t draw)
Visual Studio (or other IDE environment)

●
Very Dynamic
●
Easy to make object oriented
●
Good architecting platform with support tools
●
Code to be “used” (at least for desktop apps & ActiveX)
●
Not really a design environment (i.e. can’t draw)

More Options
Miscellaneous options:
●
Norpath Elements Studio
●
Eclipse environment (Java)
●
Expression (Microsoft’s new tools for app design)
Bigger options (read, too expensive)

●
iRise
●
Serena

Why Flash
●
Everything that the others have +
●
Design environment
– Visually driven (select object add to object)
– I can draw
– It is connected with both Freehand and Fireworks
– Timeline & onion skinning
●
Behaviors are embedded
– Objects, methods, and properties are easier to access
– Many components for data, forms, info layout
●
These are customizable.
●
Designers know it (or many do)

Designing, Testing, and Communicating

●
It does these 3 things well
●
Printing is a problem - Not good for Documenting

Working in the medium

Q: Shouldn’t I be working in the medium I’m designing for?
A: It depends
… discuss

Best Practices - Examples

●
Architect Prototypes using Screens
●
“wireframes” - Draw in basic colors (16 color palette) to
start
●
Layer in details through iterations on top of
“wireframes”
●
With each iteration increase both visual detail and
interactive detail
●
Use XML to create datasets

XHTML Wireframes
• Using XHTML to specify web pages

• Leverages Web Standards
• Semantic Markup
• Content structure/hierarchy focus
© Anders Ramsay 2006

XHTML Wireframes
visually….
drawing-based… xhtml…
HEADER
SITE BRAND USER INFO
GLOBAL NAV BASIC SEARCH
LOCAL NAV PAGE CONTENT PAGE CONTROLS
COMMUNITY
MARKETING
PAGINATION
FOOTER

XHTML Wireframes
visually… xhtml…
drawing-based…
HEADER
SITE BRAND USER INFO
[site brand] Signedinas: AndersRamsay (aramsay) |SignOut
GLOBAL NAV BASIC SEARCH

HOME |PRODUCTS | CONTACT | ABOUT |HELP Search
LOCAL NAV PAGE CONTENT PAGE CONTROLS

Category 1 Email thispage
Pageheader Printthispage
Category 2 Loremipsumdolor sitamet, consectetuer adipiscingelit. Duisaodiononerossemper Bookmarkthispage
Category 3 bibendum.Donecmolestietinciduntodio. Inhachabitasseplateadictumst . Crasnonummy
Category n feugiatnisl. Nuncateratvitaetortor dapibusvolutpat . Nuncenim. Nullampurus. COMMUNITY
SectionHeader Nocommentsadded
MARKETING Nullapretiumvolutpatnisi. Fuscevulputateluctusrisus . Sedultriciesnequeidlacus. Donec
Addacomment
erosligula, egestasut, vehiculamollis, tempora, lacus. Praesentvestibulumnisi sitamet
nulla. Namcondimentum,mi necfacilisislaoreet, liberoquamgravidanulla, etsemper velit
dolor quisenim. Duislacus. Praesentutanteatnisi fermentumvestibulum. Donec
sollicitudinsagittistortor . Proinquispurusavelitfeugiateleifend. Curabitur egetsapien.
Suspendissemollis.
SectionHeader
Loremipsumdolor sitamet, consectetuer adipiscingelit. Duisaodiononerossemper
bibendum.Donecmolestietinciduntodio. Inhachabitasseplateadictumst . Crasnonummy
feugiatnisl. Nuncateratvitaetortor dapibusvolutpat . Proinquispurusavelitfeugiat
eleifend.Curabitur egetsapien. Suspendissemollis.
PAGINATION
1| 2| 3| Next>>
FOOTER
Copyright 2006, All RightsReserved | BacktoTop |PrivacyPolicy | Terms &Conditions

XHTML Wireframes and Layout
• Leverages Content/Presentation separation

• Team Ideation > whiteboarding/sketches >
one-offs, discarded
• IA > Content structure (XHTML)
• Visual Designer > Layout (CSS/Comps)
(divisions not always crisp)

Additional Topics…
• Production Environment (Dreamweaver)

• Templates
• Annotations
• Style Guide/Content Classes
• Ajax

Pros/Cons
 
• Rapid production • Requires knowledge of
• Reusability XHTML (and CSS)
• Single-sourcing • Requires early involvement
by entire team
• Fewer annotations
• Not well suited for rich
• Prototyping
media (e.g. Flash/Video)
• Knowledge transfer
• Content/Presentation/Code
• Portability separation fuzzy

UI Specifications
Jeff Lash
jeff@jefflash.com
IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: jeff@jefflash.com

Written UI specifications
• Documentation of complete user interface
specifications for systems
• Complete, detailed, “official”
• Developed over time, based on feedback from others

(developers, architects, product managers,
analysts… )

How they get developed
• Prototype (usually HTML, sometimes PowerPoint or
Photoshop) created over informal iterations, evolves
based on usability testing
• When “final,” serves as the basis for UI spec
• UI spec goes through many iterations

What they look like
• Word document, with screenshots
– Can be done as HTML
• For each page / unit

– Screenshot
– Description of purpose
– UI “widgets”
– User actions
– Error scenarios

The good
• Ability to document all necessary details
• Used as platform for communication with others –
allows questions, details to emerge
• Serves as formal record of rules, patterns, decisions
• Can be understood (and read) by developers,
analysts, business stakeholders
• Universal – same format regardless of design work
(web site, web app, desktop software, PDA, etc.)
• Separates design decisions from documentation
decisions
• Easily printable

The bad
• Time-consuming – to develop, to read, to change
• Hard to manage various iterations
• Don’t easily respond to change
• Document size can become unmanageable
• Creating/editing needs to be managed closely if
there are multiple IAs
• Can often overlap with other documentation (e.g.
use cases, test plans)
• Duplication and consistency throughout and across
specs needs to be closely monitored

When to use them
• Best for stable projects
– Known and non-changing requirements
– Large project teams
– “All-at-once” delivery
• If multiple levels of signoff are needed
• When compliance is an issue (e.g. Sarbanes-Oxley)
• When trust is an issue – if you need a written record
and commitment to ensure development is done
“to spec”

Prototyping Tools
Laurie Gray
Manager of User Experience & Design
KnowledgeStorm.com
IA Summit – Vancouver 2006
Bridging: Wireframes to Prototypes
Prototyping: Quickly putting together a working model of an idea that is

being developed. (adapted from wikipedia)
• Pros: • Cons:
– Shows holes in your – Can be time
design consuming
– Allow developers to – Development might
see what this item resist
actually is/does – Duplicated effort
– Potentially decreases – Throwaway code
documentation time
– Versioning
– Potentially increases
– Complicated tools
development accuracy
– May not provide
– Gets you up and
enough information to
running quickly
developers
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
Metrics For Deciding What to Use

• Fidelity:
– how much or how little information is shown? How
“complete” can you make the prototype?
• Speed of development:
– How much of a learning curve is there? Once you learn the
tool, how quickly can you build things?
• Reusability:
– Is the output throwaway or can your development team
utilize it?
• Level of interactivity:
– Will it require considerable guidance of the user or is it
able to be used independently?
• Level of editability:
– Can you progressively improve it over time, or do you
need to start over each time?
• Portability:
– Can anyone view it on any machine, or are plugins/special
tools required?
Possible Prototyping Tools
• DENIM
• Axure
• HTML
• Mapped flat images
• Paper
• Visual Basic
• Flash/Director
• Various specialty tools

DENIM
• http://dub.washington.edu/denim/
Fidelity:
X LOW HIGH
Speed: SLOW
X FAST
Reusability:
X NO YES
Interactivity: LOW
X HIGH
Editability: LOW
X HIGH
Portability: LOW
X HIGH

Axure
• http://www.axure.com/
Fidelity: LOW
X HIGH
Speed:
X SLOW FAST
Reusability:
X NO YES
Interactivity: LOW
X HIGH
Editability: LOW
X HIGH
Portability: LOW
X HIGH

HTML
• http://www.macromedia.com/software/dreamweaver
• http://www.nvu.com
Fidelity: LOW
X HIGH
Speed:
X SLOW FAST
Reusability: NO
X YES
Interactivity: LOW
X HIGH
Editability: LOW
X HIGH
Portability: LOW
X HIGH

Mapped Flat Images

• http://www.adobe.com/products/photoshop/main.html
• http://www.gimp.org/
Fidelity:
X LOW HIGH
Speed:
X SLOW FAST
Reusability:
X NO YES
Interactivity: LOW
X HIGH
Editability: LOW
X HIGH
Portability: LOW
X HIGH

Paper
• http://www.paperprototyping.com/
Fidelity:
X LOW HIGH
Speed:
X SLOW FAST
Reusability:
X NO YES
Interactivity:
X LOW HIGH
Editability:
X LOW HIGH
Portability: LOW
X HIGH

Visual Basic
• http://msdn.microsoft.com/vbasic/downloads/
Fidelity: LOW X HIGH
Speed:
X SLOW FAST
Reusability:
X NO YES
Interactivity: LOW
X HIGH
Editability: LOW
X HIGH
Portability: LOW
X HIGH

Flash/Director
• http://www.macromedia.com/software/flash/flashpro/
• http://www.macromedia.com/software/director/
Fidelity: LOW
X HIGH
Speed:
X SLOW FAST
Reusability:
X NO YES
Interactivity: LOW
X HIGH
Editability: LOW
X HIGH
Portability: LOW
X HIGH

Various Specialty Tools

• Do a search – many exist on the web
Fidelity: LOW
? HIGH
Speed: SLOW
? FAST
Reusability: NO
? YES
Interactivity: LOW
? HIGH
Editability: LOW
? HIGH
Portability: LOW
? HIGH

Our Approach
• Interactive Wireframes
– Hybrid approach
• Using Axure


Copies are available at www.lauriegray.com

The Discussion

16 Presentation Desc

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

16 Presentation Desc

Hochgeladen von

Copyright:

Verfügbare Formate

Wireframes: A comparison of

purposes, process, and

Anders Ramsay, Dave Heller, Jeff

IA Summit 2006  Wireframes: A comparison of purposes, process, and products

IA Summit 2006  Wireframes: A comparison of purposes, process, and products

 Presentation of various methods

IA Summit 2006  Wireframes: A comparison of purposes, process, and products

 Debate about what method is best

IA Summit 2006  Wireframes: A comparison of purposes, process, and products

Make the Most of It

March 2006 IA Summit 2006

Design // Communicate // Test // Document

March 2006 IA Summit 2006

My World > IxD

March 2006 IA Summit 2006

Time: “Our constant companion”

March 2006 IA Summit 2006

Options for Interactive Prototypes

Visual Studio (or other IDE environment)

March 2006 IA Summit 2006

Bigger options (read, too expensive)

March 2006 IA Summit 2006

March 2006 IA Summit 2006

Designing, Testing, and Communicating

March 2006 IA Summit 2006

Working in the medium

March 2006 IA Summit 2006

Best Practices - Examples

March 2006 IA Summit 2006

• Using XHTML to specify web pages

© Anders Ramsay 2006

GLOBAL NAV BASIC SEARCH

LOCAL NAV PAGE CONTENT PAGE CONTROLS

© Anders Ramsay 2006

GLOBAL NAV BASIC SEARCH

LOCAL NAV PAGE CONTENT PAGE CONTROLS

© Anders Ramsay 2006

• Leverages Content/Presentation separation

© Anders Ramsay 2006

• Production Environment (Dreamweaver)

© Anders Ramsay 2006

© Anders Ramsay 2006

IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: jeff@jefflash.com

• Complete, detailed, “official”

• Developed over time, based on feedback from others

IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: jeff@jefflash.com

• When “final,” serves as the basis for UI spec

• UI spec goes through many iterations

IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: jeff@jefflash.com

• For each page / unit

IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: jeff@jefflash.com

IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: jeff@jefflash.com

IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: jeff@jefflash.com

IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: jeff@jefflash.com

Bridging: Wireframes to Prototypes

Prototyping: Quickly putting together a working model of an idea that is

Metrics For Deciding What to Use

Possible Prototyping Tools

Copyright 2006 KnowledgeStorm, Inc. All rights reserved.

Copyright 2006 KnowledgeStorm, Inc. All rights reserved.

Copyright 2006 KnowledgeStorm, Inc. All rights reserved.

Copyright 2006 KnowledgeStorm, Inc. All rights reserved.

Mapped Flat Images

Copyright 2006 KnowledgeStorm, Inc. All rights reserved.