Card sorting
In een eerdere post heb ik al even stilgestaan bij card sorting. Deze manier van workshop is een speelse, maar zeer effectieve methode om te bekijken hoe de structuur van een website zou moeten zijn. Belangrijk is namelijk dat je de workshop doet met eindgebruikers van de site.

Uitgebreide uitleg over card sorting. Inclusief praktijkvoorbeelden!
Nou is er in de eerdere post kort even stilgestaan bij wat card sorting is en wat de voordelen – in mijn ogen – zijn. Vorige week kwam ik een interessant artikel tegen, waarin er nog meer wordt verteld over card sorting. Meer detail en.. Praktijkvoorbeelden! Bekijk dus snel deze bron van inspiratie op de site van Six Revisions. Vragen? Laat een comment achter en wij zullen zo snel mogelijk antwoorden!

Blijf bij de les
Tijdens een workshop kunnen er factoren zijn die de uitkomst van een workshop beïnvloeden. Een voorbeeld is de zojuist geschetste situatie. Om zulke situaties te voorkomen, is het belangrijk dat er een leider aanwezig is bij de workshop. Dan hebben we het niet over de directeur die – zo goed als hij kan – objectief naar de zaken kijkt, maar over iemand die alleen het proces in de gaten houdt. Inclusief échte objectiviteit. Een dergelijk onmisbaar persoon is een facilitator. Zoals in een eerder artikel al gemeld, is dit de persoon die de workshop in goede banen moet gaan leiden. De facilitator zorgt er onder andere voor dat iedereen bij de les blijft. Dit klinkt makkelijk, maar in de werkelijkheid is het erg moeilijk. Als facilitator wil je namelijk niet het groepsproces onderbreken, maar wil je wel dat iedereen zijn aandacht erbij houdt. Eén van de belangrijkste instrumenten van een facilitator is zijn eigen lichaam. Non-verbale communicatie kan al voldoende zijn om iedereen weer bij de les te krijgen.

Tel tot tien!
Non-verbale communicatie is eigenlijk alles wat je zonder woorden communiceert, bewust of onbewust. We hebben het dan dus over je lichaamstaal. Een voorbeeld van lichaamstaal in het dagelijks leven: jij zit in de auto en je wordt afgesneden door iemand die van rechts komt. Je wordt behoorlijk pissig, want jij had voorrang! Je maakt handgebaren – we zeggen niet welke -, je veert op en neer op je stoel van woede, je knokkels worden wit omdat jij je stuur steviger vastpakt van woede, je wenkbrauwen zakken,  de ader op je voorhoofd wordt zichtbaarder dan ooit, je knijpt met je ogen en ga zo maar door. Andere automobilisten zien precies welke emotie je doormaakt. Niet door wat je zegt, maar door wat je doet. Door je lichaamstaal.

Hoe herken je boosheid? Bron: FOX / Lie To Me

• De facilitator maakt oogcontact met de collega en maakt met zijn lichaam duidelijk dat hij zijn gedrag afkeurt (hoofdschudden, beweging van je telefoon in je zak doen, etc);
• De facilitator zet één (of meerdere) stap(pen) in de richting van de collega, die zich hierdoor ongemakkelijk voelt;
• Als het nog niet helpt, kan de facilitator schuin achter de collega gaan staan en dan ‘over zijn schouder meekijken’. Weer om het ongemakkelijke gevoel op te roepen.

Motiveren om mee te doen
Hopelijk is dit genoeg om de continu contact zoekende collega bij de les te krijgen en te houden. In sommige gevallen is dit echter niet zo. Het kan voorkomen dat de collega zo druk bezig is met zijn telefoon dat jouw non-verbale communicatie helemaal niet aankomt. Of dat het bewust wordt genegeerd, omdat de conversatie simpelweg te leuk is. Dan kan je als facilitator overgaan op het motiveren van personen. Je kan de collega betrekken om actief deel te nemen in de discussie die gaande is. Vragen als “Wat vind jij er van?” of “Kan je samenvatten wat er net is gezegd?” dwingt de persoon om wat te zeggen en op te letten. Als hij/zij geen (goed) antwoord heeft, zal hij des te meer de noodzaak voelen om weer actief deel te nemen in de workshop. En anders zal de collega wel aangepakt worden door één van de twee kemphanen…

De persoonlijke factor
Helpt dit nou nog steeds niet? Dan is er nog maar één oplossing om deze situatie op te lossen: de collega confronteren met zijn gedrag. Uiteraard zijn er verschillende manieren om de collega te confronteren:

• Influisteren dat de collega de telefoon moet wegleggen, zonder de discussie te onderbreken;
• In het bijzijn van de gehele groep aanspreken, waardoor de workshop wordt stilgelegd;
• Apart nemen gedurende de pauze, om diegene te wijzen op zijn/haar gedrag.

Een belangrijke afweging hierbij is de personlijke factor. Als je iemand voor het blok zet tijdens de workshop, in het bijzijn van collega’s, kan dit confronterend overkomen en een averechtse werking hebben. De collega kan dan ineens een dwarsligger worden. Laat jouw aanpak dus – mede – afhangen van de persoon die je aanspreekt!

Samenvattend…
Kortom: het is belangrijk om een objectieve facilitator bij een workshop te hebben, die zich alleen focust op het proces. De facilitator moet de personen in de workshop goed observeren. In sommige situaties moet de facilitator personen afremmen, in andere situaties motiveren. Verder moet de facilitator oog hebben voor de persoonlijke factor. Maar het belangrijkste is dat de facilitator ervoor zorgt dat het doel wordt bereikt.

Heb je behoefte aan een facilitator? Of aan tips en trucs? Je weet ons te vinden. En misschien vraag jij je nog af wat je er tegen kan doen dat jij continu werd afgeleid door die collega. Tja, dat antwoord kan jij zelf alleen geven…

Daar zit je dan. Tegenover een klant. Een klant met een vraag en veelal een (vaag) idee waar hij naartoe zou willen. “En ik wil ook iets met social media. Daar hoor je tegenwoordig zoveel over!”

En jij zit tegenover hem. Met de expertise om een antwoord te geven op de vraag van de klant. Maar eerst moet je er achter zien te komen waar het pijn doet. Vragen stellen is één van de mogelijkheden. “Maar weet je wel wat social media is?”Dit redelijk standaard vraag en antwoord spel leidt al snel – afhankelijk van je eigen expertise – tot een beeld van de best passende oplossing voor de klant. Nu kan je een dik functioneel ontwerp schrijven of andere grote plannen schrijven maar ik hou het vaak bij het maken van schetsen. Per slot van rekening is men meer visueel ingesteld en leest men toch niet (let op de algemeenheid. Ik wil niet tegen schenen schoppen).

De schetsen – ook wel wireframing – komen voor in vele soorten en maten en er zijn diverse pakket voor om de wireframes samen te stellen. Toch één van de bekendste methode is de aloude pen-en-papier methode. Wireframing kan – theoretisch gezien – op  twee manieren. Low Fidelity en High Fidelity wireframing. Dit artikel gaat in op low fidelity. Let op: dit is zeer theoretisch. Elke hybride versie is mogelijk. Ga uit van de klant en laat je leiden door hem. Er zijn diverse voordelen en nadelen aan beide methodes.

Doel van wireframes

Met een wireframe kan men snel en simpel elementen en content op een webpagina organiseren. Denk aan elementen als een menu balk, login gedeelte, tekst gedeelte, eventueel banners of andere afbeeldingen al naar gelang de gewenste functionaliteit. Het wireframe geeft de verhoudingen van de functionaliteit in de online oplossing weer. De wireframes zijn een belangrijke referentie gedurende de realisatiefase van een project. Een blauwdruk.

Het wireframe is het praatmodel gedurende het project. Niet alleen richting klant maar ook richting de grafisch ontwerper, functioneel ontwerper, ontwikkelaars en testers in het project! Kortom, een onmisbaar onderdeel om een project goed te laten verlopen.  

Low Fidelity Wireframing

Dit is de snelste en simpelste manier van schetsen op papier krijgen. Veelal wordt hier ook echt pen en papier gebruik alvorens het wordt uitgewerkt in een High Fidelity Wireframing. Een aantal handvaten die ik zelf altijd gebruik:

