Winnen in Google 4.0!
Direct Toegang
X
Winnen in Google 4.0!
50% Complete
De meest complete SEO Gids online!

Page content

article content

Material Design, dé lifehack voor je webdesign!

Webdesign is naar mijn mening de afgelopen 2 jaar meer dan ooit een maker of een kraker geworden voor een effectieve website. Daar waar webdesign enkele jaren geleden nog ondergeschikt was aan de inhoud van je website, is het vandaag de dag de belangrijkste factor in het grijpen, behouden en focussen van de aandacht van je bezoeker.

Waarom is je webdesign zo belangrijk geworden?

Onderzoek wijst uit dat 75% van internet gebruikers toegeeft een waardeoordeel (of vooroordeel) te geven over de betrouwbaarheid van het bedrijf op basis van het webdesign.

Daarnaast wijst onderzoek uit dat een nieuwe bezoeker gemiddeld 2,6 seconden de tijd neemt om een website te scannen en een eerste indruk zelfs al binnen 50 miliseconden gevormd wordt. 94% van eerste indrukken zijn “design-gerelateerd”.

Een derde onderzoek laat zien dat onze aandachtspanne sinds 2015 officieel lager is dan die van een goudvis.

aandachtspanne-attention-span-goudvis-mens-website

Webdesign is de eerste stap die je zult moeten zetten wanneer je aan de slag gaat met het optimaliseren van je conversie. Wanneer een bezoeker je website namelijk direct al wegklikt, nog voordat deze naar de inhoud gekeken heeft, dan maakt het natuurlijk weinig uit wat je op je website hebt gezet…

Zolang je webdesign niet op orde is, heeft conversie optimalisatie geen zin…

Uniek versus effectief webdesign…

Ik zit inmiddels zo’n 9 jaar in het vak en ik kan je uit ervaring vertellen dan ondernemers allemaal “uniek” willen zijn als het aankomt op hun business. Misschien is dat ook wel meteen de grootste overeenkomst die ondernemers hebben 😛

Logisch ook want deze creativiteit is nu juist onze grootste kracht als ondernemer. Het stelt ons in staat om dingen te creëren. Vaak wordt echter onze grootste kracht onze grootste zwakte wanneer we ons in een ander werkveld gaan begeven. De meeste ondernemers willen een unieke website maken of laten maken maar lopen hierbij op tegen wat ik noem:

De “Creativiteit-Effectiviteit Paradox”

Mensen bewonderen complexiteit, maar ze waarderen eenvoud

dont-make-me-think-steve-krugDon’t make me think!

In de video heb ik het even over het boek “Don’t make me think” van Steve Krug. Persoonlijk vind ik dat een van de beste boeken die je over conversie optimalisatie kunt vinden.

Het geeft aan dat je jouw bezoeker niet aan het denken wil zetten en dat elke miliseconde concentratie die je van je bezoeker vraagt telt. Elke miliseconde die je bezoeker te veel verbruikt aan het begrijpen van je website design / indeling gaat ten koste van het consumeren van de inhoud.

De herkenbaarheid van je webdesign

Het is dus van levensbelang voor je conversie dat je werkt met effectief webdesign en de belangrijkste factor daarin is de herkenbaarheid en daarmee de zogenaamde “Affordance“.

Dit is vrij vertaald de mate waarin een bezoeker begrijpt waarvoor een bepaald element op je website bedoeld is (Wikipedia). Jij kunt als website eigenaar wel weten wat de bedoeling is, vaak weet je bezoeker dat niet en krijg je zoiets:

Effectief webdesign

Regelmatig steken ondernemers en/of webdesigners veel tijd en energie in het maken van de verschillende elementen op hun website zoals bijvoorbeeld hun buttons. Het is dan extra jammer wanneer deze buttons niet als iets klikbaars herkent worden. Steve Krug toont dat bijvoorbeeld als volgt:

effectieve-website-buttons

Dit herkent elke webdesigner…

Het kan overigens nog erger. Onderstaande video zal elke (web)designer herkennen. Dit is wat er gebeurt wanneer de creatieve ondernemer (met een verliesaversie en keuzestress van heb ik jou daar) zich met design bezig gaat houden. Pas op: het is wel een beetje confronterend voor de ondernemers onder ons (waaronder ik zelf).

Vind je bezoeker het net zo logisch als jij?

Als ondernemer zijn we geneigd om een website in te richten op basis van wat wij zelf overzichtelijk en logisch vinden in plaats van dat we kijken naar wat logisch is voor onze bezoeker.

Dat is niet altijd het beste idee want als ik iets geleerd heb de afgelopen jaren dan is het wel het feit dat veel ondernemers grote moeite hebben met het objectief kijken naar hun website, teksten en andere marketingactiviteiten. Dat is niet erg maar het is goed om je er bewust van te zijn.

effectieve-webdesign-dropdown-menu

Kleine voetnoot bij de tekening: Persoonlijk heb ik een hekel aan uitklapmenu’s. In de meeste gevallen bewijst het nodig hebben van een uitklapmenu enkel dat je teveel probeert te communiceren. Maar dat terzijde.

De oplossing: De Google Material Design Guide!

Op basis van het bovenstaande raad ik je aan om gebruik te gaan maken van de design standaard die de grote jongens hebben gezet en dan met name Google. Hun huidige (en aangeraden) webdesign standaard heet “Material Design“:

Wat is Material Webdesign?

Google heeft met Material Design een nieuwe standaard in webdesign gezet. De onderstaande video laat goed het ontstaan zien (je moet even door de eerste minuut heen bijten wanneer je aandachtspanne korter is dan die van een goudvis 😉 )

Google heeft een complete handleiding online geplaatst, deze Material Design Guide vind je hier

Het briljante aan de Material Design Guide is dat enkele van de meest briljante webdesigners in de business (die bij Google werken) voor jou tot op de millimeter nauwkeurig hebben uitgeschreven hoe alle elementen op je website vormgegeven zouden moeten zijn. Je hoeft niet meer na te denken over lettertypes, kleuren, buttons enzovoorts. Je kunt je gaan focussen op de inhoud van je website.

google-material-design-guide

Google cards

Wij zijn zelf ook enige tijd geleden begonnen om Material design te gebruiken in onze website en al onze Phoenix templates. Hoewel we nog niet 100% klaar zijn hebben we inmiddels wel deze website al grotendeels omgevormd. Herken je bijvoorbeeld het Google card design en Google kleuren op onze homepage, ons blog en onze videopagina? 😉

imu-phoenix-material-design

Grappig weetje: Facebook doet nog niet helemaal mee met Material Design. Misschien omdat Facebook en Google geen vrienden zijn. Hier een voorbeeld van een designer die een Facebook alvast even in Material Design gemaakt heeft. Beter toch?

Hier zie je hoe wij ook de beheeromgeving van ons Phoenix systeem in dit card design hebben gemaakt:

phoenix-beheer-admin (Google card design)

Spaar zeeën tijd met kleuren kiezen

Persoonlijk ben ik een enorme fan van de material design kleuren. Al zolang als dat ik me met webdesign bezig houd heb ik lettertypes en kleuren kiezen altijd verschrikkelijk moeilijk en tijdrovend gevonden. Nu geeft Google niet alleen de aangeraden kleuren aan maar zelfs welke varianten en combinaties je het beste kunt gebruiken. Briljant:

Contrast kleuren voor je call-to-action

Google beveelt contrastkleuren aan voor je call-to-actions, zodat deze meer opvallen (klinkt logisch). We hebben de Google kleuren + bijbehorende contrast kleuren voor de call-to-action buttons onlangs in ons Phoenix systeem geïntegreerd, bijvoorbeeld bij onze “Magnets”. Hieronder zie je een voorbeeld van hoe we dat doen:

Magnets in Phoenix

Mobile first webdesign

Een ander groot voordeel van de Material Design Standaard is dat Google in alles “mobile first” is gaan denken. Dat zagen we al bij hun nieuwe logo naar voren komen.

De mobiele revolutie is de grootste trend in webdesign van dit moment, voor veel websites geldt dat inmiddels meer dan 50% van het bezoekersaantal via een mobiel apparaat komt. Dat betekent dat je design eigenlijk gemaakt moet zijn voor een mobiel apparaat (mobile first) in plaats van dat je website puur en alleen mobile responsive is.

