bgimage

INCM-PIBN Talentenprogramma /  flow en dynamisch design

Anne van de Kamp op 25 juni 2014 CMD, Communicatie, Design, Interactie, Media

Veerle, Kaya en Anne sluiten het CMD Talentenprogramma af met waardevolle lessen over unhappy flow en dynamisch design. 

Q42 over de unhappy flow.

‘Q42 is een technisch innovatief internetbureau, zeggen sommigen. Nerds, zeggen anderen. Wij zelf bijvoorbeeld, als we eerlijk zijn. We houden namelijk heel erg van goed programmeren.’

Q42 is een technisch webbureau. Ze noemen het ook wel: de happy place for nerds. Per week hebben ze twee uur passietijd. Deze twee uur kunnen ze geheel zelf invullen met bijvoorbeeld een eigen project of nog net dat beetje extra doen waar de klant het belang niet van inziet, maar jij wel. Een mooi concept om iedereen gemotiveerd te houden en zo goed mogelijke opdrachten op te leveren. Daarnaast werken ze aan projecten zoals de website van het Rijksmuseum, de app van 9292ov, schooltas en de Staatsloterij. Veel projecten doen ze in samenwerking met Fabrique.


Designing en developing van alles wat er mis kan gaan; Unhappy flow

Een unhappy flow is alles wat er (qua techniek) mis gaat op een website. Dit kan bijvoorbeeld zitten in het niet kunnen vinden van een pagina (404 error) of zoekresultaten. Wanneer hier niet goed over nagedacht wordt kan dit voor de gebruiker erg frusterend zijn en kan deze zelfs afhaken. Vooral bij bijvoorbeeld webshop is dit een groot probleem gezien ze dan een klant missen. Het is daarom belangrijk dat je je klanten ook als het mis gaat helpt.

Zes richtlijnen om unhappy flows te verbeteren

   1.    Communiceer duidelijk dat er iets fout ging en wat er fout ging. Bijvoorbeeld bij een formulier; highlight de fout ingevulde gegevens en geef een suggestie tot verbetering of
nogmaals de opdracht.

   2.    Spreek de gebruiker met de juiste taal aan; wees vriendelijk en vragend en leg de fout bij jezelf.

   3.    Handel technische problemen goed op; geef een duidelijke call to action, bijvoorbeeld een terug knop. Wachten is nooit leuk, dus probeer deze pagina aantrekkelijker te maken door bijvoorbeeld quotes.

   4.    Wees een helpende hand; probeer mee te denken met de gebruiker door bijvoorbeeld alternatieven weer te geven. Dit doet google bijvoorbeeld met typ/spelfouten.

   5.    Geef de gebruiker bij geen resultaat een alternatief; als er iets niet is, geef dan feedback of alternatieven dingen.

   6.    Zorg voor een fallback als er niet direct aan bepaalde condities voldaan wordt; bijvoorbeeld het verschil laten zien tussen ingelogd en niet ingelogd.


Met andere woorden: Just fix it!
Laat je gebruiker niet op een dood spoor eindigen!

 

In de praktijk
Leuk al die theorie, maar hoe zit dat in de praktijk? Unhappy flows worden niet altijd belangrijk gevonden in de praktijk, maar eigenlijk is het wel een punt waar rekening mee gehouden zou moeten worden. Vanuit de ontwerper; je verkoopt iets aan de klant, je schetsen, je uitwerkingen. Maar je verkoopt natuurlijk nooit een unhappy flow. Want daar heeft je klant niets aan, alleen gaat de klant er nu van uit dat alles goed gaat. Vanuit de developer; probeer alternatieven te tonen, en zorg dat je teksten vriendelijk zijn. Het is wel belangrijk dat de klant zich op zijn gemak voelt. User testing; Als een testpersoon niet verder kan, zorg er dan voor dat hij/zij niet gefrustreerd raakt. Of als er een bepaalde website een product niet meer verkrijgbaar is, geef dan de mogelijkheid om geïnformeerd te worden wanneer het item wel weer te bestellen is.

Spread the word! Unhappy flows moeten serieus bekeken worden omdat je soms veel klanten kunt kwijtraken als er iets niet goed werkt.

 

Les 6: Mirabeau over dynamisch design

Dit keer waren we te gast bij Mirabeauwaar we een masterclass over dynamisch design kregen. De masterclass werd gegeven door Henk en Eelko, die allebei artdirector bij Mirabeau zijn.

Dynamisch design

Sinds gebruikers browsen met smartphones en tablets is het belangrijk om in het ontwerpproces rekening te houden met de wijze waarop content zich aanpast aan de schermresoluties. Hierdoor zijn designers en front-enders tegenwoordig op een meer dynamische wijze met webdesign bezig. De invalshoek is nog steeds technisch: hoe kunnen we het design zo optimaal mogelijk tonen op de verschillende devices? Met andere woorden, responsive of adaptive design, design dat zich automatisch aanpast aan het device wat je gebruikt.

Content first; Omdat je op sommigen devices niet alle ruimte hebt, moet je bij jezelf gaan bedenken wat je dan toont. Wat is de meest belangrijke content die jij je bezoekers wil tonen?

Dynamisch design; de inhoud, relevantie en actualiteiten bepalen het design. Daarnaast moet content aangepast worden van op basis van gebruikerswensen en gebruikersgedrag. Dit samen bepaalt de lay-out.

Typecase design
Om dit uit te leggen werd de metafoor van de letterbak gebruikt. 90% van de website ziet er nog steeds uit als een statische letterbak. Content die in hokjes is gestopt en weinig beleving geeft, ook wel statisch design. Een goed voorbeeld hiervan is de website van de Rabobank. De website communiceert nauwelijks. Ook printwerk is tegenwoordig dynamisch. Denk bijvoorbeeld aan een krant, de look en feel zijn hetzelfde maar er is steeds een andere indeling.

Webconventies doorbreken doorbreek vastgeroeste patronen

Denk hierbij aan het Logo. Deze staat tegenwoordig standaard links boven in de hoek en is altijd zichtbaar. Dynamisch design is meer content gedreven. Op elke pagina ga je je dus afvragen of het hier nodig is om het logo te laten zien. Misschien is een klein icoon of alleen dezelfde stijl ook al voldoende, bijvoorbeeld tijdens het boekingsproces van een vlucht.

Progressive reduction
Hierbij kijk je vooral naar het gedrag van je gebruikers en maak je gebruik van het niveau waarop zij zijn. Een gebruiker die voor de eerste keer komt moet je een uitgebreidere knop aanbieden dan iemand die er al erg mee bent is. Dit kan bijvoorbeeld door de knop steeds kleiner te maken of de naam die ernaast staat weg te halen. Op deze manier kun je gedrag vertalen naar design. Dit wordt echter nog niet vaak gebruikt vertelt Mirabeau, het staat nog echt in de kinderschoenen, maar zij zijn druk bezig om dit van de grond te krijgen.

Stappenplan Tips voor het creëren van een dynamische interface

   1.    Identificeer verschillende bezoekersgroepen en formuleer gedragspersona’s

   2.    Neem het gedrag van de bezoekersgroepen mee als variabele in je ontwerp

   3.    Maak de presentatie van de content (lay-out) afhankelijk van de gebruiker

   4.    Laat de lay-out mede bepalen door de gebruiker en niet alleen door de ontwerper.

   5.    Ontwerp geen template of infrastructuur (‘blokkendoos’) die je vervolgens vult met content maar ontwerp een systeem waarin de content tot leven kan komen.

   6.    Denk in transities.

blog_comment_title

blog_comments_title