Studio Dumbar is langs geweest voor een workshop over Social Networks. Nadat er wat over Studio Dumbar zelf aan de orde was gekomen (ze excelleren vooral in visual branding) hadden ze het over de ins en outs van social networks. Zo werden alle social networks opgenoemd die er maar denkbaar waren en werd er gekeken door wie van de aanwezigen deze ook daadwerkelijk gebruikt worden. Zo zie je dat een handje vol echt ‘hot’ is en de rest er maar een beetje bij hangt. Dit hangt vooral samen met de Unique Selling Points van de social network: waar richt een netwerk zich op en welke doelgroep beslaat dat. Wat is hun doel daarmee..

Een opdracht was vervolgens een aantal Social Networks op te sommen en daar de Unique Selling Points van te benoemen. De afbeelding hieronder geeft aan van welke negen online networks we de punten hebben benoemd, gevisualiseerd middels het Gene Smith honingraat.

Een tweede opdracht waar we mee aan de slag waren gegaan was het uitdenken van een marketing campagne voor Allsecure. De hoofdvraag daarbij was: ‘Via welke Social Networksites bereikt Allsecure zijn doel(groep)?’. Dit was nog best een lastige opgave. Aan het eind van het werkcollege hebben we hier het één en ander van gepresenteerd.

Social Networks is helemaal hot. Waarom iets nieuws aanleggen voor marketingcampagnes als de wegen naar Rome al geplaveid zijn? Hoe en van welke gebruik te maken, dat is de vraag van vandaag voor veel organisaties. Waar zit mijn doelgroep, hoe sluit ik aan bij hun sociale-network-wereld. Hoe wordt ik één met hun denken en doen. En andersom natuurlijk!

Laatst hadden we een workshop over het ontwerpen van online formulieren. Jet de Ket van de Belastingdienst gaf ons een kijkje in de gaarkeuken van de belastingdienst; voor wat betreft het designgedeelte dan. Het werd in ieder geval duidelijk dat voor zo een groot bedrijf als de Belastingdienst er wel een erg karige hoeveelheid aandacht geschonken wordt aan de tak van het interactie ontwerp. Ze laten dan nog wel eens wat steekje vallen als het hier op aan komt.

Dit ook bij het ontwerpen van de formulieren waarmee de belastingdienst zo bekend is, en is geworden. Niemand vind het leuk om dergelijke formulieren in te vullen, niemand doet het voor zijn of haar plezier. Dit moet dus zo gebruikersvriendelijk als mogelijk is gemaakt worden. Hier mag wel een beetje extra aandacht aan geschonken worden.

Als opdracht kregen we mee om een ontwerp te maken voor het formulier ‘Opgaaf startende ondernemer’; bekijk de orginele versie. Het formulier moet op de website van de Belastingdienst ingevuld kunnen worden. Het moet dus ook voldoen aan de huisstijl van de Belastingdienst. En natuurlijk zo gebruiksvriendelijk als mogelijk!

Ik heb het een en ander aan informatie doorgenomen aangaande het ontwerp van online formulieren. Daaruit heb ik een aantal wetenswaardigheden gefilterd. Allen van belang bij het goed en gebruiksvriendelijk ontwerp van formulieren.

• Het effectiefst werkt de label boven het invulveld plaatsen. Zo is in een oogopslag duidelijk wat er middels het invulveld van de gebruiker gevraagd wordt. Mensen werken in formulieren van boven naar beneden.
• Wanneer de meeste velden verplicht zijn, markeer de niet verplichte velden. Wanneer de meeste velden niet verplicht zijn, markeer de verplichte velden.
• In alle gevallen geldt: probeer niet verplichte velden te vermijden.
• Tekst werkt het best, maar voor verplichte velden is markeren met een * duidelijk.
• De verschil in lengtes van velden werkt ook verduidelijkend voor wat er ingevuld moet worden. Maar om ruis te voorkomen kan er ook gekozen worden voor gelijke lengtes van velden.
• Maak gebruik van (zo minmogelijk) visuele ondersteuning om relevante relaties van vragen aan te geven. Dit helpt bij het scannen.
• Maak duidelijk onderscheid tussen primaire en secundaire buttons. Wanneer mogelijk, vermijd secundaire opties.
• Lijn de buttons uit met de uitlijning van de vragen/velden. Zo heeft de gebruiker een duidelijk doel en een ‘rechte weg’ naar het completiseren van het formulier.
• Wanneer er veel verduidelijking nodig is, maak gebruik van dynamische hulpmiddelen.
• Bij grote formulieren: laat de progressie zien; maak het mogelijk om dingen op te slaan.
• Bij het invullen van formulieren wordt vaak gebruik gemaakt van ‘tabbing’. Bedenk dit bij het ontwerp, zorg voor een goede html markup. Vermijd ‘multi-columning’.
• Maak gebruik van ‘finger section tabs’ voor een rechte lijn naar completiseren.
• Directe feedback, wanneer de gebruiker aan het invullen is, verhoogt de snelheid. (communiceer niet alleen of iets voldoet, maar ook limieten. )
• Fouten/ontbreken van informatie duidelijk communiceren: aan de top van de pagina en met ‘double visual language’.
• Geef feedback wanneer een actie volbracht of bezig is. Zowel tekstueel als visueel, met de mogelijkheid het weer uit beeld te doen verdwijnen.
• Gebruik de <label> tag voor het labelen van input velden. Dit wordt correct geïnterpreteerd door screan readers.
• Gebruik de ‘tabindex attribute’ voor een correct tabpad.

Met deze punten in het achterhoofd heb ik de volgende wireframes gemaakt voor het formulier van de Belastingdienst. Klik op de afbeeldingen voor het juiste formaat.

Ik heb het ontwerp verder uitgewerkt in een aantal afbeeldingen die de flow van het invullen van het formulier weergeven. Bij het ontwerp is rekening gehouden met de beschikbare ruimte op de website van de Belastingdienst, alsmede de huisstijl. Bekijk hieronder de afbeeldingen; klik op de afbeeldingen voor het juiste formaat.

Maandag 22 september kregen we een Workshop Wireframes & IDD van Peter Conradie en Joel Laumans.

Voor de opdracht die hieraan verbonden was moesten we zelf een bepaald onderdeel van een website naar keuze bekijken en er een wireframe bij maken.

De website van mijn keuze is Facebook. Daarbinnen heb ik de functionaliteit rond een bericht in het prikbord bekeken. Hiervan heb ik onderstaande wireframes gemaakt.

Wireframe 1

Deze afbeelding toont de selectie binnen Facebook waarvan volgend wireframe is gemaakt.

Download hieronder de wireframe (pdf)
Wireframe_facebook_1.1

Wireframe 2

Deze afbeelding toont de selectie binnen Facebook waarvan volgend wireframe is gemaakt

Download hieronder de wireframe (pdf)
Wireframe_facebook_1.2

Maandag 15 september hadden we een Workshop van Martijn van Welie over Experience Design, waarin hij ons zijn negen punten voordroeg, waaraan, volgens hem, een goede Experince moet voldoen. Of het product moet een of meer van de genoemde punten bevatten, wil het in aanmerking komen van een goede User Experience.

Aan de hand van die negen punten moesten wij een Experience aan de tand voelen. Ik heb gekozen voor de applicatie Cooliris (voorheen PicLens).

1. Intuitive and consistent interface
Cooliris is een zeer intuitief image/video-navigatie systeem. De afbeeldingen worden geladen in een ‘muur’ van plaatjes. Door te slepen of trekken, middels de muis, trekt de muur aan je voorbij. Onderaan de pagina zie je waar op de muur je bent, zodat je weet dat je nog verder kunt slepen aan de muur van afbeeldingen.
Het werkt ook consistent. Wanneer er op een afbeelding in de ‘muur’ geklikt wordt, springt het iets naar voren en wordt het getoond op ware grote. Als het een video betreft, herkenbaar aan de play-icon, begint het dan met afspelen. Deze handeling heb je, zelf als onervaren webbrowser, snel onder de knie, en het werkt altijd het zelfde.