Mobile first design

Mobiel design, een heel ander speelveld…

Mobiele apparaten hebben een hele andere gedragspsychologie dan grotere schermen. Alleen je website responsive maken, zodat het past, is dus niet voldoende om je conversie op mobiele apparaten omhoog te krijgen. Dit is echter nog zo’n nieuw vakgebied dat het voor de gemiddelde ondernemer vrijwel onmogelijk is om daar goede beslissingen in te nemen.

Sterker nog, de meeste ondernemers hebben al ontzettende moeite met het “weglaten” van onderdelen op hun website, dat is op mobiel nog veel moeilijker. Kijk bijvoorbeeld maar eens naar de aanbeveling van Google voor je homepage:

mobile-first-homepage-design

Lukt jou dat? Om maar één ding te laten zien op je mobiele homepage en de rest pas na scrollen? Moeilijk he!

Nog een leuke quote uit het boek van Steve Krug trouwens over een ander belangrijk onderdeel van conversie optimalisatie. Naast je design moet je de kunst van het weglaten ook toepassen op je content 😉

steve-krug-copywriting-quote

De dood van photoshop?

Door veel trendwatchers wereldwijd worden deze bevindingen een beetje als de dood van Photoshop samengevat. Wanneer je namelijk met een blanco vel papier (in Photoshop) begint met het designen van een creatief en uniek webdesign dan zul je in vrijwel alle gevallen al heel snel inleveren op herkenbaarheid en daarmee de effectiviteit.

photoshop-dood-webdesign-trend

Waarom zou je veel tijd en geld investeren om het wiel opnieuw uit te vinden met het risico dat het eindresultaat veel minder succesvol is dan je had gehoopt?

Herkenning = vertrouwen

In de wereld van gedragspsychologie, neuromarketing, zelfs hypnose en in zekere zin ook conversie optimalisatie is het een algemene wet dat je een mens het best kunt beïnvloeden wanneer hij/zij ontspannen is.

Ontspanning ontstaat bij vertrouwen en vertrouwen ontstaat bij “herkenning

Wanneer je bezoeker je webdesign herkent als iets wat zij dagelijks (o.a. op hun smartphone) gebruiken via Google, Apple, Adobe, Twitter etc. dan ontstaat er een soort vertrouwen door associatie. Je website komt (zonder dat je bezoeker het bewust doorheeft) meteen veel betrouwbaarder over, juist omdat het in dezelfde stijl als Google vormgegeven is.

Moeten alle websites dan hetzelfde zijn?!

Nu hoor ik je denken…

Nee dit betekent niet dat alle websites er hetzelfde uit gaat zien. Ik ben zelf nogal een autist netjes en ook nog eens een Groninger en dus zou ik het persoonlijk schitterend vinden als alle websites op het internet er hetzelfde uit zien. Ik snap echter heel goed dat menig ondernemer die mening niet met mij deelt… 😉

Waar het me in dit artikel om gaat is om je aan te geven hoe webdesign tegenwoordig heel makkelijk en snel voor je kan gaan werken en deze standaard je zeeën met tijd en geld bespaart.

everybody-is-a-genius-quote-einstein

Schoenmaker blijf bij je leest zou ik zeggen, jij bent ondernemer en geen designer. Probeer jezelf te onderscheiden met de inhoud van je website en niet met het design van je knoppen, lettertypes en andere standaard elementen.

Nogmaals, je bezoeker bewondert complexiteit maar waardeert eenvoud. Het kan je bezoeker niks schelen of jouw website een uniek design heeft. Het gaat je bezoeker er om dat hij zo snel mogelijk hetgeen kan vinden waar hij voor kwam. Een herkenbaar, professioneel en effectief webdesign is daarin de eerste stap.

Succes!

Deel en/of laat even van je horen!

Comment Section

17 reacties op “Material Design, dé lifehack voor je webdesign!


Door Rudy Missotten op 17 april 2016

Whauw, waardevolle info !
Thanks Tonny


Door Tonny Loorbach op 17 april 2016

Thnx Rudy!

Fijn ook dat je het ijs even breekt met een eerste reactie 😉


