Ik geef training in frontend tools en stacks als HTML, JavaScript, TypeScript, React, Angular en Vue. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter(@PeterKassenaar).

In dit blog vind je persoonlijke artikelen, die niet noodzakelijk tech-gerelateerd zijn.

Views and expressions are my own.

Terug naar de algemene site.

12januari

Presentatie - Usability in Context

fronteers_banner

 

Maandag 11 januari 2010 gaf ik bij Fronteers een presentatie over de samenhang en context van onderdelen die gezamenlijk de usability (‘gebruikersvriendelijkheid’) van een website bepalen.

Presentatie downloaden (Powerpoint in zip, 5,7MB)

Inhoud in een oogopslag

  • Wat is usability – een korte theoretische achtergrond bij he begrip Usability en de formele definitie volgens de DIN-ISO norm. Introductie van de kernbegrippen Effectief, Efficient en Naar tevredenheid.
  • Usability versus User Experience – deze begrippen hebben veel raakvlakken en maken beide deel uit van het ontwerpproces van webapplicaties. Usability richt zich echter meer op de interactie van de mens met het systeem. User Experience richt zich meer op de beleving van de applicatie.
  • “10 gouden regels” – Om usability meetbaar te maken en concrete uitspraken te kunnen doen over een site (in een Expert Review) of concrete items te kunnen onderzoeken (in een usability test/gebruikerstest) hebben we voor tien kenmerkende onderdelen richtlijnen opgesteld.

fronteers_richtlijnen

De presentatie bevat bij elk van de richtlijnen voorbeelden en als het mogelijk was ‘goede’ en  ‘foute’ voorbeelden die live van het internet zijn geplukt.

Alle aanwezigen bedankt voor jullie aandacht en (kritisch) meedenken tijdens de presentatie! De tijd vliegt als het over user interface design gaat. Discussies over wat wel en niet werkt in een design zijn buitengewoon waardevol en helpen je denk ik (hoop ik!) om als front-ender verder te komen in je werk.

Een paar foto’s:

fronteers01

Voor presentatie te gast bij EasyToBook.com. Is die arm nou afgesneden bij de elleboog? (foto: @arjaneising).

 

fronteers02

Iedereen liet zich het bier na afloop goed smaken (foto: ikzelf).

<ad>
Wil je meer weten over usability of een project laten uitvoeren, neem dan contact op. Ook het verzorgen van een presentatie over een van de (deel)onderwerpen die werden besproken is natuurlijk mogelijk.
</ad>

Oh ja, bijna vergeten! Nog een

<ad>
Handboek Usability (klein) Het nieuwe Handboek Usability verschijnt medio maart 2010. Wil je van het verschijnen hiervan op de hoogte worden gehouden, laat het dan ook even weten via het contactformulier. Bedankt!
</ad>

Peter Kassenaar
-- 12 januari 2010

02december

Usability tip - vertel wie je bent en wat je doet

Op dit moment ben ik aan het schrijven voor een nieuwe uitgave van het Handboek Usability dat in het voorjaar van 2010 verschijnt. Het originele boek stamt al weer uit 2003/2004 en is hoognodig aan opvolging toe.

Een van de tips uit het eerste boek (die zéker gehandhaafd blijf in deze nieuwe uitgave) is ‘vertel op de homepage wie je bent en wat je doet’. Dat lijkt een open deur, maar is dat niet.

Facebook

Ik kwam dat onlangs nog weer eens tegen toen ik door iemand naar een facebook-pagina werd verwezen om een foto te bekijken. Nu ben ik geen facebook-gebruiker (ik ben helemaal traag met social networks, maar dat is een ander verhaal), en dus kon ik de betreffende pagina niet zien.

Na het klikken op de link in het mailtje werd ik automatisch doorgestuurd. Ik kreeg alleen de homepage te zien, met het verzoek mij te registreren, zonder enige verdere informatie.

facebook homepage. Waar is de achtergrondinfo?

