IA – LABELS Rogier van der Linde & Davy De Winne, 2014

UX DESIGN FRAMEWORK 2 ISO framework U BENT HIER

INFORMATIE ARCHITECTUUR 3 Onderdelen van Informatie Architectuur: 1. organisatie hiërarchie, structuur, sorteren, layout, groeperen navigatie hoofd- en submenu, deurmat, paginering, breadcrumb, zoeken labels tags, linkteksten, titels, hulpteksten, buttonteksten... ONDERWERP VAN VANDAAG

LABELS – DUIDELIJKHEID 4  vermijd vage labels als ‘Cancel’, ‘Yes’, ‘No’, ‘Ok’, ‘Submit’...

LABELS – SOFT VS HARD 5 welke versie leidde het vaakst tot een ingevuld formulier op de volgende pagina? versie A

LABELS – SOFT VS HARD 6 welke versie leidde het vaakst tot een ingevuld formulier op de volgende pagina? versie B

LABELS – SOFT VS HARD 7

8 versie A versie B welke versie leidde tot 13,6% meer bookings?  pas op voor te harde labels die te vroeg commitment vragen

LABELS – PERSOONLIJKE BENADERING 9 welke versie wordt 25% vaker ingevuld? versie Aversie B

LABELS – PERSOONLIJKE BENADERING 10

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

LABELS – WOORDKEUZE 12 versie Aversie B welke versie leidde tot de meeste reserveringen?

LABELS – WOORDKEUZE 13  gebruik termen die het dichste aansluiten bij de denkwereld van de gebruiker

LABELS – WOORDKEUZE 14  gebruik de juiste termen (een zak is voor na het winkelen, een winkelwagentje of mandje voor tijdens het winkelen)

ICONEN 15 versie A welke versie leidde tot de meeste inschrijvingen?

ICONEN 16 versie B welke versie leidde tot de meeste inschrijvingen?

ICONEN 17

ICONEN 18 versie A versie B welke versie leidde tot de meeste zoekopdrachten?

ICONEN 19

ICONEN 20

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!

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

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

TITELS 24 welke versie leidde tot de meeste ingevulde formulieren? versie A versie B

TITELS 25  regels voor labels (specificiteit, persoonlijke benadering...) gelden ook voor titels

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

OVERTUIGING 27 getuigenis ‘design for persuasion’ sociale druk competitie tijdsdruk...

OVERTUIGING 28 sociale identificatie competitie tijdsdruk

OVERTUIGING 29 welke versie leidde tot de meeste inschrijvingen? versie A versie B

OVERTUIGING 30

‘MOBILE IS DESTROYING GOOD DESIGN’ 31 Drie belangrijke basisprincipes staan momenteel onder grote druk: -vindbaarheid (discoverability) -herstel (recovery) -consistentie (consistency)

CONSISTENCY – ANDROID 32 Voorbeelden van Android

CONSISTENCY – ANDROID 33

RECOVERY – IPHONE 34

DISCOVERABILITY – WINDOWS 35

DISCOVERABILITY – WINDOWS 36

DISCOVERABILITY – ANDROID 37

DISCOVERABILITY – ANDROID 38

DISCOVERABILITY – GOOGLE MAPS 39

DISCOVERABILITY – GOOGLE MAPS 40

FORMULIEREN – CRAP 41

FORMULIEREN – CRAP - ALIGNMENT 42

FORMULIEREN – CRAP – ALIGNMENT 43

FORMULIEREN – CRAP – CONTRAST 44

FORMULIEREN – CRAP – CONTRAST 45

FORMULIEREN – CRAP – PROXIMITY & REPETITION 46

FORMULIEREN – CRAP 47