hci [6]interaction design
DESCRIPTION
Human Computer InteractionTRANSCRIPT
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?
A simple 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?
It starts 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
It means 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