Succesvol dankzij het juiste designIlse Kroes | UX-designer van Vevida.

1

Reden dat je website er is. Informatie delen Online vertellen wat voor soort bedrijf je hebt. Zoveel mogelijk producten verkopen.

Einddoel meer gerichter omschrijven Bijv. “Veel producten verkopen”

Bezoekers het product laten vinden dat ze willen kopen.Bezoekers verschillende producten laten bekijken en laten kiezen wat ze willen kopen.

Lijst het in en hang het op in de WC.

2

Iedereen? Te grote groep15-jarige jongen klikt anders door website dan 70-jarige vrouw.Samen groeperen op basis van eigenschappen.

Bijv. Geïnteresseerd in voetbal en tussen de 21 t/m 30 jaarJe hebt waarschijnlijk al een beeld van deze groep mensen. (Voorgevoel) Sommige mensen weten zelfs hoe deze mensen denken en hoe de bezoekers de website willen gebruiken

3

Klopt niet: Sommige mensen weten zelfs hoe deze mensen denken en hoe de bezoekers de website willen gebruikenElke keer als je zegt “Ik denk dat de bezoeker zus en zo zal doen” doe je een aannameAannames zijn op zich niet verkeerd, maar wel als je je hele webdesign er op baseert. Dan is het bad practice.

4

• Aanname startpunt• Inleven • In hun schoenen staan• Het gesprek aangaan. (gesprek face to face, enquête of telefoongesprek.)

• Zitten ze veel op Social Media? • Hebben ze een gezin?• Zijn ze gelovig?• Ga ergens heen waar de doelgroep te vinden is. • Bestaat er al onderzoek naar deze groep?• Stel gericht vragen, zodat je niet te veel onderzoek doet. (rode lijn in je gesprekken)• Google eens naar “doelgroep segmenteren”, “diepte interview” en “marketing

enquête”.

5

• Je weet nu voor wie en waarvoor je de website maakt. • Paar punten waar je rekening mee kunt houden bij het aanpassen van je website. • Flow

• Hoe soepel kan je bezoeker zijn doel bereiken• (te)veel klikken?• Is het veel gedoe om informatie te vinden? • Hoe komen mensen op je website?• Zorg voor duidelijke termen • Vind je een probleem in de flow? Kijk dan eens hoe anderen het doen als je er niet

uitkomt

6

Dit is een zeer simpele flowchart van de fandag pagina op Vevida.academy. Door zoiets als dit te maken kun je beter snappen hoe mensen door de pagina klikken.Facebook post met “schrijf je nu in”. Waarom niet gelijk naar de inschrijfpagina?

Twee opties die er zijn voor een facebook bericht:Facebook bericht event beschrijving en link naar de fandag pagina waar het event uitgebreider wordt toegelicht Facebook bericht met event beschrijving en link naar inschrijf pagina. Welke van de twee zijn de juist keuze.

7

• Duidelijk menu ongeacht wie doelgroep is. Uitzondering op de regel. • Navigatie kun je verbeteren met

• Broodkruimels• Sticky menu • Uitgebreide zoekfunctie

• Geen google plugin• Gebruik tags en categorieën als het kan.

8

• Mensen kijken op een pagina• Van links naar rechts en boven naar onder• 2 tot 4 sec om een indruk te krijgen van een pagina. • Weinig scrollen in 2 tot 4 sec• Zet het belangrijkste bovenaan. • Neem een lay-out waaraan mensen gewend zijn.

9

• Toegankelijk voor mobiel• Let op termen als “mobile ready”, “mobile-first” of “responsive”• Mobiele versie is iets wat verwacht word. • Als een website mobiel geschikt is deze meestal ook geschikt voor tablet.

10

• Invloed op de sfeer van website. • Wat wil je communiceren

• Kies kleuren met een kleurpallet zie coolors.co• Test kleuren op verschillende beeldschermen. • Bijv. Oranje kan een vies poepkleurtje worden.

• Contrast in licht en donker• Je hebt ook contrast in kleuren zelf.

• Deze kun je vinden in een kleurencirkel. De kleuren die tegenover elkaar staan, zijn contrastkleuren van elkaar. Bijv. Paars en geel. Beide kleuren worden er “feller” door.

• Bij de keurslager hebben ze altijd van die groene frummeltje bij het vlees liggen. Hierdoor lijkt het vlees roder. Contrastkleuren rood en groen

11

• Dit is een kunst apart. • Hanteer de volgende regels dan zit je goed

1. Sierlijke lettertype gebruiken voor titels en koppen, maar niet in platte tekst. 2. Gebruik rustig lettertype voor de platte tekst, zoals Helvetica of Arial.3. Gebruik geen italic dit is slecht leesbaar. 4. Gebruik regelafstand op de leesbaarheid te vergroten 5. Zorg voor contrast en een rustige achtergrond.6. Gebruik niet meer dan 2 verschillende lettertypen. 7. Rustig voor de ogen door bijv. niet zwart als lettertype kleur te gebruiken maar een

tint donkergrijs.

12

• Zware bestanden• Op computer oké • Op mobiel niet.

• Als het echt niet anders kan laden animatie• Save for web optie in photoshop. • Gebruik bij foto’s PNG en grote kleur vakken Gif

13

• Laat links eruitzien als links. • Mensen zijn te bekend met hoe links eruitzien. • Soms kikken mensen meer op een link dan een button die ernaast staat

14

• Perfecte call to action• Laat een button eruitzien als een button.

• Je kunt het indrukken• De Normale• De Hover• De Klik• Duidelijke termen • Kleuren en Icon’s om betekenis te ondersteunen• Plaatsing van button waar mensen ze verwachten

• Bijv. Opslaan button altijd recht.

15

• Niet doen.• Niet op homepage• Niet op landing page• Alleen als het echt nodig is en mensen het verwachten.

• Bijv. product details in een webwinkel.

16

• Laat mensen van je doelgroep een kleine test doen en kijk over hun schouder mee hoe ze dit doen.

• Als mensen je om hulp vragen weet je dat je dit moet verbeteren. • +/- 10 deelnemers

17

Bedankt voor jullie aandacht.

18