animerende-banners-juiste-moment-juiste-plek

Animerende banners: op het juiste moment op de juiste plek

Team Nijhuis

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.

Wil jij meer omzet, meer leads en meer naamsbekendheid voor jouw geschreven content door middel van animerende banners op jouw website? Vraag gratis de Quickscan aan en ontdek wat wij voor jou kunnen betekenen.

Quickscan aanvragen

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:

Bekijk het voorbeeld 

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:

Bekijk het voorbeeld 

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:

Bekijk het voorbeeld 

Wil jij meer omzet, meer leads en meer naamsbekendheid voor jouw geschreven content door middel van animerende banners op jouw website? Vraag gratis de Quickscan aan en ontdek wat wij voor jou kunnen betekenen.

Quickscan aanvragen

Oktrends

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

Bekijk het voorbeeld 

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:

Bekijk het voorbeeld 

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?

Wil jij meer omzet, meer leads en meer naamsbekendheid voor jouw geschreven content door middel van animerende banners op jouw website? Vraag gratis de Quickscan aan en ontdek wat wij voor jou kunnen betekenen.

Quickscan aanvragen

  • 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!

 

Reacties op deze blog

Nog geen reacties.

Schrijf een reactie

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Hoe kan jouw bedrijf groeien met online marketing?

Ben jij benieuwd wat je nog kunt inzetten aan online marketing of wil je weten of jij wel alles eruit haalt wat erin zit? Met de Gratis Quickscan kijken wij naar jouw huidige inzet aan online marketing. Met de Quickscan geven wij aanbevelingen welke kansen en verbeterpunten er voor jouw bedrijf te benutten zijn. Gratis én vrijblijvend! Je zit nooit ergens aan vast. Ontdek het zelf!

Het start met onze gratis Quickscan!

Digitale marketing start met onze gratis Quickscan!

Klanten beoordelen Team Nijhuis met een 9/10 (67 beoordelingen ) Feedback Company

Michelle

Kan ik je helpen?

Quickscan aanvragen