Activity Courses Projects

Human Computer Interaction 2011

Deliverables 

“The design process begins with research; it continues with generating, refining and evaluating different ideas; and ends with prototyping, visual design and, finally, implementation ” — Janko Jovanovic

Choose deliverables that fit the requirements and that are consistent with the project's objectives. The most effective deliverables are the ones that allow you to communicate the ideas properly.

Deliverable (n.) — a document created during the course of a design project to facilitate communications, capture decisions, and stimulate innovation

Deliverables Types:

Sketches  – idea experimentation

Sketch is a rapidly executed freehand drawing that is not intended as a finished work.

Wireframes  – structure, organization, navigation

Wireframe is a basic visual guide used in interface design to suggest the structure of a product and relationships between its components. Typically, wireframes are completed before any artwork is developed.

“ It's simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work.” — usability.gov

Wireframes Types:

  • Low-Fidelity Wireframes
  • High-Fidelity Wireframes

Wireframe for Mozilla Firefox 4.0

Mockups  – form, design, visual

A mockup is a scale or full-size model of a design or device, used for teaching, demonstration, evaluating a design, etc.

Mockup for Mozilla Firefox 4.0

Prototypes  – scenarios, interaction, behavior simulation

A deliverable is called a prototype if it provides at least part of the functionality of a system and enables testing of a design. A prototype simulates a real product and lets users experience how it will actually work.

Paper-based prototype for Daum

Prototypes Types:

  • Paper Prototypes
  • Digital Prototypes

“How to Prototype and Influence People” by Aza Raskin

Tools & Resources  

Tools

The most used programs for wireframing are Visio, Balsamiq, InDesign, Illustrator, Photoshop, and OmniGraffle.

Pencil Project is an Open Source Firefox Addon tool for making diagrams and GUI prototyping.

Inkscape is an vector graphics editor application, distributed under a free software license.

Examples 

Annotations Alternative Mockups provided by Thibaut Deveraux

For other examples of mockups and partial prototypes see XWiki's Incubator.

evalica 2011