6 Webtrends

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 (Atlassian, Audi, IBM) 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.

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.

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.

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.

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.

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 LinkedIn, Instagram, Facebook of e-mail. Komen vertellen bij ons op kantoor mag natuurlijk ook.