Hellre användningskvalitet än användarvänlighet

1,336 views

Published on

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,336
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • Vill ni twittra så är det här lämpliga hashtaggar, och det där längst ner är jag\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Den här bilden på användaren är ganska rörig. Men den finns här just för att visa på hur många andra saker vi har i vår miljö som pockar på vår uppmärksamhet, som vi måste ta tag i, som väntar på att göras. Det här föreställer en arbetsmiljö, men ni vet själva hur det är i hemmiljön också - disk, barn, familj, husdjur, städning, räkningar, … vi har mycket att göra och vi vill ha det gjort snabbt.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Hellre användningskvalitet än användarvänlighet

    1. 1. Användarvänlighet? Säg hellre användbarhet elleranvändningskvalitetJonas Söderström •
    2. 2. twitter @jonas_blind_hen2 Text
    3. 3. ”Användarvänlig” En term som fallit i onådRyan Smith Photography / Flickr med Creative Commons-licens
    4. 4. ”Användarvänlig” En term som fallit i onådRyan Smith Photography / Flickr med Creative Commons-licens
    5. 5. AnvändbarFoto: Docman / flickr med Creative Commons-licens
    6. 6. Användbarhet ärett 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. 7. Användbarhet ären processSaker som ”användbarhetsmänniskor” gör • User-centered design • Interaction design • Information architecture • Human-centered design
    8. 8. Användbarhet ärmer än gränssnitt • Vad ska produkten användas? • Var? • Av vem? • Vad behöver de? Vad vill de?
    9. 9. User interface:Three kinds of design Jonas Söderström information architect
    10. 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. 11. • Should they be blue ...• or ...
    12. 12. • Colors?• Shapes and proportions?• Borders?• Shadows?• Typography?• These decisions require a specific competence
    13. 13. Children•”Children” or ”Parents”?•What names / terms go into the tabs?
    14. 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. 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!
    16. 16. graphic designview, enjoy
    17. 17. graphic information design designview, enjoy find, understand, interpret
    18. 18. interaction do, buy, design download, register graphic information design designview, enjoy find, understand, interpret
    19. 19. Color, form,typography, mood
    20. 20. Titles,Color, form, headlines,typography, labels, disposition, mood links, search
    21. 21. Forms, buttons, task flow, error messages, feedback Titles,Color, form, headlines,typography, labels, disposition, mood links, search
    22. 22. interaction do, buy, design download, register graphic information design designview, enjoy find, understand
    23. 23. User experience interaction do, buy, design download, register graphic information design design view, enjoy find, understand
    24. 24. Systems e-commerce,have transactional systemsdifferent interactionfocuses design graphic information organization, marketing, design design governmentmovie trailer document managment,
    25. 25. ”Press 1 for ...”
    26. 26. voice, accent,prosody, speed(visceral design)
    27. 27. voice, accent, menuprosody, organization speed ”press 1 for(visceral x, press 2 for design) Z
    28. 28. time for entering? press ahead/barge in? voice, accent, menuprosody, organization speed ”press 1 for(visceral x, press 2 for design) Z
    29. 29. Who are our interactioncolleagues? design graphic information design design
    30. 30. Who are our interactioncolleagues? design graphic information design designbrand strategist
    31. 31. Who are our interactioncolleagues? design graphic information design designbrand strategist marketing
    32. 32. Who are our interactioncolleagues? design graphic information design designbrand strategist marketing information dept
    33. 33. system architectsWho are our interactioncolleagues? design graphic information design designbrand strategist marketing information dept
    34. 34. it dept system architectsWho are our interactioncolleagues? design graphic information design designbrand strategist marketing information dept
    35. 35. it dept developers system architectsWho are our interactioncolleagues? design graphic information design designbrand strategist marketing information dept
    36. 36. Cooperation interaction design graphic information design designMost systems have all parts! Where things go wrong!
    37. 37. Search function interaction design graphic information design design
    38. 38. Search function Search interface interaction design graphic information design design
    39. 39. Search function Search interface interaction design How are things labeled? graphic information design design
    40. 40. interaction do, buy, design download, register graphic information design designview, enjoy find, understand
    41. 41. Information architecture interaction do, buy, design download, register graphic information design design view, enjoy find, understand
    42. 42. Information architecture interaction do, buy,Informati design download, register onarchitect graphic information design design view, enjoy find, understand
    43. 43. What theuserdoes
    44. 44. What the user does Startsbrowsing
    45. 45. What the user does Seems Starts OK?browsing
    46. 46. What the user does Seems Starts OK?browsing Unpleasant, slow – leaves
    47. 47. What the user does Seems Where is Starts OK? the stuffbrowsing I need? Unpleasant, slow – leaves
    48. 48. What the user does Seems Where is Starts OK? the stuffbrowsing I need? Can’t find – leaves Unpleasant, slow – leaves
    49. 49. What the user does Let me do what I want / to do Seems Where is Starts OK? the stuffbrowsing I need? Can’t find – leaves Unpleasant, slow – leaves
    50. 50. What the user Can’t do – leaves does Let me do what I want / to do Seems Where is Starts OK? the stuffbrowsing I need? Can’t find – leaves Unpleasant, slow – leaves
    51. 51. How the user feels Can’t do my business Looks Can’t find Starts ugly whatbrowsing I need
    52. 52. How the user feels Can’t do my business Looks Can’t find Starts ugly whatbrowsing I need
    53. 53. How the user feels Can’t do my business Looks Can’t find Starts ugly whatbrowsing I need
    54. 54. How the user feels Can’t do my business Looks Can’t find Starts ugly whatbrowsing I need
    55. 55. Subject to change?
    56. 56. Subject to change?• Graphic design can often be changed very quickly (templates, style sheets)
    57. 57. 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
    58. 58. 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.
    59. 59. 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
    60. 60. Läs mer• En sajt kräver tre sorters design • http://kornet.nu/3xdesign.shtml• Vad är informationsarkitektur? • http://kornet.nu/iarkitekt.shtml
    61. 61. Kom ihåg:4 saker att göra
    62. 62. Ett:Observera användarna
    63. 63. 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 newfeatures. If you probe deeper, it often turns out that theyalready have a perfectly fine source for x – and wouldn’tbe likely to switch: they’re just telling you what theylike.” Steve Krug: Don’t make me think
    64. 64. Observera i deras miljö
    65. 65. Från studie av Folktandvården i Stockholm
    66. 66. Spaldings nya basketboll .
    67. 67. 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? .
    68. 68. Marknadsandel?.
    69. 69. Marknadsandel? • Från 32 % till 64 % på ett år!.
    70. 70. Två:Fånga deras drivkrafter
    71. 71. Tre:Börja med enklaprototyper
    72. 72. Enkla prototyper – tidigt
    73. 73. Enkla prototyper – tidigt”The most remarkable finding was that gettinga low-functionality version of the product intocustomer’s hands at the earliest opportunityimproves quality dramatically.”Marco Iansiti & Alan MacCormack: Why Evolutionary Software Works. MIT SloanManagement Review, Winter 2001,Volume 42, Number 2
    74. 74. Fyra:Testa regelbundet
    75. 75. 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
    76. 76. Användbarhet ...
    77. 77. Användbarhet ...är inte nog!
    78. 78. Usable
    79. 79. UsableUseful
    80. 80. Could I use it?
    81. 81. Could I use it?Would I use it?
    82. 82. 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?
    83. 83. Useful• Har jag faktiskt tillräcklig nytta av det, i mitt arbete / liv / verksamhet …?• Användarens mål, motiv, motivation, alternativ
    84. 84. UsabilityUsefulness
    85. 85. Usability Usefulness+
    86. 86. Usability Usefulness+ User experience
    87. 87. Usability Usefulness+ User experience Användningskvalitet
    88. 88. Fifth Avenue, NY
    89. 89. Fifth Avenue, NY
    90. 90. Usability Usefulness+ Desirability ?
    91. 91. Usability Usefulness+ Desirability Framgång
    92. 92. Photo: Björn Falkevik
    93. 93. jonas@kornet.nu Tac Slideshare: Jonas_inUse Sajt: www.javlaskitsystem.se Twitter: Jonas_Blind_HenPhoto: Björn Falkevik

    ×