Soda studio

De (r)evolutie van het toetsenbord, sneltoetsen op het web

,

Click here for the English version (Slideshare).

Steeds meer websites werken als krachtige (software)applicaties, zogenaamde web apps. Dit zijn geen statische pagina’s waarbij de gebruiker enkel op tekst-links rondklikt; sites als YouTube, Mixcloud of Soundcloud zijn echte mediaspelers geworden die ononderbroken content kunnen presenteren en afspelen.

Behalve dat veel web apps goed werken met handgebaren (gestures) op touchscreen-toestellen wordt er steeds vaker inventief gebruik gemaakt van het toetsenbord dat nagenoeg hetzelfde is gebleven sinds de eerste computer.

Zo kan de gebruiker op microblog website Tumblr de toetscombinatie “Alt + Tab” gebruiken om te navigeren tussen blogs die hij of zij volgt.

ALT

De navigatie om mee naar andere blogs te springen ziet er niet alleen uit als de navigatie in Windows of OSX om mee naar andere applicaties te springen (via Ctrl/⌘ + Tab), hij werkt ook nagenoeg hetzelfde. (Tumblr.com)

Ook Soundcloud maakt gebruik van sneltoetsen. De rij met cijfers op het toetsenbord is hierbij een analogie voor de timeline van een liedje. De gebruiker kan vervolgens met 1 (helemaal links) tot en met 0 (helemaal rechts van het toetsenbord) naar een bepaald deel in het liedje springen.

ALT

De timeline is opgedeeld in 10 gelijke stukken. Druk op de “5” toets en je springt naar de helft van het liedje.(Soundcloud.com)

Sneltoetsen zijn ook terug te vinden in veel Google web apps, in de Google Reader bijvoorbeeld kun je met de “J(ump)”-toets naar het volgende artikel in de lijst springen, een primaire actie op de website.

ALT

De “J” voor een primaire actie is handig omdat deze makkelijk is te vinden: op ieder toetsenbord heeft de toets een reliëf randje.

Maar ook Dropbox, de dienst om bestanden op te slaan in de Cloud en te delen met anderen, ondersteunt een paar slimme trucjes. In de interface, die lijkt op de Windows Verkenner of Apple OSX Finder, kan de gebruiker bijvoorbeeld makkelijk bestanden kopiëren en plakken via de gebruikelijke combinaties (respectievelijk Ctrl/⌘ + C en Ctrl/⌘ + V).

ALT

De sneltoetsen die men gewend is uit Windows of OSX zijn ook beschikbaar in Dropbox. Deze informatie is als een goed bewaard geheim ondergebracht in in de FAQ-sectie van Dropbox.

De moeilijkheid van mapping

Veel web apps zijn dus ook te bedienen met sneltoetsen. Het lastige aan al deze sneltoetsen is echter dat de indeling van acties en combinaties (de mapping) erg uitgebreid kan worden. Mocht je als gebruiker jezelf alle short-cuts willen aanleren, dan ontkom je er niet aan om vaak deze handleiding te raadplegen. Hierdoor is het instuderen en effectief toepassen van alle mogelijkheden eigenlijk alleen weggelegd voor de heavy users.

ALT

Vaak is een overzicht met sneltoetsen ook aan te roepen met een sneltoets. Maar zou het niet fijner zijn geweest om geen handleiding nodig te hebben? (Twitter.com)

Bovendien is er voor de mapping van toetsen geen echte standaard gedefinieerd zodat gebruikers voor iedere applicatie zich moeten verdiepen in nieuwe schema’s.

Eenvoud en gewoonte in vier stappen

Sneltoetsen slaan dus nog niet echt aan. En dat is jammer, want ze kunnen de experience van webapplicaties mooi versterken. Daarom hieronder vier richtlijnen om het inburgeringsproces van sneltoetsen te verbeteren:

1. Introduceer geleidelijk

Bij binnenkomst zullen gebruikers niet direct weten wat mogelijk is. Leer sneltoetsen aan tijdens gebruik. Voeg bijvoorbeeld een guided tour toe aan de eerste keer dat een gebruiker op de website komt met de primaire functies en bijbehorende sneltoetsen. Laat gebruikers het ook direct proberen; practice by doing, not showing.

ALT

Guided tours zijn een standaard in apps die gebruik maken van gestures. Waarom ook niet in sites die slim gebruik maken van sneltoetsen? (Screenshot uit Weathercube voor iPhone)

2. Zichtbaarheid op het juiste moment

Stop volledige schema’s met sneltoetsen niet ver weg in een site maar maak ze zichtbaar. Uitgebreide handleiding komen intimiderend en technisch over en benadrukken niet wat relevant is. Doseer de informatie op de juiste plaatsen en momenten.

Klikt een gebruiker herhaaldelijk op dezelfde functie? Laat dan op dat moment zien wat de sneltoets voor die functie is. Laat het aansluiten op zijn of haar gedrag.

ALT

Een handigheidje uit de software-wereld: noteer de sneltoets(combinatie) naast het label van een knop.

3. Volg de rest, standaardiseer

Probeer aansluiting te vinden met bestaande software of soortgelijke (grote) sites. Zo werkt de spatiebalk in YouTube als een sneltoets om een filmpje mee te pauzeren, wat aansluit op wat men gewend is uit software als Windows Media Player of Apple Quicktime.

Hierbij een aantal voorzetten voor mogelijke standaarden:

  • “J” voor jumpen naar een volgend onderdeel
  • Spatie-balk voor het starten en pauzeren van audio of video
  • “F” voor full-screen weergaven
  • “L” om content te kunnen liken
  • “Esc” van het sluiten van pop-ups of full-screen weergaven
  • “Enter” voor het uitklappen of openen van geselecteerde content
ALT

Esc(ape) voor het sluiten van een full-screen modus of een pop-up. Een standaard in vrijwel alle software, maar nog altijd te weinig op websites. (YouTube.com)

4. Herhalen, herhalen, herhalen

Aanleren heeft tijd nodig. Om sneltoetsen ook automatisme te laten worden moet het lang genoeg worden herhaald. Onderzoek toont aan dat men gemiddeld 66 dagen nodig heeft om gewoontes aan te leren. Help de gebruiker hierbij ook met ‘trainen’.

ALT

Esc(ape) voor het sluiten van een full-screen modus. Standaard in vrijwel alle software, maar nog altijd te weinig op websites. (YouTube.com)

Doe er je voordeel mee, verbeter of vul aan. Ik ben benieuwd naar je reactie: Sjoerd@sodastudio.nl Op naar de revival van het toetsenbord!

English version (Slideshare)

Bron fotomateriaal: Typewriter (Flickr.com) by higginskurt

  • sneltoetsen
  • web apps
  • standaarden

Volg ons voor een Soda refill: