Dit is het webblog van Peter Kassenaar - Ik geef training en consultancy in het maken van crossplatform mobiele apps en webapps. Trefwoorden: AngularJS, PhoneGap, jQuery/Mobile. HTML5, CSS3, JavaScript, AJAX, JSON. Ik schrijf boeken en artikelen over tal van (ICT-)onderwerpen. Ik ben lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij ook volgen op Twitter.(@PeterKassenaar)

Terug naar de algemene site.

09oktober

Gastcollege ‘usability voor mobiele apparaten’ bij HvA

Logo Hogeschool van Amsterdam

Woensdag 9 oktober 2013 gaf ik een gastcollege ‘Usability op mobiele apparaten’ op deHogeschool van Amsterdam, afdeling Sport, Management en Ondernemen (SM & O).

Beknopte inhoud

In ongeveer een uur kwamen de volgende onderwerpen aan de orde:

  • Waarom is usability belangrijk – waarom heb ik dit als specialisatie gekozen?
  • Een korte geschiedenis van mobiele communicatie.
  • Hoe worden mobiele apparaten op dit moment ingezet bij aankoop- en informatiebeslissingen? De verschuiving van bureaublad-devices naar mobiele devices is onherroepelijk ingezet. Mobiel internet gaat de rol van traditioneel (vast) internet overnemen. Je moet hier in de website of –app voor je onderneming of (sport)vereniging nu al rekening mee houden.
  • Wat is eigenlijk het verschil tussen een (mobiele) website en een App?

Drie concrete verschillen tussen desktop usability en mobile usability:

  • schermafmeting (en de gevolgen daarvan voor je design)
  • bediening: muis vs. touch (en de gevolgen…)
  • belangrijkste doel van de site identificeren (en de gevolgen…)
  • Deze drie aspecten werden daarna getoetst voor drie verschillende sites:
  • Het bleek dat er grote verschillen zijn tussen de sites onderling. Zo is de desktop-gebruikerservaring van Rio 2016 op veel punten nog wel voor verbetering vatbaar, maar is er wel gezorgd voor een geoptimaliseerde mobiele versie van de website. Bij NOC*NSF is dit beeld omgekeerd. De gebruikerservaring van de ‘gewone’ publiekssite is prima, maar is lastig bij mobiel gebruik. Hockey.nl laat min of meer hetzelfde beeld zien als rio2016.com.
  • Bij hockey.nl zijn bijvoorbeeld goede keuzes gemaakt in het terugdringen van de hoeveelheid menu-items in de navigatiestructuur. Zo biedt de mobiele versie snel toegang tot de belangrijkste functies van de site, zonder dat de gebruikersinterface overdadig vol aandoet.

Verschillende sites kennen verschillende sterke en zwakke punten. Het is niet zo dat een site compleet ‘mislukt’ of ‘onbruikbaar’ is, als een van de onderdelen niet goed is uitgewerkt. Het geeft wel aan dat dit betreffende aspect nader bekeken (en liefst verholpen) moet worden, om site-bezoekers op zowel desktop- als mobiele apparaten zoveel mogelijk tegemoet te komen.

Als een site responsive is, betekent dit dat de site zelf onderzoekt op welk type apparaat en schermbreedte hij getoond wordt. De site past zich vervolgens aan, aan het apparaat. Uiteraard moet dit wel door een programmeur worden ingesteld. Het gaat niet vanzelf.

Responsive design is de huidige trend in de webdesignwereld. Het maken van een responsive site is meestal wat duurder dan van een gewone site. Het onderhoud ervan kan vervolgens echter goedkoper omdat je maar één serie bronbestanden hoeft bij te houden.

Eerste dia presentatie usability mobiele apparaten

Presentatie

Je kunt de presentatie van dit college downloaden. Hij is beschikbaar in twee formaten:

Voor vragen over de presentatie of de rest van het gastcollege kun je contact opnemen via het contactformulier op deze site.

Peter Kassenaar
-- 09 oktober 2013

01oktober

Gastcollege ‘usability op mobiele apparaten’ bij Hva

 

SNAGHTML575f6c63Maandag 1 oktober 2012 gaf ik een gastcollege ‘Usability op mobiele apparaten’ op de Hogeschool van Amsterdam, afdeling Sport, Managemen en Ondernemen (SM & O).

Beknopte inhoud

In ongeveer een uur kwamen de volgende onderwerpen aan de orde:

  • Waarom is usability belangrijk – waarom heb ik dit als specialisatie gekozen?
  • Een korte geschiedenis van mobiele communicatie.
  • Hoe worden mobiele apparaten op dit moment ingezet bij aankoop- en informatiebeslissingen? De verschuiving van bureaublad-devices naar mobiele devices is onherroepelijk ingezet. De verwachting is dat rond 2014 het mobiele internet een belangrijkere rol zal spelen dan vast internet. Je moet hier in de website of –app voor je onderneming of (sport)vereniging nu al rekening mee houden.
  • Wat is eigenlijk het verschil tussen een (mobiele) website en een App?

Drie concrete verschillen tussen desktop usability en mobile usability:

  • schermafmeting (en de gevolgen daarvan voor je design)
  • bediening: muis vs. touch (en de gevolgen…)
  • belangrijkste doel van de site identificeren (en de gevolgen…)
  • Deze drie aspecten werden daarna getoetst voor drie verschillende sites:
  • Het bleek dat er grote verschillen zijn tussen de sites onderling. Zo is de desktop-gebruikerservaring van Rio 2016 op veel punten nog wel voor verbetering vatbaar, maar is er wel gezorgd voor een geoptimaliseerde mobiele versie van de website. Bij NOC*NSF is dit beeld omgekeerd. De gebruikerservaring van de ‘gewone’ publiekssite is prima, maar is lastig bij mobiel gebruik. Hockey.nl laat min of meer hetzelfde beeld zien als rio2016.com.
  • Bij hockey.nl zijn bijvoorbeeld goede keuzes gemaakt in het terugdringen van de hoeveelheid menu-items in de navigatiestructuur. Zo biedt de mobiele versie snel toegang tot de belangrijkste functies van de site, zonder dat de gebruikersinterface overdadig vol aandoet.

Verschillende sites kennen verschillende sterke en zwakke punten. Het is niet zo dat een site compleet ‘mislukt’ of ‘onbruikbaar’ is, als een van de onderdelen niet goed is uitgewerkt. Het geeft wel aan dat dit betreffende aspect nader bekeken (en liefst verholpen) moet worden, om site-bezoekers op zowel desktop- als mobiele apparaten zoveel mogelijk tegemoet te komen.

image

Presentatie

Je kunt de presentatie van dit college downloaden. Hij is beschikbaar in twee formaten:

Voor vragen over de presentatie of de rest van het gastcollege kun je contact opnemen via het contactformulier op deze site.

Peter Kassenaar
-- 01 oktober 2012

29september

Usability op mobiele apparaten

imageWoensdag 28 september 2011 gaf ik een gastcollege ‘Usability op mobiele apparaten’ op de Hogeschool van Amsterdam, afdeling Sport, Management en Ondernemen.

Beknopte inhoud

In korte tijd kwamen de volgende onderwerpen aan orde:

  • Waarom is usability belangrijk – waarom heb ik dit als specialisatie gekozen?
  • Een korte geschiedenis van mobiele communicatie.
  • Wat is eigenlijk het verschil tussen een (mobiele) website en een App?
  • De ‘mobiele revolutie’ is nog maar net begonnen. Nog minder dan 10% heeft een tablet-device. De komende jaren zullen een steeds verdergaande verschuiving laten zien van desktop naar mobiel. Je moet hier in de website voor je onderneming of sportvereniging nu al rekening mee houden.
  • Drie concrete verschillen tussen desktop usability en mobile usability:
    • schermafmeting (en de gevolgen daarvan voor je design)
    • bediening: muis vs. touch (en de gevolgen…)
    • belangrijkste doel van de site identificeren (en de gevolgen…)
  • Deze drie aspecten werden daarna getoetst voor drie verschillende sites:
  • Het bleek dat er grote verschillen zijn tussen de sites onderling. Zo is de desktop-gebruikerservaring van London 2012 op veel punten nog wel voor verbetering vatbaar, maar is er wel gezorgd voor een geoptimaliseerde mobiele versie van de website. Bij NOC*NSF is dit beeld omgekeerd. De gebruikerservaring van de ‘gewone’ publiekssite is prima, maar is lastig bij mobiel gebruik. Hockey.nl laat min of meer hetzelfde beeld zien als London2012.com.

Verschillende sites kennen verschillende sterke en zwakke punten. Het is niet zo dat een site compleet ‘mislukt’ of ‘onbruikbaar’ is, als een van de onderdelen niet goed is uitgewerkt. Het geeft wel aan dat dit betreffende aspect nader bekeken (en liefst verholpen) moet worden, om site-bezoekers op zowel desktop- als mobiele apparaten zoveel mogelijk tegemoet te komen.

