Snabb-presentation av några spår inom användbarhet / UX- området från DrupalCamp FAll2011 i Stockholm

1. Användarvänlighet?
Säg hellre
användbarhet
eller
användningskvalitet
Jonas Söderström •

2. twitter
@jonas_blind_hen
2 Text

3. ”Användarvänlig”
En term som fallit i onåd
Ryan Smith Photography / Flickr med Creative Commons-licens

4. ”Användarvänlig”
En term som fallit i onåd
Ryan Smith Photography / Flickr med Creative Commons-licens

5. Användbar
Foto: Docman / flickr med Creative Commons-licens

6. Användbarhet är
ett kvalitetsmått
... på ett slutresultat
• ”Den här sajten hög användbarhet”
• ”Användbarheten är dålig för det här systemet”

7. Användbarhet är
en process
Saker som ”användbarhetsmänniskor” gör
• User-centered design
• Interaction design
• Information architecture
• Human-centered design

8. Användbarhet är
mer än gränssnitt
• Vad ska produkten användas?
• Var?
• Av vem?
• Vad behöver de? Vad vill de?

9. User interface:
Three kinds of design
Jonas Söderström
information architect

10. Let’s make
a digital interface
• Initial decision: the interface will
have a row of tabs at the top.
• How do we do that?

11. • Should they be blue ...
• or ...

12. • Colors?
• Shapes and proportions?
• Borders?
• Shadows?
• Typography?
• These decisions require a specific competence

13. Children
•”Children” or ”Parents”?
•What names / terms go into
the tabs?

14. Parents Youth Retired Employers Press
• What names should we use?
• What order?
• What goes under each heading?
• These decisions require a very different
competence

15. Parents Youth Retired Employers Press
• What to do with the tab? How does it react?
• What happens on mouseover?
• What happens on click? What service starts?
• Can you cancel that action?
• ... and this is clearly yet another competence!

17. graphic
design
view, enjoy

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

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

21. Color, form,
typography,
mood

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

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

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

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

26. Systems
e-commerce,
have transactional
systems
different interaction
focuses design
graphic information organization,
marketing, design design government
movie trailer document
managment,

27. ”Press
1 for ...”

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

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

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

32. Who are our interaction
colleagues? design
graphic information
design design

33. Who are our interaction
colleagues? design
graphic information
design design
brand strategist

34. Who are our interaction
colleagues? design
graphic information
design design
brand strategist
marketing

35. Who are our interaction
colleagues? design
graphic information
design design
brand strategist
marketing information dept

36. system
architects
Who are our interaction
colleagues? design
graphic information
design design
brand strategist
marketing information dept

37. it dept
system
architects
Who are our interaction
colleagues? design
graphic information
design design
brand strategist
marketing information dept

38. it dept
developers
system
architects
Who are our interaction
colleagues? design
graphic information
design design
brand strategist
marketing information dept

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

40. Search function
interaction
design
graphic information
design design

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

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

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

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

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

46. What the
user
does

47. What the
user
does
Starts
browsing

48. What the
user
does
Seems
Starts OK?
browsing

49. What the
user
does
Seems
Starts OK?
browsing
Unpleasant, slow – leaves

50. What the
user
does
Seems Where is
Starts OK? the stuff
browsing
I need?
Unpleasant, slow – leaves

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

52. What the
user
does 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

53. What the
user Can’t do –
leaves
does 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

54. How the
user feels
Can’t do my
business
Looks Can’t find
Starts ugly what
browsing
I need

55. How the
user feels
Can’t do my
business
Looks Can’t find
Starts ugly what
browsing
I need

56. How the
user feels
Can’t do my
business
Looks Can’t find
Starts ugly what
browsing
I need

57. How the
user feels
Can’t do my
business
Looks Can’t find
Starts ugly what
browsing
I need

58. Subject to change?

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

60. 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

61. 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.

62. 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

63. Läs mer
• En sajt kräver tre sorters design
• http://kornet.nu/3xdesign.shtml
• Vad är informationsarkitektur?
• http://kornet.nu/iarkitekt.shtml

64. Kom ihåg:
4 saker att göra

65. Ett:
Observera användarna

66. Lyssna inte på
användarna
”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

67. Observera i deras miljö

68. Från studie av Folktandvården i Stockholm

69. Spaldings nya basketboll
.

70. Spaldings nya basketboll
• 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?
.

71. Marknadsandel?
.

72. Marknadsandel?
• Från 32 % till 64
% på ett år!
.

73. Två:
Fånga deras drivkrafter

74. Tre:
Börja med enkla
prototyper

75. Enkla prototyper – tidigt

76. Enkla prototyper – tidigt
”The most remarkable finding was that getting
a low-functionality version of the product into
customer’s hands at the earliest opportunity
improves quality dramatically.”
Marco Iansiti & Alan MacCormack: Why Evolutionary Software Works. MIT Sloan
Management Review, Winter 2001,Volume 42, Number 2

77. Fyra:
Testa regelbundet

78. Inga universalrecept
• Högst tre klick? Högst sju val på en skärm?
Toppmeny bättre än sidomeny?
• Det finns få ”rätta” svar för de flesta gränsnittsproblem.
• Kontext-beroende
• Kompromisser

79. Användbarhet ...

80. Användbarhet ...
är inte nog!

81. Usable

82. Usable
Useful

83. Could I use it?

84. Could I use it?
Would I use it?

85. Usable
• Hittar jag var material finns?
• Förstår jag hur knappar funkar?
• Är navigeringen konsistent?
• Är felmeddelanden begripliga?
• Ger programmet feedback på vad jag gör?

86. Useful
• Har jag faktiskt tillräcklig nytta av det,
i mitt arbete / liv / verksamhet …?
• Användarens mål, motiv, motivation, alternativ

87. Usability
Usefulness

88. Usability
Usefulness
+

89. Usability
Usefulness
+
User experience

90. Usability
Usefulness
+
User experience
Användningskvalitet

91. Fifth Avenue, NY

92. Fifth Avenue, NY

93. Usability
Usefulness
+
Desirability
?

94. Usability
Usefulness
+
Desirability
Framgång

95. Photo: Björn Falkevik

96. jonas@kornet.nu
Tac
Slideshare:
Jonas_inUse
Sajt:
www.javlaskitsystem.se
Twitter:
Jonas_Blind_Hen
Photo: Björn Falkevik