En nu kan het wel zo zijn dat facebook het grootste sociale netwerk ter wereld is met meer dan 300 miljoen gebruikers; er zijn altijd nog meer personen die niet weten wat facebook is.

En hen moet je op de homepage vertellen wie je bent en wat je doet. En wat de voordelen voor mij zouden zijn om te registreren. Dat is zo als je Microsoft heet, Coca Cola of Google of elk willekeurig ander bedrijf uit de Fortune-500. En dus ook als je Facebook bent.

Want waarom zou ik in vredesnaam alle gevraagde informatie achterlaten, alleen om een foto te kunnen bekijken? Facebook moet mij overtuigen van de voordelen van registratie en op zijn minst enige achtergrondinformatie geven over de site en het bedrijf zelf en wat het met de informatie doet. De usability-tip is dan ook

“Vertel op de homepage wie je bent en wat je doet. Leg uit wat er op je website te vinden is, en waarom het voor de bezoeker belangrijk is dat hij er nog eens terugkomt.”

Loze kreten

Een tekst als “Registreren is gratis en iedereen kan lid worden” is nietszeggend en voegt niks toe. Elk forum op internet is gratis, en iedereen kan lid worden. Ook de tagline “Met Facebook ben je verbonden en deel je alles met iedereen in je leven” zegt mij nog niet veel, als social network-nerd.

Wat is facebook nou precies? Wat doet het? En waarom moet ik mij registreren als ik een foto van iemand anders wil bekijken? Allemaal vragen waarop facebook het antwoord schuldig blijft.

Juridische blabla - bovendien in een lelijke mix van Engels en Nederlands

Na lang kijken zag ik de kleinste lettertjes op de pagina: “Waarom moet ik dit invullen?” Maar deze koppeling opent alleen een pop-upvenstertje met meer nutteloze juridische blabla. Het geeft mij geen enkel inzicht in wat facebook is en wat het doet.

Zelfs bovenstaande informatie (sociaal netwerk, 300 miljoen gebruikers) heb ik nota bene uit Wikipedia moeten halen. Op de homepage van facebook is niet terug te vinden wat het bedrijf doet en welke voordelen een lidmaatschap/registratie biedt.

Hyves en LinkedIn

Andere sociale netwerken zoals Hyves en LinkedIn doen dat beter. Daar kun je altijd minimaal een detailpagina met enkele details bekijken, maar pas als je meer wilt (zelf een profiel plaatsen, of reageren op anderen) wordt om registratie gevraagd.

Facebook doet daar niet aan. Als je iets wilt, maakt niet uit wat, moet je eerst een account maken.

En daar had ik geen zin in.

Jammer, want ik was wel benieuwd naar die foto.

Peter Kassenaar
-- 02 december 2009

(PS: ik doe wel een beetje aan sociale netwerken, want ik ben sinds kort ook actief op Twitter, voor korte berichten, tips en handige links. Je kunt me volgen via http://twitter.com/PeterKassenaar (@PeterKassenaar is mijn Twitternaam).

28oktober

Usability-tip: noem altijd de prijs. Direct

In onze usability-onderzoeken zien we vaak dat gebruikers op zich wel bereid zijn om online producten aan te schaffen. Een van de grootste vragen is echter altijd ‘wat kost het’?

Het afhaakmoment voor online aankopen valt in de meeste gevallen op het moment dat

  1. blijkt dat voor een product betaald moet worden (terwijl dit niet van te voren was aangegeven), of
  2. blijkt dat bij de aanschaf van een product nog extra kosten worden berekend, zoals BTW-toevoeging of verzendkosten –waardoor de complete bestelling duurder uitvalt dan de bezoeker tot op dat moment dacht.

Een mooi voorbeeld (nou ja, eigenlijk dus niet zo’n mooi voorbeeld) van categorie 1 zag ik onlangs in mijn mailbox. RealNetworks stuurt een reclamemailtje voor hun programma Photo Morpher. Er staat wat tekst bij, en een grote, rode knop Download nu. Deze knop wordt verderop in het mailtje nogmaals groot onder de aandacht gebracht.

Let op: nergens wordt gesproken over een prijs.

mailing Photo Morpher

Pas als je op Download nu hebt geklikt, komt de aap uit de mouw. Op de site van RealNetworks blijkt dat dit programma $24,99 kost.

real02

Dit zal absoluut het afhaakmoment voor dit product zijn. Ik vrees dat deze mailing niet veel (nieuwe) klanten heeft opgeleverd.

Usability tips

RealNetworks zou de gebruikersvriendelijkheid van dit bericht en hun product kunnen verbeteren door:

  1. Direct in de aanbiedingsmail eerlijk te zijn over het feit dat het hier geen aanbieding voor een gratis product betreft (het is helemaal niet vreemd om dat te veronderstellen, veel software wordt tegenwoordig gratis via internet verspreid), maar dat er direct voor betaald moet worden.
  2. In plaats van alleen een betaalde versie van het product te bieden waarvoor direct $24,99 betaald moet worden, ook een gratis 30-dagen versie te bieden. Eventueel met beperkte functionaliteit. Dan kunnen klanten veel beter beoordelen of de software aan hun wensen voldoet. Het werken met trial- en volledige versies is inmiddels volledig ingeburgerd. Het lijkt nu alsof Real zo weinig vertrouwen in het product heeft dat ze geen probeerversie durven aan te bieden, maar alleen aan direct sales doen. Geen goede indruk.

Denk hier ook aan als je zelf een product aanbied via internet. Wees altijd zo eerlijk en transparant mogelijk over de prijs. Laat het direct zien als er verzendkosten bij komen kijken, laat duidelijk weten wat het totale eindbedrag voor de koper wordt. Je wint er klanten mee in je online winkeltje!

Peter Kassenaar
-- 28 oktober 2009

07september

Column – intranet is geen internet

Deze column is ook verschenen in het septembernummer van het blad Management en Literatuur.

Onlangs brachten we voor een korte financiële APK een bezoekje aan ons bankkantoor, een filiaal van ABN AMRO. We werden ontvangen met koffie in een kartonnen bekertje. Omdat de bankier zich uit eerdere ontmoetingen nog kon herinneren dat ik voor mijn werk onder meer de gebruikersvriendelijkheid van websites bekijk, vroeg hij naar mijn oordeel over de vernieuwde site van ABN AMRO. De publiekssite van deze bank is onlangs op de schop gegaan. Ik sprak enkele vriendelijke woorden over het design en dat leek hem tevreden te stellen.

 

Intranet

Tijdens het gesprek maakte de medewerker gebruik van enkele interne applicaties op het intranet van de bank. Ik kon het niet laten op te merken dat het mij opviel dat voor de interne applicaties kennelijk nog gewoon gebruik werd gemaakt van het oude design (voor de kenners: het ontwerp met de groen-geel gestreepte achtergrondjes) en dat dit niet was aangepast, of meegegroeid met de publiekssite. Verbaasd keek de bankemployee mij aan. "inderdaad, nu je het zegt. Het was me nog nooit zo opgevallen." Tevens gebruikte hij op zijn computer nog Internet Explorer 6, een versie die inmiddels ook als antiek beschouwd mag worden. Ook dit verschil was hem nog nooit zo opgevallen. "Ach, ik gebruik deze applicaties gewoon voor mijn werk, en waar het allemaal in draait en hoe het er uitziet maakt me niet zo veel uit".

Misschien onbedoeld, en tevens afgezien van budgettaire en planologische kwesties (mogelijk was er geen tijd of geen budget om het intranet en de publieke internetsite gelijktijdig aan te passen) heeft de bank hier mijns inziens een aantal goede keuzes gemaakt.

 

Doelgroep

Ten eerste: het intranet en de publiekssite hoeven er niet hetzelfde uit te zien. Ik kom in mijn werk nog regelmatig tegen dat organisaties gelijktijdig het intranet en de internetsite willen aanpassen, waarbij ze bovendien willen dat de look-en-feel gelijk is. Omdat ze denken dat dit goedkoper is, of omdat ze denken dat het zo hoort. Maar - ten tweede - de doelgroepen van beide sites zijn niet gelijk! Via het intranet moet een organisatie interne medewerkers faciliteren. Het intranet moet er zodanig op zijn ingericht dat medewerkers hun dagelijkse taken zonder nadenken kunnen uitvoeren. Een intranet moet daarbij bijna per definitie veel statischer (zo u wilt 'saaier') zijn dan een publiekssite. Anders gaan er veel arbeidsuren verloren met het zoeken naar functionaliteit of het doorspitten van niet-relevante wijzigingen. Een site voor het algemene publiek moet daarentegen continu informeren, verleiden en entertainen. Een groter contrast is bijna niet denkbaar. Dan hoeven de interfaces van beide sites toch niet gelijk te zijn?

 

Nieuwe technieken

En tot slot: de nieuwe site van ABN-Amro maakt - evenals vele andere moderne sites - intensief gebruik van moderne technieken als AJAX, Flash en meer. Dit zou waarschijnlijk niet eens goed werken op de antieke browsers die nog in veel kantoren worden gebruikt. Het uitrollen van een nieuw intranet zou dan betekenen dat gelijktijdig de werkomgeving en mogelijk ook de hardware van duizenden desktops aangepast moet worden. Dat is geen item om lichtzinnig over te denken in organisaties van dergelijke omvang.

Kortom: hoewel een intranet en internetsite op dezelfde technieken zijn gebaseerd en allebei in de browser draaien, zijn het volkomen, maar dan ook volkomen verschillende grootheden. Het zou goed zijn als iedereen die met beslissingen rondom webtechnologie in een organisatie te maken heeft hiervan op de hoogte is.

ABN-Amro heeft zich dit goed gerealiseerd. Nu alleen die koffiebekertjes nog. Een kartonnetje voor de bankier, kop en schotel voor de klant.

Peter Kassenaar
-- 7 september 2009.

28augustus

Twee usability-lessen

Terug van vakantie, er moet weer gewerkt worden.

Op dit moment ben ik bezig met het schrijven van het Handboek Windows 7. Nu heb ik op mijn werkcomputer al wel een dual-bootconfiguratie van Windows Vista en Windows 7, maar voor het schrijven van een boek is het toch handig als je hiervoor een aparte, fysieke computer hebt.

Het plan was dus om even snel een minimale computer te kopen die voldoet om Windows 7 op te installeren voor de duur van het schrijven van het boek. Dat moet tegenwoordig toch snel online kunnen? Al surfende liep ik echter zomaar, live, tegen twee knelpunten aan waar ik in usability-testen ook vaak over struikel. Terwijl het zo simpel te voorkomen is.

Office Centre

Als eerste keuze voor mijn snel-aan-het-werk-pc ging ik naar Officecentre.nl. Ik heb de ervaring dat ze snel kunnen leveren. Dat lijkt (let op: lijkt) inderdaad het geval. Bij alle computers in het rijtje staat hoopvol vermeld 'voor 16:00 uur besteld, de volgende dag in huis.'

 

Ik klik op de eerste (goedkoopste) computer. Een HP Pavilion Slimline voor EUR 329,- De detailpagina wordt geopend en ik kies Plaats in winkelwagen. Dan wacht een teleurstelling. 'Het artikel is niet voorradig'.

Ja, hallo. Op de vorige pagina stond toch 'Besteld voor 16:00 uur, de volgende werkdag in huis'? En het is voor 16:00 uur. Het is nog maar 11:23 uur.

Dan maar terug en de een-na-goedkoopste computer gekozen. Een andere HP Pavilion, in de aanbieding van EUR 419,- voor EUR 369,-. Ook nu hetzelfde scenario. 'Besteld voor 16:00 uur, de volgende werkdag in huis'. Klik, detailpagina, klik, Plaats in Winkelwagen. 'Het artikel is tijdelijk niet op voorraad'.

'.

WTF?

Kennelijk weet het systeem al dat de door mij gekozen computer niet geleverd kan worden. Twee muisklikken later wordt dat namelijk verteld. Waarom wordt dit dan niet direct op de overzichtspagina getoond? Nu wordt kennelijk bij elke computer de standaardtekst 'Voor 16:00 uur besteld, blablabla' getoond. En jaag je de gebruiker in de gordijnen als blijkt dat het helemaal niet de volgende werkdag bezorgd kan worden.

Ik had geen zin meer om voor een derde artikel te proberen of het misschien of voorraad was of niet. Exit Office Centre.

 

USABILITY-LES: als een database/CMS weet wat de status van een product is, maak dit dan direct duidelijk en niet pas als de klant er om vraagt (i.e. bij het plaatsen van het product in het winkelwagentje). Dit verhoogt het vertrouwen in je organisatie en voorkomt klantteleurstellingen.
 

Dell

Dan maar verder naar Dell. Achtergrondinfo: op mijn kantoor en thuis werk ik vrijwel uitsluitend met Dell-apparatuur. Ik ervaar Dell-computers als betrouwbaar, stabiel en redelijk betaalbaar. Een nadeel is de langere levertijd. Dat is lastig bij een project als dit, waarbij ik nu een computer nodig heb.

Toch maar een bezoekje gebracht aan www.dell.nl. De banner op de homepage is veelbelovend. Een Back to School aanbieding, van pc en monitor (die raak ik wel kwijt) voor EUR 399,-. Verlekkerd klik ik op Koop Nu. Ik wil die computer. Nu. Dat wordt immers geadverteerd.

Waar verwacht ik te komen? Op een pagina om de geadverteerde pc te bestellen en af te rekenen. Maar waar kom ik? Op een algemene pagina met nog vier of vijf andere modellen en mogelijkheden, maar niet mijn aanbieding voor computer en monitor voor EUR 399,-. WTF?

Moet ik die nu zelf gaan opzoeken, of samenstellen uit de getoonde mogelijkheden? Ik heb toch op Koop Nu geklikt? Waarom staat er een knop Koop Nu als de geadverteerde machine helemaal niet 'nu' gekocht kan worden, maar pas na een martelende zoektocht van vier, vijf pagina's en allerlei opties meer?

Exit Dell.

 

USABILITY-LES: als je een enkel product toont waarbij een Koop Nu- of vergelijkbare knop staat, zorg er dan voor dat deze knop ook precies naar dat product verwijst en niet naar een algemene categorie-pagina voor die groep producten. Waarop het betreffende product (misschien?) ook ergens genoemd staat. Zorg voor een 1:1-relatie tussen de knop en het product.
 

Tot slot

Vermoeid sloot ik mijn browser. Ik werk nog wel even verder op mijn dual-bootmachine.

En toen? Toevallig was ik gisteren op een bedrijventerrein waar ook een Office Centre-vestiging was. Ik liep naar binnen en ja hoor, stapels en stapels computers. Tevreden pakte ik een doos van de stapel en vijf minuten later stond ik weer buiten met mijn aanwinst. Een Acer X1700 om precies te zijn, voor EUR 399,-.

Over een paar weken ligt het Handboek Windows 7 in de winkel.

Peter Kassenaar,
28-augustus-2009

 

02oktober

Workshop Efficiënte websites bij !Pet

Van 30 september tot 3 oktober stond bij de firma !Pet in Hoogeveen en Groningen de jaarlijkse Efficiency 4-daagse op het programma. Dit is een beurs met de nieuwste trends op het gebied van projectinrichting, kantoorautomatisering, druk- en printspecialisten en kantoorartikelen. Behalve uitgebreide productdemonstraties in de winkels waren er ook workshops en lezingen te bezoeken.

Op 1 oktober verzorgde ik de workshop 'Hoe efficiënt is uw website?'. Hierin besprak ik achtereenvolgens

  • Wat is eigenlijk efficiency wat is het verschil met effectiviteit?
  • Welke factoren bepalen de efficiency van een website?
  • Hoe kun je zelf de efficiency van je eigen website verbeteren en hoe kun je dit meten (met 'harde' getallen).

De presentatie die bij deze workshop hoort is hier te downloaden als .pptx (Powerpoint 2007 voor Mac en Windows) en als pdf.

Hoe efficiënt is uw website.pptx (4,28 mb)

Hoe efficiënt is uw website.pdf (3,81 mb)

Het zwaartepunt van de workshop lag op de bespreking en toelichting van de 'Efficiency top-8'. Dit is een lijst van acht succesfactoren die gezamenlijk de efficiency van een website in grote mate bepalen.

Dit onderwerp hangt sterk samen met de Usability-workshops die Oskar van Rijswijk en ondergetekende regelmatig verzorgen. Wilt u hier meer informatie over, of bestaat er binnen uw organisatie ook interesse in dit onderwerp, neem dan contact met ons op.

Peter Kassenaar
-- 2 oktober 2008



25april

Offline usability – of Tekstschrijven op informatiepanelen

Als je zoals ik veel bezig bent met website usability, vallen automatisch ook andere usabilityzaken op. Noem het maar even ‘offline’ usability. Denk aan de bediening van een magnetron, de werking van NS-kaartautomaten, de instellingsmogelijkheden van een digitale piano en zo verder.

Zo viel mijn oog onlangs onbedoeld op een wel heel merkwaardige aanduiding op een informatiebord voor de zorginstelling ‘Gelders Hof’, bij ons in Dieren.

Gelders Hof is gelegen aan een drukke straat met weinig parkeermogelijkheden. De hoofdingang is aan de achterkant, waar wel voldoende parkeergelegenheid is. Maar hiervoor moet de bezoeker eerst via een paar kleine straatjes om het pand heenrijden.

Om dit te verduidelijken, bedacht men de volgende tekst op het informatiebord:

“Parkeren hoofdingang
( na 150 m terug)”

 

Informatiepaneel bij Gelders Hof

Wat zou er gebeuren als je onbekend bent in Dieren en inderdaad deze aanwijzing opvolgt? Dan rijd je dus eerst 150 meter verder en vervolgens ga je terug. Dan ben je daarna weer exact op de plek waar je begon! Maar niet bij de hoofdingang...

Of, als je vanaf de andere kant het bord nadert. Dan ga je eerst 150 meter terug, om vervolgens tot je verwondering te ontdekken dat je nu maar liefst 300 meter verwijderd bent van de toegangsweg die leidt naar de hoofdingang!

Maar gelukkig staat op de andere zijde van het paneel de correcte aanduiding: “na 150 m links”.

Na 150 meter links...

Nu op de voorzijde nog even het woord ‘na’ verwijderen, of anders de ‘n’ veranderen in een ‘g’ en het informatiepaneel is helemaal correct :-).

