Användbarhet 1
-
Upload
johannes-karlsson -
Category
Education
-
view
258 -
download
0
description
Transcript of Användbarhet 1
![Page 1: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/1.jpg)
Användbarhet - konsten att bryta regler rätt
![Page 3: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/3.jpg)
Dagens agenda
• Vad är användbarhet? • Hur utvecklar ni en användbar webbplats? • Konkreta exempel? • Fyra dörrar?
![Page 4: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/4.jpg)
Användbarhet / Usability
En skala
Viktigt
Verktyg
Kontrakt
Ej hugget i sten
Subjektivt
![Page 5: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/5.jpg)
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
![Page 6: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/6.jpg)
Vad är användbarhet?
• Användbarhetsboken • Användbarhet = nytta X användarvänlighet
• Skatteverket • Aftonbladet • Facebook
• Ling Cars: http://www.lingcars.com
![Page 7: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/7.jpg)
De fyra dörrarna
tillgängligheten förtroende
![Page 8: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/8.jpg)
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
![Page 9: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/9.jpg)
![Page 10: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/10.jpg)
ISO 9241-210
![Page 11: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/11.jpg)
1. Vad ska göras?
• Idé, syfte och målgrupp • Övergripande
• Vision • Mätbara mål
• Börja enkelt och utveckla allt eftersom
![Page 12: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/12.jpg)
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
![Page 13: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/13.jpg)
![Page 14: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/14.jpg)
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
![Page 15: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/15.jpg)
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
![Page 16: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/16.jpg)
![Page 17: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/17.jpg)
ObservationerUpplevelser
Data
?
?$$$
$$$
Tid
Färdig produkt
Övergripande
Detaljnivå
![Page 18: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/18.jpg)
• I kontrast till en agil projektmetod
Vattenfallsmodellen
![Page 19: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/19.jpg)
• Ytterligare en process • Vägskäl för att stämma av med kunden & målgruppen
Anvandbarhet.se
![Page 20: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/20.jpg)
• 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?
Användarens 9 frågor
![Page 21: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/21.jpg)
Konkreta användbarhetsfaktorer
![Page 22: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/22.jpg)
• 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)
Webbprofil
![Page 23: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/23.jpg)
![Page 24: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/24.jpg)
• 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
Textstorlekar
![Page 26: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/26.jpg)
• 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
Typsnitt
![Page 27: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/27.jpg)
• 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
Radavstånd
![Page 28: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/28.jpg)
![Page 29: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/29.jpg)
• 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
![Page 30: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/30.jpg)
• 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
Rubriker
![Page 31: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/31.jpg)
• 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
Bilder
![Page 32: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/32.jpg)
• Lämpliga i galleri • Bättre översikt • Förminska och/eller beskär, huvudpoängen är att man ser vad
det är
Thumbnails
![Page 33: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/33.jpg)
• 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
Färghantering
![Page 34: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/34.jpg)
• Kombinera symboler med text, används för att förtydliga • Använd symboler på ett konsekvent sätt • Symboler ska ”symbolisera” en funktion
Symboler
![Page 35: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/35.jpg)
• Har tre uppgifter • Representerar webbplatsen • Ange avsändaren • Navigation till ingångssidan
• Tänk på att göra olika versioner till webben gentemot tryck
Logotyp
![Page 36: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/36.jpg)
• 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
Animationer
![Page 37: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/37.jpg)
• 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
Multimedia
![Page 38: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/38.jpg)
• 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
Enheter
![Page 39: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/39.jpg)
Om vi har tid!
![Page 40: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/40.jpg)
• 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
Den röda tråden
![Page 41: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/41.jpg)
![Page 42: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/42.jpg)
• 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?
Den röda tråden
![Page 43: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/43.jpg)
• 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
Myt eller sanning
![Page 44: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/44.jpg)
Sammanfattning
• Vad är användbarhet? • Hur utvecklar ni en användbar webbplats? • Konkreta exempel? • Fyra dörrar?
![Page 45: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/45.jpg)
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
![Page 46: Användbarhet 1](https://reader035.fdocument.pub/reader035/viewer/2022081404/558a68a8d8b42a220a8b45b5/html5/thumbnails/46.jpg)