Animerende banners: op het juiste moment op de juiste plek

10 aug 2012
.
Door: Luuk Rouwhorst
No votes yet.
Please wait...

9
(0)

Hoe bied je een bezoeker op een eenvoudige, pakkende manier extra informatie (zoals social media deelknoppen) gebaseerd op de inhoud van het artikel of leespositie van de bezoeker? Oplossing: de animerende banner!

Je hebt een artikel geschreven en zou het fijn vinden als de lezers van jouw artikel via de sociale media anderen attent zouden maken op je artikel. Tegenwoordig is het gebruikelijk om dan zowel boven als onder het artikel de standaard social media deelknoppen te plaatsen, zodat gebruikers voordat ze het artikel lezen of nadat ze het artikel hebben gelezen eenvoudig het artikel kunnen delen op hun time Lines van bijv. Twitter, Facebook en LinkedIn. Maar wat als een lezer midden in het artikel een specifieke passage leest en besluit het artikel te willen delen? Dan kan hij twee dingen doen, het artikel uitlezen en onderaan het artikel de deelknoppen gebruiken of stoppen met lezen en naar de deelknoppen scrollen om het artikel te delen. Dat laatste is natuurlijk verre van gebruiksvriendelijk, omdat de lezer zijn leespositie dan verliest en moet zoeken waar hij gebleven was.

Opkomende trend: de animerende banner

Bovenstaande situatie heeft interaction designers en ontwikkelaars aan het denken gezet. Hoe bied je een bezoeker op een eenvoudige, pakkende manier extra informatie (zoals social media deelknoppen) gebaseerd op de inhoud van het artikel of leespositie van de bezoeker?

Even uitgaand van de social media deelknoppen, zou je dit kunnen doen door naast, boven en onder het artikel, onder elk hoofdstuk of alinea de deelknoppen terug te laten komen. Maar dat heeft consequenties voor de vormgeving en leesbaarheid van je artikel, afgezien van mogelijke irritaties die dit kan opwekken bij je bezoekers, met alle gevolgen van dien.

Steeds vaker wordt informatie aangeboden in een bannertje of blokje dat middels een opvallende animatie zichtbaar wordt boven of onderaan het artikel, maar pas als je op dat deel van het artikel aanbeland bent en het voor jou relevant zou kunnen zijn. Een veelvoorkomend voorbeeld hiervan is de vakantie boeking site waarop je een hotel of vakantie aan het bekijken bent. Als je onderaan de pagina bent aangekomen, komt er een blokje in beeld waarin je de mogelijkheid wordt geboden om het hotel te delen of zelfs meteen te boeken.

Voorbeelden van toepassingen

Je kunt natuurlijk ook andere relevante informatie aanbieden, gebaseerd op de leespositie van een bezoeker. Hierbij kun je denken aan links of statistieken die gerelateerd zijn aan het onderwerp van het artikel. Hieronder vind je een aantal voorbeelden van toepassingen, waarbij het oog van de bezoeker meteen getrokken wordt naar een blokje content dat via een beweging of fade getoond wordt:

Booking.com

Internationale vakantieboekingssite booking.com geeft de bezoeker de mogelijkheid om een hotel te delen, nadat het hotel is bekeken:

Hotels.com

Eveneens internationale vakantieboekingssite hotels.com geeft het aantal recente boekingen van het hotel weer als de bezoeker in de buurt komt van het boekingsformulier:

New York Times

Internationale krant The New York Times maakt slim gebruik van deze methode om lezers meteen door te verwijzen naar volgende, relevante artikelen nadat ze een artikel helemaal gelezen hebben:

Oktrends

Het blog van Oktrends toont de social mediadeelknoppen als het einde van het artikel is bereikt:

Team Nijhuis

Recentelijk heeft Team Nijhuis hetzelfde trucje toegepast op ons kennisdocument over de 7 stappen om een goede huisstijl te ontwikkelen. Wij hebben ervoor gekozen om na de eerste hoofdstukken van het artikel de social mediadeelknoppen zichtbaar te maken en deze in beeld te houden tot de onderkant van het artikel is bereikt. Hier staan dan ook social mediadeelknoppen en dus kan de banner vervallen:

Dit artikel

Bovenaan dit artikel is inmiddels ook een geanimeerde banner verschenen met daarin een link naar ons vakpraatartikel over huisstijlontwikkeling.

Dit zelf toepassen op jouw website?

  • Denk goed na over wat je waar en wanneer wilt tonen en wat het doel van deze methode voor jouw artikel of website is. Wil je jouw bezoeker informeren of aanzetten tot actie?
  • Onderzoek op welke plek een dergelijk stukje content het meest zal renderen. Team Nijhuis kan je hierin adviseren.
  • Gebruik onderstaande jQuery voorbeeldcode om je banner zichtbaar te maken op basis van de positie in je artikel:

// tijdens het scrollen:
$(window).scroll(function(){
// bereken de hoogte van het artikel
var h = $(‘#artikel’).height();

// bereken de huidige positie
var y = $(window).scrollTop();

// bepaal start en eindpunt voor de banner (in dit geval procentueel)
var toon_vanaf = h*.10;
var toon_tot = h*.98;

// als de leespositie zich tussen start en eindpositie bevindt, dan de banner tonen!
if(y > toon_vanaf && y < toon_tot){
$(“#banner”).fadeIn(“fast”);
}
// anders de banner onzichtbaar maken
else {
$(‘#banner’).fadeOut(‘fast’);
}
});

  • Kijk eens naar de mogelijkheden die jQuery Waypoints te bieden heeft
  • Neem contact op met Team Nijhuis, wij kunnen je adviseren en een dergelijke oplossing voor jouw website realiseren!

Send this to friend