Visueel ontwerp

Kleur

Er is gebruik gemaakt van twee goed opvallende primaire kleuren (groen en blauw) die goed opvallen op de verder lichte, rustige pagina's. Groen voor de primaire acties en blauw voor de navigatie en secundaire acties. Minder belangrijke acties worden met neutrale kleuren aangegeven, zoals het secundaire menu en de footer. Dit helpt bezoekers om snel te vinden wat ze zoeken.

De kleuren van de knoppen (en hun interactieve states) op  gekleurde achtergronden gaan niet altijd goed. Zo wordt er soms een groene button op een blauwe achtergrond geplaatst, of is de ingedrukte press state dezelfde kleur als de achtergrond. Dit geeft mij als gebruiker het gevoel dat er iets mis gaat, omdat de knop weinig contrast heeft met de achtergrond.

Primaire groene kleur heeft niet genoeg contrast

Zie hoofdstuk "Toegankelijkheid"

Alle kopteksten (headings) zijn in de primaire blauwe kleur. Op zich is dit prima, maar als deze iets donkerder zouden zijn, wordt de pagina minder flets. In het voorbeeld is te zien dat de pagina wat meer contrast krijgt als de titels donkerder blauw zijn.

Typografie

Er is gekozen voor een modern en vriendelijk lettertype (Karla) die prettig wegleest en goed werkt in verschillende tekstgroottes en gewichten.

Regelafstanden

Op mobiel zijn de regelafstanden wat groot. Bij de USP-lijst met vinkjes zie je dat de afstand tussen 2 regels bijna net zo groot is als de afstand tussen 2 USP's. Bij het veelgestelde vragen blok is de regelafstand ook groot, maar hier is de afstand tussen de vragen een stuk groter.

Pay-off in logo

De tekst van de pay-off "running your energy like a business" in het logo is vrij klein en onleesbaar. Overweeg om deze wat groter te plaatsen of deze alleen in de footer op te nemen als tekstelement.
Ook viel op dat het logo een title-element heeft met de tekst "Zonnestroom Nederland".

Beeld

Home: complexe illustratie

Het beeld in de hero is een complexe, statische illustratie waar veel in gebeurd, maar ook wat cognitieve lading geeft. Overweeg om hier een interactief element van te maken, wat door beweging of aanraking aanvullende informatie geeft. Zo kan een bezoeker meer uitgenodigd worden om de mogelijkheden te verkennen. Een ander idee is om deze informatie te verwerken in een video of animatie.

Suggestie

Verwerk complexere informatie in een video of een (interactieve) animatie. Mensen vinden het vaak prettig om de informatie zo in 'hapklare brokken' voorgeschoteld te krijgen...

Landingspagina's: achtergrondafbeeldingen

Op de landingspagina's wordt de achtergrondfoto in de hero vervaagd. Dit effect ziet er wat gedateerd uit. Op andere plekken worden afbeeldingen met een schuine rand, hard afgesneden. Overweeg om dit effect terug te laten komen in de hero's, zodat er een modernere, consistente uitstraling is wanneer bezoekers binnenkomen.

Suggestie

Werk met korte video's in de achtergrond om net wat meer te laten zien dan een statische afbeelding. Bijvoorbeeld een video loop van windmolens in actie, of een wolkenlucht die tijdens het scrollen over de grote batterijen trekt.

Ontbrekende afbeelding

Op de pagina "Energie opslag" werd een ontbrekende afbeelding gesignaleerd, naast de button "Download e-book".

Visuele hiërarchie

Op de meeste pagina's is er een goede balans tussen tekst, afbeeldingen en call to actions. Alles is duidelijk onderverdeeld in logische secties, waardoor de bezoeker snel kan filteren op wat belangrijk is. Op deze plaatsen kan de layout nog wat verbeterd worden.

Hero's

In de hero componenten, met name op de homepage, wordt een hoop gecommuniceerd. Er is een titel, inleiding, USP-lijst, button, tekstlink en dan nog een afbeelding met veel kleine tekst erin. Op andere pagina's wordt hier een kleine afbeelding van een e-book of windmolens naast geplaatst. Dit komt alles bij elkaar wat rommelig over.

Probeer de bezoeker aan de hand te nemen door weg te laten wat niet relevant is en nadruk te leggen op wat belangrijk is. Overweeg ook om meer ruimte te creëren tussen de verschillende elementen.

Hero op homepage

Voorbeeld met minder tekst

Subsidies voor een zakelijk laadplein

Op de landingspagina "Subsidies voor een zakelijk laadplein" is de layout overweldigend. Onderstaande afbeelding illustreert hoe een bezoeker de pagina kan scannen. Dit is alleen maar een theorie, maar het is belangrijk dat we erover nadenken hoe bezoekers de pagina bekijken.

Tips om de visuele hiërarchie (hier maar ook op andere pagina's) te optimaliseren:

Houd rekening met de F-vorm die bezoekers volgen bij het scannen van tekst.

Bezoekers kijken vaak eerst naar tekst en later pas naar beeld, want ze komen voor informatie.

Tekst in meerdere kolommen zijn moeilijker te verwerken voor de ogen.

Korte alinea's werken beter dan lange.

Maak gebruik van voldoende witruimte.

Beperk het aantal fonts en kleuren.

F-vorm

Gebruikers scannen een webpagina vaak in een F-vormig patroon: ze beginnen bovenaan en lezen horizontaal, daarna bewegen ze iets naar beneden en lezen weer horizontaal, maar korter, en vervolgens scannen ze de linkerkant verticaal. Dit betekent dat de bovenste en linkerkant van de pagina de meeste aandacht krijgen, waardoor hier de belangrijkste informatie en call-to-actions geplaatst moeten worden.