image

Presentatie

Je kunt de presentatie van dit college downloaden. Hij is beschikbaar in twee formaten:

Voor vragen over de presentatie of de rest van het gastcollege kun je contact opnemen via het contactformulier op deze site.

Peter Kassenaar
-- 29 september 2010

15september

Gastcollege Hogeschool van Amsterdam

logo_HvA Woensdag 15 september 2010 gaf ik een gastcollege op de Hogeschool van Amsterdam (HvA), afdeling Sport, Management en Ondernemen. Als oud-ALO’er was dat natuurlijk een leuke gelegenheid om eens terug te keren naar mijn roots.

Beknopte inhoud

In de presentatie kwamen onder meer de volgende onderdelen aan de orde:

  • Het web is niet hetzelfde als ‘het internet’. Het web is een subset van het internet. Andere internet-technieken zijn bijvoorbeeld e-mail, nieuwsgroepen, P2P-netwerken en meer.
  • Bij websites zijn onder meer de volgende twee aspecten te onderscheiden: Techniek (werkt alles zoals het moet werken) en Usability (gebruikersvriendelijkheid; is de website eenvoudig en efficiënt te gebruiken). In het college ging ik vervolgens dieper in op enkele usability-aspecten.
  • Om de usability/gebruikersvriendelijkheid van een website meetbaar te maken, kun je de complete site opdelen in een aantal deelaspecten, zoals herkenbaarheid, snelheid, mogelijkheden om te zoeken en meer. Door deze deelaspecten in detail te bekijken en ze te beoordelen, kun je uitspraken doen over de totale gebruikersvriendelijkheid van een site en wat de verbeterpunten zijn.
  • Als voorbeeld werden de volgende drie aspecten beoordeeld voor verschillende sites: Herkenbaarheid, Navigatie en Interactie.
  • Deze componenten werden bekeken voor:
  • Verschillende sites kennen verschillende sterke en zwakke punten. Het is niet zo dat een site compleet ‘mislukt’ of ‘onbruikbaar’ is, als een van de onderdelen niet goed is uitgewerkt. Het geeft wel aan dat dit betreffende aspect nader bekeken (en liefst verholpen) moet worden, om site-bezoekers zoveel mogelijk tegemoet te komen.

usability_HvA

Presentatie

De presentatie is beschikbaar in twee formaten

Voor vragen over de presentatie of de rest van het gastcollege kun je contact opnemen via het contactformulier op deze site.

Peter Kassenaar
-- 15-09-2010

24maart

Handboek Usability

Handboek Usability (klein) Vandaag is het Handboek Usability – ontwerp gebruikersvriendelijke, doelmatige en toegankelijke websites verschenen. In dit Handboek leert u wat de voorwaarden en kenmerken zijn voor het ontwerpen van gebruikersvriendelijke websites.

U kunt dit boek gebruiken om uw eigen websites te beoordelen op hun gebruikersvriendelijkheid. Ook leert u hoe u betere websites maakt door vanaf het begin af aan al te letten op factoren die gezamenlijk de gebruikersvriendelijkheid van een website bepalen. U leert eerst welke aspecten een rol spelen bij de usability van een site en gaat vervolgens stap voor stap in detail kijken naar deze factoren. Zo krijgt u langzamerhand een totaalbeeld van de gebruikersvriendelijkheid van een site.

Specificaties

  • Boek, paperback, 352 pagina’s
  • Full Color-uitgave
  • Geschikt voor opleidingen en zelfstudie
  • Onafhankelijk van het gebruikte besturingssysteem en browser
  • ISBN-13: 978-90-5940-415-1 (9789059404151)
  • Prijs: EUR 34,90
  • Online voorbeeldhoofdstuk beschikbaar

Van de flaptekst:

“Op internet is de gebruiker de baas. Met maar één muisklik kan hij kiezen uit duizenden soortgelijke websites. Usability gaat over het gebruiksgemak van websites. Hoe gebruikersvriendelijker uw website is, hoe beter hij zal scoren ten opzichte van de concurrentie. In dit Handboek usability laat Peter Kassenaar u uitgebreid zien welke richtlijnen van toepassing zijn bij het maken van gebruikersvriendelijke websites. U leert onder meer hoe usability gedefinieerd wordt en welke kenmerken van toepassing zijn op gebruikersvriendelijke websites. Aan de hand van helder beschreven theorie en talloze schermafbeeldingen met goede en foute voorbeelden hebt u snel inzicht in de meest gemaakte usabilityfouten bij webdesign. Door het gebruik van vragen en praktijkoefeningen aan het eind van ieder hoofdstuk is het Handboek usability buitengewoon geschikt voor opleidingen en zelfstudie”

