Mensch Computer Interaktion (auch MCI)#

Hier geht es in ersteinmal um eine Vorlesung der UNI. Eine grobe Zusammenfassung aus dem Skript, die in dem Zusammenhang MCI eine prägende Rolle spielen.

Der Usability Prozess #

  1. Anforderungsanalyse
    Akteure, Aufgaben, Organisation, Kontext
  2. Funktionale Gestaltung
    Informationen, Funktionen, Prozess
  3. Konzeptionelle Userinterface-Gestaltung
    Sichten, Navigationstruckturen
  4. Konkrete Userinterface-Gestaltung
    Infopräsentation, Interaktionen
  5. Realisierung
  6. Einführung und Nutzung
Ferner gibt es auch Prozesse wie:
  • Prototyping / Inkrementelle Entwicklung
  • Evaluation
    (formativ und summativ)
die alle zuvor oben genannten Prozesse begleiten.

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)

Navigationsentwurf #

Grundfragen der Navigation nach Nievergelt

  1. Wo bin ich?
  2. Wohin kann ich gehen?
  3. 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:
  1. Wie lang dürfen Auswahlmenüs sein?
  2. Eher breite oder tiefe Navigationstrukturen?
  3. Wie viele Navigationstrukturen dürfen auf eine Seite?
  4. Wie viele Einträge in einer Ebene?
  5. Wie viele Ebenen?
  6. 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

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) 		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

This particular version was published on 28-Feb-2009 22:31 by JensKapitza.  Top