Scribd
Upload
96 views18 pages

Human Computer Interaction (HCI)

This document discusses different types of prototypes used in human-computer interaction design, including paper prototypes, interactive sketches, and working prototypes. Paper prototypes can be either low-fidelity hand-drawn sketches or high-fidelity elaborate printouts, and are useful for getting early feedback before implementing designs. Interactive sketches involve scanning hand-drawn interfaces and linking them digitally. Working prototypes implement some functionality but may focus on specific features or scenarios. The document provides examples and discusses when different prototyping methods are most appropriate during the design process.

Uploaded by

Haris Akhtar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
96 views18 pages

Human Computer Interaction (HCI)

This document discusses different types of prototypes used in human-computer interaction design, including paper prototypes, interactive sketches, and working prototypes. Paper prototypes can be either low-fidelity hand-drawn sketches or high-fidelity elaborate printouts, and are useful for getting early feedback before implementing designs. Interactive sketches involve scanning hand-drawn interfaces and linking them digitally. Working prototypes implement some functionality but may focus on specific features or scenarios. The document provides examples and discusses when different prototyping methods are most appropriate during the design process.

Uploaded by

Haris Akhtar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Human Computer Interaction

(HCI)
Prototyping [1]
• Perform usability evaluation and obtain
feedback as early as possible in the design
cycle by building and evaluating prototypes.
Finally, throw prototypes away and implement
final design.
Prototyping Types [1]
• Types of prototyping in increasing order of complexity
1. Paper Prototypes
– Low-Fidelity: hand-drawn sketches.
– High-Fidelity: more elaborate printouts.
2. Interactive Sketches: interactive composition of hand-
drawn sketches.
3. Working Prototypes: interactive, skeleton
implementation.
• Then, throw prototypes away and implement final
design.
Low-Fidelity Paper Prototypes [1]
• Paper prototypes simulate screen and dialogue
elements on paper.
• First hand-drawn sketches (lo-fi), later perhaps
more elaborate printouts (hi-fi).
• Early usability feedback with throwaway designs:
maximum feedback for minimum effort!
• Greeking (drawing squiggly lines) is used to
represent text which would otherwise be a
distraction.
Low-Fidelity Paper Prototypes Example
[1]
Working Prototype of previous
Example [1]
Low-Fidelity Paper Prototypes [1]
Low-Fidelity Paper Prototypes [1]
Low-Fidelity Paper Prototypes [1]
High-Fidelity Paper Prototypes [1]
• Elaborate screen designs created with drawing
editors such as Adobe Illustrator or Corel
Draw.
• Printed out in colour.
• The often look too much like a finished design,
and not enough like a prototype.
• Users tend to comment on the choice of fonts
and colours, rather than the flow through the
application.
Interactive Sketches [1]
• Scan in hand-drawn interface sketches.
• Assemble interactive prototype with clickable
elements (say with Macromedia Director).
• Casual look to encourage criticism and
discussion
Interactive Sketches Example [1]
• An interactive sketch made in Shockwave. Screen
designs sketches are scanned and assembled into an
interactive prototype with Macromedia Director
Working Prototypes [1]
• Simple algorithms: ignore special cases
• Fake data: similar data, images instead of
video, etc.
Prototyping Tools
• DENIM; http://dub.washington.edu/denim/
• Axure; http://www.axure.com/
• Balsamiq Mockups; http://balsamiq.com/
• Microsoft Expression SketchFlow;
http://www.microsoft.com/expression/products/Sk
etchflow_Overview.aspx
• HotGloo http://www.hotgloo.com/
• http://moqups.com
• marvelapp.com (mobile applications)
• invisionapp.com (mobile applications)
Dimensions of Working Prototypes [1]
• Working prototypes cut down on either the
number of features, or the depth of functionality
of features
• Vertical Prototype: in-depth functionality for a
few selected features.
• Horizontal Prototype: full interface features, but
no underlying functionality.
• Scenario Prototype: only features and
functionality along the specific scenarios or paths
through the interface which are to be evaluated.
Dimensions of Working Prototypes In a
Diagram [1]
Implementation [1]
• Implement final design.
• Competitive analysis of software components:
- Use existing interface framework as far as
possible (Motif, MS-Windows, Java Swing) –
saves a lot of work.
- Use existing components and applications
rather than re-inventing the wheel.
References
[1] Lecture Notes of Prof. Keith Andrews,
Available at: www.iicm.tugraz.at/hci

You might also like