Beknopte inhoudsopgave

  • Wat is usability en wat is user experience
  • Van algemeen naar specifiek: site-ontwerp, navigatie en paginaontwerp
  • De speciale rol van de homepage
  • Schrijven voor het web
  • Het belang van de zoekfunctie op een website
  • Usability en multimedia
  • Toegankelijk webdesign (accessibility)
  • Interactie en usability
  • Zelf usabilitytesten uitvoeren

“Dit boek is een must voor webdesigners, webprogrammeurs, webmasters, webschrijvers, hobbyisten, (media)studenten, projectmanagers en marketeers. Kortom iedereen die met websites werkt om mensen te bereiken. Eén boek – alles over website usability.”

Hyperlinks uit het boek

In het boek worden honderden voorbeelden en tientallen andere websites met meer achtergrondinformatie genoemd. Alle hyperlinks zijn – voor zover mogelijk – gebundeld op de volgende pagina:

Handboek Usability op Yindo

Yindo Logo Yindo is een nieuw platform voor het online lenen, lezen en kopen van (e-)boeken. Het Handboek Usability is in zijn geheel op Yindo gepubliceerd. Het eerste hoofdstuk is gratis beschikbaar als inkijkexemplaar. 

Daarna kunt u besluiten het boek voor een gering bedrag te lenen, te kopen als online Yindo-boek of te kopen als ‘gewone’ papieren uitgave.

Hebt u het boek gelezen en hebt u opmerkingen ter verbetering van een eventuele volgende druk? Of wilt u andere lezers laten delen in uw ervaringen? Laat dan een bericht achter onder dit artikel of tweet er over via de Yindo-pagina.

Direct bestellen

 

Peter Kassenaar
-- 24 maart 2010

 

(PS: in aanvulling op het bloggen ben ik ook actief op Twitter, voor korte berichten en handige links. Je kunt me volgen via http://twitter.com/PeterKassenaar (@PeterKassenaar is mijn Twitternaam).

24maart

Hyperlinks bij Handboek Usability

 

Handboek Usability Coverfoto Deze pagina bevat een overzicht van de hyperlinks die worden genoemd in het Handboek Usability (ISBN 9789059404151). De hyperlinks verwijzen zowel naar achtergrondinformatie als naar de sites waarvan de afbeeldingen in het boek afkomstig zijn en welke als bronmateriaal werden gebruikt.

Het is onvermijdelijk dat sommige hyperlinks in de toekomst niet meer werken, of dat de sites er niet meer zo uitzien als toen de schermafbeelding voor gebruik in het boek werd gemaakt. Bekijk in dat geval de afbeelding inclusief opmerkingen in het boek en zie of de nieuwe (huidige) versie van de site beter of juist minder goed is geworden. Welke gevolgen hebben de aanpassingen van de site in dat geval gehad voor de usability ervan?

Onder in de pagina staat een opsomming van meer aanbevolen usability-literatuur.

Hoofdstuk 1 - Inleiding

Hoofdstuk 2 – De homepage

hoofdstuk 3 – De navigatiestructuur

Hoofdstuk 4 – Zoekdienst op de website

Hoofdstuk 5 – Servicepagina’s

Hoofdstuk 6 - paginaontwerp

Hoofdstuk 7 – Schrijven voor het web

Hoofdstuk 8 – usability en multimedia

Hoofdstuk 9 – Accessibility

Hoofdstuk 10 – Interactie

Hoofdstuk 11 – usabilitytesten

Aanbevolen en geraadpleegde literatuur

Weaving the Web
Weaving the Web
Tim Berners-Lee

A Brief History of the Future
A Brief History of the Future
John Naughton

 

Don't Make Me Think!
Don't Make Me Think!
Steve Krug

Jakob Nielsen's 50 Websites
Jakob Nielsen's 50 Websites
Jakob Nielsen & Marie Tahir

Eyetracking Web Usability
Eyetracking Web Usability
Jakob Nielsen & Kara Pernice
Prioritizing Web Usability
Prioritizing Web Usability
Jakob Nielsen
About Face 3
About Face 3
Alan Cooper & David Cronin
Elements Of User Experience
Elements Of User Experience
Jesse James Garrett & Jessie James Garrett
 

-- Peter Kassenaar
november 2009 – maart 2010

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).