Erstellung eines Pattern-Almanachs für HCI-Patterns · So um 1987 entdeckte der Bereich...

Abschlussarbeit: Studiengang Bachelor Informatik

Erstellung eines Pattern-Almanachs für HCI-Patterns

von

Andreas Gstöttner Hummelbachgasse 27 4880 St. Georgen i.A. (Matrikel Nr. 5262615)

angefertigt am

Lehrgebiet Praktische Informatik VI - Verteilte Systeme - Prof. Dr. Jörg Haake

der FernUniversität Hagen

Betreuer:

Dr. Till Schümmer

Juli 2007

Erstellung eines Pattern-Almanachs für HCI-Patterns Seite 2 von 93

Hiermit versichere ich, dass ich diese Arbeit selbstständig verfasst und keine anderen als die angegebenen Quellen und Hilfsmittel benutzt sowie Zitate kenntlich gemacht habe.

St. Georgen i.A., im Juli 2007 (Datum) (Unterschrift)


Inhaltsverzeichnis 1. Aufgabenstellung ............................................................................................ 4 2. Einführung ...................................................................................................... 5 2.1. Was sind HCI-Pattern ................................................................................. 5 2.2. Definition .................................................................................................... 5 2.3. History - Entwicklung................................................................................. 6 3. Problemanalyse ............................................................................................... 8 3.1. Probleme im HCI-Bereich .......................................................................... 8 3.2. Problemanalyse - Autoren......................................................................... 12 3.3. Zusammenfassung der Anforderungen ..................................................... 14 3.4. Problem – Anforderungs-Matrix............................................................... 15 4. State of the Art .............................................................................................. 16 4.1. Jenifer Tidwell .......................................................................................... 16 4.2. Douglas K. von Duyne.............................................................................. 19 4.3. Martijn van Welie ..................................................................................... 23 4.4. Ian Graham: .............................................................................................. 26 4.5. Vergleich Autor - Anforderung ................................................................ 29 5. Lösungsüberblick.......................................................................................... 30 5.1. Quellen...................................................................................................... 31 5.2. Pattern-Editor - CoPE ............................................................................... 33 5.3. Pattern Eingabe ......................................................................................... 34 5.4. Relationen intern/extern............................................................................ 36 5.5. Klassifizierungsschema............................................................................. 37 6. Almanach für HCI-Pattern............................................................................ 43 6.1. Patternbeschreibung.................................................................................. 43 6.2. Pattern-Volumes ....................................................................................... 45 6.3. Patternkarte je Autor ................................................................................. 46 6.4. Gesamte Patternkarte ................................................................................ 52 6.5. Patternkarte je Kategorie........................................................................... 59 6.6. Almanach im XML-Format ...................................................................... 75 7. Zusammenfassung / Ausblick ....................................................................... 78 8. Anhang.......................................................................................................... 80 8.1. Literaturverzeichnis .................................................................................. 80 8.2. Abbildungsverzeichnis.............................................................................. 83 8.3. Tabellenverzeichnis .................................................................................. 84 8.4. CD-Inhaltsverzeichnis............................................................................... 84 8.5. Pattern-Übersicht nach Kategorie ............................................................. 85


1. Aufgabenstellung Gerade in den letzten Jahren hat sich die Anzahl der Pattern im HCI-Bereich dramatisch erhöht. Diese Pattern adressieren vor allem Probleme im Bereich Human-Computer-Interface, wo sie die Erstellung von Human-Computer-Interfaces erleichtern und standardisieren sollten. Von Linda Rising existiert ein Almanach für HCI-Pattern aus dem Jahre 2000. Dieser ist aber bei weitem nicht mehr aktuell und durch die enzyklo-pädische Darstellung sehr unübersichtlich. Eine Klassifizierung der bein-halteten Pattern fehlt zur Gänze. Darüber hinaus fehlen bis dato Referenzen zwischen den HCI-Pattern. Referenzen zwischen Pattern innerhalb einer Pattern Language werden von den Autoren meist nur im Kontext der Patternbeschreibung angeführt. Über Pattern Languages hinweg fehlen diese gänzlich, d.h. Abhängigkei-ten zwischen den Pattern sind kaum dokumentiert. Dies wäre aber ein wichtiger Aspekt im Umgang und in der Anwendung von Pattern. Ziel sollte also ein möglichst vollständiger und repräsentativer Almanach mit aktuellen Human-Computer-Interface Pattern der wichtigsten Autoren sein. Die Basis dieses HCI-Pattern-Almanach sollte ein effektives und all-gemein gültiges Klassifizierungsschema bilden, anhand dessen diese Pat-tern übersichtlich organisiert sind. Eine Visualisierung der einzelnen Pat-tern Languages und eine übergreifende visuelle Darstellung der Patterns nach dem erarbeiteten Klassifizierungsschema wäre wünschenswert. Zu-sätzlich sollten Abhängigkeiten zwischen den Pattern aufgezeigt werden und durch die Visualisierung dieser Referenzen mit der Eingabe in CoPE gut ersichtlich sein. Diese Klassifizierung und Visualisierung der HCI-Pattern, sowie das Auf-zeigen und die Visualisierung der Relationen sollte für die Community ei-nen signifikanten Mehrwert darstellen.


2. Einführung

2.1. Was sind HCI-Pattern

Heute gibt es Entwurfsmuster sowohl für den Bereich der Softwaretechnik als auch auf dem Gebiet der Mensch-Computer-Interaktion (MCI, eng-lisch: "Human Computer-Interaction", kurz HCI).

Der Bereich HCI beschäftigt sicht mit der Schnittstelle zwischen Men-schen und Computersystemen. HCI-Pattern („Entwurfsmuster“) bieten dabei bewährte Lösungsstrategien zu wiederkehrenden bekannten Prob-lemen in diesem Bereich an.

„In human-computer interaction knowledge of the capabilities and limitations of the human operator is used for the design of systems, software, tasks, tools, environments, and organsiza-tions. The purpose is generall to improve productivity while pro-viding a safe, cormfortable and satisfing experience for the op-erator” [Helander 1997,p.xi]

2.2. Definition Design [IEEE-Std-610.12-1990]: (1) The process of defining the architecture, components, interfaces, and other characteristics of a system or component. (2) The result of the process in (1). The process of applying various techniques and principles for the purpose of defining a device, a process or a system in sufficient detail to permit its physical realization. Desing description [IEEE-Std.610.12-1990]: A document that describes the design of a system or component. Typical contents include system or component aarchitecture, control logic, data structures, input/output-formats, interface descriptions, and algorithms. Pattern [Alexander 1977] ”Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that prob-lem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.


Die Beschreibung von HCI-Pattern konzentriert sich im wesentlichen auf die drei Kern-Elemente:

� Name - charakterisiert das Problem-Lösungs-Paar - soll einprägsam sein - dient der Kommunikation

� Problem

- welches Problem tritt wann und unter welchen Umständen und mit welchen Trade-Offs auf - spannt ein System von „Kräften“ auf, die gegeneinander wirken

� Lösung

- beschreibt generisch die Lösung des Problems

2.3. History - Entwicklung Erste Pattern-Ansätze Das Originalskonzept kommt vom Architekten Chrisopher Alexander. In, The Timeless Way of Building [Alexander 1979] beschreibt er wie hie-rarchischen Entwurfsmuster identifiziert werden können, um zukünftige Bauten benutzerfreundlicher zu gestalten. In, Pattern Language: Towns, Buildings, Construction [Alexander 1977] skizziert Alexander 253 „benutzerfreundlichen“ Entwurfsmuster. Pattern im Software-Engineering So um 1987 entdeckte der Bereich Software-Engineering diese Idee. Auf der OOPSLA Konferenz für Objekt-Orientierung berichtete K. Beck [Beck 1987] über ein Experiment bei dem für die Erstellung eines Smaltalk Inter-faces Design-Pattern verwendet wurden. Erich Gamma verhalf den Design-Pattern in der Objekt-Orientierten Soft-wareentwicklung zum Durchbruch mit seiner Publikation Design Patterns: Elements of Reusable [Gamma 1995] Die jährliche PLOP Konferenz dient dabei als Plattform und Austausch-möglichkeit zum Thema Design-Pattern.


Patterns im HCI-Bereich Die Idee von Pattern wurde vom HCI-Bereich früher aufgegriffen, als man annehmen würde. Bereits Norman und Draper [Norman 1986] erwähnten Alexander’s Arbeit. Auch Apple’s Human Interface Guidelines [Apple 1992] gutierten Alexander’s Ideen und griffen diese auf. Im schulischem Umfeld verwendete die Utrecht School of Arts Pattern frühzeitig für den Entwurf der Interaktion im Curriculum. [Barfield 1994] In den letzten Jahren haben die Pattern gerade im HCI-Bereich durch die Arbeiten von diversen Autoren (siehe z.B. J.Tidwell, J. Borchers, van Duyne, van Welie oder I. Graham) zunehmendes Interesse gefunden. Die in diesen Arbeiten vorgestellte Pattern beziehen sich auf ein sehr weites Spektrum unterschiedlicher Fragen und reichen von Aspekten des visuel-len Layouts bis hin zu unterschiedlichen Typen von Anwendungssyste-men. Etablierte jährliche Konferenzen in diesem Umfeld sind: CHI: conference for human-computer interaction

CHI 2006 (http://www.chi2006.org/) INTERACT: International Conference on Human-Computer Interaction

INTERACT 2007 (http://tuim.inf.puc-rio.br/interact2007/home.php)

PLoP: Pattern Languages of Programs!

http://hillside.net/plop/2006/


3. Problemanalyse Nach einem kritischen Ausleuchten des HCI-Bereichs konnten die an-schießend näher betrachteten Probleme manifestiert werden. Im Speziel-len werden diese Analyseergebnisse von den drei Autoren: Jan Borchers in [Borchers 2005], Sally Fincher in [Fincher 2003] und Tom Erickson in [Erickson 2000] aufgezeigt. (siehe Punkt: 3.2 Problemanalyse - Autoren)

3.1. Probleme im HCI-Bereich Problem #1 Übersicht je Autor

Autoren beschreiben ihre Pattern in der Literatur meist nur verbal und nicht standardisiert. Die Beschreibung der Pattern-Languages ge-schieht in unterschiedlichen Abstraktionsebenen und unter Verwen-dung von unterschiedlichen Parametern. Diese Pattern sind zwar oft tabellarisch dargestellt und zum Teil auch durch Illustrationen er-gänzt, dennoch fehlt meist eine visuelle Übersicht über die verwen-dete Pattern-Language. Dies würde eine schnelle und einfache Ori-entierung über die Pattern und deren Verwendung je Autor ermögli-chen. Anforderung: Erstellung einer standardisierten Patternkarte je Autor

Problem #2 Interne Relationen je Autor

Die internen Relationen zwischen den Pattern eines Autors, d.h. wel-che Pattern von anderen Pattern referenziert werden, sind von den Autoren zum Teil nur sehr wenig ausgeführt. In wenigen Fällen füh-ren Autoren diese Relationen explizit an, wobei die Richtung der Re-lationen nicht angegeben wird (Pattern benutzt ein Pattern oder wird von einem Pattern benutzt) meist muß die Relation zu anderen Pat-tern implizit aus dem Kontext der Patternbeschreibung eruiert wer-den, oder es werden die Relationen zur Gänze ignoriert. Anforderung: Eruieren der Relationen zwischen den Pattern und deren Richtung, sowie die Visualisierung der gerichtete Relationen auf einer Pattern-karte


Problem #3 Ignoranz der Autoren

Das Auftreten der Autoren ist bisweilen sehr introvertiert, d.h. die Au-toren ignorieren sich bisweilen gegenseitig und setzen ihren Fokus nur auf die eigenen Pattern. Ein Berücksichtigen oder Betrachten von Pattern oder Relationen von anderen Autoren fehlt in der Literatur zur Gänze. Anforderung: In dieser Arbeit werden die Pattern mehrerer Autoren gleichzeitig be-trachtet, untersucht und gegenübergestellt. Diese Pattern werden in einer gemeinsamen Übersicht erfasst und dargestellt.

Problem #4 Redundanzen / Überschneidungen

Durch diese, bis dato getrennte Sichtweise je Autor, wurde auf allfäl-lige Redundanzen und Überschneidungen von Pattern verschiedener Autoren keine Rücksicht genommen und auch nirgends dokumen-tiert. Anforderung: Durch die gemeinsame Bearbeitung der verschiedenen Pattern wer-den Redundanzen sehr klar ersichtlich.

Problem #5 Externe Relationen zu anderen Autoren

Aus dieser Ignoranz ergibt sich ein weiteres Problem, das komplette Fehlen eines in der Literatur dokumentierten Aufzeigen von Relatio-nen zwischen den Patteren der unterschiedlichen Autoren. Anforderung: Ein Untersuchen der vorliegenden dokumentierten Pattern der Auto-ren bezüglich gegenseitiger Relationen.

Problem #6 unterschiedliche Klassifizierung

Jeder Autor klassifiziert seine Pattern nach seinem eigenen Schema. Diese ergeben sich aus den unterschiedlichen Bereichen aus denen die Autoren stammen und den unterschiedlichen Anwendungsgebie-ten für diese Pattern. (siehe Beschreibung der Autoren unter Punkt: 4. State of the Art) Diese unterschiedlichen Schemen gestalten es schwierig Pattern zu suchen, oder die Pattern verschiedener Autoren zu vergleichen.


Anforderung: Erarbeiten eines einheitlichen Klassifizierungsschema. Herauslösen der Pattern aus dem ursprünglichen Schema und Einordnen nach dem neu erstelltem Schema.

Problem #7 Schwerpunkt je Autor

Jeder Autor hat sich im zwischenzeitlich sehr breiten Feld der HCI-Pattern in spezielle Bereiche verankert und bildet verschiedene Schwerpunkte aus. Wobei ein Gesamtabdecker fast unmöglich ist, und manche Bereiche daher vernachlässigt werden. Anforderung: Durch eine Gesamtübersicht über die wichtigsten Autoren verwischt dieser Nachteil, da jeder Autor andere Schwerpunkte ausgebildet hat, und sich somit eine Gleichverteilung auf dem gesamten Gebiet ergibt.

Problem #8 Patternrelevanz

Die Autoren sind zum Teil sehr erfinderisch bei der Erstellung von Pattern. Die Auswahl der jeweils dargestellten Muster erscheint dabei oft recht willkürlich und ist zumindest in starkem Maße vom jeweili-gen Autor abhängig. Offen bleibt deshalb, inwieweit die Muster tat-sächlich die aus kollektiven Erfahrungen von Entwicklern destillierten Best-Practice-Lösungen darstellen. Anforderung: Durch das Aufweisen von externen Relationen von Pattern unter-schiedlicher Autoren, wird die Reife und Relevanz von Pattern klar ersichtlich.

Problem #9 Kommunikation

Pattern werden mitunter dazu verwendet, die Kommunikation zwi-schen Entwickler, Auftrageber und User zu erleichtern. Da jeder Au-tor eben Schwerpunkte ausbildet und auf seiner „Pattern-Landkarte“ weiße Flecken hinterlässt, und darüber hinaus noch die Beschrei-bung der Pattern sehr ausführlich gestaltet, ist eine Kommunikation oft nur sehr eingeschränkt möglich.


Anforderung: Durch eine Gesamtübersicht, einer einheitlichen Klassifizierung und die Erstellung eines kurzen Summary als Pattern-Beschreibung, ist es auch für Fachfremde wesentlich einfacher mit Hilfe dieser Pattern zu kommunizieren.

Problem #10 unterschiedliche Patternbeschreibung

Jeder Autor verwendet zur Beschreibung seiner Pattern ein eigenes Format. Betrachtet man nun Pattern mehrer Autoren gemeinsam, so ist diese unterschiedliche Beschreibung der Pattern für ein leichtes Verständnis und für ein einfaches Vergleichen der Pattern nicht ge-rade förderlich. Anforderung: Ein kurzes, einheitliches Summay je Pattern, ermöglicht ein leichtes Verständnis der Pattern und eine einfachere Vergleichbarkeit unter-einander.

Problem #11 deutsche Community

Nachdem so gut wie die gesamte Literatur im Bereich der HCI-Pattern in Englisch gehalten ist, ist es gerade für die deutschsprachi-ge Community schwierig, hier einen leichten Einstieg zu finden und einen schnellen Überblick zu erhalten. Anforderung: Ein deutsches Summay in den Pattern ermöglicht auch der deutsch-sprachigen Community diese Pattern einfach und leicht verwenden bzw. verstehen zu können.

Problem #12 stark gewachsener Bereich

Gerade in den letzten Jahren ist das Feld für HCI-Pattern sehr stark angewachsen und die Arbeiten in diesem Feld sind sehr zahlreich geworden. Selbst als Fachmann verliert man sehr leicht die Übersicht über die zahlreichen Autoren, die noch dazu alle nur auf die eigenen Pattern fokusiert sind. Anforderung: Eine Visualisierung der Gesamtübersicht inklusive den Relationen auf „einer“ Patternkarte.


3.2. Problemanalyse - Autoren Jan Borchers – Twelve Theses Jan Borchers stellte in seinem Status-Artikel „Interaction Design Patterns: Twelve Theses“ [Borchers 2000] zwölf Aussagen für den CHI2000 Work-shop zur Diskussion. Damit unterstreicht er die Anforderungen aus den eben evaluierten Problemen #1 bis #12. Dabei referenziert Borchers mit seiner Aussage in „Claim 2”: „Another im-portant aspect of patterns as introduced originally is that they are readable and understandable by professionals and non-professionals alike“ die Probleme #9, #10 und #11. In „Claim 4“ fordert er :„Along the same lines, it has to be clear what do-mains HCI patterns should address“ wie unter Problem #6 und Prob-lem #12 manifestiert ein übergeordnetes Klassifizierungsschema und eine Gesamtübersicht mit einer Detailübersicht. Eine Anforderung von Relationen zwischen den Pattern erstellt er in „Claim 5“, womit gezeigt werden könnte, welche Patterns von einer hohen Abstraktionsstufe bis zur niedrigen Abstraktionsstufe benutzt werden, und verweist eben damit auf die unter Probleme #1 und #2 definierten Anfor-derungen. Mit seinem „Claim 8“: „HCI patterns must be readable by users“ stellt er eine ähnliche Anforderung wie unter Claim 2, und referenziert damit auch die unter Probleme #9, #10 und #11 wiedergegebenen Aspekte. Unter „Claim 9“ verlangt er die Pattern mehr in die Hände der User zu le-gen und gibt damit implizit der Anforderung nach einer kategorisierten Ge-samtübersicht, wie unter Problem #12 beschrieben Nachdruck. Sally Fincher – Perspecitves on HCI Patterns Das wichtigste Ergebnis des CHI2003 Workshop war der Versuch eine gemeinsame Pattern-Sprache zu entwickeln. In ihrem Artikel „Perspecti-ves on HCI Pattern: Concepts and Tools (introducing PLML)“ [Fincher 2003] gibt sie eine kurze Einführung in PLML (Pattern Language Markup Language), mit deren Hilfe die Pattern auf einen gemeinsamen Dokumen-tationsstandard gebracht werden sollten (Problem #10). Fincher stellt auch die Anforderung auf, Patterns über die Autoren hinweg zu betrachten (Problem #3), und Referenzen zwischen Patterns fremder


Autoren zu studieren (Problem #5) und diese in einer gesamthaften Meta-Sammlung nach Themen angeordnet, aufzuzeigen (Problem #6). Finch ist eine der wenigen Autoren die versucht einen Überblick über die Pattern verschiedener Autoren in ihrer „Pattern-Gallery: http://www.cs.ukc.ac.uk/people/staff/saf/patterns/gallery.html“ [Fincher] zu geben und weiterführende Links auf dieser Seite angibt. Tom Erickson – Lingua Francas Als größte Herausforderung sieht Tom Erickson in seinem Artikel “Lingua Francas for Design: Scared Placet and Pattern Lagnuages” [Erickson 2000] die Kommunikation und Verhandlungen von beteiligten Personen, wie Entwickler, Auftraggeber und User in einem immer komplexeren Ent-wicklungsprozess. Er vertritt dabei den Ansatz, eine gemeinsame Sprache „Lingua Francas“ für diese Personengruppe und Aufgabe zu entwickeln. Als Beispiel führt er eine Revitalisierung einer Kleinstadt in North Carolina an, wo er ein Vor-gehen mittels einer erstellten „Lingua Francas“ aufzeigt. Mit der Aussage: „The idea is that a lingua franca is accessible to all stakeholders, patricualarly those who are traditionally marginalized in the design process: the users“ referenziert er wiederum die aufgezeigten Probleme #9 bis #11. Das Problem #12 spricht er wiefolgt an: “The challenges posed by the increasing size of interactive systems design space are exacerbated by another trend: the increasing diversity of the design process.”


3.3. Zusammenfassung der Anforderungen Zusammengefasst ergeben sich aus den obigen Problemen folgende An-forderungen:

1. Patternkarte je Autor 2. Visualisierung der internen Relationen

(innerhalb einer Pattern-Language)

3. Gesamte Patternkarte über alle Autoren 4. Visualisierung der externen Relationen

(zu fremden Pattern-Languages)

5. einheitliches Klassifizierungsschema 6. Patternkarte je Kategorie 7. einheitliche Patternbeschreibung 8. deutsches Patternsummary

Tab. 1, Anforderungen


3.4. Problem – Anforderungs-Matrix

Anforderung

Problem 1. P

atte

rnka

rte

je A

utor

2. V

isua

lisie

rung

der

inte

rnen

Re

latio

nen

3. G

esam

te P

atte

rnka

rte

übe

r

al

le A

utor

en

4. V

isua

lisie

rung

der

ext

ern

en

R

ela

tion

en

5. e

inh

eitli

ches

Kla

ssifi

zier

ungs

sche

ma

6. P

atte

rnka

rte

je K

ate

gori

e

7. e

inh

eitli

che

P

atte

rnbe

schr

eibu

ng

8. d

eut

sche

s P

atte

rnsu

mm

ary

#1 Übersicht je Autor ⊗

#2 Interne Relationen je Autor ⊗ ⊗

#3 Ignoranz der Autoren

⊗ ⊗

#4 Redundanzen / Überschnei-dungen

⊗ ⊗ ⊗

#5 Externe Relationen zu ande-ren Autoren

⊗ ⊗

#6 unterschiedliche Klassifizie-rung

⊗

#7 Schwerpunkt je Autor

⊗ ⊗

#8 Patternrelevanz

⊗ ⊗

#9 Kommunikation

⊗ ⊗ ⊗ ⊗

#10 unterschiedliche Patternbe-schreibungen

⊗ ⊗

#11 deutsche Community

⊗

#12 stark gewachsener Bereich

⊗ ⊗ ⊗

Tab. 2, Problem - Anforderungsmatrix


4. State of the Art Der Bereich der HCI-Pattern ist, wie schon oben erwähnt in den letzten Jahren sehr stark angewachsen. Aus dem Kreis der Pattern-Autoren ha-ben sich aber nur wenige etabliert und sind in diesem Bereich federfüh-rend. Ich möchte hier eine Einführung zu diesen Autoren bereitstellen, und damit ein Bild über deren aktuelle Arbeiten zeigen. Diese Arbeiten stellen den aktuellen Stand der Dinge im Bereich der HCI-Pattern dar.

4.1. Jenifer Tidwell Designing Interfaces [Tidwell 2006]

(Patterns for Effective Interaction Design) Tidwell erstellte bereits 1998 eine erste Sammlung an HCI-Patterns. In ihrem aktuellen Buch liefert sie eine der umfangreichsten und vollständigs-ten Ansätze einer HCI-Pattern-Language. Sie spannt ihren Bogen dabei von den sehr abstrakten Patterns wie die „Bedürfnissen der User“, bis zu den sehr konkreten Pattern „Making it Look Good“. Tidwell argumentiert dabei, dass Pattern eine gute Form dar-stellen um Entwurfsrichtlinien einzuführen. Damit würde ein einheitliches „Look and Feel“ über Applikationen hinweg erreicht. Genau hierin sieht aber Borchers ein Problem und argumentiert: „Typical GUI style guedes are useful ...., but they are too much tied to his toolkit, which makes them transient: as soon as the underlaying toolkit changes (for example, from Windows 3.1 to Windows 95), their rules be-come hard to apply, and seem out of date.” [Borchers 2001, Seite 32] Verwendete Parameter für die Patternbeschreibung:

visuelles Pattern-Beispiel

What Was macht dieses Pattern in Kurzform?

Use When Wann wird dieses Pattern angewendet?

Why Warum sollte dieses Pattern benutzt werden?

How Wie wird dieses Pattern verwendet?

Examples Beispiele (illustriert)


Beispiel aus Tidwells Patternsammlung:


Abb. 1, J. Tidwell, http://designinginterfaces.com/Closable_Panels

Die Patternsammlung organisiert Tidwell nach Themengebieten in folgen-der Weise:

• What Users Do

• Organizing the Content

• Getting Around / Navigation

• Organizing the Page

• Doing Things

• Showing Complex Data

• Getting Input From Users

• Builders and Editors

• Making It Look Good


Welche Anforderungen erfüllt der Autor im Vergleich zur Problem-analyse ? Tidwell bietet einen sehr allgemeinen Ansatz der Klassifizierung ihrer Pat-tern an und bildet mit ihren Pattern einen gleichmäßigen Bogen über das Feld der Pattern-Languages. Eine visuelle Übersicht über diese Pattern-Language gibt es aber bei ihr nicht. Die internen Relationen zu verwende-te Pattern sind im Kontext enthalten und auch die Richtung der Relationen muss aus dem Kontext herausgelesen werden. Auf andere Autoren wird nur kurz im Vorspann verwiesen, ansonsten wer-den von Tidwell keine Autoren angeführt und kein Vergleich zu anderen Pattern-Languages hergestellt. Relationen zu anderen Autoren sind nur sehr vereinzelt zu finden, und diese dann auch nur im Kontext. Ihre Pattern sind sehr detailliert beschrieben, sie bietet aber in ihrem Index eine stichwortartiges Summary für die Pattern an, so dass zumindest der Bereich des Pattern erahnt werden kann.

4.2. Douglas K. von Duyne The design of Sites [van Duyne, 2002]

(Patterns, Principles, and Processes for Craft-ing a Customer-Centered Web Experience)

Van Duyne führt in seinem Buch eine Anzahl von Patterns auf, die beim Erstellen von Web-Sites Unterstützung bietet und dem Kunden ein einheit-liches und gewohntes Verhalten zeigt. Sein Hauptaugenmerk legt van Duyne auf das „Customer-Centered Web Design“.

Customer-Centered Web Design [von Duyne, 2002]:

Mit der Kommerzialisierung des Webs wurde der Ansatz des „Customer Centered Design“ auch für das WEB interessant und notwendig.

Reichte es zu Beginn des Webs eine einfache Seite zu kreieren unter dem Motto „build it, and they will come“, so wandelte sich die Erstellung einer Website hin zu einer professionellen Website, die dem Kunden einen ech-ten Nutzen bietet.

Auch van Duyne betont dabei, wie wichtig folgende Punkte für die Erstel-lung von guten und vor allem vom Kunden akzeptierten Websites sind:


1. den Kunden gut zu kennen sie sind nicht selbst Kunde den Kunden verstehen, um die richtigen Designelement zu wählen den Kunden als Menschen zu verstehen die Kunden sind sehr unterschiedlich die Aufgaben der Kunden gut zu kennen die sozialen Bedürfnisse des Kunden kennen

2. den Kunden in den Design-Prozess integrieren iterativer Desing-Prozess; warum iterativ: - Probleme können frühzeitig entdeckt werden und sind somit noch einfacher und leichter zu beheben - Sie haben die Sicherheit, dass ihre Konstruktion auch die Funktionalitäten aufweist, die der Kunde braucht. - Sie haben auch die Sicherheit, Funktionen in einer Art zu imple- mentieren, so dass der Kunde diese auch benutzen kann. Design unter Einhaltung von Kundenzielen und zugleich HCI De-sign Prinzipien ermöglicht „Rapid Prototyping“ gleichzeitige Evaluierung der Website

Verwendete Parameter für die Patternbeschreibung:


BACKGROUND Hintergrund für die Verwendung des Pattern

PROBLEM Welches Problem wird mit diesem Pattern adressiert?

SOLUTION Aufzeigen der Lösung des Problems

CONSIDER THESE OTHER PATTERNS Patternrelationen


Beispiel aus van Duyne’s Patternsammlung:

Abb. 2, van Duyne, Pattern: Process Funnel


Van Duyne klassifiziert seine HCI-Pattern nach folgenden Themenberei-chen:

• Site Genres

• Creating a Navigation Framework

• Creating a Powerful Homepage

• Writing an Managing Content

• Building Trust and Credibility

• Basic E-Commerce

• Advanced E-Commerce

• Helping Customers Complete Tasks

• Designing Effective Page Layouts

• Making Site Search Fast and Relevant

• Making Navigation Easy

• Speeding Up Your Site

Welche Anforderungen erfüllt der Autor im Vergleich zur Problem-analyse ? Auch van Duyne bietet keine visuelle Übersicht über die von ihm verwen-dete Pattern-Language. Generell ist van Duyne auf die Bereitstellung von Pattern für „Web-Design“ fixiert und richtet auch seine Klassifizierung da-nach aus. Van Duyne bietet nur eine stichwortartige Beschreibung seiner Kategorien an und führt darunter seine ebenfalls sehr detailliert dokumentierten Pat-tern an. Als einer der wenigen Autoren gibt van Duyne Referenzen innerhalb sei-ner Pattern-Language explizit an. Je Pattern existiert eine übersichtliche Aufzählung von Referenzen, wobei implizite Verweise im Kontext farblich markiert sind. Leider muss die Richtung der Patternverwendung aus den Kontext herausgelesen werden. Eine Beachtung von anderen Autoren gibt es auch bei van Duyne so gut wie nicht d.h. es gibt weder Vergleiche mit anderen Autoren, noch Verwei-se zu anderen Pattern-Languages.


4.3. Martijn van Welie Web Design patterns [van Welie 2007]

Van Welie bietet im Internet eine relativ umfangreiche Pattern-Language, mit einer Anzahl an Pattern an. Ebenso wie van Duyne ist er sehr stark Richtung „Web Design“ ausgerichtet, allerdings nicht in dieser Intensität. Er deckt dabei ein etwas weiteres Feld im Bereich der HCI-Pattern ab. Van Welie aktualisiert und erweitert seine Pattern-Language nach wie vor, und bietet somit eine sehr aktuelle Plattform in diesem Bereich an.



Problem Was macht dieses Pattern in Kurzform?

Use When Wann wird dieses Pattern angewendet?

Solution Warum sollte dieses Pattern benutzt werden?

Why Wie wird dieses Pattern verwendet?

More Examplex Beispiele (illustriert)


Beispiel aus van Welie’s Patternsammlung:

Abb. 3, van Welie, http://www.welie.com/patterns/index.html


van Welie klassifiziert seine HCI-Pattern nach folgenden Themenberei-chen:

• Site Types

• User Experiences

• Ecommerce

• Navigation

• Searching

• Basic Page Types

• Managing Collections

• Page Elements

• Basic Interactions

• Visual Design

Welche Anforderungen erfüllt der Autor in Vergleich zur Problemana-lyse ? Eine visuelle Übersicht sucht man auch bei van Welie vergebens. Er stellt aber seine Pattern-Language sehr komfortable im Internet bereit und bie-tet somit wie bereits erwähnt, eine sehr aktuelle Plattform für HCI-Pattern. Auch die Aktualität seine Pattern-Language, die ständig erweitert wird, stellt einen großen Vorteil dar. Interne Relationen werden nur sehr spärlich angeführt, und sind nur im Kontext der Patternbeschreibung zu finden. Externe Relationen zu frem-den Autoren und Pattern-Language werden, wie bei den Autoren üblich, ignoriert. Van Welie klassifiziert seine Patterns nach einem sehr neutralen Ansatz, bietet aber keine Beschreibungen zu den Klassifizierungen an. Die Pattern sind gut beschrieben, lassen aber einen sehr starken Bezug zum „Web Design“ erkennen. Seine „Known Uses“ illustriert er sehr gut mit zahlrei-chen Links zu den Originalseiten im Netz.


4.4. Ian Graham:

A pattern language for web usability [Graham 2003]

Ian Graham überträgt das Konzept der Pattern Language (vom Architek-ten Christopher Alexander [Alexander 1977]) auf das Gebiet der Web Usability. Er definiert grundsätzliche Patterns, die für den systematischen Aufbau einer anwenderfreundlichen Webseite wichtig sind, sowie Patterns die Fragen zu Navigation und des Designs klären. Bei der Konzeption und Gestaltung liefern diese Patterns dem Webdesigner ein einfaches Regel-werk, anhand er seinen Entwurf auf Usability überprüfen kann.

Er bezeichnet seine Language als “the wu pattern language“ (benannt nach einer ostchinesischen Sprache bzw. nach einem sehr gebräuchli-chen chinesischen Namen). In seiner Sammlung führt Graham sowohl sehr abstrakte Pattern (z.B. IG38 KISS) als auch sehr konkrete Pattern auf.

Im Gegensatz zu den anderen Autoren klassifiziert Graham seine Patten nicht nach Themen, sondern nach dem Prozessfortschritt, sehr stark an-gelehnt an Borchers „Prozess principle“:

„Another possible organizing principle .... is to follow the HCI de-sign process, leading from analysis- to structure-oriented patterns” [Borchers 2001, S 40]


AKA Alias Namen für diesen Pattern

visuelles Pattern-Beispiel mit kurzem Intent

Problem Was ist das zu Grunde liegende Problem, und was macht dieses Pattern in Kurzform?

Therefore Beschreibung der Lösung und Verweise zu Pattern in dieser Language (nicht gerichtet)

Contributors and sources Warum sollte dieses Pattern benutzt werden?

Why Wie wird dieses Pattern verwendet?

More Examples Beispiele (illustriert)


Beispiel aus Graham’s Patternsammlung:

Abb. 4, Graham, Pattern: Sense of location [wu WEB]

Graham klassifiziert seine HCI-Pattern nach folgenden Gesichtspunkten:

wu – Pattern-Language

• getting started on your site

• enhancing usability

• adding detail

• dealing with workflow and security


Abb. 5, Getting started on your site [Graham 2002] / [wu WEB]

Welche Anforderungen erfüllt der Autor im Vergleich zur Problem-analyse ? Leider sucht man auch bei Graham vergebens nach eine visuellen Pat-tern-Language Übersicht, um den Einstieg zu erleichtern. Jedoch bietet Graham je Kategorie einen visuellen Überblick über die hier beschriebe-nen Pattern und deren Relation (Abb. 5). Interne Relationen werden von ihm gut dokumentiert und sind teils im Kontext der Patternbeschreibung enthalten, und teils explizit unter dem Punkt „Therefore“ oder auch „AKA“ angeführt. Sehr sparsam geht Graham mit Relationen zu anderen Pattern oder Pattern-Languages um. Ein Be-zug zu fremden Autoren wird nur bei wenigen Pattern hergestellt, und ist meist auch nicht sehr aktuell. Damit ist auch Graham nur auf seine Pat-tern-Language fixiert. Im Gegensatz zu den anderen Autoren klassifiziert Graham seine Pattern nicht nach Themen, sondern nach dem Prozessfortschritt „Prozess prin-ciple“ [Borchers 2001, S. 40]. Diese Klassifizierung ist eher grob gehalten, und somit umfasst eine Kategorie eine große Anzahl von Pattern. Graham bildet ganz klar einen Schwerpunkt in Richtung Web-Design aus und stellt das bereits im Titel seiner Arbeit klar.


4.5. Vergleich Autor - Anforderung Welche Defizite kristallisieren sich nun aus dem Vergleich der ein-zelnen Autoren im Gegensatz zu den in der Problemanalyse festge-stellten Anforderungen heraus?

Autor Anforderung

Tidwell van

Duyne van

Welie Graham

1. Patternkarte je Autor

negativ negativ negativ teils

2. Visualisierung der interne Relationen (innerhalb ei-ner Pattern-Language)

negativ negativ negativ negativ

3. Gesamte Patternkarte ü-ber alle Autoren


4. Visualisierung der exter-nen Relationen (zu frem-den Pattern-Languages)

negativ negativ negativ teils

5. einheitliches Klassifizie-rungsschema

teils negativ negativ negativ

6. Patternkarte je Kategorie


7. einheitliche Patternbe-schreibung


8. deutsches Patternsumma-ry


Tab. 3, Anforderungen – Autor Vergleich


5. Lösungsüberblick In diesem Kapitel sollte nun ein Ansatz unternommen werden, um die An-forderungen, welche sich aufgrund der Problemanalyse herauskristallisiert haben, zu realisieren. Als propandes Mittel zur Umsetzung wurde ein HCI-Pattern Almanach erstellt, womit die angeführten Anforderungen abge-deckt werden. In den nachfolgenden Punkten dieses Kapitels wird aufgezeigt, wie diese Anforderungen sukzessive erfüllt und umgesetzt werden. Im folgenden Kapitel (siehe Punkt: 5. Almanach für HCI-Pattern) wird dann das „Doing“ und die Ergebnisse daraus genauer spezifiziert. Dieser Lösungsansatz setzt sich nun aus jenen Punkten, die in Folge noch näher ausgeführt werden, zusammen: Pattern Quellen

Eine umfassende Literaturrecherche ermöglicht einen ausführlichen Überblick über dieses Thema. adressiert Anforderung:

1 - Patternkarte je Autor 3 - gesamte Patternkarte über alle Autoren

Pattern Editor

Der angeführte Patterneditor bietet die Möglichkeit Pattern und Re-lationen in der gewünschten Weise zu erfassen und zu visualisie-ren. adressiert Anforderung:

Grundlage für alle Anforderungen Pattern Eingabe

Die kompakte Pattern-Erfassung mit jeweils einem deutschen Summary ermöglicht erst die geforderte Gesamtübersicht. adressiert Anforderung:

7 - einheitliche Patternbeschreibung 8 - deutsches Patternsummary


Relationen intern/extern Durch das explizite Herausarbeiten der internen und externen Rela-tionen können diese auch entsprechend im Patterneditor erfasst und visualisiert werden. adressiert Anforderung:

2 - Visualisierung der internen Relationen 4 - Visualisierung der externen Relationen

Klassifizierungsschema

Ein einheitliches Klassifizierungsschema ermöglicht eine übergrei-fende Organisation der Pattern und somit einen ganzheitlichen Ge-samtüberblick über diesen Bereich. adressiert Anforderung:

3 - gesamte Patternkarte über alle Autoren 5 - einheitliches Klassifizierungsschema 6 - Patternkarte je Kategorie

5.1. Pattern Quellen Zur Erstellung des Almanachs wurden nach umfangreichen Recherchen möglichst alle relevanten Pattern der im Bereich HCI-Pattern federführen-den Autoren gesichtet und gesammelt. Jenifer Tidwell Designing Interfaces [Tidwell 2006] (Patterns for Effective Interaction Design)

82 Pattern

Douglas K. van Duyne The design of Sites [van Duyne, 2002] (Patterns, Principles, and Processes for Craft-

ing a Customer-Centered Web Experience)

90 Pattern

Martijn van Welie Web Design patterns [van Welie 2007]

107 Pattern


Ian Graham: A pattern language for web usability [Graham 2003]

69 Pattern Charles Weir, James Noble: EuroPLoP ‘03

The Hitchhikers’ Guede to Google [Henney 2003, Seite 37-52]

5 Pattern Ewald A. Kaluscha, Sonja Grabner-Kräuter: EuroPLoP ‘03

Patterns for Consumer Trust in Electronic Commerce [Henney 2003, Seite 521-540]

3 Pattern Elizabeth Whitworth, Robert Biddle: EuroPLoP ‘05

Share and enjoy! Patterns for Successful Knowledge Sharing in Large Online Communi-ties [Longshaw 2005, Seite 1-20]

5 Pattern Michael Weiss: EuroPLoP ‘05

More Patterns for Web Application [Longshaw 2005, Seite 21-34]

1 Pattern Till Schümmer, Alejandro Fernandez, Mika Myller: EuroPLoP ‘ 05

Patterns for Virtual Places [Longshaw 2005, Seite 35-74]

5 Pattern


Andreas Rüping: EuroPLoP ‘ 05 Software Architectures for Web Content Man-agement – Best Practices for Enterprises and E-Government [Longshaw 2005, Seite 109-118]

8 Pattern Tim Wellhausen: EuroPLoP ‘ 05

User Interface Design for Searching – A Pat-tern Language [Longshaw 2005, Seite 219-236]

12 Pattern Dirk Schnelle, Fernando Lyardet, Tao Wei: EuroPLoP ‘ 05

Audio Navigation Patterns [Longshaw 2005, Seite 237-260]

7 Pattern

5.2. Pattern Editor - CoPE Die Erfassung der Pattern erfolgte mit dem Cooperative Pattern Editor (CoPE Version 1.446). CoPE ist ein Tool zum Erfassen und Visualisieren von Pattern und kann sowohl als Einzelplatzsystem, als auch als koopera-tives und synchrones Mehrplatzsystem betrieben werden. Entwickelt wur-de CoPE an der FernUniversität Hagen, Lehrgebiet Praktische Informatik VI; letzte Überarbeitung durch Wolfram Schobert „Ansätze zur Visualisie-rung von Pattern-Languages“ [Schobert 2005] CoPE bietet die Möglichkeit Pattern mit deren Komponenten zu erfassen. Aufgrund der guten Visualisierung der Pattern und vor allem der Relatio-nen zwischen den Pattern, wurde CoPE als optimales Erfassungstool ausgewählt. Ein wesentlicher Punkt ist darüber hinaus noch die Möglich-keit, die Pattern in HTML- bzw. XML-Format ausgeben zu können. Damit ist die Machbarkeit eines geforderten Online-Patternalmanach gegeben und kann relativ einfach umgesetzt werden.


Abb. 6, Aufbau des kooperativen Pattern Editor CoPE [Schobert 2005]

5.3. Pattern Eingabe Um eine Gesamtübersicht der Pattern zu ermöglichen, musste eine sehr kompakte Erfassung der Pattern gewählt werden. Erst dadurch kann eine so umfangreiche Anzahl an Pattern auch übersichtlich visualisiert werden. Als Zusatznutzen für die deutsche Community wurde die Texteingabe in der Sprache „Deutsch“ gewählt. Die Literatur bietet hier nur teilweise sehr detailliert dokumentierte Pattern in englischer Sprache an. Es ist damit für jedermann möglich, sich schnell und einfach einen Überblick sowohl über den Gesamtbereich als auch über einzelne Kategorien und Problemberei-che zu machen. Auch das Einarbeiten für einen Fachfremden in den HCI-Bereich wird dadurch erheblich erleichtert. Alle gesichteten und für diesen Bereich relevante Pattern wurden unter Angabe von folgenden Parametern erfasst:


Pattern-ID + Pattern-Name eindeutige Kennung des Pattern + Bezeichnung Damit ist eine eindeutige Zuordnung der Pattern zu den jeweiligen Quellen gegeben. Folgende ID-Normen werden verwendet: JTxx <Name> JT: Pattern von Jenifer Tidwell aus Designing In

terfaces [Tidwell 2006] xx: Patternnummer aus Literatur <Name>: Originalbezeichnung

VDxx <Name> VD: Douglas van Duyne aus The design of Sites

[van Duyne, 2002] xx: Patternnummer aus Literatur <Name>: Originalbezeichnung

MW <Name> MW: Pattern von Martin van Welie aus Web Design

patterns [van Welie 2007] <Name>: Originalbezeichnung

IGxx <Name> IG: Pattern von Ian Graham aus A pattern langua

ge for web usability [Graham 2003] xx: Patternnummer aus Literatur <Name>: Originalbezeichnung

EP03 <Name> EP03: Pattern aus EuroPLoP ‘03

<Name>: Originalbezeichnung EP05 <Name> EP05: Pattern aus EuroPLoP ‘05

<Name>: Originalbezeichnung Autor Name des Patternautors Seite oder Artikel Stammt der Pattern aus einem Buch eines angeführten

Autors, so ist hier die Seitenangabe des Pattern zu fin-den, anderenfalls ist ein Verweis auf den Artikel hinter-legt.

Summary: Kurze, sehr kompakte Zusammenfassung in deutscher

Sprache. Diese bezieht sich hauptsächlich auf In-tent/Problem und Solution der Patterndokumentationen.


Diese Erfassung ermöglich darüber hinaus, aufgrund der Vereinheitli-chung der Dokumentation, ein einfaches Vergleichen der Pattern aus un-terschiedlichen Pattern-Languages.

5.4. Relationen intern/extern Die Pattern stehen zueinander in Relation, d.h. sie benutzen sich gegen-seitig (in einer Pattern-Language), oder sie korrespondieren in ihrer Funk-tionalität (verschiedene Pattern-Languages). Mittels dem Pattern-Editor CoPE können diese Relationen gut erfasst und gut visualisiert werden. intern: Bei einem ersten Scann der erstellten Patternsammlung wurden die Pat-tern auf interne Relationen (d.h. Relationen innerhalb einer Pattern-Language eines Autors) untersucht. Zum überwiegenden Teil mussten diese aus dem Kontext der Patternbeschreibung herausgearbeitet wer-den. Nur bei wenigen Autoren sind diese explizit in einem eigenen Pat-ternabschnitt angeführt (z.B. bei van Duyne). In CoPE sind diese Relationen mit dem Label: u (used) erfasst und geben über gerichtete Graphen die Benutzung der Pattern durch andere Pattern an.

Abb. 7, Beispiel für eine „u“sed Relation


extern: In einem weiteren Scann wurden die Pattern verschiedener Pattern-Languages auf ihre externen Relationen (d.h. Relationen zu Pattern frem-der Pattern-Languages) hin überprüft. Eine Angabe dieser Relationen fehlt zur Gänze in der Beschreibungen der Pattern. Dies wird von den Pattern-Autoren sehr vernachlässigt, die sich nur auf die eigene Pattern-Language konzentrieren. In CoPE sind diese Relationen mit dem Label: c (correspond) erfasst und zeigen gleiche Funktionalitäten von Pattern aus verschiedenen Pattern-Languages auf. Zur besseren visuellen Unterscheidung sind diese Gra-phen in doppelter Strichbreite ausgeführt.

Abb. 8, Beispiel für eine „c“orrespond Relation

5.5. Klassifizierungsschema Zur Erstellung einer gesamtheitlichen, Autor übergreifenden Pattern-Karte musste ein einheitliches Klassifizierungsschema erarbeitet werden, dass auf alle Pattern zur Anwendung kommen kann. Die gesammelten Pattern wurden dabei aus ihrer individuellen Klassifizierung herausgelöst, jeweils neu klassifiziert und in das erarbeitete einheitliche Klassifizierungsschema eingebracht. Jan Borchers zeigt in seinem Buch „A Pattern Approach on Interaction Design“ [Borchers 2001] drei Dimensionen auf, gemäss denen Patterns seiner Ansicht nach klassifiziert werden sollten.


Abb. 9, Klassifizierungsansatz, [Borchers 2001] S. 38

Level of abstraction Task: sehr umfangreiche Pattern, die eine ganze Aufgabe

beinhalten

Style: detailliertere Pattern, die Themen bereits konkret be-schreiben

Objects: behandeln bereits konkrete low-level Schnittstellen-Objekte

Function Perception: behandeln Fragen der Schnittstellenausgabe

Manipulation: handeln mit Schnittstelleneingaben, bzw. der Manipulati-

on von Applikationsdaten

Navigation: Navigation durch die Applikation Physical dimension Space: diese Pattern adressieren das Layout einer Applikation

Sequence: behandeln Abläufe (Dialogsequenzen)

Time: Pattern zeigen Zeitabläufe (Animationstechniken)


Einheitliches Klassifizierungsschema Für eine Klassifizierung, der im Rahmen dieser Arbeit gesammelten HCI-Pattern, ist der Ansatz von Borchers ungenügend. Um diese Anzahl an Pattern übersichtlich klassifizieren zu können, sind auch die Ansätze von Tidwell und van Duyne nicht zielführend, da sie noch zu wenig Struktur für diesen doch relativ umfangreichen HCI-Pattern Almanach bieten. Die Klassifizierung der gesammelten HCI-Pattern wird daher in zwei Ebe-nen vorgenommen. Die erste, grobe Strukturierung der Patterns erfolgt nach dem Vorschlag von Ziegler in „Navigationsmuster – Pattern-Systeme auf Basis von Struk-turabbildungen“ [Ziegler 2004] mit einer Unterteilung der Pattern in vier Hauptgruppen:

I. Anwendungsmuster

II. Contentmuster und funktionale Muster

III. Navigationsmuster

IV. Interaktions- und Präsentationsmuster

Natürlich ist auch diese Klassifizierung noch wesentlich zu grob. Daher werden in der zweiten Ebene die Ansätze von Tidwell [Tidwell 2006] und van Duyne [van Duyne, 2002] aufgegriffen und verallgemeinert um damit eine „übergreifende“ Klassifizierung in der gewünschten Granularität zu erreicht.


Das Ergebnis der erarbeiteten Klassifizierung ist nun:

I. Anwendungsmuster

Muster auf dieser Ebene stellen gebräuchliche Applikationstypen dar (et-wa Buchhaltungssysteme vs. Textverarbeitung) oder im Fall von auf In-formationsvermittlung orientierten Systemen wie Websites, unterschiedli-che Genres.

I.I. Anwendungstypen

Beschreibt, wie eine leistungsfähige Homepage entworfen wird, und wie damit den Kundenwünschen entsprochen werden kann.

I.II. Site Genres

Alles über “building sites”. Es beschreibt den einzigartigen As-pekt jeder „site genre“ Präsentation und hilft bei der Auswahl von Detailpattern.

II. Contentmuster und funktionale Muster

Diese Ebene beschreibt typische Inhaltsstrukturen, wie z. B. die Organisa-tion des Inhalts einer Online-Zeitschrift gegenüber einer Produktübersicht. Funktionale Muster können typische Geschäftsvorfälle oder –prozesse, wie z.B. eine Online-Zahlungstransaktion, abbilden.

II.I. Organizing the Content

Zeigt die Anwendung von Informationsarchitektur an hoch in-teraktiven Interfaces, behandelt unterschiedliche Organisati-onsmodelle und das Anzeigen von Inhalten, und wie Fenster, Panels und Seiten am besten verwendet werden.

„Dividing Stuff up“ –Trennen des Applikationsinhaltes von der eigentlichen physischen Struktur.

„Physical Structure“ – gibt die Präsentation des Inhaltes in Sei-ten, Fenster und Felder.


II.II. Organizing the Page

Diese Pattern beschreiben das Layout und das Positionieren der Seitenelemente. Sie zeigen, wie Bedeutung durch das ein-fache Platzieren der Objekte am richtigen Platz transportiert werden kann.

II.III. E-Commerce

Diese Gruppe diskutiert, wie sie auf Ihrer E-Commerce Websei-te die best mögliche Kundenzufriedenheit erzeugen, sowie wei-terführende und optionale Funktionen, die auf einer Web-Site zusätzlich inkludiert werden könnten.

II.IV. Security

Alle für das Thema „Sicherheit“ relevante Pattern sind in dieser Gruppe zusammengefasst. Da dem Thema Security immer mehr Bedeutung zukommt, wird dieser Bereich in Zukunft wohl noch sehr stark anwachsen.

II.IV. Help / Error

In dieser Gruppe sind alle Pattern zusammengefasst, die dem User eine Unterstützung im Handling der Anwendung und bei der korrekten Fehlerabhandlung bieten.

III. Navigationsmuster

Hier werden Navigationsstrukturen beschrieben, die von der späteren Darstellung der Navigation z.B. in Form von Menüs, Navigationsleisten oder interaktiven Bäumen, sowie der Interaktion mit diesen Elementen abstrahiert sind.

III.I. Navigation

Navigation ist das zentrale Thema. Hier werden Pattern be-schrieben, um sich auf dem Interface zu bewegen (zwischen Seiten und Fenstern).


III.II. Searching

Damit entwerfen Sie die Interaktion mit Suchfunktionen, um die Suche für die Kunden effektiver zu gestalten.

IV. Interaktions- und Präsentationsmuster

Diese beiden Ebenen beziehen sich auf Interaktionsformen (wie z.B. in den gängigen GUI-Interaktionsobjekten definiert) und wiederkehrende Formen der visuellen Präsentation von Inhalten.

IV.I. Basic Interactions / Actions

Kommandos und Aktionen werden besprochen. Diese Pattern werden benutzt um das „Doing“ der Interfaces zu beschreiben.

IV.II. Showing Complex Data

Die Gruppe beinhaltet Pattern für Bäume, Tabellen, Diagram-me und genereller Graphikinformation. Sie diskutieren die kog-nitiven Aspekte um Daten zu präsentieren, und wie diese für die Kommunikation von Wissen und Bedeutung benutzt wer-den.

IV.III. Inputs / Selections

Behandelt Formulare, Steuerelementen und Auswahlmöglich-keiten. Diese Techniken und Patterns werden oft in WYSIWYG-Graphikeditoren und Texteditoren benutzt.

IV.IV. Look Good / Design

Ästethik und “fit-and-finish” kommen hier zur Sprache. Gra-phikdesign Prinzipien und Patterns zum Aufpolieren der Inter-faces werden benutzt.

Tab. 4, übergreifende Klassifizierung


6. Almanach für HCI-Pattern

6.1. Patternbeschreibung Wie im Lösungsüberblick (siehe 5. Lösungsüberblick) bereits beschrieben, wurden alle HCI-Pattern im Patterneditor CoPE (Cooperative Pattern Edi-tor) mit den entsprechenden Parametern erfasst.

Abb. 10, Patternansicht in CoPE von „VDH1 Process Funnel“

Beschreibung der Markierungspunkte: # 1 Pattern-ID + Pattern-Name

# 2 Autor des Pattern

# 3 Seite oder Artikel

# 4 deutsches Summary

# 5 interne Patternrelation „u“ses zu „VDE1 Site Branding“

# 6 externe Patternrelation „c“orrespond zu „MW Wizard“

# 7 Visualisierung eines Pattern „VDB4 Task-based-organisation“

# 8 Visualisierung der internen Relation von Pattern „VDB4 Task-based-organisation“ zu Pattern „VDH1 Process Funnel“

# 9 Visualisierung der externen Relation von Pattern „VDH1 Process Funnel“ zu Pattern „MW Wizard“


alternative Bearbeitungs-Ansicht für Pattern

Abb. 11, alternative Patternansicht – Bearbeitung „VDH1 Process Funnel“

Bearbeitung und Visualisierung der externen Relation „c“orrespond

Abb. 12, Pattern mit externer Relation „VDH1 Process Funnel“

Bearbeitung und Visualisierung der internen Relation „u“ses

Abb. 13, Pattern mit interner Relation


6.2. Pattern-Volumes Zur Darstellung der unterschiedlichen Pattern-Karten wurden drei Volu-mes erstellt, und auf dem beigelegten Datenträger (CD) abgelegt (siehe Anhang: CD-Inhaltsverzeichnis). Volume für Autoren: „HCI-Pattern Autors“ In diesem Volume sind alle Pattern der Autoren: Tidwell, van Duyne, van Welie und Graham erfasst. Diese sind in vier Teilkarten je Autor inklusive der internen Relationen dargestellt. Die Organisation der Pattern je Karte basiert auf der autor-individuellen Klassifizierung. Volume für Gesamtkarte: „HCI-Pattern gesamt“ Almanach aller gesammelten HCI-Pattern. Die gemeinsame Visualisie-rung der Pattern auf der Patternkarte erfolgt anhand der neu erarbeiteten übergreifenden Klassifizierung. Alle internen und externen Relationen sind dabei angeführt und bieten gemeinsam mit den Pattern eine Gesamtüber-sicht über den aktuellen Stand des Bereichs HCI-Pattern an. Volume für Teilkarten „HCI-Pattern Kategorien“ Als Grundlage hierfür dient wiederum die übergreifende Klassifizierung. Je Kategorie wurde eine eigene Teilkarte erstellt, worauf die entsprechenden Pattern mit deren Relationen visualisiert sind.

Abb. 14, Volume Auswahl in CoPE


6.3. Patternkarte je Autor Dieser Almanach für HCI-Pattern setzt auf den Pattern-Languages der in diesem Bereich wichtigsten Autoren auf (siehe 4.1 Quellen). Die Visuali-sierung der einzelnen Pattern-Languages stellt einen ersten Einstieg in diesen Bereich dar und sollte einen grundlegenden Überblick verschaffen. Die Pattern der einzelnen Autoren sind dabei farblich unterschieden und entsprechend der individuellen Autor-Klassifizierung organisiert. Die Visu-alisierung der internen Relationen lässt einen Schluss über die gegensei-tige Verwendung der Patterns zu und zeigt bereits deutlich, durch die Summe der angegebenen Relationen, inwieweit der Autor auf interne Re-lationen wert legt und diese herausarbeitet. Jenifer Tidwell

Abb. 15, Farbgebung für Autor: Tidwell

Douglas K. van Duyne

Abb. 16, Farbgebung für Autor: van Duyne

Martijn van Welie

Abb. 17, Farbgebung für Autor: van Welie

Ian Graham

Abb. 18, Farbgebung für Autor: Graham


In CoPE wurde für die einzelnen Autoren Teildiagramme angelegt, worauf die Pattern angeordnet sind.

Abb. 19, Teildiagramme je Autor in CoPE

Die Pattern-Karten je Autor befinden sich auf dem beigelegten Datenträ-ger (CD) als CoPE-Volume und Diagramm (siehe Anhang: CD-Inhaltsverzeichnis).


Jenifer Tidwell Designing Interfaces [Tidwell 2006]

Abb. 20, visualisierte Pattern-Language “Tidwell”

GETTING AROUND

ORGANIZING THE CONTENT

ORGANIZING THE PAGE

SHOWING COMPLEX DATA

DOING THINGS

GETING INPUT FROM USERS

BUILDERS AND EDITORS MAKING IT LOOK GOOD


Douglas K. van Duyne The design of Sites [van Duyne, 2002]

Abb. 21, visualisierte Pattern-Language “van Duyne”

Site Genres

Building Trust and Credibility Designing Effective Page Layouts

Advanced E-Commerce Basic E-Commerce

Making Navigation Easy Creating a Navigation Framework

Creating a Navigation Framework

Speeding Up Your Site

Helping Customers Complete Tasks

Writing and Managing Content


Martijn van Welie Web Design patterns [van Welie 2007]

Abb. 22, visualisierte Pattern-Language „van Welie“

SITE TYPES

VISUAL DESIGN BASIC PAGE TYPES

ECOMMERCE NAVIGATION

SEARCHING

BASIC INTERACTION

MANAGIN COLLECTIONS

PAGE ELEMENTS


Ian Graham: A pattern language for web usability [Graham 2003]

Abb. 23, visualisierte Pattern-Language „Graham“

Getting Started on Your Site

Enhancing Usability

Adding Detail

Dealing with Workflow and Security


6.4. Gesamte Patternkarte In der übergreifenden HCI-Pattern-Karte sind sämtliche gesammelten Pat-tern eingearbeitet. Die Pattern wurden dabei aus ihrer ursprünglichen au-tor-individuellen Klassifizierung herausgelöst (wie unter Punkt 5. Lösungs-überblick bereits beschrieben) und in die erarbeitete, übergreifende Klas-sifizierung neu eingefügt. Gesamtheitliche Patternlanguage Das Ergebnis dieses Vorgehens ergibt eine übergreifende, gesamtheitli-che visualisierte Pattern-Language mit den Pattern aller Autoren, inklusive aller internen und externen Relationen. Die Pattern-Karte ist in vier Schichten (4 Hauptgruppen) gegliedert (Abb. 24). Jede dieser Schichten ist wiederum in unterschiedliche Katego-rien unterteilt. Schicht 1: Anwendungsmuster

- Anwendungstypen - Site Genres

Schicht 2: Contentmuster und funktionale Muster

- Organizing the Content - Organizing the Page - E-Commerce - Security - Help / Error

Schicht 3: Interaktions- und Präsentationsmuster

- Basic Interaction / Actions - Showing Comlpex Data - Inputs / Selection - Design / Look Good

Schicht 4: Navigationsmuster

- Navigation - Searching


Bei der Darstellung der Gesamt-Pattern-Karte auf einer A4 Seite (Abb. 24) sind viele Details nicht mehr klar erkennbar. Diese Pattern-Karte stellt da-her eine grobe Gesamtübersicht dar, wobei sich der Fokus dieser Darstel-lung auf folgende Punkte konzentriert:

� Vier-Schichtmodell

� Anordnung der Kategorien

� Aufzeigen der Relationen zwischen den Kategorien

� Verschränkung der Kategorien untereinander

Verschränkung von Kategorien Durch die kreisförmige/ovale Anordnung der Kategorien und der visuali-sierten Relationen lassen sich schon anhand der optischen Verlinkung zwischen den Kategorien die Verschränkung dieser gut erkennen (Abb. 24, Tab. 5). D.h. ein sehr dichtes Netzwerk an Graphen zwischen zwei Kategorien bedeutet, dass zwischen diesen Kategorien eine enge Bin-dung besteht und die Pattern der Kategorien sich gegenseitig intensiv nut-zen (uses-Relation). Die „Gesamte Pattern-Karte“ befindet sich auf dem beigelegten Datenträ-ger (CD) als CoPE-Volume und Diagramm (siehe Anhang: CD-Inhaltsverzeichnis)


Abb. 24, visualisierte Gesamt-Pattern-Language

Schicht 4

Schicht 3

Schicht 2

Schicht 1

Anwendungstypen Site Genres

Organising the Content

Organising the Page

E-Commerce

Security

Help & Error

Designing / Look Good

Input / Selection

Showing Complex Data

Navigation

Searching

Basic Interaction


Analyseergebnis der Relationen aus der Gesamt-Pattern-Karte Verlinkung der Kategorien untereinander: In der folgenden Tabelle (Tab 5) sind die Relationen der Kategorien un-tereinander herausgearbeitet. Die Tabelle ist so aufgebaut, dass je Kate-gorie die Anzahl der Relationen zu allen anderen Kategorien angeführt ist. Dadurch sind die Relationen zwischen den Kategorien zwar redundant angeführt, dies erhöht aber sehr die Übersichtlichkeit der Tabelle. Die Anzahl an Relationen zwischen den Kategorien ist in vier Häufigkeitsstufen eingeteilt, mit folgender farblicher Kennzeichnung in der Tabelle:

< 10 10 – 20 20 – 30 30 – 40

Kategorie Kategorie Relationen Anwendungstypen Site Genres < 10 Anwendungstypen Organizing the Content 10 - 20 Anwendungstypen Organizing the Page < 10 Anwendungstypen E-Commerce < 10 Anwendungstypen Security < 10 Anwendungstypen Help / Error < 10 Anwendungstypen Basic Interaction / Actions < 10 Anwendungstypen Showing Comlpex Data < 10 Anwendungstypen Inputs / Selection < 10 Anwendungstypen Design / Look Good < 10 Anwendungstypen Navigation 10 - 20 Anwendungstypen Searching < 10

Site Genres Anwendungstypen < 10 Site Genres Organizing the Content 20 - 30 Site Genres Organizing the Page 10 - 20 Site Genres E-Commerce 20 - 30 Site Genres Security < 10 Site Genres Help / Error < 10 Site Genres Basic Interaction / Actions 10 - 20 Site Genres Showing Comlpex Data < 10 Site Genres Inputs / Selection 10 - 20 Site Genres Design / Look Good 10 - 20 Site Genres Navigation 20 - 30 Site Genres Searching 10 - 20

Organizing the Content Anwendungstypen 10 - 20 Organizing the Content Site Genres 20 - 30 Organizing the Content Organizing the Page 30 - 40 Organizing the Content E-Commerce 20 - 30 Organizing the Content Security < 10


Organizing the Content Help / Error < 10 Organizing the Content Basic Interaction / Actions 10 - 20 Organizing the Content Showing Comlpex Data 10 - 20 Organizing the Content Inputs / Selection < 10 Organizing the Content Design / Look Good < 10 Organizing the Content Navigation 10 - 20 Organizing the Content Searching < 10

Organizing the Page Anwendungstypen < 10 Organizing the Page Site Genres 10 - 20 Organizing the Page Organizing the Content 30 - 40 Organizing the Page E-Commerce 20 - 30 Organizing the Page Security < 10 Organizing the Page Help / Error < 10 Organizing the Page Basic Interaction / Actions 10 - 20 Organizing the Page Showing Comlpex Data < 10 Organizing the Page Inputs / Selection < 10 Organizing the Page Design / Look Good 10 - 20 Organizing the Page Navigation 10 - 20 Organizing the Page Searching < 10

E-Commerce Anwendungstypen < 10 E-Commerce Site Genres 20 - 30 E-Commerce Organizing the Content 20 - 30 E-Commerce Organizing the Page 20 - 30 E-Commerce Security < 10 E-Commerce Help / Error 10 - 20 E-Commerce Basic Interaction / Actions 10 - 20 E-Commerce Showing Comlpex Data 10 - 20 E-Commerce Inputs / Selection < 10 E-Commerce Design / Look Good < 10 E-Commerce Navigation 10 - 20 E-Commerce Searching < 10

Security Anwendungstypen < 10 Security Site Genres < 10 Security Organizing the Content < 10 Security Organizing the Page < 10 Security E-Commerce < 10 Security Help / Error < 10 Security Basic Interaction / Actions < 10 Security Showing Comlpex Data < 10 Security Inputs / Selection < 10 Security Design / Look Good < 10 Security Navigation < 10 Security Searching < 10

Help / Error Anwendungstypen < 10 Help / Error Site Genres < 10 Help / Error Organizing the Content < 10 Help / Error Organizing the Page < 10


Help / Error E-Commerce 10 - 20 Help / Error Security < 10 Help / Error Basic Interaction / Actions < 10 Help / Error Showing Comlpex Data < 10 Help / Error Inputs / Selection 10 - 20 Help / Error Design / Look Good < 10 Help / Error Navigation 10 - 20 Help / Error Searching < 10

Basic Interaction / Actions Anwendungstypen < 10 Basic Interaction / Actions Site Genres 10 - 20 Basic Interaction / Actions Organizing the Content 10 - 20 Basic Interaction / Actions Organizing the Page 10 - 20 Basic Interaction / Actions E-Commerce 10 - 20 Basic Interaction / Actions Security < 10 Basic Interaction / Actions Help / Error < 10 Basic Interaction / Actions Showing Comlpex Data 10 - 20 Basic Interaction / Actions Inputs / Selection < 10 Basic Interaction / Actions Design / Look Good < 10 Basic Interaction / Actions Navigation 10 - 20 Basic Interaction / Actions Searching 10 - 20

Showing Comlpex Data Anwendungstypen < 10 Showing Comlpex Data Site Genres < 10 Showing Comlpex Data Organizing the Content 10 - 20 Showing Comlpex Data Organizing the Page < 10 Showing Comlpex Data E-Commerce 10 - 20 Showing Comlpex Data Security < 10 Showing Comlpex Data Help / Error < 10 Showing Comlpex Data Basic Interaction / Actions 10 - 20 Showing Comlpex Data Inputs / Selection < 10 Showing Comlpex Data Design / Look Good < 10 Showing Comlpex Data Navigation < 10 Showing Comlpex Data Searching < 10

Inputs / Selection Anwendungstypen < 10 Inputs / Selection Site Genres 10 - 20 Inputs / Selection Organizing the Content < 10 Inputs / Selection Organizing the Page < 10 Inputs / Selection E-Commerce < 10 Inputs / Selection Security < 10 Inputs / Selection Help / Error 10 - 20 Inputs / Selection Basic Interaction / Actions < 10 Inputs / Selection Showing Comlpex Data < 10 Inputs / Selection Design / Look Good 10 - 20 Inputs / Selection Navigation 10 - 20 Inputs / Selection Searching < 10

Design / Look Good Anwendungstypen < 10 Design / Look Good Site Genres 10 - 20 Design / Look Good Organizing the Content < 10


Design / Look Good Organizing the Page 10 - 20 Design / Look Good E-Commerce < 10 Design / Look Good Security < 10 Design / Look Good Help / Error < 10 Design / Look Good Basic Interaction / Actions < 10 Design / Look Good Showing Comlpex Data < 10 Design / Look Good Inputs / Selection 10 - 20 Design / Look Good Navigation 20 - 30 Design / Look Good Searching < 10

Navigation Anwendungstypen 10 - 20 Navigation Site Genres 20 - 30 Navigation Organizing the Content 10 - 20 Navigation Organizing the Page 10 - 20 Navigation E-Commerce 10 - 20 Navigation Security < 10 Navigation Help / Error 10 - 20 Navigation Basic Interaction / Actions 10 - 20 Navigation Showing Comlpex Data < 10 Navigation Inputs / Selection 10 - 20 Navigation Design / Look Good 20 - 30 Navigation Searching 10 - 20

Searching Anwendungstypen < 10 Searching Site Genres 10 - 20 Searching Organizing the Content < 10 Searching Organizing the Page < 10 Searching E-Commerce < 10 Searching Security < 10 Searching Help / Error < 10 Searching Basic Interaction / Actions 10 - 20 Searching Showing Comlpex Data < 10 Searching Inputs / Selection < 10 Searching Design / Look Good < 10 Searching Navigation 10 - 20

Tab. 5, Anzahl der Relationen zwischen den Kategorien


6.5. Patternkarte je Kategorie Wie bereits vorweg beschrieben, wurden sämtliche HCI-Pattern neu klas-sifiziert. Diese Klassifizierung ist auch im Patterneditor übertragen. Jeder Pattern ist dabei einer der Klassifizierung entsprechenden Sequenz zuge-ordnet. Diese Kategorien sind in eigenen Detailkarte visualisiert. Da diese Teilkarten bei weitem nicht so umfangreich wie die Gesamtkarte sind, lassen sich darauf auch mehr Details der visualisierten HCI-Pattern und der zwischen ihnen existierenden Relationen erkennen. In CoPE wurde in einem separatem Volume für die einzelnen Kategorien Teildiagramme der Pattern erstellt. Die Grundlage der Anordnung der Pat-tern lieferte dabei der in CoPE implementierte Forced-Layout Algorithmus, der die Patternknoten im Diagramm automatisch anordnet.

„Der Forced-Layout Algorithmus ist stark an den GEM-Algorithmus von [Frick 1994] angelehnt. Der GEM-Algorithmus ist eine Kombination eines Spring Embedder Algorithmus, der ein Gleichgewicht von anziehen-den und abstoßenden Kräften im Graphen herstellt, und eines Simulated Annealing Algorithmus, der über Abkühlung ein minimale Gesamtenergie des Systems einstellt.“ [Schobert 2005] Eine ausführliche Beschreibung des Algorithmus ist unter [Schobert 2005; Seite 46] nachzulesen.

Abb. 25, Teildiagramme je Kategorie in CoPE


Kategorie: Anwendungstypen

Abb. 26, Teildiagramm Kategorie: Anwendungstypen


Kategorie: Site Genres

Abb. 27, Teildiagramm Kategorie: Site Genres


Kategorie: Organizing the Content

Abb. 28, Teildiagramm Kategorie: Organizing the Content


Kategorie: Organizing the Page

Abb. 29, Teildiagramme Kategorie: Organizing the Page


Kategorie: E-Commerce

Abb. 30, Teildiagramm Kategorie: E-Commerce


Kategorie: Security

Abb. 31, Teildiagramm Kategorie: Security


Kategorie: Help and Error

Abb. 32, Teildiagramm Kategorie: Help and Error


Kategorie: Basic Interactions

Abb. 33, Teildiagramm Kategorie: Basic Interactions


Kategorie: Showing complex data

Abb. 34, Teildiagramm Kategorie: Showing complex data


Kategorie: Inputs / Selection

Abb. 35, Teildiagramm Kategorie: Inputs / Selection


Kategorie: Designing / Look Good

Abb. 36, Teildiagramm Kategorie: Designing / Look Good


Kategorie: Navigation

Abb. 37, Teildiagramm Kategorie: Navigation


Kategorie: Searching

Abb. 38, Teildiagramm Kategorie: Searching


Erkenntnisse: Aus den Patternkarten je Kategorie lassen sich nun folgende wichtigen Erkenntnisse ableiten: � Community - Kommunikation

Aufgrund der übersichtlichen Patternkarten je Kategorie, die eine Übersicht von Pattern für bestimmte Problembereiche bietet, wird die Kommunikation sowohl zwischen Entwicklern untereinander, als auch zwischen Entwicklern und „Leihen“ wesentlich erhöht.

� Patternverwendung

Jede Kategorie stellt eine Sammlung von Pattern der verschiedenen Autoren dar, d.h. Entwickler sind nicht auf einen Autor beschränkt, sondern können zwischen Pattern der verschiedensten Autoren wäh-len und die optimale Lösung für ihr Problem finden.

� Patternreife

Aus der Anzahl der „correspondierenden“ Pattern lässt sich gut der Grad der Patternreife ableiten, d.h. ein Problem mit einem entspre-chenden Lösungsweg wird von mehreren Autoren als relevant einge-stuft und dazu jeweils ein Pattern konstruiert. Ein sehr typisches Beispiel hierzu ist das Pattern:

J. Tidwell: WIZARD

Abb. 39, Pattern WIZARD von J.Tidwell


Dieses Problem mit der entsprechenden Lösung wird auch erkannt von:

van Duyne: PROCESS FUNNEL I. Graham: PIPELINE INTERACTION van Welie: WIZARD

Abb. 40, Ausschnitt aus Teildiagramm „Organizing the Content“

� Autorschwerpunkte

Klar zu erkennen ist in diesen Karten die Verankerung der Autoren im Bereich der HCI-Pattern. Autoren bilden in bestimmten Kategorien Schwerpunkte aus: z.B. die Kategorie „Showing complex data“ wird hauptsächlich von J.Tidwell und M.van Welie bestimmt. Andere Autoren spezialisieren sich in ihrer Ausführung auf eine Ka-tegorie, wie z.B. T. Wellhausen, der speziell für den Bereich „Sear-ching“ Pattern beschreibt.

� Relationen

Durch die Visualisierung der Kategorien werden die Relationen der Pattern zueinander sehr gut aufgezeigt. Auffallend ist, dass gerade bei Navigationsmuster (Kategorie: Navi-gation und Searching) die uses-Relationen innerhalb der Kategorie sehr ausgeprägt sind, d.h. dass sich diese Pattern gegenseitig inten-siv nutzen. Die Relationen zwischen den Kategorien sind besser auf der Ge-samtansicht der HCI-Pattern ersichtlich (Abb. 24).


6.6. Almanach im XML-Format Die gesamte Sammlung an HCI-Pattern, die dieser Arbeit zu Grunde lie-gen, sind zusätzlich im XML-Format beigefügt. Der große Vorteil des XML-Formats liegt darin, dass dieser Pattern-Almanach mit Standardpro-gramme (Browser) aufgerufen und mittels Hyperlink „durchwandert“ wer-den kann. Als Patternkatalog fungiert hier die Datei „patternIndex.xml“, wo alle Pat-tern als direkter Link und mit deren „Intend“ angeführt werden (Abb. 41). Vom Index ausgehend kann direkt in die Pattern-Beschreibung bzw. Ka-tegoriepattern abgesprungen werden. Unter dem Punkt „Relatet Pattern“ (Abb. 44) kann unmittelbar zu relatet Pattern verzweigt werden. Der gesamte XML-Pattern Almanach ist dem beigelegten Datenträger (CD) hinzugefügt (siehe Anhang: CD-Inhaltsverzeichnis).

Abb. 41, Patternalmanach im XML-Format - MS Browser


Eine Übersicht über die HCI-Pattern je Kategorie geben die Kategorie-Pattern (Abb. 42). Innerhalb dieser Kategorie-Pattern kann wiederum di-rekt zu den konkreten Pattern abgesprungen werden (Abb. 43).

Abb. 42, Patternalmanach Kategorie-Pattern

Abb. 43, Kategorie-Pattern: SEARCHING


Die konkreten Pattern (Abb. 44) zeigen sich im Browser in folgender Aus-prägung (vgl. dazu 6.1 Patternbeschreibung, Abb. 10 Patternansicht in CoPE):

Abb. 44, Patternansicht im Browser von „VDD4 PERSONALIZED CONTENT“

Beschreibung der Markierungspunkte: # 1 Pattern-ID + Pattern-Name

# 2 Autor des Pattern

# 3 Seite oder Artikel

# 4 deutsches Summary

# 5 Hyperlinks zu „Related Pattern“

# 6 Hyperlink zum Pattern-Index (Gesamtübersicht)


7. Zusammenfassung / Ausblick Wie bereits in der Einleitung zu dieser Abschlussarbeit erwähnt, werden Pattern im HCI-Bereich als immer wichtiger erkannt. Sie stellen mittlerwei-le ein grundsätzliches und sehr effizientes Mittel für Entwickler dar, um relativ einfach, standardisierte Human-Computer-Interfaces zu erstellen. Nicht zu unterschätzen ist der Wert dieser Pattern als Basis für die Kom-munikation zwischen Entwickler und Auftraggeber. HCI-Pattern bilden da-bei ein Plattform, auf dessen Ebene eine gemeinsame Sprache für die gesamte Community gefunden wird. Damit können zum Beispiel Missver-ständnisse zwischen Entwicklern und Auftraggebern (die in der Praxis sehr oft vorkommen, und häufig Gründe für das Scheitern von Projekten darstellen) minimiert werden. Eines der größten Probleme im HCI-Bereich ist die Ignoranz der Autoren. Es gibt mittlerweile eine ganze Anzahl an Autoren, die sich mit dem HCI-Thema befassen. Jedoch arbeitet jeder Autor nur für sich, stellt nur eigens erarbeitete Pattern-Languages auf und ignoriert fremde Autoren beinahe zur Gänze. In dieser Abschlussarbeit wird nun eine aktuelle, bis Dato fehlende Ge-samtübersicht über den HCI-Bereich erstellt. Dabei wurde versucht, eine möglichst vollständige Übersicht über die relevanten Autoren und deren Pattern zu liefern. Durch die Erarbeitung einer allgemein gültigen Klassifizierung und der Einarbeitung der HCI-Pattern aller Autoren in dieses Klassifizierungs-Schema, wurde ein allgemein gültiger Ansatz einer übergreifenden Ge-samt-Pattern-Language geschaffen. Erst damit wird eine Orientierung und Übersicht im bereits sehr breiten Feld der HCI-Patterns und deren An-wendung möglich bzw. wesentlich erleichtert. Mit der umfassenden Analyse und Visualisierung der internen und exter-nen Pattern-Relationen wird der Zusammenhang der Pattern aufgezeigt. Von Interesse sind dabei Beziehungen von Pattern, die sich gegenseitig benutzen, und Pattern verschiedener Autoren, die gleiche Probleme refe-renzieren. Wie in vielen Abbildungen gezeigt wird, hat sich CoPE als sehr probandes Mittel zur Erfassung und Erstellung von Pattern-Karten herausgestellt. Die gesammelten und erfassten HCI-Pattern wurden mittels CoPE als Ge-samt-Pattern-Karte und in Kategorie-Karten übersichtlich dargestellt. Der erstellte HCI-Pattern Almanach ist dieser Arbeit in Form eines CoPE-Volumes und eines XML-Katalogs beigefügt.


Für die gesamte HCI-Community wäre es sehr förderlich, wenn zukünftig Autoren ihre Pattern nicht nur für ihre eigene Pattern-Language erstellen, sondern diese in einen Gesamtansatz einer übergreifenden „virutellen“ Pattern-Language einbringen würden. Eine exakte Analyse und klare Dar-stellung von internen und externen Relationen zu anderen Pattern und Autoren wäre eine große Erleichterung für Entwickler und Auftraggeber und würde für die gesamte Community eine wesentlichen Mehrwert der Pattern-Language bedeuten.


8. Anhang

8.1. Literaturverzeichnis [Alexander 1977] C. Alexander, S. Ishikawa, M. Silverstein, M. Jacobson, I. Fiksdahl-King, and S. Angel. A Pattern Language: Towns, Buildings, Construction. Ox-ford University Press, 1977. [Alexander 1979] C. Alexander. The Timeless Way of Building. Oxford University Press, 1979 [Apple 1992] Apple Computer. Macintosh Human Interface Guidelines. Addison-Wesley, 1992. [Barfield 1994] L. Barfield, W. van Burgsteden, R. Lanfermeijer, B. Mulder, J. Ossewold, D. Rijken, and P. Wegner. Interaction design at the Utrecht School of the Arts. SIGCHI Bulletin, 26(3):49–79, 1994. [Beck 1987] K. Beck and W. Cunningham. Using pattern languages for object-oriented programs. Technical Report CR-87-43, Tektronix, Inc., September 17, 1987. Presented at the OOPSLA’87 workshop on Specification and De-sign for Object-Oriented Programming. [Borchers 2000] Borchers J.: Artikel: Interaction Design Patterns: Twleve Theses, Internet http://www.hcipatterns.org/tiki-file_galleries.php / Public Documents / CHI2K-Borchers-Pattern.pdf [Borchers 2001] Borchers, J.: A Pattern Approach to Interaction Design. Chichester, USA: John Wiley & Sons 2001 [Erickson 2000] Tom Erickson, Lingua Francas for Design: Sacred Places and Pattern Languages, http://www.visi.com/~snowfall/LinguaFranca_DIS2000.html [Fincher 2003] Sally Fincher, „Perspectives on HCI Pattern: Concepts and Tools (intro-ducing PLML)“Interfaces, (56): 26-28, September 2003. http://www.bcs-hci.org.uk/interfaces.html


[Fincher] „Pattern-Gallery“ http://www.cs.ukc.ac.uk/people/staff/saf/patterns/gallery.html [Frick 1994] Frick, A. ; Ludwig, A. ; Mehldau, H.: A fast adaptive layout algorithm for undirected graphs. In:Proceedings of the DIMACS International Workshop on Graph Drawing (GD’94). Springer Lecture Notes in Computer Science 894, 1994, S. 388–403 [Gamma 1995] E. Gamma, R. Helm, R. Johnson, and J. Vlissides. Design Patterns: Ele-ments of Reusable. Object-Oriented Software. Addison-Wesley, 1995. [Graham 2003] Ian Graham, A Pattern Language for Web Usability. Pearson Education; 1st edition (January 31, 2003) [Helander 1997] M. Helander, T.K. Landauer & P. Prabhu (Eds.). Handbook of human-computer interaction. North-Holland: Elsevier Science Publishers [Henney 2003] Kevlin Henney, Dietmar Schütz. EuroPLoP ’03, Proceedings of the 8th European Conference on Pattern Languages of Programs, UVK Univer-sitätsverlag Konstanz GmbH 2003. [IEEE-Std.610.12-1990] IEEE Std 610.12-1990 (R2002), IEEE Standard Glossary of Software Engineering Terminology, IEEE, 1990. [Longshaw 2005] Andy Langshaw, Uwe Zdun. EuroPLoP ’05, Proceedings of the 10th Euro-pean Conference on Pattern Languages of Programs, UVK Universitäts-verlag Konstanz GmbH 2005. [Norman 1986] D. A. Norman and S. W. Draper. User-Centered System Design: New Perspectives on Human-Computer Interaction. Lawrence Erlbaum Associ-ates, Hillsdale, NJ, 1986. [Schobert 2005] Wolfram J.H. Schobert. Ansätze zur Visualisierung von Pattern-Languages. Lehrgebiet Praktische Informatik VI, FernUniversität Hagen [Tidwell 2006] Jenifer Tidwell, Designing Interfaces, O'Reilly Media, Inc. 2005 (http://designinginterfaces.com/)


[van Duyne, 2002] Douglas K. von Duyne, James A. Landay, and Jason I. Hong, The design of Sites, Addison-Wesley 2002 [van Welie 2007] Martiin van Welie, Web Design patterns by M. van Welie, http://www.welie.com/patterns/index.html [wu WEB] Web Usibility; http://www.trireme-international.com/Wu/ [Ziegler 2004] Jürgen Ziegler, Markus Specker; Navigationsmuster – Pattern-Systeme auf Basis von Strukturabbildungen; in H. Selke, G. Szwillus (Hrsg.): Mensch & Computer 2004, Paderborn, München: Oldenbourg Verlag (http://mc.informatik.uni-hamburg.de/konferenzbaende/mc2004/mc2004_11_ziegler_specker.pdf)


8.2. Abbildungsverzeichnis Abb. 1, J. Tidwell, http://designinginterfaces.com/Closable_Panels.........18 Abb. 2, van Duyne, Pattern: Process Funnel ...........................................21 Abb. 3, van Welie, http://www.welie.com/patterns/index.html ..................24 Abb. 4, Graham, Pattern: Sense of location [wu WEB] ............................27 Abb. 5, Getting started on your site [Graham 2002] / [wu WEB] ..............28 Abb. 6, Aufbau des kooperativen Pattern Editor CoPE [Schobert 2005]..34 Abb. 7, Beispiel für eine „u“sed Relation ..................................................36 Abb. 8, Beispiel für eine „c“orrespond Relation ........................................37 Abb. 9, Klassifizierungsansatz, [Borchers 2001] S. 38.............................38 Abb. 10, Patternansicht in CoPE von „VDH1 Process Funnel“ ................43 Abb. 11, alternative Patternansicht – Bearbeitung „VDH1 Process Funnel“

..........................................................................................................44 Abb. 12, Pattern mit externer Relation „VDH1 Process Funnel“...............44 Abb. 13, Pattern mit interner Relation ......................................................44 Abb. 14, Volume Auswahl in CoPE ..........................................................45 Abb. 15, Farbgebung für Autor: Tidwell....................................................46 Abb. 16, Farbgebung für Autor: van Duyne..............................................46 Abb. 17, Farbgebung für Autor: van Welie ...............................................46 Abb. 18, Farbgebung für Autor: Graham..................................................46 Abb. 19, Teildiagramme je Autor in CoPE................................................47 Abb. 20, visualisierte Pattern-Language “Tidwell” ....................................48 Abb. 21, visualisierte Pattern-Language “van Duyne” ..............................49 Abb. 22, visualisierte Pattern-Language „van Welie“ ...............................50 Abb. 23, visualisierte Pattern-Language „Graham“ ..................................51 Abb. 24, visualisierte Gesamt-Pattern-Language.....................................54 Abb. 25, Teildiagramme je Kategorie in CoPE.........................................59 Abb. 26, Teildiagramm Kategorie: Anwendungstypen .............................60 Abb. 27, Teildiagramm Kategorie: Site Genres ........................................61 Abb. 28, Teildiagramm Kategorie: Organizing the Content ......................62 Abb. 29, Teildiagramme Kategorie: Organizing the Page ........................63 Abb. 30, Teildiagramm Kategorie: E-Commerce......................................64 Abb. 31, Teildiagramm Kategorie: Security ..............................................65 Abb. 32, Teildiagramm Kategorie: Help and Error....................................66 Abb. 33, Teildiagramm Kategorie: Basic Interactions...............................67 Abb. 34, Teildiagramm Kategorie: Showing complex data.......................68 Abb. 35, Teildiagramm Kategorie: Inputs / Selection ...............................69 Abb. 36, Teildiagramm Kategorie: Designing / Look Good.......................70 Abb. 37, Teildiagramm Kategorie: Navigation ..........................................71 Abb. 38, Teildiagramm Kategorie: Searching...........................................72 Abb. 39, Pattern WIZARD von J.Tidwell...................................................73 Abb. 40, Ausschnitt aus Teildiagramm „Organizing the Content“.............74 Abb. 41, Patternalmanach im XML-Format - MS Browser........................75 Abb. 42, Patternalmanach Kategorie-Pattern...........................................76 Abb. 43, Kategorie-Pattern: SEARCHING................................................76 Abb. 44, Patternansicht im Browser von „VDD4 PERSONALIZED

CONTENT“ .......................................................................................77


8.3. Tabellenverzeichnis Tab. 1, Anforderungen 14 Tab. 2, Problem – Anforderungsmatix 15 Tab. 3, Anforderungen – Autor Vergleich 29 Tab. 4, übergreifende Klassifizierung 42 Tab. 5, Anzahl der Relationen zwischen den Kategorien 58

8.4. CD-Inhaltsverzeichnis � Abschlussarbeit „Erstellung eines Pattern-Almanachs für HCI-Patterns“ als PDF-Datei

\Erstellung eines Pattern-Almanachs für HCI-Patterns.pdf � HCI-Patternalmanach Volume für den Patterneditor “CoPE” \volumes\HCI-Pattern gesamt (gesamte Patternkarte) \volumes\HCI-Pattern Autors (Patternkarte je Autor) \volumes\HCI-Pattern Kategorien (Patternkarte je Kategorie) HCI-Pattern in XML-Format

\XML-Almanach\patternIndex.xml (Gesamtindex) \XML-Almanach\KATEGORIE*.xml (Index je Kategorie)

\XML-Almanach\*.xml (Einzelpattern) � CoPE Patterneditor EXE-Programm des CoPE Patterneditor \CoPE V1.446.exe (in Version 1.446) � Patterndiagramme Patterndiagramme im PS-Format als CoPE Export.

\Diagramme\GESAMT.eps (Gesamtdiagramm) \Diagramme\Autor_*.eps (Diagramm je Autor) \Diagramme\Kat_*.eps (Diagramm je Kategorie)


8.5. Pattern-Übersicht nach Kategorie Anwendungstypen **p:IG28 Home Page** **p:MW HOMEPAGE** **p:MW WEB-BASED APPLICATION** **p:VDA11 ENABLING INTRANETS** **p:VDA10 WEB APPS THAT WORK** **p:VDC1 HOMEPAGE PORTAL** **p:VDC2 UP-FRONT VALUE PROPOSITION** Basic Interactions **p:EP05 Community Watch** **p:EP05 A Community of Individuals** **p:IG22 Symmetry and idempotence** **p:IG35 Back Button** **p:IG41 Feedback** **p:IG48 Sense of progress** **p:IG59 Broken buttons** **p:IG77 Button gravity** **p:JT44 Button Groups** **p:JT45 Action Panel** **p:JT46 Prominent "done" Button** **p:JT47 Smart Menu Items** **p:JT48 Preview** **p:JT49 Progress Indicator** **p:JT50 Cancelability** **p:JT51 Multi-Level Undo** **p:JT52 Command History** **p:JT53 Macros** **p:MW ACTION BUTTON** **p:MW ENLARGED CLICKAREA** **p:MW PAGING** **p:MW POLL** **p:MW SEND-A-FRIEND LINK** **p:MW THUMBNAIL** **p:VDH2 SIGN-IN/NEW ACCOUNT** **p:VDH3 GUEST ACCOUNT** **p:VDH4 ACCOUNT MANAGEMENT** **p:VDH5 PERSISTENT CUSTOMER SESSIONS** **p:VDK4 ACTION BUTTONS** **p:VDK5 HIGH-VISIBILITY ACTION BUTTONS**


Designing / Look Good **p:EP05 View Variants** **p:IG16 Aesthetics** **p:IG18 Priming and interference** **p:IG24 Site logo at top left** **p:IG27 No frames on public sites** **p:IG29 Trite fonts** **p:IG30 The human touch** **p:IG36 Follow standards** **p:IG38 KISS** **p:IG44 Short texts** **p:IG50 Acceptable wording** **p:IG51 The halt and the lame and the stranger at the door** **p:IG53 Use of color** **p:IG55 Content before graphics** **p:IG57 Words before icons** **p:IG58 White space separates content** **p:IG60 Magic margins** **p:IG69 Support color with spatial metaphor** **p:IG70 WYSIWYCU** **p:JT29 Color-Coded Sections** **p:JT30 Animated Transition** **p:JT38 right/left Alignment** **p:JT39 Diagonal Balance** **p:JT59 Row Striping** **p:JT88 Deep Background** **p:JT89 Few Hues Many Values** **p:JT90 Corner Treatments** **p:JT91 Borders that echo Fonts** **p:JT92 Hairlines** **p:JT93 Contrasting Font Weights** **p:JT94 Skins** **p:MW ALTERNATING ROW COLORS** **p:MW COLOR CODED SECTION** **p:MW FONT ENLARGER** **p:MW FOOTER BAR** **p:MW NEWS BOX** **p:VDE5 ABOUT US** **p:VDI4 EXPANDING-WIDTH SCREEN SIZE** **p:VDI5 FIXED-WIDTH SCREEN SIZE** **p:VDK11 FAMILIAR LANGUAGE** E-commerce **p:EP05 Hot or Not** **p:EP05 Valued Member** **p:IG42 Download time** **p:IG54 Tessellate graphics**


**p:IG61 Track multiple identical requests** **p:IG62 Unique names for pages, titles and meta-tags** **p:IG64 Store content in a database** **p:IG67 Cache transactions** **p:IG68 Return visitors** **p:MW CASE STUDY** **p:MW NEWSLETTER** **p:MW PRODUCT ADVISOR** **p:MW PRODUCT COMPARISON** **p:MW PRODUCT CONFIGURATOR** **p:MW PURCHASE PROCESS** **p:MW SHOPPING CART** **p:MW VIRTUAL PRODUCT DISPLAY** **p:VDF1 QUICK-FLOW CHECKOUT** **p:VDE2 E-MAIL SUBSCRIPTIONS** **p:VDF3 SHOPPING CART** **p:VDF2 CLEAN PRODUCT DETAILS** **p:VDF5 QUICK SHIPPING METHOD SELECTION** **p:VDF6 PAYMENT METHOD** **p:VDF7 ORDER SUMMARY** **p:VDF8 ORDER CONFIRMATION AND THANK-YOU** **p:VDF9 EASY RETURNS** **p:VDG1 FEATURED PRODUCTS** **p:VDG2 CROSS-SELLING AND UP-SELLING** **p:VDG3 PERSONALIZED RECOMMENDATIONS** **p:VDG4 RECOMMENDATION COMMUNITY** **p:VDG5 MULTIPLE DESTINATIONS** **p:VDG6 GIFT GIVING** **p:VDG7 ORDER TRACKING AND HISTORY** **p:VDL1 LOW NUMBERS OF FILES** **p:VDL2 FAST-DOWNLOADING IMAGES** **p:VDL3 SEPARATE TABLES** **p:VDL5 REUSABLE IMAGES** **p:VDL4 HTML POWER** Help and Error **p:EP03 Consumer Testimonials** **p:EP05 Escalating Detail** **p:EP05 Detailed Information** **p:IG17 Context-sensitive help** **p:IG32 Avatar** **p:IG33 Context-sensitive contact link** **p:JT20 Multi-Level Help** **p:JT78 Same-page Error Messages** **p:MW FREQUENTLY ASKED QUESTIONS (FAQ)** **p:MW HELP WIZARD** **p:MW INPUT ERROR MESSAGE** **p:MW MESSAGE RATINGS**


**p:MW TESTIMONIALS** **p:VDH7 FREQUENTLY ASKED QUESTIONS** **p:VDH8 CONTEXT-SENSITIVE HELP** **p:VDK12 PREVENTING ERRORS** **p:VDK14 PAGE NOT FOUND** **p:VDK13 MEANINGFUL ERROR MESSAGES** Inputs / Selection **p:EP03 Nutrimatic** **p:EP03 Pick'n'Choose** **p:EP05 Scripted Interaction** **p:IG49 Final slash on URLs** **p:IG65 Equal opportunity** **p:IG71 Mandatory fields** **p:JT62 New-item Row** **p:JT68 Forgiving Format** **p:JT69 Structured Format** **p:JT70 Fill-in-the-Blanks** **p:JT71 Input Hints** **p:JT72 Input Prompt** **p:JT73 Autocompletion** **p:JT74 Dropdown Chooser** **p:JT75 Illustrated Choices** **p:JT77 Good Defaults** **p:JT79 Edit-in-Place** **p:JT80 Smart Selection** **p:JT81 Composite Selection** **p:JT82 One-Off Mode** **p:JT83 Spring-loaded Mode** **p:JT84 Constrained Resize** **p:JT85 Magnetism** **p:JT86 Guides** **p:JT87 Paste Variations** **p:MW CONSTRAINT INPUT** **p:MW COUNTRY SELECTOR** **p:MW DATE SELECTOR** **p:MW FORM** **p:MW FORUM** **p:MW GUEST BOOK** **p:MW LANGUAGE SELECTOR** **p:VDD5 MESSAGE BOARDS** **p:VDF4 QUICK ADDRESS SELECTION** Navigation **p:EP03 Honeybee** **p:EP03 On The Button**


**p:EP05 Active Map** **p:EP05 Active Reference** **p:EP05 Automatic Generation of Navigation Elements** **p:EP05 Door** **p:EP05 Index** **p:EP05 Navigation** **p:IG15 Sense of location** **p:IG19 Structured menus** **p:IG20 The rhetoric of arrival and departure** **p:IG21 Canonical location** **p:IG23 Breadcrumbs** **p:IG25 Navigation bar** **p:IG31 Links to many sites** **p:IG34 Go back to a safe place** **p:IG37 Prisoner of war** **p:IG73 Oblique landmarks** **p:IG75 Sense of location in workflow** **p:IG76 Content is linked to navigation** **p:JT22 Global Navigation** **p:JT23 Hub and Spoke** **p:JT24 Pyramid** **p:JT26 Sequence Map** **p:JT27 Breadcrumbs** **p:JT28 Annotated Scrollbar** **p:JT31 Escape Hatch** **p:MW BREADCRUMBS** **p:MW DIRECTORY NAVIGATION** **p:MW DOORMAT NAVIGATION** **p:MW FACETED NAVIGATION** **p:MW FLY-OUT MENU** **p:MW HEADERLESS MENU** **p:MW HOME LINK** **p:MW ICON MENU** **p:MW MAIN NAVIGATION** **p:MW MAP NAVIGATOR** **p:MW META NAVIGATION** **p:MW MINESWEEPING** **p:MW OUTGOING LINKS** **p:MW OVERLAY MENU** **p:MW REPEATED MENU** **p:MW RETRACTABLE MENU** **p:MW SCROLLING MENU** **p:MW SHORTCUT BOX** **p:MW SPLIT NAVIGATION** **p:MW TEASER MENU** **p:MW TO-THE-TOP LINK** **p:MW TRAIL MENU** **p:VDB1 MULTIPLE WAYS TO NAVIGATE** **p:VDB2 BROWSABLE CONTENT** **p:VDB9 SITE ACCESSIBILITY**


**p:VDK1 UNIFIED BROWSING HIERARCHY** **p:VDK2 NAVIGATION BAR** **p:VDK6 LOCATION BREAD CRUMBS** **p:VDK7 EMBEDDED LINKS** **p:VDK8 EXTERNAL LINKS** **p:VDK9 DESCRIPTIVE, LONGER LINK NAMES** **p:VDK10 OBVIOUS LINKS** Organizing the content **p:EP03 Contuct us** **p:EP05 Room** **p:EP05 My Way or the Highway** **p:EP05 Document Type Hierarchy** **p:EP05 Content Hierarchy** **p:EP05 Decoupling of Content and Navigation** **p:EP05 Decoration** **p:EP05 Information Spreading** **p:IG13 User-centered site structure** **p:IG39 Exploit closure** **p:IG45 Anchors away** **p:IG52 Internationalization** **p:IG56 Natural metaphors** **p:IG78 Pipeline interaction** **p:JT13 Two-Panel Selector** **p:JT14 Canvas plus Palette** **p:JT15 One-Window Drilldown** **p:JT16 Alternative Views** **p:JT17 Wizard** **p:JT18 Extras On Demand** **p:JT19 Intriguing Branches** **p:MW ARTICLE PAGE** **p:MW BLOG PAGE** **p:MW BOOKING PROCESS** **p:MW CONTACT PAGE** **p:MW EVENT CALENDAR** **p:MW MULTINATIONAL SITE** **p:MW PERSONALIZED 'MY' SITE** **p:MW PROCESSING PAGE** **p:MW PRODUCT PAGE** **p:MW STEPPING** **p:MW WIZARD** **p:VDB3 HIERARCHICAL ORGANIZATION** **p:VDB4 TASK-BASED ORGANIZATION** **p:VDB5 ALPHABETICAL ORGANISZATION** **p:VDB6 CHRONOLOGICAL ORGANIZATION** **p:VDD2 CONTENT MODULES** **p:VDD4 PERSONALIZED CONTENT** **p:VDD9 DISTINCITVE HTML TITLES**


**p:VDD10 INTERNATIONALIZED AND LOCALIZED CONTENT** **p:VDH1 PROCESS FUNNEL** **p:VDI2 ABOVE THE FOLD** Organizing the page **p:EP05 Template Per View** **p:EP05 Channel-Specific Page Layout** **p:IG26 Three-region layout** **p:IG40 No modes** **p:IG47 Separate print pages** **p:IG43 Design pages for scanning** **p:IG46 No unpleasant surprises** **p:IG66 Avoid pre-emption** **p:IG79 Display the options** **p:JT21 Clear Entry Points** **p:JT25 Modal Panel** **p:JT32 Visual Framework** **p:JT33 Center Stage** **p:JT34 Titled Sections** **p:JT35 Card Stack** **p:JT36 Closable Panels** **p:JT37 Movable Panels** **p:JT40 Property Sheet** **p:JT41 Responsive Disclosure** **p:JT42 Responsive Enabling** **p:JT43 Liquid Layout** **p:JT72 Input Prompt** **p:JT78 Same-page Error Messages** **p:MW CENTER STAGE** **p:MW CUSTOMIZABLE WINDOW** **p:MW DOUBLE TAB** **p:MW GRID-BASED LAYOUT** **p:MW LIQUID LAYOUT** **p:MW NEWS TICKER** **p:MW PREMIUM CONTENT LOCK** **p:MW PRINTER-FRIENDLY PAGE** **p:MW TABS** **p:VDB7 POPULARITY-BASED ORGANIZATION** **p:VDD1 PAGE TEMPLATES** **p:VDD3 HEADLINES AND BLURBS** **p:VDD7 INVERSE-PYRAMID WRITING STYLE** **p:VDD8 PRINTABLE PAGES** **p:VDE1 SITE BRANDING** **p:VDH6 POP-UP WINDOWS** **p:VDI1 GRID LAYOUT** **p:VDI3 CLEAR FIRST READS** **p:VDI6 CONSISTENT SIDEBARS OF RELATED CONTENT**


**p:VDK3 TAB ROWS** Searching **p:EP03 Google** **p:EP05 Context Searches** **p:EP05 Deactivate Fields** **p:EP05 Dynamic Search Dialog** **p:EP05 Freestyle Search** **p:EP05 Intuitive Search Interface** **p:EP05 Refine Results** **p:EP05 Result Count Feedback** **p:EP05 Save Searches** **p:EP05 Search Bar** **p:EP05 Search Over All Fields** **p:EP05 Simple and Expert Search Dialog** **p:EP05 Static Search Dialog** **p:IG12 Site map** **p:IG14 Search box** **p:IG63 Context-dependent search categories** **p:MW ADVANCED SEARCH** **p:MW HOTLIST** **p:MW SEARCH AREA** **p:MW SEARCH BOX** **p:MW SEARCH RESULTS** **p:MW SEARCH TIPS** **p:MW SITE INDEX** **p:MW SITE MAP** **p:MW STORE LOCATOR** **p:MW TOPIC PAGES** **p:VDD6 WRITING FOR SEARCH ENGINES** **p:VDJ1 SEARCH ACTION MODULE** **p:VDJ2 STRAIGHTFORWARD SEARCH FORMS** **p:VDJ3 ORGANIZED SEARCH RESULTS** Security **p:EP03 Return Policy** **p:EP05 Lock and Key** **p:IG72 Security and encryption** **p:IG74 Paranoid security** **p:MW LOGIN** **p:MW REGISTRATION** **p:VDE3 FAIR INFORMATION PRACTICES** **p:VDE4 PRIVACY POLICY** **p:VDE6 SECURE CONNECTIONS**


Showing complex data **p:EP05 Imlicitly Linked Documents** **p:JT54 Overview Plus Detail** **p:JT55 Datatips** **p:JT56 Dynamic Queries** **p:JT57 Data Brushing** **p:JT58 Local Zooming** **p:JT60 Sortable Table** **p:JT61 Jump to Item** **p:JT63 Cascading Lists** **p:JT64 Tree-Table** **p:JT65 Multi-y Graph** **p:JT66 Small Multiples** **p:JT67 Treemap** **p:JT76 List Builder** **p:MW COLLECTOR** **p:MW IMAGE BROWSER** **p:MW IN-PLACE REPLACEMENT** **p:MW LIST SORTER** **p:MW LIST BUILDER** **p:MW OVERVIEW BY DETAIL** **p:MW PARTS SELECTOR** **p:MW TABLE FILTER** **p:MW TABLE SORTER** **p:MW VIEW** Site Genres **p:IG11 Classify your site** **p:MW ARTIST SITE** **p:MW AUTOMOTIVE SITE** **p:MW BRANDED PROMOTION SITE** **p:MW CAMPAIGN SITE** **p:MW COMMUNITY SITE** **p:MW CORPORATE SITE** **p:MW E-COMMERCE SITE** **p:MW MUSEUM SITE** **p:MW NEWS SITE** **p:MW PORTAL SITE** **p:VDA1 PERSONAL E-COMMERCE** **p:VDA2 NEWS MOSAICS** **p:VDA3 COMMUNITY CONFERENCE** **p:VDA4 SELF-SERVICE GOVERNMENT** **p:VDA5 NONPROFITS AS NETWORKS OF HELP** **p:VDA6 GRASSROOTS INFORMATION SITES** **p:VDA7 VALUABLE COMPAY SITES** **p:VDA8 EDUCATIONAL FORMUS** **p:VDA9 STIMULATION ARTS AND ENTERTAINMENT** **p:VDB8 CATEGORY PAGES**

Erstellung eines Pattern-Almanachs für HCI-Patterns · So um 1987 entdeckte der Bereich...

Documents

Transcript of Erstellung eines Pattern-Almanachs für HCI-Patterns · So um 1987 entdeckte der Bereich...