Beter en sneller ontwerpen met Rapid Prototyping

• Over de auteur
• Verder lezen op SmashingMag:
• Het Rapid Prototyping Proces
• Scoping A Prototype
• Wat moet worden geprototyped?
• Hoeveel moet er worden geprototyped?
• Vind het verhaal
• Plan uw iteraties
• Kies de juiste getrouwheid
• Het Prototyping Spectrum
• Low Fidelity
• Medium Fidelity
• High Fidelity
• Selecting a Fidelity Level
• Selecting Tools
• Dos And Don’ts
• Doen…
• Don’t…
• Volgende bronnen

Over de auteur

Lyndon Cerejo is een gecertificeerde user experience strateeg in Capgemini’s Rapid Design & Visualization practice, met een succesvolle staat van dienst met …Meer overLyndon↬

Het oude adagium “een beeld zegt meer dan duizend woorden” geeft goed weer waar het bij user interface prototyping om draait: het gebruik van beelden om duizenden woorden aan ontwerp- en ontwikkelingsspecificaties te beschrijven, die in detail beschrijven hoe een systeem zich moet gedragen en eruit moet zien. In een iteratieve benadering van user interface design, rapid prototyping is het proces van snel mocking-up van de toekomstige toestand van een systeem, of het nu een website of applicatie, en valideren met een breder team van gebruikers, belanghebbenden, ontwikkelaars en ontwerpers.

Doen dit snel en iteratief genereert feedback vroeg en vaak in het proces, het verbeteren van het uiteindelijke ontwerp en het verminderen van de noodzaak voor wijzigingen tijdens de ontwikkeling.

Verder lezen op SmashingMag:

• Optimizing Your Design For Rapid Prototype Testing
• Choosing The Right Prototyping Tool
• Content Prototyping In Responsive Web Design
• Resurrecting User Interface Prototypes (Without Creating Zombies)

Prototypes variëren van ruwe papieren schetsen tot interactieve simulaties die eruitzien en functioneren als het eindproduct. De sleutels tot succesvolle rapid prototyping zijn snel herzien op basis van feedback en het gebruik van de juiste prototyping-aanpak. Rapid prototyping helpt teams te experimenteren met meerdere benaderingen en ideeën, het vergemakkelijkt de discussie door middel van beelden in plaats van woorden, het zorgt ervoor dat iedereen een gemeenschappelijk begrip heeft, en het vermindert risico’s en voorkomt gemiste eisen, wat sneller tot een beter ontwerp leidt.

Het Rapid Prototyping Proces

Rapid prototyping omvat meerdere iteraties van een proces in drie stappen:

1. Prototype Zet de beschrijving van de oplossing door de gebruikers om in mock-ups, rekening houdend met de normen voor gebruikerservaring en best practices.
2. Review Deel het prototype met de gebruikers en evalueer of het aan hun behoeften en verwachtingen voldoet.
3. Verfijn Op basis van feedback, identificeer gebieden die moeten worden verfijnd of verder gedefinieerd en verduidelijkt.

Het prototype begint meestal klein, met een paar belangrijke gebieden die worden gemodelleerd, en groeit in de breedte en diepte tijdens meerdere iteraties naarmate de vereiste gebieden worden uitgebouwd, totdat het prototype is voltooid en wordt overgedragen aan de ontwikkeling van het eindproduct. De snelheid van het proces is het duidelijkst in de iteraties, die variëren van real-time veranderingen tot iteratiecycli van een paar dagen, afhankelijk van de omvang van het prototype.

Scoping A Prototype

Het woord prototype roept vaak beelden op van een gecodeerde, volledig functionerende versie van een applicatie of interface. Rapid prototypes zijn niet bedoeld om uit te groeien tot volledig functionele oplossingen, maar zijn bedoeld om gebruikers te helpen de gebruikerservaring van het eindproduct te visualiseren en vorm te geven. Met dat in gedachten, bij het scoppen van een prototype, beslist over een paar belangrijke kwesties voordat u begint met prototyping.

