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

Peter Conradie | Joel Laumans | Hans Kemp | Rolf den Otter | Rest of the IAD Team

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

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 Wireframes and Interaction Design Documents

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 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 Wireframes and Interaction Design Documents

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 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 Wireframes and Interaction Design Documents

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

Wireframes and Interaction Design Documents

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

Experience at CMD

goals of wireframes Communicate solutions for design problems Communicate fundamental design choices Get everyone on the same page Wireframes and Interaction Design Documents

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! Wireframes and Interaction Design Documents

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

Title + Description

Page number

Diagram of content

Comments annotations

Wireframes and Interaction Design Documents

Wireframes and Interaction Design Documents

Wireframes and Interaction Design Documents

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

Cover page

Table of Contents

Descriptions

Wireframes

Component / Elements

components / elements? Wireframes and Interaction Design Documents

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

Describe functionality by

illustrating scenarios/flows

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

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

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!

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

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

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

“ 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

“ re-usable solution to a commonly occurring problem”

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) Wireframes and Interaction Design Documents

They are specific

More usable and easier to understand

It will save you time!

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

ajax, javascript, flash, etc

sometimes hard to illustrate in wireframes

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

Frame-by-frame

Lo-fi Animations

Wireframes with keyframes

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

Clear enough to develop from

Serve as a blueprint for final product

Get everyone on same page (designer, developer, project leader, etc)

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

Visio

OmniGraffle

InDesign

Illustrator

Fireworks

Powerpoint

Software comparison:

http://www.uxmatters.com/MT/archives/000161.php

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

Cross-platform (Windows & OS X)

Templates, elements, components library

Pagination & master pages

Good for diagrams & text

Vectors

Print & Screen

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/ Wireframes and Interaction Design Documents

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 Wireframes and Interaction Design Documents

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

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