Logo: Workshop

Überblick

Interface Design

Einführung

Die Grundelemente

Direkte Zugänge

Navigation

Links & Navigation

E-Mail an: design@akademie.de


Direkte Zugänge für Ihre Nutzer
Das Ziel ist es, dem Anwender über den allerkürzesten Weg einen Zugang zu Informationen zu ermöglichen. Zwingen Sie den Nutzer nicht, mehr Schritte zu gehen als unbedingt notwendig. Für Sie als Designer bedeutet das, daß Sie eine effiziente Informationshierarchie entwerfen müssen. Studien zum Thema Benutzerschnittstelle haben gezeigt, daß Anwender Menüs mit einem Minimum von fünf bis sieben Links und informationsreiche Bildschirmseiten mit vielen Wahlmöglichkeiten gegenüber Menüverschachtelungen über mehrere Ebenen hinweg und Seiten mit weniger Wahlmöglichkeiten bevorzugen.
Die untenstehende Tabelle zeigt Ihnen, wie viele Auswahlmöglichkeiten sich durch Verschachtelung ergeben können (ob man wirklich so viele braucht, steht auf einem anderen Blatt geschrieben):

Table of menu levels and number of choices.

Bandbreite und Interaktivität
Web-Surfer tolerieren keine langen Verzögerungen. Untersuchungen zu diesem Thema haben gezeigt, daß die Frustrationsschwelle für Computerarbeiten nach ca. zehn Sekunden überschritten ist. Ein Web-Design, das die Zugriffsgeschwindigkeit der typischen Nutzer nicht berücksichtigt, frustriert diese bloß. Wenn Ihr Zielpublikum hauptsächlich aus "zufälligen" Besuchern besteht, die mit 28.8 Modems surfen, wäre es sehr unklug, Ihre Site mit sehr großen Grafiken auszustatten - es ist unwahrscheinlich, daß solche Nutzer geduldig bleiben, während sie lange auf Ihre Bilder warten. Anders verhält es sich, wenn es um den Aufbau einer universitäts- bzw. firmeninternen Site (Intranet) geht - hier können Sie ambitionierter vorgehen, da Ihre Benutzer nicht auf die Übertragung per Modem über eine einfache Telefonleitung angewiesen sind.

Einfachheit und Konsistenz
Anwender werden nicht von überflüssiger Komplexität begeistert sein, erst recht nicht, wenn es ihnen darum geht, schnell an (aktuelle) Informationen zu gelangen, die sie für ihre Arbeit benötigen. Die Metaphern, die Sie als bildliche Vorstellung Ihrer Site-Struktur benutzen, sollten einfach, bekannt und ihrem Publikum logisch erscheinen. Wenn Sie einen eindeutigen Zugriff ermöglichen wollen, nehmen Sie als Metapher für Ihr Informationsdesign eher das "Buch" oder die "Bibliothek" [d.h. eher eine lineare, zwei- oder dreidimensionale Metapher] und nicht das "Raumschiff" [d.h. eine tendenziell chaotische oder vierdimensionale Metapher]. Die besten Informationsmetaphern sind allerdings diejenigen, die den meisten Lesern gar nicht auffallen.
Die Arbeit der Agentur Studio Archetype für Adobe ist ein ausgezeichnetes Beispiel für die gelungene Ordnung von Informationen. Die Seiten machen intensiven Gebrauch von Grafiken, die als Navigationshilfen auf jeder Seite konsequent eingesetzt werden. Sobald man sich erst einmal orientiert hat und weiß, wo sich die Navigationselemente befinden, tritt die Benutzerschnittstelle in den Hintergrund und das Navigieren wird nahezu mühelos.

Screen dump of Adobe corporation's home page.

Die Grafik wurde von der Originalgröße reduziert.   www.adobe.com

Eine maximale Funktionalität und Verständlichkeit erreichen Sie dann, wenn Ihr Site-Design auf ein durchgängiges Muster aufgebaut ist. Dieses Muster besteht aus Einzelteilen, die modular zusammengesetzt werden. Einheitlich sind Layout-Schemata, grafische Elemente, redaktionelle Konventionen und Hierarchien, die für die Organisation von Informationen verwandet werden. Das Ziel: eine Web-Site, die für den Anwender eindeutig, klar und konsistent ist. Hier fühlt er sich gut aufgehoben und sicher, weil er weiß, wie er schnell zu den gewünschten Informationen gelangt:

Header menu graphic from the Adobe Web site.

Die Grafik wurde von der Originalgröße reduziert.   www.adobe.com