Oplossing:
"Ga 150 meter terug"

12april

Software tip: ZoomIt [video]

Ik probeer een kleine serie samen te stellen van software-tools waar ik regelmatig mee werk. Het eerste bericht was

Vorig jaar ontdekte ik een stukje software waarvan ik wilde dat ik het eerder had gevonden: ZoomIt, van Mark Russinovich (bekend als de man achter Winternals Software, dat in 2006 door Microsoft werd overgenomen).

Het doel ervan is enorm eenvoudig: inzoomen op delen van het scherm tijdens het geven van een voordracht of presentatie. Zo zien de toeschouwers beter waar het om gaat en wordt de aandacht vanzelf gefocused op het deel van het scherm dat belangrijk is. Als is ingezoomd, kan desgewenst in verschillende kleuren worden getekend of getypt op het scherm om de zaken nog verder te verduidelijken.

Ik gebruik het sindsdien zelf in vrijwel elke presentatie of lezing die ik geef. En altijd komen na afloop mensen uit het publiek naar me toe: "hoe doe je dat, dat inzoomen op het scherm?" :-). Bekijk de video (03:49 min) voor een indruk van de werking ervan.

Download ZoomIt (44KB): http://technet.microsoft.com/en-us/sysinternals/bb897434.aspx

Veel plezier er mee!

Peter Kassenaar
-- 12 april 2008