Download de presentatie
De presentatie wordt gedownload. Even geduld aub
1
IA – LABELS Rogier van der Linde & Davy De Winne, 2014
2
UX DESIGN FRAMEWORK 2 ISO 9241-210 framework U BENT HIER
3
INFORMATIE ARCHITECTUUR 3 Onderdelen van Informatie Architectuur: 1. organisatie hiërarchie, structuur, sorteren, layout, groeperen... 2. navigatie hoofd- en submenu, deurmat, paginering, breadcrumb, zoeken... 3. labels tags, linkteksten, titels, hulpteksten, buttonteksten... ONDERWERP VAN VANDAAG
4
LABELS – DUIDELIJKHEID 4 vermijd vage labels als ‘Cancel’, ‘Yes’, ‘No’, ‘Ok’, ‘Submit’...
5
LABELS – SOFT VS HARD 5 welke versie leidde het vaakst tot een ingevuld formulier op de volgende pagina? versie A
6
LABELS – SOFT VS HARD 6 welke versie leidde het vaakst tot een ingevuld formulier op de volgende pagina? versie B
7
LABELS – SOFT VS HARD 7
8
8 versie A versie B welke versie leidde tot 13,6% meer bookings? pas op voor te harde labels die te vroeg commitment vragen
9
LABELS – PERSOONLIJKE BENADERING 9 welke versie wordt 25% vaker ingevuld? versie Aversie B
10
LABELS – PERSOONLIJKE BENADERING 10
11
LABELS – PERSOONLIJKE BENADERING 11 probeer het persoonlijk te maken: spreek vanuit het standpunt van de bezoeker, dus my... i.p.v. your...; get my... i.p.v. download...; ‘personalize’ impliceert bezit en dus betrokkenheid
12
LABELS – WOORDKEUZE 12 versie Aversie B welke versie leidde tot de meeste reserveringen?
13
LABELS – WOORDKEUZE 13 gebruik termen die het dichste aansluiten bij de denkwereld van de gebruiker
14
LABELS – WOORDKEUZE 14 gebruik de juiste termen (een zak is voor na het winkelen, een winkelwagentje of mandje voor tijdens het winkelen)
15
ICONEN 15 versie A welke versie leidde tot de meeste inschrijvingen?
16
ICONEN 16 versie B welke versie leidde tot de meeste inschrijvingen?
17
ICONEN 17
18
ICONEN 18 versie A versie B welke versie leidde tot de meeste zoekopdrachten?
19
ICONEN 19
20
ICONEN 20
21
ICONEN 21 variant op verkeerd gebruik van iconen: verwachten dat de gebruiker op de afbeelding klikt om details te bekijken -> een CTA is altijd een tekst!
22
ICONEN 22 voordelen van iconen in een GUI -plaatsbesparend -makkelijk aanklikbaar -snel herkenbaar -visueel aangenaam nadelen: -universele iconen zijn zeldzaam -steunen op herkenning en zijn dus minder geschikt voor eerder sporadisch gebruikte toepassingen als websites
23
ICONEN 23 als je ze gebruikt: -voorzie iconen van tekstlabels -hou ze grafisch simpel; beperk details -zie ze vooral als grafisch extraatje, niet als afdoende navigatiemiddel -> een woord zegt meer dan 1000 beelden
24
TITELS 24 welke versie leidde tot de meeste ingevulde formulieren? versie A versie B
25
TITELS 25 regels voor labels (specificiteit, persoonlijke benadering...) gelden ook voor titels
26
SLAGZIN 26 ook tagline genoemd; vat je core business kort en krachtig samen maximaal twee zinnen en 10 woordentwee zinnen en 10 woorden indien meer nodig: overweeg een bijkomende korte tekst eronder
27
OVERTUIGING 27 getuigenis ‘design for persuasion’ sociale druk competitie tijdsdruk...
28
OVERTUIGING 28 sociale identificatie competitie tijdsdruk
29
OVERTUIGING 29 welke versie leidde tot de meeste inschrijvingen? versie A versie B
30
OVERTUIGING 30
31
‘MOBILE IS DESTROYING GOOD DESIGN’ 31 Drie belangrijke basisprincipes staan momenteel onder grote druk: -vindbaarheid (discoverability) -herstel (recovery) -consistentie (consistency)
32
CONSISTENCY – ANDROID 32 Voorbeelden van Android
33
CONSISTENCY – ANDROID 33
34
RECOVERY – IPHONE 34
35
DISCOVERABILITY – WINDOWS 35
36
DISCOVERABILITY – WINDOWS 36
37
DISCOVERABILITY – ANDROID 37
38
DISCOVERABILITY – ANDROID 38
39
DISCOVERABILITY – GOOGLE MAPS 39
40
DISCOVERABILITY – GOOGLE MAPS 40
41
FORMULIEREN – CRAP 41
42
FORMULIEREN – CRAP - ALIGNMENT 42
43
FORMULIEREN – CRAP – ALIGNMENT 43
44
FORMULIEREN – CRAP – CONTRAST 44
45
FORMULIEREN – CRAP – CONTRAST 45
46
FORMULIEREN – CRAP – PROXIMITY & REPETITION 46
47
FORMULIEREN – CRAP 47
Verwante presentaties
