Filterfunktion auf Websites

1
Filterfunktion auf Websites

• Vorlagen für die Gestaltung von Wireframes für
  Filterfunktionen (Facettennavigation, Faceted
  Search) auf der Basis von Best-Practices
• facets-stencil 1.0
• Kerstin Reinhard

2
Zusammenfassung

• Vorlage zur Gestaltung von Wireframes für
  Filterfunktionen auf Websites (auch
  Facettennavigation, Faceted Navigation, Faceted
  Search).
• Vorgegeben ist beispielhaft ein Filter für einen
  Online-Shop, der Kleidung anbietet.
• Einsatz für Papier-Prototypen Kategorien
  anpassen, ausdrucken und einzelne Elemente
  ausschneiden
• Einsatz für Wireframes in Powerpoint oder anderen
  Programmen
• Hintergrund
• Autor Kerstin Reinhard
• Diese Vorlage wurde im Rahmen einer
  Magisterarbeit an der Universität Hildesheim im
  Studiengang IIM erstellt Vergleichende
  Usability-Evaluation zur Ermittlung von
  Best-Practice-Lösungen bei Facettennavigation
• Weitere Informationen
• Zusammenfassung http//usability-toolkit.de/gesta
  ltung-von-filterfunktionen
• Magisterarbeit zum Download http//www.bookrix.de
  /_title-de-kerstin-reinhard-vergleichende-usabilit
  y-evaluation-zur-ermittlung-von-best-practice-loes
  ungen-bei-f

3
Übersicht
2b
1
Auswahlmöglichkeiten für Filter. Aktuelle Auswahl
ist jeweils hervorgehoben
2a
Anzeige der aktuellen Auswahl oberhalb des Filters
2b
4
Anzeige der aktuellen Auswahl über ein Breadcrump
3
Anzahl der Treffer in der Ergebnisliste
4
Anzeige der Ergebnisse
4
Auswahlelemente
Einfachauswahl
Mehrfachauswahl
Checkboxen
Links
Farbfelder
Links hierarchisch
Radiobuttons
Intervallauswahl
Schieberegler
Dropdown
Eingabefelder
5
Darstellung bei sehr vielen Facetten und
Ausprägungen
6
Tipps

• Einfache Interaktionsmöglichkeiten lassen sich
  durch verlinkte Folien realisieren. (siehe auch
  http//www.boxesandarrows.com/view/interactive )
• Nutzer können an der Gestaltung einer
  Filterfunktion beteiligt werden (siehe
  Magisterarbeit) Hierfür einzelne Elemente
  vorbereiten, ausdrucken und gruppieren lassen.
• Für das gleichmäßige Ausrichten der Elemente auf
  der Seite ist die Raster-Funktion (Raster und
  Führungslinien bei MS-Powerpoint oder Raster
  sichtbar bei OO-Impress) hilfreich.
• Weitere Gestaltungselemente für Wireframes von
  Websites (Stencils), etwa Menüs, Drop-Downs,
  Breadcrumps, finden sich unter
• Übersicht http//iainstitute.org/tools
• Stencil für Powerpoint http//www.michaelgaigg.co
  m/blog/2009/01/23/powerpoint-wireframe-stencils-as
  -free-download/
• Stencil für Powerpoint http//www.paulhibbitts.co
  m/wireframe-stencils-for-powerpoint.html
• http//www.istartedsomething.com/20071018/powerpoi
  nt-prototype-toolkit-01/ (speziell Powerpoint
  2007)