Bei bildschirmgestützten User Interfaces gibt es fast keine natürlichen Einschränkungen hinsichtlich der Gestaltung von Bedienelementen. Gerade deswegen ist es für Designer wichtig, vorhandene Standards zu kennen und sich daran zu orientieren. Die Grundelemente und ihre Funktion sind den Usern weitgehend bekannt. Es werden immer neue Interaktionselemente entwickelt und daher kann eine solche Aufzählung nie vollständig sein. Bei der Gestaltung neuer Elemente soll man sich jedoch auf die Vor- und Nachteile der bereits bekannten und erprobten Elemente beziehen, die in diesem Kapitel beschrieben werden.

Einleitung

1

Kleinste Einheiten eines User Interface müssen schnell begreifbar sein.

2

Ein klar aufgebautes Navigationsdesign baut darauf auf, daß bereits die kleinsten Einheiten eines User Interface schnell begreifbar sind. Innerhalb einer Bildschirmseite müssen daher alle Elemente dem User ihre Funktion eindeutig mitteilen. Jede Bildschirmseite soll Informationen darüber enthalten, an welcher Stelle man sich innerhalb der multimedialen Anwendung befindet, welchen Zweck die Anwendung insgesamt hat und welchen Zweck der zu dem Zeitpunkt gerade sichtbare Teil davon hat.

Wenn das gegeben ist, werden die User an Kontrollüberzeugung und Sicherheit gewinnen und gerne mit der Applikation interagieren.

Zustandsanzeige

1

Cursor befindet sich über anklickbarem Bedienelement:

• Form des Cursors und/oder die Beschaffenheit des Bedienelementes ändert sich

2

Es entspricht der Konvention und wird vom User erwartet, dass sich die Form des Cursors und/oder die Beschaffenheit des Bedienelementes ändert, sobald sich der Cursor über einem anklickbaren Bereich der Benutzeroberfläche befindet. Dies gilt für Virtuelle Tasten und Schalter, aber auch für alle anderen anklickbaren Bereiche eines User Interface.

Buttons

1

Monostabiler Button

• einfachstes Element eines User Interface
• nur aktiviert, solange gedrückt

Bistabiler Button

• zwei stabile Zustände
• Zustand wechselt bei jeder Betätigung

Radio Buttons

• Reihe von kreisförmigen Tasten
• immer nur eine aktiv

2

Monostabiler Button

Die einfachsten Elemente eines User Interface sind monostabile Tasten (Buttons).

Diese Bedienelementen sind nur aktiviert, solange der User darauf drückt oder klickt. Sie haben zwei Zustände (ursprünglicher und betätigter Zustand) und kehren von selbst immer in den ursprünglichen Zustand zurück.

AUTO

In der physischen Welt haben sie ihre Entsprechung z. B. in einem Bedienelement, das eine Hupe oder eine Türklingel betätigt.

Gestaltung

Auch ein so einfaches Bedienelement wie eine monostabile Taste muß in ihrer Gesamtheit (Größe, Form, Farbe, Position, Funktionsweise) sorgfältig gestaltet werden.

Besonders wichtig ist dies im Bereich der multimedialen Anwendungen. Auf dem Bildschirm passiert es noch leichter, dass ein Bedienelement vom User mißverstanden oder nicht erkannt wird, da der Möglichkeitsraum für Form etc. größer ist als bei einem in Hardware ausgeführten Bedienelement.

Weiters ist es für den User auf dem Bildschirm keine haptische Information über das User Interface verfügbar. Elektronik wiederum birgt mehr Potential für Usability-Probleme als mechanische Bedienelemente wie z.B. Türgriffe, da bei Elektronik der Zeitfaktor oder ein Systemstatus eine Rolle spielen kann.

Irreführende Gestaltung

Norman bringt das Beispiel eines Diaprojektors in einem Hörsaal. Das User Interface des Diaprojektors zum Wechseln des Diapositivs besteht aus einer einzigen Taste.

