UI Design Patterns - Institut für Visualisierung und Interaktive Systeme

Transcription

Kapitel: 8. Konzeption | Style Guides | UI Design Patterns | Genres
UI Design Patterns
Vorlesung: Usability and Interaction
Dr. Thomas Schlegel, Institut für Visualisierung und interaktive Systeme (VIS)
19
Entwurfsmuster (Design Patterns)
Konzept geht zurück auf den Architekten Christopher
Alexander ((Notes on the synthesis
y
of form,, 1964))
Systematische Sammlung wiederkehrende Muster in
der Architektur
Prinzipien:
Pi i i
organisches
i h W
Wachstum,
h t
Selbstorganisation, Partizipation
Übertragung auf den Software-Entwurf durch Erich
Gamma et al. (Design Patterns, 1995)
Definition von Patterns mit Beschreibung, Einsatz,
Nutzungsaspekte (z
(z.B.
B Usability)
Zur Zeit Entwicklung einer Pattern Language Markup
Language PLML in XML
20
UI Design-Patterns
dienen im Usability Engineering und
Interaktionsdesign zu …
– Bibliothek,
Bibliothek Nachschlagewerk für konkrete
Designlösungen; Ausgangspunkt für
Auswahl und Weiterentwicklung eigener UILösungen
– Standardisierung von Produkten, UIs eines
Produkt-Herstellers: modulare Bibliothek
konkreter Lösungen
– implizit: Standardisierung über Hersteller
hinweg zz.B.
hinweg,
B im Web-Design
Web Design
in der HCI
– Sammlung von UI-Design-Wissen
– Lehrmaterial: Vermittlung typischer Probleme
und typischer Lösungen, Fachvokabular
21
Basic Interactions Pattern Wizard
Problem
The user wants to achieve a
single goal but several
decisions need to be made
before the goal can be
achieved completely
completely, which
may not be know to the user.
Use
when A non-expert user needs
to perform an infrequent
complex task consisting of
several subtasks where
decisions need to be made in
each subtask…
22
Interaction Pattern Map Navigator
Problem
Users need to find a location of
choice on a map.
Use
when the site has the
possibility to search for a
'special location'.
Solution
Show a map with the points of
interest and provide navigation
links in all corners.
23
Navigationspatterns - Bausteine für den Webentwurf
Entwurfsmuster ("Pattern"): häufig verwendete Entwurfsstruktur mit definiertem
g und Eigenschaften
g
Einsatzzweck,, Beschreibung
wiederkehrende Navigationsstrukturen als Entwurfsmuster definieren
Aufstellen eines Katalogs von Navigationspatterns
V
Verwendung
d
iin W
Web-Styleguides
b St l
id
Grundansatz für die Definition von Navigationspatterns:
Content-Struktur
Navigations-Struktur
24
Design-Patterns: hierarchische Navigation (Beispiele)
(
)
1-stufig,
permanent
1-stufig,
ersetzend
mehrstufig,
permanent
2-stufig.
look-ahead
25
Pattern: Navigationsspur ('Breadcrumbs')
B
Beschreibung:
h ib
– Sequentielle Darstellung
eines traversierten Pfads in
einer Hierarchie
Einsatz:
Usability-Aspekte:
26
Web Design patterns*
www.welie.com
Breadcrumbs
Sitemap
*Beispiele
27
User Interface Design Patterns
Weit verbreitet in Lehrbüchern, wiss. Literatur:
Tidwell, J. (2005) Designing Interfaces: Patterns for
Effective Interaction Design. O'Reilly Media
Van Duyne, D., Landay, J., & Hong, J. (2003): The
Design of Sites
Sites. Addison
Addison-Wesley,
Wesley San Fransisco.
Fransisco
Seffah, A. & Javahery, H. (Eds.)(2004): Multiple User
Interfaces. Wiley. Chichester.
van Welie, M. et al. : (2000): Patterns as Tools for
User Interface Design.
http://www welie com/patterns/literature html
http://www.welie.com/patterns/literature.html.
Accessed June 2006.
Yahoo Web Design Patterns
etc.
28
(Web-)Genres
29
Web Genres
− Genre = Anwendungsklasse mit
spezifischen inhaltlichen und
formalen Merkmalen
(Analogie zu literarischem
Genre oder Film-Genre)
− Wiederkehrende Strukturen
und Bausteine (Patterns)
− Spezifische Gestaltungs- und
Erfolgsfaktoren
o gs a o e
− Referenzsites definieren Genre
− Hoher Wieder erkennungswert
für den Nutzer – „Habit
Habit
Forming“
− Guideline: Der intendierte
Zweck einer Website sollte
sofort erkennbar sein
Genre-spezifische Inhalte und Funktionalitäten
Die wichtigsten Aspekte
– Sind alle Inhalte und Funktionen
vorhanden,
h d
um di
die B
Benutzer
t
angemessen bei der Erledigung ihrer
Aufgaben zu unterstützen?
Beispiel
e sp e E-Commerce:
Co
e ce
Preisinformationen (!) und
Produktbeschreibungen, evtl.
Erklärungen zu Fachbegriffen und
technischen Daten
– Sind die angebotenen Informationen
vollständig?
Z. B. Angabe von Dateigröße bei
Downloads, Produktübersicht
– Ist der Detaillierungsgrad der
angebotenen Informationen für die
Zielgruppen angemessen?

UI Design Patterns - Institut für Visualisierung und Interaktive Systeme

Transcription

Similar documents

Auszug aus dem Gesamtschriftenverzeichnis

FLYING THE FLORIDA KEY`S 2013 Vobereitung

TOURENBERICHT – ECUADOR EISGIPFEL AUF DER STRASSE

Alles aus einer Hand – Webdesign, Umsetzung und Pflege!

Wahlbogen für die Vorstufe Abitur 2019 - Goethe-Schule