Wat moet worden geprototyped?

Goede kandidaten voor prototyping zijn onder andere complexe interacties, nieuwe functionaliteit en veranderingen in de workflow, technologie of het ontwerp. Het prototypen van zoekresultaten is bijvoorbeeld nuttig wanneer u aanzienlijk wilt afwijken van de standaard zoekervaring; bijvoorbeeld om faceted search te introduceren of de mogelijkheid om een document te previewen zonder de zoekresultaten te verlaten.

Hoeveel moet er worden geprototyped?

Een goede vuistregel is om u te richten op de 20% van de functionaliteit die 80% van de tijd zal worden gebruikt; d.w.z. de belangrijkste functionaliteit die het vaakst zal worden gebruikt. Onthoud dat het doel van rapid prototyping is om te laten zien hoe iets zal werken of, in latere stadia, hoe het ontwerp eruit zal zien, zonder het hele product te prototypen.

Vind het verhaal

Na het identificeren van de gebieden die moeten worden geprototyped, weef ze samen in een of meer scenario’s: identificeer de samenhangende paden door de gebruikerservaring die het prototype simuleert. Voor een website die schoenen verkoopt, zou het ene scenario kunnen zijn dat “saaie Joe” precies dezelfde Nike hardloopschoenen koopt die hij zes maanden geleden kocht, terwijl een ander scenario zou kunnen zijn dat “ontdekkende Sam” door maat 10 bladert om een paar Oxfords en een paar loafers te vinden die hem interesseren.

Plan uw iteraties

Het hele prototype wordt meestal niet in één iteratie gebouwd, maar stuk voor stuk. Een goede aanpak is om breed en breed te beginnen met prototyping en dan diep te duiken in geselecteerde gebieden van de oplossing. Voor een website zou dit betekenen dat de homepage en landingspagina’s voor de belangrijkste secties in de eerste iteratie worden gebouwd (ook wel een horizontaal prototype genoemd) en dat raamwerk vervolgens wordt herzien en gereviseerd. Latere iteraties kunnen dieper ingaan op een of meer onderdelen van de website (een verticaal prototype); voor een website voor het downloaden van media zou dit de stappen kunnen zijn die een gebruiker neemt om een video te vinden en te downloaden, of hoe hij de media in zijn online bibliotheek beheert.

Kies de juiste getrouwheid

Trouwheid heeft betrekking op hoe sterk een prototype lijkt op de uiteindelijke oplossing. Er zijn meerdere dimensies van getrouwheid, en prototypes kunnen voor elk van deze dimensies ergens in het spectrum liggen. Afhankelijk van de fase van het ontwerpproces en de doelen van het prototype, kiest u de juiste getrouwheid voor elk van de volgende dimensies:

• Visuele getrouwheid (geschetst ↔ gestileerd) Look en feel zijn de meest in het oog springende dimensie van de getrouwheid van een prototype en kunnen, als ze niet goed gekozen worden, de beoordeling van prototypes op een zijspoor zetten. Ga te vroeg voor hi-fi en gebruikers zullen zich concentreren op het visuele ontwerp, wat niet gepast is in een vroeg stadium. Vanuit visueel oogpunt hoeven prototypes niet pixel-perfect te zijn, maar moeten ze proportioneel zijn; als het linker navigatiegebied bijvoorbeeld een vijfde van een 1024-pixel scherm moet innemen, hoeft het niet precies 204 pixels breed te zijn, zolang het maar proportioneel wordt afgebeeld in het prototype. Naarmate het prototype vordert in de ontwerpcyclus, kunt u de visuele waarheidsgetrouwheid waar nodig vergroten door stijlelementen, kleur, branding en grafische elementen toe te voegen.
• Functionele waarheidsgetrouwheid (statisch ↔ interactief) Laat het prototype zien hoe de oplossing zal werken (statisch) of lijkt het volledig functioneel te zijn en te reageren op de invoer van de gebruiker (interactief)? Deze dimensie leidt gebruikers minder af, maar door in volgende iteraties interactiviteit toe te voegen, neemt de functionele getrouwheid toe en kan het prototype worden gebruikt voor bruikbaarheidstests, training en communicatie.
• Inhoudelijke getrouwheid (lorem ipsum ↔ echte inhoud) Een andere dimensie die gebruikers vaak afleidt, is de inhoud die in het prototype wordt weergegeven. Kronkelige lijnen en dummytekst zoals lorem ipsum zijn nuttig om te vermijden in de vroege stadia van prototyping. Maar als het prototype wordt verfijnd, evalueer dan de noodzaak om dummy tekst te vervangen door echte inhoud om een gevoel te krijgen voor hoe het het totale ontwerp beïnvloedt.

Het Prototyping Spectrum

Low Fidelity

De snelste manier om te beginnen met prototyping is ook de makkelijkste: pen(cil) op papier zetten. Schetsen op papier is een low-fidelity aanpak die iedereen kan doen; geen speciaal gereedschap of ervaring vereist. Meestal gebruikt tijdens de vroege stadia van een ontwerpcyclus, is schetsen een snelle manier om ruwe mock-ups te maken van ontwerpbenaderingen en concepten en om feedback te krijgen van gebruikers. Papieren prototypes zijn ideaal tijdens brainstormsessies en conceptualiseringen. Papieren prototypes kunnen alleen in een ruimte worden gemaakt met een schetsboek of in een groep met een flip-over (of whiteboard) en stiften.

Gelegen aan de low-fidelity kant van het prototyping spectrum, zijn papieren prototypes statisch en hebben meestal een lage visuele en inhoudelijke getrouwheid. Dit dwingt gebruikers zich te concentreren op hoe ze het systeem zullen gebruiken in plaats van hoe het eruit zal zien, en het maakt ontwerpers meer open voor veranderingen op basis van feedback van gebruikers.

Low-fidelity prototyping leent zich voor rapid prototyping. Het heeft geen leercurve, maar stelt je in staat om gemakkelijk en snel veranderingen aan te brengen.

Medium Fidelity

Als we beginnen met het gebruik van computer-gebaseerde tools zoals Visio en Omnigraffle om te prototypen, neemt de getrouwheid op de meeste fronten toe, wat resulteert in medium-fidelity prototypes. Wireframes, task flows en scenario’s die met deze tools worden gemaakt kosten meer tijd en moeite, maar zien er formeler en verfijnder uit. Hoewel visuele elementen zoals branding, kleuren en stijl kunnen worden geïntroduceerd, blijven prototypers hier vaak van weg en richten zich in plaats daarvan op het demonstreren van het gedrag van de applicatie. Interactiviteit kan worden gesimuleerd door pagina’s of schermen aan elkaar te koppelen, maar de functionele betrouwbaarheid is hier in het beste geval gemiddeld. Deze prototypen zijn het meest geschikt om te bepalen of aan de behoeften van de gebruiker wordt voldaan en of de gebruikerservaring optimaal is.

Er zijn twee redenen waarom een medium-fidelity prototype er opzettelijk niet uitziet als een medium-fidelity prototype:

• De eerste is dat u, door Balsamiq of schetsmatige Visio-stencils te gebruiken om het prototype er low-fidelity uit te laten zien, gebruikers dwingt het te zien als een concept of werk in uitvoering, in plaats van een gepolijst en voltooid product.
• Het tweede is dat, door het prototype een hoge visuele getrouwheid te geven (bijvoorbeeld in een uitgebreide lay-out gedaan in Photoshop), u de gebruiker laat focussen op het visuele ontwerp en de look and feel, inclusief kleur, lettertypen, lay-out, logo en afbeeldingen.

De snelheid van medium-fidelity prototyping wordt bereikt met sjablonen, stencils en herbruikbare widgets en elementen. Het wordt sneller naarmate u vaardiger wordt met de tools van uw keuze.

