Notes 5
1
Text Books
(1) Interaction Design: Beyond Human Computer Interaction,
Rogers, Sharp and Preece, Third Edition,
Wiley, ISBN: ISBN-10: 8126544910, Year: 2013
(2) Designing the User Interface: Strategies for Effective Human-
Computer Interaction,
Shneiderman, Cohen, Plaisant, and Jacobs, Fifth Edition,
Pearson Education India, ISBN: ISBN-10: 9332518734, Year: 2014
2
Design
Process and
Principles and Prototyping
Evaluating
Guidelines of
Interface
Interface
Design
Design
Cognitive,
Interaction
Design &
Usability
HCI Social &
Emotional
Aspects
3
Balancing Function and Fashion
(Text Book No. 2, Chapter 11)
4
Six design matters with “Function” AND
with room for varying style (Fashion)
Error Messages
Non-anthropomorphic Design
Display Design
Web Page Design
Window Design
Color
5
Error Messages (11.2)
• Key role in user interaction
6
Four good qualities of Error Messages
Constructive
User Appropriate
Guidance
Specificity Centered Physical
and Positive
Phrasing Format
Tone
7
Error Message Quality 1:
Specificity
8
Poor: Syntax Error
Better: Unmatched Left Parenthesis
Poor: Illegal Entry
Better: Type First Letter : Send, Read or Drop
9
Poor: Invalid Data
Better: Data Range from 1 to 31
Poor: Bad File name
Better: The file c:\demo\[Link] was not found
10
Error Message Quality 2:
Constructive Guidance and Positive Tone
11
Poor: Run-Time Error : “-214(804) : Method: ‘Private
Profile string’ of object ‘system’ failed
Better: Virtual Memory space consumed. Close some
programs and retry.
Poor: Resource Conflict Bus: 00 Device: 03 Function : 01
Better: Remove your compact flash card and restart
12
Poor: Network Connection Refused
Better: Your Password was not recognized. Please
retry.
Poor: Invalid date:
Better: Drop-off date must come after pick-up
date.
13
Error Message Quality 3:
User Centered Phrasing
14
User Centred Phrasing
• A graphical UI can provide a progression of
ScreenTips
• A special “Help” Button to provide context-
sensitive explanation.
• Use of “Hyperlinked” online user
documentation
15
Error Message Quality 4:
Appropriate Physical Format
16
Four views:
(1) Place error message close to the place where
error has occurred.
(2) Place at the bottom of display
(3) Place dialog box near the error, without
obscuring the relevant problem.
(4) Some applications ring a bell (audio feedback)
when error occurs.
Which approach will you take? Why?
17
Learning 31
18
Prototyping and Construction
• Text Book 1
– Chapter 11: Design, Prototyping and Construction
• Text Book 2
– Chapter 11: Balancing Function and Fashion
19
What is a Prototype ?
Why Prototype ?
20
What is a “Prototype” ?
• Check dictionary meaning of this word.
21
What is a Prototype?
• Early representation of final product.
• Examples:
– Paper based outline of the screen or set of screens
– Electronic picture
– Video simulation of a task
– 3D model
– Piece of s/w
– Etc…
22
Why Prototype?
• Helps visualize the product at early stage
• Communication devices among team members.
• Helps to choose between alternatives
• Helps visualize how users will interact
• Helps provide feedback from all stack holders
23
Low Fidelity Prototyping
• Does not look very much like final product
– Can use material very different from planned final
version, such as paper and cardboard etc.
– Eg. Lump of wood used to prototype PalmPilot
24
Low Fidelity Prototyping
*Proof of concept * Limited error checking
* Low development Cost * Less detailed specifications
* Can evaluate multiple to code to
designs * Limited utility after
* Useful in identifying market requirements are established
requirements * Navigational and flow
* Useful communication device Limitations
* Addresses screen layout * Limited usefulness of
issues etc usability tests
25
Learning 32
26
High Fidelity Prototyping
• Uses materials that is planned for the product
• Looks much like final product
• May involve programming for Computer based
products.
27
High Fidelity Prototyping
*Complete Functionality * More expensive to develop
* Fully interactive * Time consuming to create
* User driven * Inefficient for proof of
* Clear navigation scheme concept design
* Look and feel like final * Not efficient for
product requirement gathering
* Serves as a living
specification
28
• Reference: “Anatomy of Prototyping”
Uploaded in “Lecture Notes” Folder
29
Prototyping : Key Aspects
With reference to Lim et al, 2008.
(1) Fundamental Prototyping Principle:
It is an activity with purpose of creating a
manifestation that, in its simplest form, filters
that qualities in which the designers are
interested, without distorting the understanding
of the whole.
30
Prototyping : Key Aspects
With reference to Lim et al, 2008.
(2) Economic Principle of Prototyping:
The best prototype is one that, in the simplest
and the most efficient way, makes the
possibilities and limitations of a design idea
visible and measurable.
31
Prototyping : Key Aspects
With reference to Lim et al, 2008.
(3) Anatomy of Prototypes:
Prototypes are the filters that traverse a design
space and are manifestations of design idea that
concretize and externalize conceptual ideas.
32
33
Learning 33
34
The common compromises of Prototyping :
Breadth of functionality vs depth.
• Horizontal Prototyping : provide wide range of
functions, but with little details.
• Vertical Prototyping : Provide a lot of details
for only a few functions.
35
Construction :
From Design to Implementation.
• Evolutionary Prototyping: A prototype evolves
into final product.
• Throwaway Prototyping: Uses prototypes as
stepping stones towards final design.
36
• After Prototyping, the rigorous quality testing
for robustness and error-free operations
should be performed.
37
Conceptual Design : From Requirement to First Design
(Text 1, Ch. 11. 3)
38
Conceptual Design
Transforming requirements to conceptual model.
39
General Types
of Design
Conceptual Physical
Design Design
40
Conceptual Design
• Concerned with developing a conceptual
model that captures what the product will do
and how it will behave.
• Conceptual Model: It is a high-level
description of how a system is organized and
operates.
41
Physical Design
• Concerned with the details of the design such
as screen and menu structure, icons and
graphics.
42
Contextual Design:
Holding review meetings within the team to get
different persons’ perspectives on the data and
what they observed.
43
Guiding Principles of Conceptual Design
• Keep an open mind but never forget the users
and their contexts.
• Discuss ideas with other stakeholders as much as
possible
• Use low fidelity prototype to get fast feedback
• Iterate, iterate, and iterate..
44
Interface Metaphor
• Metaphor combines familiar knowledge with
new knowledge that helps user understand
the product.
45
• In user interface design,
an interface metaphor is a set of user
interface visuals, actions and procedures that
exploit specific knowledge that users already
have of other domains.
• The purpose of the interface metaphor is to
give the user instantaneous knowledge about
how to interact with the user interface.
46
Developing Initial Conceptual Model
Three things to consider:
(1) Which interface metaphor will be suitable ?
(2) Which interaction type(s) to use?
(3) Do different interface types suggest alternative
design insights or options ?
47
3 steps to good metaphor
(1) Understand what product will do.
(2) Which tasks/subtasks are complicated and
can create problem for user.
(3) Generate metaphor.
48
Learning 34
49
Designing initial conceptual model
Five questions to ask after suitable metaphor is
generated.
Example: For the shared travel organizer, printed
travel brochure (or electronic brochure) can be a
metaphor.
50
(1) How much structure does the metaphor
provide?
(2) How much of the metaphor is relevant to the
problem ?
(3) Is the interface metaphor easy to represent ?
(4) Will your audience understand the metaphor?
(5) How extendable is the metaphor?
51
Physical Design : Getting Concrete.
(Text 1, Ch. 11.4)
52
• There is no rigid border between conceptual
design and physical design.
• Designer makes choices and decisions .
• Designer must strive to balance
environmental, user, data and utility along
with user experience + Functional
requirements
53
Hofstede’s Dimensions in Interaction Design.
• Dimensions characterizing culture difference:
(1) Power Distance
(2) Individualism
(3) Masculinity-Femininity
(4) Uncertainty Avoidance
(5) Time Orientation
(6) Indulgence vs Restraint
Note: Recent developments have challenged many of
his findings.
54
Learning 35
55