Elk jaar zijn er weer nieuwe webdesign trends. Niet onlogisch. De ontwikkelingen gaan razendsnel. In deze blog wil ik een 6-tal trends aankaarten die de afgelopen jaren zijn langsgekomen. Ontwikkelingen die in mijn ogen niet direct een positieve invloed hebben op de gebruikerservaring van websites.
Aangepaste scrollsnelheid
Eén van mijn grootste ergernissen op het web, websites met een aangepaste scrollsnelheid. Met javascript is het mogelijk om de standaardbrowser scrollsnelheid aan te passen. Dit resulteert in een belabberde gebruikerservaring. De website scrollt namelijk niet zoals je verwacht.
Het valt me op dat vooral veel gratis en premium WordPress thema’s gebruik maken van deze techniek. Het is me overigens een raadsel waarom dit gebruikt wordt. Om de website fancier te maken? Mocht je een standaardthema willen gebruiken, let er dan op dat deze techniek niet gebruikt wordt.
Visual composer
Ik snap waarom Visual Composer veel gebruikt wordt. Het geeft gebruikers de mogelijkheid om de website geheel naar eigen wens aan te passen. Dat is ook direct de valkuil van Visual Composer. Allereerst kost het vrij veel tijd om deze tool onder de knie te krijgen. Omdat er veel mogelijk is, is de learning curve ook vrij hoog.
Heb je het eenmaal onder de knie, betekent dat nog niet dat je ook een goede website kunt bouwen. Een goede website is namelijk meer dan alleen maar het toevoegen van blokken en secties. Hoewel er in iedereen wel een kleine Picasso verborgen zit, adviseer ik toch om dit onderdeel aan een professional over te laten.
Ook verdient Visual Composer niet de hoofdprijs betreffende paginasnelheid en bestandsgrootte. Door het eenvoudige drag en drop systeem is je website binnen no-time een onbeheersbaar en log systeem geworden.
Parallax effect
Ik ben niet direct negatief over het gebruik van een parallax effect. We gebruiken het zelf ook mondjesmaat in onze designs. Ik ben minder enthousiast als het overmatig gebruikt wordt. Ik ben van mening dat het alleen gebruikt moet worden als het geen afbreuk doet op het design en gebruikerservaring.
Daarnaast moet er goed gelet worden op de technische implementatie. Oude technieken maken de website namelijk traag. Maak bijvoorbeeld gebruik van 3D transforms om optimaal te profiteren van de processorkracht.
CSS animaties
Front-end developers leven in een mooie tijd. SVG, Canvas, Flexbox en SASS, zomaar een paar technieken die volop in ontwikkeling zijn. We kunnen steeds meer. Dit kan echter ook een valkuil zijn. Websites worden uitgerust met allerlei technieken, die afbreuk doen op de gebruikerservaring.
Eén van deze technieken, is het overmatig gebruik van animaties. Websites met allerlei inschuifende elementen. Gebruik deze animaties alleen als het een toegevoegde waarde heeft. Niet omdat het er alleen maar fancy en leuk uit ziet.
Stickyheaders
Stickyheaders zijn populairder dan ooit. Een stickyheader heeft als voordeel dat je altijd toegang tot de navigatieonderdelen hebt. Je kunt daardoor snel door de website navigeren. Bij de meeste websites heeft deze integratie echter geen enkele toegevoegde waarde.
Het heeft vaak zelfs een negatieve invloed op de gebruikerservaring. Met name op kleine schermen kan dit een probleem zijn. Een stickyheader neemt namelijk altijd ruimte in beslag. Bij sommige stickyheaders neemt het zelfs meer dan 25% van het scherm in beslag. Het stickymenu zit dan alleen maar in de weg en leidt af van de content. Gebruik daarom alleen een stickymenu als er goed over nagedacht is en implementeer dit niet omdat iedereen het doet.
Preloaders
Preloading is een krachtige techniek om je website sneller te maken. Bij preloading worden afbeeldingen of scripts alvast ingeladen die nog niet gebruikt worden. Bij het bezoeken van een volgende pagina zijn deze al gedownload en wordt die pagina sneller geladen. Mooi! Wat echter minder mooi is, zijn de nutteloze preloading indicatoren.
Ik heb het over de preloading effecten die bij het bezoeken van elke pagina getoond worden. Veel standaard WordPress thema’s zijn hiermee uitgerust. Hierbij moet je eerst 1 of 2 seconden wachten voordat de pagina getoond wordt. Vaak worden deze preloader effecten alleen maar getoond omdat het er leuk uit ziet. Functioneel hebben ze geen enkele toegevoegd waarde. Gebruik deze preloaders daarom alleen als ze een functionele waarde hebben.
2 reacties
Ik ben wel benieuwd naar wat je dan een goed alterternatief vindt voor Visual Composer. Los van de dat het idd een zware plugin is, werkt het natuurlijk top!
Persoonlijk ben ik sowieso niet zo’n voorstander van drag en drop builders. Het geeft een klant teveel vrijheid. Ik zou gaan voor een oplossing waarbij je gebruik maakt van vooraf gedefinieerde meta velden. Je zou hier bijvoorbeeld prima ACF voor kunnen gebruiken. Qua duurzaamheid biedt dat veel voordelen omdat je 100% invloed op de code hebt.