Lightbox als effectief tussenstation
10 January 2008 - 23:32
Tags: Cross media, Frankwatching, Marketing, Media, Tools, User experience, Video & TV, Web 2.0, e-Commerce
Je ziet ze steeds vaker verschijnen: lightboxes. Daarmee wordt niet gedoeld op helder uitgelichte reclamepanelen in bushokjes, maar op het gebruik van javascript om specifieke elementen in een webpagina meer focus te geven. Dat gebeurt door deze te presenteren als een actieve overlay op een donkere achtergrond. Media- exploitanten kunnen deze simpele techniek inzetten voor adverteerders als tussenstation tussen bron (banner op mediasite) en bestemming (eigen site / landing page).
De lightbox is niet nieuw - voor zover ik heb kunnen traceren, werd dit javascript ergens eind 2005/begin 2006 publiek gemaakt door de bedenker ervan, Lokesh Dhakar. Het werd vrij snel na de eerste release een populaire toepassing, waarschijnlijk mede door het feit dat de auteur het onder Creative Commons 2.5 licenseerde. Inmiddels zijn er steeds meer sites die deze vorm of een vergelijkbare techniek toepassen, zoals de 1-minuut nieuws update van RTL Nieuws op nrcnext.nl (zie screenshot).
Overigens lijkt NRC Next gebruik te maken van de zogenaamde videobox implementatie. Ook zijn er inmiddels varianten ontwikkeld (zoals thickbox) die een stap verder gaan en complete AJAX-toepassingen in het ’scherm’ mogelijk maken. Thickbox heeft ook nog een belangrijk snelheidsvoordeel omdat het is gebaseerd op jQuery, terwijl Lightbox is gebaseerd op prototype.js en script.aculo.us voor de effecten. Hier een link naar een demo-pagina, waarin we laten zien hoe Thickbox werkt met een YouTube filmpje.
Voor de eenvoud spreek ik hieronder maar even over de term ‘lightbox’ om het principe te duiden, niet als verwijzing naar de specifieke inhoud (plaatjes, video’s, applicaties etc.). De voordelen van deze technieken zijn duidelijk, zowel vanuit het perspectief van de site-eigenaar als de gebruiker.
Voordelen site-eigenaar
- Geen popups
Veel gebruikers hebben tegenwoordig popup killers, dus een grotere kans dat de content wordt gezien. - Stickiness
Gebruiker verlaat de site niet en kan eenvoudig terugkeren naar de onderliggende pagina. - Focus op content
Item binnen de lightbox krijgt de focus, onderliggende content wordt donker. - Rijkere content
Met deze techniek kan de content worden verrijkt met animaties, video’s en zelfs AJAX-toepassingen. - Geen design-beperkingen
De lightbox is niet beperkt tot beschikbare afmetingen binnen de reguliere site content. In principe kan het hele scherm als nieuwe laag worden gebruikt.
Voordelen voor gebruiker
- Geen popups
De lightbox fungeert als een extra laag bovenop de bestaande content. De gebruiker blijft op de site. - Focus op content
Het geselecteerde item heeft de aandacht (visueel ook door donkere achtergrond), terwijl de onderliggende content zichtbaar blijft. - Eenvoudige terugkeer naar bron
Lightbox is te sluiten door op ‘close’ te klikken, ESC in te toetsen of willekeurig ergens te klikken. - Rijke(re) ervaring
Omdat het hele scherm kan worden gebruikt voor de lightbox-toepassing, hoeft de ervaring niet beperkt te blijven tot vaste afmetingen binnen het design.
In bovenstaande opsomming is een belangrijke partij buiten beschouwing gelaten: de adverteerder. Lightboxen kunnen ook voor hun interessant zijn. We kennen natuurlijk al de expandable banner, waarmee de adverteerder ook na een klik erop in feite een laag bovenop de site claimt. Dit biedt een rijkere communicatie-interface dan een standaardbanner die direct doorverwijst naar een landingspagina van de adverteerder.
Zoals de expandable, kunnen lightboxen ook worden gebruikt als effectief tussenstation tussen bron (site medium) en bestemming (landingspagina adverteerder). Waar de expandable uitklapt vanuit het originele banner, is er bij de lightbox eerder sprake van een echte laag die zich bovenop de content manifesteert. De overige content gaat door het schaduweffect ook letterlijk naar de achtergrond, waardoor alle aandacht gericht is op de boodschap van de adverteerder.
Zo kan de adverteerder een dergelijke interface gebruiken om een groot deel van de propositie al over te brengen aan de gebruiker zonder dat deze wordt verplicht om de site te verlaten. In de lightbox kan de adverteerder bijvoorbeeld meer informatie bieden over het product of de interactie aangaan, zodat de doorklik naar de bestemmingspagina ‘rijker’ is dan een standaard doorklik naar een algemene landingspagina.
In die zin past het gebruik van een lightbox binnen het RAECS-model dat ik vaak hanteer: Reach Attract Engage Convert Support. De lightbox biedt met name toegevoegde waarde op het aspect Engage: het tussenstation tussen het wekken van de interesse van de gebruiker met een interessante propositie, zodat deze kan worden overtuigd om door te klikken (conversie) naar de landingspagina van de adverteerder.
Ten minste, voor zover doorverwijzing naar de externe site nu en in de nabije toekomst überhaupt nog nodig is. Naarmate er steeds meer ‘gadgets’ worden ondersteund, kan de site van de adverteerder in feite als een applicatielaag worden toegepast op externe sites. Denk bijvoorbeeld aan de mogelijkheid om een boek of DVD op Bol.com te bestellen direct vanuit de site waarop je de review hebt gelezen of preview hebt gezien, zonder deze site ooit te hoeven verlaten. Of dat je het product in ieder geval onder water aan je wensenlijstje kunt toevoegen, om het later wellicht te bestellen bij een bezoek aan de site. Dergelijke embedded applicaties zullen we komende tijd steeds vaker gaan zien.
Voor de site-eigenaar is het voordeel ook evident: adverteerders worden zo immers business partners waarmee andere business modellen kunnen worden afgesproken dan strict het genereren van verkeer. Denk bijvoorbeeld aan revenue sharing modellen.
Er is wel een belangrijke maar: hoe kunnen gebruikers aan een banner/gadget herkennen dat het om een lightbox gaat? Wellicht zou de industrie hier een icoon voor kunnen bedenken, zoals we dat ook kennen van bijvoorbeeld RSS feeds.
Zoals gezegd, zullen we veel meer embedded applicaties gaan zien in de toekomst. De lightbox (en afgeleide varianten) biedt interessante mogelijkheden voor alle betrokkenen.
4789x gelezen 33 reacties
11 January 2008 om 10:55
Richard, duidelijk artikel! Ik gebruik zelf ook lightboxes (de jQuery variant) en het is een goede manier om bv images op fullsize te laten zien zonder lelijke browser-vensters, new windows of andere ellende. Ook voor galleries werkt het goed, dmv next en previous knopjes.
Uiteraard creeert het ook weer complexiteit, want hoe gaat dit in hemelsnaam werken als ik zo’n site om mijn PDA open? Of in een text-based browser? en inderdaad, hoe krijgen we dit principe (”Nee, HIER kun je OVERAL klikken om te sluiten!”) uitgelegd aan ‘beginnend gebruikers’ die al moeite hebben met het “kruisje rechtsboven”?
11 January 2008 om 10:58
Lokesh Dakar is idd de originele bedenker ervan; alhoewel couloir.org indertijd al aardig op weg was medio 2004. Alles zat er reeds in, behalve de overlay (zie ook de geupdate http://www.couloir.org/js_slideshow/). Bovendien was die van couloir niet zo populair en vrij complex om aan te passen/te implementeren aangezien er nog geen degelijke libraries (prototype, jquery, domassistant, etc) bestonden toendertijd.
O ja, wist je dat het ook mogelijk is om Lightbox vanuit Flash applicaties te gebruiken/te starten/aan te sturen?
Zie http://www.bram.us/projects/flashlightboxinjector/ voor meer info ;-)
11 January 2008 om 11:00
Lokesh Dakar is idd de originele bedenker ervan; alhoewel couloir.org indertijd al aardig op weg was medio 2004. Alles zat er reeds in, behalve de overlay (zie ook de geupdate http://www.couloir.org/js_slideshow/). Bovendien was die van couloir niet zo populair en vrij complex om aan te passen/te implementeren aangezien er nog geen degelijke libraries (Prototype, jQuery, DOMAssistant, etc) bestonden toendertijd.
O ja, wist je dat het ook mogelijk is om Lightbox vanuit Flash applicaties te gebruiken/te starten/aan te sturen?
Zie http://www.bram.us/projects/flashlightboxinjector/ voor meer info ;)
11 January 2008 om 11:12
@Bramus: Txs voor de tip van Flash apps te kunnen toepassen!
@Wouter Broekman: dank voor je reactie. Ik realiseer me idd dat het niet makkelijk zal zijn om gebruikers te overtuigen dat klikken op een lightbox niet tot een snelle exit van de site leidt. Vandaar mijn suggestie om een herkenningsteken te ontwikkelen, zoals er voor RSS bestaat. Bij deze een oproep voor suggesties!
11 January 2008 om 11:45
wat helemaal interessant is met lightbox, is een digitale 2 page spread zoals deze ook in traditionele media gebruikt wordt. Met het lightbox script wordt een full screen ad geopend waarin een adverteerder veel ruimte heeft. De plugin is te downloaden op http://www.double-page-spread.com/
11 January 2008 om 12:50
Goed artikel! Viel me laats ook op, onder meer bij Quicksilverscreen.com, dat ook online mediaplayers deze techniek gebruiken.
Zo heeft de laatste versie van Divx-player een optie die het scherm rondom het afgespeelde media-bestand donder maakt of beter gezegd, dimt. Werkt heel aardig.
11 January 2008 om 12:51
@ nietsnut : da’s geen lightbox, maar een fullscreen Flash filmpje (Flash Player 9 required); een lightbox blijft in je browser window ;)
Edoch een interessant linkje :)
11 January 2008 om 13:08
@bramus, idd ja, is flash, maar zo’n full page ad moet ook met lightbox te maken zijn :)
11 January 2008 om 13:09
@Polle: Stage6 van Divx werkt idd met dezelfde truc. De Divx player heeft een aantal leuke features onder de rechtermuistoets zitten, zoals Windowed & Fullscreen mode, alsmede een keuze uit meerdere audio- of subtitle tracks… Nadeel is wel dat de Divx player nog niet zo’n breed bereik heeft als de flash mediaplayer.
11 January 2008 om 14:35
nietsnut
I am the designer of http://www.double-page-spread.com
you only need (flash playler 9) not ajax and not lightbox.
Ik ben de ontwerper van http://www.double-pagina-spread.com u slechts wenst (flits playler 9) niet ajax en niet lightbox.
Sorry i’m English
best
steve
11 January 2008 om 17:27
Goed verhaal zeg, heerlijk om te lezen.
Zelf heb ik al tal van landingspagina’s en websites gemaakt met Joomla! CMS. Aangezien de plugin lightbox al enkele jaren beschikbaar is voor dit open source content management systeem ben ik er eigenlijk een beetje verliefd op geworden. Wat betreft de usability kreeg ik alleen maar complimenten. Marketing is emotie, door gebruik te maken van een lightbox wordt alles veel “sexier” gepresenteerd.
Het vergt echter wel technische kennis om bijvoorbeeld een gallarij samen te stellen. Wellicht is daar een module, component beschikbaar voor om deze functie nog makkelijker en sneller in te zetten.
Wat betreft de commerciële mogelijkheden voor dit product zijn ze zeer goed besproken. Denk maar eens aan de hoogwaardige foto’s voor wat betreft product presentatie’s in webshop’s. Juist vanwege het feit dat de kwaliteit en uitstraling van webshop’s steeds belangrijker gaat worden ten opzichte van de prijs kan lightbox een meerwaarde zijn om klanten te overtuigen.”
“Je meest dierbare foto druk je toch ook niet achter een plastic plaatje”
Groeten van Pascal en alvast een fijn weekend
11 January 2008 om 17:39
http://www.biedmeer.nl die ook webshops aanbieden hebben trouwens lightbox aan hun software toegevoegd op advies van mij :) wel cool. ze kende het nog niet, en de pop-up is gewoon veel mooier.
11 January 2008 om 22:46
Leuk stukje, zelf ook wel eens over lightboxen nagedacht maar toch voor gekozen om ze niet te gebruiken. Tenminste niet in de besproken vorm, de reden daarvoor is dat ik niet het schok effect ‘van wat is er met mn venster gebeurd, en hoe krijg ik het weer terug’. Zelf vind ik het inzoom effect net ietsje relaxter. Zie bv de screenshots op deze pagina: https://www.panic.com/coda/, je snapt precies wat er gebeurt, en de hele pop-in is klikbaar als sluit functie. En de flashbased zoom-in op deze site vind ik ook wel tof
13 January 2008 om 17:03
Een snelle en compactere variant op LightboxJS die de moeite waard is om te bekijken is Slimbox (http://www.digitalia.be/software/slimbox). Gebaseerd op MooTools met nog enkele andere voordelen boven LightboxJS.
13 January 2008 om 22:13
Strakke site heb je zeg.
14 January 2008 om 09:33
Iedereen: hartelijk dank voor jullie reacties. Leuk om te zien dat dit onderwerp ‘leeft’ …
@Sjors: dat inzoom effect is ook erg mooi. Zullen we ook vast meer gaan zien. Geen donkere achtergrond en een duidelijke sluitfunctie.
@JulesJ: deze variant laat idd mooi zien dat het scherm ook kan meeschalen met meerdere varianten (bij de galleries goed zichtbaar).
14 January 2008 om 13:00
Mooi artikel — ik ben van Lightbox overgestapt op Highslide. Een vergelijkbaar idee, maar subtieler uitgevoerd. Dit omdat het geen gebruik maakt van een donkergrijze tussenlaag, maar de content laat uitzoomen.
Op de voorbeeldpagina
http://vikjavev.no/highslide/#examples
is mooi te zien hoe verschillende soorten content getoond kunnen worden.
14 January 2008 om 15:07
Mooi ook dat Highslide! De grijze tussenlaag kan m.i. echter soms ook zinvol zijn omdat het de focus van de gebruiker goed leidt.
Een van de beste toepassingen van de lightbox vond ik enige tijd terug op http://www.goincase.com waar de shopping cart in een lightbox zit. Inclusief 1-page checkout. Lijkt mij zeer effectief.
Wehkamp gebruikte een tijdje geleden de lightbox voor x-sell van een servicecontract bij een LCD -tv. Ik vind dit nu niet meer terug op de site dus wellicht zijn hun ervaringen minder goed.
14 January 2008 om 15:24
Mooie voorbeelden inderdaad! Dat highslide ziet er ook goed uit, vooral in combinatie met flash en/of ajax content… kan me voorstellen dat het mooi kan werken met interactieve inhoud ipv alleen images.
Ben wel benieuwd hoe al deze oplossingen scoren op compliance (w3c) en cross-browser compatibility, iets waar ik nogal eens tegenaan loop.
Ik gebruik zelf de jquery Thickbox variant : http://jquery.com/demo/thickbox/#sectionb-1 en tot nu toe goede ervaringen mee: light en compatible.
14 January 2008 om 16:45
@Jeroen: Highslide is cool. Leuk ook dat je door de foto’s heen kunt wandelen met je arrow-keys.
@Thijs: mooie toepassing van een lightbox als functie voor tussenstap richting kassa of verder shoppen.
De focus van de reacties ligt nu echter vooral nog op toepassingen binnen websites zelf. Denken jullie ook dat adverteerders hier iets mee kunnen? Hebben jullie hier al voorbeelden van gezien?
15 January 2008 om 14:33
Terug naar de Popup? Kom op, mensen gaan dit op den duur ook irritant vinden.
15 January 2008 om 14:55
@Bert: zoals geldt bij alle (web-)technieken werken ze pas optimaal als je ze in de juiste vorm en met mate inzet. Het voorbeeld van schermvullende content is dan ook over the top.
15 January 2008 om 15:08
@Jeroen & Bert,
Leuk om te zien dat de discussie weer verder gaat wanneer het om lightboxes gaat. Gisteren heb in al mijn enthousiaste maar eens de diverse tehnieken uitgezocht, en toegepast, op mijn persoonlijke websites in Joomla en WordPress.
Daarnaast denk ik dat de usability alleen maar toeneemt doordat je “externe” links toch in je eigen pagina kan laden. Weet persoonlijk niet of dit nou ten goede komt voor het doorlinken of dat info wordt geindexeerd door zoekmachines.
Elke beheerder van een website wil zo lang mogelijk de bezoeker vasthouden en je weet zelf, dat je eigen focus, binnen enkele seconden weg is wanneer je weer op een andere website zit. Juist door gebruik te maken van een lightbox hou je de mensen in je eigen “kamer”.
15 January 2008 om 15:13
@Pascal: dat is wel een goed punt. Mag je externe links met deze techniek in je eigen pagina laden? Het lijkt een schemergebied (en dan bedoel ik niet de grijze overlay van lightbox ;-) ) omdat je zo content van een ander op je eigen site publiceert. Wat vind jij?
Ik geloof in ieder geval niet in het inzetten van techniek om mensen op je site te houden. Die energie kun je beter steken in de kwaliteit van je content.
15 January 2008 om 15:50
@Jeroen: Jouw vraag of het mag om externe content in te laden had ook mijn nare gedachte tijdens het uitproberen van de diverse plugins voor ondermeer Joomla & WordPress. Ik zou het dus niet goed vinden wanneer bijvoorbeeld mijn verhalen worden geplaatst terwijl ik daar zelf niet de regie over heb. Je loopt dan de kans dat jouw research elders wordt ingezet zonder dat je daar de credits voor krijgt of dat het, achteraf gezien dan, niet het gewenste resultaat haalt. Of het nu gebruikt mag worden? Weet ik niet, het enige wat de eigenaar van content kan doen is om juiste voorwaarden op je site achterlaten en maar hopen dat “de gedragsregels” worden nageleefd.
Technisch is het mogelijk om een en ander blokkeren zodat het niet elders kan worden gebruikt
Er zijn dus meer mensen die dit onderwerp dragen, leuk om te horen Jeroen.
Wat betreft het onderwerp of de content wel wordt geindexeerd is ook interessant. Ik kan mij haast niet voorstellen dat dit ten goede komt wat betreft SEO, weet het niet en ik heb er nog geen onderzoek naar gedaan.
15 January 2008 om 15:58
De originele Lightbox is natuurlijk een geheel ‘unobstrusive’ stukje JavaScript dat over een gewone link naar een plaatje wordt gelegd.
De verschillende Thickboxen en dergelijke zijn inderdaad een stuk minder unobstrusive en soms zelfs compleet onbruikbaar zonder JS, betreffende SEO een accessibility inderdaad geen goed nieuws.
Wat betreft het inladen van je content in andere pagina’s zie ik Thickboxes en dergelijke oplossingen niet echt als bedreigingen. Het blijft namelijk een stuk makkelijker om content gewoon te kopieren/plakken. Daardoor verdwijnt de verwijzing naar de originele bron zelfs helemaal, iets dat met een Thickbox minder het geval is.
15 January 2008 om 17:21
JulesJ: Eh.. ThickBox is óók volledig unobtrusive en heeft dus absoluut géén gevolgen voor zoekmachine-indexatie of gebruiksvriendelijkheid.
Voor zowel ThickBox als Lightbox (en Slimbox, een lichtgewicht variant van Lightbox) geldt dat de afbeeldingen (of HTML-pagina’s, video’s, enz.) die normaal in de lightbox zouden verschijnen gewoon in hetzelfde venster geopend worden, waardoor ze normaal te indexeren zijn door zoekmachines én ook toegankelijk blijven voor mensen/browers zonder JavaScript.
Ik heb een tweede demo pagina gemaakt waarin je kunt zien hoe dit werkt (al is het echt niet zo spannend ;) ). Deze pagina mist de twee benodigde JavaScripts voor ThickBox (wat hetzelfde effect heeft als JavaScript uitzetten in je browser).
Overigens, tegen het “framen” van je site in een lightbox (of in welk frame dan ook) kun je je weren met een simpel stukje JavaScript. Waar je je wat moeilijker tegen kunt weren zijn server side includes, dan zou je het IP-adres van de server moeten blokkeren, maar ik heb niet het idee dat dit op grote schaal wordt toegepast en ik verwacht ook niet dat dit zal gebeuren.
15 January 2008 om 18:14
Mijn fout. Ik heb alleen ervaring met een van de eerste versies van Thickbox, en daar zaten volgens mij allerlei TB variabelen in de href verwerkt.
Sorry.
16 January 2008 om 22:14
Heeft iemand ervaring met het gebruik van Lightbox of Highslide voor het viewen van pdf’s? Ben heel benieuwd of dat mogelijk is.
16 January 2008 om 23:29
Wilfred: Dat gaat niet zomaar. Je zou een iframe kunnen gebruiken, maar dat lijkt me niet echt gebruiksvriendelijk. Bovendien heb je dan nog altijd Adobe Reader nodig. Wat wel kan is Flash gebruiken. Ik heb even gezocht en een tooltje gevonden waarmee je PDF kunt omzetten naar Flash:
12 February 2008 om 23:52
@Simon: je kan ook - mits enige kennis van C# op VB.Net - Photoshop aansturen om automatisch PDF bestanden om te zetten naar een JPG (of een ander willekeurig formaat) ;)
(zie tweede deel van post op http://www.bram.us/2006/06/26/my-gazette/ ;))
1 May 2008 om 16:18
Wat een onzin over het snelheids voordeel met Thickbox en jQuery. Gzip je javascript bestanden of download Protopacked, dan valt er over het verschil in filesize en snelheid niet meer te spreken.
Hier een betere variant, zeker zo snel:
Lightview: http://www.nickstakenburg.com/projects/lightview