Yale C/AIM Web Style Guide

Überblick

Page Design

Einführung

Grafikgestaltung 100

Ausgewogenheit der Seiten

Design-Gitternetze für Seiten

Sicherheitsbereiche für Grafiken

Kopfzeilen

Typographie I

Typographie II

Schriftarten

Einheitlichkeit

Grundlegendes zu Tabellen

Länge der Seiten

Plattformübergreifende Fragen

Frames

Komplexe Tabellen

Einführung

Wir erwarten von einer Informationsquelle, daß sie klar, logisch aufgebaut und vertrauenswürdig ist. Dabei spielt es keine Rolle, ob es sich um ein traditionelles Papierdokument oder um eine Web-Seite handelt. Durch die Art und Weise, wie wir Grafiken und Text auf einer Web-Seite anordnen, können wir Verschiedenes bewirken. Wir können das Interesse des Benutzers wecken, seine Aufmerksamkeit lenken, Prioritäten setzen und die Interaktion des Benutzers mit unserer Web-Site interessanter und effizienter gestalten..
"Der Mensch ist der große Entwerfer und Wahrnehmer von Mustern. Wie primitiv seine Lebensumstände auch sein mögen und wie leidgeplagt er auch ist - in einer Welt des Chaos kann er nicht leben." Edmund Carpenter
Grafische Gestaltung und visuelle Logik
Grafische Gestaltung ist dazu da, eine visuelle Logik zu schaffen. Gemeint ist damit die optimale Ausgewogenheit zwischen dem visuellen Eindruck einerseits und den in Grafik oder Text enthaltenen Informationen andererseits. Wirken Form, Farbe und Kontrast nicht optimal zusammen, ist die Web-Seite grafisch nichtssagend und regt den Betrachter nicht dazu an, ihren Inhalt zu erforschen. Dichtgeschriebene Textdokumente, in denen es versäumt wurde, durch Grafiken, ein sorgfältiges Seitenlayout und eine ansprechende Typografie Kontraste und Auflockerung zu schaffen, sind schwieriger zu lesen als solche, bei denen diese Gestaltungsprinzipien berücksichtigt wurden. Das ist besonders störend, wenn diese Dokumente auf den Bildschirmen unserer heutigen Heimcomputer gelesen werden, deren Auflösung relativ niedrig ist. Es gibt aber auch den umgekehrten Fall. Fehllt einer stark grafiklastigen Seite die vom Text vermittelte Tiefe und Komplexität, besteht das Risiko, daß sich der Benutzer, verwirrt von dem Ungleichgewicht zwischen visuellen Eindrücken, Textinformation und interaktiven Hypermedia-Links, enttäuscht abwendet. Wo liegen die größten grafischen Gestaltungshindernisse, wenn wir versuchen, ein solches ideales Gleichgewicht auf einer Web-Seite herzustellen? Erstens in der vertikalen, listenorientierten Struktur von HTML, wie sie in den derzeitigen Web-Browsern wie Netscape und Internet Explorer zutage tritt, und zweitens in den praktischen Bandbreitenbeschränkungen für die Zugangsgeschwindigkeiten der Benutzer, die derzeit von 14.4 kbps Modems bis hin zu Ethernet-Geschwindigkeit oder mehr variieren.
Wenn Sie Ihre Benutzer davon überzeugen wollen, daß sie auf Ihrer Web-Site zeitgerechte, präzise und nützliche Informationen finden, kommen Sie nicht umhin, für eine visuelle und funktionale Kontinuität von Struktur, grafischer Gestaltung und Typografie Ihrer Web-Site zu sorgen. Eine sorgfältige, systematische Seitengestaltung kann das Navigieren erleichtern, die Zahl der Fehler verringern und es für den Benutzern bequemer machen, Informationen und Features Ihrer Web-Site uneingeschränkt zu nutzen.

Grafische Gestaltung und das Web
Die Hypertext Markup Language (HTML), die Sprache des Web-Seitendesigns, ist ein Hypertext-System, das interaktive Verbindungen von Grafiken, Text oder Mediendokumenten in den Vordergrund rückt. Die Möglichkeiten, Grafiken oder bewegliche Medien mit Text zu mischen, sind bei HTML nicht so vielfältig wie bei anderen Editionssystemen elektronischer Dokumente oder beim Drucken auf Papier. Das Vokabular der grafischen Gestaltung wird in HTML durch die vertikale Listenstruktur dieser Sprache und die Unsicherheit beschränkt, die das Gestalten mit geräteunabhängigen physischen und logischen Typografiesteuerungen mit sich bringt. Allerdings bietet die Fähigkeit dieser Sprache Hypertext-Links, Text und Grafiken einzubauen, die die Möglichkeiten des Internets voll ausschöpfen können, ein ungeahntes funktionales Leistungspotential und große Flexibilität beim Gestalten von miteinander verbundenen, interaktiven Informationssystemen.

