Til tema 3 skulle vi høre om hvordan Adobe XD fungerer og læse hele bogen “Usability”. Usability kort sagt er brugervenlighed, dvs. hvor let det er for brugerne at interagere med et produkt eller en tjeneste og udføre de ønskede opgaver. Vi lærte mange forskellige metoder for at teste brugervenligheden. Jeg tog 3 ud af bogen og forklarede dem i undersiden “Usabilitytestmetoder”. Desuden lærte vi af et andet værktøj “Brugerrejse” og hvad “Informationsarkitektur” er og hvorfor det er vigtigt.

Billede af Adobe XD

Adobe XD

Adobe XD er et design program, hvor man nemt og hurtigt kan lave prototyper for en webside. Man kan oprette designs til hver skærmstørrelse. Vi skulle høre om dette program fra en anden underviser, men underviseren var desværre syg og så lærte vi selv hvordan programmet fungerer for vores projekt.

Usabilitytestmetoder

Som sagt, har jeg valgt 3 forskellige metoder fra bogen, som vi også brugte i vores projekt senere.
Metoderne er:
- Brugertest
- Kortsortering
- Gangstertest

Brugertest

Med en brugertest kan man teste vigtige features af ens webside, og om brugeren kan bruge websitet til at finde informationer og løse opgaver. Denne metode er også en “tænkt-højt” metode, dvs. at brugeren snakker højt og forklarer hvad de gøre, når de tester. Formålet med testen er at finde ud hvor brugerne oplever problemer, når de navigerer rundt på websiden. Man kan også bruge papir skitser for at teste nogle funktioner - det kalder man “papirtest”.

Billede af kortsortering

Kortsortering

Med en kortsortering kan man teste strukturen af en websidens navigation for eksempel. Her bruger man kort og skriver forskellige ord på, mest ord man bruger i navigationen. Der er 2 forskellige måder for en kortsortering: “åben” eller “lukket”. På en “åben” kortsortering sorterer testerne selv kortene i grupper og giver dem et navn. På en “lukket” kortsortering sorterer testerne kortene i eksisterende grupper.

Billede af gangstertestspørgsmål

Gangstertest

Men en gangstertest tester man websitets informationsarkitektur, dvs. den samlede struktur, navigationen, søgefunktionen, osv. Testen kan man også bruge for at sikre, at en webside overholder de mest almindelige konventioner for websider. Udførelsen af en gangstertest består af forskellige spørgsmål, man spørger en tester om en tilfældig side.

Billede af gangstertest-pointsystem

Gangstertest - Point-System

Bagefter kan man spørge hvor let eller svært informationen var at finde og brug et point-system.

Refleksioner til Usabilitytestmetoder

Efter at læse hele bogen var det lidt for meget information, men efter undervisningen forstod jeg om det forskellige testmetoder mere og mere.

Billede af en kunderejse

Brugerrejse/Kunderejse

En brugerrejse (customer journey på engelsk) er en visualisering af den potentielle kundes skridt/handlinger, som de tager, før, under og efter de bliver kunder. Formålet her er at forstå og visualisere en burgers/kundes rejse og hvilke potentielle oplevelser de har med et produkt eller en service.

Refleksioner til Brugerrejse

Jeg tror jeg forveksler brugerrejse og brugertest stadigvæk lidt, men ikke så meget end før. Jeg synes at det er lidt svært at lave en brugerrejse.

Informationsarkitektur

Målene for informationsarkitektur er at skabe et brugbart produkt, som er organiseret, systematisk og har navngivne indhold. Det er bedst at man begynde med design af et produkt eller en webside efter man er færdig med informationsarkitektur.Der er forskellige metoder at organisere information.

LATCH

Wurman fandt fem måder at organisere. De kalder han LATCH = Location, Alphabet, Time, Category og Hierarchy.
Han sagde også at tilfældig er ikke en måde at organisere.

User Stories

Jeg snakkede allerede om user stories her.

Feature/Unfeatureliste

- Featureliste: Hvad er vigtig på sitet?
- Unfeatureliste: Hvad er ikke vigtig på sitet?

Billede af indholdshierarki

Indholdshierarki

Med en indholdshierarki tjekker man om det vigtigste information er også let tilgængelig.

Billede af en sitemap

Sitemap

En sitemap skal afspejle indholdshierarkiet.

Wireframes

Jeg snakkede allerede om wireframes her.

Refleksioner til Informationsarkitektur

Det var spændende at høre at der er så mange muligheder for at organisere information, ikke kun for en webside men også for sig selv.

Projekt

Vores projekt til tema 3 består af 2 dele: at redesigne en eksisterende webside med informationsarkitektur, navigationsdesign og wireframing. Anden del består af at lave en prototype af redesignet side med Adobe XD for mobil og desktop. Hver gruppe får en anden side til at redesigne. Vores gruppe skulle redesigne Stoholm IF’s webside.

Billede af mobil-versionen af vores projekt
Billede af web-versionen af vores projekt
Billede af korttest af vores projekt
Billede af korttest af vores projekt 2

Refleksioner til 3. Projekt

Det var interessant at bruge alt vi har lært op til dette punkt i dette projekt og jeg synes nogle punkter af vores løsning er virkelig gode.