6 Webtrends

Waar je niet onderuit komt.

Je knippert met je ogen en alles is weer anders. Dat geldt zeker voor de online wereld. Nieuwe ontwikkelingen volgen elkaar in razend tempo op en veel dingen verdwijnen even snel als ze kwamen (denk maar aan MSN, MySpace en Periscope). Bij effectgroep* houden we deze ontwikkelingen natuurlijk nauwlettend in de gaten. En we delen onze ontdekkingen graag met jou. Wat zien wij als belangrijkste verschuivingen/trends in het online landschap van de komende tijd? De komende 6 minuten (ja, we hebben het getimed) deep-diven we in de online trends die volgens ons nu, maar ook in de toekomst, relevant zijn.

Erik Ranke | Digital Designer | E-mail Erik
Web trends

1. Design system

In 2016 kwam het boek Atomic design van Brad Frost uit. Dat veranderde de manier van denken over webdesign! Hij bedacht namelijk een toffe methode om websites (of apps) te designen volgens een systeem. Zie het een beetje als een huisstijlhandboek, maar dan uitgewerkt in code. Er wordt geen hele pagina meer ontworpen, maar een serie van herbruikbare elementen, die perfect op elkaar zijn afgestemd en waarmee websites en applicaties op een flexibele manier kunnen worden samengesteld. Samen noemen we die elementen een design system. Steeds meer grote en kleine bedrijven werken ermee. Logisch, want design systems hebben grote voordelen.

  1. Consistentie
    Design systems zijn de bron van alle elementen die gepubliceerd moeten worden. Dit betekent dus één consistente look voor al je online activiteiten.
  2. Snelheid
    Als een design system eenmaal staat, is het vrij eenvoudig om prototypes te maken en dingen te testen. Alle elementen zijn er immers al, en kunnen naar wens worden gecombineerd voor een snel development.
  3. Schaalbaarheid
    Als je website groeit met nieuwe functionaliteiten en wordt bekeken op nieuwe apparaten met nieuwe mogelijkheden, kun je makkelijk elementen toevoegen of aanpassen in het design system, en zo meeschalen met de behoefte van je bezoekers.
  4. Samenwerken
    Of je nu naast je collega zit of aan de andere kant van de wereld, er is een ‘Single Source of Truth’ die voor iedereen toegankelijk en altijd up-to-date is.

Sommige bedrijven (AtlassianAudiIBM) hebben hun design system openbaar gemaakt. Supervet natuurlijk, en zo kunnen we echt even een kijkje in hun keuken nemen. En zie je gelijk hoe zij het inzetten. Dit zijn grote namen, maar het is ook voor kleinere bedrijven interessant om een design system in te zetten. Juist met beperkte middelen zijn de voordelen van hergebruik het grootst.

2. Functionele animaties

Waar een beeld meer zegt dan duizend woorden, zegt bewegend beeld nog veel meer! De kracht van animaties in webdesign is dat ze bezoekers helpen hun doelen te bereiken of ergens extra aandacht op leggen. Zo voegen ze echt waarde toe aan jouw website of app. Zeker als je een vleugje humor toevoegt, wordt het een supersterk middel.
Animatie in webdesign is een trend die stiekem al een paar jaar oud is, maar ieder jaar sterker wordt. En terecht! Met animaties kun je verschillende dingen bereiken. Ze zijn op hun sterkst als je ze functioneel en met mate inzet. Hoe? Verder lezen geeft je het antwoord.

  1. Aandacht
    Met subtiele animaties kun je de aandacht ergens op vestigen. Dit kan bijvoorbeeld een CTA (call to action) zijn, een notificatie van een bericht of een aanbieding die iedere bezoeker moet zien.
  2. Feedback
    Een animatie kan feedback aan de bezoeker geven wanneer een actie/handeling mislukt is. Denk aan een wiebelend invulveld van een formulier dat niet correct is ingevuld.
  3. Storytelling
    Met animaties kun je rijke verhalen vertellen op je website. We vonden de airpods van Apple een goed voorbeeld. Let wel op dat je pagina toegankelijk blijft voor alle gebruikers!
  4. Een betere algemene ervaring
    Apps uit de App- of Playstore voelen vaak snel en ‘snappy’ aan. Dat komt vaak doordat op de pagina veel dezelfde transitie-effecten gebruikt worden. Een pagina schuift bijvoorbeeld in van rechts naar links, zonder een gevoel te geven dat deze een laadtijd nodig heeft. Gelukkig komen er ook steeds meer mogelijkheden binnen de browser om zulke effecten toe te passen. De twee hieronder laten zien hoe je animatie kan gebruiken om de bezoeker te laten weten wat er gebeurt.

3. Mobiel menu onderaan

