Slimme ux tips om jouw website visueel te verbeteren
Door slim gebruik te maken van visuele elementen op je website kun je de gebruiksvriendelijkheid en interactie verhogen. Maar hoe pak je dit aan? In dit artikel geven wij jou tips om bewuste keuzes te maken met betrekking tot visuele elementen. Uiteindelijk heeft ook de website van jouw organisatie het doel om gebruikers naar de juiste pagina of informatie te leiden.
Maak gebruik van pictogrammen
De kracht van pictogrammen (ook wel iconen genoemd) is groot. Je kan met één pictogram snel duidelijk maken waar het over gaat. Voor visueel beperkte gebruikers is het goed om zowel woorden als pictogrammen te gebruiken. Door zowel tekst als een pictogram te gebruiken is je content geschikt voor bredere doelgroep.
Pictogrammen maken gebruik van de kracht van herhaling. In het dagelijks leven komen wij overal pictogrammen tegen. Daardoor wordt het vanzelfsprekend om pictogrammen te herkennen. Een goed voorbeeld is de uitgang op vliegvelden. Maar ook op websites kom jij dagelijks pictogrammen herhalend tegen. Bij een vergrootglas-pictogram weten gebruikers al snel dat het gaat om een zoekfunctie op de website.
AFBEELDING PICTOGRAM
Visuele elementen overlappen
Door visuele elementen te overlappen ontstaan er duidelijk herkenbare groepen. Je speelt als organisatie in op online gedragspatronen. Deze patronen komen op veel websites voor, waardoor het als vanzelfsprekend wordt gevonden voor gebruikers. Op deze manier hoeven gebruikers er amper tot niet over na te denken. Zowel bewust als onbewust maak je gebruik van het ‘proximity principe’. Dit principe zorgt ervoor dat als je gerelateerde items bij elkaar plaats, gebruikers ze aan elkaar koppelen.
Overlappende afbeeldingen voegen focus en diepte toe aan de website. Daarnaast is het een goede manier om ruimtegebruik te optimaliseren. Door een afbeelding direct bij een quote te plaatsen begrijpen gebruikers dat de quote afkomstig is van de persoon op de foto.
AFBEELDING OVERLAPPEN
Typografie
Naast visuele elementen speelt typografie een belangrijke rol in de leesbaarheid van de content op je website. Maak de tekst op je website niet alleen groter om een onderdeel te markeren of te benadrukken. Maar gebruik je font (lettertype) op diverse manieren om tekst visueel aantrekkelijk te maken. Varieer met font-size, font-weight en kleurgebruik. Font-weight kenmerkt de ‘dikte’ van het lettertype. Het is verstandig om een lettertype te kiezen die zowel bold, medium, regular als light ‘diktes’ aanbiedt.
Zorg voor een consistent gebruik van variaties tussen dikgedrukt, onderstreept, cursief en kleuren. Op deze manier voorkom je verwarring voor de gebruiker. Een goed voorbeeld is een quote. Zorg ervoor dat de quote visueel anders is dan ‘lopende/normale’ tekst. Hierdoor valt het voor de lezer op dat dit iets anders is dat extra aandacht verdiend.
AFBEELDING TYPOGRAFIE
Achtergrond op je website
Het is van belang om tijdens de ontwerpfase goed in de gaten te houden hoe de leesbaarheid van tekst is. De achtergrond, gebruikte kleuren en het gekozen lettertype hebben daar invloed op. Door te experimenteren en te testen met diverse kleuren en achtergronden kan er visueel onderscheid gemaakt worden tussen bepaalde lagen van elementen op de webpagina.
AFBEELDING ACHTERGROND
Webtoegankelijk kleurgebruik op je website
Het is belangrijk dat je website digitaal toegankelijk is voor iedereen. Yard houdt rekening met de regels die gelden voor webtoegankelijkheid. Op deze manier kunnen ook visueel beperkte gebruikers gebruiksvriendelijk door de website heen navigeren. Maak je website ook kleurenblind proof. Dit kan heel simpel door naast een kleurenversie ook een grijswaardenversie aan te bieden. Wil je meer weten welke opties Yard aanbiedt om je site toegankelijk te maken? Lees hier hoe Yard jouw organisatie kan helpen!
Door ook een grijswaardenversie aan te bieden zorg je ervoor dat alle gebruikers belangrijke informatie kunnen lezen. Naast grijswaarden is het ook mogelijk om je website aan te bieden met een verhoogd contrast. Je hebt dus meerdere opties om het kleurgebruik webtoegankelijk toe te passen: grijswaarden en verhoogd contrast. Bij Yard houden wij tijdens het ontwerpen al rekening met kleurcontrasten. Wij zorgen ervoor dat gebruikte contrasten altijd webtoegankelijk zijn, volledig volgens de regels vanuit de overheid.
Wil jij meer weten over onze aanpak op het gebied van digitaal toegankelijk? Lees dan onze blog hier
2 AFBEELDINGEN KLEUR
Breng de gebruiker op de hoogte
Gebruikers willen weten waar ze aan toe zijn. Weet je nog wanneer je een product online gekocht hebt? Juist bij webshops willen gebruikers weten waar ze aan toe zijn en in welke fase ze zitten. Bestellen? Gegevens invoeren? Betalen? Wanneer vul ik mijn kortingscode in? Door voortgangsbalken te gebruiken speel je als organisatie in op mogelijke vragen en onduidelijkheden van gebruikers. Je geeft ze houvast en creëert heldere verwachtingen.
Daarbij stelt het Zeigarnik-effect dat onafgemaakte taken beter onthouden worden dan voltooide taken. Voortgangsbalken zet je daarom het beste in voor complexe taken om visueel aan te geven wanneer een taak onvolledig is. Zo vergroot je de kans dat gebruikers de taak zullen volbrengen.
AFBEELDING BALKEN
Blijven doorontwikkelen
Ook na livegang van een website is het verbeteren van je website belangrijk. Het verbeteren van bijvoorbeeld de content strategie, gebruikersvriendelijker maken van knoppen en het aanpassen van visuele elementen, zijn hier voorbeelden van. Yard vindt doorontwikkeling ontzettend belangrijk. Daarom voeren wij regelmatig gebruikersonderzoek (UX research & usability testen) uit om websites naar een hoger niveau te brengen. Het doel is altijd om de gebruiksvriendelijkheid te verbeteren. Dit kan zowel voor de gebruikers zijn als voor de webredactie.
Heb jij inzicht in de gebruiksvriendelijkheid van jouw website? Wij kunnen jouw organisatie helpen en verbeteren! Lees onze UX aanpak hier of neem contact met ons op.
