Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Användbarhet 
- konsten att bryta regler rätt
Jakob Nielsen 
www.nngroup.com
Dagens agenda 
• Vad är användbarhet? 
• Hur utvecklar ni en användbar webbplats? 
• Konkreta exempel? 
• Fyra dörrar?
En skala 
Viktigt 
Subjektivt 
Användbarhet / Usability 
Verktyg 
Kontrakt 
Ej hugget i sten
Vad är användbarhet? 
• ISO 9241 
• Användbarhet = ändamålsenlighet X effektivitet X 
tillfredsställelse 
• Ändamålsenligh...
Vad är användbarhet? 
• Användbarhetsboken 
• Användbarhet = nytta X användarvänlighet 
• Skatteverket 
• Aftonbladet 
• F...
De fyra dörrarna 
tillgängligheten förtroende
Användarorienterad design 
• Samband mellan avsändare och besökare 
• Avsändare står gärna i fokus, ni ska skapa motvikt 
...
ISO 9241-210
1. Vad ska göras? 
• Idé, syfte och målgrupp 
• Övergripande 
• Vision 
• Mätbara mål 
• Börja enkelt och utveckla allt ef...
2. Lär känna användaren? 
• Personer ur målgruppen 
• Metoder: Intervjuer, enkäter, fokusgrupper, iaktagelser m.m. 
• Bätt...
3. Utforma webbplatsen 
• Användbarhet = nytta x användarvänlighet, nyttan är utredd 
• Sätt nyttan i praktiken genom anvä...
4. Uppföljning 
• Test eller sluttest/lansering 
• Behåll den höga kvaliteten på hela webbplatsen 
• Förändra en färdig pr...
Observationer 
Upplevelser 
Data 
$$$ ? 
? 
$$$ 
Tid 
Färdig produkt 
Övergripande 
Detaljnivå
Vattenfallsmodellen 
• I kontrast till en agil projektmetod
Anvandbarhet.se 
• Ytterligare en process 
• Vägskäl för att stämma av med kunden & målgruppen
Användarens 9 frågor 
• Var är jag? Finns det jag söker här/kan det finnas här? 
• Hur tar jag mig dit jag vill? 
• Var ha...
Konkreta 
användbarhetsfaktorer
Webbprofil 
• En grafisk profil fast för webben 
• Tar hand om användaren 
• Anger webbplatsens avsändare 
• Besökaren har...
Textstorlekar 
• Text dominerar webben 
• Två behov: texten ska vara stor och texten ska vara överskådlig 
• Storleken ang...
Typsnitt 
• Tryck och skärm skiljer sig 
• Måste typsnittet vara installerat på användarens dator? 
• Verdana och Georgia ...
Radavstånd 
• 120% är standardinställning i webbläsarna 
• 130% - 150% brukar passa bättre för löptext/brödtext 
• Bredare...
• Fri spaltbredd, spalten anpassar sig efter fönsterstorleken. 
• Låst spaltbredd, 50-70 tecken bred rekommenderas. Ingen ...
Rubriker 
• Kan göras som bilder eller som kod 
• Används för att sökoptimera sidan 
• Läsaren skannar innehållet, rubrike...
Bilder 
• En bild säger mer än tusen ord 
• Bilder förhöjer stämningar, förklarar, personifierar, förtydligar, 
snabba att...
• Lämpliga i galleri 
• Bättre översikt 
• Förminska och/eller beskär, huvudpoängen är att man ser vad 
det är 
Thumbnails
Färghantering 
• Gör inte sidan beroende av färgnavigering, tänk på färgblinda 
• Hög kontrast mellan förgrund och bakgrun...
Symboler 
• Kombinera symboler med text, används för att förtydliga 
• Använd symboler på ett konsekvent sätt 
• Symboler ...
• Har tre uppgifter 
Logotyp 
• Representerar webbplatsen 
• Ange avsändaren 
• Navigation till ingångssidan 
• Tänk på at...
Animationer 
• Var försiktiga med epilepsiframkallande blinkningar 
• Var försiktig med animationer överlag, stör lätt anv...
Multimedia 
• Använd för att tydliggöra, förklara och roa 
• Ge användaren valmöjligheten att starta och stoppa 
• Tillgän...
Enheter 
• Tänk på att webbplatsen kommer öppnas på olika enheter 
med olika förutsättningar 
• Skärm, tänk på bredden (ma...
Om vi har tid!
Den röda tråden 
• Ge ögat en startpunkt 
• Led vidare från det viktigaste till det mindre viktiga, skapa 
hierarki 
• Hål...
Den röda tråden 
• Vad var det för webbplats? 
• Vart tittade ni först? 
• Upptäckte ni information om högskoleprovet? 
• ...
Myt eller sanning 
• Fråga användaren så löser det sig 
• Ja men användarna lär sig 
• Vi som utvecklar webbplatsen vet re...
Sammanfattning 
• Vad är användbarhet? 
• Hur utvecklar ni en användbar webbplats? 
• Konkreta exempel? 
• Fyra dörrar?
Läshänvisningar 
• Kapitel 5 i HTML & CSS-boken; 109-144 
• Introduktion till CSS 
• Länkar: 
• http://www.anvandbart.se/a...
Användbarhet 1
Användbarhet 1
Användbarhet 1
Användbarhet 1
Användbarhet 1
Användbarhet 1
Användbarhet 1
Användbarhet 1
Upcoming SlideShare
Loading in …5
×

Användbarhet 1

577 views

Published on

Föreläsning om användbarhet i kurserna Webbpublicering och Webbproduktion på Medieteknik, Malmö Högskola.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Användbarhet 1

  1. 1. Användbarhet - konsten att bryta regler rätt
  2. 2. Jakob Nielsen www.nngroup.com
  3. 3. Dagens agenda • Vad är användbarhet? • Hur utvecklar ni en användbar webbplats? • Konkreta exempel? • Fyra dörrar?
  4. 4. En skala Viktigt Subjektivt Användbarhet / Usability Verktyg Kontrakt Ej hugget i sten
  5. 5. Vad är användbarhet? • ISO 9241 • Användbarhet = ändamålsenlighet X effektivitet X tillfredsställelse • Ändamålsenlighet = noggrannhet • Effektivitet = resursåtgång • Tillfredsställelse = frånvaro från obehag • Hänsyn ska tas till; uppgiften, sammanhang & användare Kronox
  6. 6. Vad är användbarhet? • Användbarhetsboken • Användbarhet = nytta X användarvänlighet • Skatteverket • Aftonbladet • Facebook • Ling Cars: http://www.lingcars.com
  7. 7. De fyra dörrarna tillgängligheten förtroende
  8. 8. Användarorienterad design • Samband mellan avsändare och besökare • Avsändare står gärna i fokus, ni ska skapa motvikt • Hur sätter man användaren i fokus? • Användarorienterad process • ISO 9241-210 • Bjud in användaren tidigt • Hela tiden användaren i fokus http://www.userfocus.co.uk/articles/iso-13407-is-dead.html
  9. 9. ISO 9241-210
  10. 10. 1. Vad ska göras? • Idé, syfte och målgrupp • Övergripande • Vision • Mätbara mål • Börja enkelt och utveckla allt eftersom
  11. 11. 2. Lär känna användaren? • Personer ur målgruppen • Metoder: Intervjuer, enkäter, fokusgrupper, iaktagelser m.m. • Bättre med ett fåtal användaråsikter än inga alls • Använd personas för att diskutera designaspekter • Användarens mål med att besöka webbplatsen • Underhållen, information, e-handel o.s.v. • Designa efter målgrupp
  12. 12. 3. Utforma webbplatsen • Användbarhet = nytta x användarvänlighet, nyttan är utredd • Sätt nyttan i praktiken genom användarvänlig design Enklare HTML funktioner
  13. 13. 4. Uppföljning • Test eller sluttest/lansering • Behåll den höga kvaliteten på hela webbplatsen • Förändra en färdig produkt är en kostsam historia • Språket är viktigt
  14. 14. Observationer Upplevelser Data $$$ ? ? $$$ Tid Färdig produkt Övergripande Detaljnivå
  15. 15. Vattenfallsmodellen • I kontrast till en agil projektmetod
  16. 16. Anvandbarhet.se • Ytterligare en process • Vägskäl för att stämma av med kunden & målgruppen
  17. 17. Användarens 9 frågor • Var är jag? Finns det jag söker här/kan det finnas här? • Hur tar jag mig dit jag vill? • Var har jag kommit? • Detta ser rätt bra ut men hur? • Är det sant kan jag lita på den här sidan? • Intressant finns det mer? • Hur tar jag mig tillbaka? • Hur är denna webbplats uppbyggd? • Hur hittar jag den artikeln som jag läste förra månaden?
  18. 18. Konkreta användbarhetsfaktorer
  19. 19. Webbprofil • En grafisk profil fast för webben • Tar hand om användaren • Anger webbplatsens avsändare • Besökaren har ett syfte, undvik onödiga dekorationer, var relevant • Funktionen styr formen (interaktionsdesign)
  20. 20. Textstorlekar • Text dominerar webben • Två behov: texten ska vara stor och texten ska vara överskådlig • Storleken anges oftast i px, % och em • Ge användaren möjlighet att ställa in textstorleken • Lägg fokus vid typografi istället för exakta sanningar
  21. 21. Typsnitt • Tryck och skärm skiljer sig • Måste typsnittet vara installerat på användarens dator? • Verdana och Georgia är de två vanligaste för löptext och specialutvecklade för visning på skärm • Typsnittet mindre betydelse vid stor text • Använd font-stack
  22. 22. Radavstånd • 120% är standardinställning i webbläsarna • 130% - 150% brukar passa bättre för löptext/brödtext • Bredare spalt kräver större radavstånd • Testa alltid den valda typsnittet på målgruppen
  23. 23. • Fri spaltbredd, spalten anpassar sig efter fönsterstorleken. • Låst spaltbredd, 50-70 tecken bred rekommenderas. Ingen avstavning på webben så spaltbredden blir i praktiken oftast mindre. • Spaltbredd i em gör så att antal tecken per spalt bibehålls om textstorleken förändras • Minimum och maxbredd på spalten • Centrerad och högerjusterad text är svårläst (ojämn vänsterkant) Spaltbredd
  24. 24. Rubriker • Kan göras som bilder eller som kod • Används för att sökoptimera sidan • Läsaren skannar innehållet, rubriker ger struktur • Innehållshanteringssystem, CMS, • Använd Google web-fonts
  25. 25. Bilder • En bild säger mer än tusen ord • Bilder förhöjer stämningar, förklarar, personifierar, förtydligar, snabba att tolka för användaren • Sidor blir tyngre med bilder • Använd bildtexter, ökar värdet på bilder • Bildtexter tillsammans med rubriker är de mest lästa texterna på nätet • Använd alt-texter och longdesc • Även title kan vara bra
  26. 26. • Lämpliga i galleri • Bättre översikt • Förminska och/eller beskär, huvudpoängen är att man ser vad det är Thumbnails
  27. 27. Färghantering • Gör inte sidan beroende av färgnavigering, tänk på färgblinda • Hög kontrast mellan förgrund och bakgrund • Kontrast på bilder • Färger skiljer sig mellan olika skärmar och enheter, även skillnader i photoshop och webbläsare förekommer • Tänk på att blå text associera till länkar • Vad är webbsäkra färger
  28. 28. Symboler • Kombinera symboler med text, används för att förtydliga • Använd symboler på ett konsekvent sätt • Symboler ska ”symbolisera” en funktion
  29. 29. • Har tre uppgifter Logotyp • Representerar webbplatsen • Ange avsändaren • Navigation till ingångssidan • Tänk på att göra olika versioner till webben gentemot tryck
  30. 30. Animationer • Var försiktiga med epilepsiframkallande blinkningar • Var försiktig med animationer överlag, stör lätt användaren • Använd inte animationer för att fånga uppmärksamhet
  31. 31. Multimedia • Använd för att tydliggöra, förklara och roa • Ge användaren valmöjligheten att starta och stoppa • Tillgängligheten kan vara begränsad • Använd ljud med försiktighet, irritationsmoment för många • Spela ljud endast en gång
  32. 32. Enheter • Tänk på att webbplatsen kommer öppnas på olika enheter med olika förutsättningar • Skärm, tänk på bredden (max 1000px) • Uppkoppling • Olika webbläsare • Explorer • Safari • Firefox • Chrome • Print, extern CSS för utskrift
  33. 33. Om vi har tid!
  34. 34. Den röda tråden • Ge ögat en startpunkt • Led vidare från det viktigaste till det mindre viktiga, skapa hierarki • Håll ihop det som hör ihop • Håll isär det som inte hör ihop • Var konsekventa
  35. 35. Den röda tråden • Vad var det för webbplats? • Vart tittade ni först? • Upptäckte ni information om högskoleprovet? • Upptäckte ni Hitta schema- och itslearning-länken? • Vill studera och är student?
  36. 36. Myt eller sanning • Fråga användaren så löser det sig • Ja men användarna lär sig • Vi som utvecklar webbplatsen vet redan alla fel, vi jobbar med det varje dag • Användbarheten ökar utvecklingskostnaderna och försenar projektet • Ha självförtroende men var lyhörda och öppna för förändring
  37. 37. Sammanfattning • Vad är användbarhet? • Hur utvecklar ni en användbar webbplats? • Konkreta exempel? • Fyra dörrar?
  38. 38. Läshänvisningar • Kapitel 5 i HTML & CSS-boken; 109-144 • Introduktion till CSS • Länkar: • http://www.anvandbart.se/ab/ • http://anvandbarhet.se/start • https://www.youtube.com/watch?v=sELOUAmFHjA • http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the- final-battle/ • http://www.n-solut.de/service/user-interface-design.php? lang=en

×