Guideline document Beeldgebruik bij homepage/ startscherm digitale diensten van Rabobank Document voor Rabobank Nederland Bas van Agten, Jonathan Marchal Thijs Blaas
Intro Dit guideline-document is geschreven voor Rabobank Nederland. Rabobank wil weten wat het effect is op de gebruikservaring van visuele elementen op de homepage en binnen mobiele applicaties van Rabobank.nl. In dit document omschrijven wij de richtlijnen die voortkomen uit onze bevindingen van ons onderzoek. Deze hebben we beargumenteerd, uitgewerkt en gevisualiseerd tot uiteindelijke oplossingen.deze richtlijnen hebben we onderverdeel in Visuele elementen en iconen. De guidelines voor de visuele elementen van de Rabobank hebben we onderverdeeld in een aantal punten namelijk: Simplicity, Colors, Motion, Mobile & Gesture en SEO. Deze categorieën hebben we als handleiding gebruikt aan de hand van deskresearch, veldonderzoek en The new design guidelines. De guidelines voor de iconen van de Rabobank hebben we onderverdeeld in drie punten. Achtergrond, waarin we de kleur van de achtergrond van de iconen behandelen. Kleurgebruik, waarin we de kleur zelf van de iconen behandelen en vorm, waarin we de beeltenis van de iconen behandelen.
1
Visuele elementen Banner & Ankeilers Guidelines De guidelines voor de beeldelementen van de Rabobank hebben we onderverdeeld in een aantal punten namelijk: Simplicity, Colors, Motion, Mobile & Gesture. Deze categorieën hebben we als handleiding gebruikt aan de hand van deskresearch, veldonderzoek en The new design guidelines. (bron: http://thenewdesignguidelines.derekevanharms.com/) Simplicity Een sterk design is gemaakt uit pure elementen. Je kunt je beeldelementen sprekend laten zijn door versimpelde figuren te gebruiken. Gevaar daarbij is dat dat ten kostte gaat van je professionele uitstraling, maak daarom gebruik van mooie sprekende beelden en verleg je simplicity naar de tekst die je gebruikt en geef deze ook een opvallende rol binnen je beeldelementen. Een tekst moet kort en krachtig zijn en direct duidelijk vertellen waarheen je wilt verwijzen, hoe korter hoe beter. Zoals nu getoond in de slideshow kun je onder je hoofdtekst een meer verduidelijkte tekst geven, die meer uitleg geeft over de pagina geeft waar je heen gaat. De titel verteld in 1 opslag waar je heen gaat. Colors Kleuren kunnen een banner prachtig maken, maar alleen wanneer je ze goed toepast. Hetgeen waarbij je je moet laten leiden is de kleuren van de website. Kleuren die je op je website gebruikt moet je gebruiken als handleiding voor het kiezen van de kleuren die je gebruikt bij je foto. Maak gebruik van contrasterende kleuren om je banner meer op te laten vallen. Maar alleen wanneer ze binnen je kleurenpalet vallen. Motion Een animatie binnen beeldelementen heeft duidelijk zijn kracht bewezen. Hierbij is tevens het gevaar dat je je professionele en formele uitstraling verliest wanneer je teveel gebruik maakt van deze techniek. De slider geeft een subtiele vorm van animatie en geeft de gebruiker de website ook een meer dynamisch gevoel. Mobile & Gesture Gebruik banners en ankeilers absoluut ook op je mobiele applicaties en mobiele websites. Mobiele beeldelementen werken krachtiger op een mobiel product. Maak daarin gebruik van de mogelijkheden die een mobiel apparaat biedt zoals de opbouw van een mobiele website en de positie van een beeldelement. SEO Search engine optimization. Het is verstandig om online visuele elementen te koppelen aan google. Maar liefst 31% van de niet klikkers op de visuele elementen googled op de woorden/ naam van de visuele elementen.
2
Iconen Achtergrond De iconen voor de Rabobank gedijen het best op een lichte achtergrond. Naar voorkeur wit of grijs met eventueel een verloop. Maximaal mag er een grijstint van 20% zwart gebruikt worden, minimaal wit (0%). Er mag gevarieerd worden met stappen van 5. Volvlakken kunnen 0, 5, 10 of 15 procent zijn. Een verloop van grijs gaat altijd van boven naar beneden, van licht naar donker. Een verloop kan van 10 naar 20 procent of van 5 naar 15 procent. Een donkere achtergrond sluit niet geheel aan bij het imago van de Rabobank en dient indien mogelijk vermeden te worden. Kleurgebruik De kleur van de iconen zelf komen het best over in donkergrijs en of blauw/ cyaan. Een combinatie van grijs met een verloop van blauw/cyaan heeft de voorkeur indien dit past binnen het ontwerp / de applicatie. Er kan voor volvlak gekozen worden voor 90, 95 of 98 procent zwart, 100% cyaan of 100% cyaan met 70% magenta. Verloop in het logo dient altijd van boven naar beneden te gaan van 95% naar 98% zwart of van 100% cyaan naar 100% cyaan met 30% magenta. Voor details in een icoon kan 50 of 60 procent zwart gebruikt worden. Er mogen maximaal twee stalen gebruikt worden in een icoon, gecombineerd met 50/60 procent zwart voor details. Vorm Platte simplistische iconen passen het best bij het image van de Rabobank. Echter dienen de verhoudingen van de weergegeven items wel te kloppen met de realiteit. De iconen moeten overwegend strakke lijnen hebben, maar hoeken kunnen afgerond worden als dit past bij het item dat weergeven wordt. Diepte in de iconen kan gesimuleerd worden door middel van een verloop in de kleur. Daarnaast komen de iconen het sterkst over indien de beeltenis hedendaags weergeven wordt. Items die overeenkomen met het beeld van vroeger kunnen het beste vervangen worden met een hedendaagse equivalent. Bijvoorbeeld, de mobiele telefoon met toetsen wordt vervangen door een touchscreen en de beeldbuis door een flatscreen.
10% 5% 15% 10% 5% 0% 20% 15% 100% cyaan 95% 100% cyaan 30% magenta 100% cyaan 70% magenta 100% cyaan 98% 98% 95% 90% 3