Filterfunktion auf Websites

1. Filterfunktion auf Websites Vorlagen für die Gestaltung von Wireframes für Filterfunktionen (Facettennavigation, FacetedSearch) 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/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

3. Übersicht 2b Damen > Marke X > Marke Z> 20-60 € Ihre Auswahl 1 3 2a Damen Marke X Marke Z 20-60 € Ihre Suche ergab X von Y Treffern Auswahlmöglichkeiten für Filter. Aktuelle Auswahl ist jeweils hervorgehoben Ergebnisliste Alles zurücksetzen Suche verfeinern 2a Anzeige der aktuellen Auswahl oberhalb des Filters Für Wen? Marke Damen  Marke X Herren Marke Y Kinder 2b  Marke Z 4 Anzeige der aktuellen Auswahl über ein Breadcrump 1 3 Anzahl der Treffer in der Ergebnisliste Preis: 20-60 € 4 20 60 Anzeige der Ergebnisse

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

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

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.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)