Der Diaprojektor wird im Hörsaal regelmäßig von Personen bedient, die dies zum ersten Mal tun, z.B. von Studierenden oder Gastvortragenden. Die Bedienungsanleitung ist nicht verfügbar und die User nehmen nicht an, dass sie eine benötigen, da das User Interface so einfach aussieht.

Norman berichtet, dass die User oft nicht in der Lage waren, den Diaprojektor richtig zu steuern. Es kam vor, dass der Schlitten mit den Diapositiven rückwärts aus dem Gerät und auf den Boden fiel.

Die Probleme entstehen dadurch, dass die Taste zum Wechseln der Dias zwei Funktionen hat: Bei kurzer Betätigung wird zum nächsten Dia, bei längerer Betätigung zum vorigen Dia gewechselt. Diese Funktionsweise ist aus Form und Beschriftung der Taste nicht ersichtlich. Sie entspricht auch keinem Standard, also der Erfahrung der User mit anderen ihnen bekannten Interfaces.

Bistabiler Button

Mit einer kleinen Änderung kommen wir zu bistabilen Tasten oder Schalter (Buttons). Der Unterschied zu monostabilen Tasten ist, daß sie zwei stabile Zustände haben. Bei jeder Betätigung wechseln sie den Zustand und behalten ihn anschließend bei.

AUTO

Beispiele in der realen Welt sind Lichtschalter und die Ein/Aus-Schalter der meisten Elektrogeräte.

Gestaltung

Bistabile Schalter müssen klar zu erkennen geben, in welchem Zustand sie sich jeweils befinden.

Es ist weit verbreitet, einen 3D-Effekt für die Darstellung der beiden Zustände eines virtuellen Schalters zu verwenden. Dieser muß graphisch besonders sorgfältig ausgeführt sein, um realistisch und nicht mißverständlich oder störend zu wirken. Es ist empfehlenswert, dass sich zusätzlich zum 3D-Effekt auch die Farbe oder Helligkeit des Schalters zwischen den beiden Zuständen deutlich unterscheidet.

Radio Buttons

Ein weiterer kleiner Schritt führt uns zu Radio Buttons

AUTO

Radio Buttons sind Reihen von kreisförmigen Tasten, von denen genau eine durch einen schwarzen Punkt als gedrückt (aktiv) markiert ist.

Funktion

Dieses Bedienelement, das einem schon lange verbreiteten Standard folgt, verwendet als Metapher die Form und Funktion von Rundfunkstationstasten alter analoger Radioapparate. Wenn man auf eine dieser zylindrischen Tasten drückt, springt beim Radioapparat die zuvor gedrückte automatisch wieder heraus. Es kann also immer nur eine Station ausgewählt sein.

Gestaltung

Ebenso verhalten sich auch virtuelle Radio Buttons. Um dem Standard wirklich zu entsprechen, müssen sie daher immer kreisförmig sein, mindestens zwei Buttons aufweisen und in einer waagrechten oder senkrechten Reihe mit konstantem, relativ geringem Abstand zueinander angeordnet werden.

Checkbox

1

2

AUTO

Im Gegensatz zum Button ist die Checkbox (Kästchen zum Ankreuzen) dem Standard zufolge immer ein Quadrat, das leer oder angekreuzt sein kann und diese Zustände durch Anklicken wechselt.

Funktion

Eine Checkbox verhält sich gleich wie eine bistabile Taste. Sie ist aber kleiner und ihr Zustand ist bezogen auf ihre Größe visuell leichter erkennbar. Daher werden Checkboxen meist dann verwendet, wenn es eine ganze Reihe von Optionen gibt, die unabhängig voneinander ein- und ausgeschaltet werden können. Grundsätzlich ist eine einzelne Checkbox möglich, während ein einzelner Radio Button nicht sinnvoll ist.

Link

1

anklickbares Element

mit einem bestimmten Ziel verbunden

Standard im WWW:

• blauer und unterstrichener Textbereich.
• Zusätzlich Zielanzeige in Fußzeile

Link-Kategorien:

• primären Navigation
• sekundäre Navigatio
• Utilities

2

AUTO

