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)