Grafische design trends: dit zijn de 7 grootste van het moment

grafische design trends scaled

Design staat nooit stil. Design vloeit van de ene opvatting naar de andere; wat gewaardeerd werd in 2016, spreekt ineens niet meer aan in 1017. Trends komen en gaan, en het is aan jou, de ontwerper, om bij te blijven. De grafische design trends in dit artikel zijn nú actueel. Benieuwd hoe je hier op in kan haken, zodat je ‘on top of your game’ kan blijven? Hier volgen de 8 meest opvallende trends en ontwikkelingen op designgebied:

  1. Kleur bekennen

Kleuren mogen weer gezien worden! De afgelopen jaren lag bij velen de focus op neutrale, veilige kleuren. Veel zwart-wit, veel witruimte, en als het moest aanvulling met zachte kleuren. Het werkte voor een grote naam als Apple, en als gevolg sprongen velen op dezelfde boot. Anno 2017 is de kleur weer helemaal terug. Pagina’s mogen gerust opvallen en leven helemaal op door het gebruik van vlotte, felle kleuren. Mix ze met een zachtere achtergrondkleur om het niet te overdadig te maken, gebruik de juiste kleuraccenten en laat je designs stralen als nooit tevoren.

  1. Minimalisme in optima forma

Het klinkt als een clash na opvoering van ons eerste punt, maar ook minimalisme vormt een belangrijke grafische design trend. Dat komt omdat minimalisme de afgelopen jaren ook veelal verkeerd begrepen is geweest. Minimalisme werd synoniem met basic, kaal, neutraal. Zonde, want met een vlot kleurenpalet komt minimalisme juist extra goed uit de verf. Prikkelend kleurgebruik zorgt ervoor dat andere zaken, zoals overdadige details, weer weggelaten kunnen worden. En dat levert weer strakke, functionele ontwerpen op.

Aansluitend op dit minimalisme is het flat design, wat skeuomorphisme al een tijdje aan het verdrukken is. In onze eerdere blogs kun je meer lezen over flat design en skeuomorphisme.

  1. Authentieke fotografie

Nadat we al jaren hebben moeten kijken naar cliché stockfoto’s in allerlei uitingen is de behoefte naar authenticiteit groot. Posters, flyers, websites, allen worden ze volgepropt met dezelfde overdreven standaardimages van blije studenten/werknemers etc. Hoog tijd dus om daar verandering in te brengen. Het hoeft niet eens veel effort te kosten. Bijna iedereen heeft vandaag de dag wel toegang tot redelijke camera-apparatuur, en zelf éven de moeite nemen om wat originele foto’s te schieten kan een wereld van verschil maken. Dit eigen beeldmateriaal zorgt voor een authentiekere ervaring en maakt het geheel direct een stuk persoonlijker. De mensen in de foto’s zijn échte werknemers die bij jou werkzaam zijn, geen modellen die ongemakkelijk poseren voor wat extra schnabbel inkomsten. Die authentieke uitstraling zien je klanten, en ze zullen deze persoonlijke touch ongetwijfeld waarderen. Bovendien werkt het drempelverlagend: ze krijgen een beter beeld van de personen waarmee ze te maken hebben, wat prettig is in een gezichtloze online wereld.

authentieke fotografie

Bij ons geen stockfoto van je standaard ‘man-in-pak’. De échte gezichten achter Falqon Creative

  1. Handgemaakte illustraties en iconen

De speelsheid die we bij het kleurgebruik waarnemen zien we ook terug in andere grafische design elementen in uitingen. De persoonlijke touch die we bespraken in het vorige punt keert niet alleen terug in fotografie, maar ook in de rest van de vormgeving. Veel grote sites schakelen talentvolle tekenaars en illustrators in om hun pagina’s te verrijken met luchtige, vlotte illustraties. Iedere artiest geeft zijn/haar eigen persoonlijke touch mee aan de gemaakte illustraties, iconen en symbolen. Het is authentiek, origineel en past bij de trend om te onderscheiden met eigen beeldspraak.

  1. Gewaagde typografie

Wie onze blogs over typografie leest weet het al: typografie is één van de belangrijkste pijlers in design. Een font kan een design maken of breken. Vandaag de dag beschikken we over enorme scala’s aan lettertypes, elk met eigen doeleinden en bestemmingen. De tijd waarbij elke pagina een handjevol standaardfonts had om uit te kiezen is voorbij. Met typografie kan je heerlijk spelen en experimenteren. Gelukkig lijken veel vormgevers dat ook te beseffen en zien we al meer gave typografische keuzes in grafische design terugkeren.

Wil je meer weten over hoe je het juiste lettertype kiest voor de job? Of ben je benieuwd hoe je het beste meerdere fonts kan combineren? Lees dan eens onze Typografie Topic artikelen.

  1. De inzet van Google Fonts

Aansluitend op het vorige punt is dit een belangrijke reden waarom we al meer spannende fonts tegenkomen op het web. Het benutten van Google Fonts heeft het voor webdesigners een stuk makkelijker gemaakt om mooie designkeuzes te maken op het gebied van typografie. Google Fonts worden op elk apparaat correct weergegeven en bieden daardoor een grote mate van toegankelijkheid. Op het moment van schrijven zijn er 818 font families beschikbaar, genoeg om het juiste font te vinden voor elke gelegenheid.

google fonts

  1. GIF me more

Zeg het met GIF’jes. Vooral op social media en in online communities zien we een sterke toename in het gebruik van deze bewegende afbeeldingen. Hoewel die omschrijving de lading tegenwoordig eigenlijk al niet meer dekt. Veel GIF’s vertellen een heel verhaal en zijn in feite video’s zonder geluid geworden. Dat verklaart mogelijk ook de populariteit, aangezien het een bepaald niveau aan gebruiksgemak met zich meebrengt. In lang niet elke situatie is het wenselijk om geluid te hebben. Veel mobiele gebruikers surfen er op los als ze onderweg zijn, en dan wil je je medemens niet vervelen met spontane explosies aan audiofragmenten. Bovendien laden GIF’s snel, en zijn ze sneller te bekijken dan video’s. Het zijn kleine behapbare stukjes content, die toch een verhaal op zich kunnen vertellen. Een foto zegt misschien meer dan 1000 woorden, maar een GIF kan die 1000 woorden frame voor frame uitbeelden.

Je portfolio aanvullen met fictieve projecten, hoe pak je dat aan?

responsive blog

Het portfolio: een onmisbare tool voor elke designer, van beginner tot ervaren professional. Met je portfolio laat je zien wat je in huis hebt, wat voor opdrachten en werkzaamheden je kunt handlen, en welke (grote) namen al hun vertrouwen in jou gelegd hebben. Het opbouwen hiervan is een taak die tijd vergt, aangezien je eerst projecten moet hebben afgerond voordat je ze op kan nemen in jouw portfolio presentatie. Over tijd zul je meer en meer opdrachten voltooid hebben en kan je de werken waar je trots op bent toevoegen.

Maar hoe pak je dat aan als beginnend ontwerper? Als je nog studeert of nog maar net een eigen bedrijfje gestart hebt zullen de opdrachten niet meteen binnenstromen. Het opbouwen van een goede naam en een klantenbestand kost tijd. Toch wil je ergens beginnen en zal je toch moeten tonen wat je in huis hebt, zodat je die eerste projecten binnen kan slepen. Veel beginnende designers proberen daarom voor zichzelf fictieve projecten te bedenken om uit te werken. Op die manier kan je vast ervaring opdoen, zodat je goed voorbereid bent op het moment dat de eerste echte opdrachten binnen beginnen te stromen.

Hulp genereren

Zelf fictieve projecten en opdrachten bedenken kan best lastig zijn. Je wilt het niet te makkelijk voor jezelf maken en het vergt de nodige creativiteit om zelf een heel project uit je duim te zuigen. Je zou het web kunnen afstruinen naar echte opdrachten om als leidraad te houden. Het lastige is natuurlijk dat lang niet alle opdrachtgevers op de voorhand hun opdrachten online zullen zetten. Vaker zullen zij met een wens of vraagstuk direct aankloppen bij designbureau’s.

Wij vonden twee tools die jou goed op weg kunnen helpen om aan de slag te gaan met fictieve projecten. Op Briefbox vind je uiteenlopende designprojecten om op te pakken. De vrolijk ogende site bevat een library die duidelijk ingedeeld is in allerlei designcategorieën. Daarbij bieden ze tegen betaling ook een aardig scala aan aanvullende diensten. Zo kan je dan jouw ontwerpen uploaden op de site, waarbij de community erop kan reageren en feedback kan geven. Ook krijg je dan toegang tot een tutor die jou feedback en tips&tricks geeft. Dat geeft net even wat extra motivatie om mooie werken af te leveren. Als gratis gebruiker kan je ook prima uit de voeten met Briefbox, op het moment van schrijven staan er zo’n 90 gratis briefings op, genoeg om flink aan de slag te kunnen gaan.

Briefbox projecten

 

Een stuk eenvoudiger van opzet is /Brief van Manuel Oppol del Rio. Hij biedt een random generator die willekeurige project briefings produceert. Je kiest het soort opdracht en het vakgebied waarvoor je aan de slag wilt gaan en met één druk op de knop ligt er een briefing voor je klaar. Het prettige van deze tool zijn de specifieke eisen en voorwaarden van de fictieve opdrachtgevers die erbij staan. Zaken als gewenste kleurcombinaties, deliverables en stijlvoorkeuren worden benoemd. Verder zijn de briefings redelijk beknopt, maar voldoende om goed mee uit de voeten te kunnen.

Genoeg opties om mee aan de slag te gaan dus! Nu is het aan jou om prachtige werkjes op te leveren aan de hand van deze briefings. Maak je portfolio compleet en indrukwekkend, zodat fictieve werkzaamheden snel over kunnen gaan in echte (en hopelijk goedbetaalde) werkzaamheden.

Breadcrumbs: Volg het spoor naar SEO succes en gebruiksgemak

breadcrumbs

Nee, we hebben het hier niet over de kruimels die zich steevast onderin je broodrooster blijven verzamelen, of de stukjes die je liefdevol naar de eendjes gooit bij de lokale vijver. De zogenaamde breadcrumbs (in het Nederlands ‘Broodkruimelspoor’) verwijzen naar het afgelegde navigatiespoor van de gebruiker. Door dit spoor zichtbaar te tonen bovenin de pagina help je je gebruikers met hun oriëntatie en navigatie op je website. Dat de breadcrumbs ook nog eens gunstig zijn voor je SEO is natuurlijk helemaal mooi meegenomen.

De benaming is niet zo maar uit de lucht geplukt: ‘breadcrumbs’ verwijst naar de broodkruimels die Hans en Grietje achterlieten op hun reis, om zo de weg naar huis te kunnen terugvinden. Vervang het grote overweldigende bos uit het sprookje door de digitale bos aan informatie waar je sitebezoekers zich doorheen moeten waden, en je begrijpt meteen de behoefte om overzicht te creëren.

Gebruiksgemak

