HTML wireframes og prototyper – brug det effektivt!

At bruge HTML til at skabe wireframes og prototype design er både hurtigt og har mange fordele, man kan lettere gennemføre brugertest, forbedre sin kommunikation med kunden, samt skabe en hurtigere og mere effektiv designfase.

Når vi snakker wireframes og HTML, er der nogle forskellige typer man bør kende.

Wireframe: Et gråskala blokdiagram, som illustrerer den samlede navigation og blokke af designelementer der vil være på skærmen. Den indeholder ikke billeder og der behøves nødvendigvis ikke være linket.
Flat wireframe: En wireframe som er lavet grafisk i et program som Visio, Adobe Illustrator eller på papir
HTML wireframe: En wireframe som er laver i HTML-kode ved hjælp af et program såsom Dreamweaver, Axure mf.
HTML prototype: En HTML wireframes som indeholder faktisk indhold med interaktions-komponenter (såsom knapper med links) til at danne den overordnede interaktion

Mange User Experience designere bruger ikke HTML til wireframing og prototype design. Måske er de allerede fortrolige med “flat wireframe” værktøjer og lyden af programmering lyder måske heller ikke så tiltalende. Du kan dog uden nogen reel form for erfaring i programmering opbygge dine prototyper i både Dreamweaver og Axure RP. Det gøre ved det såkaldte drag-and-drop princip, hvilket gør det muligt at man løbende kan tilegne sig erfaring med skrive og ændre  i HTML-koden.

Hvis man tænker interaktionsdesign, vil HTML wireframes egne sig særlig godt til løbende brugertest. Man kan tilmed få vurderet sit design online vha. fjern-test, eller man kan hurtigt opsætte en test på kollega eller ven. Der er derfor god mulighed for at få hurtigt feedback på dine designs.

Avatar

Kristian Bonde Jensen

Blogger på Userdesign.dk - Cand.polyt i Produkt- og Designpsykologi

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *