Design bedre og hurtigere med Rapid Prototyping

• Om forfatteren
• Yderligere læsning på SmashingMag:
• The Rapid Prototyping Process
• Scoping A Prototype
• Hvad skal prototypes?
• Hvor meget skal der prototypes?
• Find historien
• Planlæg dine iterationer
• Vælg den passende troværdighed
• Prototypespektret
• Low Fidelity
• Medium Fidelity
• High Fidelity
• Valg af fidelitetsniveau
• Valg af værktøjer
• Dos And Don’ts
• Gør…
• Du må ikke…
• Flere ressourcer

Om forfatteren

Lyndon Cerejo er certificeret brugeroplevelsesstrateg i Capgeminis Rapid Design & Visualiseringspraksis, med en succesfuld track record med …Mere omLyndon↬

Det gamle ordsprog “et billede siger mere end tusind ord” beskriver, hvad brugergrænsefladeprototyping handler om: at bruge visuelle billeder til at beskrive tusindvis af ord i form af design- og udviklingsspecifikationer, der beskriver detaljeret, hvordan et system skal opføre sig og se ud. I en iterativ tilgang til brugergrænsefladedesign er rapid prototyping en proces, hvor man hurtigt laver en model af den fremtidige tilstand af et system, hvad enten det er et websted eller en applikation, og validerer den med et bredere team af brugere, interessenter, udviklere og designere.

Gennem at gøre dette hurtigt og iterativt genereres feedback tidligt og ofte i processen, hvilket forbedrer det endelige design og reducerer behovet for ændringer under udviklingen.

Yderligere læsning på SmashingMag:

• Optimering af dit design til hurtig prototypetestning
• Valg af det rigtige prototypeværktøj
• Indholdsprototyping i responsivt webdesign
• Optimering af brugergrænsefladeprototyper (uden at skabe zombier)

Prototyper spænder fra grove papirskitser til interaktive simuleringer, der ser ud og fungerer som det endelige produkt. Nøglen til en vellykket hurtig prototyping er at revidere hurtigt på baggrund af feedback og bruge den rette prototypingtilgang. Hurtig prototyping hjælper teams med at eksperimentere med flere tilgange og ideer, det letter diskussionen gennem visuelle billeder i stedet for ord, det sikrer, at alle deler en fælles forståelse, og det reducerer risikoen og undgår oversete krav, hvilket fører til et bedre design hurtigere.

The Rapid Prototyping Process

Rapid prototyping involverer flere gentagelser af en proces i tre trin:

1. Prototype Konverter brugernes beskrivelse af løsningen til mock-ups, idet der tages højde for standarder for brugeroplevelse og bedste praksis.
2. Gennemgå prototypen Del prototypen med brugerne, og vurder, om den opfylder deres behov og forventninger.
3. Forfine På baggrund af feedback identificeres de områder, der skal forfines eller defineres og præciseres yderligere.

Prototypen starter normalt småt med nogle få nøgleområder, der er modelleret, og vokser i bredde og dybde over flere iterationer, efterhånden som de nødvendige områder bygges ud, indtil prototypen færdiggøres og overdrages til udvikling af det endelige produkt. Processens hurtighed er mest tydelig i iterationerne, som spænder fra ændringer i realtid til iterationscyklusser på et par dage, afhængigt af prototypens omfang.

Scoping A Prototype

Ordet prototype fremkalder ofte billeder af en kodet, fuldt fungerende version af et program eller en grænseflade. Hurtige prototyper er ikke beregnet til at udvikle sig til fuldt funktionelle løsninger, men er beregnet til at hjælpe brugerne med at visualisere og udforme brugeroplevelsen af det endelige produkt. Med det i tankerne skal du beslutte dig for et par vigtige spørgsmål, når du skal afgrænse en prototype, før du begynder at lave prototyper.

Hvad skal prototypes?

Gode kandidater til prototyping omfatter komplekse interaktioner, ny funktionalitet og ændringer i arbejdsgang, teknologi eller design. Det er f.eks. nyttigt at lave prototyper af søgeresultater, når man ønsker at afvige væsentligt fra standardsøgeoplevelsen, f.eks. ved at indføre facetsøgning eller muligheden for at få vist et dokument uden at forlade søgeresultaterne.

Hvor meget skal der prototypes?

En god tommelfingerregel er at fokusere på de 20 % af funktionaliteten, der vil blive brugt 80 % af tiden, dvs. den nøglefunktionalitet, der vil blive brugt oftest. Husk, at formålet med rapid prototyping er at vise, hvordan noget vil fungere eller, i senere faser, hvordan designet vil se ud, uden at prototype hele produktet.

Find historien

Når du har identificeret de områder, der skal prototypes, skal du flette dem sammen til et eller flere scenarier: identificer de sammenhængende veje gennem den brugeroplevelse, som prototypen simulerer. For et websted, der sælger sko, kunne et scenarie være “Boring Joe”, der køber præcis de samme Nike-løbesko, som han købte for seks måneder siden, mens et andet scenarie kunne være “Exploring Sam”, der gennemser størrelse 10 for at finde et par Oxfords og et par loafers, der interesserer ham.

Planlæg dine iterationer

Hele prototypen bygges normalt ikke i en enkelt iteration, men snarere stykke for stykke. En god fremgangsmåde er at starte med at lave prototyper bredt og bredt og derefter dykke dybt ned i udvalgte områder af løsningen. For et websted vil det betyde, at man i den første iteration opbygger forsiden og landingssiderne for de vigtigste sektioner (undertiden benævnt en horisontal prototype) og derefter gennemgår og reviderer denne ramme. Efterfølgende iterationer kan gå ned i en eller flere sektioner af webstedet (en vertikal prototype); for et websted til download af medier kunne det være de trin, som en bruger skal tage for at finde en video og downloade den, eller hvordan de skal administrere medierne i deres onlinebibliotek.

Vælg den passende troværdighed

Troværdighed henviser til, hvor meget en prototype ligner den endelige løsning. Der er flere dimensioner af fidelity, og prototyper kan ligge hvor som helst på spektret for hver af disse dimensioner. Afhængigt af designprocessens fase og målene med prototypen skal du vælge den passende fidelitet for hver af følgende:

• Visuel fidelitet (skitseret ↔ stiliseret) Udseende og følelse er den mest mærkbare dimension af en prototypes fidelitet og kan, hvis den ikke vælges korrekt, føre prototypevurderinger ud på et sidespor. Hvis man går for tidligt over til hi-fi, vil brugerne fokusere på det visuelle design, hvilket ikke er hensigtsmæssigt i de tidlige faser. Ud fra et visuelt synspunkt behøver prototyper ikke at være pixelperfekte, men bør være proportionelle; hvis f.eks. det venstre navigationsområde skal fylde en femtedel af en skærm med 1024 pixels, behøver det ikke at være præcis 204 pixels bredt, så længe det er proportionelt afbildet i prototypen. Efterhånden som prototyperne udvikler sig gennem designcyklussen, skal den visuelle troværdighed øges efter behov ved at indføre stil-, farve-, branding- og grafikelementer.
• Funktionel troværdighed (statisk ↔ interaktiv) Viser prototypen, hvordan løsningen vil fungere (statisk), eller ser den ud til at være fuldt funktionel og reagere på brugerinput (interaktiv)? Denne dimension er mindre distraherende for brugerne, men ved at tilføje interaktivitet i efterfølgende iterationer øges den funktionelle troværdighed og gør det muligt at bruge prototypen til brugervenlighedstest, uddannelse og kommunikation.
• Indholdstroværdighed (lorem ipsum ↔ reelt indhold) En anden dimension, der ofte distraherer brugerne, er det indhold, der vises i prototypen. Skrøllede linjer og blindtekst som lorem ipsum er nyttige at undgå i de tidlige faser af prototypeudviklingen. Men efterhånden som prototypen forfines, skal du vurdere behovet for at erstatte dummy-tekst med ægte indhold for at få en fornemmelse af, hvordan det påvirker det overordnede design.

Prototypespektret

Low Fidelity

Den hurtigste måde at starte prototyping på er også den nemmeste: at sætte pen(cil) på papir. At skitsere på papir er en low-fidelity-metode, som alle kan bruge; der kræves ingen særlige værktøjer eller erfaring. Skitser bruges oftest i de tidlige faser af en designcyklus og er en hurtig måde at skabe grove modeller af designtilgange og koncepter på og at få feedback fra brugerne. Papirprototyper er ideelle under brainstorming og konceptualisering og kan udføres alene i et kabinet med en skitsebog eller i en gruppe med et flipchart (eller whiteboard) og markører.

Papirprototyper, der ligger i den lave-fidelitets ende af prototypingspektret, er statiske og har normalt lav visuel og indholdsmæssig fidelitet. Dette tvinger brugerne til at fokusere på, hvordan de vil bruge systemet i stedet for på, hvordan det vil se ud, og det gør designerne mere åbne over for ændringer baseret på brugerfeedback.

Low-fidelity prototyping egner sig til hurtig prototyping. Det har ingen indlæringskurve, men giver mulighed for at foretage ændringer nemt og hurtigt.

Medium Fidelity

Når vi begynder at bruge computerbaserede værktøjer som Visio og Omnigraffle til at lave prototyper, øges fideliteten på de fleste fronter, hvilket giver medium-fidelity-prototyper. Wireframes, task flows og scenarier, der oprettes med disse værktøjer, tager mere tid og kræfter, men ser mere formelle og raffinerede ud. Selv om der kan indføres visuelle elementer som branding, farver og stil, holder prototyperne sig ofte væk fra dem og fokuserer i stedet på at demonstrere applikationens adfærd. Interaktivitet kan simuleres ved at sammenkoble sider eller skærme, men den funktionelle troværdighed er i bedste fald middelmådig her. Disse prototyper er bedst egnede til at afgøre, om brugernes behov er opfyldt, og om brugeroplevelsen er optimal.

Der er to grunde til, at man med vilje kan få en medium-fidelity-prototype til ikke at ligne en medium-fidelity-prototype:

• Den første er, at man ved at bruge Balsamiq eller skitseagtige Visio-stencils til at få prototypen til at se lav fidelity ud, tvinger man brugerne til at se den som et udkast eller et igangværende arbejde frem for et poleret og færdigt produkt.
• Den anden er, at ved at give prototypen en høj visuel fidelitet (f.eks. i et omfattende layout udført i Photoshop) får du brugeren til at fokusere på det visuelle design og look and feel, herunder farver, skrifttyper, layout, logo og billeder.

Den hurtige prototyping med medium fidelitet opnås med skabeloner, stencils og genanvendelige widgets og elementer. Det bliver hurtigere, efterhånden som du bliver bedre til at bruge de værktøjer, du vælger.

High Fidelity

High-fidelity-prototyper er de mest realistiske og bliver ofte forvekslet med det endelige produkt, men de er normalt tidskrævende. For nogle få år siden var den eneste måde at skabe high-fidelity-prototyper på faktisk at kode ved hjælp af et programmeringssprog, hvilket ofte krævede, at designeren og udvikleren arbejdede sammen. I dag giver applikationssimuleringsværktøjer imidlertid ikke-tekniske brugere mulighed for at trække og slippe UI-widgets for at skabe troværdige prototyper, der simulerer funktionaliteten i det endelige produkt, selv for forretningslogik og databaseinteraktioner. Axure og iRise er nogle eksempler på applikationssimuleringsværktøjer, der kan bruges til at skabe prototyper med høj nøjagtighed.

Disse prototyper er velegnede, når der kræves høj visuel og funktionel nøjagtighed, f.eks. ved indførelsen af en ny teknologi (f.eks. ved overgangen fra en mainframe-applikation – ja, de findes stadig – til en webbaseret løsning). De fleste af disse prototyper kan ikke konverteres til brugbar kode, men de tjener som en fremragende reference for udviklere. De er også nyttige til at udføre brugervenlighedstest og uddanne brugere.

High-fidelity prototyping er relativt hurtig i betragtning af det involverede interaktivitets- og fidelitetsniveau, og den kan fremskyndes ved hjælp af drag-and-drop-simuleringsværktøjer. Desuden letter nogle af disse værktøjer indsamlingen af brugerfeedback og dokumentationen af krav, hvilket fremskynder designprocessen yderligere. Selv om du ikke behøver at lære et nyt programmeringssprog, har disse værktøjer en indlæringskurve.

Valg af fidelitetsniveau

Der findes ikke én korrekt fremgangsmåde ved valg af prototypens fidelitet. De fleste designs af nye produkter starter bedst med skitser og går derefter over til enten medium- eller high-fidelity-prototyper, afhængigt af systemets kompleksitet og kravene til fidelitetsdimensionerne.

I arbejdet med en bestemt kunde i medicinalindustrien gik vi fra whiteboards til interaktive prototyper, der havde høj funktionel og indholdsmæssig fidelitet, men lav visuel fidelitet. De bekymrede sig mindre om udseendet end om at overholde virksomhedens retningslinjer.

For en anden kunde, denne gang inden for detailhandel, skulle vores interaktive prototype have en høj visuel og funktionel troværdighed. Indholdets troværdighed var ligegyldig, fordi de ville genbruge indholdet og allerede var bekendt med det. For dem var udseendet og den interaktive oplevelse vigtigere, fordi det var deres første implementering af SharePoint, og de ønskede at få portalen til at se “ikke-SharePointy” ud!

Valg af værktøjer

Afhængigt af din tilgang har du en bred vifte af værktøjer at vælge imellem. Dan Harrelson har udarbejdet en liste over populære prototypeværktøjer på bloggen Adaptive Path.

Hvert værktøj har sit eget funktionssæt og sine egne styrker. Ud fra dine behov og kravene i de projekter, du arbejder med, skal du vurdere, hvilket værktøj der vil være mest hensigtsmæssigt. Her er nogle spørgsmål, du bør overveje, når du evaluerer værktøjer:

• Hvor let er det at lære og bruge værktøjet?
• Er det fleksibelt, så det understøtter prototyper til web-, pakke- og tilpassede softwareapplikationer samt desktop- og mobilapplikationer?
• Er der et arkiv med genanvendelige stencils, skabeloner eller widgets til rådighed?
• Hvor let er det at dele prototypen med andre til gennemsyn? Kan deres feedback registreres ved hjælp af værktøjet?
• Hvor let er det at foretage ændringer i farten eller at indarbejde feedback?
• Er der samarbejdsfunktioner, f.eks. at flere personer kan arbejde på det på samme tid?
• Hvad er licensbetingelserne og -omkostningerne?

Dos And Don’ts

Når du går i gang, er her nogle få punkter om effektiv rapid prototyping, som du skal huske på:

Gør…

• Arbejder i samarbejde med brugere, forretnings- og it-interessenter, mens du laver hurtige prototyper. Ud over at give værdifuld feedback får de også en følelse af ejerskab til det endelige produkt.
• Undgå “prototype creep” ved at fastsætte forventninger til processen, herunder forventninger, der påvirker formål, troværdighed, omfang og varighed. Mind alle, herunder dig selv, om, at hurtig prototyping er et middel til at nå et mål, ikke et mål i sig selv.
• Når du skaber interaktive prototyper og simuleringer med høj troværdighed, skal du indbygge realistiske forsinkelser (f.eks. til opdatering af skærmen eller til at bevæge dig gennem trinene i en transaktion), så brugerne ikke forventer øjeblikkelige svartider fra det endelige produkt.
• Genbrug, genbrug, genbrug. For computerbaseret prototyping betyder det, at man skal gemme genanvendelige skabeloner, stencils, mønstre og widgets til fremtidige projekter.
• Det vigtigste er, at man begynder hver prototype-gennemgang med en erklæring om, at dette blot er en prototype, en mock-up, ikke den egentlige løsning. Dette minder brugerne om, at der er tale om et igangværende arbejde, det tilskynder til feedback, og i tilfælde af prototyper med høj troværdighed forhindrer det brugerne i at forveksle det med en fungerende løsning.

Du må ikke…

• Du må ikke prototype funktioner eller funktionalitet, der ikke kan implementeres – ofte et problem med implementeringer af softwarepakker. Hvis du er i tvivl, skal du bekræfte det med udviklerne, før du går i gang.
• Tag ikke alle ændringer eller anmodninger, der kommer ud af en prototype-gennemgang, som et nyt krav. Hurtig prototyping hjælper med at opfange glemte krav, men disse nye krav bør vurderes omhyggeligt. Nogle kan blive implementeret, mens andre bliver skubbet til en fremtidig version.
• Gå ikke i gang med prototype-gennemgangssessioner uden klare retningslinjer for feedback. Vær meget specifik med hensyn til den type feedback, du leder efter. (Er trinene logisk arrangeret? Er navigationen klar og intuitiv?) Hvis ikke, skal du være forberedt på: “Jeg kan ikke lide det blå i overskriften”, eller “Kan vi ikke bruge denne skrifttype i stedet?” eller “Kan du gøre dette større, tydeligere, med rødt og blinkende?”
• Du skal ikke være perfektionist. I de fleste tilfælde behøver rapid prototyping ikke at være 100 % perfekt, blot god nok til at give alle en fælles forståelse.
• Lad være med at lave prototyper af alt. Det bør du for det meste ikke være nødt til.

Flere ressourcer

• Hvis du har brug for et skub til at begynde at skitsere, kan du prøve Dan Roams bog The Back of the Napkin.
• Lær mere om papirprototyping i Carolyn Snyders bog Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces.
• Sketchboarding, en teknik til at udforske og finpudse koncepter.
• Har du brug for indhold med lav troværdighed? Generer Lorem Ipsum-tekst til din prototype.
• Ønsker du at få din papirskitse til at se high fidelity ud? Prøv disse stencils til web, iPad og iPhone.
• Skitse- og prototypeværktøjer til iPhone-apps
• Enkle skitser og prototyper i Firefox med tilføjelsesprogrammet Pencil.
• Gratis PDF-skabeloner til skitsering, wireframing og notatskrivning til udskrivning
• 50 gratis UI- og webdesign Wireframing-kits, ressourcer og kildefiler

(al)