UI Prototyping

Einführung

Spezifikation der Benutzerschnittstelle

  • Aufbau der Dialogfenster
  • Masken
  • Dialogablauf
  • Dialogfolgen

Für den Benutzer und Anwender sichtbare Teil der Anwendung.

UI-Prototyping

  • Stellt die detailgenaue Visualisierung der künftigen Anwendung dar; ermöglicht eine Simulation der Benutzer-Interaktionen
  • eine iterative Analysetechnik
  • bindet Nutzer in die Gestaltung ein
  • Besteht aus
    1. Anforderungen an das System analysieren
    2. Prototyp bauen
    3. Evaluation des Prototypen durch Stakeholder

Übersicht

Grundbegriffe für das Vorgehen im UI-Prototyping

Wireframe

  • Seitenstruktur und Features schematisch darstellen
  • Gestaltung eines ersten Interface
  • Wie wirken einzelne Elemente

Mock-Up

  • Wireframe in Mockup übertragen
  • Layout und Design werden an Unternehmen angeglichen
  • Inhalte und Funktionen einsetzen

Prototyp

  • detailgenaue Visualisierung der Anwendung
  • ermöglicht Simulation der Benutzer Interaktion

Ziele des UI-Prototyping

  • Anforderungen der Benutzer erkennen und umsetzen
  • Verbesserung der Benutzbarkeit und Benutzerfreundlichkeit
  • Frühzeitige Abstimmung mit den Benutzern
  • bildliche Darstellung der Oberfläche bietet gute Grundlage für die Erwartungen der Kunden
  • Anpassung an Gewohnheiten der Nutzer
  • Evaluierung der Anforderungen

Style-Guide

  • Legt grundsätzliche Designentscheidungen fest
    • Seitenaufbau
    • Navigation
    • eingesetzte Interaktionsmuster
    • Interaktionselemente
    • Farben
    • Formen
    • Symbole
    • Schriften
  • nachhaltiges und konsistentes Design erarbeiten
  • legt Rahmen der Lösungen fest

Benutzerschnittstelle und Interaktionsdesign

Benutzerschnittstelle und Interaktionsdesign

Interaktionsdesign

  1. Interaktionsstil wählen
  • auf verschiedene Arten umsetzbar
  • Entscheidung basierend auf Aufgabe, Umfeld, vorhandene ein und Ausgabemedien
  1. Funktionsblöcke definieren
  • Funktionsblöcke basieren auf User Stories
  • Bspw. Datenlisten, Suchmasken, Eingabeformulare, …
  • keine Festlegung der genauen Inhalte
  1. Blöcke logisch auf Screens verteilen
  • Schaffung einer Reihenfolge
  • Strukturierung in Rahmenelementen
    • Fenster
    • Regionen
    • Dialoge
    • Tabs
  • Erstellung einer Navigation
  1. Funktionsblöcke ausarbeiten
  • passende Interaktionselemente für Daten und Funktion
  • logische Anordnung
  • Berücksichtigung alternativer Abläufe
  1. Vereinfachen und harmonisieren
  • Funktionsblöcke mit ähnlichen oder gleichen Funktionen zusammenfasse
  • neue Lösungen nachtragen
  • Lösungen dokumentieren
  • Bspw. Fehlerbehandlung, Erstellung Bearbeitung Löschen von Daten, Detailansicht, Hilfe, Suche
  1. Benutzbarkeit testen

Vorgehen im UI Prototyping

Informationsarchitektur

  • bei informationslastigen Produkten essentiell
  • bei interaktionslastigen Produkten reicht Konzeption von Menüstrukturen und Navigation
  1. Informationen sammeln
  2. Informationen sortieren und kategorisieren
  3. Informationsbedürfnisse der Nutzer festlegen
  4. Dokumentation in Navigationsplan

Sollte folgende Fragen beantworten

  • Wo bin ich
  • Woher komme ich
  • Wohin kann ich gehen
  • Warum sollte ich da hin gehen

Elemente der Navigation

  • Link zur Startseite
  • Globale Navigation, Zugang zu Hauptthemen
  • Funktionale Navigation, Anmelden, Sprache, Impressum
  • Brotkrumen Navigation, zeigt Hierarchieebene
  • Lokale Navigation, innerhalb eines Bereiches
  • Dynamische Navigation, Filter, SUchen
  • Seiten Navigation, vorherige Seite, nächste Seite
  • Direkte Navigation, Links, Buttons

Navigationsplan

  • Modell zur Dokumentation der Informationsarchitektur
  • Zusammenhänge einzelner Seiten als Organigramm

