Wireframes and Interaction Design Documents

Peter Conradie | Joel Laumans | Hans Kemp | Rolf den Otter | Rest of the IAD Team
that is NOT a wireframe What the &%$! is an IDD? Wireframes and Interaction Design Documents

part 1 Wireframes and Interaction Design Documents

wireframes? Wireframes and Interaction Design Documents

Wireframes and Interaction Design Documents These are NOT good wireframes

Not everyone knows exactly what they are doing Wireframes and Interaction Design Documents

wireframes?
Illustration of the content
Hierarchy
Relationships
Displaying of content
How it is presented
The functionality
Interaction with content
Wireframes and Interaction Design Documents
Do not represent the aesthetics
Do not contain graphic elements
Do not convey the brand

types of wireframes
Sketches
Quick, experimental
Good for feedback
Content only (lo fi)
Block diagrams
Good for flows
High fidelity wireframes
Detailed wireframes
Comments / Annotations
Describe content & behavior
Describe function (for dev)
Understood without explanation

DESIGN TIMELINE Wireframes and Interaction Design Documents

Experience at CMD
Wireframes and Interaction Design Documents “ Real world” you you you friend (maybe) you not you not you you not you not you

goals of wireframes
Communicate solutions for design problems
Communicate fundamental design choices
Get everyone on the same page

goals of wireframes
Different wireframes for different goals: Flows, user testing, content overview, etc
Stick to the goal in mind!

basic requirements
Title + Description
Page number
Diagram of content
Comments annotations
Wireframes and Interaction Design Documents Adobe.com Homepage – Not logged in P02

part 2 Wireframes and Interaction Design Documents

Interaction design documents Wireframes and Interaction Design Documents Interaction Design Documents

what are they? Wireframes and Interaction Design Documents A document containing a collection of high fidelity wireframes describing the content , behavior , and interaction / scenarios of an interface.

Cover page
Table of Contents
Descriptions
Wireframes
Component / Elements
ingredients Wireframes and Interaction Design Documents Cover page Table of Contents Descriptions & Scenarios Adobe.com Homepage – Not logged in P02

components / elements? Wireframes and Interaction Design Documents

Describe functionality by
illustrating scenarios/flows
‘ wireflows’ Wireframes and Interaction Design Documents

Lorem ipsum dolor sit atem…
Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
http://www.google.com
http://www.google.com http://www.google.com http://www.google.com
use realistic text, don’t: Wireframes and Interaction Design Documents

Forget color!
( Unless of course it is essential to the user experience)
Try and keep to the basics - ‘boxes and arrows’
No rounded corners, drop shadows, images, etc
forget visual design Wireframes and Interaction Design Documents focus on how the interface works!

Points and vectors may be misleading when translating to pixels, don’t make texts too long!
scale / proportion Wireframes and Interaction Design Documents

“ re-usable solution to a commonly occurring problem”
http://developer.yahoo.com/ypatterns/
http://www.welie.com/
don’t reinvent the wheel Wireframes and Interaction Design Documents

They are specific
More usable and easier to understand
It will save you time!
Design Patterns (cont) Wireframes and Interaction Design Documents

ajax, javascript, flash, etc
sometimes hard to illustrate in wireframes
rich internet applications (RIA) Wireframes and Interaction Design Documents ? Adobe.com Homepage – Not logged in P02

Frame-by-frame
Lo-fi Animations
Wireframes with keyframes
dynamics in static wireframes Wireframes and Interaction Design Documents

Wireframes and Interaction Design Documents Frame-by-frame

Wireframes and Interaction Design Documents Lo-fi animation http://developer.yahoo.com/ypatterns/pattern.php?pattern=carousel

Wireframes and Interaction Design Documents Wireframes with keyframes

Clear enough to develop from
Serve as a blueprint for final product
Get everyone on same page (designer, developer, project leader, etc)
‘ 3 keys to success’ Wireframes and Interaction Design Documents

Visio
OmniGraffle
InDesign
Illustrator
Fireworks
Powerpoint
Software comparison:
http://www.uxmatters.com/MT/archives/000161.php
what software? Wireframes and Interaction Design Documents

Cross-platform (Windows & OS X)
Templates, elements, components library
Pagination & master pages
Good for diagrams & text
Vectors
Print & Screen
indesign Wireframes and Interaction Design Documents

resources (online)
http://userpathways.com/2008/06/26/the-what-when-and-why-of-wireframes/
http://www.strangesystems.net/archives/2005/03/using_wireframe.php#2
http://developer.yahoo.com/ypatterns/
http://www.slideshare.net/hanskemp/iad2-q3-hoorcollege2-446318/
http://www.time-tripper.com/uipatterns/Introduction
http://project.cmd.hro.nl/cmi/hci/toolkit/

resources (offline)
Designing for Interaction – Dan Saffer
Chapter 5
Communicating Design – Dan Brown
Chapter 10

Assignment (groups of 3-4 people)
Pick a webpage which contains several RIA elements.
As a group, quickly analyze the interactive elements on the webpage. (Design patterns?)
Make a hi-fi wireframe of the RIA elements using any of the methods (key-by-key, low-fi animation, or wireframe keyframes)
Total time: 1h 15min
Drag & drop collapse Navigation tabs

http://patrickcolli.wordpress.com	651
http://vakgroep.cmd.hro.nl	152
http://katychuang.tumblr.com	125
http://www.slideshare.net	101
http://ramirezdaniel11.blogspot.com	99
http://docent.cmd.hro.nl	64
http://shaydu.wordpress.com	50
url_unknown	35
http://paper.li	31
http://www.macromedios.net	21
http://mysites.mbs.edu	18
http://storify.com	17
http://www.vakgroep.cmd.hro.nl	5
http://www.uxabilidad.com	4
http://us-w1.rockmelt.com	3
https://twitter.com	3
http://stud.cmd.hro.nl	2
http://doc.futurevox.com	2
http://twitter.com	2
http://www.uxgeek.co	1
http://a0.twimg.com	1
http://student.cmd.hro.nl	1
http://safe.tumblr.com	1
http://safe.txmblr.com	1
https://blackboard.madisoncollege.edu	1
http://www.health.medicbd.com	1

Wireframes and Interaction Design Documents

by piksels

Accessibility

Categories

Upload Details

Usage Rights

26 Embeds 1,392

Statistics