Don t make me think Steve Krug Martin Lindqvist
Användbarhet och tillgänglighetsbegreppet
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)
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/
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?
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
Förutsättningar Webben, ett ungt medium
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?
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)
Användaranpassning Vem ska använda vår produkt?
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)
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
3 Facts of life Steve Krug / The usability expert
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
Vi gör inte optimala val Vi har oftast bråttom. Straffet vid felval är lågt Att gissa är roligare Fact of life #2
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
Navigationen Hur man tar igen ett par hundra års försprång
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
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
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?
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
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
Du är här! Navigation i praktiken 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
Innehållet Påverkas givetvis också av mediet
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?
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?
Skriv enkelt news.bbc.co.uk Textens utformning 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
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.
Storleken Fysisk storlek (pixlar) Datamängd (bytes) Bilder på webben Kvaliteten Upplösning (72/96 dpi) Komprimenringsform Färgerna Indexerad palett (256 färger) True Colors (tusentals färger) Glöm webbpaletten!
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
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
Visuell design för webb Det sista steget i vår designprocess detaljarbetet
Skissa Det absolut viktigaste vid design av alla dess slag: SKISSA MYCKET OCH OFTA!
Tänk på ytan Större än 800x600 pixler? Eeeh... Kolla med målgruppen Sidlayout 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
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. Sidlayout
Arbeta med tydliga visuella hierarkier Sidlayout
Sidlayout Exempel på kontraster
Objektsmetaforer Skrivbord (datorns skrivbord) Mappar Produkter Processmetaforer Rutor Tidslinjer (t.ex. film och teater) Beteendemetaforer Knappar Klicka Dra Peka Metaforer
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...
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
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)
Typografi Olika system och webbläsare visar samma typsnitt olika
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)
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
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
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
Typografi
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.
Testa på användare Vägen till framgång
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?
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?
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?
Design Är designen konsekvent? Fråga dig Återkommer logotyp, är det en väg hem? Hoppar sidorna? Fungerar textstolek, färg, bakgrunden i kombination med varandra?
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?
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?
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?
Innehåll Är informationen daterad? Fråga dig 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?
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