1 / 6

Filterfunktion auf Websites

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.

whitby
Download Presentation

Filterfunktion auf Websites

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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)

More Related