SlideShare uma empresa Scribd logo
1 de 62
Vertrouwen is teontwerpen Over de ‘geur’ van informatie Ferry den Dopper
good websites suck!
good content sucks!
Koop eenPDA ,[object Object]
Bluetooth voorroutenavigatie, eventueelingebouwde GPS-ontvanger
Grootscherm (ookvoorroutenavigatie)
Hoge batterijgebruiksduur
Prijs max. 400 euro,[object Object]
Koop eenPDA
Koop eenPDA
3-Kliks regel
Koop eenPDA
Koop eenPDA
Koop eenPDA
6 4 2 1 Stuiteren en Conversie:  Zonder:	55% Met:	11% 3 5
Koop eenprinter ,[object Object]
Kleurenprinter
Inktjet
Printen, kopiëren, scannen, faxen,[object Object]
Koop eenprinter
Koop eenprinter
Koop eenprinter
Koop eenprinter
Koop eenprinter
Koop eenprinter
Koop eenprinter
Koop eenprinter
Koop eenprinter
Koop eenprinter
Koop eenprinter
Koop eenprinter
Koop eenprinter
Koop eenprinter
31
32
Geengeur Content Bezoeker Geur
Vertrouwen in succes Zolang de geursterkerwordt…gaat men verder. Als men de geurkwijtraakt…haakt men af.
Reduceren Selecteren Valideren Afdeling Vitrine Doel content
Vindeenstudie
Vindeenstudie
Vindeenstudie
Signalen: ,[object Object]
Stuiteren
ZoekfunctieHoe herken je ‘geurtekort’? 40
50% van de mensengaat direct zoeken.
Waarvindik de opleidingen?
‘opleidingen’ Zoeken en Conversie:  Zonder:	53% Met:	30%
Let alsontwerper op: Pagina-functie Scanbaarheid en vindbaarheid: Hyperlinks Woordgebruik Context
Vitrine:  Hoe selecteerik de beste camera?
Content:  Hoe valideerikmijnkeuze?
Links Problemen: ,[object Object]
 Te veel
Verwarrend,[object Object]

Mais conteúdo relacionado

Mais de Ferry den Dopper

Interaction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsInteraction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsFerry den Dopper
 
IAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchIAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchFerry den Dopper
 
IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignIAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignFerry den Dopper
 
IAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designIAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designFerry den Dopper
 
Interaction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedInteraction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedFerry den Dopper
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationFerry den Dopper
 
Interaction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsFerry den Dopper
 
Interaction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignInteraction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignFerry den Dopper
 
CMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offCMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offFerry den Dopper
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenFerry den Dopper
 
IAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsIAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsFerry den Dopper
 
Interaction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenInteraction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenFerry den Dopper
 
Interaction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellenInteraction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellenFerry den Dopper
 
IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1Ferry den Dopper
 
Interaction Design 1.6: Usability test voorbereiden
Interaction Design 1.6: Usability test voorbereidenInteraction Design 1.6: Usability test voorbereiden
Interaction Design 1.6: Usability test voorbereidenFerry den Dopper
 
Interaction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclassInteraction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclassFerry den Dopper
 
Interaction Design 1.4: Wireframes
Interaction Design 1.4: WireframesInteraction Design 1.4: Wireframes
Interaction Design 1.4: WireframesFerry den Dopper
 
Interaction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & RequirementsInteraction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & RequirementsFerry den Dopper
 

Mais de Ferry den Dopper (20)

Interaction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsInteraction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart Defaults
 
IAD 5 - les 2 - Apps
IAD 5 - les 2 - AppsIAD 5 - les 2 - Apps
IAD 5 - les 2 - Apps
 
IAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchIAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for Touch
 
IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignIAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive Design
 
IAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designIAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile design
 
Interaction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedInteraction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisited
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form Organization
 
Interaction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form Elements
 
Interaction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignInteraction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form Design
 
CMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offCMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-off
 
IAD 2 - les 7 - Zoeken
IAD 2 - les 7 - ZoekenIAD 2 - les 7 - Zoeken
IAD 2 - les 7 - Zoeken
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minuten
 
IAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsIAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patterns
 
Interaction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenInteraction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoeren
 
Interaction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellenInteraction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellen
 
IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1
 
Interaction Design 1.6: Usability test voorbereiden
Interaction Design 1.6: Usability test voorbereidenInteraction Design 1.6: Usability test voorbereiden
Interaction Design 1.6: Usability test voorbereiden
 
