Human Computer Interaction, interacting with technology, basic principles od UI design

1. HCIHUMAN
COMPUTER
INTERACTION
http://hqwallbase.com/172416-ibm-370-grayscale-monochrome-wallpaper/

2. What is HCI?What is HCI?
HCI is the study of interaction between
people (users) and computers

3. Human

4. People are diverse, unpredictable,
messy, ill-understood.
They have different abilities
Human

5. People are DIVERSE
• Physically (hand size, height, strength, coordination, disabilities)
• Effects of age
• Perception is not all that seems
• Many processes are subconscious
• Experience and mental models
• Cognitive abilities
• Cultural environment
• Motivations

6. Population by AGE group
Population is changing very dramaticly.
The number of 65+ is more then doubled in 2050

7. Effects of AGE
We are not the only industry that needs to solve
these Age issues
Third Age Suite - in automotive industry allows
20 years old designers to sit in the car and have
experience of 60 yo.

8. Contrast sensitivity
http://www.w3.org/TR/wai-age-literature/
Contrast sensitivity decreases
dramatically with age.
Even if you are very comfortable
with technology - there can be
very difficult to use it.

9. Contrast sensitivity
example of low contrast content

10. Contrast sensitivity
http://webaim.org/resources/contrastchecker/
Tool for checking the
minimal level of contrast

11. http://visionlab.harvard.edu/
silencing/
Visual Perception
SILENCING demonstrates
how hard is to notice when
moving objects change.

12. Awareness
https://www.youtube.com/watch?v=Ahg6qcgoay4

13. Principle of Least Effort
Attention
Interaction
Reading
Thinking
Effort
If there are several ways of achieving the same goal, people will
choose the least demanding course of action.

14. Subconscious Processing
Could the user answer the question?
"Does Siemens have any special deals on washing machines?"
Usability study by NNG in the UK

15. Banners, Auto-Forwarding Carousels and Accordions
Annoy Users and Reduce Visibility
Subconscious Processing
No! User failed the task!
The user gave up and assumed that Siemens didn't
have any special deals for her.
People skip over things that could be disturbing -
Brain filters out banners

16. Users are task focused
People go to web sites to achieve particular goals,
not to look around and admire the design.

17. Computer
Computers aren’t just computers anymore -
mobile phone, camera, car, washing machine,
alarm clock, ATM, copy machine, dish washer…

18. Devices are much more complicated
and multi-functional then before.
Computer

19. Computer
time
past now
pace of
CHANGE
rate of
LEARNING
old world new world
The world is changing much more rapidly than most people realize.
In the NEW WORLD you do not already know how things work but in some cases
you do not even know how to use them - it is too complicated.

29. –Johnny Appleseed
“Type a quote here.”

30. Interaction

31. The interface between humans and the computers they use
is crucial to facilitating this interaction.
dialogue between human
and computer
Interaction

32. Interacting with Technology

33. Very simple example: Sink tap
1. User establishes a goal =
Wash hands
2. Formulates intention > specifies actions
at interface > executes action = moves the
tap lever
3. System hopefully bring some feedback
and user can hopefully see it and
understands what happened = running
water
4. Evaluates system state with respect to
goal = more hot/cold, less/more water,
stop, changing the direction moving the
tap…

35. Goal Mapping
4 goal-mapping questions
1. GOAL: How do users know their goal is attainable?
2. ACTION: How do users know what to do?
3. PERCEPTION: How will users know they’ve done the right thing?
4. EVALUATION: How will users know they’ve attended their goal?

36. The goal of HCI is to improve the interaction between users
and computers by making computers more user-friendly and
receptive to the user's needs.
To design systems that minimize the barrier between the
human’s cognitive model of what they want to accomplish and
the computer’s understanding of the user’s task
Improving the usability
is the key factor.
HCI Goals

37. Natural Interface
Human speech, Gestures, Hand writing recognition

38. Natural Interface
XBOX Kinect

39. Natural Interface
Touch interface

41. The User Interface today is often one of the most critical
factors regarding the success or failure of a computer system
In fact, the most sophisticated machines are worthless unless
they can be used properly by men.
Bad Design costs lives, money, & time
Why is it important?

42. Principles of UI design
In order to build user-friendly and usable interfaces
they may be considered Principles of UI Design at
any time during the design of a user interface.

43. 9 Principles of user interface design to improve
the quality of interface.
Principles of UI design
- Structure
- Visibility
- Feedback
- Affordances
- Mapping
- Contraints
- Consistency
- Simplicity
- Tolerance

44. The Structure
Can I find it where I expect?
Putting related things together and separating
unrelated things.
Design should ORGANIZE the user interface in
MEANINGFUL and USEFUL WAYS based on
CLEAR, CONSISTENT models that are
RECONGIZABLE to users.

46. Can I see it?
The Visibility
Make things visible!
The design should make ALL NEEDED OPTIONS for a
given task VISIBLE without DISTRUCTING the user with
redundant information.
Good designs don't OVERWHELM users with alternatives
or confuse with unneeded information.

47. The Visibility
Visible knobs, dials and buttons have been
replaced by invisible and unclear “active zones”
and sensor technology

48. The Visibility
Google search makes it clear where
to enter text
Hiding certain functions can be
useful in interface design

49. The Feedback
What is it going now?
The design should KEEP USER INFORMED of ACTIONS,
CHANGES OF STATE that are relevant to the user through CLEAR
LANGUAGE - FAMILIAR to users.

50. The Feedback
Feedback needs to be immediate and synchronized
with user action.
What is the device doing right now? (loader helps)
Sound can work as a feedback.

51. The Feedback
Can you use it without watching it?
That’s how most people use calculator.

52. The Affordance
How do I use it?
What the user CAN SEE that an OBJECT DOES.
Affordance answers How do I use it? Giving a clue!
EX: Chairs afford sitting; handles afford pulling

53. The Affordance
Perceived properties of an object that give
clues to its operation.
It is quite clear in case of simple things.

54. The Affordance
It can be confusing in case of multi-functional devices
Learned conventions: E.g., buttons and scrollbars—
but are they clear to novices?

55. The Affordance
A DOOR HANDEL’S DESIGN should communicate
whether you PULL or PUSH.
But here's an EXAMPLE OF CONFLICT between design affordance
and “documentation” - NOT an INTUITIVE INTERFACE!

56. Mapping: Where am I and where can I go?The Mapping
Where am I and where can I go?
RELATIONSHIP to CONTROLS and their EFFECT.
ARRANGEMENTS should be NATURAL for the
relations BETWEEN CONTROLS and their
MOVEMENTS and OUTCOME from such action.
The real function of natural mappings is to REDUCE
THE NEED OF ANY INFORMATION from a user’s
MEMORY to perform a TASK.

57. Mapping: Where am I and where can I go?The Mapping
Which arrangement is the best solution? C!

58. Mapping: Where am I and where can I go?The Mapping
A B
A B C D
Which arrangement is the best solution? 1 = A, 2 = A or C

59. The Constraint
Why can’t I do that?
RESTRICTING the kind of interactions that can take place
REDUCE the chance of ERROR
FOCUSES user’s attention to needed task

60. The Constraint
FOCUSES on items and functions that are appropriate

61. The Consistency
I think I have seen that before!
Design interfaces to have SIMILAR OPERATION AND USE -
similar elements for achieving tasks.
Similarity increases learnability.
The design should REUSE components and behaviors,
maintaining consistency.
Enables people to QUICKLY TRANSFER PRIOR KNOWLEDGE
to NEW CONTEXT and FOCUS on relevant tasks

62. The Consistency

63. The Consistency
Consistent use of symbols to represent similar concepts, uses
prior knowledge and makes things easier to use.

64. The Consistency
Color convention example

65. The Simplicity
Simple for common tasks!
The design should MAKE SIMPLE, COMMON
TASKS EASY communicating CLEARLY and
SIMPLY in the user's OWN LANGUAGE

66. The Simplicity

67. The Simplicity
It is really not difficult to find examples of bad design in computer apps.

68. The Tolerance
Design for errors, allow mistakes!
The design should be FLEXIBLE AND TOLERANT, reducing the
cost of mistakes and allowing UNDOING, while also PREVENTING
ERRORS by tolerating varied inputs and by interpreting all
reasonable actions.

69. The Tolerance
Sample of bad design

70. The Tolerance
Sample of good design

71. Further reading

72. More examples

73. More examples
Mapping issue

74. More examples
Structure issue

75. More examples
Mapping issue

76. More examples
structure, mapping and affordance issue

77. More examples
affordance issue

78. More examples
almost all issues :)

79. More examples
Not an usability issue - missing function (water mixing)

80. Zdeněk Lanc
UX designer
web:
www.yd.cz
e-mail:
yd@yd.cz
twitter:
@ZdenekLanc
Thank you!