• Werk de schetsen uit in zwart-grijs-wit;
• Gebruik zogenaamde placeholders voor afbeeldingen en geen afbeeldingen zelf;
• Gebruik lipsum teksten in plaats van relevante content;
• Hou het high level en voorkom details. Dit komt in een later stadium wel;
• Gebruik een vast datum formaat (00-december-0000) door alle schermen heen.

Naast de ouderwetse pen-en-papier methode maak ik ook gebruik van Pencil of Balsamiq op mijn laptop en iMockups op de iPad (let op: link gaat naar de First Gen iPad).

Pencil, Balsamiq en iMockups zijn tools waar veel elementen al standaard in opgenomen zijn. Door middel van drag-and-drop kan je al snel een wireframe samenstellen. Daarnaast zijn er veel bronnen met templates waar allemaal elementen zijn samengevoegd in zogenaamde toolkits:

• Teehan+lax
• Moobileframes
• Eleqtriq
• Wireframe toolkit for Keynote

Het grote gevaar van low fidelity wireframing is de snelheid waarop je schermen kunt samenstellen. De eerste vraag die je kunt verwachten van de klant is: “Is het al klaar dan?”. Helaas, ik heb geen direct antwoord op deze vraag. Wees creatief en zorg ervoor dat de boodschap is dat de wireframes een fundament vormen voor de uiteindeiljke oplossing, en niet de oplossing zelf.

In het volgende artikel ga ik in op High Fidelity Wireframing. Daar is het risico op de bovenstaande opmerking nog groter. Daar zal ik wat meer voer geven om de klant te  overtuigen dat het geen grafisch ontwerp is.

Voorbeelden low fidelity

Opgemaakt met pen en papier

Opgemaakt met Pencil

Opgemaakt met Photoshop

Brown paper sessie
Een veel gebruikte methode is een brown paper sessie. Er wordt een vel papier aan de muur gehangen – bruin papier inderdaad -. De deelnemers van de sessie krijgen dan een stapel met post-its. De facilitator geeft de deelnemers een opdracht, bijvoorbeeld: “Noem zoveel mogelijk functionaliteiten die je wil terugzien op onze nieuwe website”. De deelnemers schrijven – ieder voor zich – zijn/haar ideeën op. Deze worden vervolgens op het vel papier gehangen, zodat er een totaaloverzicht wordt gevormd. Aan de hand van eventuele toelichting kan er geclusterd worden. Post-its die dezelfde functionaliteit dekken, worden dan bij elkaar gehangen. Als alles bij elkaar is gehangen, kan er geprioriteerd worden. Dit wil zeggen: wat is het belangrijkste en wat het minst belangrijk? Zo ontstaat er een lijst met functionaliteiten, die geordend zijn op mate van belangrijkheid. Het prioriteren kan op verschillende manieren gebeuren, bijvoorbeeld met de MoSCoW-methode of buy-a-feature. Beiden worden later toegelicht.

Voorbeeld van post-its

Voordelen van brown paper sessies zijn:

• Het is goedkoop en relatief snel;
• Je kan er heel resultaatgericht mee werken (mits je het juiste doel hebt gekozen voor je workshop);
• Je kan ideeën van verschillende stakeholders inzichtelijk maken voor elkaar.

MoSCoW
Het kan zijn dat je een workshop hebt gedaan, waaruit zaken geprioriteerd moeten worden. Het kan ook zomaar zijn, dat dit uit een eerdere analyse komt. Hoe dan ook, de MoSCoW-methode biedt uitkomst. MoSCoW is eigenlijk een afkorting voor: Must have, Should have, Could have, Will not have. Tijdens een workshop waarin MoSCoW wordt gebruikt, krijgen de deelnemers stickers in verschillende kleuren. Iedere kleur staat voor een bepaald niveau (M, S, C of W) en van iedere kleur zijn er een beperkt aantal. De deelnemers moeten deze vervolgens opplakken op de post-its. Hierdoor kan er snel inzicht verkregen worden in de mate van belangrijkheid.

Uitkomst van MoSCoW

Voordelen van de MoSCoW-methode zijn:

• Je kan in groepsverband prioriteiten stellen;
• Het is een relatief kleine inspanning;
• Iedere deelnemer heeft even veel inspraak in de uiteindelijke uitkomst. Iedereen heeft immers hetzelfde aantal stickers.

Buy-a-feature
De naam van deze methode zegt het eigenlijk al. Je laat de deelnemers van de workshop functionaliteiten ‘kopen’. Als facilitator geef je een prijs aan alle functionaliteiten en je geeft de deelnemers een budget. Een bedrag waarmee ongeveer 60% van de functionaliteiten gekocht kan worden, is een goede leidraad. Daarna kan het spel beginnen! De deelnemers kunnen dan met hun gezamenlijke budget bepalen wat uiteindelijk belangrijk is (veel budget aan uitgegeven) en wat niet belangrijk is (weinig / geen budget aan uitgegeven).

Foto: Concept7

Voordelen van buy-a-feature zijn:

• Het is leuk om te doen;
• Deelnemers kunnen gezamenlijk bepalen wat belangrijk is (en hier moeten ze dus concensus in bereiken);
• Het is een relatief kleine inspanning (uiteraard afhankelijk van de mate van discussie).

Card sorting
Een methode die veelal bij (web)design wordt gebruikt, is card sorting. Gebruikers van het uiteindelijke design krijgen een stapel met kaarten. Deze kaarten zijn representatief voor onderdelen van het design. Vervolgens wordt er aan de gebruikers gevraagd om deze kaarten op een – voor hen – logische manier te ordenen, met als doel het creëren van structuur. Dit kan een navigatiestructuur zijn, maar dit kan ook de structuur van een bepaalde pagina op de website zijn.

Card sorting kan in twee varianten: een open card sorting of een closed card sorting. Bij de open-variant, mag de gebruiker zelf categoriën bedenken. Bij de closed-variant mag dit niet. Hier liggen de categoriën al vast. Door meerdere gebruikers deze test te laten doen, krijgen de ontwerpers een goed beeld wat logisch is voor de eindgebruiker.

Foto: Jakob Nielsen

Voordelen van card sorting zijn:

• Het is goedkoop;
• Voor de gebruikers c.q. testpersonen is ook dit een kleine inspanning: slechts vijf minuten werk;
• Het biedt ontwikkelaars inzicht in wat de eindgebruiker belangrijk vind;
• Het kan ook online gedaan worden, waardoor mensen het op een eigen gekozen tijdstip kunnen uitvoeren.

Interviews
Uiteraard is er ook nog de old-fashion way: het interviewen van de stakeholders. Dit heeft niet veel uitleg nodig lijkt mij zo? Heel kort dan: de facilitator gaat samen met (een aantal) stakeholder(s) in een aparte ruimte zitten, waarin een vragenlijst puntgewijs wordt afgewerkt. Dit gebeurd mondeling.

Interview

Voordelen van een interview zijn:

• Het is persoonlijk;
• Personen kunnen vrijuit spreken, zonder de discussie met anderen aan te gaan;
• Als facilitator kan je de geinterviewde persoon beter sturen.

Andere ervaringen?
Deze vijf workshopmethoden zijn maar enkele voorbeelden van soorten workshops. Heb jij wel eens een andere methode toegepast? Deel je ervaringen in de comments!

Met z’n allen in een hokje
Bij een workshop verzamelen we diverse personen uit de organisatie in één ruimte. Onder leiding van in ieder geval een facilitator worden verschillende onderwerpen groepsgewijs behandeld. Bij grote workshops kunnen er nog diverse andere rollen zijn, zoals een expert en een observeerder. Tijdens zo’n workshop moet het groepsbelang voorop staan! Zoals gezegd heeft iedereen een eigen belang. Op verschillende manieren kunnen deze belangen worden achterhaald en vervolgens worden afgezet tegen andere belangen. Consensus bereiken – zo u wilt.

Een gevaar op de loer…
Terug naar waar we waren gebleven. Een goede voorbereiding is dus nodig. Van tevoren een doel bepalen en een weg om tot dit doel te bereiken, zonder iemand te passeren. Als dit doel niet (geheel) vastgesteld is en duidelijk is gemaakt aan de deelnemers, bestaat er het risico dat de uitkomst van de workshop uiteindelijk heel iets anders is dan dat er van tevoren werd verwacht. Wellicht zelfs onbruikbaar.  Wat doe je onder andere tijdens de voorbereiding:

• Bepalen van het te bereiken doel;
• Bepalen van het pad om dit doel te bereiken (session plan);
• Gedetailleerde agenda opstellen;
• Checklist maken (Wat neem ik mee? Wat moet er geregeld worden door anderen?)

Verder moet er goed nagedacht worden over de methode die gebruikt gaat worden. Wordt het een brown paper sessie? Of gaan we voor card sorting? Of eigenlijk toch buy-a-feature? Het is allemaal afhankelijk van de deelnemers aan de workshop en het doel dat je voor ogen hebt. Meer hierover.. In het vervolgartikel.

Dus hierbij enkele tips om jouw eigen infographic te maken:

• Weet voor wie je de infographic maakt en teken hiernaar;
• Beperk het onderwerp van je infographic. Van een afstand moet het in één oogopslag duidelijk zijn wat het onderwerp is;
• Gebruik kleur maar voorkom een bonte koe;
• Net als grafisch ontwerp zit er altijd een gedachte achter vorm, tekst en beeld;
• Net als vele andere toepassingen geldt ook voor een infographic KEEP IT SIMPLE.

Als een infographic logisch is, of het predikaat ‘duidelijk’ krijgt, is aan de bovenstaande eisen voldaan. Zie hieronder een voorbeeld van een CV (Michael Anderson) waarbij gebruik gemaakt is van een infographic. Zijn duidelijke visie is het beeld krijgen van ervaringen. Zijn skills uitgezet in de tijd en gelinkt aan werkgevers bij wie hij door de tijd heen heeft gewerkt.

Wat minder goed is is het kleurgebruik in de drie grafieken. Overal heeft de kleur een andere betekenis. Dit kan erg verwarrend werken. In de ene staat de kleur groen voor HUMOR en in de andere voor WEBDESIGN. Niet echt gelinkt aan elkaar zou je zeggen.

Hieronder nog een paar voorbeelden van een CV in #infographic formaat:

• Chris Spurlock, student
• T. Rodd Stevens
• A. DePaulo

Maar ook over andere onderwerpen zoals:

• The journey of a tweet
• The boom of social sites (Focus)
• Profile of a Twitter user
• and so on, and so on…

Mocht je geinteresseerd zijn in een infographic voor je eigen CV, als flyer op een beurs, ter ondersteuning van een artikel, ter informatie op je eigen website en noem maar op … don’t hesitate.

Landingspagina
Veel sites maken er gebruik van. Een landingspagina. Het is de eerste pagina die de bezoeker van jouw website ziet. Dit is een unieke gelegenheid om de bezoeker op het goede spoor te krijgen. Maar hoe kan je dit het beste doen? Wat zet je waar neer? En waar moet je op letten? Bekijk de volgende infographic:

Op- of aanmerkingen?
Uiteraard zijn wij benieuwd naar jullie ervaringen met een landingspagina. Ben je het eens met wat er gezegd wordt in de infographic? Of heb je een andere mening? Laat het weten in de comments!

Wie?
Dus laten we beginnen met de vraag wie ik ben. Dat is simpel te beantwoorden voor mij (uiteraard). Jeffrey van den Dungen Bille is de naam. Geboren te Amsterdam in 1987, tegenwoordig woonachtig in Almere. Via de HAVO, terecht gekomen op het Instituut voor Information Engineering. Tegenwoordig onderdeel van Hogeschool Windesheim Flevoland. In juli 2009 begonnen bij VLC en sinds eind vorig jaar dus collega van Marcel. Naast deze werkzaamheden ben ik ook nog eens stemacteur. Stemacteur? Ja, stemacteur! Ik spreek reclames, films, tv-series et cetera in. Ook wel nasynchroniseren.

En wat kom je doen?
Nou… Dat is een goede vraag. Marcel heeft mij uitgenodigd voor deze geweldige site, dus ik ga me natuurlijk met hart en ziel inzetten. Ik zal proberen één keer in de zoveel tijd een nieuwe post te schrijven over onderwerpen die mij aanspreken. Heb je suggesties? Let me (or Marcel) know!

See you later @ iPinda!

Wil jij ook meeschrijven neem dan contact met mij op… Let op: we hebben wel een streng aanname beleid!!! Maakt de uitdaging des te groter, niet dan …

En oh ja, volg ons weer… er komt weer leven in de brouwerij. Leven is te mooi.

Tjauw,
Marcel