IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison...
-
Upload
victoria-horn -
Category
Documents
-
view
214 -
download
0
Transcript of IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison...
![Page 1: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/1.jpg)
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
![Page 2: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/2.jpg)
IA Summit 2006 Wireframes: A comparison of purposes, process, and products
The format
The Intro The Methods (5 minutes each!)
Todd – “Traditional" toolsDave – FlashAnders – XHTML/CSSJeff – UI SpecificationsLaurie – Prototyping Tools
The Discussion
![Page 3: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/3.jpg)
IA Summit 2006 Wireframes: A comparison of purposes, process, and products
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
![Page 4: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/4.jpg)
IA Summit 2006 Wireframes: A comparison of purposes, process, and products
What this isn’t
Debate about what method is best Discussion about what the “ideal” IA
tool would do
![Page 5: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/5.jpg)
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
![Page 6: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/6.jpg)
It’s just a tool
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
![Page 7: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/7.jpg)
Why Wireframe?To communicateTo exploreTo test
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
![Page 8: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/8.jpg)
Audience?Designers
Developers executives
product management Us
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
![Page 9: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/9.jpg)
Our EnvironmentConsulting. Clients with
varying skills. Designers typically know Illustrator, some Flash, limited HTML.
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
![Page 10: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/10.jpg)
UseConsumers take notes on the document. Engineers have
multiple versions. Present in person and remote.
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
![Page 11: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/11.jpg)
Possible OptionsFlash HTML Traditional Tools
(Pencil & Paper, Illustrator, InDesign, Visio, OmniGraffle)
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
![Page 12: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/12.jpg)
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
FlashFlash HTMLHTML Illustrator, ID, Illustrator, ID, VisioVisio
Initial SetupInitial Setup ***** ***** *****MaintenanceMaintenance ***** ***** *****
ReuseReuse ***** ***** *****Delivery Delivery MethodMethod ***** ***** *****
Behavior Behavior NotesNotes ***** ***** *****Tool Tool
KnowledgeKnowledge ***** ***** *****RIAsRIAs ***** ***** *****
![Page 13: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/13.jpg)
Copyright © 2004-2006 Todd Warfel. These slides may not be reproduced or distributed without prior written consent from Messagefirst http://messagefirst.com
![Page 14: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/14.jpg)
Copyright © 2004-2006 Todd Warfel. These slides may not be reproduced or distributed without prior written consent from Messagefirst http://messagefirst.com
![Page 15: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/15.jpg)
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
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
![Page 16: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/16.jpg)
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
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
![Page 17: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/17.jpg)
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
![Page 18: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/18.jpg)
David Heller
March 2006 IA Summit 2006
synapticburn.comDesign // Communicate // Test //
DocumentPurposes for Wireframes & Prototypes
● For you
● For development
● For testing/validation
● For the future
![Page 19: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/19.jpg)
David Heller
March 2006 IA Summit 2006
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
![Page 20: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/20.jpg)
David Heller
March 2006 IA Summit 2006
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
![Page 21: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/21.jpg)
David Heller
March 2006 IA Summit 2006
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 />
![Page 22: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/22.jpg)
David Heller
March 2006 IA Summit 2006
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
![Page 23: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/23.jpg)
David Heller
March 2006 IA Summit 2006
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)
![Page 24: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/24.jpg)
David Heller
March 2006 IA Summit 2006
synapticburn.comDesigning, Testing, and
Communicating● It does these 3 things well
● Printing is a problem - Not good for Documenting
![Page 25: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/25.jpg)
David Heller
March 2006 IA Summit 2006
synapticburn.com
Working in the medium
Q: Shouldn’t I be working in the medium I’m designing for?
A: It depends
… discuss
![Page 26: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/26.jpg)
David Heller
March 2006 IA Summit 2006
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
![Page 27: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/27.jpg)
© Anders Ramsay 2006
XHTML Wireframes
• Using XHTML to specify web pages• Leverages Web Standards• Semantic Markup• Content structure/hierarchy focus
![Page 28: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/28.jpg)
© Anders Ramsay 2006
XHTML Wireframes visually….
GLOBAL NAV
HEADERUSER INFO
FOOTER
LOCAL NAV
BASIC SEARCH
COMMUNITY
PAGE CONTENT PAGE CONTROLS
PAGINATION
MARKETING
SITE BRAND
drawing-based… xhtml…
![Page 29: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/29.jpg)
© Anders Ramsay 2006
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
![Page 30: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/30.jpg)
© Anders Ramsay 2006
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)
![Page 31: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/31.jpg)
© Anders Ramsay 2006
Additional Topics…
• Production Environment (Dreamweaver)
• Templates• Annotations• Style Guide/Content Classes• Ajax
![Page 32: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/32.jpg)
© Anders Ramsay 2006
• 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
![Page 33: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/33.jpg)
IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: [email protected]
UI Specifications
Jeff [email protected]
![Page 34: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/34.jpg)
IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: [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… )
![Page 35: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/35.jpg)
IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: [email protected]
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
![Page 36: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/36.jpg)
IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: [email protected]
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
![Page 37: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/37.jpg)
IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: [email protected]
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
![Page 38: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/38.jpg)
IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: [email protected]
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
![Page 39: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/39.jpg)
IA Summit 2006 :: Wireframes Comparison Panel :: Jeff Lash :: [email protected]
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”
![Page 40: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/40.jpg)
Prototyping Tools
Laurie GrayManager of User Experience & Design
KnowledgeStorm.com
![Page 41: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/41.jpg)
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)
![Page 42: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/42.jpg)
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
IA Summit – Vancouver 2006
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?
![Page 43: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/43.jpg)
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
IA Summit – Vancouver 2006
Possible Prototyping Tools
• DENIM• Axure• HTML• Mapped flat images• Paper• Visual Basic• Flash/Director• Various specialty tools
![Page 44: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/44.jpg)
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
IA Summit – Vancouver 2006
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
![Page 45: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/45.jpg)
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
IA Summit – Vancouver 2006
FAST
• http://www.axure.com/
Axure
X
XX
X
Fidelity: LOW HIGH
Speed: SLOW
Reusability: NO YES
Interactivity: LOW HIGH
Editability: LOW HIGHXPortability: LOW HIGHX
![Page 46: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/46.jpg)
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
IA Summit – Vancouver 2006
• http://www.macromedia.com/software/dreamweaver• http://www.nvu.com
HTML
X
XX
X
Fidelity: LOW HIGH
Speed: SLOW FAST
Reusability: NO YES
Interactivity: LOW HIGH
Editability: LOW HIGHXPortability: LOW HIGHX
![Page 47: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/47.jpg)
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
IA Summit – Vancouver 2006
Mapped Flat Images
X
XX
X
Fidelity: LOW HIGH
Speed: SLOW FAST
Reusability: NO YES
Interactivity: LOW HIGH
Editability: LOW HIGHXPortability: LOW HIGHX
• http://www.adobe.com/products/photoshop/main.html• http://www.gimp.org/
![Page 48: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/48.jpg)
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
IA Summit – Vancouver 2006
Paper• http://www.paperprototyping.com/
X
XX
X
Fidelity: LOW HIGH
Speed: SLOW FAST
Reusability: NO YES
Interactivity: LOW HIGH
Editability: LOW HIGHXPortability: LOW HIGHX
![Page 49: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/49.jpg)
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
IA Summit – Vancouver 2006
Visual Basic• http://msdn.microsoft.com/vbasic/downloads/
X
XX
X
Fidelity: LOW HIGH
Speed: SLOW FAST
Reusability: NO YES
Interactivity: LOW HIGH
Editability: LOW HIGHXPortability: LOW HIGHX
![Page 50: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/50.jpg)
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
IA Summit – Vancouver 2006
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
Interactivity: LOW HIGH
Editability: LOW HIGHXPortability: LOW HIGHX
![Page 51: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/51.jpg)
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
IA Summit – Vancouver 2006
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
?????
![Page 52: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/52.jpg)
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
IA Summit – Vancouver 2006
Our Approach
• Interactive Wireframes– Hybrid approach
• Using Axure
![Page 53: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/53.jpg)
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
IA Summit – Vancouver 2006
![Page 54: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/54.jpg)
Copyright 2006 KnowledgeStorm, Inc. All rights reserved.
IA Summit – Vancouver 2006
Copies are available at www.lauriegray.com
![Page 55: IA Summit 2006 Wireframes: A comparison of purposes, process, and products Wireframes: A comparison of purposes, process, and products Anders Ramsay,](https://reader035.fdocuments.us/reader035/viewer/2022062801/56649e845503460f94b86180/html5/thumbnails/55.jpg)
IA Summit 2006 Wireframes: A comparison of purposes, process, and products
The Discussion