Kennis - Het online marketing blog van Tribal

Online marketing is een vak apart en een wereld die snel verandert. Wij laten ons dagelijks inspireren door de nieuwste ontwikkelingen, tips & tools en allerlei nuttige toepassingen. Hieronder lees je welke kennis wij in huis hebben.

Geplaatst door

05 december 2016

Frank Chimero – People ignore design that ignores people. Als je niet goed inspeelt op de behoeften van je gebruikers, zullen zij ook niet inspelen op die van jou.

Lees meer over mij >>

Hoe beïnvloedt design de website performance?

Door: Xeï Hulshoff

Geschatte leestijd: 2 minuten

Dit artikel verscheen eerder op Twinkle.nl

Studies tonen aan dat een groot deel van je bezoekers de website verlaten wanneer deze niet binnen 3 seconden geladen is. Daarnaast is het effect van laadtijd ook direct zichtbaar in de conversie. De laadtijd van je website, de performance, wordt echter niet enkel beïnvloed door “moeilijke” technische implementaties. Om de website performance te optimaliseren spelen keuzes in het design ook een belangrijke rol. In dit artikel zet CRO-consultant Xeï Hulshoff de belangrijkste elementen voor je op een rij.

Het aantal afbeeldingen

Beperk het aantal afbeeldingen dat een bezoeker moet downloaden tot het minimum. Iedere afbeelding die je gebruikt wordt namelijk 1 voor 1 opgehaald. Hierdoor moet de gebruiker voor iedere afbeelding even wachten. Als je heel vaak ‘even moet wachten’ wordt dat vanzelf ‘een hele tijd wachten’ en daar zit dan weer niemand op te wachten.

Drie tips om je afbeeldingen op orde te brengen:

  • Verwijder afbeeldingen die niet direct bijdragen aan het hoofddoel van de pagina
  • Vervang eenvoudige afbeeldingen, zoals driehoeken, door CSS
  • Combineer vergelijkbare afbeeldingen, bv. iconen voor betaalmethodes, in een sprite. Dan kun je d.m.v. styling bepalen waar het deel van de afbeelding getoond wordt.

Sprite voor website performance

 

Kwaliteit van de afbeeldingen

Natuurlijk wil je graag afbeeldingen die er altijd op en top uit zien, ongeacht of je nu op een grote monitor of op je iPhone de website bekijkt. Afbeeldingen van hoge kwaliteit hebben alleen 1 groot nadeel, het zijn namelijk grote bestanden. Voor websites is het niet nodig om de hoogste kwaliteit afbeeldingen aan te bieden. Je kunt de bestandsgrootte van de afbeeldingen beïnvloeden door ze te optimaliseren en te comprimeren, zonder al te veel aan kwaliteit te verliezen.

Vier tips om de kwaliteit op peil te houden:

  • Beperk de hoogte en breedte, een full-width afbeelding van 1280px is prima
  • Gebruik niet meer kleuren of transparantie dan nodig
  • Gebruik .jpg formaat voor foto’s en .png voor afbeeldingen met transparantie
  • Optimaliseer alle afbeeldingen m.b.v. Google’s PageSpeed Tools

Geoptimaliseerd voor website performance

 

Het gebruik van iconen

Iconen begeleiden de gebruiker tijdens de interactie met de website. Wanneer je hier aparte afbeeldingen voor gebruikt kom je al snel in de problemen met punt 1, het aantal afbeeldingen. Een goed alternatief is het gebruik van een icon font, zoals font awesome. Hiermee kun je niet alleen het aantal afbeeldingen verminderen, maar ben je ook veel flexibeler in de kleuren en groottes van je iconen. Als een standaard icon font niet de iconen biedt die passen binnen je design, kun je ook gebruik maken van icomoon waar je je eigen iconen in kan zetten.

 

Animaties gebruiken

Als je meer leven in je website wilt brengen, kun je er voor kiezen om animaties te gebruiken. Beperk het gebruik wel tot de momenten dat ze echt wat toevoegen voor de gebruiker, niet alleen omdat het er ‘hip’ uitziet. Wanneer je echt een animatie wil gebruiken, kies dan bij voorkeur om deze op te bouwen met CSS in plaats van Javascript. Je hebt dan minder grote bestanden nodig en het laden van de pagina wordt dan niet door Javascript geblokkeerd.

Dus wel: geanimeerd scrollen, wanneer de gebruiker klikt op een link waarvan de informatie op dezelfde pagina getoond wordt.

Dus niet: geanimeerde logo’s, dit leidt de aandacht van de gebruiker af van het doel van je website.

Animated scroll website performance

 

animated-logo website performance

 

Bovenstaande zijn basiszaken waarmee jij de gebruikerservaring op je website verbetert en bezoekers op zijn minst een reden minder geeft om je website te verlaten. Oftewel, een grotere kans op een tevreden klant en een conversie!

 

Lettertypen, kleuren en layout

Het design van een website wordt natuurlijk niet alleen beïnvloed door het gebruik van afbeeldingen, iconen en animaties. ook zaken zoals lettertypen, kleuren en layout hebben invloed. Hoe dit precies zit lees je binnenkort in de volgende blogs over deze designelementen. Houd het Tribal blog dus zeker in de gaten.

Meer weten over UX en website performance? Bezoek dan de workshop van Xeï Hulshoff op PMU 2017 en ga voor een optimale gebruikerservaring op jouw website.

 

Discussie- Geen reacties

Blijf op de hoogte van handige kennis en het laatste nieuws van je favoriete online marketing bureau:

INSCHRIJVEN VOOR ONZE NIEUWSBRIEF