Deze trend is voornamelijk op mobile devices (in lekker Nederlands, je mobieltje) te zien. Vaak staat de knop van het menu (meestal in de vorm van een lekkere hamburger: ☰) links (of rechts) bovenaan het scherm. Eigenlijk vreemd omdat dit de minst bereikbare plek is van je duim, zeker omdat telefoons steeds groter worden (kan jij het scherm linksboven aanraken zonder je telefoon anders vast te pakken?). Steeds meer websites plaatsen deze knop daarom onderaan het scherm, volgens de ‘rule-of-thumb’. Deze plek beter bereikbaar op een mobile device en eigenlijk gewoon de meest logische plek voor functionaliteit die je vaak nodig hebt, zoals een navigatie-button of menu. In app-land is dit gedachtegoed helemaal niet nieuw. Kijk maar naar WhatsApp of Facebook, die hebben de balk met functionaliteiten altijd al onderaan het scherm staan.

Lekkere vers gebakken Engelse appeltaart

4. Dark mode

Nee, we hebben het hier niet over de dark side of The Force van Star Wars, maar over een simpele, superfijne feature. De grote spelers bieden steeds vaker een ‘dark mode’-functionaliteit aan in applicaties en websites. Hiermee pas je in één keer het hele kleurenschema van een app (of het hele besturingssysteem) aan. De donkere modus biedt een aantal voordelen ten opzichte van een (vaak) witte omgeving. Een donkere achtergrond is vaak prettiger voor je ogen, zeker als het donker is om je heen. Ook biedt een donkere achtergrond een beter contrast met verschillende kleuren tekst en ziet het er (indien goed uitgevoerd) fantastisch uit. Slack, Facebook Messenger en Twitter gingen je al voor. Android en iOS laten apps en websites automatisch omschakelen van light naar dark mode. Kortom: zwart is het nieuwe wit.

5. PWA

Pardon? Ja, PWA oftewel Progressive Web Apps. Een hippe term voor webpagina’s of applicaties die eigenlijk websites zijn, maar aanvoelen als een app uit de App- of Play Store. Met nieuwe mogelijkheden (zoals Angular, React en Vue) kan je een website op een andere manier te laten werken. En daar houden we van bij effectgroep*. Zo kan je een deel van een pagina laten veranderen, zonder de hele pagina opnieuw te laden (zie bijvoorbeeld Spotify en Starbucks). De navigatie blijft dus staan, terwijl de content verandert (met een mooie animatie). Dit geeft een gevoel van snelheid en biedt een betere gebruikerservaring. Toffe overgangen tussen pagina’s worden ook een fluitje van een cent – zijn we ook gek op. En niet onbelangrijk, ze zijn platform-onafhankelijk, dus je hebt geen aparte app voor Android en iOS nodig.

6. CX

Vroeger waren er webdesigners (lang, lang geleden). Voortschrijdend inzicht en de enorme mogelijkheden hebben er inmiddels voor gezorgd dat er twee functies zijn: visual designer en UX (User eXperience) designer. Maar hou je vast, daar komt een nieuw fenomeen bij: de CX (Customer eXperience) designer. Mooi al die termen, maar wie doet wat?

De UX-designer zorgt dat de interactie tussen de bezoeker van je website en de daadwerkelijke website (of app) zo makkelijk mogelijk verloopt. De UX’er zorgt er dus voor dat de knoppen op de juiste plek staan, mensen makkelijk kunnen vinden waar ze naar op zoek zijn en dat taken (zoals bijvoorbeeld betalen) zo efficiënt en eenvoudig mogelijk verlopen. En natuurlijk nog veel meer, maar we willen de leestijd onder de 7 minuten houden.

Wat doet dan een CX-designer? Deze zorgt ervoor dat de klanttevredenheid en -loyaliteit zo groot mogelijk wordt. Dit gebeurt niet alleen op de website of app zelf met bijvoorbeeld chatmogelijkheid, maar vertaalt zich door in alle contactmomenten met het merk of dienst. Denk aan advertenties en promotieacties, maar zeker ook aan aftersalesmomenten zoals retouren en klantenservice. Zo zie je dat het werk van een CX-designer niet stopt dus niet bij de online ervaring. Het beslaat de hele klantreis. Een goede CX-ervaring van de bezoeker kan de omzet van een bedrijf of dienst omhoog helpen, en daar hoef je echt niet de goedkoopste voor te zijn. Een voorbeeld is het uitpakken van een nieuwe iPhone, waarbij het doosje van de telefoon al een schoonheidsprijs verdient, en van tevoren is bedacht hoe lang het moet duren voor het bovenste deel los is van het onderste. Ook grappige tweets van bedrijven die viral gaan dragen bij aan de CX-ervaring.

Alle contactmomenten, hoe klein ook, vormen samen het beeld dat mensen van je bedrijf hebben. Hoe positiever dat beeld, hoe meer kans dat ze producten bij jou aanschaffen of je aanbevelen bij anderen.

Conclusie

Zo, nu ben je weer helemaal up-to-date. En terwijl wij dit blog schreven en jij dit las, gingen de ontwikkelingen in de online wereld keihard door. Wij blijven er bovenop zitten! Wil je op de hoogte blijven? Abonneer je dan vooral even op nieuwsbrief van effectgroep*. Altijd leuk! Heb je zelf een nieuwe trend gezien? Laat het ons weten via LinkedInInstagramFacebook of e-mail. Komen vertellen bij ons op kantoor mag natuurlijk ook.