Skip to content

Usability del 3 och designflöde (Aftonbladet uppgift)

September 22, 2011

Lektion 03
“Vart är jag?”

– Hitta rätt!

————— del 1

Tänk er Bauhaus. Ni är där för första gången, och målet för er
är att köpa en handfräs.
Valen ni har är att gå runt och navigera efter skylltar, leta i deras
dator terminal samt fråga en örsäljare. Ni väljer val ett och börjar strö-vandra.
Plötsligt står ni framför ett pas skylltar som pekar åt olika håll,
den första säger VVS, den andra färg och den tredje verktyg. Väl framme vid
verktygsavdelningen ser ni fler skyltar, eldrivna, handhållna och maskiner.
Lite klurigare den här gången men ni väljer eldrivna, tyvärr så hittar ni bara
borrar och liknande och bestämmer er för att byta rad till handhållna där ni hittar er fräs.

Alla dessa val bestämms av olika faktorer som vägs mot varandra, hur bråttom vi har, hur väl vi
känner igen oss, hur social känner vi oss och hur mycket litar vi på deras guidning.

– Sökdominanta
– Linkdominanta
– Strö

Navigation
– Finna rätt
– Veta vart vi är
– Vad som finns här
– Hur vi ska använda oss av sidan

Standardisera, precis som med skylltar
Navigation så gott som följa med överallt
Hierarki hjälper. Sitemap

Testa bra webb navigation.
– Vilken site är det?
– Vilken sida är det?
– I vilken nivå befinner jag mig?
– Hur kan jag söka?
– Vart finns huvudelen och underdelen?

————— del 2

Tabbar är grymt bra🙂
Pulldowns är oftast problematiska, svåra att få överblick Klipp inte av.
Alla som jobbar med webb är webbanvndare och har egna kännslor om vad som är fint/fult användbart etc.
Det finns en myt som säger att en webbanvändare är som oss, en ännu större myt som säger att de är som
något alls. Det finns inga rätt/fel när det kommer till webbdesign, men det finns en del regler som är till för
att hjälpa er, den största av dem ……

————— Designprocessen/Flödet ett exempel.

Designflödet

Grund förarbete/Research
Möte med kunden. Intervjuer- Workshops (Lyssna efter nyckelorden)
“Se det från hans/hennes perspektiv”. Använda sig av persona.
Behovsanalys
– Koncept
– Målgrupp
Visualisering
Testning
– Djupintervjuer, gruppintervjuer. Undvik enkäter
Få klarhert i de olika visionerna.
– Kolla om det finns krav
– Kolla efter färdigt material som ex: statestik
– Företagsregler/praxis

Skissa
Papper/penna (grovt)
– Flödeschema (program/witeboard)
Massproducera (Ringa in det funkar)
Brainstorming tekniker (LAB)
Testa lätt

Grid
Välj standardiserat om ni är ovana (960-gridden)
Baserar designen på antal kolumner, bredden, rännor

Wireframing
(hich/low-fidelity) (Hålle er till standardiserade symboler
/Balsamiq/ Undvik färger) (Mockingbird/Axzure)

– Vid high-fidelity använd er av Lorem Ipsum

Design

Moodboards
Använd er av färdigt material.
Kolla på ikon paket
Kolla på typografi
Kolla på färher (Kulr)

(Photoshop/Fireworks)
– Struktur
– Fokuspunkter
– Hierarki
– Prio
– Balans
– Flöde
– Luften
– Linjering

Testa. (Kortmetoden, filma)
Mockups
(BA testning, heatmaps)

———————————–

Aftonbladet uppgift

1) Analysera och hitta usability fel i nuvarande sida. Minst 5st

2) Tänk på hur du surfar runt på aftonbladet och skapa ett flödeschema (flowshart) över detta. Försök se mönster som loopar och slussar där ni har val (dessa finns överallt). Tips! gliffy

3) Går det att förbättra genom att expandera eller minska olika områden. Tänk på olika persona och att det finns flera vägar till målet.

4) Skapa en low-fidelity wirerframe på “Nya Aftonbladet” baserad på er nya flowshart samt alla de regler vi har talat om (Både usability regler och även designflödet). Tänk på de delar som ni tagit bort eller lagt till.

5) Skapa en “enklare” mockup till “Nya Aftonbladet” (räcker med framsidan). Om det går lägg upp den i Aftonbladets redesign-blog så gör det. Ni behöver inte göra en helt ny design utan det räcker med en hybrid mellan “wireframe och mockup”, med förklarande pilar. Liknande de som finns i redesign bloggen.

6)  Gör en lista med punkter där ni kort specar varför ni valt som ni gjort, sätt ihop den med slut-bilden och eposta den till mig.

Deadline = Måndag (den 26 sep) 23:59

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: