Post on 23-Feb-2016
description
Filterfunktion auf WebsitesVorlagen 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
Ihre Auswahl
Für Wen?DamenHerrenKinder
Preis: 20-60 €
Suche verfeinern
MarkeMarke XMarke YMarke Z
Damen > Marke X > Marke Z > 20-60 €
Ihre Suche ergab X von Y Treffern
Ergebnisliste
Alles zurücksetzen
DamenMarke XMarke Z20-60 €
20 60
2a
3
1
Übersicht
Auswahlmöglichkeiten für Filter. Aktuelle Auswahl ist jeweils hervorgehoben
1
Anzeige der aktuellen Auswahl oberhalb des Filters
Anzeige der aktuellen Auswahl über ein Breadcrump
2a
2b
2b
3
Anzeige der Ergebnisse
4
4
Anzahl der Treffer in der Ergebnisliste
Radiobuttons
Für Wen?
DamenHosenRöcke
Links hierarchisch
Für Wen?
Dropdown
Für Wen?
DamenHerrenKinder
LinksMarke
Marke XMarke YMarke Z
Checkboxen
FarbfelderFarbe
SchiebereglerPreis
0 100
Eingabefelder
AuswahlelementeEinfachauswahl Mehrfachauswahl
Intervallauswahl
Marke
Marke XMarke YMarke Z
Farbe
Preis
bis
Filtern
Preis 20-60 €
bis
Filtern
20 60
Preis 20-60 €
20 60
Herren
Für Wen?
DamenHerrenKinder
Für Wen?
DamenHerrenKinder
Für Wen?
DamenHosenRöcke
Für Wen?
DamenHerrenKinder
MarkeMarke XMarke YMarke Z
Größe
MarkeMarke XMarke YMarke Z
SMLXL
Größe
Darstellung bei sehr vielen Facetten und Ausprägungen
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)