9/11/2023

1 Design & Implementation of Human-Computer Interfaces

NPTEL-MOOCS
Dr Samit Bhattacharya
Computer Science and Engineering
IIT Guwahati
2 L14 – Prototyping
Dr Samit Bhattacharya
Computer Science and Engineering
IIT Guwahati
3 Recap
• Earlier we learned requirement gathering through CI and design with guidelines
• This lecture we shall learn prototyping techniques
• First let us recall SDLC for UCD

6 Prototyping for Feedback

• The guidelines offer merely a starting point - once we have those, we can go for a
design
7 Prototyping for Feedback
• However, to know if the design is going to work in practice, we need not fully
implement the idea first
8 Prototyping for Feedback
• Instead, we go for a prototype, a lightweight implementation in a sense, to test our
idea
9 Prototyping for Feedback
• In UCD, prototypes play very important role
• Built typically at a very early stage of the development life cycle
10 Prototyping for Feedback
• Once its purpose is served, a prototype can be discarded
11 Prototyping for Feedback
• In the best case, the prototype can be incrementally refined (and tested) as we
make progress in the development till the end, at which point it becomes the fully-
implemented product in itself
12 Prototype Categories
• Horizontal - the entire interface is depicted at the surface level without any
functionality
• Interaction is not prototyped
• No real work can be done
• Suitable to discuss, brain-storm or elicit feedback on the interface look and feel,
primarily 1
 • In the best case, the prototype can be incrementally refined (and tested) as we
make progress in the development till the end, at which point it becomes the fully- 9/11/2023
implemented product in itself
12 Prototype Categories
• Horizontal - the entire interface is depicted at the surface level without any
functionality
• Interaction is not prototyped
• No real work can be done
• Suitable to discuss, brain-storm or elicit feedback on the interface look and feel,
primarily
13 Prototype Categories
• Vertical - designed to represent interaction
• Few selected features implemented in-depth, starting from the first screen to the
screen after the last action is performed
• Suitable for analysis of interactions and features

14 How to Create Prototypes

• Low fidelity
• No technological intervention - made with paper, cardboards, woods and so on
• A popular example are the paper mock-ups for interface look, feel and even
functionality
• Quick and cheap to make and modify
• Good for horizontal prototypes and used to brain-storm on alternative designs and
get user response on the idea
15 Low Fidelity Prototype: Interface Sketches
• Interface sketches offer another low-fidelity prototypes
• Drawings depicting major components of an interface
• Provide way to envision appearance of the interface

16 Low Fidelity Prototype: Interface Sketches

Example - consider a shop that sells various consumer items (clothes, bags and so
on). They want an interactive system to generate bills based on the selection by a
customer. The customer selection is “scanned” and identified by the system and a bill
is generated. A sketch for the proposed interface design is shown along with one
possible final design.

17 Low Fidelity Prototype: Interface Sketches

18 Low Fidelity Prototype: Interface Sketches
19 Low Fidelity Prototype: Interface Sketches
• Sketches in itself are not sufficient to prototype interaction
• From the previous sketch, it is not possible to know the sequence of actions and
the corresponding changes on the interface to execute a task (a “stroller
purchase” in this case)
20 Low Fidelity Prototype: Interface Sketches
• Therefore, sketches essentially represent horizontal prototypes
21 Low Fidelity Prototype: Interface Sketches
• What we need is not a single sketch, but a series of sketches, often called
“storyboarding” to represent interaction
22 Low Fidelity Prototype: Storyboarding
23 Low Fidelity Prototype: Storyboarding
2
 purchase” in this case)
9/11/2023
20 Low Fidelity Prototype: Interface Sketches
• Therefore, sketches essentially represent horizontal prototypes
21 Low Fidelity Prototype: Interface Sketches
• What we need is not a single sketch, but a series of sketches, often called
“storyboarding” to represent interaction
22 Low Fidelity Prototype: Storyboarding
23 Low Fidelity Prototype: Storyboarding
24 Low Fidelity Prototype: Storyboarding
25 Low Fidelity Prototype: Storyboarding
26 Low Fidelity Prototype: Storyboarding
27 How to Create Prototypes
• Medium-fidelity - when we use computer to create simple (low fidelity) prototypes
• If the computer is used to create static sketches only, it still remains horizontal
prototype since no real functionality is there
28 How to Create Prototypes
• Medium-fidelity prototypes may include videos as well
29 How to Create Prototypes
• Ex - we can have an animation video (created with Adobe Flash tool, for example) to
prototype the food selection app of the previous slide
• In the video, simple controls can be provided to simulate the interaction
30 Medium-Fidelity Prototyping
• In fact, the interaction can also be simulated with as simple a tool as a Microsoft
PowerPoinTTM slideshow
• The key frames can be converted to slides
• With simple controls (e.g., timers or key press), slide transition takes place
depicting the interaction
• In that way, the storyboard can be converted to a vertical prototype
31 How to Create Prototypes
• Hi-Fidelity Prototypes – prototypes created with computer programs (e.g., actual
software development)
• More sophisticated and requires much more effort (including expertise in
programming) than the other two categories
32 How to Create Prototypes
• There are many interface builders, “toolkits” and “wizards” to ease the programming
efforts
33 How to Create Prototypes
• Popular examples include the Tcl/Tk toolkit, Visual Basic programming language,
JAVA Swing library and so on

34 How to Create Prototypes

• The toolkits and libraries provide support for “widgets” (GUI elements) - a
programmer can directly use those (rather than creating on his/her own) and build
GUIs

35 How to Create Prototypes

• The interaction is implemented through programming
36 How to Create Prototypes 3
34 How to Create Prototypes 9/11/2023
• The toolkits and libraries provide support for “widgets” (GUI elements) - a
programmer can directly use those (rather than creating on his/her own) and build
GUIs

35 How to Create Prototypes

• The interaction is implemented through programming
36 How to Create Prototypes
• Hi-fidelity prototypes are mainly used to create vertical prototypes
37 How to Create Prototypes
• “Wizard of Oz” approach - an interesting prototyping technique
38 How to Create Prototypes
• In this technique, a human subject believes to interact with an autonomous
computer
• In reality, however, the computer is operated by an “unseen” human being (the
“Wizard”)
• The term originated in the early 1980s, although the concept was there beforehand
39 How to Create Prototypes
• Example - the “listening typewriter” experiment conducted by the IBM in 1984
• IBM was trying to develop a speech recognition system
• They wanted to test the acceptability of the idea, requiring a working system
• Problem - nobody had the speech recognizer and the company did not want to
spend money and effort before testing the acceptability
40 How to Create Prototypes
• So, they decided to go for a “Wizard of Oz” experiment
41 Wizard of Oz Experiment
42 How to Use Prototypes
• It can be “thrown away,” i.e., discarded after use (Cardboard mock-ups and paper
sketches suitable for such treatments, since these are low-cost)
• We should be able to create such prototypes rapidly (otherwise, it becomes too
expensive to discard a prototype made over a period of time with considerable
man-hour spent)
43 How to Use Prototypes
• In the “incremental” approach, the system is designed into units (modules)
• Each unit is separately prototyped and tested
• Afterwards, it is integrated into the system
44 How to Use Prototypes
• The other approach is “evolutionary” – the whole system is prototyped and tested
• Based on the testing, the prototype is altered
• Eventually, it becomes the final product
45 Note
• We discussed few of the SDLC stages (requirement gathering, design with
guidelines, prototyping)
46

47 Note
• Other important stage is early evaluation – we shall discuss next
48
4
45 Note 9/11/2023
• We discussed few of the SDLC stages (requirement gathering, design with
guidelines, prototyping)
46

47 Note
• Other important stage is early evaluation – we shall discuss next
48

49 Book
• Bhattacharya, S. (2019). Human-Computer Interaction: User-Centric Computing for
Design, McGraw-Hill India
• Print Edition: ISBN-13: 978-93-5316-804-9; ISBN-10: 93-5316-804-X
• E-book Edition: ISBN-13: 978-93-5316-805-6; ISBN-10: 93-5316-805-8

Chapter 2, Sec 2.4.5