= Mensch Computer Interaktion (auch MCI)=

Hier geht es in ersteinmal um eine Vorlesung der [UNI|http://www.uni-due.de]. Eine grobe Zusammenfassung aus dem Skript, die in dem Zusammenhang MCI eine prägende Rolle spielen.

== Der Usability Prozess ==

# __Anforderungsanalyse__ \\ Akteure, Aufgaben, Organisation, Kontext
# __Funktionale Gestaltung__ \\ Informationen, Funktionen, Prozess
** Berücksichtigung arbeitswissenschaftlicher/arbeitspsychologischer Ziele
*** Kriterien: Ganzheitlichkeit, Anforderungsvielfalt, soziale Interaktion, Autonomie, Lern- und Entwicklungsmöglichkeiten
** Aufgabenspektrum wichtiger als User Interface
** Definition von Handlungsspielräumen
** Abwägung Automatisierung - Persönliche Kontrolle (interaktive Nutzung - manuelle Verfahren)
** Einbettung in organisationalen, unternehmenskulturellen Kontext
** Wissensvoraussetzungen
# __Konzeptionelle Userinterface-Gestaltung__ \\ Sichten, Navigationstruckturen
# __Konkrete Userinterface-Gestaltung__ \\ Infopräsentation, Interaktionen
## Auswahl von Darstellungsmedien
## Erstellung der Medieninhalte: \\Texterstellung und -gestaltung \\Grafik, Informationsvisualisierung \\weitere multimediale Inhalte \\ Verbindung von Medien
## Auswahl und Gestaltung von Interaktionsobjekten
## Layout-Struktur, Raster
## Detailgestaltung: visuell, auditiv...
# __Realisierung__
# __Einführung__ und __Nutzung__

Ferner gibt es auch Prozesse, die alle zuvor oben genannten Prozesse begleiten.

* __Prototyping__ / __Inkrementelle Entwicklung__
* __Evaluation__ \\ (formativ und summativ) \\ Evaluation nach Software-ergonomischen Prinzipien (ISO 9241-10)
** Bewertung der Gebrauchstauglichkeit von interaktiven Systemen nach Usability-Kriterien formative vs. summative Evaluation
** formativ: zur Entdeckung und Behebung von Gestaltungmängeln im Entwicklungsprozess
** summativ: zur Feststellung (und Dokumentation) eines Qualitätsmasses, eher am Ende eines Entwicklungsprozesses
** mediated evaluation: gemischte Evaluationsstrategie iterativ und prozessbegleitend
** Ziele:
*** Produktoptimierung
*** Usability als Wettbewerbs- und Marketingfaktor
*** Verbesserung der internen Produktivität (effiziente Anwendungssysteme, Wissensmanagement...)
*** Sicherstellung ergonomischer Arbeitsbedingungen
**** Belastungsminderung
**** Gesundheitsförderlichkeit
*** Beachtung rechtlicher Regelungen
** Evaluationsverfahren
*** Basis: Verhaltensdaten von gegenwärtigen oder prospektiven Nutzern des Systems oder Prototypen -> __empirische__ Evaluation
**** Feldstudien
**** Usability Tests im Labor
**** kontrollierte Experimente
*** Basis: Aussagen, die von Experten (nicht die Entwickler selbst!) aufgrund unterschiedlicher Analysen gewonnen werden -> __analytische__ Evaluation
**** modellbasierte Analyse
**** Inspektionsverfahren
**** Mischformen \\ Bsp. Cognitive Walkthrough (verwendet kognitives Modell + Expertenbegutachung)
**** von völlig freier Beurteilung bis zu Erstellung expliziter Modelle
*** Basis: durch automatische Verfahren gewonnene Daten -> __automatisierte analytische__ Evaluation
*** Basis: Entwicklung einer expliziten, abstrahierten Repräsentation des Nutzers (Wissen, Aufgaben, Verhalten..) oder des Systems -> __modellbasierte__ Evaluation
**** Analyse des Modells im Bezug auf erwartete Auswirkungen für die Usability
**** Art und Granularität des Modells bestimmt die möglichen Aussagen
**** explanative vs. prädiktive Modelle
***** explanativ: erklärt ein beobachtetes Nutzerverhalten (zB warum ist ein bestimmter Fehler aufgetreten)
***** prädiktiv: sagt bestimmte Leistungsparameter vorher (Ausführungszeiten, Lernaufwand, Fehlerrate...)
*** kognitive Modellevaluation
**** Modellierung der kognitiven Repräsentation von Aufgaben
**** Grundfrage: Wie können konkrete Handlungsabläufe auf Basis kognitive Aufgabenrepräsentationen und Verarbeitungsmechanismen produziert werden?
**** Verwendung (vereinfachter) kognitiver Modelle ("Engineering Modelle", "Virtual Cognitive Machine")
***** z. B. Model Human Processor nach Card, Moran & Newell
**** Ziel: Vorhersage von Leistungsparametern wie Ausführungs- und Lernzeiten
**** Beispiel: GOMS-Modell

== Rechtliches ==

* Bildschirmarbeitsverordnung

=== Evaluation nach Software-ergonomischen Prinzipien (ISO 9241-10) ===

| Aufgabenangemessenheit      | Erforderliche Funktionalität vorhanden? Effizientes Arbeiten?
| Erlernbarkeit               | Komplexität beherrschbar? Stufenweises Erlernen möglich?
| Erwartungskonformität       | Aus Anwendungsfeld bekannte Konzepte? Interne Konsistenz und mit anderen Systemen?
| Selbstbeschreibungsfähigkeit|Intuitive Verständlichkeit? Übersichtliche und kontextabhängige Hilfefunktionen?
| Steuerbarkeit               | Flexible Abläufe? Eignung bei veränderten Aufgabenstellungen? Keine Tempovorgaben?
| Individualisierbarkeit      | Anpassung an Arbeitsstil, unterschiedliche Arbeitskontexte und Nutzerpräferenzen?
| Fehlertoleranz              | Systemdesign vermeidet mögliche Fehler? 'Sanftes' Abfangen von Fehlbedienungen? Keine irreversiblen Resultate ohne Abfrage?

=== Usability als Cost-Benefit-Verhältnis ===
* Usability kann als Verhältnis aus (wahrgenommenem) Nutzen zu (wahrgenommenem) Aufwand verstanden werden
** Nutzen: funktionale Leistungen, Zeitersparnis, Spaß, Anerkennung...
** Aufwand: Zeit zum Erlernen, Bedienaufwand, Fehlervermeidung und Behebung
* Die Einschätzung der beiden Faktorenbereiche ist subjektiv und zeitabhängig
* Einschätzung in unterschiedlichen Phasen kann unterschiedlich sein
** Benefit/Cost am Anfang der Nutzung
** Benefit/Cost bei fortgesetzter Nutzung
*** Grenznutzen zu Grenzkosten beim Erlernen neuer Funktionen (Problem bei neuen Systemversionen)

=== Zeiteffekte und Usability ===
* Kernfrage: Wie verändern sich subjektive und objektive Parameter der Usability-Bewertung über die Zeit?
* Korelliert die anfängliche Usability-Bewertung eines Systems mit der Bewertung in einer späteren Phase der Nutzung?
* Wie verändert sich das Benutzerverhalten über die Zeit?
** wird die Funktionalität kontinuierlich erschlossen?
* Kognitive Hysterese
** Aufwand-Nutzenkurve im Benutzerverhalten nicht linear und richtungsabhängig
* Definition von Usability-Zielen vor Beginn der Systementwicklung (als Teil der Anforderungsdefinition)
* Auswahl geeigneter Messgrößen z.B.
** Ausführungszeit für bestimmte Aufgaben
** Anteil der ungeübten Nutzer, die eine Aufgabe ohne Anleitung korrekt ausführen können
** Anzahl der von einem Durchschnittsnutzer nach einer bestimmten Einarbeitungszeit korrekt gelöster Aufgaben
* Festlegung von Kriterien \\(Werte der Messgrößen, die bestimmen ob das Ziel erfüllt ist oder nicht)

==== Sample Usability Specifications ====

* Example: Searching a Digital Library
* Specification of usability goals based on hierarchical task analysis -> task-specific criteria
* Task: Accessing the digital library
** a user with at least one hour of previous usage experience should be able to access the main page of the digital library in 20 secs or less, with no errors, and should rate „ease of access“ no less than 4 on a 5–point rating scale
* Task: Initiating the search function
** user with at least one hour of previous usage experience should be able to initiate the search dialog from the main page in 5 secs or less, with no errors, and should rate „search availability“ no less than 4 on a 5–point rating scale


Das Usability ein fortlaufender Prozess ist, wird dem ein oder anderem nicht neu sein. Ferner ist aber auch die Auffassung von gut oder auch schlechtem Design meist vom Personenkreis abhängig. Wir definieren in bei der MCI folglich verschiedene Personengruppen.

||Strategie/Modell ||Annahmen ||Implikationen
|"allwissender" Nutzer | perfektes Wissen über Struktur, keine Fehler |  Hypothetisches Best-Case Szenario, effiziente Pfade auch hier wichtig
| Optimale Rationalität |      Nutzer entscheiden rational, erinnern Pfad, Backtracking | ebenfalls hypothetisch, aussagefähige Link Hinweise wichtig
| Heuristisch (Satisficing) | Nutzer vermeiden Planen und Erinnern, sichtbare Info als Entscheidungsbasis | Seiten müssen selbständig "funktionieren", wichtige Info und Links direkt erkennbar
| Mental Map | Nutzer inferiert Site-Struktur, Vermeidung Shortcuts | leicht erschließbare Navigationsstruktur, gute Übersichtsfunktionen
| Auswendiglernen | erfolgreiche Pfade werden erinnert und wiederholt | offensichtliche und effiziente Pfade, Orientierungshilfen
|  Information foraging | lokales Sammeln in 'patches'. Übergang zum nächsten Patch, Schätzung Nutzen und Kosten | 'Information Scent' verstärken: wie stark weist die nahe liegende (proximale) Info (Links) auf die entfernt liegende (distale) hin
| Kostenbasiert | beschränktes Wissen und Ressourcen, Tradeoffs zu Ressourcenbeanspruchung | Mentale Kosten minimieren, sense making, multiple Strategien unterstützen


== Was ist Navigation? ==

 Navigation bezeichnet die diskrete oder kontinuierliche Bewegung
 des Benutzers zwischen oder innerhalb unterschiedlicher Sichten
 oder Teilsichten eines interaktiven Systems, wobei sowohl nutzer-
 als auch systemgesteuerte Transitionen auftreten können.

== Diskrete versus kontinuierliche Navigation ==

* __diskrete__ Navigation
** System besteht aus diskreten \\ (einfachen oder zusammengesetzten Sichten auf Informationsinhalte oder Funktionalität)
** Sichten abgebildet in einzelnen Fenstern, Masken, Toolbars etc.
** Navigation besteht aus Transitionen zwischen Sichten wobei die Ausgangssicht erhalten bleiben oder verschwinden kann
** __Beispiele__: Links in Dokumenten

* __kontinuierliche__ Navigation
** Nutzer verändert kontinuierlich die Sichtbarkeit und Perspektive einer Informationspräsentation
** unterschiedliche Metaphern: Bewegung im Raum (2D,3D), Bewegung auf Zeitstrahl, Papierstreifen, Film etc.
** __Beispiele__: \\ Scrolling im Fenster, 3D Darstellung von Dokumenten \\ Zoom Interfaces (Pad++, Jazz University of Maryland) \\ räumliche Bewegung in virtuellen Welten, 3D Desktop oder auch Task Gallery \\ Navigation in abstracten Informationsstrukturen: Hyperbolic Trees

* __hybride__ Formen
** Mischung diskret-kontinuierlich
** __Beispiele__: Fenster mit Scrolling, Links zwischen 3D-Welten etc.

== Konzeptioneller Entwurf der Benutzerschnittstelle ==

Es stellen sich grundlegende Fragen:
* Wie werden die Inhalte und Funktionen des funktionalen Entwurf dem Nutzer präsentiert?
* Wie kann sich der Nutzer darin bewegen?

Der Fokus liegt hier auf der konzeptionellen Struktur und nicht auf dem konkreten Design.
So können Gestalltungsaufgaben wie folgt angegangen werden.

* Definition von Sichten. \\ abstrakte Bildschirm-/Fennsterinhalte.
** Wie werden Informationsobjekte abgebildet, welche Teile, in welcher Kombination.
* Anordnung von Sichten.
** Wie sieht die Systemgesamtstruktur aus. (information architecture)
* Navigationstrukturen und Suchfunktionen
** __Sichtennavigation__: Bewegung zwischen unterschiedlichen Sichten als Ganzes (Fenster, Bildschirmmasken, Dialogboxen)
** __Teilsichtennavigation__: Navigation ersetzt einen Teil einer zusammengesetzten Sicht (Webpage mit Navigationsbereich, Explorer-Darstellung)
** __Sichteninterne Navigation__: Bewegung durch Felder einer Maske, Teilabschnitte eines Dokumentenfensters.  
* Grundkonzepte für die Gestalltung des Userinterfaces. \\ Metaphern, verwendete Muster


== Informationsmodell versus Sichtenmodell ==

=== Informationsmodell ===

 Abstraktes Modell der Informationsobjekte Aufgaben und Operationen

=== Sichtenmodell ===

 Einzelen Sichten und Strukturen
 
Die logische Struktur der Inhalte sind Ausgangspunkt für Navigationstrukturen, __aber__ nicht identisch damit. Sichten können Ausschnitte aus Informationsobjekten anzeigen. Sichten können als zusammengesetzte Teil-Sichten konstruiert werden. ([MVC Muster| Wikipedia:Model-view-controller])


== Navigationsentwurf ==

Grundfragen der Navigation nach Nievergelt

# Wo bin ich?
# Wohin kann ich gehen?
# Woher komme ich?

Aus den Fragen leiten wir die Anforderungen an die Navigation ab.

* __Aufgabenangemessenheit__. \\ effiziente Navigationsstrukturen
* __Struktur erfassen__. \\ Benutzer muss mentales Modell entwickeln können, um die zugrundeliegenden Strukturen zu erschließen
* __Konsistente Gestalltung__. \\ Reduktion der Gedächnisbelastung
* __Eindeutige Navigation__. \\ Ausgangspunkte für Navigationsschritte (Navigationsanker) müssen klaren Hinweis auf das Ziel geben

* Unbekannte Inhalte durch Exploration erschließbar machen

* Nutzerziele sind nicht hinreichend klar, nur Teilmerkmale bekannt oder unscharfe Attributdefinition
* Variabilität des Suchziels und der Suchstrategie im Verlauf
* Unterstützung des Wayfinding, Vorwissen des Nutzers für Verständnis für Struktur und Bedeutung beachten

Weitere zu klärende Fragen sind:

# Wie lang dürfen Auswahlmenüs sein?
# Eher breite oder tiefe Navigationstrukturen?
# Wie viele Navigationstrukturen dürfen auf eine Seite?
# Wie viele Einträge in einer Ebene?
# Wie viele Ebenen?
# Wie sollten Menüs organisiert sein?

== Design Patterns, Beschreibungselemente ==

|| Name || Aufgabe || Beispiel
| Name | möglichst sprechende Bezeichnung für das Muster |Sitzmauer
| ''Kategorie'' | Zuordnung zu einer Klasse von Mustern | Nummer: 243
| Kontext | In welchen Anwendungen, Umgebungen oder Situationen ist das Entwurfsmuster einsetzbar? | Garten an einer ruhigen Straße
| Problem | genaue Beschreibung des zu lösenden Problems, der Benutzeraufgabe | An vielen Stellen sind Mauern und Zäune zwischen Außenbereichen zu hoch; gibt es jedoch überhaupt keine Grenze, kommen die feinen Unterschiede zwischen den Bereichen nicht zur Geltung
| ''Einflussfaktoren'' (Forces) | welche Faktoren sind für die Gestaltung zu berücksichtigen | Bauliche gegebenheiten, Gezetze, Verordnungen
| Lösung | prägnante Beschreibung einer ''erprobten'' Lösung auf geeignetem Abstraktionsniveau |
| ''Wirkungen'' | erwartete/mögliche positive und negative Wirkungen beim Einsatz des Musters |
| ''Abhängigkeiten'' | Zusammenwirken mit anderen Entwurfsmustern |


== Verwendung von Entwurfsmuster ==

* semantische Organisationsmuster
** bestimmen das inhaltliche Grundkonzept, das zum Aufbau der Navigationsstruktur verwendet wird
* Strukturmuster (entsprechend Datenstruktur), wie Liste, Sequenz, Baum, Tabelle, Netz
* Strukturelle Mapping-Muster
** beschreiben die Art der Abbildung einer Content-Struktur auf die Navigationsstruktur
* Sichtenmuster
** Sichten für Einzelobjekte, Kollektionssichten
* Präsentations- und Analogiemuster
** z.B. Verwendung von Metaphern zur Darstellung der Navigationsstruktur

Auf Basis welchen Konzeptes wird die Navigationsstruktur aufgebaut?
 
Grundformen der Organisation von Navigation:
* themen-/informationsbezogene Organisation
* aufgabenbezogene Organisation
** Einzelaufgabe/Geschäftsvorfälle
** Prozessbasierte Navigation (Aufgabenabläufe)
** __Zusammenfassung__:\\ Ziele/Aufgaben der Nutzer identifizieren (Aufgabenmodell) \\ Inhalte und Funktionen entsprechend Aufgabe zusammenfassen \\ standardisierte, formalisierte Aufgaben: Geschäftsvorfälle \\ Aufgaben können wiederum nach Ereignissen/Lebensituationen/Geschäftsvorfällen gruppiert werden.
* prozessbezogene Organisation
** Vorgangsleisten
*** Task Bar mit statusabhängiger Aktivierbarkeit von Bearbeitungsschritten
*** Darstellung durch Piktogramme/Texte mit Grausteuerung
*** z.B. intelligente Vorgangsmappe
** Vorgangsassistenten
*** sequentielle Führung durch die Bearbeitungsschritte
*** Bildfolge mit Vorwärts-/Rückwärts-Schaltung
*** Anwendung bei komplexen Entscheidungen/Verzweigungen
** dynamische Formulare
*** dyn. Steuerung des Inhalts und der Aktivierbarkeit von Formularinhalten
*** Übersicht über Gesamtzustand bleibt erhalten
* rollen-/nutzergruppenbezogene Organisation
** personalisierte/adaptive Navigation
* relevanzbezogene Organisation
* chronologische Organisation
* konventionelle (z. B. alphabetische) Organisation
* weitere Subformen oder auch Mischformen
** z.B. alphabetische Teilstruktur innerhalb einer thematischen Gesamtstruktur
*** Bedarf nach Alternativzugängen zu Inhalten berücksichtigen
*** __Bewertung__ nach:\\ Aufgabenkontext \\ Nutzererwartungen / Vorkenntnisse / mentales Modell \\ Navigationsaufwand



=== Navigationshilfen  ===
* Inhaltverzeichnis, Site Maps
* Metaphorische Darstellungen \\(Gerätemetapher)
** Verwendung bekannnter Konzepte und Strukturen \\aus der Erfahrungwelt des Nutzers zur \\ Unterstützung der __intuitiven__ Orientierung
*** Bedeutung der unterschiedlichen Elemente
*** Erkennen des aktuellen Standorts (Metapher!)
*** konkret: Desktop, Buch, Haus, Fotoalbum, Fahrzeug...
*** abstrakt: Standort, Navigation (!),\\ Begrifflichkeiten z.B. aus Film, Zeitungen...
*** Übertragbarkeit der Struktur wesentlich
*** Metaphernbrüche können auftreten
* Guided Tour
* Geographische Karten
* Suchmechanismen, Summarization
* Preview-Funktionen
* Dynamische Visualisierung von Informationsstrukturen

=== Navigationsmodellierung ===
* Navigationsmodell\\ Beschreibung der Gesamtheit der Bewegungsmöglichkeiten des Nutzers durch den Informationsraum
* Navigation\\ ein konkreter Bewegungsablauf
* Besteht aus Knoten (Sichten) und gerichteten Kanten (Transitionen, Navigationsübergängen..)
* unterschiedliche Formalisierungsgrade
** zur Kommunikation mit den Anwendern
** zur Spezifikation der Entwicklung
** zur automatischen Generierung
* Informelle Darstellungen
** Sitemaps: Diagrammdarstellung einzelner Web-Seiten und Übergänge
** Storyboard: Anreicherung durch grobe Skizzen der Seiteninhalte
* Zustandsübergangsdiagramme (Zustandsautomaten)
* Statecharts (hierarchische Zustandsübergangsdiagramme)
* Petri-Netze und darauf basierende Methoden sowie zahlreiche navigationsspezifische Erweiterungen der Grundtechniken




== Darstellung von Zuständen ==

|| Zustand || Darstellung
|selektierbar und aktivierbar     |     normale Darstellung
| gegenwärtig aktivierter Schritt \\(Autoaktivierung erster?) |Fett-Darstellung
| nicht aktivierbar, nicht selektierbar | Graudarstellung
| abgeschlossen \\(bleibt selektierbar, \\ um Aktionen einzusehen, \\ kann zur Änderung noch aktiviert werden) | abhaken
| abgeschlossen __committed__ \\(keine Änderung, nur Gegenaktion möglich) | abhaken + Zusatz (z.B. Haken ausgegraut)
| pending (in Bearbeitung, nicht abgeschlossen) | Pending-Symbol (z. B. offene Mappe)


=== Gestaltungsregeln bei prozessbasierter Navigation ===
* klare Darstellung des aktuellen Prozesszustands
** aktueller Schritt (am bestem im Kontext des gesamten Prozessablaufs)
** bereits abgearbeitete Schritte
** was ist der nächste (mögliche) Schritt
** welche bereits durchlaufenen Schritte können nochmals aktiviert werden
* Ablauf so flexibel wie möglich gestalten
** Rücksprünge
** Direktsprung zu späteren Schritten, falls keine Abhängigkeit
** Ändern von wichtigen Parametern auch in späteren Schritten
* Status speichern \\(falls möglich) für Rücksprung, Unterbrechung und späteres
* Wiederaufnehmen
** Exkurse aus dem Prozess ermöglichen (falls sinnvoll)
* Gesamtübersicht über das Ergebnis bisheriger Eingaben
** entweder bei jedem Schritt zeigen
** oder vor Abschluss des Vorgangs (auf jeden Fall vor Kauftransaktionen)
* automatisches Überprüfen von Konsistenzregeln flexibler als sequentiell durchlaufener Entscheidungsbaum (aber: Realisierung aufwändiger)


== Zusammengesetzte Navigationssichten ==

* Kombination mehrerer Teilsichten, ggf. mit
** unterschiedlichen Organisationsmustern
** unterschiedlichen Strukturmustern
*** Typisches Beispiel für komposite Navigationssichten \\ Webpage (Startseite)
*** die meisten Webpages weisen komposite Navigationsstrukturen auf!
** Berücksichtigung unterschiedlicher Nutzererwartungen und -aufgaben
** schnelle Vermittlung des Genres und Leistungsumfangs einer Site





== Strukturelle Navigation ==

Die strukturelle Navigation beschreibt den rein syntaktisch-strukturellen Aufbau von Navigationsstrukturen. Hier gibt es zwei unterschiedliche Bereiche zu berücksichtigen.

* Struktur der Inhalte \\ nach verschiedenen Organisationsmustern strukturiert
* Struktur der sichtbaren Navigationselemente \\ navigationale Sichten


=== Strukturmapping  Muster ===
Das Standardmuster ist bei einem hierarchischem Inhalt, auch eine hierarchische Navigation zu haben. Weiter gilt, dass jede inhaltliche (konzeptuelle) Struktur auf unterschiedliche Navigationsstrukturen (Sichten und Transitionen) abgebildet werden kann. Der Normalfall (Standardmuster) ist es den Inhaltsstrukturtyp auf den gleichen Navigationsstrukturtyp abzubilden. Andere Abbildungen sind hierbei aber genau so gebräuchlich.

|| Von || Nach || Folge
| komplexe Informationsstruktur | einfache Navigationsstruktur | Informationsverlust
| einfache Informationsstruktur | komplexere Navigationsstruktur | Verwendung von Suchen, Guppierungen, Sortierungen in der Oberfläche.


=== Grundlegende Strukturtypen ===

 Alle Strukturtypen können sowohl im Inhaltsbereich
 wie auch im Navigationsbereich auftreten.

* Netz \\ allgemeine gerichtete oder ungerichtete Graphen
* Hierarchie \\ Baumstrukturen
* Tabellen \\ relationale Struktur von Elementen (Zeilen und Spalten)
* Liste oder Sequenz \\ geordnete Kollektion von Elementen
* Menge \\ ungeordnete Kollektion von Elementen


|| Netz | Objekt auf Panel | Liste traversierter Knoten oder Pfade | Aufspannder Baum || Grafisches Netzwerk
|| Hierarchie | Objekt auf Panel | einstufiges Menü oder Pfad \\ ([Breadcrumbs|Wikipedia:Breadcrumbs]) || Expandierender Baum | Relationengraph
|| Liste | Objekt auf Panel || Menüliste | Gruppierbare Liste | Relationengraph
|| Menge || Objekt auf Panel | Sortierbare Liste | Gruppierbare Menge |Relationengraph
| || Menge || Liste || Hierarchie || Netz

== GUI Komponenten ==

Entscheidene Faktoren sind:

* Verfügbarer Platz zur Darstellung
** Interaktionsobjekte können in ihrem Platzbedarf miteinander konkurrieren
** auch abhängig von Anzahl der Auswahlmöglichkeiten
** beeinflusst zB Entscheidung Radio - Dropdown
* Häufigkeit der Änderung
** Effizienz bei häufigen Änderungen besonders wichtig (Mausklicks, Fitts' Law)
* Relevanz \\(für Vergleiche, Entscheidungen...)
** bei wichtigen Entscheidungspunkten oder für Vergleiche ist permanente Sichtbarkeit zu bevorzugen (z.B. Radio Buttons vs. Dropdown-Liste)

=== Gestaltungsfragen ===
* Benennung von Funktionen u. Auswahloptionen
* Wertebereich für Auswahlen
* Position von Optionen in Listen, Gruppen von Radio Buttons..
* sinnvolle Defaults, Vorbelegungen
* Hinweiseinträge
* Steuerung der Aktivierbarkeit von Controls
* Negierte Fragen vermeiden

Links:
* müssen von sonstiger Information unterscheidbar sein
* als Interaktionsobjekt erkennbar, Textlinks nicht mehrzeilig dargestellt
* Auslösung darf nicht unerwartet sein (Problem: Listenauswahl)
* Textlinks effektiver als Graphiklinks
* aussagekräftige Benennungen, die auf das Linkziel hinweisen
** vertraute Terminologie
** richtiges Niveau bzgl. Generalisierung-Spezialisierung, sehr generelle Begriffe eher vermeiden
* Anordnung: inline vs. spezielle Link-Bereiche
** Hauptnavigation: spez. Link-Bereiche, „Querverweise“ eher inline
* für Darstellung Standard-Browser-Mechanismus bevorzugt verwenden
* dynamische Darstellungen mit Vorsicht zu verwenden

Webpages:
* verfügbare Screengröße nicht bekannt (erwartete Mindestgröße sollte definiert werden)
* dynamische Layouts bevorzugen, falls für Inhalt geeignet
* Aufteilung Raster in feste und variable Bereiche
** Navigationsbereiche (vorzugsweise über CSS positioniert) üblicherweise fest
** Inhalte meist variabel
* Unterscheidung in 'plastische' vs. 'starre' Inhalte (z.B. Umformatierung
* Formular meist nicht sinnvoll, bei Textinhalten leicht möglich)
* Gesamtstruktur einer Seite sollte auch im variablen Fall eindeutig erkennbar sein und sollte sich auf gleichartigen Seiten wiederholen
* Unterschiedliche Templates für unterschiedliche Seitentypen definieren
* keine starre Regeln: Wechselwirkung zwischen Genre und Layout

Visuelle Gestalltung

| Räumliche Organisation |  Gruppierung der Inhalte nach klaren Prinzipien \\ Trade-off: Visuelle Komplexität vs. Reichhaltigkeit  \\ graphisches Raster zur Anordnung von Infogruppen \\ Gestaltbildung \\ Lesesequenzen, visuelle Navigation beachten \\ Lesbarkeit (Font, Größe, Kontrast)
| Klare Typographie      | Begrenzung Font-Typen und Größen (~ 3)
|Graphische Klarheit     | verständliche, eindeutige Symbole, Grafiken \\ Darstellungsökonomie (mit wenig viel erreichen!) \\ Beschränkung Farben (~ 3 -7 ) \\ sinnvolle Verwendung von Leerräumen (White space) \\ harmonische Beziehungen zwischen Design-Elemente  (Rastermaße, Farben...)
| Harmonie               | visuelles Gewicht der Gestaltungselemente
| Balance                | ausbalancieren (Schwerpunkt Seiten-/Fenstermitte) \\ Gewichte: Farbflächen, Fontgrößen, "Data-Pixel-Ratio"


=== Modellierungsaspekte Actor, Task, Information, Context (ATIC)===

* Modelle können auf einzelne Basiskonzepte eingeschränkt
sein oder Beziehungen zwischen unterschiedlichen Basiskonzepten einschliessen
** Bsp. Hierarchisches Aufgabenmodell zeigt nur Struktur innerhalb des Konzepts 'Task'
** Bsp. Use Case bezieht die Basiskonzepte 'Task' und 'Actor' ein und modelliert Beziehungen zwischen diesen
* Modelle können statisch oder dynamisch sein
** statisch: dargestellte Struktur beinhaltet keine Zeitabhängigkeiten \\Bsp. Hierarchische Aufgabenstruktur ohne Ablaufpläne
** dynamisch: Zeitabhängigkeiten berücksichtig, "schwächste" Form Vorgänger-Nachfolger-Beziehung \\ Bsp. Hierarchische Aufgabenstruktur mit Ablaufplänen


== UML ==

* UML ist eine weit verbreitete Methode zur objektorientierten Entwicklung von Systemen
* stellt graphische Beschreibungssprachen für Analyse und Design von Systemen bereit
* Sprache zur Spezifikation, Visualisierung, Konstruktion und Dokumentation von Modellen für Softwaresysteme, Geschäftsmodelle und Nicht-Softwaresysteme
* Ermöglicht Entwurf und Entwicklung von Softwaremodellen auf einheitlicher Basis
* Seit 1998 Standard, liegt bei der Object Management Group (OMG) zur Weiterentwicklung der Standardisierung vor.
* Kombination von Ideen objektorientierter Entwicklungsmethoden

=== Aktivitätsdiagramme ===

* Diagrammtechnik der UML zur Darstellung aller Arten von Abläufen
* gewisse Verwandschaft mit Petrinetzen (insbesondere seit Version 2.0)
* können darstellen
** Aktivitäten
** Abläufe
** Akteure
** Informationsobjekte

=== Klassendiagrammen ===

* Analyseklassendiagramme: nur Konzepte und Beziehungen
* Klassendiagramme im Entwurf: mit Attributen und Methoden
* Unterschiedliche Stufen des Klassenbegriffs:
** Konzept
** Typ
** Objektmenge
** Implementationsklasse (Code)
* Konzeptdiagramme/Analyseklassendiagramme: Zur Klassifikation (Metadaten) von Inforessourcen zB zur Navigation von Webinhalten
* Klassendiagramme: für strukturierte Informationsressourcen in Anwendungen



== Ebenen der Informationsmodellierung ==
* Konzeptuelle Informationsmodellierung
** Repräsentation der Konzepte und Beziehungen der Domäne
** Unterschiedliche Darstellungen
*** informelle Methoden
*** Darstellung durch Concept Maps / Topic Map Diagramme (Themennavigation)
*** Klassendiagramme (UML)
* Struktur und Inhalt der Informationsressourcen
** Klassendiagramme mit Binnenstruktur
** Dokumentaufbau
** Datenbankinhalte
** Instanzen (z.B. einzelne Web Pages)
* Navigationsmodell
** hypermediale Struktur von Ressourcen


=== Hierarchische Konzeptklassifikationen ===

* einfache hierarchische Klassifikationen (Taxonomien)
* unterschiedliche Beziehungstypen (besonders subtopic, subclass, part-of)
* facettierte Klassifikationen
** multihierarchisch, polyarchisch
** Objekte werden anhand mehrerer Hierarchien klassifiziert vollständige vs. unvollständige multiple Klassifizierung


=== Erstellung von Themenstrukturen ===
* Extraktion von Informationskonzepten aus Szenarienbeschreibungen und Use Cases (insb. Substantive)
* Partizipative Entwicklung unter Anwenderbeteiligung
* Analyse der Geschäftsbegriffe im Unternehmen, Begriffslexikon
* Verwendung oder Integration bestehender Klassifikationen/Begriffsysteme (Bsp. Dezimalklassifikation/Dewey-Klassifikation im Bibliothekswesen, Branchenkatalogstrukturen
* evtl. automatische Extraktion aus Dokumentbeständen

=== Partizipative Entwicklung von Informationsstrukturen ===

* Gruppenbrainstorming (insbesondere Themenstrukturen)
* Haftnotizen, Metaplan
* Affinity Diagrams (sucht Gruppenkonsens für die Informationsstruktur)
* Card Sorting (sucht gemeinsame Muster in der Informationsstrukturierung durch Teilnehmer)
** Methode zur Entdeckung latenter (verborgener) Strukturen in einer unstrukturierten Begriffsmenge
** Teilnehmer entsprechend der zukünftigen Nutzergruppe(n)
** Begriffe werden vorab gesammelt und auf jeweils auf eine Karte geschrieben (n Kopien bei n Teilnehmern)
** jeder Teilnehmer bekommt alle Begriffe als Kartenstapel (mischen!)
** jeder Teilnehmer sortiert frei auf der Tischfläche oder legt Karten in vordefinierte und benannte Bereiche (für festgelegte Oberbegriffe)
** viele Variationen der Durchführung möglich
** Auswertung
*** häufigster Fall: manuelle Analyse
*** automatisierte Auswertung möglich durch Clusteranalyse
**** agglomerativ Verfahren
**** top-down Verfahren
*** falls keine Vorgabe von Begriffen: Karten pro Stapel zählen, Begriffsvergabe pro Stapel durch Teilnehmer
*** in einfachen oder klaren Fällen Übernahme ggf. Revision der vergebenen Oberbegriffe
*** bei komplexem Card Sorting: statistische Clusteranalyse (Tools verfügbar: z.B. EZSort von [IBM|http://www.usabilitynet.org/tools/cardsorting.htm])
* evtl. mit Unterstützung durch Brainstorming-Software (z.B. MindManager)


== Das GOMS-Modell ==
* Goals:
** Aufgaben als Ziele repräsentiert
** Ziele werden hierarchisch zerlegt werden
* Operators:
** Elementare Aktionen
** Abhängig von Detaillierung der Analyse
* Methods:
** Sequenzen von Modellierungselementen (Unterprogramme)
* Selection Rules:
** Bedingungen zur Zielaktivierung
** Auswahl von Alternativmethoden

Die Zerlegung der Ziele kann mit unterschiedlicher Tiefe bis zu einer der folgenden Ebenen erfolgen:

* Unit-Task-Ebene:
** Elementareinheit: voneinander unabhängige Einzelaufgaben vergleichbarer Komplexität (z. B. 'Korrigiere einen Schreibfehler im Text')
* Funktionale Ebene:
** Jeder funktionale Schritt ein Operator (z.B.:  Löschen Objekt )
* Argument-Ebene:
** Jedes Kommando bzw. Argument ein Operator (z.B.:  selektiere Objekt; löschen)
* Keystroke-Ebene:
** Operatoren auf der Ebene grundlegender, perzeptiver, kognitiver und motorischer Aktionen
** besteht aus Sequenzen von Operatoren für jeden Operator liegen empirisch bestimmte Durchschnittszeiten vor Ausführungszeit = Summe der Operatorzeiten

=== Formen von [GOMS-Modellen| Wikipedia:GOMS] ===
| Keystroke-Level Model     | einfachste Form der GOMS-Modelle genaue Angabe der Methode zum Erreichen eines Ziels auf Basis Keystroke-level-Operatoren (nur unterste Ebene betrachtet)
| GOMS (Card, Moran & Newell) |Programmform mit Submethoden und bedingten Verzweigungen, mentale Operatoren (Goal-Struktur wird dargestellt)
| CCT (Kieras & Polson)     | Cognitive Complexity Theory. Abbildung eines GOMS-Modells in einem (ausführbaren) Produktionssystem (Produktionsregeln mit Working Memory)
| NGOMSL (Kieras)           |  Strukturierte natürlich-sprachliche Darstellung von CCT Produktionsregeln
| CPM-GOMS                   | Cognitive-Perceptual-Motor-GOMS. Sehr detaillierte Analyse, parallele Verarbeitung basaler Operatoren möglich)


=== NGOMS ===

Method for goal: enter & execute a command \\
Step 1. Type command verb  \\
Step 2. Accompish goal: enter first filespec \\
Step 3. Decide: If no second filespec, goto 5 \\
Step 4. Accomplish goal: enter second filespec \\
Step 5: Verify command \\
Step 6: Type <CR> \\
Step 3. Return with goal completed \\


== Walkthrough-Verfahren ==

* Begriff stammt aus dem Software-Engineering: z.B. Code-Walkthrough, manuelle Abarbeitung und Überprüfung von Algorithmen
* Unterschiedliche Schwerpunkte: Software-Qualität, Usability..
* Usability-Evaluation
** Walkthrough durch Interface-Struktur/Features
** Cognitive Walkthrough durch Aufgabenstruktur
* Expertenverfahren: systematisches Vorgehen, Wissen über Gestaltung und mentale Modelle erforderlich

== Structured Human Interface Validation (SHIVA) (Ziegler & Burmester 1995) ==

* Ausgangspunkt für die Evaluierung
** Erstellung von Aufgabenszenarien
** Erstellung eines Navigationsmodells
* Bewertung in zwei Zyklen
** Zyklus 1: Bewertung der lokalen Eigenschaften der einzelnen Sichten \\ (Walkthrough durch Navigationsmodell)
*** Aufgabenangemessene Information und Funktionen auf der Seite
*** Bewertung der Navigationsmöglichkeiten, die von der Seite wegführen
** Zyklus 2: Bewertung der Bearbeitung der Aufgabenszenarien \\ (Scenario Walkthrough)
*** Durchlauf durch alle für ein Szenario benötigten Fenster/Seiten
*** Bewertung für alle Szenarien

== Cognitive Walkthrough ==
* entwickelt von Polson, Lewis, Rieman & Wharton (1992) zur Analyse des explorativen Erlernens einer Nutzerschnittstelle
*  Fokus: Initiale Benutzung eines Systems ohne vorhergehendes Training
* basiert auf einer kognitiven Theorie des explorativen Lernens \\ (keine ad-hoc Inspektion, sondern theoriegeleitet)
** erlaubt Aussagen zu anfänglicher Nutzung (first time use)
** nicht: routinisierte Tätigkeiten!
* Durchführung durch Experten
* basiert auf dem CE+ Modell explorativen Lernens (Lewis & Polson)
* Informationsverarbeitungsmodell der menschlichen Kognition mit vier Stufen
** Nutzer setzt sich ein Ziel, das mit dem System erreicht werden soll (z.B. „Prüfe Rechtschreibung dieses Dokuments“)
** Nutzer sucht das Interface nach gegenwärtig verfügbaren Aktionen ab (Menüeinträge, Buttons, Links...)
** Nutzer selektiert die Aktion, die ihn wahrscheinlich näher an das Ziel bringt
** Nutzer führt die gewählte Aktion aus und bewertet anhand des Systemfeedbacks, dass er dem Ziel näher gekommen ist


== Cognitive Walkthrough - Prozedur ==>>

<<Voraussetzungen für einen Walkthrough:
<<* generelle Beschreibung der Nutzergruppe(n) und ihres Vorwissens
* eine spezifische Beschreibung einer oder mehrerer Aufgaben, die mit dem System durchgeführt werden sollen
* eine Liste der korrekten Aktionen zur Erfüllung jeder einzelnen Aufgabe

* Überprüfung jedes einzelnen Schrittes in der korrekten Aktionssequenz nach den Fragen
# würde der Nutzer die nächste korrekte Aktion wählen (das richtige Ziel setzen) ? Gründe?
# wird das benötigte Element (Information oder Interaktionsobjekt) am Bildschirm gefunden?
# kann das zu verwendende Interaktions- oder Informationsobjekt semantisch mit dem Ziel in Verbindung gebracht werden?
# erlaubt das Feedback die Bewertung der erfolgten Aktion im Bezug auf das Erreichen des Ziels?


[{Tag JensKapitza}]