Filterfunktion auf Websites

Präsentation zum Thema: "Filterfunktion auf Websites"—  Präsentation transkript:

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: Magisterarbeit zum Download:

3 Anzeige der aktuellen Auswahl oberhalb des Filters
Übersicht 2b Ihre Auswahl Für Wen? Damen Herren Kinder Preis: € Suche verfeinern Marke Marke X Marke Y Marke Z  Damen > Marke X > Marke Z > € 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

4 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 Dropdown Für Wen? Herren Eingabefelder Preis bis Filtern Preis € bis Filtern 20 60

5 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

6 Tipps Einfache Interaktionsmöglichkeiten lassen sich durch verlinkte Folien realisieren. (siehe auch ) 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: Stencil für Powerpoint: Stencil für Powerpoint: (speziell Powerpoint 2007)