Uppgiftsanalys för webbdesign: Notation

När du börjar skissa din sajt så behöver du inte bara en arkitektur, utan också en beskrivning av den väg en användare ska ta genom sajten, för att lösa sin uppgift. Du kan då göra en optimal uppgiftsväg där alla sidor och vyer dyker upp på ett naturligt sätt genom hela uppgiften. Alternativet är att användaren behöver leta efter varje uppgift.

Det här avsnittet förutsätter att du redan vet vilka uppgifter som ska utföras, och att du vet om det är ett luddigt eller precist mål som ska nås. Exempel på ett precist mål är att vara ute efter att köpa "white blood cells" av "the White Stripes". Ett oprecist mål skulle istället vara att köpa "en bra skiva", eller kanske "en billig skiva", eller eventuellt "garagerock, ganska ny, av ett band som hette något som har med blodomloppet att göra". Om du inte vet vilken uppgiften och målet är, så bör du undersöka det först, till exempel med någon metod från sidan om metoder.

Du behöver inte rita sidorna för att göra en skiss av uppgiftsvägen. Istället kan du göra ett enkelt diagram, till exempel i Microsoft Visio. Här ska jag visa ett exempel på att söka efter en skiva på Amazon.com, modellerat som Functional Flows.

Modellering

Du modellerar uppifrån och ner, från vänster till höger. För att modellera uppgiften har vi sju olika former. Användarhandling är till exempel att skrolla en sida. Systemhandling är till exempel att göra en sökning i databasen. Det finns två sorters sidor, vanliga och pop-upp sidor. Dessutom kan vi modellera förgreningar. Till exempel kan en sökning sluta med en sida med sökresultat, eller en sida med ny sökning ifall det inte fanns något i databasen som matchade. Jag har lagt till en figur för att visa ingångar till andra uppgifter, eftersom användaren till exempel kan få för sig att köpa en bok om "the white stripes" som systemet också visade som svar på sökningen, istället för att köpa skivan man tänkt på från början. Rutan med reklam för boken är då en ingång. Dessutom finns också en ruta för ingång till annat flöde. Den är till för att länka till ett annat uppgiftsdiagram, som hör till uppgiften, men som inte fick plats i just den aktuella ritningen.

Exempel: Modellering av skivsökning på Amazon

Nedan kan du se den färdiga uppgiftsanalysen. Som du ser innehåller den information om detaljer i interaktionen. Det står att det ska vara en drop-down-lista. Det är bra att vara specifik, men du kanske får ändra dig när du gör den visuella designen. Eventuellt gör du enkla skärmskisser parallellt. Uppgiften är att hitta "white blood cells". Men användaren vet bara att det har något med "blood" att göra, och att det är en skiva.. Efter att ha klickat på "go" gör vi en databassökning. Som du ser får vi två olika resultat, beroende på om sökordet matchar någon skiva i databasen. Vi modellerar sjalva sökresultatet i en figur. Men vi modellerar också ingångar till nya uppgifter, som att lägga den skivan i varukorg (och eventuellt gå till checkout). På Amazon fanns också ett par andra alternativ, jag har modellerat två av dom. Det fanns ett erbjudande som skivan ingick i, samt en lista på andra skivor, som köpts av andra personer i samband med köp av "White Blood Cells".

Storyboards och Scenarier

Du kan göra samma sak genom att göra en storyboard, eller ett skrivet scenario. En storyboard består av skärmbilder, det som motsvaras av rutan med en liten våg nedtill. Varje sådan ruta blir en bild i din storyboard. I bilderna ritar du också alla ingångar, det som motsvaras av rutan med en spets uppåt. Du måste då också rita alla andra gränssnittselement, t.ex. den drop-down-meny som ingår i uppgiften. Till detta behöver du också en text som beskriver vad användaren gör på varje skärmbild. Du kan göra enkla storyboards i powerpoints och på papper. Du bör göra storyboards när du är nöjd med uppgiftsvägen. Om du gör storyboards utan att göra uppgiftsvägen först, så riskerar du att tappa fokus. Till exempel börjar du kanske fundera på elementens placering på sidan, färger, eller något annat. Dessutom är det lätt hänt att glömma bort alternativ när det sker en förgrening.

Ett skrivet scenario är en text som beskriver en uppgift utförs. Som du ser nedan så blir texten ganska kompakt, och det kan vara svårt att följa med i handlingen.

"Gunnela ska köpa en skiva, som heter något som har med blodomloppet att göra. Hon går till Amazon för att leta efter den. Där väljer hon 'popular music' i drop-down-menyn, och skriver 'blood' i sökrutan. Sen klickar hon på "go". Då sker en sökning i databasen. Den kan sluta med att sajten inte hittar någon skiva. I så fall hamnar Gunnela på en sida där hon kan göra en ny sökning. Ifall skivan finns, så hamnar Gunnela istället på en sida med sökresultat. Där finns även en ingång till skivor som folk klickat på, efter en sökning på 'blood' i databasen. Gunnela skrollar ner, och hittar "White Blood Cells" i listan. Hon klickar på den för att se om det var rätt skiva. Då kommer hon till en sida med information om skivan. Där finns även ingångar till beskrivning av andra skivor, som köpts tillsammans med 'White Blood Cells' av andra personer. Dessutom finns ett erbjudande som skivan ingår i. Hon har också möjlighet att lägga skivan i sin varukorg. Om hon gör det kan hon sedan fortsätta till checkout, eller fortsätta att handla.