ݺߣ

ݺߣShare a Scribd company logo

Användbarhet 1

•
•
Johannes Karlsson
Johannes Karlsson

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

1 of 46
Downloaded 10 times
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ålsenlighet = noggrannhet • Effektivitet = resursåtgång • Tillfredsställelse = frånvaro från obehag • Hänsyn ska tas till; uppgiften, sammanhang & användare Kronox
Vad är användbarhet? • Användbarhetsboken • Användbarhet = nytta X användarvänlighet • Skatteverket • Aftonbladet • Facebook • Ling Cars: http://www.lingcars.com
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 • 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
Användbarhet 1
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 eftersom
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
Användbarhet 1
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
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
Användbarhet 1
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 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?
Konkreta användbarhetsfaktorer
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)
Användbarhet 1
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
Användbarhet 1
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
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
Användbarhet 1
• 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
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
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
• 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 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
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
• 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
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
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
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
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åll ihop det som hör ihop • Håll isär det som inte hör ihop • Var konsekventa
Användbarhet 1
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?
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
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/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
Användbarhet 1

More Related Content

Användbarhet 1

  • 1. Användbarhet - konsten att bryta regler rätt
  • 3. Dagens agenda • Vad är användbarhet? • Hur utvecklar ni en användbar webbplats? • Konkreta exempel? • Fyra dörrar?
  • 4. En skala Viktigt Subjektivt Användbarhet / Usability Verktyg Kontrakt Ej hugget i sten
  • 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. Vad är användbarhet? • Användbarhetsboken • Användbarhet = nytta X användarvänlighet • Skatteverket • Aftonbladet • Facebook • Ling Cars: http://www.lingcars.com
  • 7. De fyra dörrarna tillgängligheten förtroende
  • 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
  • 11. 1. Vad ska göras? • Idé, syfte och målgrupp • Övergripande • Vision • Mätbara mål • Börja enkelt och utveckla allt eftersom
  • 12. 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
  • 14. 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
  • 15. 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
  • 17. Observationer Upplevelser Data $$$ ? ? $$$ Tid Färdig produkt Övergripande Detaljnivå
  • 18. Vattenfallsmodellen • I kontrast till en agil projektmetod
  • 19. Anvandbarhet.se • Ytterligare en process • Vägskäl för att stämma av med kunden & målgruppen
  • 20. 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?
  • 22. 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)
  • 24. 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
  • 26. 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
  • 27. 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
  • 29. • 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
  • 30. 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
  • 31. 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
  • 32. • Lämpliga i galleri • Bättre översikt • Förminska och/eller beskär, huvudpoängen är att man ser vad det är Thumbnails
  • 33. 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
  • 34. 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
  • 35. • 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
  • 36. 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
  • 37. 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
  • 38. 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
  • 39. Om vi har tid!
  • 40. 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
  • 42. 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?
  • 43. 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
  • 44. Sammanfattning • Vad är användbarhet? • Hur utvecklar ni en användbar webbplats? • Konkreta exempel? • Fyra dörrar?
  • 45. 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