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?

1Wireframes and Interaction Design Documents

part 1

Wireframes and Interaction Design Documents 2

wireframes?



These are NOT good wireframes


Not everyone knows exactly what they are doing

wireframes?


• Illustration of the content– Hierarchy– Relationships

• Displaying of content– How it is presented– The functionality

• Interaction with content

• 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


types of wireframes





types of wireframes






DESIGN TIMELINE


Experience at CMD


“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


Adobe.com Homepage – Not logged in P02




part 2



Interaction design documentsInteraction Design Documents

what are they?


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


Cover pageCover page

Table of ContentsTable of Contents

Descriptions & ScenariosDescriptions & ScenariosAdobe.com Homepage – Not logged in P02


components / elements?

• Describe functionality byillustrating scenarios/flows

‘wireflows’


• Lorem ipsum dolor sit atem…

• Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.

• http://www.google.comhttp://www.google.com http://www.google.com http://www.google.com

use realistic text, don’t:


http://www.google.com/




• 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


focus on how the

interface works!focus on how the

interface works!

• Points and vectors may be misleading when translating to pixels, don’t make texts too long!

scale / proportion


• “re-usable solution to a commonly occurring problem”

• http://developer.yahoo.com/ypatterns/• http://www.welie.com/

don’t reinvent the wheel


http://developer.yahoo.com/ypatterns/

http://www.welie.com/

• They are specific

• More usable and easier to understand

• It will save you time!

Design Patterns (cont)


• ajax, javascript, flash, etc

• sometimes hard to illustrate in wireframes

rich internet applications (RIA)


Adobe.com Homepage – Not logged in

P02

?

• Frame-by-frame• Lo-fi Animations• Wireframes with keyframes

dynamics in static wireframes



Frame-by-frame


Lo-fi animation

http://developer.yahoo.com/ypatterns/pattern.php?pattern=carousel


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’


• Visio• OmniGraffle• InDesign• Illustrator• Fireworks• Powerpoint

• Software comparison:• http://www.uxmatters.com/MT/archives/

000161.php

what software?


• Cross-platform (Windows & OS X)• Templates, elements, components library• Pagination & master pages• Good for diagrams & text• Vectors• Print & Screen

indesign


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)

1. Pick a webpage which contains several RIA elements.

1. As a group, quickly analyze the interactive elements on the webpage. (Design patterns?)

1. 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

Technology

Wireframes and Interaction Design Documents