1. Part 2 - User Perception
Lees: hoe bekijkt een bezoeker mijn
site?
Desiree van der Horst
2. 2
Intro
Fingerspitz
& Me
Allround online marketing bureau - Online gedragsmarketeer
Strategie
Why, how, what?
Social media
Campagnes, community management,
social monitoring, webcare
Conversie & Analytics
Analytics, A/B testing, tag manager
implementations, usability research
Marketing automation
Lead generation & nurturing, e-mail
marketing, implementation and training
Online adverteren
Google, social advertising,
remarketing, programmatic buying
Zoekmachine optimalisatie
Technical advice, link management,
content creation
3. 3
Intro
User Perception - Guidelines
Er is niets dat altijd werkt
en
Er is niets dat nooit zal werken
Het blijven guidelines. Maar deze guidelines leren ons
wel anders kijken naar onze eigen websites, aangezien
we allemaal tunnelvisie hebben.
Bewust Bekwaam aan het eind van de avond :)
5. 5
Guidelines overview
User Perception - Guidelines
Usability
This website is easy to use
It is easy to navigate within the website
Credibility (Trust)
I feel comfortable purchasing from this website
I feel confident conducting business with this website
6. 6
Guidelines overview
User Perception - Guidelines
Appearance
I found the website to be attractive
The website has a clean and simple presentation
Clarity
I clearly understand why I should buy from this website
instead of its competitors.
7. Appearance
I found the website to be attractive
The website has a clean and simple presentation
8. 8
Appearance
Appearance
Bezoekers hebben binnen 1/20ste van een seconde een
mening gevormd of de site mooi is of niet.
Visueel complexe sites worden minder mooi beoordeeld
Waarom dan?
Cognitive load -> Hoe meer complexe elementen, hoe
harder ons brein moet werken om alles te verwerken.
En we zijn lui :)
11. 11
Appearance
Appearance
Yes!
1) Vermijd loze extra design elementen die de cognitive
load verhogen. Minder belangrijk -> naar onderen
2) Zorg voor voldoende witruimte tussen de verschillende
blokken, zodat duidelijk is welke thumbnails & tekst bij
welk blok hoort.
3) Als je een promotie hebt, maak visueel duidelijk bij welk
blok deze hoort of als deze site-wide geldt, dat het juist
niet bij een blok past.
18. 18
Appearance
Appearance
Call to actions werken…
...Als ze worden gezien
...Als de volgende stap erin duidelijk is
...Als de volgende stap waarde heeft voor de bezoeker
22. 22
Appearance
Appearance
Say Yes to the call to action!
1) Visueel prominent:
- kleur contrast met achtergrond
- witruimte eromheen
- hoog in de visuele hiërarchie (een van de eerste
elementen die ze moeten zien)
- boven de fold
2) Gebruik buttons en geen links
3) Als je een tweede (of meerdere) CTA’s gebruikt, maak
ze ondergeschikt
4) Highlight ze met visuele cues (pijlen, lijnen, kijkrichting)
24. 24
Clarity
Clarity
Bezoekers moeten al snel kunnen ontdekken:
1) Where to buy what they’re looking for
2) What can be bought on your site
3) Why they should buy from you and not the competitor
Wat is de boodschap van je website?
In tekst, CTA’s & design
25. 25
Clarity
Clarity
Aandacht
In 2000: 12 sec
In 2017: 8 sec
Ter vergelijking… Goudvis -> 9 sec
We zijn dus niet alleen lui, maar ook snel afgeleid en
onthouden niks. Dus...
GET TO THE POINT
26. 26
Clarity
Clarity
Yes!
1) Schrap elk woord wat niet noodzakelijk is
2) Gebruik geen vage termen, wees specifiek
‘De beste op het gebied van…’ vs ‘hoogste beoordeling
in de categorie ...’
‘Snelste bezorging’ vs ‘bezorging in x-dagen’
‘Goedkoopste plannen’ vs ‘vanaf €1.99’
3) Geen buzzwords, vakjargon of moeilijke termen.
30. 30
Clarity
Clarity
CTA boodschap
1) CTA boodschap moet binnen 5 sec gelezen en begrepen
zijn
2) Vraag niet teveel
3) What’s in it for me? Promoot wat bezoekers krijgen en
niet verliezen (‘Get shoes’ vs ‘pay here’)
33. 33
Clarity
Clarity
Design
Alles wat afleid -> schrappen.
- Hele grote navigaties
- Afleidende kleuren en fonts
- Bewegende images (sliders)
- Teveel CTA’s in high contrasting kleuren
- Elementen die op advertenties lijken
- Social media icons op prime real estate
FOCUS -> Primary goal op elke pagina?
48. 48
Usability
Usability
Content Menu
- Moet ondergeschikt zijn aan transactional menu. Vaak
rechts bovenin of in de footer.
- Als je meerdere talen hebt -> rechts bovenin (met vlag)
- Shopping cart moet tonen hoeveel producten erin zitten
& totale prijs
:( :)
52. 52
Usability
Usability
Transactional Menu
- Als een subcategorie onder meerdere categorieën valt,
plaats ze onder beiden.
- Plaats je meest gebruikte categorieën als content op je
homepage
- Highlight speciale categorieën zoals ‘Nieuw’ ‘Sale’ ‘Top
10’
55. 55
Usability
Usability
Sliders
- NO MORE SHEEPING.
- Afleidend, geen
controle (auto-rotating)
- Er kan maar 1 ding het
belangrijkst zijn
Indien écht écht écht écht geen andere mogelijkheid, omdat anders de website ontploft:
- langzaam rotaten (5-7 sec)
- rotatie moet stoppen bij muis hoover
- gemakkelijk zelf te bedienen via bolletjes/pijltjes
- laat ze er niet uitzien als een banner/advertentie
56. 56
Usability
Usability
Zoekfunctie
- Prominente plek, centraal of bovenin rechts
- Plaats iets met ‘zoeken’ erbij/erin
- Maak de zoekfunctie sticky
- Autocomplete
- Spelfouten & Dialect begrijpen
- Met ‘Enter’ ook kunnen zoeken, niet alleen muis
- Maak zoeken in categorieën mogelijk
59. info@fingerspitz.nl
+31 (0)76 – 763 06 00
Reduitlaan 29
4814 DC Breda
Any questions after this presentations? I’m more
than happy to answer them.
desiree@fingerspitz.nl
076-7630600
linkedin.com/in/desireevanderhorst