De breadcrumbs bieden een prettig houvast voor je bezoekers. Ze zien in één oogopslag de route die ze afgelegd hebben om bij de huidige pagina te komen, en begrijpen beter hoe je sitestructuur opgebouwd is. Bedenk daarbij ook dat lang niet alle bezoekers gestart zijn op je hoofdpagina. Veel zoekmachinegebruikers zijn direct geland op een specifieke pagina, en hebben geen idee van de verdere inhoud van je website. De breadcrumbs geven ze inzicht in wat je zoal te bieden hebt, en zorgt ervoor dat ze langer op jouw website blijven. Het nodigt uit om verder te neuzen in de verschillende categorieën en subcategorieën en voorkomt dat ze je site verlaten om ergens anders te zoeken naar deze informatie.

Daarnaast helpt het ook om bezoekers die ‘verdwaald’ zijn sneller weer op het juiste pad te helpen. Zoals we al beschreven in ons artikel over logopositionering en de impact op navigatie hebben gebruikers baat bij een duidelijke optie om terug te keren naar de homepage. Instinctief gaan we maar terug naar start als we de weg kwijt zijn, om vanuit daar weer verder te zoeken. Door middel van breadcrumbs kan je het je sitebezoekers nog een stuk makkelijker maken. Ze hoeven niet meer helemaal terug naar af als ze het even niet meer weten, doordat ze naar elke stap in hun navigatiespoor kunnen terugspringen. Het zorgt voor een betere flow en een hogere gebruiksvriendelijkheid. En dat komt natuurlijk weer ten goede van andere zaken als je conversie.

SEO voordeel

Minstens even belangrijk en interessant is het voordeel voor je SEO. Google vindt het namelijk belangrijk dat ze inzicht hebben in de structuur en opbouw van jouw pagina’s. Een duidelijke indeling met categorieën en onderdelen, waarbij je ook nog eens aanduidt hoe deze zich tot elkaar verhouden, is een dikke plus in de ogen van Google. De breadcrumbs laten precies zien waar een pagina zich bevindt en waar deze onder valt, en zijn daardoor een waardevolle toevoeging aan je website. Daarnaast doen je breadcrumbs tegelijkertijd dienst als een stukje linkbuilding. Het zijn namelijk stuk voor stuk interne links naar andere relevante pagina’s op jouw website. Ook dat is weer een zaak die gewaardeerd wordt door de grote zoekmachines.

Al met al kan je bijna niet fout gaan met de implementatie van breadcrumbs. Het element zelf neemt nauwelijks ruimte in beslag op je pagina en veel CMS’en bieden opties voor automatisch opgebouwde breadcrumbs. Je helpt je gebruikers om het overzicht te bewaren en eenvoudiger te kunnen navigeren op je website én het is gunstig voor je SEO. En als Google je spoor eenmaal gevonden heeft, zit jij klaar in je snoephuisje, met een kookpot vol conversies.

Parallax scrolling: Interessante gimmick met veel valkuilen

parallaxeffect 2

Vorige week bespraken we een design trend waar veel winst mee te behalen valt op het gebied van gebruiksgemak. Vandaag werpen we een blik op parallax scrolling, een webdesign element van een hele andere orde. Bij parallax scrolling draait het namelijk vooral om het verbluffen van sitebezoekers aan de hand van soepele animaties. Een interessant grafisch staaltje om je site opvallender te maken, daar wilden veel bedrijven en ontwikkelaars graag op inhaken. Gaandeweg is uit het oog verloren wat de juiste beweegredenen zijn voor de implementatie. Vorm is verkozen boven functie, en in het resulterende overgebruik komen veel valkuilen en pijnpunten naar voren.

Maar voordat we de kritische blik opzetten, zullen we eerst bespreken wat parallax scrolling inhoudt. Kortweg houdt parallax scrolling in dat diverse lagen in je website op verschillende (=parallax) snelheden meebewegen. Hierbij schuift doorgaans de achtergrondlaag langzamer mee dan de voorgrond of de objecten die zich tussen voorgrond en achtergrond bevinden. Het interessante hieraan is dat het effect een gevoel van diepte geeft op je pagina. Een goed voorbeeld om een betere indruk te krijgen is de demo die je vindt op deze site.

https://www.weblinc.com/labs/jquery-parallax/
Bron: https://www.weblinc.com/labs/jquery-parallax/

Parallax annoying

Een mooi effect, maar er kleven wel de nodige nadelen aan. Zo kan overdadig gebruik afleiden van de boodschap die je probeert over te brengen. Of voorkomt het dat bezoekers de calls to action zien op de pagina’s waar je ze wilt activeren om iets te doen. Bovendien is parallax scrolling vaak ook vervelend voor bezoekers die frequent terugkeren. De eerste keer zijn ze onder de indruk, de vele bezoeken erna willen ze gewoon zo snel mogelijk doen waarvoor ze gekomen zijn. Dan zit een dergelijk effect eigenlijk alleen maar in de weg en wordt het storend.

SEO en laadtijden

Daarnaast is het ook een risico voor je SEO strategie. Dat zit hem niet in het feit dat Google niet in staat zal zijn om je pagina’s te indexeren. Google’s crawlers die pagina’s scannen en indexeren zijn tegenwoordig prima in staat om overweg te kunnen met complexere webdesigns. Zolang je pagina aan de back-end strak in orde is zou parallax scrolling weinig issues moeten opleveren. Echter is er wel een ander aspect waar Google veel waarde aan hecht met betrekking op SEO: Mobiele optimalisatie.

Parallax scrolling en mobiele devices vormen namelijk lang niet altijd een goed huwelijk. Telefoons en tablets die op iOS draaien kunnen namelijk slecht overweg met het effect, omdat het scrolleffect niet goed geregistreerd wordt. Android toestellen kunnen er beter mee overweg, maar ook hier is het effect vaak houterig.

Bedenk ook dat lang niet iedereen een high-end smartphone bezit. De goedkopere toestellen hebben moeite met het laden van de vele lagen en interactie die erbij komt kijken. Bovendien is parallax scrolling over het algemeen zwaar op de laadtijden, voor zowel computers en draagbare toestellen. Al dit zorgt ervoor dat gebruikers minder gemakkelijk kunnen vinden waar ze voor kwamen, en dat feit wordt daarom ook streng bestraft door Google. Het resultaat: je levert veel verkeer naar je website in voor een visueel element, en dat is erg zonde.

 

Wanneer dan wel?

Natuurlijk is het niet allemaal kommer en kwel als het gaat om parallax scrolling. Verstandig geïmplementeerd kan het effect een mooie bijdrage leveren aan je presentatie. Vooral op het gebied van storytelling kan het een extra dimensie toevoegen aan de beleving. Het prikkelt de bezoeker en zorgt voor een minder statische beleving. Vooral pagina’s waarop de promotie van één product centraal staat kunnen profiteren van parallax scrolling. Het geeft de kans om op een mooie visuele wijze alle aspecten van je product te tonen, terwijl de bezoeker er soepel doorheen scrollt.

Dit kan het beste toegepast worden op pagina’s die vroeg in het verkoopproces zitten. Hier kan je de gebruiker lekker maken en op bijzondere wijze kennis laten maken met je product. Ga je dieper in het proces zitten waar de wens verschuift naar informatiewinning of het ondernemen van een duidelijke actie, blijf dan weg van parallax scrolling. Bedenk ook hoe vaak een bezoeker de pagina te zien zal krijgen. Gaat het om een pagina waar ze regelmatig naar terug zullen moeten keren, dan is parallax scrolling eerder een stoorfactor dan een toevoeging. Zet het effect in op de juiste plek, waar het echt toegevoegde waarde heeft en niet hindert. Zo voorkom je dat bezoekers bij jou afhaken en verder gaan scrollen op de pagina’s van de concurrent.

Dark patterns: Duistere misleiding in marketing & ontwerp (deel 1)

dark patterns 1

Meestal bespreken we in onze blogs allerlei zaken om de gebruikservaring van je bezoekers zo positief mogelijk te maken. Alles in het teken van een gelukkige gebruiker, om zo veel mogelijk tevreden klanten te verwerven. Nu gooien we het roer eens om: vandaag bespreken we de zogenaamde dark patterns. Deze term omvat allerlei foefjes in webdesign die er opzettelijk gericht op zijn om de bezoeker te verwarren en misleiden. Smerige trucjes om extra geld los te peuteren van nietsvermoedende gebruikers van je website.

Uiteraard verwachten (en hopen) we niet dat je deze zaken zal gaan toepassen op je eigen website. Zie het als een stukje bewustwording: zorg ervoor dat de indelingen en ontwerpen niet kunnen verwarren of misleiden, zeker op pagina’s waar bezoekers over gaan tot acties en conversies. Een misleidend design levert aanvankelijk misschien extra inkomsten op, maar zal uiteindelijk niet lonen. We leven in het tijdperk van social media, waar iedere bezoeker de kans heeft om van de daken te schreeuwen wat jouw bedrijf uitspookt. Negatieve gebruikservaringen verspreiden zich als een lopend vuurtje en het is een kwestie van tijd voor je door de mand valt. Dan nu, zonder verder oponthoud, een aantal opvallende dark patterns:

dark-patterns-1

Wisseltruc

Een klassieker waarbij met de verwachtingen van de gebruiker gespeeld wordt. De gebruiker wil een handeling uitvoeren en verwacht daarbij natuurlijk een bepaald resultaat. In plaats van het gewenste resultaat activeert hij echter een optie die tot een ongewenst eindpunt leidt. Een groots voorbeeld van deze dark pattern is de Windows 10 update. Deze update kreeg een grote lading negativiteit over zich heen en de reden zit hem in de melding die tot installatie kan leiden. Gebruikers van oudere Windowsvarianten kregen namelijk regelmatig meldingen om over te gaan op Windows 10. In de rechterbovenhoek van de melding staat een rood kruis, een herkenbaar icoon die bij Windows altijd gebruikt wordt om vensters te sluiten. Het resultaat wanneer men erop klikte in het updatevenster? De installatie van Windows 10 werd gestart. Misleidend en ultiem frustrerend. Het laatste waar deze gebruikers op zaten te wachten was een langdurige update naar een besturingssysteem waar ze (nog) geen behoefte aan hadden.

Vermomde advertenties

Advertenties zijn voor veel webgebruikers toch al een irritatiefactor; niet voor niets gebruikten in 2015 bijna 200 miljoen gebruikers een plugin om advertenties te blokkeren. Nog vervelender dan advertenties die duidelijk te herkennen zijn, zijn vermomde advertenties. Advertenties die zo aangekleed zijn dat ze opgaan in de stijl/design van de pagina waar ze op te vinden zijn. Zo maakten sommige nieuwssites zich schuldig aan het plaatsen van advertenties die nauwelijks te onderscheiden zijn van echte nieuwsitems. De reclames stonden tussen de nieuwsitems in de navigatie en het enige wat aanduidde dat het om een advertentie ging, was de subtiele subtitel ‘Gesponsorde inhoud’.

Een ander voorbeeld van deze dark pattern omvat de vele downloadknoppen op diverse softwaresites. Zie maar eens de juiste aan te klikken die daadwerkelijk het gewenste bestand download en je niet doorstuurt naar een partnersite. Of denk aan alle clickbait op social media, met artikelen die nieuwswaarde lijken te hebben, maar uiteindelijk niets anders doen dan zelfpromotie.

Weggestopte rekeningen

Deze dark pattern betreft niet zo zeer directe misleiding, maar maakt meer gebruik van de psyche van de gebruiker. Het maakt gebruik van de luiheid van de mens en is voornamelijk te vinden bij bedrijven die maandelijkse diensten aanbieden. Waar klanten vroeger altijd rekeningen per post kregen, worden de rekeningen tegenwoordig vaak online weggestopt. Wil je ze inzien dan moet je eerst een account aanmaken, door het inlogproces heenworstelen (weer een wachtwoord en accountnaam om te onthouden) en navigeren naar je rekeningen. Aangezien dit allesbehalve een spannende tijdsbesteding is, nemen veel gebruikers van de dienst de moeite niet. Het resultaat: het bedrijf kan vrolijk doorgaan met maandelijkse kosten doorvoeren en de klant is zich niet sterk bewust van de geldstroom die hij blijft aanvoeren naar het bedrijf. Per post was het waarschijnlijk snel opgevallen als de dienst niet meer opwoog tegen de kosten, maar online kan het lekker door blijven sudderen, weggestopt voor het oog van de klant.

Verborgen kosten

Stel je hebt als bezoeker van een site net een product of dienst gevonden die je aanspreekt, en de prijs is ook nog mooi. Je begint het afrondingsproces en doorloopt de stappen om de aanschaf te maken. Maar net voor de betaling, in de allerlaatste stap, komen er ineens flinke kosten bij. Je hebt al tijd en moeite geïnvesteerd om tot aankoop over te gaan, je bent al zo ver gekomen. Schoorvoetend besluit je toch maar je bestelling af te ronden, ondanks de extra kosten.

Deze dark pattern komt helaas nog al te vaak voor. Denk maar eens aan het proces van concertkaartjes kopen. De kaartjes lijken een mooie prijs te hebben en je wil snel toeslaan, voor het concert is uitverkocht. Je hebt binnen de tijdslimiet de eerste stappen doorlopen en wil afronden. Pats, dan komen er ineens nog wat kosten bovenop. Reserveringskosten, accomodatiekosten, lidmaatschappen voor de zaal (hallo Melkweg). Plots ben je toch ineens flink wat duurder uit dan gehoopt. Maar ja, je wil graag die ene band of artiest zien optreden, dus gaat er toch maar voor. De verkoper lacht in zijn vuistje.

Hetzelfde gebeurt uiteraard nog op veel meer online locaties. Het boeken van vliegtickets, het reserveren van een hotelovernachting. Overal word je eerst lekker gemaakt met mooie scherpe prijzen, om laat in het afrekenproces geconfronteerd te worden met flinke bijkomende kosten.

But wait, there is more…

Dit zijn nog maar enkele voorbeelden van dark patterns die de revue passeren in dit artikel. Gehaaide ontwerpers hebben nog veel meer foefjes die inspelen op de psychologische ‘gebreken’ van bezoekers. Hopelijk ben je je na het lezen van dit artikel al enigszin bewust geworden van de capaciteiten van misleidend design. En beter nog, voorkom je dat hier in trapt of er zelf mee aan de haal gaat. Want hoe verleidelijk het ook is, uiteindelijk wint eerlijke service en helder design het toch van de zogenoemde dark patterns. Een prettige ervaring is belangrijker dan ooit in een tijdperk waarin elke klant zijn mening online kan verkondigen. Absurde ervaringen worden gedeeld en binnen no time worden veel grote partijen aan de publieke schandpaal genageld. En dan zijn er uiteindelijk weinig bezoekers meer die misleid zullen worden op de website.

Benieuwd naar de vele andere duistere praktijken die in online design toegepast worden? Binnenkort volgt een opvolger op dit artikel, waarin we nog meer sneaky trucjes bespreken.

Infinite scrolling en haar impact op gebruikers en Google

infinite scrolling

Je bent het ongetwijfeld al regelmatig tegengekomen, bewust of onbewust: infinite scrolling. Of je nu argeloos door je Facebook tijdlijn aan het scrollen was, of aan het zoeken was naar producten in sommige webshops. Wat houdt het precies in? Infinite scrolling laat de gebruiker doorscrollen naar nieuwe/aanvullende content. Steeds als je de ‘bodem’ van de pagina bereikt hebt, wordt er nieuwe inhoud ingeladen en vertoond. Handig als je nieuwe posts wil bekijken, of meer producten wil zien zonder naar een nieuwe pagina te klikken.

Op naar de sterren en daar voorbij?

Toch is de functie lang niet in alle situaties ideaal. Stel je voor dat je in een webshop met infinite scrolling wilt zoeken naar een specifiek product. Zie maar eens die ene smartphone te vinden in het gigantische aanbod van die elektronica-aanbieder. Aangezien de producten pas ingeladen worden bij het verder scrollen heeft zoeken via de standaard zoekfunctie in je webbrowser geen nut. Bovendien heb je als gebruiker geen idee hoe ver je zal moeten scrollen voor je uiteindelijk bij je gewenste product eindigt.

Voor sommige websites en toepassingen levert infinite scrolling wel een soepele gebruikerservaring op. Denk bijvoorbeeld aan social network sites als Facebook. Hoe vervelend zou het zijn als je daar constant op ‘volgende pagina’ moet klikken om nieuwe berichten van vrienden te kunnen bekijken. Maar trends als one page websites en het fenomeen van infinite scrolling lopen het risico om overmatig toegepast te worden. En dat is zonde, want het is lang niet altijd even handig voor gebruikers.

