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

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

Wireframes: A comparison of purposes, process, and products

Anders Ramsay, Dave Heller, Jeff Lash, Laurie Gray, Todd Warfel


The format

The Intro The Methods (5 minutes each!)

Todd – “Traditional" toolsDave – FlashAnders – XHTML/CSSJeff – UI SpecificationsLaurie – 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 MethodsExploring the pros and cons of electronic and paper-based methodsTodd Warfel, Messagefirst

Copyright © 2004-2006 Todd Warfel. These slides may not be reproduced or distributed without prior written consent from Messagefirst http://messagefirst.com

http://messagefirst.com/

It’s just a tool


Traditional Wireframing Methods


Why Wireframe?To communicateTo exploreTo test




Audience?Designers

Developers executives

product management Us




Our EnvironmentConsulting. Clients with

varying skills. Designers typically know Illustrator, some Flash, limited HTML.




UseConsumers take notes on the document. Engineers have

multiple versions. Present in person and remote.




Possible OptionsFlash HTML Traditional Tools

(Pencil & Paper, Illustrator, InDesign, Visio, OmniGraffle)






FlashFlash HTMLHTML Illustrator, ID, Illustrator, ID, VisioVisio

Initial SetupInitial Setup ***** ***** *****MaintenanceMaintenance ***** ***** *****

ReuseReuse ***** ***** *****Delivery Delivery MethodMethod ***** ***** *****

Behavior Behavior NotesNotes ***** ***** *****Tool Tool

KnowledgeKnowledge ***** ***** *****RIAsRIAs ***** ***** *****






Consider this methodWorking with multiple clients/vendorsYour environment needs a “leave behind” artifactYour designers don’t know HTMLYou already know the toolsYou need to balance behavior notes with illustrations




Make the Most of ItCreate a template systemUse Multiple Master pagesPlace Behavior Notes on a separate layerHave a Document IndexHave a Version HistoryUse Storyboards for RIA transitions




David Heller

March 2006 IA Summit 2006

synapticburn.com

FLASH: Designing and

Communicating for TIMEDavid Heller

www.synapticburn.com

March 2006IA Summit 2006

Vancouver, British Columbia, Canada

David Heller


synapticburn.comDesign // Communicate // Test //

DocumentPurposes for Wireframes & Prototypes

● For you

● For development

● For testing/validation

● For the future

David Heller


synapticburn.com

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

David Heller


synapticburn.com

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

David Heller


synapticburn.comOptions for Interactive

PrototypesxHTML (or any HTML variant)● Very dynamic● 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)

< code />

David Heller


synapticburn.com

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

David Heller


synapticburn.com

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)

David Heller


synapticburn.comDesigning, Testing, and

Communicating● It does these 3 things well

● Printing is a problem - Not good for Documenting

David Heller


synapticburn.com

Working in the medium

Q: Shouldn’t I be working in the medium I’m designing for?

A: It depends

… discuss

David Heller


synapticburn.com

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

© Anders Ramsay 2006

XHTML Wireframes

• Using XHTML to specify web pages• Leverages Web Standards• Semantic Markup• Content structure/hierarchy focus


XHTML Wireframes visually….

GLOBAL NAV

HEADERUSER INFO

FOOTER

LOCAL NAV

BASIC SEARCH

COMMUNITY

PAGE CONTENT PAGE CONTROLS

PAGINATION

MARKETING

SITE BRAND

drawing-based… xhtml…


XHTML Wireframes visually…

drawing-based…

xhtml…

Page header

SITE BRANDHEADER

USER INFO

FOOTER

LOCAL NAV

BASIC SEARCH

COMMUNITY

[site brand]

Category 1Category 2Category 3Category n

Copyright 2006, All Rights Reserved | Back to Top | Privacy Policy | Terms & Conditions

HOME | PRODUCTS | CONTACT | ABOUT | HELP

PAGE CONTENT PAGE CONTROLSEmail this pagePrint this pageBookmark this pageLorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a odio non eros semper

