Användbarhet

Don´t make me think
Steve Krug
Martin Lindqvist
[email protected]
Användbarhet och tillgänglighetsbegreppet
[email protected]
Användbarhet
-förmåga hos en produkt att kunna användas för ett visst syfte eng. usability
Verkningsfullhet (Mål)
Effektivitet
Tillfredställdhet
Med användbarhet menas hur väl användaren kan använda en produkt
för att nå ett visst syfte på ett effektivt och tillfredsställande sätt.
- lätt att använda
- intuitivt och lätt att förstå
J f r Funktionalitet (bestämd uppgift för ett visst syfte)
[email protected]
Användbarhet i fokus på nätet
Produkten (webbplatsen) kan testas och förkastas direkt
T.ex. Jakob Nielsen www.useit.com/
Top ten mistakes in webdesign www.useit.com/alertbox/9605.html
(innehåller länkar till fler tio-i-topp-listor)
och Steve Krug www.sensible.com/
[email protected]
Tillgänglighet
Förutsättningen för att en webbplats ska vara tillgänglig för alla är att den är
tekniskt uppbyggd på rätt sätt.
Funktionshinder
Syn
Hörsel
Fysiska
Kognitiva, neurologiska
Oberoende av vilken teknik användaren vill använda.
Kan en sida vara helt tillgänglig?
[email protected]
Tillgänglighet i fokus på nätet
Web Accessibility Initiative (WAI) www.w3.org/WAI/
Web Accessibility Initiative - web för alla (svensk sammanfattning)
www.w3.org/WAI/gettingstarted/Overview.html.se
HANDISAM – 24timmarswebben
http://www.handisam.se
Språknämndens Webb för alla www.webbforalla.se
[email protected]
Förutsättningar
Webben, ett ungt medium
[email protected]
Olika medier – olika förutsättningar
Skärmens och tidningens olika egenskaper
• Bejaka likheterna OCH skillnaderna hos respektive medium,
överför inte bara det ena mediet till det andra
Fasta gränser eller oändlighet
• Fasta sidor är överblickbara och fasta i sin layout – så inte
på webben (www.dn.se)
Navigeringen ställer krav på designen
• I tryckta medier har vi en klar uppfattning om hur vi tar oss
fram och tillbaka i ett material – på webben kan vi flytta oss
runt i informationen. Navigeringen styr alltmer hur vi
upplever en site.
Nytt eller gammalt, anpassat till mediet?
[email protected]
Olika medier – olika förutsättningar
Tekniska begränsningar styr mer
• Trycksaker är överlägsna webben vad gäller
upplösning, överblick osv. Men webben närmar
sig och har dessutom andra egenskaper som inte
trycksaker har.
Interaktiviteten är webbens styrka
• Webbmediet tillåter användaren att göra saker –
egna inställningar, egna vägar till fördjupning,
kontakt och dialog med den som producerat
informationen osv. (www.svd.se)
[email protected]
Användaranpassning
Vem ska använda vår produkt?
[email protected]
Användaren
Målgrupp
• Vi gör antaganden vad gäller de förutsättningar
vår målgrupp har. T.ex vilken ”teknik” de
använder, tidigare erfarenheter, deras syfte med
att besöka vår sida…
Vårt mål
• Att de ska få sina behov tillfredsställda
(i allafall så många som möjligt)
[email protected]
Målgrupp - människa
Trygghet
• Don´t make me think. Vi vill inte att användaren
lägger ner energi på fel saker. Presentera ert
material på ett sätt som användaren finner logiskt.
Distraktioner
• Undvik material som tar uppmärksamhet från det
ni vill kommunicera. T.ex. onödiga animationer
[email protected]
3 Facts of life
Steve Krug / The usability expert
[email protected]
Fact of life #1
Vi läser inte sidor. Vi scannar dem.
• Vi har oftast bråttom.
• Vi vet att vi inte behöver läsa allt på sidan.
• Vi är duktiga på att göra detta
[email protected]
Fact of life #2
Vi gör inte optimala val
• Vi har oftast bråttom.
• Straffet vid felval är lågt
• Att gissa är roligare
[email protected]
Fact of life #3
Vi tar inte reda på hur saker egentligen fungerar.
Vi provar oss fram.
• Det är inte viktigt för oss
• Om vi hittar något som fungerar så
håller vi oss till det
[email protected]
Navigationen
Hur man tar igen ett par hundra års försprång…
[email protected]
Navigation - bakgrund
Varför behöver vi tänka på
navigationen?
• Omfattningen – vad/hur mycket döljer
sig på en site?
• Platsen – hur relaterar vi till websiter?
Ett stöd för besökarens vistelse
• I jämförelse med t.ex. tryckta medier
saknar webben en del egenskaper
som ger oss trygghet och kunskap
[email protected]
Navigation - bakgrund
Berättar för besökaren vad som finns på
siten
Förklarar användandet av siten
• Användaren skall ju egentligen inte behöva
bry sig om vad som skall klickas på först eller
om något är en länk eller inte...
Säger en hel del om avsändaren!
• En sladdrig website som är dåligt uppdaterad,
som har döda länkar, är svår att förstå är
förödande för varumärket
[email protected]
Navigation – i praktiken
Varje enskild sida skall kunna svara på:
•
Vad är det här för sajt?
•
Vilken sida är jag på?
•
Vilka sektioner erbjuder sajten?
•
Vad har jag för alternativ på denna sida?
•
Vart i helheten befinner jag mig?
•
Hur söker jag?
[email protected]
Navigation – i praktiken
Konventioner är ett bra hjälpmedel
• SiteID – avsändaren, vem är det?
• Huvudavdelningar – vilka är de huvudsakliga
avdelningarna på siten?
• Underavdelningar – submenyer för respektive
avdelning, beroende på relevans och mängd
• Markera I menyn vad som är valt, t.ex med
färg.
Konsekvent navigation
• Samma grundnavigation genom HELA siten
[email protected]
Navigation – i praktiken
Vad döljer sig bakom länken?
• Pop-up? Word? PDF? Ny site? 1,3 Mb bild? Var tydlig!
Vilka länkar är viktiga?
• Alla länkar är inte lika viktiga. Rangordna!
Länka alltid hem!
• Loggan som länk
• Komplettera med “vanlig” länk
Hur hittar jag tillbaka?
• Alla kommer inte från index-sidan
• Brödsmulor – “Du är här”, den här vägen har du gått
[email protected]
Navigation – i praktiken
Du är här!
• Markera i navigationen var användaren är
Varje sida bör ha ett namn
• Sidan användaren kommer till efter klick bör ha
samband med det användaren just klickat på
Glöm inte <title>
• Om användaren vill bokmärka sidan…
[email protected]
Innehållet
Påverkas givetvis också av mediet
[email protected]
Teknik som vi bör ta hänsyn till
Vilken teknik och inställningar har användaren?
• Vid problem kommer de att uppfatta att något är fel med sidan ni gjort.
Vilken uppkoppling har de?
• Modem, ISDN eller bredband?
Upplösning och antal färger på skärm?
• Ok att de med låg upplösning får scrolla?
[email protected]
Teknik som vi bör ta hänsyn till
Vilka webbläsare?
• Måste det se exakt likadant ut i alla?
Vilket OS (operativsystem)?
• PC…Mac och andra?
[email protected]
Textens utformning
Skriv enkelt
• news.bbc.co.uk
Använd nya stycken istället för radbryt och indrag
• news.bbc.co.uk
Dela upp långa sidor i delar istället för att scrolla.
Eller?
• Dela upp i delsidor:
http://www.webmonkey.com
[email protected]
Textens utformning
Tänk på utskriftsmöjligheterna
• Gör en printervänlig version av texten om det
så krävs
Hjälp vid långa texter
• Ibland måste texten bli lång men hjälp då till
med extra navigering.
[email protected]
Bilder på webben
Storleken
• Fysisk storlek (pixlar)
• Datamängd (bytes)
Kvaliteten
• Upplösning (72/96 dpi)
• Komprimenringsform
Färgerna
• Indexerad palett (256 färger)
• True Colors (tusentals färger)
• Glöm webbpaletten!
[email protected]
Bilder på webben
Komprimeringen
• JPG (foton)
• GIF (grafik)
• PNG (bra, men kolla webbläsarna!)
Utskriften
• Styrs av användarens utrustning
• Blir aldrig bättre än upplösningen (tips: länka
till högupplöst bild)
Tänk på de med synsvårigheter!
• Även synskadade surfar (inte bara blinda!)
• ALT-attributet viktigt
[email protected]
Tillgänglighet för alla
Tydliggör icke-text-innehåll
• Grafik ska ha ALT-attribut
• Navigationsgrafik bör ha en textversion
Använd stylesheets för layout
• Många synskadade har egna stylesheets
Var försiktig med färger, arbeta med kontraster
• Tänk på synskadade och färgblinda
• Mer info: www.w3.org/WAI
[email protected]
Visuell design för webb
Det sista steget i vår designprocess – detaljarbetet
[email protected]
Skissa
Det absolut viktigaste vid design av alla dess slag:
SKISSA MYCKET OCH OFTA!
[email protected]
Sidlayout
Tänk på ytan
• Större än 800x600 pixler? Eeeh...
• Kolla med målgruppen
Var konsekvent
• Bestäm dig för ett upplägg och avvik inte för mycket
• Ställer krav på förarbete och planering – skissa mycket!
Håll nere bruset – less is more
• Webben är ett knepigt medium – gör det inte svårare än nödvändigt
• Försök att hålla informationen till det viktigaste och undvik konflikter
om besökarens uppmärksamhet
[email protected]
Sidlayout
Arbeta med tydliga visuella hierarkier
• Störst först
• Uppifrån och ner – ingen scrollar
frivilligt…
• Från vänster till höger – i väst!
Grupperingar och likheter
Tydliga avgränsningar mellan ytor
• Tänk på kontrasterna.
[email protected]
Sidlayout
Arbeta med tydliga visuella hierarkier
[email protected]
Sidlayout
Exempel på kontraster
[email protected]
Metaforer
Objektsmetaforer
• Skrivbord (datorns skrivbord)
• Mappar
• Produkter
Processmetaforer
• Rutor
• Tidslinjer (t.ex. film och teater)
Beteendemetaforer
• Knappar
• Klicka
• Dra
• Peka
[email protected]
Färger
Färger grupperar
• Använd gärna för att förstärka navigation
• Förlita dig inte på att det räcker med enbart färg
dock…
Färger får saker att stå ut
• Ställ färger emot varandra
Olika nyanser/färger kommunicerar olika
saker
• Färg har innebörd som kan spelas på
Var sansad när du väljer färger
• Skrik inte för att göra dig hörd. Ofta behövs inte
stora färgskillnader för att åstadkomma skillnader i
hur din information uppfattas...
[email protected]
Ikoner
Var försiktiga och fråga användarna om hur saker och ting
uppfattas! Tänk på kulturella skillnader
Efterliknande ikoner
• Ikoner som speglar en direkt verklighet
Exempelikoner
• Ikoner med en mer indirekt koppling
Symboliska ikoner
• Visar en mer abstrakt följdeffekt av något
Egendesignade ikoner
• Personliga och svårttolkade om man inte delar kontexten
[email protected]
Typografi
Typsnitt för tryck inte alltid lika bra för webb
• Trycksak: 1200 dpi, webb: 72-96 dpi…
• Vissa typsnitt fungerar ok – t.ex. Times och Helvetica/Arial
• Standard för text på webb: Georgia och Verdana
Enormt beroende av användarens utrustning
• Typsnitten måste finnas installerade på läsarens
dator!
• Vid speciallösningar: gör texten som bilder (OBS:
grafik “väger” mer än text)
[email protected]
Typografi
Olika system och webbläsare visar samma typsnitt olika…
[email protected]
Typografi
Storleken – det STORA problemet
• Samma storlek kan se helt annorlunda ut för
två användare
Ange helst i em inte i punkter eller pixlar
• em är ett relativt mått som tar hänsyn till varje
användares egna browserinställningar
• punkter är kvarlevor från tryck där layouten är
fix, men är mycket osäkra mått på webben
som ju är mycket mer dynamisk och osäker
• px är en kompromiss: texten blir lika stor
oavsett upplösning, men den utesluter de
som vill speca storleken själva (t.ex.
synskadade)
[email protected]
Typografi
Antikvor…
• Mjuka bokstavsformer, stora skillnader i
streckens tjocklek, har “fötter” (serifer)
• Georgia, Times, serif
• Oftast i längre textstycken (s.k. brödtext)
…eller linjärer?
• Raka bokstavsformer, utan “fötter” (serifer)
• Verdana, Helvetica, Arial, san-serif
• Ofta i rubriker eller kortare textstycken
[email protected]
Typografi
Radlängd
• Undvik rader längre eller kortare än 55-70 tecken
• Svårt att styra – använd div/tabellerför någorlunda
kontroll
Radhöjd
• Lättare att styra än radlängden – koda i % så blir
den relativa effekten oberoende av textstorleken
• Olika typsnitt kräver olika radhöjder – testa!
• För tätt är inte bra. Inte för glest heller! Avväg
utifrån den ungefärliga radlängden för en bra
kompromiss
[email protected]
Typografi
VERSAL eller gemen text?
• Vi läser inte varje individuell bokstav utan ordbilder
• VERSALA ord används i undantagsfall, t.ex. i
rubriker
Justerad text
• Den jämna vänsterkanten är ett stöd för ögat
• Vänsterjustering vid längre texter
• Centrerad text i rubriker eller kortare textstycken
• Högerjustering mycket sällan
[email protected]
Typografi
[email protected]
Slutligen
Bygg en grundmall för din webbplats där du:
• Skapar den struktur du vill uppnå, testar det innehåll som kommer att finnas
och layoutar hela paketet med hjälp av stylesheets. Kom ihåg, xhtml
markerar upp informationen, css ”designar” den.
•
Validerat xhtml grunden
•
Validerat css grunden
•
Testat i aktuella webbläsare
•
När detta är gjort och fungerar bra så har du kommit mycket långt i arbetet
med din webbplats och kan enkelt göra kopior som blir dina andra sidor i
webbplatsen.
[email protected]
Testa på användare
Vägen till framgång
[email protected]
Fråga dig
Målgrupp
• Vilka tillhör webbplatsens målgrupp?
• Vilka verktyg (dator, skärm, tillbehör) kan den typiske användaren tänkas
ha?
[email protected]
Fråga dig
Målgrupp
• Hur finner du webbplatsen(söka, url, gissa)
•
Ges du en tydlig bild av vad du kan göra på webbplatsen
•
Kan du orientera dig på webbplatsen
•
Kan du uppfylla ditt mål?
•
Kan du göra det effektivt?
•
Är du nöjd och belåten med resultatet?
[email protected]
Fråga dig
Målgrupp
• Hur finner du webbplatsen(söka, url, gissa)?
•
Ges du en tydlig bild av vad du kan göra på webbplatsen?
•
Kan du orientera dig på webbplatsen?
•
Kan du uppfylla ditt mål?
•
Kan du göra det effektivt?
•
Är du nöjd och belåten med resultatet?
[email protected]
Fråga dig
Design
• Är designen konsekvent?
•
Återkommer logotyp, är det en väg hem?
•
Hoppar sidorna?
•
Fungerar textstolek, färg, bakgrunden i kombination med varandra?
[email protected]
Fråga dig
Navigation
• Hur har de valt att presentera informationen? Ges flera vägar att nå
informationen (exempelvis tematisk struktur – ”allt om släpvagnen här”,
målgruppsanpassad struktur – pensionär klicka här”)? Vilka är dessa grepp
och varför har man gjort på detta sätt?
•
Går det snabbt och enkelt att navigera på sidan? Får du som användare en
känsla av översikt? Är modellen nedan applicerbar på er webbplats?
[email protected]
Fråga dig
Navigation
• Vilken slags hjälp får du i form av guider och tips? Fungerar dessa?
•
Är navigationen konsekvent, intuitiv?
•
Vet jag vart jag är i navigationen?
•
Kan jag enkelt ta mig till ingångssidan?
•
Finns sitemap eller index?
[email protected]
Fråga dig
Bilder/Grafik
• Hur tunga är bilderna? Högerklicka och kolla!
•
Tillför bilderna som finns något?
•
Har de alternativa texter?
•
Finns animeringar, kan de stängas av?
[email protected]
Fråga dig
Innehåll
• Är informationen daterad?
•
Nämns avsändare till texter och bilder?
•
Är det enkelt att skriva ut informationen på sidan? (Finns anpassning för
utskrift?)
•
Finns sökfunktion, fungerar den?
•
När uppdaterades sidan senast?
•
Finns kontaktuppgifter till avsändaren lätt tillgängligt?
[email protected]
Slutligen
Validera
• Följer sidan den standard den som anges i DOCTYPE? Testa att validera
den.
Använd sunt förnuft
• Ert eget
• Och hos de som testar er produktion
[email protected]