Sleep-navigatie knoppen

Webdesigners blijven zoeken naar bijzondere manieren om te navigeren door een website. Soms zitten daar bijzondere vondsten tussen.

Soms zijn die zo bijzonder dat je je een ongeluk zoekt naar de manier om het te gebruiken. Een voorbeeld daarvan is sleep-navigatie, die je kunt tegenkomen op één-pagina sites, die je pagina-voor-pagina moet doorlopen van het begin tot het eind. Dat beperkt de vrijheid van de gebruiker. Verder belemmert het de gebruiker om snel de (door de maker van de site gewenste) conversie te doen (bijvoorbeeld iets bestellen of een mailtje sturen).

Hoe ziet het er uit?
Hier onder zie je een voorbeeld van een sleepknop. Het is de bedoeling dat je het rondje met de pijl naar het cirkeltje sleept (met de muis of met je vinger op een aanraakscherm). Als de de pijl in de cirkel komt gaat de site iets doen. In de praktijk wordt de volgende pagina geopend. In dit geval krijg je een alert te zien met de tekst: "Jawel het is u gelukt!"
De puntjes zijn bedoeld om aan te geven waar je heen moet slepen.
Als je niet weet wat je met deze knop moet doen, is dat nutteloos.

De implementaties die ik heb gezien hebben één ding gemeen: Er is te weinig contrast tussen de knop en de achtergrond. Daardoor is de knop moeilijk te zien. Dat is niet slim als je de bezoekers niet voortijdig wilt wegjagen.
Dezelfde aanpak is ook op deze bladzijde gebruikt. De puntjes zijn donkergrijs gemaakt, anders zie je ze helemaal niet meer…

Hoe gebruik je het?
•  Klik op het het rondje met de pijl en sleep het een stukje naar rechts.
•  Laat de muisknop los. Het rondje met de pijl zit nu aan de muis vast.
•  Beweeg de muis naar het rechter rondje en klik er op.
Het rondje met pijl wordt losgemaakt van de muis; de (ingeprogrammeerde) actie wordt uitgevoerd.

Als je een beetje met deze knop speelt, zul je merken dat de implementatie niet helemaal lekker is. Het is met name vreemd dat je eerst moet klikken om de pijl aan de muis te koppelen en pas daarna kunt slepen. Vervolgens moet je op het rondje klikken om de actie te krijgen.
Een en ander wordt veroorzaakt door de manier waarop de knop is geprogrammeerd in HTML, CSS en JavaScript. Met name het JavaScript zorgt hier voor de problemen.

Wat is er op tegen?
Er is niets op tegen om sleep-navigatie te gebruiken in je site, maar kijk wel goed wáár je het toepast. In bijvoorbeeld een foto-album met alleen sleep-navigatie zit je opgesloten. Je kunt niet terug, en je kunt er ook niet willekeurig in bladeren.
Wees je dus bewust van de beperkingen die er (nog) zijn.

Tenslotte:
Sleep-navigatie zou een trend te worden (juni 2017), vooral in sites waarvan de maker graag wil laten zien wat hij allemaal voor moois kan maken. De call-to-action is moeilijk bereikbaar als alternatieve navigatie ontbreekt. Gebruik sleep-navigatie alleen als het iets wezenlijks toevoegt aan je site. Er staan al genoeg net-niet-mooie sites op internet.
Update mei 2020: Sleep-navigatie is gebleken toch niet zo handig te zijn. Het wordt nauwelijks meer toegepast.