Als je individuele elementen van een website bekijkt die ook bijdragen aan de positieve gebruikerservaring, dan is het logo merkidentiteit en verdient het een eigen overweging. In dit artikel wil ik je een paar tips uit onze bureaupraktijk geven over hoe je een hoge gebruikerservaring voor je websitegebruikers kunt garanderen bij het omgaan met je website-logo.

Het website-logo vervangt het menu-item van de startpagina

Het logo staat vaak in de navigatiebalk en moet ALTIJD aan de startpagina zijn gelinkt. Gebruikers verwachten vandaag de dag ook dat ze door te klikken op het logo terugkeren naar de startpagina. Het logo vervangt daarmee ook de menu-link "Home" die soms nog steeds zichtbaar is op websites om terug te linken naar de startpagina. Een home-link als een apart menu-item in de navigatie is overbodig. Dit bespaart ook waardevolle ruimte.

De stad Waren (Müritz) in Noord-Duitsland, waar ons bedrijf gevestigd is, heeft ervoor gekozen om de gebruiker met het huis-icoon een hulpmiddel te bieden als interactiemogelijkheid om terug te keren naar de startpagina. Om twee redenen zou het hier waarschijnlijk zijn toegepast: Enerzijds is naast het logo nog een ander logo geplaatst, waardoor de klikbereidheid op het logo kan afnemen. Anderzijds wordt mogelijk aangenomen dat de gebruikers van deze website minder vertrouwd zijn met het internet. Eerlijk gezegd verbetert dit huis-icoon de gebruikerservaring slechts in beperkte mate, omdat er op deze website veel opvallende gebreken zijn op het gebied van informatiearchitectuur, de gebruikersinterface en de toegankelijkheid (vooral contrasten om links en teksten te lezen). De website van de stad Waren (Müritz) blijft dus een negatief voorbeeld.

Responsief logo: Aanpassing van het logo volgens de schermresolutie

In desktopweergaven is er veel ruimte beschikbaar en daarom kan de bedrijfsnaam of slogan in het logo worden opgenomen, terwijl het logo in de mobiele weergave vanwege ruimte- en aandachtsredenen in een vereenvoudigde vorm moet worden geplaatst.

Bij logo's heeft, zoals bij websites, al jaren de trend van aanpassing aan grootte, medium en omgeving zich gevestigd. Men spreekt hierbij ook van responsief logo, wat betekent dat het logo rekening houdt met de omstandigheden van de omgeving en zich ook perfect presenteert op kleinere media, waardoor het mogelijk op enkele punten anders moet worden weergegeven. In tegenstelling tot starre logo's die er op alle apparaten en schermformaten hetzelfde uitzien, passen responsieve logo's zich aan de specifieke eisen aan en bieden zo een consistente en geoptimaliseerde gebruikerservaring over verschillende eindapparaten heen. Hierbij wordt het logo alleen in vorm verminderd, maar niet in merkboodschap.

Een positief voorbeeld wordt gegeven door het Zwitserse bedrijf Victorinox. De gebruiker krijgt het grote icoon als eerste te zien. Enige minpunt: Het logo is ingesloten als PNG-bestand in plaats van SVG.

Bij het scrollen wordt alleen nog het afbeeldingselement weergegeven. In de achtergrond is een berg te zien die de Zwitserse oorsprong benadrukt. In de eerste viewport is dus het vormen van het merk belangrijk. De gebruiker moet begrijpen. Je bent hier bij Victorinox precies op de juiste plaats. Als de gebruiker naar beneden scrolt, worden de inhoud belangrijk. Het logo vermindert de weergave en geeft de hoofdinhoud meer ruimte. De navigatie blijft bovenaan vastgezet, wat ook vanuit usability-oogpunt zeer zinvol is.

Een andere aanpak wordt gevolgd door de Guinness-website: Het logo is geplaatst met de bedrijfsnaam. Tijdens het scrollen wordt het logo iets kleiner met nog steeds zichtbare navigatie. Zodra een gebruiker begint met scrollen, wordt het logo en de navigatie weer groter, omdat wordt verwacht dat de gebruiker meer pagina's wil bezoeken.

