Interaction

Design
HCI course
Hurriyatul Fitriyah
overview
Interaction design is about creating intervention in
complex situation using technology of many
components; including PC software, the web and
physical devices
Interaction VS Product
It is not about the product/ artifact, but about
understanding and choosing how it is going to affect
the way people do/ work
1. The design
What is Design?
Asimple definition is:
achieving GOALS within CONSTRAINTS

o Goals: what is the purpose of the design we

are intending to produce? Who is it for?
o Constraints: what materials must we use?
What standard must we adopt? How mch
can it cost? How much time do we have to
develop it? Are there health and safety
issue?
Design is a trade-off
 Choosing which goals or constraints can
be downgraded so that others can be
met
 Accepting limitation of human and of
design
 The best design are where the designer
understand the trade-off and the factors
affecting them
Golden rule of design
 Understand your materials

 In HCI, the materials is obviously

1. The human
(psycological, social, human error)
2. The computer
(Limitations, capacity, tools, platforms)
To err is human
 People make mistake, slips, error,
omissions
 But people are remarkably adaptable
 As a designer you can give better training
and documentation, but the product and
its interaction design you created is the
most important
2. The Process of Design
A never ending iterative
stages (never complete)
a. Interaction Starts with?
 Itstarts with getting to know the users and
their context (Requirement – what is
wanted):
 What is needed by users?
 Find out who they are? What they like?
b. Analysis
 The results of observation and interview
need to be ordered in some way to bring
out key issues and communicate with
later stages of design
 Including task analysis

c. Design
A step to transfer what you want into how
to do it
d. Iteration and prototyping
 Most of the time, we don’t get the design
right at the first time
 Comprise design evaluation

e. Implementation and
Deployment
 When the designer happy with their
product, then it is time to create it 
Your time is limited!
 You can’t trapped in design cycle for like
ever!!
 there is a trade-off between the length of
the design period and the quality of the
final design
 the real problem is not to find faults,
instead the issue is: which usability
problems is it worth fixing?
3. User focus
Know them!
How do you get to know them?
 Who are they?
 Young or old? Experienced or newbie? It’s harder to design
generic computer system
 Probably NOT like you!
 Obvious for you, but most of the time not for the user
 Talk to them!
 Ask them about what really happen and needed; using
structured interview, open-ended duscussion, or ask them to join
the design process
 Watch them!
 Sherlock Holmes’s Quote: “You see, but you do not observe!”
 Use you imagination!
 If I were my User, then?
4. Scenarios
Scenarios
 Rich story of information
 can be used and reused throughout
design
 Help us see what users will want to do
 Give us step-by-step walkthrough of users’
interaction; including what they see, do
and are thinking
 Example: if user do this then computer do
what? Then the user have to do what? etc
Scenarios also can be used to:
 Communicate with others (designer
colleagues, clients or even users)
 Validated againts other models
 Express dynamics
5. Navigation Design
HCI is a socio-technical intervention
Socio-technical intervention
 Computer-user interact at several levels:
1. Widgets (menus, buttons)
2. Screen or window (grouping of button)
3. Navigation within the application
4. Environment; connect with other device-
application
Start considering structure with:
 Who is going to use the application?
 How do they think
 What will they do with it
Thinking about structure
1. Local structure
 Looking from one screen or page out
 Goalk seeking behaviour
 The screen, web page or device displays
should make clear where you are in terms
of the interactionn
 Knowing where you are
 what you can do
 knowing where you are going or what will
happen
 where you have been or what you have
done
2. Global structure –
hierarcical organtization
 Structure of site, movement between screen
 The hierarcy links screen, pages, or states in logical grouping
 Example: a PC application on the web
3. Global structure – dialog
 In HCI, the word ‘dialog’ is used to refer to
flow of screen
 It give pattern of interaction
 A simple way is to use a network diagram
showing the principal states or screen linked
tigether with arrows; this can show:
 What leads to what
 Show what happens when
 Include branches and loops
 Be more task oriented that a hierarcy
 Network diagram ilustrating the main
screen for adding or deleting a user
5. Screen Design and
Layout
How we put the different element together in an
interactive application
Basic principle at Screen level
 Ask What is the user doing?
 Think What information is required? What
comparisons may the user need to make?
In what order are things likely to be
needed?
 Design Form follows function: let the
required interactions drive the layout
a. Tools for layout
 Grouping & structure: If things logically
belong together, then we should normally
physically group them together
 Order of group and items
 Decoration : decorative feature that helps
to distinct each group and item, e.g. Font
style, font type, color, line, boxes
Example:
control panel
 Alignment:

 White space:
b. User action and control
 Entering information: form-based
interface adn dialog boxes
 Passive and active element on screen
 Affordance: how user know where to
click? It’s about psychologic on the
elements’ shape, colour and other
atribute
c. Appropriate appearance
 Afford different presentation that allow
users to select totheir convenient
 Aesthetic and utility: Remember that a
pretty interface is not necessarily a good
interface, it just need to be well-designed

 Color and 3D interface: just don’t too

much

 Localization
vs internationalization: adjust
language, sign, symbol to segmented
user
 Users
need to find their way around a
system, this involves:
 Helping users know who they are, where
they have been, and what they can do
next
 Creating overall structures that are easy to
understand and fit the users’ needs
 Desinging comprehensible screen and
control panels
6. Iteration and
Prototyping
Complexity of Design
 Itmeans we don’t get it right the first time
 Theory and models can help give good
start points
 Formative evaluation
 Intended to improve the design
 Summative evaluation
 To verify whether the product is good
enough
 The result of evaluating the system will
usually be a list of faults or problems
 This is followed by redesign exercise
Role of prototyping
So, we need iterations and prototype to try out and
evaluate
 But
iteration can get trapped having no
simple improvement, but are not good
Two things you needed in
order for prototyping:
1. To understand what is wrong and how to
improve
2. A good start point