Freitag, 10. April 2015

Elemente verteilen ohne Ausraster.

Ein System für den Entwurf einer Benutzerschnittstelle.

Artikelübersicht
1. Teil Die Erweiterung des Requirements Engineering durch das Usability Engineering.
2. Teil Mit Zielen zum User Interface.
3. Teil Dem Ziel entspringt die Anforderung. Alles ist im Fluss.
4. Teil Von Erwartungen und Konzepten. Struktur für das User Interface.
5. Teil Struktur gibt es nicht, ohne die Zeit, die Dinge in Ordnung zu bringen.
6. Teil Schlagen Sie mit Konventionen vielfältige Konfigurationen in die Flucht.
7. Teil Elemente verteilen ohne Ausraster.
8. Teil Mit den Sinnen den Sinn der Oberfläche erfassen.


Im letzten Post dieser Reihe habe ich den Grundsatz "convention over configuration" diskutiert. Konventionen erleichtern uns die Arbeit, da wir in vielen Fällen mit Erwartetem konfrontiert werden. Konfigurationen hingegen erschweren uns das Leben, da sie die Komplexität erhöhen. Das gilt auch auf der Rasterebene und deren Teilgebieten, die dort zur Anwendung kommen: das Interfacedesign, das Navigationsdesign und das Informationsdesign. Genau diese drei Teilgebiete wollen wir im Folgenden beleuchten.

Beginnen wir mit dem Navigationsdesign. Dabei gilt es, verschiedene Fragen zu klären. Wie gelangt man auf einer Seite von einem Ort zum anderen? Wie gelangt man von einer Seite zur nächsten? Welche Navigationselemente kommen zum Einsatz? Verwenden wir einen Button oder verwenden wir einen Link? Welche Navigationsbeziehungen sind wichtig, welche sind weniger wichtig? Warum muss ich den anderen Ort ansteuern? Diese Fragen sollten Sie klären, damit der Benutzer sich in Ihrer Struktur zurechtfindet.

Probieren Sie Ihr Navigationsdesign beim Kunden aus. Auf der Strukturebene haben wir Seiten in Beziehung gebracht. Welche Seiten wie miteinander verbunden sind, hat auch ganz viel mit den aufgenommenen und ggf. optimierten Prozessen aus der Systemkontextanalyse zu tun. Dort wurden Arbeitsprozesse ermittelt. Auf der Strukturebene wurden verschiedene Seiten für diese Prozesse in eine Ordnung gebracht. Auf der Rasterebene versuchen wir die Navigationselemente so zu gestalten, dass die Navigation einsichtig wird und vom Benutzer intuitiv erfolgen kann. Wenn der Kunde auf unsere Prototypen in diesem Zusammenhang schlecht anspricht, sind wir gezwungen, unser Design zu ändern. Dabei sollten wir darauf achten, dass die ausgewählten Benutzer eine repräsentative Menge unserer zukünftigen Benutzer sind.



Damit der Benutzer intuitiv navigieren kann, sind Navigationssysteme sehr hilfreich. Für bestimmte Wege der Navigation bieten wir unterschiedliche Arten der Navigation an. Ein globales Navigationssystem bietet uns die Möglichkeit, auf einfache Weise schnell von einem Ort zum anderen zu gelangen. Dafür können wir z.B. ein Menüsystem einsetzen. Ein lokales Navigationssystem bezieht sich eher auf kleinere Zusammenhänge in unserer Anwendung. Wir wollen über mehrere Seiten hinweg einen Geschäftsvorfall erledigen. Dazu bewegen wir uns zwischen den abhängigen Seiten mit Klicks auf entsprechende Buttons vorwärts. Zusatznavigationssysteme bieten zudem Zugriff auf zusätzliche Arbeitsschritte oder Informationen. Diese sind im normalen Arbeitsgang nicht erforderlich, bieten jedoch beispielsweise einem Neuling einen großen Mehrwert. Es gibt noch weitere Navigationssysteme, die man nutzen kann: Fernnavigationssysteme, ergänzende Navigation oder textuelle Navigation. [GARRETT12] beschreibt z.B. Sitemaps und Indizes als geeignete Fernnavigationssysteme.

Nachdem uns klar ist, wie wir uns zwischen den Seiten bewegen, müssen wir unseren Vorrat an User-Interface-Elementen sinnvoll über die Seiten verteilen. Dazu muss man die Elemente und ihre Möglichkeiten kennen. Oft beginnt genau auf dieser Ebene das Design des Userinterfaces. Programmierer ohne spezifische Designausbildung ordnen benötigte Elemente irgendwie auf einer Seite an. Alle von uns beschriebenen Aktivitäten, die zu einem vernünftigen Design führen, laufen auch hier ab, aber eben ohne strukturierten und geordneten Prozess und oft auch ohne geeignete Ausbildung für diesen Vorgang. Entsprechend treffen wir auf Anwendungen, deren Äußeres uns eher erschreckt, als das wir damit arbeiten wollten.

Dieses Verteilen von Elementen nennen wir das Interfacedesign. Wir ordnen Buttons, Checkboxes, Select Boxes, Inputfelder und Labels an. Mit diesen Elementen verbindet der Benutzer unterschiedliche Erwartungshaltungen, die wir beim Einsatz berücksichtigen müssen. Auch die Menge der angeordneten Elemente und deren Sinnzusammenhang müssen wir im Auge behalten. Es gibt durchaus Seiten, die mit Elementen überfüllt sind. Der Wald ist dann vor lauter Bäumen nicht mehr erkennbar. Oder die angeordneten Elemente bieten uns keinen Sinnzusammenhang und stürzen den Anwender in eine Sinnkrise.

Hier bietet sich ein Übergang zum Informationsdesign an. "Auf jeden Fall geht es beim Informationsdesign darum, Informationen so zu präsentieren, dass die Anwender sie nutzen oder leichter verstehen können." [S.124, GARRATT12] Auch die visuelle Anordnung unserer Elemente hat mit Information zu tun. In unseren Anwendungen präsentieren wir aber auch leichter erkennbare Information: Ergebnisse von Berechnungen, Daten und deren Zusammenfassungen, Bilder und Filme. Auch dafür verwenden wir Elemente: Diagramme, Tabellen und Medienelemente.

Wir müssen eine genaue Auswahl treffen. Welche Daten stellen wir in welcher Form dar? Wie viele Daten und Informationen präsentieren wir? Behält der Anwender den Überblick? Entspricht die Darstellung den Erwartungen des Benutzers? Leicht zu erkennen ist, dass die drei Formen, Interfacedesign, Navigationsdesign und Informationsdesign eine untrennbare Einheit sind und sich gegenseitig bedingt. Es gibt geeignete Werkzeuge, die uns bei der Arbeit auf der Rasterebene unterstützen. Auf dem Markt gibt es eine Vielzahl von Wireframing Tools. Damit lassen sich leicht Anwendungsskizzen anfertigen, mit deren Hilfe wir Anwendungen designen und diskutieren können.



Ich verwende Pencil. Im ersten Entwurf verwende ich die Darstellung im Desktop Sketchy GUI. In diesem Stil erinnert das Layout noch nicht an eine fertige Anwendung. Dem Benutzer ist der Unterschied zwischen der fertigen Anwendung und dem skizzenhaften Charakter des Entwurfs voll bewusst. Somit behält man gestalterische Freiheit, kann aber genau die Absicht der Rasterebene mit dem Anwender diskutieren. Erst in der letzten Ebene, der Oberflächenebene, setzen wir das sensorische Design um. "Inhalt, Funktion und Ästhetik vereinen sich hier zu einem fertigen Design, das die Sinne anspricht und zugleich sämtliche Ziele der anderen Ebenen erfüllt." [S133, GARRETT12]

  • [GARRETT12] : Jesse James Garrett: "Die Elemente der User Experience", Addison-Wesley Verlag, 2012
  • 2005


vorheriger Post dieses Themas     folgender Post dieses Themas


Print Friendly Version of this page Print Get a PDF version of this webpage PDF

Keine Kommentare:

Kommentar veröffentlichen