Webdesign-Leitfaden

Einleitung

Bei der Konzeption und Erstellung einer Website gibt es eine Vielzahl von Aspekten, die sowohl im Bezug auf die Gestaltung der einzelnen Webseiten (Pagedesign) als auch der Website als Ganzes (Sitedesign) beachtet werden müssen, um ein möglichst qualitativ hochwertiges Ergebnis zu erreichen.

Im Rahmen dieses Artikels sollen allgemeine Regeln, zu vermeidende Fehler sowie auch konkrete Tipps für ein gutes Webdesign genannt und beschrieben werden.

Motivation

Die Motivation, von der sich die an einem Webprojekt beteiligten Personen vorantreiben lassen sollten, kann wie folgt festgehalten werden:

„Das Ziel der Seite soll erreicht werden: Inhalt, Navigation, Funktion, Kommunikation und Interaktion sind so zu gestalten, dass Besucher sie verstehen und zielgerichtet benutzen können.“ (Hellbusch 2004, S. 96)

Das Ziel der Seite könnte z.B. die Information von Firmenkunden sein oder bei einer Hochschule die Aufklärung von Studieninteressierten über die Studienmöglichkeiten.

Intuitivität

Die Besucher einer Website sollen sich innerhalb weniger Augenblicke auf der Site zurechtfinden können. Die Funktionalität sollte dabei selbsterklärend sein und keiner vorherigen Erklärung bedürfen.

Deshalb ist es grundsätzlich ratsam,

• kurze und einleuchtende Bezeichnungen zu verwenden,
• Abkürzungen und Fachausdrücke zu vermeiden, sowie
• einen Sprachenmix zu umgehen.

Ganz besonders gilt dies für die Navigation, da sie für die Nutzung der Site von höchster Priorität ist.

Navigation

Die Navigation dient der Benutzerführung und Orientierung. Sie ermöglicht dem Besucher sich durch das Informationsangebot zu bewegen, soll aber auch einen ersten Überblick über die Inhalte der Website verschaffen.

Um die Handhabung der Website zu erleichtern, sollten in der Navigation nicht zu viele unterschiedliche Punkte enthalten (also möglichst kompakt) und diese eindeutig benannt sein. Als Orientierungshilfe empfiehlt sich darüber hinaus das Hervorheben des Navigationspunktes, bei dem sich der Nutzer gerade befindet.

Welche Positionen eignen sich für die Navigation?

Die Navigation findet man üblicherweise links oder oben, oder aber es handelt sich um eine Kombination beider Alternativen. Hierbei enthalten die einzelnen Punkte der Hauptnavigation jeweils eine zusätzliche, eigene Navigation, die diesen Bereich weiter unterteilt.

Eine Rechtsausrichtung der Navigation ist zwar eher untypisch, hat aber als Vorteil den kürzeren Weg zum Scrollbalken und erscheint darüber hinaus für Anwender, die die Maus rechtshändig bedienen, logisch.

Worauf kommt es am meisten an?

Unabhängig davon wie die Navigation letztendlich gestaltet wird, ist am wichtigsten, dass sie auch bei allen Nutzern sofort und einwandfrei funktioniert.

Deshalb sollte man auf Technologien verzichten, die mit hoher Wahrscheinlichkeit nicht bei allen Nutzern funktionieren werden bzw. erst nach Installation von dafür erforderlichen Plugins (z.B. Flash).

Gebrauchstauglichkeit

Eines der wichtigsten Kriterien bei der Beurteilung der Qualität von Websites stellt die Gebrauchstauglichkeit (Usability) dar. Also die Frage: Wie gut kommt der Durchschnittsbenutzer mit der Website zurecht?

Um hier gut abzuschneiden, seien vor allem folgende Dinge beachtet:

• Eine Eingangsseite nur vorschalten, wenn wirklich sinnvoll.
• Stets die Möglichkeit zum „zurück“ gehen und zur „Hauptseite“ zu gelangen, anbieten.
• Einbau von Ankern bei langen Seiten, um wieder zum Seitenanfang zurückzukehren.
• Kennzeichnen von Links und Unterscheidung nach besucht (visited) / unbesucht (unvisited).
• Klarheit schaffen, wo ein Link hinführt.
• Keine toten Links oder Baustellen veröffentlichen.
• Eine Sitemap oder Suchfunktion anbieten.
• Alternativtexte für Frames angeben, falls diese nicht angezeigt werden können.
• Individuelle Fehlerseiten im Design der Site erstellen mit Hinweistext und „zurück“-Link.
• Immer den Titel der aktuellen Seite im Browserfenster anzeigen lassen.

Layout

Bezogen auf das Layout sind vier grundlegende Eigenschaften zu nennen, wie das Onlineangebot nach der Realisierung beschaffen sein soll:

1. übersichtlich (nicht zu viel Inhalt auf einmal)
2. einheitlich (ein Layout für die gesamte Site)
3. ansprechend (positive Wirkung beim Betrachter)
4. zweckmäßig (passend zum Inhalt)

Was ist dabei konkret zu beachten?

Verschiedene Inhaltsbereiche wie Titel, Navigation, Content (eigentlicher Inhalt) und Werbung sollten optisch gut voneinander abgegrenzt sein. Eine Vermischung der unterschiedlichen Inhalte könnte schnell zu Verwirrung oder gar Verärgerung führen, angenommen es handle sich zum Beispiel um Werbung, die direkt mit dem Content verbunden ist.

Der Fokus sollte immer nur auf eine Sache gerichtet sein. Andernfalls führt dies zu Ablenkung und aufgrund der zu vielen gleichzeitig präsentierten Inhalte entsteht eine starke Unruhe.

Auch die harmonische Anordnung der Seitenelemente ist von Bedeutung, da sie zur Gesamtwirkung beiträgt. Die einzelnen Elemente sollten dabei nicht versetzt zueinander, sondern immer rasterförmig angeordnet werden.

Warum nicht den Nutzer entscheiden lassen?

Als vorbildlich gilt es Anpassungsmöglichkeiten z.B. der Schriftgröße, der Hintergrundfarbe oder der Position der Navigation in Form eines so genannten Style-Switchers (siehe Homepage der Fachrichtung Informationswissenschaft der Universität des Saarlandes) anzubieten, mit dessen Hilfe sich Nutzer die Website, ihren Bedürfnissen und Gewohnheiten anpasst, anzeigen lassen können.

Gerade für Menschen mit Sehbehinderungen ist dies eine erhebliche Erleichterung - die Barrierefreiheit (Accessibility) des Webangebots erhöht sich.

Kompatibilität

Für einen erfolgreichen Internetauftritt ist es unabdingbar, dass die Website zu allen gängigen Betriebssystemen, Browsern und Auflösungen kompatibel ist. Kompatibel heißt in diesem Falle, dass sie einwandfrei ohne irgendwelche (Schönheits-)Fehler angezeigt wird.

Aber auch die Verbindungsgeschwindigkeit spielt eine Rolle. Machen sich lange Ladezeiten doch gerade bei analogen Modems bemerkbar und lassen das Interesse des Nutzers schnell schwinden.

Daher ist es überaus wichtig, die Seiten vor Veröffentlichung von verschiedenen Systemen aus ausgiebig zu testen.

Was sollte man nicht tun?

Ein Fehler, der sehr häufig gemacht wird, ist die ganze Website für eine bestimmte Systemkonfiguration zu optimieren, entweder weil es nun mal die eigene ist oder man sich in der Sicherheit wägt, es sei die am weitesten verbreitete.

In jedem Fall ist hiervon abzuraten, auch von der Option, den Besucher vor die Wahl zu stellen, aus mehreren Versionen der Site zu wählen, um für Kompatibilität zu sorgen. Dies macht lediglich in Ausnahmefällen Sinn. Zum Beispiel, wenn die Website zur optimalen Darstellung eine höhere Verbindungsgeschwindigkeit oder Flash benötigt und auf diese Features nicht verzichtet werden soll (häufig bei der Webpräsenz von Musikinterpreten).

Skalierbarkeit

Da je nach Auflösung und gewählter Fenstergröße unterschiedlich viel Raum zur Anzeige von Websites im Browser vorhanden ist, sind Webautoren dazu angehalten die Seiten skalierbar zu machen. Das heißt, der Seiteninhalt muss sich automatisch an die Fensterbreite anpassen.

Wie erreicht man das?

Am leichtesten, indem man für die Spalte mit dem eigentlichen Inhalt eine relative Größe in % angibt. Verändert sich die Breite des Fensters, wird gleichzeitig die Breite dieser Spalte angepasst. Genauso funktioniert das auch mit den Grafiken. Den Zeilenumbruch der Texte lässt man vom Browser generieren.

Ideal umgesetzt ist dies, wenn

• auch bei einer geringeren Auflösung keine horizontalen Scrollbalken beim Betrachten der Website erscheinen und
• sich keine Überlappungen verschiedener Inhalte ergeben.

Statt ein starres Gebilde zu erschaffen, sollte man also möglichst relative Werte benutzen, sowie auch keine fixen Schriftgrößen vorgeben, die die jeweiligen System- und Nutzereinstellungen übergehen.

Farben

Die Farbwahl betreffend ist entscheidend, dass eine gut zueinander passende Zusammenstellung gefunden wird, die zum Thema der Site passt und deren Image unterstreicht.

Erfahrungsgemäß handelt es sich bei seriösen Informationsangeboten dabei meist um eine eher kühle, dezent-neutrale Kombination wie Weiß und Blau, während bei Unterhaltungsangeboten oft mit wärmeren und grelleren Farben wie Rot gearbeitet wird.

Welche Dinge gibt es zu beachten?

• Immer für ausreichend Kontrast sorgen.
• Keine zu grellen Farben wählen (Blendeffekt).
• Komplementärfarben nicht miteinander kombinieren (Flimmereffekt).
• Warme Farben strahlen mehr als kalte.
• Vorsicht mit Hintergrundgrafiken und Farbverläufen (Leseunfreundlichkeit).

Eine Tatsache, die leicht vergessen wird, ist dass 10% der Menschen unter Farbenblindheit oder einer Farbschwäche leiden. Also auch hier ist es nötig die Barrierefreiheit (Accessibility) sicherzustellen.

Grafiken

Sie sind dazu gedacht, Inhalte zu ergänzen und zu veranschaulichen, nicht jedoch sie zu ersetzen. So sind z.B. Piktogramme dazu geeignet einen Hinweis auf den Inhalt eines Textabschnitts zu liefern.

Im Gegensatz dazu sollte man von einer Implementierung überflüssiger Bilder und Animationen, die keine unterstützende Funktion bei der Inhaltsvermittlung aufweisen, absehen.

Schaubilder, die für gewöhnlich einen hohen, eigenen Informationsgehalt besitzen, sollten mit einem Beschreibungstext, z.B. in Form eines Alternativtexts, versehen werden.

Was ist ein Alternativtext?

Der Alternativtext ist ein Text, der bei Anzeigefehlern an Stelle eines Objekts ausgegeben wird. Er kann auf einfachste Weise einer Grafik hinzugefügt werden und wird im fehlerfreien Betrieb beim Überfahren mit der Maus angezeigt.

Weshalb man bei nicht inhaltsleeren Grafiken stets einen Alternativtext angeben sollte:

• Die Website bleibt so auch ohne Darstellung der Grafiken vollständig benutzbar.
• Es können nützliche Zusatzinformationen, beispielsweise über das Verweisziel eines Links oder den Titel eines Bildes, vermittelt werden.
• Auch Blinden wird die uneingeschränkte Nutzung des Informationsangebots ermöglicht, da diese mit Hilfe eines Screen-Readers den Alternativtext hören bzw. auf einer Braillezeile ertasten können, wohingegen ihnen Grafiken verborgen bleiben.