Weitere Beispiele hierfür findet man ebenfalls auf der Adobe-Site. Auf jeder Seite findet man oben eine "Kopfzeile" mit Schaltflächen, die sich auf jeder Seite wiederholen. So wird eine grafische Kontinuität bewahrt und eine konsistente "Corporate Identity" hergestellt.
Auch wenn Sie selber auf Ihren Seiten keine Grafiken als Navigationselemente verwenden, sollten Sie sich bemühen, das Layout der Überschriften, Seitenfuß- und -kopfzeilen einheitlich zu gestalten. Bei wichtigen Informationen, die Sie selber nicht erfaßt haben, sollten Sie sich überlegen, ob Sie - anstelle der Links zu den Informationen anderer Sites bzw. Seiten - diese Seiten in Ihre eigene Site integrieren, d.h. mit Ihrem Layout versehen. (Dies soll aber nicht als Aufforderung zum "Klauen" verstanden werden. Selbstverständlich dürfen Sie keine Copyrights verletzen. Fragen Sie lieber beim Urheber nach.)

Funktionale Stabilität
Wenn Sie Ihre Leser davon überzeugen möchten, daß Ihre Informationen zutreffend und zuverlässig sind, müssen sich diese Eigenschaften in Ihrem Design und dessen Funktionalität niederschlagen. Daher ist es besonders wichtig, Sorgfalt walten zu lassen.
Unter funktionaler Stabilität im Web-Design versteht man vor allem, daß die interaktiven Elemente in Ihrer Web-Site einwandfrei funktionieren. Die Erzeugung einer funktionalen Stabilität umfaßt zwei Vorgänge:

  1. die richtige Einsetzung und Verknüpfung aller Bedienungselemente;
  2. die Pflege der Seiten, so daß nachträgliche Änderungen und ein Wachstum der Site (und des WWW) die Stabilität nicht gefährden.

Gute Web-Sites sind grundsätzlich interaktiv, d.h. sie bieten dem Anwender viele Möglichkeiten, über Links zu anderen interessanten Seiten im eigenen Web und zu Seiten im WWW zu gelangen. Im Laufe der Zeit ändern sich diese Links, Seiten verschwinden, neue kommen hinzu. Sie müssen laufend prüfen, ob Ihre Links noch zutreffen und ob die Informationen, die sie enthalten, noch die Bedürfnisse Ihrer Leser befriedigen.

Feedback und Dialoge
Machen Sie es Ihren Lesern möglich, mit Ihnen in Kontakt zu treten, um ihre Anregungen, Fragen und Kritik an Sie weiterzuleiten. Gut gebaute Web-Sites sollten auf jeden Fall über einen Mail-Link zu der Site-Redaktion oder zum sogenannten "Webmaster" verfügen. Solche Dialogmöglichkeiten sind für die Kunden-/Leserbindung und daher für den langfristigen Erfolg unerläßlich.


Book-Macintosh Human Interface Guidelines

Book-Windows Interface Guidelines
Spezielle Lesergruppen berücksichtigen
Nicht alle Anwender verfügen über gute Bandbreiten und schnelle Rechner. Bedenken Sie bitte außerdem, daß es eine ganze Gruppe von Anwendern gibt, die unter Körperbehinderungen verschiedener Art leiden. Bei der Nutzung des WWW wirkt sich wohl am schwerwiegendsten eine Sehschwäche aus. Eine einfache Hilfestellung für die solcherart behinderte Gruppe von Anwendern ist der konsequente Einsatz von textbasierten Links und des sogenannten "alt"-Tags für Bilder [Mit dem "alt"-Tag im Dokumentquelltext kann eine Grafik optional durch Text vertreten werden, der diese Grafik beschreibt oder zumindest benennt. Wenn der Anwender dann die Browser-Funktion deaktiviert, die Grafiken automatisch lädt, erscheint statt der Grafik der alternative Text auf dem Bildschirm] [Sehbehinderte können über die Browser-Eigenschaften die Schriftgröße erhöhen, kleine Bildinformationen bleiben ihnen aber verschlossen, da die Größe von Bildern nicht eingestellt werden kann; Anm. d. Übers.]. Spezielle Software erlaubt es sogar gänzlich blinden Menschen, Web-Sites zu benutzen: Textinformationen werden in gesprochene Sprache transformiert. Wenn Sie aber wichtige Informationen nur in grafischer Form anbieten, schließen Sie Sehbehinderte aus.

Quellen:

Adobe Corporation. www.adobe.com

Apple Computer, Inc. 1992. Macintosh human interface guidelines. Reading, MA: Addison-Wesley.

Microsoft Corporation. 1995. The windows interface guidelines for software design. Redmond, WA: Microsoft Press.

Shneiderman, B. 1992. Designing the user interface: Effective strategies for effective human-computer interaction. 2nd ed., Reading, Mass.: Addison-Wesley.

Studio Archetype