bibendum. Donec molestie tincidunt odio. In hac habitasse platea dictumst. Cras nonummy feugiat nisl. Nunc at erat vitae tortor dapibus volutpat. Nunc enim. Nullam purus.

Section HeaderNulla pretium volutpat nisi. Fusce vulputate luctus risus. Sed ultricies neque id lacus. Donec eros ligula, egestas ut, vehicula mollis, tempor a, lacus. Praesent vestibulum nisi sit amet nulla. Nam condimentum, mi nec facilisis laoreet, libero quam gravida nulla, et semper velit dolor quis enim. Duis lacus. Praesent ut ante at nisi fermentum vestibulum. Donec sollicitudin sagittis tortor. Proin quis purus a velit feugiat eleifend. Curabitur eget sapien. Suspendisse mollis.

Section HeaderLorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a odio non eros semper bibendum. Donec molestie tincidunt odio. In hac habitasse platea dictumst. Cras nonummy feugiat nisl. Nunc at erat vitae tortor dapibus volutpat. Proin quis purus a velit feugiat eleifend. Curabitur eget sapien. Suspendisse mollis.

PAGINATION

Signed in as: Anders Ramsay (aramsay) | Sign Out

Search

MARKETING

No comments added

Add a comment

1 | 2 | 3 | Next>>

GLOBAL NAV


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


• Rapid production• Reusability• Single-sourcing• Fewer annotations• Prototyping• Knowledge transfer• Portability

• Requires knowledge of

XHTML (and CSS)• Requires early

involvement by entire team

• Not well suited for rich media (e.g. Flash/Video)

• Content/Presentation/Code separation fuzzy

Pros/Cons

IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: [email protected]

UI Specifications

Jeff [email protected]


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 GrayManager of User Experience & Design

KnowledgeStorm.com

Copyright 2006 KnowledgeStorm, Inc. All rights reserved.

IA Summit – Vancouver 2006

Bridging: Wireframes to Prototypes

• Pros:

– Shows holes in your design

– Allow developers to see what this item actually is/does

– Potentially decreases documentation time

– Potentially increases development accuracy

– Gets you up and running quickly

• Cons:– Can be time

consuming– Development might

resist– Duplicated effort– Throwaway code– Versioning– Complicated tools– May not provide

enough information to developers

Prototyping: Quickly putting together a working model of an idea that is being developed. (adapted from wikipedia)



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/

X

XX

X

Fidelity: LOW HIGH

Speed: SLOW FAST

Reusability: NO YES

Interactivity: LOW HIGH

Editability: LOW HIGHXPortability: LOW HIGHX



FAST

• http://www.axure.com/

Axure

X

XX

X

Fidelity: LOW HIGH

Speed: SLOW

Reusability: NO YES





• http://www.macromedia.com/software/dreamweaver• http://www.nvu.com

HTML

X

XX

X

Fidelity: LOW HIGH

Speed: SLOW FAST

Reusability: NO YES





Mapped Flat Images

X

XX

X

Fidelity: LOW HIGH

Speed: SLOW FAST

Reusability: NO YES



• http://www.adobe.com/products/photoshop/main.html• http://www.gimp.org/



Paper• http://www.paperprototyping.com/

X

XX

X

Fidelity: LOW HIGH

Speed: SLOW FAST

Reusability: NO YES





Visual Basic• http://msdn.microsoft.com/vbasic/downloads/

X

XX

X

Fidelity: LOW HIGH

Speed: SLOW FAST

Reusability: NO YES





Flash/Director• http://www.macromedia.com/software/flash/flashpro/• http://www.macromedia.com/software/director/

X

XX

X

Fidelity: LOW HIGH

Speed: SLOW FAST

Reusability: NO YES





Various Specialty Tools• Do a search – many exist on the web

?Fidelity: LOW HIGH

Speed: SLOW FAST

Reusability: NO YES


Editability: LOW HIGH

Portability: LOW HIGH

?????



Our Approach

• Interactive Wireframes– Hybrid approach

• Using Axure





Copies are available at www.lauriegray.com


The Discussion

Documents

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