 |
Design-Regeln
Zweck des World Wide Web ist es immer noch, untereinander verknüpfte Informationen bereitzustellen. Natürlich sollen die Webseiten keine Textwüsten auf Einheitsgrau sein, aber auf der anderen Seite sind Seiten, auf denen es an allen Ecken und Enden zappelt, genauso abschreckend. Deshalb folgen nun ein paar Tips für Webseiten-Designer.Egal, ob das WWW-Angebot eine 'Textwüste' wird oder ob man es schrillund bunt gestaltet, man muß sich Gedanken über die Stukturdes Angebotes machen. Dabei gibt es zwei Möglichkeiten :
- Ein flaches Angebot, bei dem von der Startseite (Homepage) viele
Verzweigungen ausgehen und dort nach ein oder zwei Stufen das Ende erreicht ist.
- Ein tiefes Angebot, bei dem wenige Links von der Homepage in jeweils
tief verzweigte Strukturen münden.
Meist wird sich eine Mischform ergeben. Eine 'Textwüste kann man relativ
einfach auflockern, indem man ein paar kleine Bilder einstreut.
Beim Gestalten einer HTML-Seite sollte man auch an das Bildschirmformat denken.
Mehr als eine Schreibmaschinenseite sollte eine einzelne Webseite nur dann sein,
wenn es sich um einen zusammenhängenden Text handelt. Übergeordnete
Seiten sollte in der Regel auf einen Bildschirm passen.
 Empfehlungen für das Gestalten von HTML-Seiten