High Fidelity

High-fidelity prototypes zijn het meest realistisch en worden vaak aangezien voor het eindproduct, maar ze zijn meestal tijdsintensief. Een paar jaar geleden was de enige manier om high-fidelity prototypes te maken het daadwerkelijk coderen met behulp van een programmeertaal, wat vaak vereiste dat de ontwerper en ontwikkelaar samenwerkten. Tegenwoordig kunnen niet-technische gebruikers echter met behulp van applicatiesimulatietools UI-widgets slepen en neerzetten om high-fidelity prototypes te maken die de functionaliteit van het eindproduct simuleren, zelfs voor bedrijfslogica en database-interacties. Axure en iRise zijn voorbeelden van applicatie-simulatie tools die gebruikt kunnen worden om high-fidelity prototypes te maken.

Deze prototypes zijn geschikt wanneer hoge visuele en functionele getrouwheid vereist is; bijvoorbeeld bij de introductie van een nieuwe technologie (bijvoorbeeld bij de overgang van een mainframe applicatie – ja, die bestaan nog steeds – naar een Web-gebaseerde oplossing. De meeste van deze prototypes kunnen niet worden omgezet in bruikbare code, maar ze dienen als een uitstekende referentie voor ontwikkelaars. Ze zijn ook nuttig voor het uitvoeren van bruikbaarheidstests en het opleiden van gebruikers.

High-fidelity prototyping is relatief snel, gezien het niveau van interactiviteit en getrouwheid dat ermee gemoeid is, en het kan worden versneld door gebruik te maken van drag-and-drop simulatietools. Bovendien vergemakkelijken sommige van deze tools het verzamelen van gebruikersfeedback en het documenteren van requirements, wat het ontwerpproces verder versnelt. Ook al hoeft u geen nieuwe programmeertaal te leren, deze hulpmiddelen hebben wel een leercurve.

Selecting a Fidelity Level

Bij het kiezen van een prototype getrouwheid, is er niet één juiste aanpak. De meeste ontwerpen van nieuwe producten kunnen het beste beginnen met schetsen, om vervolgens over te gaan naar ofwel medium- of high-fidelity prototypes, afhankelijk van de complexiteit van het systeem en de eisen van de fidelity dimensies.

In het werken met een bepaalde klant in de farmaceutische industrie, gingen we van whiteboards naar interactieve prototypes die een hoge functionele en inhoudelijke fidelity hadden, maar een lage visuele fidelity. Voor een andere klant, deze in de detailhandel, moest ons interactieve prototype een hoge visuele en functionele getrouwheid hebben. De inhoudelijke getrouwheid deed er niet toe omdat zij de inhoud zouden hergebruiken en er al mee bekend waren. Voor hen waren de look en feel en de interactieve ervaring belangrijker omdat dit hun eerste implementatie van SharePoint was, en ze wilden de portal er “niet-SharePointy” uit laten zien!

Selecting Tools

Afhankelijk van je aanpak, heb je een breed scala aan tools om uit te kiezen. Dan Harrelson heeft een lijst samengesteld van populaire prototyping tools op de Adaptive Path blog.

Elke tool heeft zijn eigen functies en sterke punten. Beoordeel op basis van uw behoeften en de eisen van de projecten waaraan u werkt, welke tool het meest geschikt zou zijn. Hier zijn enkele vragen die u kunt overwegen bij het evalueren van tools:

• Hoe eenvoudig is het om de tool te leren en te gebruiken?
• Is het flexibel om prototypes te ondersteunen voor web-, pakket- en maatwerksoftwaretoepassingen, evenals desktop- en mobiele applicaties?
• Is er een repository van herbruikbare stencils, sjablonen of widgets beschikbaar?
• Hoe eenvoudig is het om het prototype te delen met anderen voor beoordeling? Kan hun feedback met de tool worden vastgelegd?
• Hoe gemakkelijk is het om direct wijzigingen aan te brengen of feedback te verwerken?
• Kent de tool samenwerking, bijvoorbeeld door meerdere mensen tegelijk aan het prototype te laten werken?
• Wat zijn de licentievoorwaarden en -kosten?

Dos And Don’ts

Als u aan de slag gaat, zijn hier een paar punten over effectieve rapid prototyping om in gedachten te houden:

Doen…

• Samenwerken met gebruikers, business en IT stakeholders tijdens rapid prototyping. Naast het geven van waardevolle feedback, krijgen zij ook een gevoel van eigenaarschap over het eindproduct.
• Vermijd “prototype creep” door verwachtingen te stellen voor het proces, inclusief die van invloed zijn op het doel, de getrouwheid, de reikwijdte en de duur. Herinner iedereen, inclusief uzelf, eraan dat rapid prototyping een middel is om een doel te bereiken, niet een doel op zich.
• Bouw bij het maken van interactieve high-fidelity prototypes en simulaties realistische vertragingen in (bijvoorbeeld voor het verversen van het scherm of het doorlopen van de stappen van een transactie), zodat gebruikers geen onmiddellijke reactietijden van het eindproduct verwachten.
• Hergebruik, hergebruik, hergebruik. Voor computer-based prototyping betekent dit het opslaan van herbruikbare templates, stencils, patronen en widgets voor toekomstige projecten.
• Het belangrijkste is dat u elke prototype review sessie begint met de disclaimer dat dit slechts een prototype is, een mock-up, niet de werkelijke oplossing. Dit herinnert gebruikers eraan dat dit een werk in uitvoering is, het moedigt feedback aan, en in het geval van high-fidelity prototypes, voorkomt het dat gebruikers het verwarren met een werkende oplossing.

Don’t…

• Doe geen prototypes van functies of functionaliteit die niet kunnen worden geïmplementeerd- vaak een probleem met softwarepakket implementaties. Bij twijfel, bevestig met ontwikkelaars voordat u begint.
• Neem niet elke verandering of verzoek dat uit een prototype review komt als een nieuwe eis. Rapid prototyping helpt bij het vastleggen van gemiste eisen, maar deze nieuwe eisen moeten zorgvuldig worden geëvalueerd. Sommige kunnen worden geïmplementeerd, terwijl andere worden doorgeschoven naar een toekomstige release.
• Ga niet van start met prototype review sessies zonder duidelijke richtlijnen voor feedback. Wees heel specifiek over het type feedback waar u naar op zoek bent. (Zijn de stappen logisch gerangschikt? Is de navigatie duidelijk en intuïtief?) Zo niet, wees dan voorbereid op: “Ik vind het blauw in de header niet mooi,” of “Kunnen we in plaats daarvan niet dit lettertype gebruiken?” of “Kun je dit groter, vetter, in rood en knipperend maken?”
• Doe niet zo perfectionistisch. In de meeste gevallen hoeft rapid prototyping niet 100% perfect te zijn, net goed genoeg om iedereen een gemeenschappelijk begrip te geven.
• Doe niet aan alles een prototype. Meestal hoeft dat ook niet.

Volgende bronnen

• Als u een duwtje in de rug nodig heeft om te beginnen met schetsen, probeer dan Dan Roam’s boek The Back of the Napkin.
• Lees meer over paper prototyping in Carolyn Snyder’s boek Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces.
• Sketchboarding, een techniek om concepten te verkennen en te verfijnen.
• Nood aan low-fidelity content? Genereer Lorem Ipsum-tekst voor uw prototype.
• Wilt u uw papieren schets er high-fidelity uit laten zien? Probeer deze web-, iPad- en iPhone-stencils.
• Sketching and Prototyping Tools for iPhone Apps
• Eenvoudig schetsen en prototypen in Firefox met de Pencil add-on.
• Gratis Printable Sketching, Wireframing and Note-Taking PDF Templates
• 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

(al)