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

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/gestaltung-von-filterfunktionen Magisterarbeit zum Download: http://www.bookrix.de/_title-de-kerstin-reinhard-vergleichende-usability-evaluation-zur-ermittlung-von-best-practice-loesungen-bei-f

Anzeige der aktuellen Auswahl oberhalb des Filters Übersicht 2b Ihre Auswahl Für Wen? Damen Herren Kinder Preis: 20-60 € Suche verfeinern Marke Marke X Marke Y Marke Z  Damen > Marke X > Marke Z > 20-60 € Ihre Suche ergab X von Y Treffern Ergebnisliste Alles zurücksetzen 20-60 € 20 60 2a 3 1 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

Auswahlelemente Einfachauswahl Mehrfachauswahl  Intervallauswahl Links Checkboxen Für Wen? Damen Herren Kinder Für Wen? Damen Herren Kinder Marke Marke X Marke Y Marke Z Marke Marke X Marke Y Marke Z  Links hierarchisch Farbfelder Für Wen? Damen Hosen Röcke Für Wen? Damen Hosen Röcke Farbe Farbe Radiobuttons Intervallauswahl Für Wen? Damen Herren Kinder Für Wen? Damen Herren Kinder Schieberegler Preis 100 Preis 20-60 € 20 60 Dropdown Für Wen? Herren Eingabefelder Preis bis Filtern Preis 20-60 € bis Filtern 20 60

Darstellung bei sehr vielen Facetten und Ausprägungen Marke Marke X Marke Y Marke Z Größe Marke Marke X Marke Y Marke Z S M L XL Größe

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.com/blog/2009/01/23/powerpoint-wireframe-stencils-as-free-download/ Stencil für Powerpoint: http://www.paulhibbitts.com/wireframe-stencils-for-powerpoint.html http://www.istartedsomething.com/20071018/powerpoint-prototype-toolkit-01/ (speziell Powerpoint 2007)