Användbarhet 2- Att hitta rätt -

Dagens föreläsning

• 24-timmarswebben / Webbriktlinjer!

• Vad menas med informationsdesign?!

• Varför ska tillämpa detta?!

• Hur gör vi?!

• Struktur och navigation

Riktlinjer

• 24-timmarswebben!

• Uppdateras inte längre!

• E-delegationen!

• Har tagit över arbetet med 24-timmarswebben!

• För webbsidor gäller webbriktlinjer.se

http://www.edelegationen.se/http://www.webbriktlinjer.se/

Hur hittar ni ?

• Vi vet att användaren INTE ser allt, tänk på att diskutera vad som ska synas och inte synas!

• Vi vet att användaren INTE genomsöker hela sidan och skaffar sig således ingen överblick över informationen

Hur hittar användaren?

• Komplext; användare har olika metoder och skiftar mellan dessa!

• Förstagångsbesökare - slumpen !

• Associerar till tidigare upplevelser!

• Letar efter intressanta objekt. Som antingen faller besökaren i smaken eller svarar på användarens syfte, därför är det väldigt viktigt med målgrupp!

• Hittar besökaren inte något intressant....3....2....1...... kommer hon att leta sig vidare till första bästa konkurrent

Generella riktlinjer

• Prioritera innehåll, allt kan inte få plats!

• Viktig att diskutera med kund/avsändare!

• Allt eftersom skapar besökarna en mental bild över webbplatsen!

• Skilj på förstagångsbesökare och andragångsbesökare!

• Begränsa antalet val/knappar i den globala menyn

Informationsdesign?

• Hur ni designar informationen, text och bilder!

• Kategorisera innehåll!

• Skapa mönster för användaren att följa!

• Skapa struktur som möjliggöra att användaren kan överblicka innehållet!

• Övergripande nivå ner i detalj!

• Kan kallas för informationsarkitektur

Vad är?

Informationsdesign?

• Webben är ung och relativt organiserad!

• Inga begränsningar i form och struktur, i kontrast till en bok eller tidning!

• Alla är sin egen designer!

• Kunden vet alltid bäst!

• Underlätta för användaren för annars....3...2...1...Gone!!

• Webben börjar bli äldre och allt mer standardiserad

Varför?

Kortsortering

Hur?

Kortsortering

1. Intressenter diskuterar innehåll och funktion, vad ska webbplatsen innefatta?!

2. Be målgruppen sortera innehåll och funktion !

3. Avgränsa!

4. Skapa kluster

http://www.optimalworkshop.com/optimalsort.htm

Topologi

Nät-Topologi• Nät-topologi: Alla sidor

länkar till alla, är kraftfullt men vid större webbplatser är det väldigt svårt att skapa översikt!

• Fungerar bara vid mindre produktioner

Träd-Topologi• Träd-topologi: Ser ut som ett

upp och nervänt träd där det finns undersidor för att skapa struktur, kräver fler klick!

• Större sidor!

• Brett träd gentemot djupt träd

Bok-Topologi

• Bok-topologi: Linjärt rörelsemönster!

• Styr användaren genom sidan!

• Dynamisk bok-topologi eller strikt bok-topologi!

• Oftast en kombination av flera olika topologier!

• Till exempel en webbplats med en webbshop

Navigation

• Leda användaren till det hon söker, utan omvägar!

• Visa hur webbplatsen är uppbyggd!

• En logisk hemsida är en mer användbar webbplats!

• Finns det någon anledning att försvåra navigationen?!

• Tänk på syftet, informera är inte samma som uppleva!

• Avsändare VS besökare

Menyer

• Webbplatser har flera typer av menyer och sätt att navigera!

• Varför finns det flera olika sätt att navigera? borde inte det förvirra mer än tydliggöra?!

• Strukturen och menyn byggs utifrån någon form av modell eller tema!

• Varje meny bör ha ett tema!

• Desto mer innehåll desto viktigare är temat

Global meny?

• Den övergripande indelningen, kategorierna över innehållet!

• Läggs traditionellt överst i mitten eller till vänster under logotypen!

• Är oftast högt prioriterad och bör påvisa webbplatsens struktur

Undermeny?

• Sekundär meny som tar vid där den globala menyn slutar!

• Kan byggas på med en tredje, fast bara om det är absolut nödvändigt

Hjälpmeny?

• Funktionsstyrd meny där till exempel språk och översiktskarta brukar finnas!

• Läggs traditionellt längst upp till höger

Snabblänkar?

• Funktionsstyrd meny där till exempel språk och översiktskarta brukar finnas!

• Hjälper fleragångsbesökare att snabbare navigera sig till sitt mål!

• Läggs traditionellt längst ner i footern på sidan

Länkar

• Tydlig länktext är A och O, beskriv landningsplatsen!

• Länken bör kunna läsas fristående, vi letar efter understrukna ord!

• Använd inte understrykning på mer än länkar!

• Använd målets rubrik som länktext, tydlig koppling mellan länkande sidor!

• Använd attributet title för att ge mer information till användaren

Läs mer i dokumentet Kursinformation (25mb)Läs mer här

Länkar

• Om länken inte leder till en webbsida så bör detta påvisas på något sätt, till exempel genom en ikon !

• Ge även information om filstorlek, vid nedladdning!

• Var återhållsam med uppmaningar; KLICKA HÄR, KLICKA NU!

• Pekaren bör reagera när den förs över länken!

• Gör inte den klickbar ytan för liten!

• I menyer bör hela knappen vara klickbar och inte bara texten!

• Rensa brutna länkar!

• Det ska alltid finnas en EXIT-väg till förstasidan genom!

• Logotyp OCH hem-knapp i menyn

Tema: Temalöst

• Framförallt mindre webbplatser!

• Förhållandevis vanligt men ofta resultatet av en ogenomtänkt design!

• Om antalet ”knappar” eller ”länkar” överskrider fem bör man försöka hitta ett annat tema

http://www.kalmar.se/Demokrati/

Tema: Association

• Ett väldigt vanligt och grundläggande tema, kategorisera !

• Sorterar innehåll efter saker som hör ihop!

• T.ex. kartan hänger samman med mailformuläret; således en egen kategori som vi kallar kontakt!

• Globala menyer är vanligtvis indelad via associationer

http://malmo.se/

Tema: Bibliotek

• Fungerar bra i system för e-handel!

• Kategorier som delar in varje element!

• Bokstavsordning!

• Större omfång än en global associations-sortering!

• Dubbelpublicering när innehåll tillhör flera kategorier!

• Tidskrävande!

• Välj ett huvudområde för hela biblioteket

http://www.bokus.com

Tema: Målgrupp

• Innehållet delas upp efter besökare!

• Inte för många alternativ!

• Tydliga gränser, besökaren måste snabbt förstå vilken knapp hon tillhör!

• Fungerar bra som ingång till förstasidan!

• Skriv förklarande text om det finns utrymme

Tema: Uppgift/Mål

• Ordna innehåll efter användarens uppgift!

• Kraftfull metod men krånglig; användare har nästan alltid ett mål om detta kan adresseras direkt i menyn blir det logiskt!

• Många länkar försvårar; även krångliga benämningar!

• Användbart vid många blanketter eller frågeformulär!

• Kombineras nästan alltid med andra typer av navigation

Sökning

• Vanligare och vanligare -> större och större webbplatser!

• Ett problem är att sökverktyget fungerar olika beroende på webbplats!

• Detta medför att vi inte kan skapa en övergripande förståelse över sökord!

• Svårt med synonymer (brand VS eldsvåda) och böjningar!

• Tidigare forskning visar också på att det ta längre tid att hitta innehåll genom sökfunktionen, (kanske inte idag)!

• Stavningskontroll!

• Möjlighet att se resultat medan man skriver (Ajax)

Webbläsarens navigation

• Bakåtknappen bör alltid fungera förutom vid:!

• Till exempel när användaren har loggat ut från ett system!

• Vid köp av produkt i e-handelsystem!

• För att återsända formulär!

• Vanligt beteende hos användarna!

• Förändra inte sidorna på tillbaka vägen, det blir förvirrande för användarna!

• I 24-timmarswebben måste alltid bakåtknappen fungera

1. Vad ska webbplatsen innehålla?!

2. Para ihop information/funktion gör en kortsortering!

3. Prioritera och avgränsa!

4. Diskutera topologier och bestäm koncept!

5. Rita sitemap!

6. Testa navigation och menyer!

7. Skissa på alternativ

Processen

} Innehåll

} Struktur

} Design

5 minuter

http://www.mah.se

http://www.lu.se

Bornholm

• Lägg gärna tid på att profilera er webbyrå!

• Koncept efter uppdrag, fritt att tolka!

• Gemensam teknisk inlämning och en individuell reflektion!

• Komplett produktion utifrån vad ni har lärt er!

• Simulera funktioner och databaser!

• Ren HTML eller CMS!

• Bildbank!

• Ni får använda egna bilder eller från nätet, ska vara fria att använda

Verktyg

• http://www.clicktale.com/!

• http://www.crazyegg.com/!

• http://met.picnet.com.au/!

• http://www.labsmedia.com/

Sammanfattning

• Varför är det viktigt att tänka på hur navigationen fungerar?!

• Vad är skillnaden på bok-topologi gentemot nät-topologi?!

• Var brukar man kunna hitta sökrutan i en traditionell design?!

• Vad är en site-map och vad kan den vara bra till?

Läshänvisningar: Div, Float och Clear