Door Tom op 17 april 2016

Goed artikel! Erg mooi geschreven en waardevol voor mij als webdesigner!


Door Tonny Loorbach op 17 april 2016

Thnx Tom!

Lijkt me als designer best lastig om in sommige gevallen afstand te doen van je eigen creativiteit. Fijn dat je er toch de waarde van in ziet.


Door Steven Braham op 18 april 2016

Goed artikel, material design en frameworks die erop zijn gebaseerd schelen inderdaad zeeën van tijd 🙂


Door Scarlet op 18 april 2016

Heel interessant van dat onderzoek ook. Zou je ons de bronnen kunnen geven. Wil er graag wat meer over lezen 🙂


Door Ed op 18 april 2016

Ik kan me hier grotendeels in vinden, misschien nog meer in het proces dan de concrete vormgeving. Want (browse maar eens een beetje rond): het gaat inmiddels toch allemaal wel vreselijk veel op elkaar lijken. Waar je 2 jaar geleden dacht van “Hé Bootstrap” denk je tegenwoordig van “Hé, Material Design”, “Parallex scrolling”, “Bold images” en nog meer clichés.
Voor mij komt het erop neer dat je de “don’ts” heel serieus moet nemen (daar is over nagedacht) maar dat je toch je eigen visie bovenop de “do’s” moet leggen.


Door Elma de Bruijn op 23 april 2016

Ik heb er zin in om in de zomer weer een verbeterslag te maken met Phoenix omtrent de uitstraling van mijn website. Je artikel helpt me goed om hierover een visie te ontwikkelen. Dank voor je werk!


Door Tim op 3 mei 2016

Leuk artikel! Kan ik dit ook toevoegen in een WordPress website?


Door Marc Wijnants op 9 mei 2016

Super interessant artikel en ik heb een vraag hierover. Waar zou je dan aan moeten denken met betrekking tot content als je een guest blogger bent of je gebruik maak van guest bloggers. Deze bloggers leveren hun content dus aan en zou je hiervoor dan ook regels moeten opstellen?


Door Frank van den Hoven op 15 december 2016

M.i. is jouw vraag niet aan de orde Marc. Want je maakt en vervolgens hebt een design voor je site, met dus een bepaald ‘format’ voor hoe teksten en beeld worden weergegeven. Daar hoeven jouw bloggers zich niet druk om te maken. Die leveren gewoon een lap tekst en evt. afbeeldingen aan, en die giet jij – of beter gezegd je CMS, als jij het in een invoerscherm invoert – in jouw format. Dat hoeven zij toch niet op te maken? Daar heb je nu juist een CMS voor die dat voor je regelt.


Door Nancy-Els de Jonge op 17 mei 2016

Helder verhaal. In verband met een nieuwe website ben ik op zoek naar een bedrijf dat alle kennis hiervoor (ICT, SEO en marketing) in huis heeft. Omdat ik een lokaal bedrijf heb lijkt Phoenix me wat te ver voeren. Hebben jullie, naast Phoenix, ook een webdesign service?


Door Nils van der Knaap op 23 juni 2016

Mooi compleet verhaal, Tonny. Ik vind Material Design ook mooi en ga het zeker vaker toepassen. Fijn dat Google alvast wat nadenk werk heeft gedaan 😉


Door Indiemedia op 9 juli 2016

Heerlijk, wat een gigantische artikel met informatie. De komende weken maar vrij nemen om alle informatie te verwerken. Bedankt voor het delen van dit artikel! 🙂


Door Gustavo Woltmann op 20 januari 2017

Heel interessant artikel met leuke video’s etc.


Door Murat op 17 maart 2017

Hi Tonny, Interessant artikel! ”Een derde onderzoek laat zien dat onze aandachtspanne sinds 2015 officieel lager is dan die van een goudvis.” Ik vroeg mij af naar welk onderzoek je hier verwijst?


Door Claudia op 14 juni 2017

Ik vroeg me af wat de bronnen warren voor de cijfers die in het begin van het artikel genoemd worden. Deze zou ik eens verder willen inzien. Alvast bedankt

Plaats een reactie




Phoenix WebsitePhoenix Website