Ein Link ist ein anklickbarer Teil eines Hypertextdokumentes oder einer multimedialen Anwendung, der mit einem bestimmten Ziel verbunden (verlinkt) ist.

Gestaltung

Beim Design von Links ist es besonders wesentlich, Konsistenz und Standards zu berücksichtigen. Konsistente Verwendung von Links bedeutet, daß sie innerhalb der Anwendung immer gleich gestaltet sind und sich gleich verhalten.

Sich an bestehende Standards zu halten bedeutet, Links so zu gestalten, wie es den weit verbreiteten Konventionen entspricht.

Webstandard

Der weit verbreitete Standard für Links im World Wide Web ist ein blauer und unterstrichener Textbereich.

Er kann ein Wort oder mehrere Worte umfassen. Ein Link sollte sich nicht über mehrere Zeilen erstrecken. Wenn man den Cursor über den Link bewegt und solange sich der Cursor auf dem Link befindet, soll sich die Form des Cursors verändern (ohne Link: Pfeil, auf dem Link: Hand).

Zusätzlich soll das Ziel des Links, also der Ort an den man kommt wenn man auf den Link klickt (im WWW: die URL) in der Fußzeile der Bildschirmseite angezeigt werden.

Link-Kategorien

Die zur primären Navigation einer Informationshierarchie gehörigen Links werden auch Sektionen genannt. Der Teil der Navigations-Links, der in einer Applikation immer oder fast immer sichtbar ist, wird persistente (globale, gleichbleibende) Navigation genannt.

Als sekundäre Navigation bezeichnet man die niedrigeren Ebenen (Levels), die - je nach Umfang der Hierarchie - ab einem bestimmten Level nicht immer sichtbar sind.

Utilities sind Links zu Elementen der Applikation, die nicht Teil der inhaltlichen Hierarchie sind, aber von den Usern für bestimmte Servicefunktionen erwartet werden (vgl. Steve Krug). Eine der wichtigsten Servicefunktionen in großen Hierarchien ist die Suchfunktion.

Menü

1

• Liste von Bedienelementen
• im Normalzustand des Systems nicht sichtbar
• durch aktiven Bedienvorgang sichtbar
• Menüelemente: Text oder Symbole

Untermenüs

• Elemente eines Menüs sind Menüs:kaskadiertes Menü

Drop Down

• klappt auf, wenn man auf Button geklickt wird
• meist am oberen Bildschirmrand (Menüleiste)

Pull Down

• Menü hat Griff (Handle)
• kann in den sichtbaren Bildschirmbereich gezogen werden
• meist am rechten oder linken Rand der Bildschirmseite

Pop Up

• kann anbeliebigen Stelle der Bildschirmseite angezeigt werden
• meist durch Klicken auf ein verschiebbares Element aufgerufen

Information vom darunterliegenden Element abhängig: Kontextmenü

Pie

• Sonderform des Pop-Up-Menüs
• Grundform kreisförmige Scheibe
• im Kreis um die Position des Cursors angeordnet

Rotation

• durch die physischen Eigenschaften von Eingabegeräten wenig verbreitet

Menütiefe

• Umfang erschwert Orientierun

als komplex empfunden:

• mehr als drei Ebenen (für ungeübte User)
• fünf Ebenen (für geübte User) tief ist.

Menübreite

• Umfang durch Card Sorting ermitteln

2

AUTO

Ein Menü ist eine Liste von Bedienelementen, die zusammengefaßt wurden, und im Normalzustand des Systems nicht sichtbar sind.

AUTO

Das Menü wird üblicherweise durch einen aktiven Bedienvorgang des Users sichtbar gemacht und erlaubt dann die Interaktion mit seinen Elementen, die z.B. Tasten, Schalter oder Checkboxen sein können.

Menüelemente werden oft als Text ohne weitere Umrandung ausgeführt, was zur leichten Lesbarkeit beiträgt. Menüelemente können auch Symbole sein, die untereinander, nebeneinander oder in Form einer Matrix angeordnet sind.

Untermenüs

Im Fall dass die Elemente eines Menüs wiederum Menüs sind, spricht man von einem Menübaum oder auch von kaskadierten Menüs.

Drop Down

Drop-Down-Menüs klappen nach unten auf, wenn man auf einen zugehörigen Button klickt.

AUTO

Dieser befindet sich dem gängigen Standard zufolge in einer dem oberen Bildschirmrand nahe gelegenen Zeile (Menüleiste). Meist sind dort mehrere Menübuttons nebeneinander angeordnet, wodurch die Zeile von Menübuttons auch als solche erkennbar ist.

Pull Down

Von Pull-Down- oder Pull-Up-Menüs spricht man, wenn das Menü einen Griff (Handle) besitzt, mit dem es der User in den sichtbaren Bildschirmbereich ziehen kann.

AUTO

Solche Menüs sind oft am rechten oder linken Rand der Bildschirmseite angeordnet. Sie verwenden im Gegensatz zu Drop-Down-Menüs eine stärkere visuelle Metapher und lassen daher das User Interface "haptisch greifbarer" erscheinen.

Pop Up

Ein Pop-Up-Menü ist ein Menü, das an einer beliebigen Stelle der Bildschirmseite angezeigt werden kann. Es wird meist durch Klicken auf ein verschiebbares Element aufgerufen. Wenn es Information anzeigt, die vom darunterliegenden Element abhängig variiert, spricht man von einem Kontextmenü .

Pie

Eine Sonderform des Pop-Up-Menüs ist das - derzeit leider noch seltene - Tortenmenü (Pie Menu) , dessen Grundform nicht rechteckig sondern eine kreisförmige Scheibe ist. Die Elemente des Tortenmenüs sind wie Tortenstücke im Kreis um die Position des Cursors angeordnet.

AUTO

Der Vorteil des Tortenmenüs ist, dass man ein Element bereits durch eine sehr geringe Bewegung mit dem Cursor auswählen kann. Ein Tortenmenü hat üblicherweise nicht mehr als 8 Elemente. Jedes Element ist einem bestimmten Winkelbereich in Bezug auf die Horizontallinie zugeordnet.

Auch Tortenmenüs können kaskadiert werden. Dadurch wird die Auswahl eines Elementes z.B. in der dritten Ebene ähnlich wie das Schreiben eines Graffiti auf einem PDA mit Schrifterkennung, also eine kurze Sequenz von Strichen in verschiedene Richtungen. Dies kann für geübte User einen Gewinn an Effizienz gegenüber linearen Menüs bringen.

Rotation

In der physischen Welt gibt es noch eine ganze Reihe weiterer Bedienelemente, deren Funktionsweise nicht durch diskrete Zustände oder lineare Verschiebung, sondern durch Rotation charakterisiert ist.

Durch die physischen Eigenschaften von Eingabegeräten wie Maus, Trackball und Grafiktablett, die keine Drehbewegung um die eigene Achse erkennen können, sind auf Rotation basierende Elemente in bildschirmbasierten User Interfaces wenig verbreitet. Sie haben jedoch einen höheren Wiedererkennungsfaktor und könnten daher eine aus Sicht der Usability sinnvolle Innovation im Multimediabereich darstellen.

Menütiefe

Eine Eigenschaft von Menüs ist es, dass viele Interaktionselemente ohne Verlust von Bildschirmfläche untergebracht werden können. Dies ist gleichzeitig eine Chance und eine Gefahr. Die Chance besteht darin, dass ein ungeübter oder wenig anspruchsvoller User viele Optionen des User Interface im Normalfall nicht sieht. Ein geübter oder anspruchsvoller User findet diese Optionen jedoch in den Tiefen von kaskadierten Menüs, sogenannten Menübäumen. Die Gefahr besteht darin, dass Menübäume zu komplex werden und dass dem Wildwuchs von - möglicherweise unnötiger - Funktionsvielfalt Vorschub geleistet wird.