Die effiziente Nutzung des World Wide Web
Obwohl die Verheißung einer vernetzten Multimedia-Welt, die wir mit Web-Seiten verbinden, groß ist, ist das hochgradig grafisch orientierte Schnittstellendesign, wie es auf den konsumentenorientierten CD-ROM Multimediatiteln gang und gäbe ist, ein äußerst mangelhaftes Vorbild für die Gestaltung der heutigen Web-Seiten. Ein derart grafisch überfrachtetes Design erfordert eine enorme Kommunikationsbandbreite. Die meisten heutigen PCs sind damit überfordert, selbst wenn sie einen Ethernet-Zugang haben. Eine rein grafische Menügestaltung von Web-Seiten, die auf einer großen Imagemap-Grafik aufbauen, eignen sich zwar gut für die Intranets von Unternehmen oder Bildungsinstitutionen, stellen aber die Geduld der Benutzer, die sich via Modem in das Netz einwählen, auf eine unzumutbare Probe.
Homepage-Designs wie das von FedEx (siehe unten) ahmen die grafischen Menüs von Multimedia CD-ROMs nach. Grafische Menübildschirme haben zwar eine große visuelle Wirkung, muten aber den Benutzern, denen keine Internet-Verbindungen mit großer Bandbreite wie ISDN oder Ethernet zur Verfügung stehen, lange Wartezeiten zu. FedEx setzt darauf, daß die meisten Benutzer ihrer Site Mehrfachbenutzer sind, die große Grafiken im Cache ihres Browsers gespeichert haben, so daß sie bei darauffolgenden Besuchen schnell geladen werden können:



Die Grafik wurde von der Originalgröße verkleinert   www.fedex.com

Das, was am Web am meisten fasziniert, ist die grafische Kommunikation. Grafisch dominierte Splash-Bildschirme oder Homepages können somit sehr erfolgreich sein. Wenn Sie sich dafür entscheiden, muß Ihnen allerdings klar sein, daß Sie Abstriche im Bereich des Benutzerkomforts und der Leistung machen müssen. Außerdem sollten Sie sich vergewissern, daß Sie Ihre Zielgruppen dadurch nicht abschrecken. Das Design unserer C/AIM Homepage besteht aus einem grafischen Menü. Jedes Mal, wenn die Seite geladen wird, wird mit Hilfe von JavaScript nach dem Zufallsprinzip eines von 12 verschiedenen Designs auswählt. Wir entschieden uns für die grafische Wirkung und machten dafür Abstriche bei der Vielfalt der Text-Links. Dafür waren vor allem zwei Gründe ausschlaggebend. Das Menü unserer Basis-Homepage ist kurz und bei unseren Benutzern handelt es sich hauptsächlich um Wissenschaftlerkollegen und Ärzte, die über einen schnellen Zugang zum Netz verfügen.

Home page graphic, Yale Center for Advanced Instructional Media

Die Grafik wurde von der Originalgröße verkleinert   www.med.yale.edu/caim/


Diagram shows pages with and without graphics loaded.
Grafik und Ansprechverhalten des Systems
Die Web-Systeme, die ursprünglich in erster Linie eine ungeordnete Sammlung von Informationen waren, werden heute zunehmend von Organisationen, Bildungsinstitutionen und Unternehmen genutzt. Damit nehmen auch die Erwartungen zu, die an die Leistung dieser Systeme gestellt werden. Große Organisationen, die ein Intranetsystem im Web als Management-Informationswerkzeug benutzen, müssen lange Wartezeiten befürchten. Sie entstehen durch den unangemessenen Einsatz übergroßer Grafiken oder durch andere Unzulänglichkeiten wichtiger Menübereiche und können die Kosteneffektivität des Systems stark beeinträchtigen. Dieses Problem tritt vor allem dann auf, wenn viele Benutzer via Modem auf eine Web-Site zugreifen, wie es zum Beispiel bei Telearbeitskräften, Fernstudenten, Vertretern oder Außendienstpersonal der Fall ist. Die meisten Studien, bei denen die Reaktionen der Benutzer auf Verzögerungen von Computersystemen untersucht wurden, ergaben, daß Wartezeiten von mehr als 10 Sekunden bei routinemäßigen, immer wiederkehrenden Computerabläufen als untragbar empfunden werden. In den letzten Jahren hatte das sehr langsame Netz aufgrund seines Neuheitswertes sozusagen Narrenfreiheit, aber es ist kaum davon auszugehen, daß die Nutzer langfristig für Websysteme mehr Toleranz aufbringen als für andere Netzdienste oder EDV-Aufgaben.

Mit Grafik oder ohne?
Wenn Sie derzeit auf der Homepage Ihrer Site ein großes grafisches Menü verwenden, sollten Sie sich einmal das genaue Protokoll der Hits (Treffer) ansehen, das von Ihrer Web-Server-Software erstellt wird. (Wenden Sie sich an Ihren Administrator, wenn sie noch keins erhalten haben. Er ist in der Lage sie für Sie anzufertigen.) Aus diesem Protokoll geht hervor, wie oft Ihre Homepage von Benutzern angefordert, d.h. getroffen wird. Jede GIF- oder JPEG-Grafik Ihrer Homepage sollte ebenfalls einen entsprechenden Hit aufweisen, wenn die Grafikdateien angefordert und vom Benutzer heruntergeladen werden. Wenn die Zahl der Hits in der HTML-Datei Ihrer Homepage deutlich höher ist als die Zahl der Hits in den Grafikdateien , wissen Sie, daß viele Benutzer, die auf Ihre Seite zugreifen, den Grafikmodus in ihren Web-Browsern deaktiviert haben. Wenn sie dies deshalb tun, weil das Laden Ihrer Site sehr lang dauert, gelangen die Informationen, die Sie in die Grafiken Ihrer Web-Seite gepackt haben, nie zum Benutzer.

Referenzen

FedEx, Inc.

Center for Advanced Instructional Media, Yale University
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.