infinite scrolling

Google houdt niet van scrollen

Maar niet alleen gebruikers kunnen gehinderd worden door infinite scrolling. Hoewel Google al beter wordt in het indexeren van pagina’s met infinite scrolling, prefereert de zoekmachine vooralsnog traditionelere opties. Denk aan opties om met ‘vorige pagina’ en ‘volgende pagina’ te werken, en producten daarover uit te spreiden. Dit voorkomt ook lange laadtijden, maar kan tegelijkertijd wel beter geïndexeerd worden door Google. Alle losse pagina’s worden strak opgenomen in Google’s database, en zodra men zoekt naar het door jou aangeboden product landen ze direct op de specifieke pagina waar deze op staat.

Beter nog dan vorige pagina/volgende pagina te werken is een nummersysteem hanteren, vergelijkbaar met hoe Google dat zelf doet in haar zoekmachine. Op die manier kunnen gebruikers altijd in enkele kliks door je hele aanbod wandelen. Uiteraard mag een goede zoekfunctie op je pagina alsnog niet ontbreken, maar dit helpt wel om browsende gebruikers snel op weg te helpen. Bovendien weten ze waar ze aan toe zijn, doordat ze direct kunnen zien hoeveel pagina’s ze kunnen bezoeken. Dat in tegenstelling tot infinite scrolling, waar het altijd maar afwachten is hoe groot het aanbod is. Het missen van overzicht kan afschrikken en ertoe leiden dat bezoekers sneller afhaken.

Een perfecte middenweg bestaat misschien nog niet, en het is sterk afhankelijk van de functie of infinite scrolling een vloek of een zegen zal zijn. Maar je doet er wel goed aan om stil te staan bij de wensen en behoeften van je bezoekers. Willen ze eindeloos door blijven scrollen langs content, of willen ze zo snel mogelijk iets vinden? Denk met ze mee; zo voorkom je dat je bezoekers hun speurtocht eindigen met een muisarm. Want daar is niemand naar op zoek.

Hoe heatmaps kunnen bijdragen aan verbeterde siteprestaties

heatmaps

Er zijn talloze mogelijkheden om onderzoek te doen naar de prestaties van je website. Meest besproken zijn analyses met behulp van Google Analytics, zo ook onze uitleg over conversies en wat die zeggen over de prestaties van je pagina’s. Vandaag bespreken we een interessante, minder bekende optie: heatmaps.

Koud-Warm-Warmer

Heatmaps tonen aan de hand van kleurtemperaturen waar gebruikers op je pagina het meeste/minste naar kijken of op klikken. Belangrijke informatie om te ontdekken wat de aandacht trekt of wat duidelijk en minder duidelijk is voor gebruikers. De uiteindelijke analyse zal je wel zelf moeten doen, de heatmap toont alleen op een fijne visuele manier statistieken over de pagina.

Diverse kleurenpaletten

Er zijn ruwweg vier verschillende soorten heatmaps te onderscheiden. Ten eerste zijn er heatmaps die tonen waar de muis van de gebruiker zich heeft bevonden. Bezoekers van je pagina volgen vaak onbewust met hun muis de lees- en kijkpatronen die zij hanteren. Deze heatmaps kunnen je dus een goed inzicht geven in hetgeen wel of niet in het oog springt van de gebruikers. Staat een element op een onopvallende of onverwachte plek, dan zal deze weinig oplichten op de heatmap. Of valt te zien dat een vraag op een vragenlijst niet goed bekeken is? Dan bestaat de kans dat de vraag ervoor zo onduidelijk of onhandig gepositioneerd is, dat bezoekers afhaken en de pagina verlaten. Men bekijkt de opvolgende vraag niet meer, omdat die dan niet meer relevant voor ze is. Kijk goed naar de kleurverdeling op de heatmap en trek logische conclusies uit hetgeen je ziet gebeuren.

Een tweede vorm van heatmaps zijn heatmaps gebaseerd op mouseclicks. Alle klikken worden geregistreerd en de map toont waar het meeste en minste op geklikt wordt. Deze heatmap kan zeer interessante resultaten opleveren, omdat het niet per se om klikbare zaken hoeven te zijn om geregistreerd te worden. Zie je bijvoorbeeld dat veel gebruikers op een afbeelding of stukje tekst proberen te klikken die niet clickable is, dan weet je dat er iets ontbreekt. Men is blijkbaar op zoek naar meer informatie of opties, die jij momenteel nog niet biedt. Door dit aan te passen spring je in op de wensen en behoeftes van je bezoekers en haal je meer tevreden klanten binnen.

De derde variant is de heatmap die toont hoe ver je bezoekers naar beneden scrollen op een pagina. Deze is vooral interessant bij langere pagina’s of websites met infinite scrolling. Je ziet tot hoever gebruikers over het algemeen bereid zijn te scrollen. Staan belangrijke zaken ver omlaag op je pagina? De kans bestaat dat bezoekers niet ver genoeg zullen zoeken om het te vinden en afhaken. Overweeg dan om deze informatie hoger op de pagina te plaatsen, zodat bezoekers sneller vinden waar ze naar zochten.

Een laatste optie is niet zozeer voor online implementatie bedoeld, maar mag zeker niet overgeslagen worden: Eyetracking heatmaps. Door de oogbewegingen van de gebruikers te registreren kan extreem nauwkeurig bepaald worden waar naar gekeken wordt op je site. Met behulp van de juiste soft- en hardware kan dit in een testomgeving geregistreerd worden. Onwijs nuttig om bij nieuwe sites te ontdekken wat werkt en niet werkt, maar ook zeker goed te gebruiken om het functioneren van bestaande sites te analyseren en verbeteren.