Interaction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclassInteraction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclass
 
Interaction Design 1.4: Wireframes
Interaction Design 1.4: WireframesInteraction Design 1.4: Wireframes
Interaction Design 1.4: Wireframes
 
Interaction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & RequirementsInteraction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & Requirements
 

De geur van informatie

Notas do Editor

  1. Heb ikmijnnieuwe PDA binneneenpaardagen in huis.
  2. Dit was eengoedetoepassing van de 3-kliks regel. Ik was namelijk al in 2 kliks op de productpagina.Echter, in de realiteitverlooptvoorgaand scenario heel wat minder rooskleurig. De 3-kliks regel is eenfabel.
  3. Het continuheen en weerspringentussenoverzichtspagina en detailpagina kun je vergelijken met op en neerstuiteren. Zijnbezoekersgenoodzaakttestuiteren op een site, zie je meestal de conversieflinkafnemen.
  4. Et voila,een printer!Ditkosttewelwatmeerdan 3 kliks, maar met iederestap die nam, groeidemijnvertrouwendatikeengeïnformeerdebeslissingaan het nemen was.
  5. Devos. Zelfjager, maarstaatookzelf in de belangstelling
  6. …bijjachthonden.
  7. Voorbeeld:ikwilgaanstuderen en ga op zoeknaarleukebacheloropleidingen. Op de homepage (‘afdelingspagina’) reduceerik door in het opvallendeblok “Studiekeuze” tekiezenvoor de bovenste link “Bacheloropleidingen”. Nu verwachtikeenoverzicht van bacheloropleidingen.
  8. He, waarzijn de opleidingen? Ikbennog net zover van de opleidingenverwijderd. Sterkernog: op dezepaginamoetik harder zoekennaar de ‘opleidingen’ link dan op de vorigepagina. Uiteindelijkvindik de link wel.
  9. Ditmoetduseenvitrinepaginazijnwaarikmijnkeuzekanmaken. Maar hoe kanikeengoedekeuzemakenalsikalleen de opleidingsnaam, startmaand en collegegeldzie? Datwordtweerstuiteren!
  10. Signalen van geurgebrekzijn:Het meteengebruiken van de ‘terug’ knopzodra je eenpaginavoor je krijgt;StuiterenSwitchen van bladerennaarzoeken
  11. Om ‘zoeken’ even toe telichten: Erwordtwelgezegddat 50% van de mensen het liefsteengrotezoekfunctieheeftdannavigatie. Usability onderzoeklaatechterziendatmenseneerst de navigatielabelsscannenomtezien of het zoekdoeldatze in hunhoofdhebben, tegenkomen. Zoniet, dangaat de ééninderdaadzoeken, en de anderrondklikken.
  12. Voorbeeld: Als je bij de HRO op zoek bent naar “opleidingen”, is de kansaanwezigdat je de link niet direct zietstaan.
  13. De kans is reëeldat de bezoekervervolgens “opleidingen” intypt in de zoekbox.Als je moetzoekenomdat de navigatie je nietverderhelpt, valt de succeskansterug met 23%.
  14. “Lees verder” en “Klikhier” zijngeenbruikbare, laatstaantoegankelijke, hyperlinks. Mensenscannenpagina’s heel snel op kopjes en links. Zorgdusvoorbelangrijketermen in dezeelementen.
  15. BijRijkswaterstaathadden we eerst “meer…” onderaaniederecategoriestaan. Datwerktenietvooriedereen. “Alles over” + het hoofdlabelherhalenwerkteeenstukbeter.
  16. Vliegmaatschappijenspreken over tarieven. In Engelstaligereclames en banners zie je dusvaak “Low fares”.
  17. Maarmensenblijkenmassaaltezoeken op “cheap flight”, niet op “low fares”.
  18. In het Nederlandsgeldtditook: mensenwillen “goedkoop”, niet “voordelig”. Maarja, eenbeetje hotel noemtzichzelfniet “goedkoop”. Dilemma! ;-)
  19. Verkoop je netteschoenen, dan kun je volstaan met het tonen van het voor-zij-aanzicht. Hiking boots beoordeel je ookgrotendeels op het profiel van de zool. Wil je online verkopen, laatdanook de onderkantzien.
  20. Tip voorontwerpers: Ontwerp sites zonder “Loremipsum”. De aanwezigheid van triggerwords in kopjes, links, opsommingen, e.d. heeftgroteinvloed op de usability. En dat kun je niettesten met loremipsumvultekst.