In de film kwam ook een voorbeeld van het Britse systeem ter sprake. Zie de scnene hiernaast... Daar worden huisartsen (ambtenaren in de UK) beloond als ze targets halen. Hoe meer patiënten stoppen met roken, hoe hoger de bonus. De arts in de film kon er een leuke Audi van rijden.. Een radicaal andere wijze van belonen!

Recent schreef ik al over dat het het RVZ een advies over gezondheid2.0 heeft gepubliceerd. Ook daar worden patiëntencommunities als goed voorbeeld gebruikt. Vanuit betrokkenheid bij de Vereniging Spierziekten Nederland weet ik dat in sociale besloten netwerksites voor verschillende doelgroepen binnen de spierziekte: (patiënten, ouders, en mantelzorgers) er veel informatie gedeeld wordt. Dit mede door de kwalitatieve input van artsen en medewerkers van de VSN.

(geschreven voor weblog http://www.yellowdolphin.nl/index.php?/Interaction-Design/sicko )

1. Een goede campagne begint met een goed idee: sluit aan op behoefte, be relevant
2. Bedenk wat je wilt met de resultaten van je campagne
3. Afzender bepaalt vertrouwen
4. Verwerk soft- en hardbounces, verwijder hardbounces in je bronbestanden
5. Maak gebruik van de eerste regel in HTML én plaintekst
6. Logo is na afzenderregel belangrijkste onderdeel van herkenbaarheid identity
7. Laat logo / beeld / lettertype / kleurstelling gelijk
8. Beeld vult aan qua sfeer en boodschap, anders: geen beeld
9. Mail moet leesbaar / herkenbaar zijn zonder beeld
10. Veilige keus 500 a 600 px content rechts = secundair
11. Differentieer in design / lengte / kopij: een nieuwsbrief is geen actiemail
12. 2 kolommen (66 / 33%) voor informeren, 1 kolom voor focus op 1 boodschap, 2 kolommen voor hoofd/bijzaak
13. Gebruik duidelijke taal, gebruik vormgeving om informatie te groeperen. Vertel waarom je bent gespamd, hoe je ervan af komt
14. Zorg voor een werkend reply-adres , zorg voor alternatieve contactvormen
15. Zorg voor html-versie, disclaimer, (doorsturen), voorkeuren en afmelden

Nummer 5 zie je nog maar weinig: Veel mensen met een smartphone, maar ook mensen met (f)Outlook zien in hun inbox ook de eerste regel van de inhoud. Door in je template (in HTML én in plaintext als je Multipart verstuurt) juist die eerste regel te gebruiken als teaser kan je het openingspercentage omhoog krijgen.

De interactie tussen een formulier-invoerder en de machine kan je stroomlijnen met kleur. Door eenduidig te communiceren met concequente kleuren wordt de invoerder aan de hand genomen en door de moelijke invoer geloosd.

Eén van de facetten van een formulier zijn de notificaties: een foutmelding, een bevestiging of een informerenede "let-op"-tekst.

"Fouten en rood", "bevestiging en groen", en "informeren en licht-geel" zijn logische keuzes. Grote voorbeelden zoals Google, Yahoo en Wordpress zie je dat ook doen.

• Rood: universele kleur om even te stoppen, er is namelijk gevaar....: een foutmelding dus.
• Groen: "Ja, dan mag je doorgaan". Je bestand is dan bijvoorbeeld met succes verzonden.
• Lichtgeel is een arceerkleur. Het trekt de aandacht even naar zich toe. "Niet om t een of ander, maar let hier even op. Ik help je er alleen maar mee. "

Door met lichtere kleuren te werken dan de verzadigde signaalkleuren kan je toch nog je normale typografie gebruiken. De basiskleur waar de lichte variant van is afgeleid kan dan prima als rand rondom de notificatie extra attentie geven aan de kleur.

Na wat vergelijkend onderzoek adviseer ik onderstaande kleuren. van Klaske Vogd en Wim Korvinus heb ik op de academie geleerd dat wetmatigheid in kleurtoon, verzadiging en helderheid rust en regelmaat, maar ook schoonheid geven aan de combinaties.

Foutmeldingen: Signaalkleur rood:

Bevestigingen: Signaalkleur groen

Notificatie: Afgeleid van de Post-it memootjes:

Omdat alleen kleur niet voldoende is voor een foutmelding (denk aan kleurenblinden) zegt Jacob Nielsen dat je ook nog een andere grafische oplossing moet aanbieden ter onderscheid. Uiteraard is de foutmelding zélf wellicht al tekstueel duidelijk genoeg, maar ter ondersteuning zou een uitroepteken of ander waarschuwingssignaal ondersteunend zijn.

Notificaties horen in het oog te springen. Zet geen foutmeldingen ver boven of onder je formulier, maar zo mogelijk direct bij het invoerveld. Bijvoorbeeld zo:

Nog sterker wordt de aanwijzing als het bijvoorbeeld met een pijl wijst naar de goede plek. Tooltips als bijv. http://www.walterzorn.com/tooltip/extensions.htm doen dat leuk.

Heb je nog meer tips of voorbeelden? Ik hoor het graag!

Hoofdnavigatie is vaak wel iets waar je met elkaar uitkomt... Subnavigatie is echter lastiger: hoeveel niveau's? horizontaal of verticaal weergegeven? uitklappen na een klik, op bij muis-over?

In een kleine presentatie ben ik op zoek gegaan naar welke trends er zijn op dit gebied bij een aantal toonaangevende websites.

Enkele trends die hieruit zijn te ontdekken:

1. Mega-menu's. Brede uitklapbare submenu's. Volgens Jacob Nielsen zijn ze effectiever dan gewone drop-downs.
2. Fade-outs. Als je in een menu zit, vervaagt de rest van de rest van de website. Zo blijft de focus op de navigatie
3. Visuele menu's: met iconen of produktfoto's worden de menu-items
4. Beschrijvende menu's: Eén woord dekt niet altijd de lading: een langere beschrijvende zin op een knop voor een menu-item
5. Geen menu: de hele website bevat content-blokken met lees meer links (zie http://www.bbc.co.uk/ )

Enkele best practices blijven geldig:

• Een klikbaar kruimelpad die toont waar je bent, en waar je niveaus hoger kunt.
• Een logische opbouw van de URL, synchroon aan het kruimelpad.
• Menu altijd als list-items in de HTML broncode, zo mogelijk in de code direct onder de content (zoekmachines vinden content belangrijker dan menu-links)
• Een opsomming van gelijkwaardige menu-items (van hetzelfde navigatie-niveau als waar je je bevindt) op elke vervolgpagina
• Niet teveel items in één opsomming
• Maar ook niet teveel niveau's..

Algemeen blijft natuurlijk de aanbeveling om met grote navigatiestructuren altijd alternatieve manieren van navigatie aan te bieden, niet alleen voor de zoekmachine, maar ook voor de bezoeker..

1. Met stip op nr. 1: een goede zoekfunctie. Bij voorkeur één die een kennisdatabase combineert met zoekresultaten over de hele website. Geen oeverloze rij pdf-jes waar toevallig het trefwoord in staat dus.
2. Een klikbaar lijstje pagina's van een stuk of 5 "Meest populaire pagina's"
3. Een klikbaar lijstje van 5 pagina's die in de navigatie "verstopt" zitten, maar wel veel gezocht worden, vermelden onder "Snel naar"
4. Een klikbaar lijstje van gerelateerde pagina's of gerelateerde trefwoorden tonen. "Mensen die dit kochten, kochten ook..."
5. Een sitemap met alle pagina's die in het menu zitten, én alle extra pagina's (die niet in het menu onder te brengen waren) op een rij.
6. Een "fat footer" waar pagina's niet op hiërarchie, maar op thema zijn gegroepeerd (zie http://www.hema.nl/ en http://www.agisweb.nl/)

Meer lees/klikvoer:

• http://www.useit.com/alertbox/mega-dropdown-menus.html
• http://vandelaydesign.com/blog/galleries/creative-navigation/
• http://webdesignledger.com/tips/web-design-trends-for-2010
• http://www.webdesignerwall.com/trends/30-examples-of-attractive-nav/
• http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/

Bezoekers worden verwelkomd door tromgeroffel en Romeinen. De route leidt via een spoor van honderden lichtjes langs verschillende taferelen rondom de geboorte van het Kerstkind.

Zo brengen onder meer herders, een herbergier en wijzen uit het oosten de bekende Bijbelverhalen tot leven. Eindpunt is de stal van Bethlehem met Jozef, Maria en het Kind.

Na afloop is er gelegenheid om kerstliederen te zingen rondom een vuurkorf en zal er voor de bezoekers glühwein of warme chocomelk geschonken worden.

De Kersttocht wordt elk jaar georganiseerd door leden van kerkgemeenschap De Lichtkring en trekt meer dan duizend bezoekers. Verzamelpunt is de parkeerplaats bij het Centrum voor Natuur- en Milieu-Educatie, Schothorsterlaan 21, Amersfoort

Tijdstip: zaterdag 19 december 2009. van 16.00 uur tot 18.30 uur.

Meer informatie op http://kerstlichtjestocht.wordpress.com

Tip: Kom met de fiets! Auto? Parkeer de auto bij voetbalvereniging VVZA (Hoolesteeg 6) of bij korfbalvereniging MIA (Schothorsterlaan 5).

Mijn roeping is en blijft dus voorlopig in Nederland. Bij de afdeling internet van Agis is meer dan voldoende uitdaging voor mij als interactie-specialist om de klant centraal te houden in nieuwe en bestaande websites en -service.

Geen enkele hard feeling om van zo'n tegenkandidaat te verliezen! Volgens de jury ontlopen haar en mijn kwaliteiten elkaar niet. Praktisch gezien is mijn wens om mét mijn gezin naar Kenia te vertrekken echter een probleem. In een éénjaars-uitzending is en blijft het een bedrijfsrisico. Voor twee of drie-jaars uitzendingen voor het Rode Kruis zouden er er wel mogelijkheden voor het meenemen van je gezin zijn geweest. Dat is helaas nu niet het geval. Zeker met zeer goede tegenkandidaten durven ze het (financiële) risico niet aan. De keus was dus makkelijk.

Een huisstijl ontbrak, maar geen nood: de huisstijl die dit keer vanuit de online gedachte is geboren is ook meteen ontworpen door ondergetekende.
De huisstijl is gebaseerd op

• Logo als woordbeeld:
  • Stichting en Agis in perspectief, geplaatst op een soort van lint
• Ondersteunend beeld van een grote diverse groep individuen,
• Cyaan in verschillende (gulden snede) vlakverdelingen als dekkende kleur
• Oranje als accent voor kopjes en linkjes
• Tekstarceringen voor aandachtsgebieden.

Naast concept, huisstijl en grafische vormgeving ben ik ook verantwoordelijk voor de ontwikkeling van het HTML template, wat ik met hulp van een collega in Joomla heb geschoven. http://www.stichtingagis.nl/

Het ontwerp van de site begon met de gedachte dat Stichting Agis eigenlijk een heel eenvoudig en één-dimensionale website nodig heeft die de volgende vragen beantwoord: Wat is het, hoe kan ik meedoen. Een Single-Page-Portfolio concept leent zich hier uitstekend voor: Laat in één pagina alle (hoofd)zaken zien. Eventuele verdieping zit nooit meer dan één klik van de gebruiker af. In dit geval is voor enkele ondersteunende pagina's zoals informatie over het bestuur, het jaarverslag etc gekozen om dat áchter die ene klik te houden.

Het familiebedrijf Technische Handelsonderneming Steenbergen in Groningen zat omhoog met een inflexibele en ontoegankelijke site. In korte tijd heb ik

• een nieuw design gemaakt op basis van huidige huisstijl,
• adviezen gegeven over de opzet van content (tekst en beeld),
• een implementatie gedaan van Wordpress,
• een custom thema template gemaakt,
• en een cursus Wordpress gegeven.

Enkele eigenschappen van de site

• In de site zitten veel pagina's. Deze zijn door menu, tags en interne linken goed ontsloten voor bezoekers én voor Google
• Flexibele foto's in de top-balk
• Een volwaardig CMS met handige extra's zoals versiebeheer, publicatie-timing etc.
• Er is de mogelijkheid om aanbiedingen aan te maken (is technisch gezien een blog)
• Handige foto-uitvergrotingen in een Lightbox
• Eenvoudig aanpasbare (contact)formulier(en)
• Googlemaps kaartjes
• Instant Zoekmachine vriendelijk
• In alle browsers goed
• Aangepaste stylesheets geoptimaliseerd voor mobiele telefoons en afdrukken

Uitbreidingsmogelijkheden zijn goed mogelijk in de vorm van:

• Reageren op aanbiedingen middels een bestelformulier bij aanbiedingen,
• of zelfs een webshop.

Wat heb je nodig:

• Een Google Analytics account
• Toegang tot de HTML van je website
• Een plan over wát je wil testen (duh)

Het werkt zo:

1. Je voegt de juiste javascript codes toe aan je website
2. In WebsiteOptimer stel je de varianten van het design in die je tegen elkaar wil testen (een video versus een afbeelding, een rode versus een groene knop, etc, etc. Je kan grofweg kiezen tussen AB-testing en Multivariate testing - dus 2 of juist meerdere varianten/testen per webpagina)
3. Even controleren
4. Na enkele uren de eerste rapporten
5. Je kan instellen dat niet-werkende varianten niet verder gebruikt worden
6. Na de testperiode (door je zelf te bepalen) kan je de best werkende versie aanhouden (en verder testen op andere onderdelen?)

Op deze website loopt nu ook een test... Een kleintje, maar toch: de bekijk-meer link die je zojuist hebt geklikt vanaf de voorpagina, daar heb ik in 3 varianten (lichtgrijs, donkergrijs, zwart). Ik ga er namelijk van uit (pure aanname) dat als de doorklik-ratio naar een artikel vanaf de homepage hoog is, ik blijkbaar interessante teasers heb geschreven op de homepage.

Ik liep zelf even vast op het invullen van de URL van de conversiepagina. In mijn geval is heeft de conversiepagina elke keer een andeer URL: http://www.marnixbras.nl/weblog/pivot/entry.php?id=xxx (waarbij xxx dus een getal is). De generieke vervolgpagina http://www.marnixbras.nl/weblog/pivot/entry.php die ik wil gebruiken bestaat helaas niet... Google WebsiteOptimizer gaf een stuk of 3 waarschuwingen, en ik moest op de knop "toch doorgaan" klikken....de helppagina hierover vertelt dat pagina's die niet bereikbaar zijn toch mee mogen doen...mits het daarvoor bedoelde trackingscript maar wel op de generieke vervolgpagina staat.

Natuurlijk is testen ook niet de zevende hemel, Een hoge conversie is natuurlijk leuk, maar heiligt niet alle middelen. Een tevreden klant is op langere termijn beter. Testen met niet waar te maken beloftes, aanbiedingen met kleine lettertjes, wurgcontracten en andere non-etische zaken kan mooie conversies opleveren maar ook een hoop rechtzaken. In mijn geval: Als ik op de homepage een vreselijk interessant verhaal aankondig, maar onder de "bekijk meer"-link kom je op nogal oninteressante vervolgpagina.... tja... Geen tevreden lezer...

Vraag blijft voor mij: Waarom biedt Google dit gratis aan? Iemand die dat weet?