- Verwenden Sie im Title-Tag möglichst viele ausdruckstarke Begriffe, die auch
wirklich auf den Inhalt Ihrer Seite zutreffen. Suchmaschinen berücksichtigen
zumindest den Title-Tag.
- Formulieren Sie Ihre Texte kurz und verständlich. In der Regel sind Singular-
und Präsens-Formulierungen angebracht.
- Vermeiden Sie lange, unstrukturierte Texte. Jeder lange Text läßt sich
über eine Einstiegsseite mit Inhaltsverzeichnis (das gleichzeitig als Link dient)
in kleinere Einheiten zerlegen.
- Organisieren Sie die Texte Ihres Dokumentes im Hinblick auf die Inhaltsschwerpunkte.
Diese Passagen sollten möglichst schnell aufzufinden sein. Verteilen Sie eine
Aussage (Informations-Granulat) nicht auf mehrere Dokumente. Strukturieren Sie die
Dokumente.
- Versuchen Sie Dokumente zu vermeiden, deren Verständnis von vorhergehenden
und nachfolgenden Dokumenten abhängen. Schreiben Sie möglichst
kontextunabhängige Dokumente.
- Gruppieren Sie zusammengehörende Informationen in semantischer Sicht durch eine
zweckmäßige Gliederung und in visueller Sicht durch Überschriften und
Auflistungen.
- Gehen Sie sparsam mit Hervorhebungen durch Fettdruck, Kursivschrift, Text in
Großbuchstaben und langen Links um. Benutzen Sie Hervorhebungen nur, wenn
diese das Auffinden und Verstehen verbessern.
- Halten Sie das Layout der Seite übersichtlich, das heißt im Regelfall so
einfach wie möglich. Verwenden Überschriftstags (H1...H6) zur Hervorhebung und
Aufzählungen.
- Benutzen Sie ein einheitliches, konsistentes Layout über alle Dokumente einer
Publikation. Das vereinfacht auch die Erstellung neuer Seiten (z. B. Verwendung
fertiger Kopf- und Fußteile).
- Wenn Sie vorhandene Textdateien mit einem Konverter-Programm aufbereiten, dann
ist ein Nachbearbeiten auf jeden Fall erforderlich.
- Lassen Sie deutlich erkennen, dass ein Link auch ein Link ist. Unterstreichen Sie also
keinen Text. Grafiken sollten aussagekäftig sein, und nicht die Ladezeit Ihrer Seite
unnötig verlängern.
- Verlinken Sie auf themenverwandte Seiten. Sie erhöhen nicht nur die Zugriffszahlen
derjenigen Seiten, sondern auch die Attraktivität Ihrer eigenen Seiten.
- Gestalten Sie Ihr internes Menusystem (Linksystem) einheitlich. Erschweren Sie Ihrem
Besucher die Navigation nicht durch viele verschiedene Navigationssysteme.
- Bringen Sie innerhalb der Verzweigung logische Querverweise an. Dazu
gehören auch sogenannte 'Shortcuts' (Verweise zu häufig benötigten
Stellen). Die Realisierung kann z. B. durch eine Kopfleiste am Anfang oder am Ende
jeder Seite erfolgen, die alle 'Shortcuts' enthält.
Aktualität
Ein Webangebot muß möglichst aktuell sein - wie eine Tageszeitung. Liefern
Sie Ihren Lesern handfeste Informationen. Langatmiges Geschwafel sorgt dafür,
daß kaum jemand weiterliest. Sorgen Sie für Quervernetzung der einzelnen Seiten.
Schließlich sollten die Daten und Infos aktuell sein und ständig ergänzt werden.
Denn auf einer seit Monaten nicht mehr aktualisierten Homepage läßt sich ein
Surfer so schnell nicht mehr blicken. Bieten Sie Seiten wie "News" oder
"Aktuelles" nur an, wenn Sie diese ständig pflegen wollen und können. Nichts
ist so peinlich wie "Alles Gute zum Neuen Jahr" auf der News-Seite im Monat
Juni. Deshalb versprechen Sie auch nichts, was Sie nicht halten können.
Versprechen Sie nichts, was Sie nicht halten können
Links, die auf ein Baustellenschild führen, verärgern den Leser
wie leere Versprechungen. Der Surfer sieht einen vielversprechenden Querverweis,
klickt ihn an und dann? Nichts! Niente! Wenn das Angebot noch so rudimentär ist,
daß man ein Baustellenschild aufstellen müßte, dann sollte man es
noch nicht zeigen. Besser ist es bei Menüs, den
entsprechenden Verweis als ganz normalem Text zu belassen. Dann sieht der
Besucher: "Da kommt demnächst was." und er wird mal wieder
nachsehen kommen. Wenn natürlich monatelang das Link nicht mit Info
gefüllt wird, dann ist es auch schlecht. Auf lange Sicht werden nur
die Server im Netz überleben, die echte Informationen bieten, die gut
aufbereitet sind. Ansonsten ist ein WWW-Angebot ständig im Umbau - also
nichts, was man extra erwähnen müßte.
Bunt und zappelig
Das sind WWW-Seiten, auf denen sich an allen Ecken und Enden etwas bewegt: blinkende
Schrift, animierte GIFs, Laufschrift. Seit animierte GIFs erfunden wurden, zappelt es
allenthalben. So schön es für einen selbst sein mag, animierte Bilder auf seiner
Homepage zu sehen, so nervig ist es für Besucher, die sich häufig im Web
herumtreiben. Außerdem ziehen Bewegungen auf der Webseite zuviel Aufmerksankeit
auf sich und stören auf Dauer beim konzentrierten Lesen des restlichen Textes.
Verzichten Sie also auf die Wackelbildchen. Ein knalliges 'NEU' reicht schon, es
muß nicht noch blinken. Laufschriften sind für Schnelleser zu langsam und
für Langsamleser zu schnell - also so oder so ungeeignet. Ein Icon oder
eine Grafik wirken genauso gut.
Apropos Icons: Es gibt massenhaft Icon-Sammlungen, aus denen man sich bedienen
kann. Noch besser ist es aber, wenn man sich die Sinnbilder selbst malt.
Das ist gar nicht so schwer. Fangen Sie doch damit an, ein vorhandenens
Icon zu modifizieren. Übrigens reichen für ein Icon normalerweise
16 - 32 Farben - dadurch wird die Bilddatei nicht nur kleiner, sondern es
gibt auch keine Probleme mit der Darstellung beim Surfer, wenn dessen Grafik
nicht dem letzten Stand der Technik entspricht.
Waagrechte Linien: Keine Zeitschrift und kein Buch strukturiert seinen Inhalt
durch waagrechte Linien. Wenn sie nicht gezielt als Gestaltungselement dienen sollen,
sind sie nur von Übel - egal, ob sie mit <HR> erzeugt oder ob
sie durch farbige GIF-Bilder dargestellt werden.
Bilder
- Riesige Bilder: Man kann mit einem kleinen Übersichtsbild (sogenanntes
'Thumbnail') auf ein großes Bild verweisen. Noch besser ist eine
Größenangabe (in KByte) zum Thumbnail dazu. Geradezu verdammungswürdig
sind Bilder, die relevanten Text enthalten.
- Die Browser verstehen zumindest die beiden Grafikformate GIF (*.gif) und JPEG (.jpg).
Setzen Sie JPEG für große Bilder mit vielen verscheiden Farben und
Farbübergängen ein. Das GIF-Format eignet sich für kleinere Grafiken, wie
zum Beispiel Icons oder Buttons.
Sind Sie sich nicht sicher welches Format das richtige Format ist, so testen Sie beide
Formate.
- Verwenden Sie das ALT-Attribut für IMG-Tags. Der Benutzer wird während
der Ladezeit oder bei aisgeschalteter Bildanzeige über das informiert was hinter
der Grafik steckt. Auch wenn der Mauscursor etwas länger über dem Bild verweilt,
wird der ALT-Text angezeigt. Dadurch kann man dieses Feature für eine griffige
Bilderklärung verwenden. Notfalls nehmen Sie ALT="".
- Vergessen Sie auch nicht die Größenangaben für Ihre Grafiken. Mit
den den Tags WIDTH und HEIGHT teilen Sie dem Browser mit, wie groß die zu ladenden
Grafiken sind. Es wird ein Rahmen für die noch nicht sichtbaren Grafiken dargestellt
und so die Seite schon wärend des Ladevorganges korrekt aufgebaut.
- Wenn Sie für Ihre Navigationssystem eine Imagemap vorsehen, so denken Sie daran,
daß manche User sich die Seiten ohne Grafiken betrachten. Stellen
Sie also alternativ eine Textversion zur Verfügung.
- Bedenken Sie bei der Konzeption Ihrer Webseiten daran, daß noch nicht jeder
über eine High-Speed ISDN-Leitung verfügt, und verzichten Sie auf unnötige
Grafiken.
Frames
Bei Frames scheiden sich die Geister. Puristen sagen, wer Frames benutzt, sei einfach
nicht in der Lage, sein Angebot zu strukturieren. Das ist sicher bei manchen Angeboten
richtig. Auf der anderen Seite kann der sparsame Einsatz von Frames das Navigieren
durch die WWW-Seiten zu erleichtern. Nachteil ist auf jeden Fall, daß sich Infos,
die innerhalb eines Frames dargestellt werden, nicht einfach in die 'Bookmarks'
übernommen werden können.
Viele Programmierer stellen mit dem FRAME-Tag Unfug an. Auf einer
Seite sollten sich maximal drei Frame-Abteilungen tummeln. Ein Frame kann
dabei generelle Navigationswerkzeuge für die Homepage vorhalten, der
zweite Frame birgt einen Stichwort-Index und der dritte zeigt den eigentlichen
Inhalt. Mehr Frames braucht niemand.
Verlinken Sie auf externe Seiten Seiten, so sollte eindeutig sein, daß der Inhalt
derjenigen Seite nicht von Ihnen ist.
Wenn ein Link zu einem anderen Server führt, laden Sie dieses Link
nicht innerhalb des Frames. Das schränkt die dargestellte Fläche
der angesteuerten Seite ein. Laden Sie fremde Seiten grundsätzlich
mit der Option target= "_parent" oder target="_blank"
im <A HREF=...>-Tag.
Farben
Noch immer gibt es grafisch unempfindliche Naturen, die hellblaue Schrift
auf knalligem Rot für chic halten. Über Ästhetik mag man
streiten, nicht aber über Lesbarkeit. Und diese Farbkombination ist
ebenso ätzend wie Gelb auf Grün oder Pink auf Hellblau. Als optische
Killer Nummer zwei haben sich Hintergrundgrafiken erwiesen. Ein im Grafikprogramm
kontrastarm aussehendes Bild kann im Browser stärker stören als
vorgesehen, insbesondere wenn der Browser dithert. Denken Sie auch an die
immer noch zahlreichen Benutzer im Netz, die vor Graustufenmonitoren sitzen.
Am besten verwenden Sie in der Regel dunkle Schrift auf hellem Grund.
Wählen Sie für Ihre Links eine deutlich andere Farbe als die Textfarbe.
Gestalten Sie alle Ihre Links in der gleichen Farbe, es sei denn, Sie können
deutlich zum Ausdruck bringen, daß auch der anderfarbige Link ein Link ist.
Bei den Benutzern hat die blaue oder violette Farbe und die Unterstreichung für
Links einen hohen Wiedererkennungswert. Die Farbe kann der allgemeinen
Erscheinung Ihrer Webseite angepaßt werden, auf die Untersteichung sollten Sie
jedoch nicht verzichten.
Wählen Sie im BODY-Tag nicht die gleichen Farben für Link (LINK), visited
Link (VLINK), animated LINK (ALINK). Ein Link erhält die VLINK-Farbe, wenn dieser
bereits besucht wird. Die ALINK-Farbe erscheint solange der Link gedrückt ist.
Für ALINK empfiehlt sich eine Farbe, die in der Nähe der LINK-Farbe liegt.
Bewahre uns vor Plug-ins
Shockwave hier, Real Audio da, usw. An jeder Ecke wachsen neue Plug-Ins.
Und jeder Autor verwendet einen anderen Multimedia-Standard, für jede
Homepage benötigt der Surfer andere Plug-Ins. Das alles kostet nicht
nur Download-Zeit, sondern müllt dem Besucher der Homepage auch die
Platte voll. Dazu kommen höhere Hardwareanforderungen, Inkompatibilitäten
der Plug-Ins untereinander und mögliche Softwarefehler. Überlegen
Sie also, ob Multimedia-Erweiterungen wirklich nötig sind.
Nutzlose Applets
Die Anzahl der nutzlosen Applets und Scripts steigt expotentiell. Dabei
handelt es sich um Besucher-Zähler, Lauftexte oder Animationen. Solche
Applets und Scripts können nützlich sein, beispielsweise für Suchsysteme,
Pull-Down-Menüs zur Benutzerführung und zur Prüfung von Formularen.
Bedenken Sie jedoch, daß durch Viren und "trojanische Pferde" die Scripts
bei den Benutzern in Verruf geraten sind und oft im Browser deaktiviert wurden.
Verwenden Sie Scripts also sparsam oder überhaupt nur im Intranet. Und bevor Sie
das Javascript-Laufband auf Ihrer Homepage unterbringen, bedenken Sie, daß
andere User dasselbe tun. Der Renner unter den Nutzlosigkeiten ist jedoch
der Besucherzähler, der bei jedem Aufruf Ihrer Homepage verändert
wird. Das verhindert nämlich, daß die Seiten im Proxy-Cache eines
Providers zwischengespeichert werden können, und der Surfer bessere
Ladezeiten bekommt. Besser ist es, eine Serverstatistik zu veröffentlichen,
die täglich oder wöchentlich aktualisiert wird.
Testen Sie Ihre Homepage
Nichts ist peinlicher als eine fehlerhafte Homepage. Und Bugs schleichen
sich schnell ein. Was auf Ihrem Rechner lokal noch nett aussieht, kann sich
bei einer kritischen Probefahrt schnell als grauenhaft herausstellen. Die
wichtigsten Tests:
- ohne Grafik: Viele Surfer haben bei ihrem Trip durchs Web die Grafikdarstellung
abgeschaltet. Stimmt die Seitenaufteilung noch, wenn die Grafiken Ihrer
Homepage ausgeknipst sind?
- Browser-Kompatibilität: Internet-Explorer und Netscape Navigator
interpretieren einige Tags unterschiedlich. Probieren Sie auch aus, wie
Ihre Homepage mit beiden Browsern aussieht. Probieren Sie es auch mal mit
einem Textbrowser (z. B. Lynx).
- Rechtschreibung: Lassen Sie Ihre Homepage gegenlesen, und nutzen Sie
Rechtschreib-Programme.
- Links ins Nichts: Testen Sie regelmäßig alle Links auf Ihrer
Homepage.
- Struktur: Stimmt die Struktur Ihres Servers? Findet der User von jeder
Unterseite auf die Homepage zurück? Gibt es genügend Querverweise?
Viel Web-Angebote sind reine Menüsysteme.
- Erreichbarkeit: Haben Sie ein Mail-Link zu Ihrer E-Mail-Adresse auf die
Seite gepackt? Gibt es einen Maillink zum Webmaster?
|
|
|
DIENSTE