Je tiefer und breiter ein Menübaum ist, desto schwieriger ist es für den User die Orientierung zu bewahren. Insbesondere ist es ein Problem, wenn der User eine selten benutzte, aber notwendige Menüoption bei jeder Verwendung erneut suchen muß und nicht auf Anhieb findet. Als komplex wird eine hierarchische Struktur empfunden, wenn sie mehr als drei Ebenen (für ungeübte User) bzw. fünf Ebenen (für geübte User) tief ist.

Menübreite

Die weithin bekannte Tatsache, dass das Kurzzeitgedächtnis maximal 7 +/- 2 Elemente speichern kann, wird oft fälschlicherweise zur Konstruktion von Menübäumen herangezogen. Dies ist nicht sinnvoll, da sich der User die Elemente in Menüs nicht einzeln merken muß. Daher spricht z.B. nichts gegen ein Menü in einem Textverarbeitungsprogramm, das 300 verschiedene Schriftarten unter dem Überbegriff "Schriftarten" enthält. Der Umfang eines Menüs wird am sinnvollsten mit der Methode Card Sorting ermittelt.

Reiter

1

Metapher: Karteikarten, Hängeregistratur

• eine Karte vollständig sichtbar
• weiteren Karten "dahinter", nur Reiter sichtbar
• durch Anklicken des Reiters Karte in den Vordergrund

2

Reiter und Karteikarten sind ein beliebtes Element von User Interfaces und werden auch in der Literatur durchwegs sehr positiv bewertet.

Sie verwenden die Metapher von Karteikarten oder Ordnern in einer Hängeregistratur, die durch ein oben herausragendes kleines Schild - den Reiter - gekennzeichnet sind. Jeweils eine Karte ist vollständig sichtbar, die weiteren Karten befinden sich virtuell "dahinter" und von ihnen ist nur der Reiter sichtbar.

Durch Anklicken des Reiters wird die dazugehörige Karte sichtbar, also in den Vordergrund gebracht.

Beim Design von Reitern ist es wichtig, dass sie mit der dazugehörigen Karteikarte durch eine gemeinsame Umrandung verbunden sind. Weiters soll die Oberfläche von Karteikarte und Reiter dieselbe Farbe haben, sich aber von den gerade im Hintergrund befindlichen Reitern klar unterscheiden.

Pfad

1

Weg zu einer bestimmten Stelle in einer Hierarchie

z.B.:

Tiere > Säugetiere > Hunde > Terrier > Scotch Terrier

2

Als Pfad bezeichnet man die Information, die den Weg zu einer bestimmten Stelle in einer Hierarchie bezeichnet. Am Beginn eines Pfades steht die Wurzel der dazugehörigen Baumstruktur, also z.B. die Homepage (Startseite) im Fall einer Website. Am Ende eines Pfades steht die bestimmte Stelle in dem hierarchischen System, an der sich der User gerade (virtuell) befindet.

AUTO

Ein Pfad könnte zum Beispiel lauten:

Tiere > Säugetiere > Hunde > Terrier > Scotch Terrier

AUTO

Die in diesem Beispiel gewählte Darstellung des Pfades mit dem Größerzeichen ">" (Pfeil nach rechts) zwischen den Elementen wird in Anspielung auf das Märchen Hänsel und Gretel auch Breadcrumbs (Brotkrümel) genannt.

Steve Krug empfiehlt, sie stets ganz oben am Bildschirmrand zu platzieren, als Trennzeichen nur das Größerzeichen ">" zu verwenden und den letzten Begriff in fetter Schrift zu schreiben.

Sitemap

1

Übersichtsdarstellung der Informationshierarchie einer Applikation

2

Ein Sitemap ist eine möglichst übersichtliche Darstellung der Informationshierarchie einer Applikation. Ähnlich wie ein in der Eingangshalle ausgehängter Plan eines großen Gebäudes ist ein Sitemap ein nützliches Hilfsmittel zur Orientierung, ersetzt aber nicht eine gute Informationsarchitektur.

Suche

1

Suche soll parallel zu Link-Navigation angeboten werden

"such-dominante" und "link-dominante" User

Gestaltung:

• Suchfunktion mit "Suche" bezeichnet
• rechteckiges weißes Texteingabefeld
• rechts daneben ein Button mit der Aufschrift "Suchen"
• eventuell ein Link "erweiterte Suche"

2

Die Suche ist ein wertvolles Feature von Applikationen, das parallel zu deren bestehender Navigation angeboten werden sollte. User lassen sich nach Jakob Nielsen gemäß ihrem Verhalten in Gruppen einteilen, nämlich in die "such-dominanten" und in die "link-dominanten" User. Die erste Gruppe verwendet bevorzugt eine Suchfunktion um in einer hierarchischen Struktur etwas bestimmtes zu finden. Die zweite Gruppe versucht das Gewünschte zuerst selbst mit Hilfe von Links zu finden und verwendet die Suchfunktion eventuell erst später. Es gibt auch User, die beide Strategien regelmäßig anwenden. Aus diesem Grund sollte jede hierarchische Struktur eine Suchfunktion aufweisen.

Eine Suchfunktion soll mit "Suche" bezeichnet sein und ein rechteckiges weißes Texteingabefeld aufweisen, neben dem rechts ein Button mit der Aufschrift "Suchen" angeordnet ist. Das Eingabefeld soll in seiner Kapazität nicht begrenzt sein bzw. jedenfalls für alle möglichen Anwendungsfälle genügend Zeichen aufnehmen können.

Suchmasken mit mehreren Feldern, Kategorien und Optionen sind für den Großteil der User zu kompliziert. Sie sollten nur eventuell über einen Link "erweiterte Suche" als Alternative zu einer einfachen Suchfunktion angeboten werden.

Fenster

1

zentrale Elemente von grafischen User Interfaces

erlaubendie Darstellung von Informationen über die Größe des Bildschirms hinaus

Buttons zur Anpassung der Größe und Form des Fensters

Rollbalken (Scroll Bar) :

• seitenweises Blättern
• stufenloses Verschieben der Positionsmarke
• langsames Scrollen durch Buttons an Enden des Rollbalkens

2

Fenster sind zentrale Elemente von grafischen User Interfaces, die es erlauben, mehr Informationen auf einem Bildschirm darzustellen, als es die Fläche des Bildschirms eigentlich erlaubt.

Neben Buttons zur Anpassung der Größe und Form des Fensters ist der Rollbalken (Scroll Bar) das wichtigste Bedienelement zur Navigation innerhalb des Fensterinhalts, also z.B. innerhalb eines Textes oder eines Bildes. Üblicherweise werden drei Interaktionsformen von Rollbalken unterstützt:

• seitenweises Blättern durch Anklicken des Hintergrundes
• stufenloses Verschieben der Positionsmarke
• langsames Scrollen durch Anklicken der Buttons an beiden Enden des Rollbalkens

Timeline

1

User-Interface-Element zur Navigation in zeitbasierten Daten

• horizontal angeordnet
• Zeit schreitet nach rechts fort
• Parallele Abläufe untereinander dargestellt

Interaktion: z.B. das Markieren von Zeitabschnitten

2

Eine Timeline (Zeitachse) ist ein User-Interface-Element, das zur Navigation in zeitbasierten Daten, vor allem Meßdaten, Audio- und Videomaterial, dient.

Die Konventionen für das Design von Timelines entstammen daher dem technisch-naturwissenschaftlichen Bereich. Sie besagen vor allem, dass Timelines horizontal angeordnet sind und die Zeit nach rechts fortschreitet.

Parallele Abläufe werden daher untereinander dargestellt. User erwarten aufgrund ihrer Erfahrung, dass Timelines bestimmte Interaktionsformen erlauben, z.B. das Markieren von Zeitabschnitten, was durch ein Rechteck in einer vom Hintergrund abweichenden Farbe dargestellt wird.

Literatur

Steve Krug (2002) "Don't make me think! Web Usability - das intuitive Web". Bonn: mitp-Verlag.

Louis Rosenfeld, Peter Morville (1998, 2002) "Information Architecture for the World Wide Web", O'Reilly.

Jennifer Preece, Yvonne Rogers, Helen Sharp (2002) "Interaction Design - beyond Human-Computer Interaction", John Wiley & Sons.