De website van Commerzbank heeft het niet optimaal opgelost. Het logo is zichtbaar met de bedrijfsnaam en geplaatst als SVG, wat goed is opgelost. Het concurreert echter sterk met de navigatiepunten ernaast. Bij het scrollen verdwijnt de navigatie volledig en de gebruiker moet helemaal naar boven scrollen om de navigatie weer te zien. Het zou beter worden opgelost als de navigatie onmiddellijk zou verschijnen bij het begin van het omhoog scrollen, zoals bijvoorbeeld door zeit.de gedaan is.

Zeer goed opgelost vanuit het oogpunt van conversieoptimalisatie is bij Commerzbank de grote afbeelding met de blikrichting van de twee personen. Ze kijken in de richting van de knop, wat automatisch ook de blik van de bezoeker op de knop richt. Dergelijke blikrichtingen naar de call-to-action sturen zijn zeer effectief. Goed gedaan, Commerzbank!

Het wordt interessant als we naar de voorbeelden in de mobiele versie kijken.

In de mobiele versie wordt het logo van Victorinox nog kleiner weergegeven en wordt het logo gecentreerd om de interactiemogelijkheden voor de gebruiker beter te structureren. Guiness heeft de tekst rechts van het logo geplaatst in plaats van eronder. Op die manier heeft de harp meer ruimte en wordt de bovenste navigatiebalk niet te groot. Daarentegen wordt bij de Commerzbank de tekst eenvoudigweg verborgen op smartphone-resoluties.

De rol van responsive logo's in de gebruikerservaring is belangrijk omdat ze helpen bij het behouden van visuele consistentie en merkidentiteit, ongeacht hoe gebruikers toegang krijgen tot de website.

Als een logo niet reageert op veranderende resoluties, kan het logo te veel de aandacht van de gebruiker trekken. In het volgende voorbeeld van de Hypovereinsbank concurreert het zeer aanwezige logo te veel met de rechts geplaatste call-to-action, vooral in de smartphone-weergave. De navigatiepunten in het midden grijs worden licht over het hoofd gezien in de desktopweergave. Over het algemeen vertoont deze website ook enkele andere UX-fouten.

Ontwerpers moeten daarom om responsive logo's te waarborgen verschillende logo-aanpassingen aanbieden. Het logo moet ook goed werken op verschillende achtergronden en ook in verschillende formaten. Het logo wordt daarom, naarmate de resolutie kleiner is, verminderd in detailniveau. Het mag echter de merkkern niet verliezen. Dat is de kunst bij het gebruik van Responsive Logos. Dus als je een merklancering in gang zet, denk dan al aan deze vereiste bij het gebruik van je toekomstige logo.

Het bestandsformaat van het website-logo

Het gebruik van responsive logo's heeft zin omdat, afhankelijk van de resolutie, de juiste grootte wordt geladen. Bij lagere resoluties, zoals bijvoorbeeld bij een smartphone, wordt ook alleen de kleinere afbeelding geladen. Dit bespaart laadtijd. Het grootste effect op je laadtijd zul je echter bereiken als je:

1. het logo in de juiste resolutie invoegt (ook met vermelding van height en width). Vaak zijn logo's ingesteld in een te hoge resolutie en dan worden ze verkleind voor de weergave.
2. het logo in vectorformaat SVG invoegt in plaats van PNG of JPG.

Website-logo als favicon gebruiken

Gebruik ook de vereenvoudigde vorm van je logo om het als favicon te gebruiken. Laat daarbij ook tekst weg of andere kleine elementen die in de kleine resolutie van het favicon niet herkenbaar zijn.

Terwijl de website van Guinness uit het bovenstaande voorbeeld het logo responsief voor de website zeer goed gebruikt, is het als favicon niet optimaal. De kleine witte Guinness-tekst is niet herkenbaar en vermindert in het kader van het favicon de totale indruk. Het contrast is laag. De indruk zou duidelijker beter zijn zonder tekst en alleen gereduceerd tot de harp van het logo. Dat hebben de andere voorbeelden uit dit artikel allemaal beter opgelost dan Guinness.

Als je op zoek bent naar een bureau dat de focus legt op responsive logo's, neem dan graag contact met ons op. Wij van 4eck Media zijn professionals op het gebied van User Experience.

Als een professionele positionering belangrijk voor je is, zijn misschien ook de volgende iconpakketten en sjablonen voor corporate design interessant voor je: