Scribd
Upload
145 views14 pages

Human-Computer Interaction: Ali Harris (Fall 2020)

The document discusses different types and levels of prototyping used in human-computer interaction design. It describes prototyping as a process of building an initial version of a design to test it and identify needed changes before completing the final product. Low-fidelity prototyping uses inexpensive materials like paper to explore early design ideas through wireframes and storyboards. High-fidelity prototyping employs tools and media more similar to the final product to evaluate look and feel. The document outlines approaches like throwaway, incremental, and evolutionary prototyping and emphasizes testing prototypes to improve usability.

Uploaded by

Anan Tariq
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
145 views14 pages

Human-Computer Interaction: Ali Harris (Fall 2020)

The document discusses different types and levels of prototyping used in human-computer interaction design. It describes prototyping as a process of building an initial version of a design to test it and identify needed changes before completing the final product. Low-fidelity prototyping uses inexpensive materials like paper to explore early design ideas through wireframes and storyboards. High-fidelity prototyping employs tools and media more similar to the final product to evaluate look and feel. The document outlines approaches like throwaway, incremental, and evolutionary prototyping and emphasizes testing prototypes to improve usability.

Uploaded by

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

Human-Computer

Interaction
Ali Harris (Fall 2020)
Lecture # 26: Prototyping

1
What will be covered today…

 Prototyping
 Fidelity
 Techniques of Prototyping

2
Prototyping

 You never get it right first time


 if at first you don’t succeed …

OK?
design prototype evaluate done!

re-design

3
How to Prototype?

 Build a prototype of the basic functionality, especially the


interface
 Test the prototype, which will uncover design errors
 Correct the errors
 Repeat until you have a clean design
 Prototyping is…
 a major tool for improving usability
 heavily used in industry

4
Prototyping Approaches

The three major kinds of prototyping are:


 “Throw away” prototyping ( “rapid prototyping”)
 used exclusively in requirements gathering
 Incremental prototyping
 not actually prototyping at all, but the delivery of prioritized
functions incrementally to a single, overall design
 Evolutionary prototyping (“Rapid Application
Development, RAD)
 as for incremental prototyping but with evolving design
5
Fidelity

 Degree to which prototype accurately represents


the appearance and interaction of the product.
 Judged by how it appears to the person viewing
it.
 Not similarity to actual application.
 Not the degree to which the code and other
attributes invisible to the user are accurate.

6
Fidelity Spectrum

Low Fidelity
 Basis for final product
 Proof of concept
 Use of low cost, non-electronic media

High Fidelity
 Close to final product
 Electronically faithful
 Uses similar media 7
Low-fidelity Prototype

 Does not look very much like the final product


 Uses materials that are very different from the intended final version,
such as paper and cardboard rather than electronic screens and
metal.
 Used during early stages of development
 Cheap and easy to modify so they support the exploration of
alternative designs and ideas
 It is never intended to be integrated into the final system. They are
for exploration only
 Examples of low-fidelity prototyping:
 Wireframes 8

 Storyboards
Wireframes

 Drawing of the outward appearance of the intended system


 Crudity means people concentrate on high level concepts
 But hard to envision a dialog’s progression

9
Wireframes – Example

10
Storyboard

 A series of key frames as sketches


 Originally from film; used to get the idea of a scene
 Snapshots of the interface at particular points in the interaction
 Evaluating customer or user impressions of the storyboards can determine
relatively quickly if the design is heading in the right direction.

11
12
High-fidelity Prototyping

 Choice of materials and methods


 Similar or identical to the ones in the final product
 Looks more like the final system
 Appearance, not functionality
 Common development environments
 Macromedia Director, PowerPoint, Basic Web development tools
 Misled user expectations
 Users may think they have a full system

13
The End!

14

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy