The document discusses different aspects of usability and user experience design. It covers topics like what makes something easy to use, how to observe and understand users, and the three main types of design: graphic, information, and interaction design. Graphic design is focused on visual elements like color and layout. Information design deals with organizing and presenting complex data or content. Interaction design ensures users can effectively accomplish tasks and goals through a product or system.

1. Usability
и.т.д.
FastDev • 02–02–11

2. Jonas Söderström

3. 1977 –
Jonas Söderström

4. 1977 –
1994 – Jonas Söderström

6. ”User friendly”

7. ”User friendly”

8. Usable

9. Usability is ... ?

10. Easy to use - how?
Easy to
remember

11. Easy to use - how?
Easy to
remember

12. Easy to use - how?
Easy to
learn
Easy to
remember

13. Easy to use - how?
Easy to
learn
Efficient
Easy to
remember

14. Easy to use - how?
Easy to
learn
Efficient
Easy to
Error remember
reduction

15. Easy to use - how?
Easy to
learn
User’s
subjective Efficient
satisfaction
Easy to
Error remember
reduction

16. Usable
• Do I find the stuff I need?
• Do I understand what the buttons do?
• Is navigation consistent?
• Does the system provide clear feedback
on what I do?
• Are error messages helpful?

18. Usability
=
Could I use it?

19. Useful
=
Would I use it?

20. Useful-ness
• Do I really need it?
• Are there other (better, more well-known)
ways to do the same thing?
• Is it worth the effort?
• Is it worth the money?

21. Usability
+
Usefulness
=
User experience (UX)

22. How do you create a
good User Experience?

23. Don’t listen to the users

24. Demands
”People will often say ’I’d like it better if it could do x’.
It always pays to be suspicious of these requests for new
features. If you probe deeper, it often turns out that they
already have a perfectly fine source for x – and wouldn’t be
likely to switch: they’re just telling you what they like.”
Steve Krug: Don’t make me think

25. Watch the users

26. Observe users
in their own environment

28. Spalding’s new basketball

29. Spalding’s new basketball
• Ball includes internal
micro-pump, hidden
inside the ball
• Pops up when needed
• Focus groups did not
catch this user
requirement
• What happened to
market share?

30. Spalding’s new basketball

31. Spalding’s new basketball
• Market share up from
32 % to 64 % in one
year!

32. How do you design?
What do you design?

33. User interface:
Three kinds of design

34. Let’s make a digital interface
24

36. • There will be tabs at the top, but ...

38. • Color?

39. • Color?
• Shade?

40. • Color?
• Shade?
• Form?

41. • Color?
• Shade?
• Form?
• Shadow?

42. • Color?
• Shade?
• Form?
• Shadow?
• Border?

43. • Color?
• Shade?
• Form?
• Shadow?
• Border?
• Spacing?

44. Moscow

45. Moscow Izjevsk

46. Moscow Izjevsk Peterburg

47. Moscow Izjevsk Peterburg Vladivostok

48. Moscow Izjevsk Peterburg Vladivostok Novgorod

49. Moscow Izjevsk Peterburg Vladivostok Novgorod
• What names?

50. Moscow Izjevsk Peterburg Vladivostok Novgorod
• What names?
• What order? Size, geography, alphabetical ...

51. Moscow Izjevsk Peterburg Vladivostok Novgorod
• What names?
• What order? Size, geography, alphabetical ...
• What goes under each heading?

52. Moscow

53. Moscow Izjevsk

54. Moscow Izjevsk Peterburg

55. Moscow Izjevsk Peterburg Vladivostok

56. Moscow Izjevsk Peterburg Vladivostok Novgorod

57. Moscow Izjevsk Peterburg Vladivostok Novgorod
• What to do with the button? How does it react?

58. Moscow Izjevsk Peterburg Vladivostok Novgorod
• What to do with the button? How does it react?
• What happens on mouseover?

59. Moscow Izjevsk Peterburg Vladivostok Novgorod
• What to do with the button? How does it react?
• What happens on mouseover?
• What happens on click? What service starts?

60. Moscow Izjevsk Peterburg Vladivostok Novgorod
• What to do with the button? How does it react?
• What happens on mouseover?
• What happens on click? What service starts?
• Can you cancel that action?

62. graphic
design

63. graphic
design
view, enjoy

64. graphic information
design design
view, enjoy

65. graphic information
design design
view, enjoy find, understand,
interpret

66. interaction
design
graphic information
design design
view, enjoy find, understand,
interpret

67. interaction do, buy,
design download,
register
graphic information
design design
view, enjoy find, understand,
interpret

69. Color, form,
typography,
mood

70. Titles,
Color, form, headlines,
typography, labels, disposition,
mood links, search

71. Forms, buttons,
task flow, error
messages,
Titles,
Color, form, headlines,
typography, labels, disposition,
mood links, search

72. Forms, buttons,
task flow, error
messages,
feedback
Titles,
Color, form, headlines,
typography, labels, disposition,
mood links, search

73. interaction do, buy,
design download,
register
graphic information
design design
view, enjoy find, understand

74. User experience
interaction do, buy,
design download,
register
graphic information
design design
view, enjoy find, understand

75. interaction
design
graphic information
design design

76. interaction
design
graphic information
design design
marketing,
movie trailer

77. interaction
design
graphic information
design design
organization,
government
marketing, document
movie trailer managment,

78. e-commerce,
transactional
systems
interaction
design
graphic information
design design
organization,
government
marketing, document
movie trailer managment,

81. voice,
accent,
prosody,
speed
(visceral
design)

82. voice,
accent, menu
prosody, system
speed ”press 1 for
(visceral x, press 2
design) for Z

83. time for entering?
press ahead/barge
in?
voice,
accent, menu
prosody, system
speed ”press 1 for
(visceral x, press 2
design) for Z

84. interaction
design
graphic information
design design

85. interaction
design
graphic information
design design
brand strategist

86. interaction
design
graphic information
design design
brand strategist
marketing

87. interaction
design
graphic information
design design
brand strategist
marketing information dept

88. system
architects
interaction
design
graphic information
design design
brand strategist
marketing information dept

89. it dept
system
architects
interaction
design
graphic information
design design
brand strategist
marketing information dept

90. it dept
developers
system
architects
interaction
design
graphic information
design design
brand strategist
marketing information dept

91. Cooperation
interaction
design
graphic information
design design

92. Cooperation
interaction
design
graphic information
design design
Most have all parts!

93. Cooperation
interaction
design
graphic information
design design
Most have all parts! Where things go wrong!

94. Search function
interaction
design
graphic information
design design

95. Search function
Search interface
interaction
design
graphic information
design design

96. Search function
Search interface
interaction
design
How are
things
labeled?
graphic information
design design

97. interaction do, buy,
design download,
register
graphic information
design design
view, enjoy find, understand

98. Information architecture
interaction do, buy,
design download,
register
graphic information
design design
view, enjoy find, understand

99. Information architecture
interaction do, buy,
design download,
Information register
architect
graphic information
design design
view, enjoy find, understand

101. Starts
browsing

102. Seems
Starts OK?
browsing

103. Seems
Starts OK?
browsing
Unpleasant, slow – leaves

104. Seems Where is
Starts OK? the stuff
browsing
I need?
Unpleasant, slow – leaves

105. Seems Where is
Starts OK? the stuff
browsing
I need?
Can’t find –
leaves
Unpleasant, slow – leaves

106. Let me do what
I want / to do
Seems Where is
Starts OK? the stuff
browsing
I need?
Can’t find –
leaves
Unpleasant, slow – leaves

107. Can’t do –
leaves
Let me do what
I want / to do
Seems Where is
Starts OK? the stuff
browsing
I need?
Can’t find –
leaves
Unpleasant, slow – leaves

108. Can’t do my
business
Looks Can’t find
Starts ugly what
browsing
I need

109. Can’t do my
business
Looks Can’t find
Starts ugly what
browsing
I need

110. Can’t do my
business
Looks Can’t find
Starts ugly what
browsing
I need

111. Can’t do my
business
Looks Can’t find
Starts ugly what
browsing
I need

112. Subject to change?

113. Subject to change?
• Graphic design can often be changed very quickly
(templates, style sheets)

114. Subject to change?
• Graphic design can often be changed very quickly
(templates, style sheets)
• Information design – can be changed, but will
take time
and must often be done by hand

115. Subject to change?
• Graphic design can often be changed very quickly
(templates, style sheets)
• Information design – can be changed, but will
take time
and must often be done by hand
• Interaction design – huge cost,
if changes are possible at all.

116. Risk vs effort
• Bad graphic design is usually the greatest
threshold for acceptance
• Users judge digital systems very fast
• Bad information design is the biggest problem in
use
• Bad interaction design has the greatest potential
to hurt your brand or the relation with your
customers – for a very long time

117. Unnecessary labels

118. Unnecessary labels
Name: Eric Smith
E-mail: eric@smith.com
Company: Acme, Inc.
Credit: 5 000 €

119. Unnecessary labels
Name: Eric Smith
E-mail: eric@smith.com
Company: Acme, Inc.
Name: Eric Smith
Credit: 5 000 €
E-mail: eric@smith.com
Company: Acme, Inc.
Credit: 5 000 €

120. Unnecessary labels
Name: Eric Smith
E-mail: eric@smith.com
Company: Acme, Inc.
Name: Eric Smith
Credit: 5 000 €
E-mail: eric@smith.com
Company: Acme, Inc.
Eric Smith
Credit: 5 000 €
eric@smith.com
Acme, Inc.
5 000 €
+4670-1234567 (home)

126. Unnecessary labels

127. Too much information

128. Too much information

129. Too much information

130. Too much information

131. Unnecessary
icons
• Good to distinguish
things from each other

132. Icons are hard to understand
• Imprisoned!
• Let’s go to the woods!

133. Wrong flow

134. Every user fooled!
• Everyone clicked “Cancel”!