Outline

01076568 Human Computer Interaction • What is design?

• The process of design
Chapter 6 : Interaction design basics • User focus
• Scenarios
ดร.ชมพูนทุ จินจาคาม • Navigation design
[kjchompo@[Link]]
• Screen design and layout
ภาควิชาวิศวกรรมคอมพิวเตอร์ คณะวิศวกรรมศาสตร์
สถาบันเทคโนโลยีพระจอมเกล้ าเจ้ าคุณทหารลาดกระบัง • Iteration and prototyping

C. Jinjakam, CE, KMITL 2

What is design? • The golden rule of design

Design = Achieving goals within constraints “Understand your materials”
– Ex. Steel chair frames are tubular or thin L or H
Goals : What is the purpose of the design we are section steel. Wooden chair have thicker solid legs.
intending to produce? Who is it for? Why do they • If wooden chair using the design of the metal one?
want it? => It would break.
• If the metal one in the design for the wooden one?
Constraints : What materials must we use? What => It would too heavy to move.

standard must we adopt? How much time do we – Understand computers

have to develop it? Are they health and safety issue? • Limitations, capacities, tools, platforms
– Understand people
Trade-off : Choosing which goals or constraints can be • Psychological, social aspect, human error.
relaxed so that others can be met.
C. Jinjakam, CE, KMITL 3 C. Jinjakam, CE, KMITL 4
• To err is human The process of design
– Bad interfaces cost money and cost lives.
– It is the nature of humans to make mistakes.
– Systems should be designed to reduce the
mistakes and to minimize the consequences when
mistakes happen. (know how and where)
• The central message – the user
– Core of interaction design : put the user first, keep
the user in the center and remember the user at
the end.

C. Jinjakam, CE, KMITL 5 C. Jinjakam, CE, KMITL 6

• User focus Scenarios

“Know your user” • Scenarios are stories for design.
Ex. ‘the user intend to press the “save” button, but accidently
– Who are they? press the “quit” button so loses his work’.
• Young or old? Experienced computer users or novices?
– Communicate with others – other designers,
– Probably not like you! clients or users.
– Talk to them. => participatory design – Validate other models
– Watch them. – Express dynamics
• The observations tell you what they do, they will tell • Individual screen shots and pictures give you a sense of
you why. what a system would look like, but not how it behaves.
– Use your imagination.

C. Jinjakam, CE, KMITL 7 C. Jinjakam, CE, KMITL 8

 Scenarios Scenarios
• Scenarios are stories for design.
– Time is linear
• Our lives are linear as we live in time and so we find it
easier to understand simple linear narratives.
– But no alternatives
• Real interactions have choices, some made by people,
some by systems. A simple scenario does not show
these alternative paths.
• It is easy to miss the unintended things a person may
do.

C. Jinjakam, CE, KMITL 9 C. Jinjakam, CE, KMITL 10

Navigation design Navigation design

– Local structure
• looking from one screen or page out
– Global structure
• structure of site, movement between screens.

C. Jinjakam, CE, KMITL 11 C. Jinjakam, CE, KMITL 12

 Navigation design – Chic design is also a problem in physical devices.
– It better if users do not have to use the ‘try and see’
• Local structure interaction.

Goal-seeking

– Knowing where you are

– Knowing what you can do
– Knowing where you are going – or what will happen
– Knowing where you’ve been – or what you’ve done

C. Jinjakam, CE, KMITL 13 C. Jinjakam, CE, KMITL 14

• How to unlock mobile phone?

C. Jinjakam, CE, KMITL 15 C. Jinjakam, CE, KMITL 16

• Global structure – hierarchical organization • Global structure – dialog

• Wider still
– Style issues (platform standard), functional issues, and
Application function hierarchy of messaging system
navigation issues (linkage between applications).

C. Jinjakam, CE, KMITL 17 C. Jinjakam, CE, KMITL 18

Screen design and layout Screen design and layout

• Ask • Tools for layout
– What is the user doing? – Grouping and structure
• Think – Order of groups and items
– 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 driver the layout.
C. Jinjakam, CE, KMITL 19 C. Jinjakam, CE, KMITL 20
 – Decoration
– Alignment

C. Jinjakam, CE, KMITL 21 C. Jinjakam, CE, KMITL 22

– White space • Appropriate appearance

– Presenting information

• User action and control

– Entering information
– Knowing what to do
– Affordances : things may suggest by their shape and – Aesthetics and unity
other attributes what you can do to them. Ex. Handle
affords pulling or lifting; a button affords pushing. – Making a mess of it: color and 3D
– Localization / internationalization
C. Jinjakam, CE, KMITL 23 C. Jinjakam, CE, KMITL 24
 Guess the brand Iteration and prototyping
Human situations are complex and first design will not
be perfect! => almost interaction design includes
some form of interaction of ideas.

Sort of evaluation, intended to improve designs, is

called formative evaluation.

C. Jinjakam, CE, KMITL 25 C. Jinjakam, CE, KMITL 26

Summary
• Design in HCI is about the whole interaction between
people, software and their environment.
• Design was defined as “achieving goals within constraints”.
• We learn
– bird’s-eye view of design process
– simple techniques for dealing with this: getting to know your
users, who they are, remembering that they are difference from
you, but trying to imagine what it is like for them.
– Scenario of design
– Navigate design of the system, start by looking at local structure,
the way on screen, pate or state of an application related to
Two things needed in order to prototyping methods to work: those it immediately links to
– Screen design and layout
1. To understand what is wrong and how to improve.
– Iteration is an essential part of virtually any interaction design
2. A good start point. process.

C. Jinjakam, CE, KMITL 27 C. Jinjakam, CE, KMITL 28