[column] Content voor optimalisatie

Dit is het derde artikel van een één week durende serie over duurzame UX. De afgelopen twee dagen introduceerden we de beweging binnen de designwereld die ernaar streeft de CO2-voetafdruk van digitale producten te verminderen en spraken we over hoe wij er zelf mee bezig waren door kleine prikkels toe te voegen aan iMessage. Vandaag willen we een stap verder gaan en bespreken we hoe we onze content via ontwerpen kunnen optimaliseren en zo kunnen streven naar duurzaamheid.

Websites vreten energie

‘Data is de oorzaak van de reusachtige CO2-voetafdruk van onze websites.’ In het artikel, Sustainable UX design: saving the environment with smarter websites, bespreekt technologiebedrijf Parker Software zijn visie op het effect van data op het milieu.

Data is de oorzaak van de reusachtige CO2-voetafdruk van onze websites

Het bedrijf ziet dat de constante toename van nieuwe websites steeds meer energie vergt. Volgens hen kunnen we dit energieverbruik verbeteren door in onze ontwerpen de juiste keuzes te maken.

Verstrikt in het web

Wanneer gebruikers een pagina bezoeken, moeten alle gegevens op die pagina worden gedownload. Voor het ontvangen en op het scherm tonen van alle benodigde content is energie nodig. Afhankelijk van het doel van de gebruiker zijn al die gegevens voor hem wellicht helemaal niet interessant, en wordt die energie dus verspild. Vooral webshops maken zich hier schuldig aan. Als je naar een specifiek artikel navigeert, moet je van categorie naar categorie klikken en elke keer nieuwe data ophalen. Elke klik waarmee een nieuwe pagina wordt geopend, maakt je website minder duurzaam, dus is het belangrijk je materiaal zo toegankelijk mogelijk te maken. Maar hoe zorgen we ervoor dat de content voor het grijpen ligt?

Ikea

Ikea pakt dit op zijn website goed aan. Met een overzichtelijk navigatiepaneel en voorgestelde producten in de zoekfunctie kunnen gebruikers de artikelen die zij zoeken snel vinden. Net als in de meeste andere webshops, kunnen gebruikers met het navigatiepaneel van Ikea filteren op verschillende categorieën. Vanuit UX-oogpunt is dit duidelijk gedaan om het zoeken naar producten in een gigantische gegevensbank makkelijker te maken, maar het voorkomt ook dat productgegevens moeten worden geladen die de gebruiker niet wil of hoeft te zien.


Als er een product in de zoekbalk wordt getypt, suggereert de Ikea-website automatisch populaire producten die overeenkomen met de zoekterm. Door de gebruiker onmiddellijk opties aan te bieden, kunnen zij het product waar ze naar op zoek zijn nog sneller vinden. Hiermee voorkomt Ikea ook dat gebruikers hele pagina’s met, laten we zeggen, spiegels laden, en zo wordt een hele pagina aan energieverbruik bespaard.

Verklein de boel

Zeg nou zelf, moet dat kleine pictogram in de navigatiebalk er echt zo perfect uitzien? Zou het iemand opvallen als het bestand is gecomprimeerd of als het wat minder pixels bevat? Om de impact van onze ontwerpen op de wereld te beperken, moeten we die extra bytes aan data gaan verwijderen.

Een bedrijf dat zich echt richt op de kleinst mogelijke contentgrootte is Lowtech Magazine. Met hun website op zonne-energie proberen zij ‘het energieverbruik gerelateerd aan toegang tot [hun] content drastisch te verminderen’.

Met hun website op zonne-energie probeert Lowtech Magazine het energieverbruik gerelateerd aan toegang tot [hun] content drastisch te verminderen

Om dit doel te bereiken, hebben zij in hun ontwerp duidelijke keuzes gemaakt. De website is geheel statisch, waardoor het laden van pagina’s minder computationele energie kost. Ook worden aangepaste lettertypen en logo’s vermeden en worden afbeeldingen geconverteerd met een rastertechniek.

Onze aanpassing: een optimaal filter voor Instagram

Instagram is misschien wel de grootste speler in ons dagelijkse dataverbruik. Met de steeds verversende afbeeldingen en video’s en de oneindige Stories laden we constant nieuwe content. Met meer dan een miljard Instagram-accounts en 500 miljoen dagelijkse gebruikers van Instagram Stories (Instagram, 2019), worden er voortdurend een heleboel gegevens door de app gegenereerd.

In 2015 heeft Instagram zijn standaard vierkante afbeeldingsformaat van 640 pixels aangepast om de verticale en horizontale formaten te ondersteunen (16:9). Sindsdien heeft een afbeelding van Instagram Stories een afmeting van 1080 x 1920 pixels en een maximumgrootte van 30 MB.

Om de omvang van de op Instagram Stories gedeelde content te verminderen, hebben wij een milieubewust AR-filter gecreëerd. Hierbij lieten wij ons inspireren door Lowtech Magazine en de manier waarop zij afbeeldingen op hun website rasteren. Ons Instagram-filter gebruikt een halftint-effect, wat afbeeldingen comprimeert tot punten in plaats van tinten. Er zijn veel minder gegevens nodig om de afbeeldingen op te vullen, waardoor ze aanzienlijk minder groot zijn.
Met behulp van het AR-filter willen we het formaat van de Instagram Story bij de bron verkleinen. Het filter leest en creëert een gerasterd beeld van de werkelijkheid, waarin sommige pixels niet hoeven te worden weergegeven. Het resultaat is een opvallend kleiner, gefilterd beeldformaat dan het origineel. Door ons filter te gebruiken, kunnen Instagrammers het formaat van hun originele afbeelding zelfs met meer dan 50 procent verkleinen.
Met de introductie van een nieuw duurzaam filter op Instagram worden gebruikers misschien duurzamer zonder dat ze het zelf doorhebben. We hoeven ze geen keuze op te dringen, maar kunnen het filter gewoon beschikbaar stellen. Optimalisering in content hoeft voor gebruikers niet zo dwingend gebracht te worden. Het kan op de achtergrond worden uitgevoerd en toch een groot verschil maken.

Goede UX is duurzame UX

In het artikel van Parker Software wordt gesteld dat een slecht UX-ontwerp van een website erop kan wijzen dat die niet erg duurzaam is. Daar zouden ze weleens gelijk in kunnen hebben. Een belangrijk onderdeel van goede UX is het makkelijk toegankelijk maken van content, waarbij snelheid uiteraard een rol speelt. We zien dit ook in de voorbeelden in ons artikel. Als ontwerpers moeten we voorkomen dat we de tijd van de gebruiker verspillen aan eindeloze navigatie of langzaam ladende content.
Bij het ontwerpen van elke nieuwe pagina moeten we alert zijn op welk effect de toevoeging van deze content zal hebben. In de eerste plaats was onze grootste motivatie hierbij de gebruikerservaring. Hoe zouden mensen naar deze pagina navigeren? Hoe zouden ze het gebruiken? Waar zouden ze hierna naartoe gaan? De pagina’s werden geoptimaliseerd om de reis door digitale producten zo makkelijk mogelijk te maken.
Nu we in ons werk actief en bijna vanzelf een naadloze stroom creëren, kunnen we misschien een stap verder gaan. Hoe kunnen we ons werk zo aanpassen dat onze impact op het milieu zo klein mogelijk is? Meer daarover morgen.

Ons Instagram-filter is nu beschikbaar op @master.digital.design.

Tekst: Danique de Bies & Kent de Bruin
Illustraties: Matthijs Nolst Trenité
Filter en berekeningen: Gabriela Onu

Lees ook:
Deel 1: Software vervuilt de wereld
Deel 2: Hoe kleine ‘duwtjes’ het verschil kunnen maken