Sitemap

Navigationsplan

Grundsätze und Methoden

Usability

Beschreibt wie gut eine Funktion abläuft, z.B. Zeit für eine Aufgabe.

Usability bedeutet nach DIN EN ISO 9241-11 „Gebrauchstauglichkeit“ und beschreibt „das Ausmaß, in dem ein Produkt durch bestimmte Nutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen“.

Grundsätze

Effektiv bedeutet „die Genauigkeit und Vollständigkeit, mit der Benutzer ein bestimmtes Ziel erreichen“.

Effizient heißt „der im Verhältnis zu Genauigkeit und Vollständigkeit eingesetzte Aufwand, mit dem Benutzer ein bestimmtes Ziel erreichen“.

Zufriedenstellend bedeutet „Freiheit von Beeinträchtigungen und positiv Einstellung gegenüber der Nutzung des Produkts“.

Dialoggestaltung

Aufgabenangemessenheit: keine überflüssigen Schritte, keine irreführende Information

Selbstbeschreibungsfähigkeit: genau die Information, die für einen bestimmten Schritt erforderlich ist, ist auch vorhanden

Erwartungskonformität: das System reagiert immer mit genau der Information die aus Sicht der Aufgabe auch tatsächlich “zu erwarten” ist

Lernförderlichkeit: das Produkt ist auf der Basis des Wissens über die Aufgabe unmittelbar benutzbar, es ist keine Schulung erforderlich

Steuerbarkeit: der Benutzer kann bei der Erledigung seiner Aufgabe konsequent in die Richtungen gehen, die aus Sicht der Aufgabe erforderlich sind (ohne Umwege und “Neueinstieg an anderer Stelle” Fehlertoleranz der Benutzer wird vom System vor Fehlern geschützt, bzw. wenn der Benutzer Fehler gemacht hat, kann er diese mit minimalem Aufwand beheben

Individualisierbarkeit: der Benutzer kann das User Interface selbst anpassen und individuelle Voreinstellungen treffen, die seinen physischen Gegebenheiten gerecht werden (z.B. Schriftgröße) oder Spezifika seines Kontextes berücksichtigen (z.B. bestimmte Defaulteinstellungen)

vgl. Geis (2010a)

Prozessergebnisse des Usability-Engineerings

Nutzungskontextbeschreibung

  • Welche Aufgaben hat der Nutzer zu erledigen und wie erledigt er diese?
  • Welche Arbeitsbedingungen sind zu berücksichtigen?
  • Welche Ausnahmen und Besonderheiten sind vorhanden, die bei der Produktentwicklung zu berücksichtigen sind?

Beschreibung der Erfordernisse aus Nutzersicht

  • Was ist zwingend und unstrittig im Nutzungskontext erforderlich?
  • Welche Voraussetzungen müssen gegeben sein (oder geschaffen werden), um den zu erreichenden Arbeitsergebnisse- und Organisationszielen gerecht zu werden?

Spezifikation der Nutzungsanforderungen

  • Welche Aufgaben hat der Nutzer zu erledigen und wie erledigt er diese?
  • Welche Arbeitsbedingungen sind zu berücksichtigen?
  • Welche Ausnahmen und Besonderheiten sind vorhanden, die bei der Produktentwicklung zu berücksichtigen sind?
  • Was muss das System aus Nutzersicht wirklich leisten?
  • Was muss der Nutzer eingeben oder auswählen können?
  • Welche Informationen müssen für den Nutzer auf einen Blick verfügbar sein und welche Zusammenhänge muss de- Nutzer erkennen können?

Interaktionsspezifikation

  • Wie sollte der Nutzer alle erforderlichen Schritte am System ausführen können?
  • Was muss in welcher Reihenfolge ablaufen?
  • Was muss flexibel möglich sein?
  • Welche Information muss im jeweiligen Schritt angeboten werden?

User-Interface-Spezifikation

  • Welche Interaktionsobjekte müssen dem Nutzer verfügbar gemacht werden?
  • Welche Dialogtechniken werden am User Interface eingesetzt?

Usability-Testbericht

  • Wo weicht das Produkt von Nutzungsanforderungen explizit ab?
  • Welche Probleme haben Nutzer mit dem Produkt bei der Aufgabenerledigung tatsächlich?

Bericht über Langzeitbeobachtungen

  • Welche Erkenntnisse liegen vor, nachdem das Produkt länger im Einsatz ist?
  • Wo gibt es bislang unbekannte Probleme in der Nutzung?
  • Welche Anforderungen werden erst nach Roll-Out erkennbar?
Last modified 2022.04.25