Adblockers helpen design en UX om zeep

Adblockers beperken zich niet uitsluitend tot het weglaten van advertenties. Optioneel blokkeren de applicaties namelijk ook JavaScript, afbeeldingen en lettertypes. En dat heeft een vervelend effect: de adblocker zorgt daarmee niet alleen voor het mislopen van advertentie-inkomsten, die helpt daarmee ook je design om zeep.

‘Populaire mobiele apps als Purify en Peace zijn in essentie adblockers, maar als de gebruiker de laadsnelheid van websites wil bevorderen, kan diegene extern geladen content blokkeren: JavaScript, maar ook lettertypes’, zegt Sybren Wartna, front-end developer bij Mirabeau. ‘Nu na de nerd ook het grote publiek de adblockers ontdekt, wordt dat een serieus probleem.’

JavaScript zorgt veelal voor de interactie, typografie is een vast onderdeel van de huisstijl en branding. ‘Als ontwikkelteam moet je dus bij de bouw al rekening houden met het zogenaamde ‘fallback font’, een alternatief lettertype voor als de eerste keuze niet kan worden geladen.’ En dat wordt in praktijk nogal eens nagelaten, laat Wartna zien.

Zo blijken de websites van ING en PostNL hier niet goed op voorbereid. Het design is na het activeren van desbetreffende adblockers niet meer in lijn met de huisstijl. Doordat veel designers tegenwoordig kiezen voor zogenaamde icon fonts – iconen die in de typografiebestanden zijn opgenomen – verdwijnen die bovendien in het geheel. De interactiemogelijkheden zijn niet meer zichtbaar. Het hamburgericoon waarmee het menu kan worden geopend is op de website van KLM bijvoorbeeld verdwenen.

Afbeelding uit iOS : PostNL origineel (links) en met adblocker geactiveerd (rechts)

postnl-font

Afbeeldingen op desktopformaat van website ING: omdat de iconen en zelfs het logo in een font zijn gevat, vallen deze weg bij activeren adblocker

webfont-ing

Afbeelding KLM: waar het hamburgericoon voor het menu moet verschijnen, treft de gebruiker een bijna leeg blokje

Schermafbeelding 2015-12-07 om 12.34.25

Wartna: ‘Het gevaar is dat de mobiele website niet doet wat die moet doen. In het geval van KLM lijkt de website bijvoorbeeld onvolledig. Waar vind ik nu de mogelijkheid om in te checken? De gebruiker geeft jou als bedrijf de schuld van die negatieve ervaring. Het is maar een simpel stukje code dat nodig is, maar zonder heb je een geheel andere merkbeleving. Er wordt wel eens gezegd dat typografie 95 procent van het design bepaalt. Over het percentage kun je twisten, maar de invloed is zeker groot.’

‘Designers gaan geregeld uit van een ideaalplaatje, die ontwikkelen voor het ideale apparaat en de ideale internetverbinding. Ze erkennen niet hoe het in echte leven gaat. De ‘fallback’ wordt niet ingebouwd waardoor het apparaat zelf een vervangend lettertype zoekt.’

Idealiter bouwt een team een mobile first structuur en past daarna pas de styling toe. ‘Er wordt een bepaalde gelaagdheid aangebracht, de basis verrijk je met laagjes van elementen geoptimaliseerd voor ondersteunende browsers of apparaten. Progressive enhancement noem je dat. Je moet designers vragen wat er gebeurt of zou moeten gebeuren als een lettertype niet beschikbaar is in een situatie. Op basis van wat analyses kun je vaststellen hoe waarschijnlijk die aanwezigheid is. Bouw dan alternatieven in die in de buurt komen bij je ideaal.’

Dat nalaten kan uiteindelijk zelfs schade berokkenen aan het merk, vindt Wartna. ‘Stel dat de Belastingdienst dit bijvoorbeeld vergeet en je ontvangt een online brief in een ander lettertype en dus in een vormgeving die afwijkt van het gebruikelijke. De ontvanger beschouwt die brief dan gewoon als phishing.’

Foto: Holger (cc)

Waardeer je mijn werk? Ondersteun me en maak zo nog meer mogelijk

Een deel van mijn werk als freelance journalist en schrijver is op eigen initiatief en zonder opdrachtgever. Wil je me daarin steunen, dan kan dat met een donatie.

Ook interessant

Scroll naar top