2. Attract, engage, evoke.
Hier is Cooliris ook goed in. Wanneer je eenmaal kennis heb gemaakt met de applicatie, wil je het wel testen en gebruiken, alleen al omdat het zo cool is. Het trekt voorzeker je aandacht. Je wilt er mee spelen!
Cooliris wil verder niet iets met je delen, of je betrekken bij een community of iets dergelijks. Ze willen alleen dat je hun applicatie gebruikt voor het zoeken naar afbeelinden en video’s. Ik denk dat ze daar goed in geslaagd zijn. Dit is de methode om snel te ’scannen’ door grote hoeveelheden beeldmateriaal.

3. Being selective
Dat zijn ze zeker geweest bij Cooliris. Ze behandelen eigenlijk maar een onderdeel van het hele ‘webgebeuren’. En dat is het zoeken in en naar afbeeldingen/video’s. Dat is hun enige speerpunt, en daar zijn ze goed in. Althans, het voeld goed, op de manier waarop ze het presenteren. En omdat dat zo goed aanvoelt, kan het makkelijk zijn dat het in de toekomst de meeste gebruikte searchengine voor afbeeldingen gaat worden, of een opstap naar sciencefiction achtige taferelen voor in de huiskamer.

4. Multimedia narratives
Ze gebruiken dus vooral het visuele aspect van het web. Maar ik denk wel dat ze rekening houden met andere devices, zoals touchscreen schermen voor in de woonkamer van de toekomst. Een applicatie als Cooliris zou daar niet op misstaan. Lekker met je handen door een bak met afbeeldingen graaien, maar dan met coole visuele effecten!
Naast de afbeeldingen toont Cooliris ook de tekst die hoort bij de afbeelding. Bijvoorbeeld het nieuwsitem waar het bij hoort, of de tags die gekoppeld zijn aan het plaatje. Dus dat nemen ze ook nog mee. En natuurlijk spelen ze ook video’s af.

5. Deliver a branded experience
Dit is ze goed gelukt. Cooliris is waar de naam voor staat. Een coole en ook nog eens effectieve manier van browsen door afbeeldingen. Daarnaast is het ook nog een cool en ‘bevredigend’ genot voor je iris. Meer is het niet, minder zeker ook niet.

6. Balancing usability
Er is binnen de applicatie zeker gebruik gemaakt van standaarden. Zo is de zoekfuntcionaliteit in de rechterbovenhoek geplaatst. Wel kan het zijn dat het, bij een eerste gebruik van Cooliris, niet duidelijk is dat je middels een sleepfunctie de muur met afbeeldingen aan je voorbij kan laten trekken. Ze zouden de muiscursor beter kunnen veranderen in een handje of iets dergelijks.

7. Extensice and continious feedback
Cooliris is een grote feedbackmachine. Op elke handeling volgt een directe reactie. Als je de muur versleept, zie je dat direct gebeuren. Klik je in het zoekveld, krijg je gelijk feedback. Klik of dubbelklik je op een afbeelding, krijg je die in volle vizier in beeld. Enzovoorts.

8. No excellent experience without contrast
Waar Cooliris zich tegen afzet zijn de zoekengines van bijvoorbeeld Yahoo en Google. Die hanteren nog steeds de methode van een x-aantal afbeeldingen per pagina’s. Of bijvoorbeeld Flickr en Youtube. Cooliris doet dit op een spetterende manier, zeker ten opzichte van de genoemde bedrijven.