Heatmaps en A/B testing

Je hebt kleurrijke heatmaps gemaakt en uit je analyse diverse conclusies kunnen trekken. Tijd om de knelpunten te verbeteren! De kennis opgedaan met de heatmaps kan je goed combineren met het zogenoemde A/B testing. A/B testing houdt in dat je twee (of eventueel zelfs drie) verschillende versies van een pagina maakt. De ene helft van je bezoekers krijgt de ene pagina te zien, de andere helft de andere variant. Dit stelt je in staat om verschillende oplossingen voor een probleem te testen. Vervolgens ga je weer kijken naar de statistieken. Vinden gebruikers op versie 1 veel vaker de content die ze zochten dan bij versie 2. Dan weet je wat werkt en kan je een doorslaggevende designkeuze maken. Door zorgvuldig om te gaan met de kennis die je kan vergaren met heatmaps en dit te combineren met praktijktests als de A/B tests kan je échte vooruitgang boeken. Het resultaat, bezoekers die een warm gevoel krijgen van je website en daar blijvend van komen genieten.

Rich Snippets: Eruit springen in Google’s zoekresultaten

richsnippets

Na flinke SEO inspanningen om je website vindbaar te maken op Google is het je gelukt: Je eindigt eindelijk hoog in de zoekresultaten. Tijd om achterover te leunen en de klandizie binnen te zien stromen? Wacht daar nog even mee. Het is namelijk het perfecte moment om eens te kijken naar rich snippets.

De snippet is de korte omschrijving die getoond wordt bij jouw zoekresultaat. Een standaard snippet bestaat uit de titel, de url en de beschrijvende tekst. In de basis prima, maar er liggen mooie kansen om deze aantrekkelijker te maken. Door bepaalde code te intregreren in je site kan de zoekmachine de snippet aanvullen met diverse interessante mogelijkheden. Het resultaat: zogenaamde rich snippets.

Rich snippets

De diverse mogelijkheden

Wat kan je dan zoal doen met rich snippets? De meest herkenbare en opvallende is de toevoeging van recensies. In de snippet komt een waardering in sterren te staan, vaak aangevuld door een beoordelingscijfer en het aantal beoordelingen. Ideaal om te tonen hoe men je product of dienst waardeert.

Een andere grote optie is het tonen van aanvullende productinformatie. De prijs, naam, voorraadstatus en eventuele kortingsacties kunnen gepresenteerd worden. Dit levert de zoekmachinegebruiker snel een basisinzicht op en kan ervoor zorgen dat hij sneller verder navigeert naar de site.

Naast deze belangrijkste opties is het ook mogelijk om aanvullende informatie voor evenementen te tonen (datum, tijd, locatie etc.). Als je een culinair bedrijf runt, kan het weer interessant zijn om aanvullende informatie over recepten te tonen. Denk aan kernzaken als de bereidingstijd, het beoogde aantal personen, het aantal calorieën en ga zo maar door. Het is zelfs mogelijk om video’s opvallender en uitgebreider weer te geven d.m.v. rich snippets. Al met al zijn er allerlei opties om je zoekresultaat in het oog te laten springen.

Rijkelijk beloond

Het levert even wat extra werk op, maar het creëren van rich snippets levert dan ook een mooi eindresultaat op. Google toont graag kwalitatieve content in haar zoekresultaten, omdat ze er baat bij hebben zo veel mogelijk tevreden zoekmachinegebruikers te hebben. Een waardevol zoekresultaat dankzij de rich snippets zal door de zoekmachine weer hoger gewaardeerd worden.

En niet alleen de zoekmachine is blij met dat zoekresultaat. Doordat je zoekresultaat meer opvalt en degelijker overkomt, zullen gebruikers sneller naar uw site navigeren. Hoog eindigen in de zoekresultaten is één ding, maar vele malen belangrijker is het dat men ook daadwerkelijk uw zoekresultaat uitkiest. Alleen dan zal je nieuwe klanten binnen kunnen halen en je conversies kunnen verhogen.

Last but not least leveren rich snippets je ook meer werkruimte op in de zoekresultaten. Ze vormen een aanvulling op de basis-snippet die je al gevormd had, zonder deze in te perken. Het geeft je meer ruimte om belangrijke zaken te vermelden die ook interessant zijn voor de potentiële bezoeker. Denk aan de prijzen en producteigenschappen. Of de recensies, die dankzij het kleurrijke sterrensysteem helemaal goed opvallen in de zoekresultaten. Oh, en nog een bijkomend voordeel van die extra ruimte in je snippet? Je concurrentie wordt nog nét even wat verder naar onderen gedrukt in de zoekresultaten.

Black Hat SEO en White Hat SEO

black hat seo white hat

White Hat SEO en Black Hat SEO zijn termen in de online marketingbranche die voor veel mensen onbekend is. De woorden zeggen het zelf al, het is een hoed die je op zet op het gebied van SEO. Om het duidelijker te formuleren, het is een strategie die door personen of organisaties toegepast wordt om zo hoog mogelijk binnen de zoekmachines terecht te komen.

Wat is Black Hat SEO?

