Gränssnittsdesign · område 4

Guide – Användare och informationsarkitektur

Här står det du behöver för uppgiften, och guiden fungerar utan att du varit på lektionen. Slå upp i den när du fastnar.

1. Målgrupp och typanvändare

Målgruppen är gruppen. Typanvändaren är en person ur den. Du börjar med gruppen och går sedan in på en person, för det är lättare att fatta beslut om en person än om ett genomsnitt.

Målgruppen i tre frågor

Den tredje frågan är den som glöms och den som styr mest. Samma person på perrongen och i soffan behöver två olika sajter.

Det som inte hör hemma i en målgruppsbeskrivning är allt som inte förändrar något du ritar. Att någon gillar katter är ointressant om sajten inte handlar om katter.

Typanvändarens fyra delar

• Namn och en bild av en situation. Inte för att personen är verklig, utan för att en namngiven person går att resonera om. Skulle Karim hitta det här? är en fråga du kan svara på. Skulle användaren? är det inte.
• Mål. Vad hen vill ha gjort. Ett mål, inte tre.
• Situation. Var, när, med vilken enhet, under vilken press.
• Hinder. Vad som gör det svårt. Den här delen ger mest och skrivs minst.

Testet: ta bort en rad ur beskrivningen. Ändras något i vad du skulle bygga? Om inte var raden utfyllnad.

Kravet är två typanvändare, och de ska vara olika. Två personer med samma mål i samma situation är en person skriven två gånger — låt dem skilja sig på situation eller hinder, inte bara på ålder.

Scenariot

Typanvändaren är vem. Scenariot är ett besök: vad hen gör, i ordning, från att hen kommer till sajten till att hen är klar eller ger upp. Fem till åtta meningar räcker.

Scenariot är utgångspunkten för användarresan i avsnitt 5, så skriv det ordentligt.

2. Undersökningsverktyg

Fyra verktyg, och de duger till olika saker. I det här området genomför du en intervju — de andra tre ska du kunna beskriva och veta när de passar.

Konkurrensanalysen är redan gjord. Det är analysen av två liknande gränssnitt från uppgift 3. Hänvisa till den — gör den inte om.

Varför man inte bara frågar

Folk är dåliga vittnen till sitt eget beteende. Inte för att de ljuger, utan för att man inte minns vad man gjorde — man minns vad man menade att göra.

• Alla säger att de läser villkoren. Ingen gör det.
• Folk säger att de vill ha fler valmöjligheter. De väljer sämre när de får fler.
• Frågar du om någon vill ha en funktion säger de ja. Det är gratis att säga ja.

Att hålla intervjun

1. Spela inte in. Anteckna. Inspelning kräver samtycke och hantering av persondata, och det behövs inte för fem frågor.
2. Anonymisera direkt. Person A, 17 år, använder sajten för att … Inga namn, inga bilder. Det är ett tekniskt krav i uppgiften.
3. Var tyst. Den vanligaste missen är att fylla tystnaden. Räkna till tre efter att personen slutat prata — ofta kommer det bästa där.
4. Fråga vidare med berätta mer och hur menar du då, inte med en ny fråga ur listan.
5. Fråga om uppgiften, inte om din sajt. Hur gör du när du ska hitta öppettider? Sajten kommer in sedan.

Anteckna citat, inte slutsatser. Skriv vad personen sa, inte vad du tror att det betyder. Tolkningen gör du efteråt.

3. Frågor som inte styr svaret

Fem frågor, alla öppna. Fyra sorter förstör svaret:

Ersättningen är nästan alltid samma form:

Berätta om senaste gången du …

Den frågan går inte att svara ja på. Den ger en händelse, och i händelsen finns hindren.

4. Förstudie och krav

Förstudien är inte en uppsats. Den är fyra svar, och tre av dem finns redan:

Ungefär 600 ord sammanlagt. Skriv om typanvändarna efter intervjun — de skrevs som gissningar innan. Har du inte ändrat någonting har du antingen gissat perfekt eller inte använt intervjun, och du ska kunna säga vilket.

Avgränsning

Avgränsningen säger vad projektet inte ska lösa. Den delen vill ingen skriva, och den är den som gör att det som blir gjort blir klart.

• Funktioner du inte bygger, med en mening om vad användaren gör i stället.
• Användare du inte optimerar för. Sajten fungerar för alla, men den är byggd för någon.
• Enheter och lägen. Fungerar den utan JavaScript? Måste den?

Skillnaden mellan en avgränsning och en ursäkt: avgränsningen säger vad användaren gör i stället. Sajten hanterar inte bokning. Den som vill boka hänvisas till telefonnumret.

Krav som går att pröva

Ett användbart krav har tre egenskaper:

• Det säger vad användaren ska kunna göra, inte vad sajten ska vara.
• Det har ett utfall som går att observera. Någon klarar det eller inte.
• Det går att pröva utan att du är i rummet och förklarar.

Formen som fungerar för nästan alla krav:

En [typanvändare] ska kunna [uppgift] [under vilka villkor] [med vilket utfall].

Exempel: En förstagångsbesökare hittar öppettiderna inom 15 sekunder, utan att använda sökfunktionen. Det går att pröva idag, på tre personer, och antingen klarar sajten det eller inte.

5. Användarresan

Scenariot är en berättelse. Användarresan är samma berättelse uppdelad i steg, med brottet utpekat. En resa gör en åsikt till en plats.

Steget är ett verb, inte en sida. Startsidan är inte ett steg — letar efter öppettider på startsidan är. Skillnaden är att det senare kan misslyckas.

Känslan är inte pynt. Den pekar ut brottet snabbare än hindret gör. En rad där känslan går från otålig till uppgiven är värd mer än tre rader hinder.

Minst fem steg. Fler än åtta blir svårt att läsa.

Var resan bryts

Ett brott är där användaren överväger att ge upp, eller gör det. Fyra vanliga sorter:

• Återvändsgränd. Sidan finns men svarar inte på frågan. Hen måste backa.
• Gissningen. Två vägar ser lika rimliga ut och en är fel. Hälften tappas.
• Väntan utan besked. Något händer men inget syns.
• Byte av system. Sajten skickar hen till telefon, e-post eller en annan tjänst. Varje byte kostar.

Testet: vid vilket steg skulle du själv stänga fliken?

6. Informationsarkitektur och card sorting

Informationsarkitektur är två beslut: vad som hör ihop och vad grupperna heter. Det spelar ingen roll hur bra innehållet är om ingen hittar det.

Gruppering

Den vanligaste missen är att gruppera efter organisationen. En meny som speglar hur verksamheten är indelad är begriplig inifrån och obegriplig utifrån. Frågan som avgör: grupperar du efter hur du tänker, eller efter hur den som letar tänker?

Etiketter

• Använd användarens ord, inte dina. Intervjun är facit. Kallade personen det öppettider ska det heta öppettider, inte besöksinformation.
• Konkret slår kort. Kontakt är kort. Ring eller mejla oss säger vad som finns bakom.
• Undvik ord som kan betyda allt. Resurser, Verktyg, Mer, Övrigt, Info. Kan två etiketter rymma samma sida är minst en av dem fel.

Card sorting

1. Skriv sajtens innehåll på lappar — en sida eller ett innehåll per lapp, 15–25 stycken. Skriv det som står på sidan, inte vad menyn heter idag.
2. Ge lapparna till någon som inte byggt sajten.
3. Be hen lägga dem i högar som hör ihop. Inga regler om hur många.
4. Be hen sätta ett namn på varje hög, med sina egna ord.
5. Fotografera lapparna och anteckna grupperingen, namnen och vilka lappar hen tvekade om.

Två saker gör metoden användbar. Namnen på högarna är guldet — de är etiketter du inte hade kommit på. Och lapparna hen tvekar om är också ett resultat: den som ligger kvar i handen hör hemma på två ställen, eller ingenstans.

Sitemapen

Sitemapen är resultatet av sorteringen, ritat: startsidan överst, en ruta per sida, grupperingen synlig, hierarkiskt. Med de etiketter sorteringen gav, inte de sajten har idag.

7. Navigation

En navigation svarar på två frågor, hela tiden:

Rubriken ska matcha länken man klickade på. Klickar man på Öppettider och kommer till en sida som heter Besöksinformation uppstår en sekunds tvivel.

Det markerade menyvalet är den billigaste navigationen som finns. En rad CSS, och användaren slipper hålla reda på var hen är.

Mönster

Antalet val avgör mer än något annat. Fler än sju val i en nivå betyder nästan alltid att grupperingen inte är gjord — tillbaka till sitemapen. Din sajt har fyra sidor: de får plats på en rad även i 360 px, och en meny bakom knapp löser där ett problem du inte har.

Sök är inte en navigation — det är en reservutgång för den som inte hittar. En sajt med fyra sidor behöver ingen sök.

Granska navigationen mot sitemapen

1. Finns varje grupp i sitemapen som ett val i navigationen? Om inte — är gruppen onödig, eller saknas ingången?
2. Heter valen samma sak som grupperna? Card sortingen gav namn. Används de?
3. Når man varje sida? Den sida som bara nås via en länk mitt i en text är svår att hitta igen.
4. Ligger något i navigationen som inte finns i sitemapen? Då är det en rest.

Skriv fynden som en lista med vad som inte stämmer och vad du föreslår i stället. Det är navigationsförslaget, och det är ett ska-krav. Att hitta att något inte stämmer är lätt — att säga vad det ska vara i stället är uppgiften.

Tillgänglig navigation

• Nåbar med tangentbord, i logisk ordning. Ordningen är den koden har, och den ska stämma med den visuella.
• Det ska synas var fokus är. Samma egna, synliga markering som i ditt komponentbibliotek från område 3.
• Samma navigation på varje sida, på samma plats. Den som flyttar menyn mellan sidorna tvingar användaren att leta om.
• Länktexten ska säga vart den går, lösryckt. Läs mer i en meny säger ingenting.

8. De tio heuristikerna

En checklista att granska mot. Nyttan är praktisk: en lista gör att du hittar saker du inte letade efter. Utan lista granskar man det man råkar se — oftast startsidan, oftast utseendet.

Granska i den här ordningen, och skriv en rad per princip.

Fyra av dem gäller nästan alla elevsajter och ger flest fynd: synlighet (1), konsekvens (4), känna igen (6) och hjälp vid fel (9). Börja där.

En rad per heuristik, även de som inte är tillämpliga. Att skriva inte tillämplig — sajten har inga flersteg som kan avbrytas är ett resultat, inte ett hål.

9. Åtgärdslistan

Listan är det som lämnas över. En klasskamrat i Webbutveckling öppnar den den 13 januari och börjar arbeta efter den — den ska alltså gå att genomföra utan att fråga dig.

Fyra kolumner:

Vad talen betyder

Ett omdöme är inte ett fynd. Det är otydligt går inte att åtgärda. Bristande felhantering: meddelandet säger inte vad som är fel eller hur det lagas gör det.

10. Felsökning