9. Exceeding expectations
Hier zijn ze naar mijn idee hard voor aan het werk. Voorheen betrof het alleen afbeeldingen die getoond werden, nu kunne ze ook video’s afspelen. Je kunt desgewenst afzonderlijke beelddatabases van bijvoorbeeld Flickr, Youtube of zelfs Amazon doorzoeken. In de toekomst zullen ze dit zeker uitbreiden, meer en meer gekoppeld aan webwinkels. Het zal wellicht een nieuwe manier van sjoppen worden. Zoals je tegenwoordig de schappen afstruint of de marktkraampjes aan je voorbij laat gaan, kun je dit ook doen met Cooliris. We zullen verrast worden door de mogelijkheden.

In deze workshop hebben we een bepaalde methode van brainstormen gebruikt om tot een nieuw idee of concept te komen voor een EPG voor KPNmine en Philips. De opdracht die hier bij hoorde had het volgende als doel:

“…design an interface for an EPG (electronic programming guide) that blends together the brands of the service provider (KPN MineTV) and the hardware manufacturer (Philips).”

In onze groep, bestaand uit Gemma, Mark, Lemmy, Niek en ikzelf, gingen we als volgt te werk. We begonnen met een groespgewijze brainstorm waarin we allerlei elementen van KPN en Philips aan bod lieten komen.

Afbeelding 1: brainstorm

Vervolgens hebben we aan de hand daarvan onze persoonlijke visies gedeeld en kwamen tot het idee waarmee we verder zijn gaan werken, en hebben uitgewerkt tot ons concept.

Afbeelding 2: brainstorm

We zijn hierbij een andere weg in geslagen dan alleen de focus op de interface van de EPG. Als speerpunt hebben we namelijk het hardware aanbod van Philips, dat is namelijk hun aandeel, onder handen genomen. Dat is waar Philips bekend van is en dat is waar Philips zich mee kan onderscheiden en profilieren. Vooral ten opzichte van KPN, die garant staat voor de software van de EPG.

Afbeelding 3: het concept

We hebben het kastje en de afstandbediening, als product bij de EPG, opnieuw vorm gegeven met een nadrukkelijke Philips uitstraling. Hierdoor komt Philips nadrukkelijker naar voren; het is het product dat je in je kamer hebt staan en in je hand houdt!

De afstandbediening en de het kastje maken beiden gebruik van het Philips Ambilight systeem. Zo kan er per zender (voorkeuze instelling) van kleur worden veranderd. Of, zo de gebruiker wenst, een standaard kleur worden ingesteld. Beide producten hebben een bolvorm, zodat ze duidelijk met elkaar associeren. De afstandbediening past in de ronding van het ‘kastje’. Wanneer deze er vanaf wordt gehaald gaat het apparaat aan, wordt het weer terug geplaatst, gaat het sluit het systeem af.

Afbeelding 4: de afstandbediening

De bolvorm van de afstandbediening komt de intuitiviteit van het systeem in ten goede. Het is namelijk een draaisysteem waarmee de afstandbediening, en daarmee de EPG, bediend wordt. Als er normaliter (dicht) aan gedraaid wordt, dan wordt er gezapt tussen de zenders. Als er na uit enigszins uit elkaar trekken (open) aan gedraaid wordt, dan wordt het volume gewijzigd. Tevens zitten er aan de onderzijde een tweetal knoppen waamee het menu geopend en bediend kan worden. Een ‘menu’ en ‘ok’ knop. De overige navigatie in het menu gebeurd tevens door het draaisysteem.

Waar we, als groep, tijdens deze workshop in gebreke zijn gebleven is het aandacht schenken aan de interface van de EPG die hoort bij dit product. De huidige EPG zou er namelijk volledig op aangepast moeten worden, vanwege de eigenzinnig werking er van.

Afbeelding 5: het piepschuim model van het concept

Afbeelding 6: de afstandbediening los van het ‘kastje’

Afbeelding 7: de afstandbediening in gebruik

Afbeelding 8: de verschillende Ambilight kleurstellingen