SlideShare ist ein Scribd-Unternehmen logo
1 von 31
Designing Labels




Interaction Design 202    Vragen of feedback?   @ferrydendopper
Wat hebben we in de voorgaande lessen al
        besproken over labeling?




Interaction Design 202              Vragen of feedback?   @ferrydendopper
Ambiguïteit


        Trap
        1. Schop; iem een ~ geven
        2. Trede; het kind kroop op de zesde ~
        3. Samenstel van treden waarlangs men een hoger of
           lager gelegen plaats bereikt; de ~ oplopen
        4. Trapladder; keuken~
        5. Graad van moeilijkheid, opklimming, stadium; hij
                bereikte de hoogste ~; drie~sraket
        6. Enz.



Interaction Design 202                               Vragen of feedback?   @ferrydendopper
Organisatieschema’s


         Exacte schema’s:
               • Alfabetisch
               • Chronologisch
               • Geografisch

         Ambiguë schema’s:
               •   Onderwerp
               •   Taak/doel
               •   Doelgroep
               •   Metafoor
               •   Hybride



Interaction Design 202           Vragen of feedback?   @ferrydendopper
Interaction Design 202   Vragen of feedback?   @ferrydendopper
Interaction Design 202   Vragen of feedback?   @ferrydendopper
Interaction Design 202   Vragen of feedback?   @ferrydendopper
Don’t Panic!


        “Your labels will never be perfect.”

        “If it sounds to you like labeling is an art rather
        than a science, you’re absolutely correct.”


        “There are no rules, only guidelines.”


        Morville & Rosenfeld



Interaction Design 202                     Vragen of feedback?   @ferrydendopper
Hoe maak je labels meer representatief
       en minder ambigu?

         Focus!
          Hoe specifieker je scope (doelgroep, doelen,
          inhoud), hoe meer je het aantal mogelijke
          perspectieven op wat een label betekent.




Interaction Design 202                 Vragen of feedback?   @ferrydendopper
Hoe maak je labels meer representatief
       en minder ambigu?

         Ontwerp labelsystemen, geen losse labels

               • Consistentie             > Voorspelbaarheid > Gemakkelijker te leren

                            Stijl: bv. formeel / informeel
                            Syntax: werkwoorden / z.nw, vragen / losse woorden
                            ‘Korreligheid’ (granularity): restaurants of Burger Kings?
                            Dekkingsgraad: ontstaat er geen gat in het systeem?
                            Publiek: wat als “buikpijn” en “lymfoom” naast elkaar
                             staan?




Interaction Design 202                                         Vragen of feedback?   @ferrydendopper
Bronnen voor labels


         Zoeklog analyse
         Card sorting
         Category Agreement Analysis
             http://www.uie.com/articles/caa/

             Item         Hoofdcategorie        Subcategorie
             USB-sticks   …………………                ………………



         Bij vergelijkbare / concurrerende sites kijken



Interaction Design 202                                  Vragen of feedback?   @ferrydendopper
Kijk eens bij de buren




Interaction Design 202          Vragen of feedback?   @ferrydendopper
www.boddefd.nl
       Kan jij het beter?




Interaction Design 202      Vragen of feedback?       @ferrydendopper
www.vvfd.nl
       Is dit beter? Kan het nog beter?




Interaction Design 202            Vragen of feedback?    @ferrydendopper
www.vvfd.nl




Interaction Design 202   Vragen of feedback?    @ferrydendopper
www.vvfd.nl




Interaction Design 202   Vragen of feedback?    @ferrydendopper
www.vvfd.nl




Interaction Design 202   Vragen of feedback?    @ferrydendopper
www.vvfd.nl




Interaction Design 202   Vragen of feedback?    @ferrydendopper
www.vvfd.nl




Interaction Design 202   Vragen of feedback?    @ferrydendopper
Oefening: Beoordeel en verbeter

        • Analyseer de navigatie en labeling van Unilogic.nl;
        • Ontwerp iets beters.

        Tijd: 20 minuten
        Werk in tweetallen


        • Presenteer je ontwerp aan een ander tweetal;
        • Creëer samen een definitief ontwerp.

        Tijd: 20 minuten
        Werk in viertallen