Einige grundlegende Tipps:

• Grafiken möglichst nicht zur Darstellung von Text verwenden.
• Nie die Ladezeiten außer Acht lassen.
• Das Angeben der Bildgröße im Quelltext beschleunigt den Seitenaufbau.
• Bei größeren Bildern Vorschaugrafiken anbieten.
• Weniger ist mehr: Linien z.B. einfach mit HTML erzeugen.
• Webdesign ist nicht Grafikdesign. Daher ist vornehme Zurückhaltung angebracht.

Multimedia

Der Einsatz von Multimedia sollte der sinnvollen Ergänzung des Inhalts dienen. Man denke hier beispielsweise an ein Kinoportal, das zu der jeweiligen Filmbeschreibung auch den passenden Trailer anbietet.

Wichtig bei diesem Thema ist, dass die multimedialen Inhalte auch so vielen Nutzern wie möglich zugänglich sind. Um bei Audio- und Videomaterial die verschiedenen Player und Bandbreiten zu berücksichtigen, sind daher immer mehrere Versionen bereitzustellen.

Von der Verwendung für den Seitenbetrieb unnötiger Technologie wird abgeraten, besonders wenn dies die Einschränkung der Funktionalität bei vielen Benutzern zur Folge hat und eine Kompensation die Installation zusätzlicher Software und Plugins erzwingt.

Text

Um den Besucher möglichst gezielt anzusprechen, sollte sich der Sprachstil an der zu erreichenden Zielgruppe orientieren. Hinsichtlich der Komposition gelten als Grundregeln: Einfache Sprache, wenig komplexer Satzbau, sowie korrekte Rechtschreibung.

Hinweise zur Form:

• Struktur durch Überschriften und Absätze schaffen.
• Flatterrand ist besser lesbar als Blocksatz.
• Nur wenige Links im Text einbauen.
• Seiten weder zu voll, noch zu lang werden lassen.
• Wenn sinnvoll, Druckversion bereitstellen.

Schrift

Im Web gibt es eine Reihe von Standardschriftarten, die sich aufgrund ihrer Leseeigenschaften am Bildschirm bewährt haben. Z.B. Arial, Helvetica, Tahoma und Verdana.

Auf einer Seite sollten maximal zwei verschiedene Schriftarten verwendet werden. Nicht eingesetzt werden sollten exotische Schriftarten, wegen ihrer geringen Verbreitung, sowie serife Schriftarten (z.B. Times New Roman), wegen schlechter Lesbarkeit am Bildschirm.

Der Schriftgrad sollte gut lesbar, aber nicht unnötig groß sein. Formatierungen sind gezielt und sparsam zur Unterscheidung oder Hervorhebung anzuwenden.

Formatierung

Formatierungen jeglicher Art sind nach aktuellem Standard unbedingt mit CSS und nicht mehr in HTML vorzunehmen. Darüber hinaus ermöglichst CSS die Trennung von Form und Inhalt.

Wie erreicht man eine Trennung von Form und Inhalt?

Dies erfordert das Anlegen einer globalen CSS-Datei, in der alle Stile und Formate zentral definiert sind. Ein Verweis im Quelltext der HTML-Seiten auf die Datei genügt und alle vorher definierten Formatierungen können blitzschnell angesprochen werden.

Vorteile der Trennung von Form und Inhalt:

• Die Website wird pflegeleichter, da bei Designanpassungen nur noch die Änderung der CSS-Datei statt aller HTML-Seiten nötig ist.
• Die Formatangaben müssen nur einmal aus der zentralen Datei geladen werden.
• Durch den Wegfall der Formatangaben in jeder einzelnen Datei sinkt deren Dateigröße.

Das Ergebnis der Trennung von Form und Inhalt:

• Die Webseiten werden im Browser schneller aufgebaut.
• Die Site ist besser geeignet für Suchmaschinen, da diese nicht mehr den Inhalt aus langen Quelltexten herausfiltern müssen.

Steuerbarkeit

Bei der Programmierung einer Website ist stets im Hinterkopf zu behalten, dass die Nutzer die Kontrolle über ihren Browser behalten wollen. Deshalb gibt es eine Reihe von Dingen, die man tunlichst vermeiden sollte.

Was gilt als Tabu?

• Feste Fenstergrößen
• Unterdrückung von Symbolleisten
• Wechsel in den Vollbildmodus
• Automatische Weiterleitungen
• Popups

Erwartungskonformität

Durch den Umgang mit dem Computer und verschiedenster Software entsteht eine Erwartungshaltung beim Benutzer bezüglich typischer Funktionsweisen. Diese Erwartungen müssen berücksichtigt werden um den Nutzer nicht zu verunsichern, denn er wird in jedem Fall bei der Bedienung auf seine Erfahrungen und Gewohnheiten zurückgreifen.

Was erwartet der Besucher einer Website?

• Unterstrichener, farbiger Text ist ein Link.
• Besuchte Links werden in dunklerer Farbe dargestellt.
• Schaltflächen kann man anklicken.
• usw.

Fazit

Wie man sieht, sind es vielfältige Faktoren, die sich auf den Erfolg eines Internetangebots auswirken. Deshalb sollte man bei der Umsetzung eines solchen Projekts nie voreilig vorgehen, sondern die einzelnen Schritte gut planen und sich kritisch mit dem eigenen Konzept auseinandersetzen.

An Beispielen wie Google erkennt man, dass das, was zählt, nicht ein atemberaubendes Design, die Einbeziehung neuster Multimedia-Trends oder eine Fülle von Funktionen und überflüssiger Zusatzleistungen ist, sondern der Nutzen eines Informationsangebots und wie leicht es dem Anwender gemacht wird von diesem Nutzen zu profitieren.

Dabei kommt es ganz stark darauf an, welches Ziel die Seite verfolgt und mit welchen Bedürfnissen und Erwartungen in diesem Bereich zu rechnen ist. Ist das Angebot zweckmäßig gestaltet, dann wird sich die Zufriedenheit des Nutzers auch positiv auf den Gesamterfolg auswirken.

Links

• Regeln für schlechtes HTML: http://www.karzauninkat.com/Goldhtml/
• Der Ultimate Trash Site Award: http://www.muellseite.de/

Quellen

• Aktionsbündnis für barrierefreie Informationstechnik (2006): Web ohne Barrieren nach Paragraph 11. Online verfügbar unter: http://wob11.de (letzter Zugriff: 13.03.06)
• Hellbusch, Jan Eric; Bühler, Christian (Hrsg., 2004): Barrierefreies Webdesign: Praxishandbuch für Webgestaltung und grafische Programmoberflächen, Heidelberg.
• Lennartz, Sven (2005): Webdesign - Tipps, Praxis und Information. In: Dr. Web Magazin. Online verfügbar unter: http://www.drweb.de/webdesign/index.shtml (letzter Zugriff: 13.03.06)
• Luckhardt, Heinz-Dirk (2005): Kriterien für das Webpublishing. In: Virtuelles Handbuch Informationswissenschaft. Online verfügbar unter: http://is.uni-sb.de/studium/handbuch/webpush/index.php (letzter Zugriff: 13.03.06)
• Lynch, Patrick J.; Horton, Sarah (2005): Web Style Guide, 2nd edition. Online verfügbar unter: http://www.webstyleguide.com (letzter Zugriff: 13.03.06)
• *Menon, Sathish; Michael Douma (2008): Finding Information - factors that improve online experiences. Institute for Dynamic Educational Advancement (IDEA). http://www.idea.org/find-information.html.