Merkbeleving op kleine schermen: 5 tips voor een responsive identity

Responsive_identityl

Wat wil de mobiele bezoeker van onze website? Hoe zorgen we ervoor dat deze bezoeker zo snel mogelijk bij de juiste informatie komt? We gaan er vanuit dat de mobiele bezoeker haast heeft en dus geen tijd heeft voor informatie die niet direct relevant is. Bovendien is daar op het scherm ook geen ruimte voor. Mobiele websites moeten vooral duidelijk en straight to-the-point zijn. Maar is er op kleine schermen nog wel ruimte voor branding en identiteit?

Dat een sterke (online) identiteit een belangrijke rol speelt in je communicatie met je doelgroep, zal geen verrassing zijn. Een sterke identiteit is aansprekend voor je doelgroep en helpt je om jouw merk te onderscheiden van je concurrenten. Toch blijkt dat onderscheidende vermogen op mobiele websites maar weinig aanwezig te zijn.

De mobiele standaard

De beperkte ruimte op het scherm van een smartphone betekent dat er nagedacht moet worden over welke content het meest relevant is voor de gebruiker. Alle minder relevante informatie moet ver weg gestopt worden, of zelfs helemaal worden geschrapt. Het resultaat: veel mobiele en responsive websites krijgen vooral een functioneel karakter. Voor een eigen identiteit en uitstraling is nog maar weinig plek.

Responsive identity

Een dure Mercedes wordt op de smartphone op dezelfde manier gepresenteerd als een stofzuiger van Philips.

Het is opvallend dat het productoverzicht bij een luxe automerk vrijwel dezelfde mobiele gebruikerservaring biedt als het productoverzicht bij een producent van huishoudelijke apparatuur. Dit terwijl het voor de gebruiker twee totaal verschillende soorten belevingen zijn. Biedt het de gebruiker een functioneel overzicht van je producten? Ja! Maar inspireert en overtuigt het je doelgroep ook? Communiceert een dergelijk functioneel overzicht ook het gevoel wat je bij een luxe automerk zou verwachten?

Op het logo en de huisstijl kleur na, zijn er op het eerste gezicht maar weinig onderscheidende kenmerken aan de talloze nieuwswebsites, terwijl de verschillende ‘merken’ juist hele specifieke doelgroepen aanspreken.

Op het logo en de huisstijl kleur na, zijn er op het eerste gezicht maar weinig onderscheidende kenmerken aan de talloze nieuwswebsites, terwijl de verschillende ‘merken’ juist hele specifieke doelgroepen aanspreken.

Ook de meer content-heavy websites, als nationale en internationale nieuwswebsites, zijn op de smartphone vaak zeer functioneel ingericht. Uiteraard komen bezoekers naar deze websites om het laatste nieuws te lezen. Maar met zo’n sterke focus op content-first en maar beperkte ruimte voor branding en eigen identiteit, blijft er op visueel gebied maar weinig over waarmee de individuele nieuwsbronnen zich van elkaar kunnen onderscheiden. Het content-first principe kan hier zomaar doorslaan in content-only.

Op naar een ‘responsive identity’

De afgelopen maanden is er al veel geschreven over responsive design en content-first als nieuwe ontwerpprincipes voor het ontwerpen van mobiele schermen. Hoewel deze principes veel inzicht bieden in het ontwerpen van gebruiksvriendelijke interfaces en relevante content voor kleine (en grote) schermen, blijft de merkbeleving en ‘eigenheid’ vaak onderbelicht. Ten onrechte, want een positieve merkbeleving kan vaak net die doorslaggevende factor zijn tussen een middelmatige ‘mobile-presence’ en een succesvolle mobiele (of responsive) website. Met steeds meer organisaties die zich op de mobiele markt storten, zal dat onderscheidend vermogen van je merkidentiteit een steeds belangrijkere rol gaan spelen. Het wordt dus hoogste tijd om behalve over schaalbare content, ook na te denken over een schaalbare identiteit.

De grote vraag is echter: hoe bied je op een scherm ter grootte van een visitekaartje, behalve relevante content, ook nog een unieke merkbeleving? Hieronder volgen 5 tips die je kunnen helpen bij het ontwikkelen van een dynamische en schaalbare identiteit.

1. Kleinere schermen vragen om een uitgesproken stijl

Responsive_identity

Bij het ontwerpen voor mobiel is er vaak een neiging om het design zo ‘clean’ en overzichtelijk mogelijk te houden. Een rustige uitstraling is namelijk beter schaalbaar en zorgt ervoor dat de content ook op kleine schermen goed leesbaar is. Maar hoe mooi een ‘clean’ en minimalistisch ontwerp ook kan zijn, het is moeilijk te vertalen naar een mobiel scherm met behoud van karakter en eigenheid. Juist op kleine schermen, waar je minder ruimte hebt om je boodschap aan je doelgroep over te brengen, kan een uitgesproken visuele stijl voor een veel sterkere merkbeleving zorgen.

De mobiele website van frisdrankmerk dr.Pepper kenmerkt zich niet door minimalistisch of ‘clean’ design, maar heeft zeker voor kleine schermen een uitgesproken stijl!

2. Effectief gebruik van logo’s en iconen

Responsive_identity

Je bedrijfslogo is vaak één van de meest belangrijke elementen van je identiteit, het is je visitekaartje. Op (mobiele) websites is het logo dan ook vaak te zien aan de bovenkant van elke pagina. Hoewel dat voor desktop-beeldschermen prima werkt, betekent dit voor mobiele schermen dat het logo na een klein stukje scrollen al snel buiten het beeld valt. Merken die hun identiteit vooral halen uit het logo, lopen op het mobiele web een risico hun merkbeleving snel te verliezen. Voor een schaalbare identiteit is het noodzakelijk om op een andere manier met logo’s om te gaan. Een oplossing kan zijn om, naast je bedrijfslogo, gebruik te maken van herkenbare iconen of zelfs je logo in meerdere vormen te ontwerpen en deze op subtiele wijze te herhalen.

Door het herhalen van een verkleinde versie van het logo (een paraaf) bij specifieke navigatie elementen krijgt de mobiele verkiezingswebsite van Obama een eigen stijl.

3. Herkenbare typografie

Responsive_identity

Het internet bestaat voor 95% uit tekst. Een goede, herkenbare typografische stijl is dus van groot belang voor je identiteit, met name voor content-heavy websites. Tot een paar jaar geleden moest je het online vaak stellen met standaard systeemlettertypen als Arial en Verdana. Maar met de recente ontwikkeling van HTML5 zijn er veel meer mogelijkheden. Met zogenaamde webfonts kun je vrijwel elk denkbaar lettertype online gebruiken. Het grote voordeel van een herkenbare typografische stijl is dat het perfect samengaat met het content-first principe, zonder in te boeten op herkenbaarheid en identiteit.

Door een sterke typografische stijl te hanteren, is de identiteit van deze politieke partij ook zonder logo in beeld direct herkenbaar.

4. Kleur bekennen

Responsive_identity

Een bekend merk wordt in eerste instantie vooral herkend aan logo en kleurgebruik. Deze elementen springen als eerst in het oog. Denk bijvoorbeeld aan het rood van Coca-Cola, het oranje van ING, of het geel-rood van Shell. Toch kiezen veel merken ervoor om beperkt gebruik te maken van kleur. Als er al kleur gebruikt wordt dan is dat hooguit om een link of knop duidelijk zichtbaar te maken. Kleurgebruik in de vorm van branding of merkbeleving wordt over het algemeen weinig toegepast. Zonde, want het gebruik van kleur zorgt ervoor dat verschillende typen content makkelijker van elkaar te onderscheiden zijn. Bovendien kunnen kleuren zeer effectief zijn als het gaat om focus aanbrengen op de juiste plekken op je mobiele website.

De mobiele website van het Belgische muziekfestival Rock Werchter gebruikt een heel palet aan bijpassende kleuren, wat ervoor zorgt dat de website een eigen karakter krijgt. Bovendien zorgt de afwisseling in kleuren voor duidelijke onderverdeling in content.

5. Fotografie en visuele content op mobiel

Responsive_identity

Fotografie en andere visuele content zijn krachtige middelen om een webpagina aantrekkelijk te maken voor de bezoeker. De meeste merken hebben dan ook een eigen stijl voor het online gebruik van beeld. Toch is het omgaan met fotografie één van de grootste uitdagingen voor het ontwerpen van mobiele schermen. Een mooie, aansprekende foto toon je het liefst op een groot formaat. Het scherm van je smartphone raakt dan wel heel snel gevuld. Veel mobiele sites maken om deze reden beperkt gebruik van fotografie, om ruimte te behouden voor de ‘echte’ content. Het risico is echter dat mobiele webpagina’s zo snel saai worden. Voor een aansprekende mobiele identiteit is het belangrijk dat visuele content en tekst goed op elkaar afgestemd zijn. Mobiele content zal steeds meer ‘ge-designed’ moeten worden, in plaats van alleen schrijven van een tekst en zoeken van een bijpassende foto. Iets wat offline al gebeurt in de vorm van posters, brochures en reclamefolders.

De productpagina van Snickers doet geen concessies op het gebied van fotografie. Beeld en tekst zijn naadloos op elkaar afgestemd. Het resultaat is een stijlvolle webpagina waar je (letterlijk) je vingers bij aflikt.

Tot slot: identiteit en merkbeleving is meer dan een huisstijl

Als het gaat over identiteit en merkbeleving is het verleidelijk om meteen naar een huisstijlgids te grijpen. Hoewel een goede, consistente huisstijl een belangrijke bijdrage levert aan de herkenbaarheid van je merk, kan het ook een valkuil zijn wanneer je die toepast op een mobiele website. Juist omdat er weinig ruimte is voor branding, blijft het bij het toepassen van het logo en de huisstijlkleur. In plaats van consistentie na te streven, is het ook mogelijk om nieuwe elementen te ontwerpen die misschien niet in de bestaande huisstijl passen, maar wel goed bij je identiteit passen.

Eerder schreef mijn collega Martijn Hinfelaar al over het belang van een dynamisch systeem van design-elementen in een responsive tijdperk. Een goed startpunt voor het ontwikkelen van een schaalbare identiteit zijn de zogenaamde styletiles: schaalbare design elementen die op elk denkbaar formaat de identiteit en merkbeleving ondersteunen. Met steeds meer verschillende formaten van schermen en devices is het niet ondenkbaar dat merken in de toekomst steeds meer behoefte zullen krijgen aan dergelijke dynamische uitstraling.

Uitgelicht: Frankwatching iPhone app meer dan 3.000 keer gedownload

Frankwatching app

Onze iPhone app blijkt een succes: in totaal hebben 3.458 lezers de app gedownload. En wist je dat alle artikelen zijn voorzien van een speciaal ontwikkelde populariteitsscore? Handig als je onderweg meteen wil zien welke artikelen je niet mag missen. Te verkrijgen in de App Store, download hem

Meer weten?

Interessant?

Lees dan ook onze andere artikelen over , , , , , , , , , , , , , , , .

Reacties

  1. Hoi Sander, goed artikel. het zet alles mooi op een rijtje. Responsive of mobiele site is rete belangrijk, zeker als het om merk en identitiet gaat. Responsive is trouwens niet hetzelfde als schaalbaarheid. Een losse mobiele site naast een desktop-versie is ook responsive, zolang de gebruiker maar wordt doorverwezen. Je ranking bij Google wordt trouwens ook aangetast door lange laadtijden op 3G en een hoog bounce percentage als gevolg van slechte gebruiksvriendelijkheid en een negatieve beleving. Geen responsive site hebben is hetzelfde een olifant in een mini proberen te proppen.

    Misschien als aanvulling:

    Foolproof heeft een mooie infographic gemaakt over merkentrouw, mobiel en consument: http://www.qtag.nl/nieuws/item/59/Klanten+laten+een+merk+vallen+na+een+slechte+mobiele+ervaring

    Good stuff!

    1. Hoi Christiaan,

      Dank voor je aanvulling. De infographic laat inderdaad zien dat het de hoogste tijd is om verder te denken dan alleen maar een ‘mobile-presence’. Verschillende onderzoeken laten ook zien dat bijv. orientatie op producten ook steeds meer op de smartphone plaats vindt. Het minste wat je (naar mijn mening) als online organisate zou moeten doen is een postieve en herkenbare indruk achterlaten. Al is het alleen maar zodat je als gebruiker het betreffende merk later nog kunt terugvinden.

      Kortom : Identiteit, beleving en eigenheid!

  2. Goed verhaal! Je hebt helemaal gelijk dat beleving en identiteit een prominentere rol verdient in ‘mobile’ design. Naar mijn idee ligt bij responsive design nog vaak te veel de nadruk op het ‘technische’ aspect: hoe geef ik mijn desktop site zo overeenkomstig mogelijk weer op tablet en mobiel. Terwijl het zou moeten gaan om: hoe zorg ik er voor dat de mobiele website zo goed mogelijk aansluit op de situatie van de gebruiker en hoe geef ik een zo goed mogelijke gebruikerservaring… Adaptive design dus, een wat breder begrip dan responsive design, waarbij het niet alleen gaat om het ‘vloeiend’ maken van een layout. En onderdeel van die optimale gebruikerservaring is het creëren van een unieke visuele (en interactieve) stijl.

  3. En denk ook eens aan slimme copy! Copy die in beweging brengt, juist op de vierkante cm. Goed om te weten dat binnenkort AdWords Copywriters (http://www.adwordscopywriters.nl/) gaan launchen. Want met alleen functioneel denken ga je de online advertising oorlog niet winnen.

  4. Goed stuk! Ook veel standaard responsive of mobile themes van WordPress en Magento toveren je site om in nog meer eenheidsworst dan de deskoptsite vaak al is. Beter om deze dan zelf de customizen of gewoon zelf te maken.
    Een kleine inhoudelijke opmerking: op mobiele sites kan je ook een header met logo vast zetten. Uiteraard moet dit niet teveel ruimte innemen, maar een smalle balk bovenin kan wel goed helpen bij behoud van identiteit (zie bijvoorbeeld ahold.com)
    Verder vind ik een aantal van je voorbeelden wat minder sterk. Zo vraag ik me af of de Mercedes-site wel recent is, want m.mercedes-benz.nl/models ziet er een stuk beter uit.
    Voor Rock Werchter werkt het idd wel met veel kleuren maar de meeste merken hebben uiteraard maar enkele kleuren in hun huisstijl. Een subtielere variant als Mailchimp is ook een optie.
    De uitwerking van Snickers is ook niet al te best. De foto is mooi, maar verdringt de overige content en sommige tekst is ook amper leesbaar en links zijn ook te klein voor touch. Een beter voorbeeld is mobile.klm.com (alleen home).

    1. Hoi Lorentz,

      Dank voor je reactie en aanvullingen. Ben het met je eens dat het altijd nog beter is om iets zelf te (laten) maken, dan te kiezen voor een bootstrap of wordpress-achtige standaard oplossing. Persoonlijk zie ik liever een grotere variatie en uitgesprokenheid in mobiele websites, dan de uiterst functionele ‘eenheidsworst’ die je nu vaak tegenkomt. Dat was dan ook de intentie met de voorbeelden. De mobiele site van Snickers is zeker wat op aan te merken wat betreft de grootte van tekst en buttons, maar het laat wel een hele andere benadering van een mobiele website zien:

      Absoluut niet functioneel en ontworpen volgens de mobiele standaarden, maar je krijgt er wel honger van!

      Iets waar veel organsaties, onder andere Mercedes (het betreft de amerikaanse site btw) mijn inziens wat meer mee zouden mogen doen!

  5. @Lorenz: Helemaal mee eens. Veel standaard oplossingen halen het bij lange na niet ten opzichte van professioneel maatwerk. Goede kennis van de mogelijkheden van design, HTML5 en CSS3 zijn cruciaal.

    Bedenk wel dat grotere bedrijven zaken liever custom laten maken en niet kiezen voor wat het gros van webbouwers aanbiedt, mede om de rede van beschikbare investeringen. Het ontbreekt bij organisaties -helaas- al te vaak aan financiën en / of een referentiekader om te kunnen oordelen wat wel en wat niet goed is. Zelf maken is echter nog dramatischer. Kennis is goed, maar een beetje kennis krijgt al snel een hobby-karakter. Het is dus moeilijk te oordelen op basis van welke feiten een organisatie kiest voor een oplossing.

    ps. Het vastzetten van de header werkt trouwens alleen op nieuwe android versies en wordt dus slechts deels ondersteund. Uitgebreid testen op fysieke devices (dus niet op emulatoren) werkt veel beter. Maar dat is techniek en niet echt de strekking van dit artikel. Mooi voorbeeld van mercedes, dat wel.

Plaats een reactie

Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn met een * aangegeven.

Verschijnt je reactie niet, dan is deze mogelijk in de spam terechtgekomen. Mail ons dan even!