Tips en trucs om beter te ontwerpen en te wireframen

16 augustus 2010 om 09:51

Beter ontwerpenBij ontwerpen komt veel kijken: hoe begin je? Waar moet je om denken? Hoe bespaar je jezelf tijd? In dit artikel bespreek ik een aantal tips en trucs, om beter en gemakkelijker te ontwerpen en te wireframen.

Ontwerp je geen wireframes? Geen nood: het grootste deel van dit artikel is ook bruikbaar voor andere ontwerpers!

Het ontwerp proces

Bij het ontwerpen is het proces belangrijk: hoe ontwerp je slim en doelgericht? Lees hieronder hoe je je ontwerpproces kunt verbeteren.

Denk voor je doet

Je vingers jeuken om met een nieuwe opdracht te beginnen, en het is daarom verleidelijk om direct aan de slag te gaan met het uitwerken. Het is echter veel effectiever om éérst goed na te denken wat de opdracht inhoudt, hoe je dat gaat aanpakken én je doelgroep te leren kennen. Dit scheelt je later in het ontwerpproces niet alleen tijd, maar het zorgt ook voor een beter eindresultaat.

Denk na over het totaalplaatje: zie het geheel

Begin niet lukraak pagina’s uit te werken, maar denk na over het totaalplaatje. Stel dat je een bestelproces moet ontwerpen voor een klant, dan is het slim om éérst de stappen te bepalen die in het bestelproces horen. Het bestelproces zou uit de volgende stappen kunnen bestaan:

Door het totaalplaatje te zien signaleer je eerder consequenties, het helpt je prioriteiten te stellen in het uitwerken van specifieke pagina’s, kun je gerichter en beter ontwerpen en bespaar je jezelf onnodig werk. Is het bijvoorbeeld wel nodig om registratie aan het begin van het proces verplicht te stellen? Is het misschien beter om ook te kunnen bestellen zónder registratie? Wil je een bestelproces van één pagina? En wat zijn de verschillen per pagina voor nieuwe gebruikers, ten opzichte van bestaande gebruikers? Als je direct met één pagina begint kom je deze vragen pas laat tegen, en moet je misschien een (groot) deel van je ontwerp overdoen.

Flowchart

Een flowchart kan helpen voor het totaalplaatje

Denk ook na over ontwerpprincipes, zodat je ontwerp consistent wordt. Bij het bestelproces zou een ontwerpprincipe kunnen zijn: buttons voor een volgende stap in het proces staan altijd rechts, en vallen het meest op. Buttons voor een vorige stap zijn kleiner, en staan altijd links.

Het totaalplaatje kun je op verschillende manieren helder krijgen:

Wil je meer weten over deze middelen, lees dan het artikel van Semantic studio’s: User experience deliverables. Maar soms is gezond verstand en wat tijd al voldoende.

Schets je ontwerpen

Heb je helder wat je wilt en hoe het totaalplaatje eruit ziet? Pak potlood en papier, en ga schetsen! Schetsen is verreweg de snelste manier om je ontwerp uit te werken en te verbeteren. Een ontwerp is nooit in één keer goed, maar een kwestie van continue bijschaven wat met schetsen snel kan. Door alle belangrijke pagina’s en/of flows uit te werken kun je bovendien controleren of je zaken over het hoofd hebt gezien en of je totale opzet op elkaar aansluit.

Leg gewoon je schetsen voor je neer en loop de pagina’s door. Hiermee verklein je de kans dat je in een laat stadium pas zaken ontdekt die impact hebben. Bovendien kun je schetsen laten zien aan teamleden of de klant om input te halen, en je komt vaak zelf al tot nieuwe inzichten. Schets in het begin niet té gedetailleerd.

Schetsen hoeft niet altijd netjes

Meer over schetsen:

Werk belangrijke unieke pagina’s en templates uit

Als je weet wat je uit wilt werken is het handig om te bepalen welke unieke pagina’s je uit moet werken (bijvoorbeeld de homepage, contactpagina of een ‘over ons’-pagina). Naast de unieke pagina’s zijn er ook pagina’s die verschillen qua content, maar wel dezelfde opzet hebben (voorbeelden zijn productoverzichtspagina’s, productdetailpagina’s, contentpagina’s etc.)

Het heeft geen zin om deze allemaal uit te gaan werken. In plaats daarvan kun je beter één template ontwerpen: een template fungeert dan als ‘mal’ voor de andere pagina’s. Dit scheelt niet alleen ontwerptijd, maar als je later wijzigingen wilt doorvoeren hoef je dit ook maar op één plek te doen.

Gebruik patterns

Gebruikers bezoeken veel verschillende sites, en hebben geleerd hoe bepaalde onderdelen op een website (meestal) werken. Denk bijvoorbeeld aan een inlogscherm of een zoekfunctie. Gangbare, standaard oplossingen voor onderdelen op websites worden patterns genoemd: een pattern is “… een bewezen herbruikbare oplossing voor een veel voorkomend vraagstuk.”

Door patterns te gebruiken voorkom je dat je elke keer het wiel opnieuw moet uitvinden, en bespaart het je tijd. Daarnaast is dit prettig voor gebruikers, omdat hij of zij op voorhand al een idee heeft hoe het specifieke onderdeel gaat werken. Naast het gebruiken van patterns loont het de moeite om een pattern library voor jezelf aan te leggen, of je te laten inspireren door één van de vele pattern sites op internet.

Voorbeeld van een pattern


Meer over patterns:

Gebruik de juiste tools

Hierboven heb je tips en trucs kunnen lezen om slim en doelgericht te ontwerpen. Maar hoe zorg je ervoor dat je je ontwerp(schetsen) zo optimaal mogelijk uitwerkt?

Kies een pakket dat bij je past

Als je regelmatig wireframes ontwerpt, loont het de moeite om goed na te denken over welk pakket bij jouw eisen en wensen past. Wil je clickable demo’s of prototypes kunnen maken? Moet je ontwerpdocumentatie kunnen genereren? Hoe wil je je werk exporteren? Wat past bij jouw werkwijze?

Uiteraard geldt dit ook voor bijvoorbeeld designers en ontwikkelaars!

Wil je meer weten over gangbare wireframepaketten? Lees dan onze Review wireframe pakketten (deel 1)

Ontwerp een standaard template

Zorg dat je éénmalig tijd investeert om een goed template voor jezelf te ontwerpen, dat je voor je projecten kunt gebruiken. Dit scheelt tijd bij een nieuwe opdracht, en zorgt ervoor dat je documentatie er professioneel uitziet en uniform is. Onderschat het effect van verzorgde documentatie op je opdrachtgever niet! Daarnaast kun je – als je wat tijd over hebt – je template eenvoudig doorontwikkelen, waardoor deze nóg beter wordt.

Inspiratie voor een eigen template: www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files. Gebruik je Axure? Dan is deze link interessant: http://www.axure.com/widgetLibraries.aspx

Hieronder lees je tips voor je template.

Tips voor je template

Benaming en nummering van je pagina’s

Het is handig om na te denken over de benaming van je pagina’s. Hiermee kun je in overleggen met de klant of collega’s snel verwijzen naar een specifieke pagina:

Voorbeeld sitemap

Voorbeeld benaming pagina’s

In de afbeelding hierboven zie je dat ik pagina’s een nummer geef (s006) en een titel (Homepage – (vervolg)). Op deze manier kan ik snel refereren aan een bepaalde pagina, door te verwijzen naar pagina ‘s006’.

Bij het opzetten van de belangrijkste pagina’s laat ik in het begin veel ruimte tussen de nummering. Zo heb je ruimte om later pagina’s in te voegen, zonder dat je de nummering direct aan hoeft te passen.


Maak onderscheid tussen pagina’s en views

Pagina’s in wireframes bevatten vaak veel functionaliteit, die elk weer verschillende views kunnen hebben. Een winkelmand kan bijvoorbeeld leeg zijn of artikelen bevatten, wel of geen afgeprijsd artikel bevatten, het artikel is uitverkocht etc. Dit zijn allemaal views van de winkelmand. Je ontwerp blijft overzichtelijk als je deze verschillende views op een aparte pagina uitwerkt:

Pagina Views

Links een pagina met een component (cart, rechtsboven met oranje overlay), rechts de views van de cart (voorbeeld via eightshapes.com)

Gebruik masters

Als je ontwerp vaste elementen heeft die vaak terugkeren is het slim om deze in masters te plaatsen. Stel dat elke pagina een footer heeft: gebruik je geen masters en je moet de footer aanpassen, dan moet je dit op elke afzonderlijke pagina doen. Gebruik je een master dan hoef je alléén de master te wijzigen, in plaats van de footer op álle pagina’s.


Gebruik toelichting

Bij je template is het slim om ruimte te reserveren voor toelichting. Dit kan bijvoorbeeld door voetnoten te gebruiken, hiermee kun je per pagina kort en bondig een toelichting geven op onderdelen van je ontwerp, zonder dat het onoverzichtelijk wordt:

Toelichting

Extra toelichting door voetnoten

Als een voetnoot vervalt is het niet handig om de nummering aan te passen, omdat dit tijdrovend kan zijn (en verwarrend als een teamlid of de klant naar een oude voetnoot op een pagina verwijst). Dit kun je eenvoudig oplossen door achter de betreffende voetnoot ‘Vervallen’ te zetten.


Grote wijzigingen

Breng je grote wijzigingen aan? Maak een kopie van de laatste versie, en verhoog het versienummer. Soms worden wijzigingen terug gedraaid, of is het handig om delen van je eerdere ontwerp toch weer op te nemen.


Wijzigingshistorie

Het kan handig zijn om een wijzigingshistorie per versie bij te houden (voor jezelf, voor teamgenoten, voor testers etc.). Dit kun je eenvoudig doen in een document. Je kunt volstaan met per versie de wijzigingen per pagina in een eenvoudig document te zetten:

Voorbeeld wijzigingshistorie

Voorbeeld wijzigingshistorie

Per versie wordt per pagina zo inzichtelijk wat de wijzigingen zijn. Het is handig om pas met een wijzigingshistorie te beginnen als je ontwerp redelijk uitgekristalliseerd is; in het begin wijzigt er vaak nog te veel.

Conclusie

Door slim en doelgericht te ontwerpen kun je jezelf veel tijd besparen, en wordt de kwaliteit van je ontwerp beter.

Bij het ontwerpproces zijn deze punten belangrijk:

Bij het uitwerken van je ontwerp is het belangrijk een pakket te kiezen dat bij je wensen past, en is het slim een standaard template te ontwerpen. Met de tips voor je template kun je je ontwerp goed documenteren en delen met het team.

Wat zijn jouw ervaringen? Reageer hieronder in de comments om je mening te geven, of deel je best practices!

Meer over wireframing:

Over de auteur

Ivo Bosma
Ivo werkt als interactie ontwerper en usability expert bij Concept7. http://www.ivobosma.nl/
http://www.concept7.nl
  • Norbert van Geijn

    Bedankt voor dit inzichtvolle overzicht.

    Verbetersuggestie: Peter = Martijn van Welie…?

  • IvoBosma

    Hallo Norbert,

    bedankt voor je reactie en je opmerkzaamheid :) Ik heb het aangepast!

  • Tomas

    Overzichtelijk artikel! Thanks!

  • http://www.cr3ative.nl/ Cr3ative.nl

    Interessant artikel, bedankt voor de informatie.

  • Pingback: Hoe je schetsen bijna tastbaar maakt – Week 9 | Nathan @ Concept7