Black Hat SEO houdt in dat personen of bedrijven proberen de ranking van een website te verbeteren via de ‘onnatuurlijke middelen’. De omschrijving van ‘onnatuurlijke’ middelen wilt zeggen; het gebruik van agressieve SEO strategieën, technieken en tactieken die alleen richten op zoekmachines en niet op de mensen / doelgroep, en dit gaat meestal ook nog buiten de richtlijnen van de zoekmachines om. Scoren middels de Black Hat SEO neemt toch verschillende risico’s met zich mee. Als de zoekmachines doorkrijgen dat jij Black Hat SEO toepast, dan zal er naar alle waarschijnlijkheid een straf / boete of zelfs een volledige ban van de website plaatsvinden.

Voorbeelden van Black Hat SEO

Een voorbeeld van Black Hat SEO is het aanmaken van een webring. Een webring is een ring van websites die allemaal van één bedrijf zijn, zodat zij bepaalde zoektermen kunnen domineren in de zoekmachines.

Een ander voorbeeld is het gebruik van verborgen tekst. Dit wil zeggen dat de tekst dezelfde kleur wordt gegeven als de achtergrond van de pagina. Hierdoor kan de SEO’er vele zoektermen op de pagina kwijt, die ook worden geïndexeerd door de zoekmachines.

Ook Doorway Pages wordt als onderdeel beschouwd van Black Hat SEO. Een doorway page is een pagina met als doel de vindbaarheid van een website in zoekmachines op bepaalde trefwoorden kunstmatig te verhogen. Vaak is een doorway page een kleine, algemene pagina die bezoekers enkel doorverwijst naar de hoofdsite. Bezoekers moeten voorbij deze brugpagina om de gewenste content te kunnen zien.

black-hat-seo-white-hat

Wat is White Hat SEO?

White Hat SEO staat lijnrecht tegenover alle zaken van Black Hat SEO. White Hat SEO is het gebruik van optimalisatie strategieën, technieken en tactieken die zich richten op de mensen / doelgroep, die volledig het beleid en regels van de zoekmachines volgt. Dit wordt ook wel ethische SEO genoemd, omdat alles volgens de richtlijnen gebeurd. White Hat SEO is vaker gebruikt door degenen die SEO zien als een lange termijn investering van hun website. Vanzelfsprekend zitten er geen risico’s aan White Hat SEO.

Voorbeelden van White Hat SEO

White Hat SEO geeft uiteindelijk meer garantie door goede content wordt meer organisch zoekverkeer naar de website getrokken. Dit is uiteindelijk ook het hoofddoel van SEO om ten slotte conversie te verhogen. De resultaten zijn vaak op de langere termijn zichtbaar. Enkele voorbeelden van White Hat SEO omvatten het gebruik van zoekwoorden en zoekwoordenanalyse, backlinking, link building en het schrijven van inhoud die leesbaar is en voldoet aan de wensen en behoeften van de bezoeker.

Voldoet jouw website aan de user experience?

honeycomp peter morville

Usability, user interface en user experience. Woorden die regelmatig de revue passeren, die alle drie nauw met elkaar in verband staan. Deze woorden weergeven alle de mening van jouw websitebezoeker over jouw website . Weet jij de mening van de websitebezoeker en belangrijker nog, sluit deze aan bij de doelen die jij als bedrijf uitdraagt?

De afgelopen jaren is het begrip úser experience uitgegroeid tot een van de belangrijkste begrippen binnen de e-commerce. Voor de user experience zijn intrede maakte, werd een website gebouwd op basis van twee opties. ‘’Wat vinden wij als bedrijf mooi om te laten zien’’ en ‘’wat zou onze bezoeker graag willen zien’’. User experience bevat een samensmelting van deze twee opties. Echter zijn de hedendaagse websites zo complex en op langer termijn gebaseerd dat het bijna een wetenschappelijke taak is geworden om een webdesign te bouwen. We zijn ons steeds meer bewust geworden van toegankelijkheid van het internet en niet alleen via een computer.

User experience omvat de aspecten van ervaring, interactie en gevoel van de (eind)gebruiker met een bedrijf in haar totaliteit. De ervaring van een gebruiker, in deze de websitebezoeker, valt niet te ontwerpen, maar het inspelen op de belevenis wel. Hier zijn al vele theorieën en modellen over geschreven. Een van de bekendste modellen over user experience is de ‘Honeycomp’ van Peter Morville. Peter Morville omschrijft middels 7 facetten hoe een website van bepaalde waarde kan zijn voor een (potentiele) bezoeker.

Honeycomp-Peter-Morville

Uit deze theorie is alleen al op te maken dat er geen bepaald ‘standaard’ design is die voor iedere gebruiker van waarde is. Het is voor een bedrijf zeer belangrijk om de doelgroep volledig in kaart te brengen en de website hier op af te stemmen. Als je geen idee heeft hoe jouw doelgroep eruit ziet, wat de interesses en wensen zijn, dan zal de user-experience van jouw website vrijwel altijd negatief uitpakken.

Toch is de effectiviteit en Return on Investment moeilijk te meten van een User Experience Design.  Dit komt omdat een design voor iedereen anders is en er met een user experience design wordt ingespeeld op emotie van een gebruiker. De moeilijkheid ligt in het proberen om effecten, die subjectief van aard zijn, te kwantificeren. We moeten vertrouwen op kwalitatieve bewijzen zoals feedback, reacties etc., maar niet cijfermatig in paginabezoeken, conversiepercentage en laadsnelheid.

Jouw website dient dus in te spelen op de wensen en behoeften van jouw doelgroep. Daarnaast lijkt het zo eenvoudig, maar het beste is het testen van Optie A, Optie B, Optie C etc. Vervolgens zal er een analyse en evaluatie moeten plaatsvinden. Welke punten zijn effectief en levert een positief, kwalitatief resultaat en welke nou juist niet. Als deze punten worden samengevoegd, dan zal jouw website voldoen aan de user experience.