A presentation about the interaction design basics in human-computer interaction.

1. INTERACTION DESIGN
BASIC

2. Interaction Design Basics
• Design:
 what it is, interventions, goals, constraints
• The design process:
 What happens when
• Users:
 Who they are, what they are like

3. Interactions and Interventions
Design interactions not just interfaces
not just the immediate interaction
e.g. stapler in office - technology changes interaction style
 manual: write, print, staple, write, print, staple, ..
 electric: write, print, write, print, ..., staple
Designing interventions not just artefacts
not just the system, but also…
 documentation, manuals, tutorials
 what we say and do as well as what we make

4. What is design?
“Achieving goals within constraints”
• The best way for an organization to achieve its goals is to reduce operating expenses, reduce
inventory, and increase throughput.
Goals – purpose
• What is the purpose of the design we are intending to produce? Who is
it for? Why do they want it?
Constraints – materials, platforms
• What materials must we use? What standards must we adopt?
• How much can it cost? How much time do we have to develop it? Are there
• Health and safety issues? Do we need to build in copyright protection?
Trade-offs
• Choosing which goals or constraints can be relaxed so that others
can be met.

5. Golden rule of design
“Understand your materials”
 Understand computers
- limitations, capacities,
tools, platforms
 Understand people
- psychological, social
aspects
- human error
 And their interaction
To err is a human
It is normal for people to
make mistakes.
Accident reports
- Air-crash, industrial
accident, hospital
mistake
But human “error” is
normal
we know how users
behave under stress

6. The central message – the user
• It is about attitude. Often it is said that the success of the
various methods used in HCI lies not in how good they
are, but in that they simply focus the mind of the designer
on the user.
• This is the core of interaction design: put the user first,
keep the user in the center and remember the user at the
end.

7. The Process of Design

8. 4. Iteration/Prototyping
• Design evaluation
• Improvements
• Gathering feedback
5. Implementation and Deployment
• Final form
. Includes:
 Coding
 Building Hardware(maybe)
 Documentation
 Manuals
• Limitations
1. Requirements
 What is exactly needed
 What is There vs. What is Wanted
How to find requirements:
• Interview people
• Direct observation
• Videotaping
2. Analysis
• The results of gathering
information
• Task Analysis
3. Design
• Record design choices
• Modelling and Guidelines

9. User Focus
Know your Users
 - Who are they?
 Probably not like you
 Talk to them(Participatory Design)
 Watch them
 Use your imagination

10. Scenario
• These designs can either be the simplest design
representation and the other one is the most flexible and
powerful.
• Some are quite short like “The user intends to press the
‘save’ button, but accidentally presses the ‘quit’ button so
loses his work”.
• While others are focused more on describing the situation
or context

11. Example
Scenario for proposed movie player:
Ben would like to see the new film “Seven Samurai” and wants to invite
Alex, but he knows that Alex isn’t a fan on these type of genres. Ben decides
to inspect it to determine if she would take an interest on it. He then
connects to one of the movie sharing networks. While using his machine, it
gets a higher bandwidth to the shared connection. He feels a bit guilty.
He’s aware that he’ll receive an illegal copy of the film, but decides that
it’ll be fine as he intends to go to the cinema to watch it. After it downloads
to his machine he takes out his new personal movie player. He presses the
‘menu’ button and he used the arrow keys to scroll down to find the
‘Bluetooth connect’ and presses the select button on his screen.
On his computer, the movie download program now shows an icon
displaying that it has recognized a compatible device and then, he drags the
icon of the film over to the player. On the screen, it shows a “Downloading
now”, a percent indicator, and small whirling icon display.

12. During lunch break, he took out his movie player, then plugs in
his earphones and starts to watch. He uses the arrow keys to skip
between the portions of the film and decides that she would like it.
Then he feels a tap on his shoulder. he turns round and it was Alex.
He had been so absorbed he didn’t notice her.
“What are you watching?” she asks. “Here, listen” he says and
whereas he flicks a small switch. The built-in speaker is loud enough
for both of them to hear, but not loud enough to disturb other
people within the canteen.
“Surprised this is out yet” she says. “Well actually...” as Ben
confesses, “You’d better come with me to see it and make an honest
man out of me”. “I’ll think about it” she replied.

13.  Time is linear
 Our lives are linear as we live in time and ergo, we find it easier
to understand simple linear narratives. We are natural
storytellers and story listeners.
 But no alternatives
 Real interactions have choices, some made by people, some by
systems. A simple scenario does not show these alternative
paths. In particular, it is easy to miss the unintended things a
person may do.
 Scenarios are a resource that can be used and reused
throughout the design process: helping us see what is wanted,
suggesting how users will deal with the potential design,
checking that proposed implementations will work, and
generating test cases for final evaluation.
This linearity has both positive and negative
points:

14. • Communication to other:
 Designers, clients, and users. It is easy to misunderstand each other while
explaining abstract ideas. Concrete examples of use are easier to share and
understand.
• Validate other models:
 A detailed scenario can be ‘played’ against different types of representations such as
as task models or dialogue and navigation models.
• Express dynamics
 Screen shots and pictures can give you a clue of what a system would look like, but
not its behavior. In the next section we will discuss ways of describing the patterns
of interaction with a system.
 These are more complex and involves a network or hierarchies. In contrast scenarios
are linear – they represent a single path amongst all the potential interactions.
In addition scenarios can be used to:

15. Navigation Design
Levels
• Widget choice
 menus, buttons etc.
 The appropriate choice of widgets and wording in menus and buttons
will help you know how to use them for a particular selection or action.
• Screen design
 You need to find things on the screen, understand the logical grouping
of buttons.

16. • Application navigation design
 You need to be able to understand what will happen when a button is
pressed, to understand where you are in the interaction.
• Environment
 Miscellaneous apps, Operating Systems, and Software.
 The word processor has to read documents from disk, perhaps some are on
remote networks. You switch between applications, perhaps cut and paste.

17. The web & Physical Devices
Web
• Elements and Tags.
• Page design.
• Site structure.
• The web, browser & external
links.
Physical Devices
• Controls
o buttons, keys, knobs, dials.
• Physical Layout.
• Modes of device.
• The real world.

18. Think Structure:
Within a screen
Local
• Looking from this screen out.
Global
• Structure of site, movement between screens.
Wider still
• Relationship with other applications or software.

19. Goal Seeking

20. Four golden rules
• Knowing where you are
• Knowing what you can do
• Knowing where you are going
o or what will happen
• Knowing where you’ve been
o or what you’ve done

21. Hierarchical Organization
Hierarchical diagrams.
 Parts of application
• screens or groups of screens
 Typically functional separation
Navigating hierarchies
 Deep is difficult
 Misuse of Miller’s 7 ± 2
o short term memory, not menu size
 Is it Optimal?
o many items on each screen
o but structured within screen

22. Dialogue
Marriage service
• general flow and generic – blanks for
names.
• pattern of interaction between
people
Computer dialogue
• pattern of interaction between users
and system but details differ each
time

23. Network Diagram
Shows a different paths through system
 What leads to what
 What happens when
 Includes branches
 Different types of task oriented then hierarchy

24. The Wider Still
• Between applications and beyond
• Style issues:
o platform standards, consistency.
• Functional issues
o cut and paste
• Navigation issues
o embedded applications
o links to other apps and the web.

25. SCREEN AND LAYOUT
UNLEASH THE PIANIST IN YOU
HOME OF TOP QUALITY PIANOS THAT BRINGS OUT THE
BEST IN YOU
BUTTON
LOG IN
CART

26. SCREEN AND LAYOUT
GROUPING
UNLEASH THE PIANIST IN YOU
HOME OF TOP QUALITY PIANOS THAT BRINGS OUT THE
BEST IN YOU
BUTTON
LOG IN
CART

27. UNLEASH THE PIANIST IN YOU
HOME OF TOP QUALITY PIANOS THAT BRINGS OUT THE
BEST IN YOU
BUTTON
LOG IN
CART

28. SCREEN AND LAYOUT
LABEL
HOME OF TOP QUALITY PIANOS THAT BRINGS OUT THE
BEST IN YOU
BUTTON
LOG IN
CART
UNLEASH THE PIANIST IN YOU

29. HOME OF TOP QUALITY PIANOS THAT BRINGS OUT THE
BEST IN YOU
SHOP NOW!
LOG IN
CART
UNLEASH THE PIANIST IN YOU

30. SCREEN AND LAYOUT
ALIGNMENT
HOME OF TOP QUALITY PIANOS THAT BRINGS OUT THE
BEST IN YOU
SHOP NOW!
UNLEASH THE PIANIST IN YOU
CART
LOG IN

31. HOME OF TOP QUALITY PIANOS THAT BRINGS OUT THE
BEST IN YOU
SHOP NOW!
UNLEASH THE PIANIST IN YOU
CART
LOG IN

32. SCREEN AND LAYOUT
DECORATION
HOME OF TOP QUALITY PIANOS THAT BRINGS OUT THE
BEST IN YOU
SHOP NOW!

33. ITERATION AND PROTOTYPING

35. Resources
• https://alandix.com/academic/teaching/rome2
003/docs/rome-ch05.pdf
• https://www.hcibook.com/e3-
docs/slides/notes-pdf/e3-chap-05-6up.pdf