Interaction Design 202                     Vragen of feedback?   @ferrydendopper
Interaction Design 202   Vragen of feedback?   @ferrydendopper
Interaction Design 202   Vragen of feedback?   @ferrydendopper
Interaction Design 202   Vragen of feedback?   @ferrydendopper
Interaction Design 202   Vragen of feedback?   @ferrydendopper
Interaction Design 202   Vragen of feedback?   @ferrydendopper
Interaction Design 202   Vragen of feedback?   @ferrydendopper
Interaction Design 202   Vragen of feedback?   @ferrydendopper
Interaction Design 202   Vragen of feedback?   @ferrydendopper
Interaction Design 202   Vragen of feedback?   @ferrydendopper
Interaction Design 202   Vragen of feedback?   @ferrydendopper
Vragen? Feedback?
        f.den.dopper@hr.nl

        @ferrydendopper




Interaction Design 202       Vragen of feedback?   @ferrydendopper

Weitere ähnliche Inhalte

Ähnlich wie IAD 2 - les 6 - Labeling

Interaction Design 1.4: Wireframes
Interaction Design 1.4: WireframesInteraction Design 1.4: Wireframes
Interaction Design 1.4: Wireframes
Ferry den Dopper
 
Interaction Design 1.1: User Centered Design
Interaction Design 1.1: User Centered DesignInteraction Design 1.1: User Centered Design
Interaction Design 1.1: User Centered Design
Ferry den Dopper
 
CMD Interaction Design - Y1 Q3 les 2 - Form Elements
CMD Interaction Design - Y1 Q3 les 2 - Form ElementsCMD Interaction Design - Y1 Q3 les 2 - Form Elements
CMD Interaction Design - Y1 Q3 les 2 - Form Elements
Ferry den Dopper
 
Session 2, creating brand value 2012 2013
Session 2, creating brand value 2012 2013Session 2, creating brand value 2012 2013
Session 2, creating brand value 2012 2013
John Verhoeven
 
Personal branding Hanzehogeschool 2010
Personal branding Hanzehogeschool 2010Personal branding Hanzehogeschool 2010
Personal branding Hanzehogeschool 2010
Tom Scholte
 

Ähnlich wie IAD 2 - les 6 - Labeling (11)

Interaction Design 1.4: Wireframes
Interaction Design 1.4: WireframesInteraction Design 1.4: Wireframes
Interaction Design 1.4: Wireframes
 
IAD 2 - les 7 - Zoeken
IAD 2 - les 7 - ZoekenIAD 2 - les 7 - Zoeken
IAD 2 - les 7 - Zoeken
 
Interaction Design 1.1: User Centered Design
Interaction Design 1.1: User Centered DesignInteraction Design 1.1: User Centered Design
Interaction Design 1.1: User Centered Design
 
De weg naar online succes: creëer je eigen pad
De weg naar online succes: creëer je eigen padDe weg naar online succes: creëer je eigen pad
De weg naar online succes: creëer je eigen pad
 
Genius Shortcuts voor sprekers : PSA Belgiumsa Belgium Bert Verdonck Nl
Genius Shortcuts voor sprekers : PSA Belgiumsa Belgium   Bert Verdonck NlGenius Shortcuts voor sprekers : PSA Belgiumsa Belgium   Bert Verdonck Nl
Genius Shortcuts voor sprekers : PSA Belgiumsa Belgium Bert Verdonck Nl
 
Virtuele assistenten
Virtuele assistentenVirtuele assistenten
Virtuele assistenten
 
Virtuele assistenten
Virtuele assistentenVirtuele assistenten
Virtuele assistenten
 
CMD Interaction Design - Y1 Q3 les 2 - Form Elements
CMD Interaction Design - Y1 Q3 les 2 - Form ElementsCMD Interaction Design - Y1 Q3 les 2 - Form Elements
CMD Interaction Design - Y1 Q3 les 2 - Form Elements
 
Session 2, creating brand value 2012 2013
Session 2, creating brand value 2012 2013Session 2, creating brand value 2012 2013
Session 2, creating brand value 2012 2013
 
Personal branding Hanzehogeschool 2010
Personal branding Hanzehogeschool 2010Personal branding Hanzehogeschool 2010
Personal branding Hanzehogeschool 2010
 
Online Dialogue Donderdag #6
Online Dialogue Donderdag #6Online Dialogue Donderdag #6
Online Dialogue Donderdag #6
 

Mehr von Ferry 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 Touch
Ferry den Dopper
 
IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignIAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive Design
Ferry 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 design
Ferry 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 revisited
Ferry den Dopper
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form Organization
Ferry den Dopper
 
Interaction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form Elements
Ferry 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 Design
Ferry 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-off
Ferry den Dopper
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minuten
Ferry den Dopper
 
IAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieIAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatie
Ferry 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 patterns
Ferry 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 uitvoeren
Ferry 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 opstellen
Ferry 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 1
Ferry 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 voorbereiden
Ferry den Dopper
 
Interaction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclassInteraction Design 1.5: Wireframes masterclass
Interaction Design 1.5: Wireframes masterclass
Ferry den Dopper
 
Interaction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & RequirementsInteraction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & Requirements
Ferry den Dopper
 
IAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich InteractionIAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich Interaction
Ferry den Dopper
 
IAD 4 - les 2+3 - Rich Interaction
IAD 4 - les 2+3 - Rich InteractionIAD 4 - les 2+3 - Rich Interaction
IAD 4 - les 2+3 - Rich Interaction
Ferry den Dopper
 

Mehr von Ferry den Dopper (20)

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
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minuten
 
IAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieIAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatie
 
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.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & RequirementsInteraction Design 1.3: Scenarios & Requirements
Interaction Design 1.3: Scenarios & Requirements
 
IAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich InteractionIAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich Interaction
 
IAD 4 - les 2+3 - Rich Interaction
IAD 4 - les 2+3 - Rich InteractionIAD 4 - les 2+3 - Rich Interaction
IAD 4 - les 2+3 - Rich Interaction
 

IAD 2 - les 6 - Labeling

  • 1. Designing Labels Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 2. Wat hebben we in de voorgaande lessen al besproken over labeling? Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 3. Ambiguïteit Trap 1. Schop; iem een ~ geven 2. Trede; het kind kroop op de zesde ~ 3. Samenstel van treden waarlangs men een hoger of lager gelegen plaats bereikt; de ~ oplopen 4. Trapladder; keuken~ 5. Graad van moeilijkheid, opklimming, stadium; hij bereikte de hoogste ~; drie~sraket 6. Enz. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 4. Organisatieschema’s  Exacte schema’s: • Alfabetisch • Chronologisch • Geografisch  Ambiguë schema’s: • Onderwerp • Taak/doel • Doelgroep • Metafoor • Hybride Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 5. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 6. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 7. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 8. Don’t Panic! “Your labels will never be perfect.” “If it sounds to you like labeling is an art rather than a science, you’re absolutely correct.” “There are no rules, only guidelines.” Morville & Rosenfeld Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 9. Hoe maak je labels meer representatief en minder ambigu?  Focus! Hoe specifieker je scope (doelgroep, doelen, inhoud), hoe meer je het aantal mogelijke perspectieven op wat een label betekent. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 10. Hoe maak je labels meer representatief en minder ambigu?  Ontwerp labelsystemen, geen losse labels • Consistentie > Voorspelbaarheid > Gemakkelijker te leren  Stijl: bv. formeel / informeel  Syntax: werkwoorden / z.nw, vragen / losse woorden  ‘Korreligheid’ (granularity): restaurants of Burger Kings?  Dekkingsgraad: ontstaat er geen gat in het systeem?  Publiek: wat als “buikpijn” en “lymfoom” naast elkaar staan? Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 11. Bronnen voor labels  Zoeklog analyse  Card sorting  Category Agreement Analysis http://www.uie.com/articles/caa/ Item Hoofdcategorie Subcategorie USB-sticks ………………… ………………  Bij vergelijkbare / concurrerende sites kijken Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 12. Kijk eens bij de buren Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 13. www.boddefd.nl Kan jij het beter? Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 14. www.vvfd.nl Is dit beter? Kan het nog beter? Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 15. www.vvfd.nl Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 16. www.vvfd.nl Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 17. www.vvfd.nl Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 18. www.vvfd.nl Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 19. www.vvfd.nl Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 20. Oefening: Beoordeel en verbeter • Analyseer de navigatie en labeling van Unilogic.nl; • Ontwerp iets beters. Tijd: 20 minuten Werk in tweetallen • Presenteer je ontwerp aan een ander tweetal; • Creëer samen een definitief ontwerp. Tijd: 20 minuten Werk in viertallen Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 21. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 22. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 23. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 24. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 25. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 26. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 27. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 28. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 29. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 30. Interaction Design 202 Vragen of feedback? @ferrydendopper
  • 31. Vragen? Feedback? f.den.dopper@hr.nl @ferrydendopper Interaction Design 202 Vragen of feedback? @ferrydendopper

Hinweis der Redaktion

  1. In het Nederlandsgeldtditook: mensenwillen “goedkoop”, niet “voordelig”. Maarja, eenbeetje hotel noemtzichzelfniet “goedkoop”. Dilemma! ;-)