Interaction Design 102 Vragen of feedback? @ferrydendopper

Metadata / facets

Interaction Design 102 Vragen of feedback? @ferrydendopper

Wat is metadata / een facet?

Een aspect / kenmerk / eigenschap Een manier om een object aan te

duiden Bruikbaar als selectievariabele

Interaction Design 102 Vragen of feedback? @ferrydendopper

Wat is een facet?

Interaction Design 102 Vragen of feedback? @ferrydendopper

Facet criteria

Wanneer is een facet geschikt voor navigatie?

Onderscheidbaar in meerdere componenten;

Relevant voor het doel; Onherroepelijk, definitief bepaald; Permanent; Discreet / onderling uitsluitend; En zo gaat de lijst nog even door...

Interaction Design 102 Vragen of feedback? @ferrydendopper

Wat zijn facets van…

Interaction Design 102 Vragen of feedback? @ferrydendopper

Wat maakt metadata mogelijk?

• Automatisch genereren van alfabetische index

• Dynamische presentatie van associatieve links

• Zoeken op specifieke velden• Geavanceerd filteren en sorteren

Interaction Design 102 Vragen of feedback? @ferrydendopper

Usability van facets

Ontdekken gebruikers de facetten?

Zijn ze gemakkelijk te gebruiken?• Waarden kiezen• Controleren wat ik heb gekozen• Waarden aanpassen

Interaction Design 102 Vragen of feedback? @ferrydendopper

Waarden kiezen

Bekende interface elementen verkleinen de leercurve voor nieuwe interacties• Simpele tekst links• Drop-down menu’s

Nummers helpen gebruikers vooraf het effect te zien van hun keuzes.

Interaction Design 102 Vragen of feedback? @ferrydendopper

Waarden kiezen

Als er teveel waarden zijn, laat er dan slechts een paar zien en link naar de rest• Sorteer numeriek als kwantificeerbaar (bv.

resolutie)• Sorteer anders op grootte of populariteit (bv. merk)

Interaction Design 102 Vragen of feedback? @ferrydendopper

Waarden kiezen

Ondersteun de selectie van meerdere waarden waar relevant• Bv. merk, features

Interaction Design 102 Vragen of feedback? @ferrydendopper

Welke facets heb ik gekozen?

Breadcrumbs: de bekende aanpak• Misschien niet prominent genoeg om heldere feedback

te geven• Vaak te ver vandaan van waar ik net geklikt heb.• Inconsistent met gebruikersverwachtingen m.b.t.

breadcrumb gedrag

Interaction Design 102 Vragen of feedback? @ferrydendopper

Welke facets heb ik gekozen?

Contextueel dichtbij de facets controls plaatsen

Interaction Design 102 Vragen of feedback? @ferrydendopper

Welke facets heb ik gekozen?

Gebruik bekende(re) interface elementen• Simpele lijst• Checkboxes• Drop-down menu’s

All prices

All manufacturers

Select your options:

All categories

All platforms

All manufacturers

Select your options:

All categories

All platforms

$100 or less $100 or less

All manufacturers

Select your options:

All categories

All platforms

Interaction Design 102 Vragen of feedback? @ferrydendopper

Welke facets heb ik gekozen?

Behandel een zoekterm als de andere facets

Interaction Design 102 Vragen of feedback? @ferrydendopper

Gekozen facets aanpassen

Zorg dat gebruikers hun selectie kunnen aanpassen• Breadcrumbs hebben hier een nadeel

Pas op voor “X”

Laat gebruikers er niet te hard voor werken

Interaction Design 102 Vragen of feedback? @ferrydendopper

Welke facets gebruiken?

Welke facets zou je moeten tonen? Analyseer gebruik per categorie (log files) Minimaliseer ‘information overload’

Interaction Design 102 Vragen of feedback? @ferrydendopper

Volgorde van facets

In welke volgorde moeten ze verschijnen?• Naar gebruik• Naar type (bv. alle technische specs bij elkaar)• Alfabetisch (alleen als laatste redmiddel)

Consistent over alle categorieën?• Taak of categorie geschiktheid belangrijker dan site-brede

consistentie• Voorbeeld: “Platform” facet in Laptops vs. Cables

Interaction Design 102 Vragen of feedback? @ferrydendopper

Waarden

Vaak gebruikt: Waarden als ranges Komt vaak niet overeen met gebruik

• “Ik wil minder dan 200 euro besteden”

• “Ik wil ten minste een 12-inch scherm”

• “Ik wil ten minste een 2 GHz processor”

CNET

Crutchfield

CompUSA

Interaction Design 102 Vragen of feedback? @ferrydendopper

Waarden

Gebruik minimums of maximums waar het gepast is

Interaction Design 102 Vragen of feedback? @ferrydendopper

Sorteren op facets

Interaction Design 102 Vragen of feedback? @ferrydendopper

Sorteren op facets

Interaction Design 102 Vragen of feedback? @ferrydendopper

Voorbeeld

Ontdekbaarheid Plaatsing aan

linkerkant Prominentie met kleur,

drop-down menu’s en beweging

Connectie met resultaten door kleur en vorm

Interaction Design 102 Vragen of feedback? @ferrydendopper

Voorbeeld

Usability

Waarden kiezen met bekende drop-downs

● Nummers, ‘more’ link

Selecties controleren via bekende checkboxes, contextueel geplaatst

● Incl. zoektermen en aanbiedingen (clearance items)

Waarden aanpassen door uit te vinken

Interaction Design 102 Vragen of feedback? @ferrydendopper

Oefening: Faceted navigatie voor HR?

Interaction Design 102 Vragen of feedback? @ferrydendopper

Vragen? Feedback?

f.den.dopper@hr.nl

@ferrydendopper