Web Design 2: Benutzerfreundlichkeit

Es ist offensichtlich, dass unterschiedliche Nutzergruppen unterschiedliche Anforderungen an eine Webseite stellen. Warum sollte ich überhaupt Rücksicht darauf nehmen? Weil ein Nutzer, der die gesuchten Informationen bei mir nicht finden kann, zu einer anderen, verständlicheren Seite wechselt. Ich sollte also genau wissen, für wen ich schreibe.

Vincent Flanders beschreibt auf seiner Webseite die “größten Fehler im Web-Design 1995 – 2015“. Er weist zu recht darauf hin, dass nur wenige Seiten süchtigmachenden Inhalt (“heroin content”) besitzen – und dass nur dann ein Effekt eintritt, bei dem dem Besucher das Aussehen der Seite mehr oder weniger egal ist. Als Ersteller einer Webseite sollten wir daher die verschiedenen Elemente einer Seite kennen, die zur Übersichtlichkeit und damit Beliebtheit beitragen. Unter anderem sind dies:

  1. Schreibstil und Struktur der Texte
  2. Platzierung  und Verhalten der Bedienelemente
  3. Farbigkeit und Kontrast
  4. Kompatibilität mit dem System des Nutzers
  5. Aktualität

1. Schreibstil und Struktur der Texte

Schrift: Eine serifenlose Schrift wie Arial, Tahoma oder Verdana kann man am Bildschirm besser lesen, deshalb ist sie immer erste Wahl beim Erstellen einer Webseite. Weitere Hinweise zur Schriftgestaltung finden sich u.a. bei Christoph Päper und in englischer Sprache bei Daniel Will-Harris. Die Schriftgröße kann man wahlweise festlegen (dann sollte sie zwischen 12 und 16 Punkt liegen) oder auch frei lassen. Im letzteren Fall wird sie vom System und den Browser-Einstellungen des jeweiligen Besuchers festgelegt. Generell sollte die Schrift immer einen guten Kontrast zum Hintergrund bilden, damit sie auch für Personen mit Sehproblemen lesbar bleibt. Auf Näheres zur Farbigkeit gehe ich im Abschnitt 3 ein.

Stil: Eine einfache Ausdrucksweise, die möglichst wenig ungewöhnliche Wörter enthält, ist für den Leser leichter verständlich. “Schreib’ wie du sprichst” und “fasse dich kurz” sind gute Tipps für das Verfassen von Web-Texten, vergleiche auch einen weiteren Text von Daniel Will-Harris.  Die Struktur des Textes kann durch Zwischenüberschriften und Verteilen des Inhalts auf mehrere Seiten deutlich gemacht werden. Damit wird die Webseite leichter lesbar und praktischer Weise auch gleich noch optisch aufgewertet. Eine Webseite wirkt übrigens seriöser, wenn sie möglichst wenig Rechtschreibfehler enthält. Deshalb gilt auch hier: Den Text vorsichtshalber von jemandem Korrektur lesen lassen.

2. Platzierung und Verhalten der Bedienelemente

Im Internet gibt es bestimmte Konventionen für das Platzieren und Gestalten von Bedienelementen. Werden diese Konventionen beim Erstellen einer Webseite nicht beachtet, so kann es zu Irritationen kommen. Im schlimmsten Fall findet sich der Nutzer auf unserer Seite nicht zurecht.

Es hat sich gezeigt, dass sich die Aufmerksamkeit beim Lesen am Bildschirm zuerst auf die linke obere Ecke konzentriert. Die Navigation befindet sich daher in der Regel auf der linken Seite des Bildschirms. Häufig hat sie die Form eines gedrehten L, bei dem sich zusätzliche Bedienlemente am oberen Rand der Seite befinden. Näheres zur Menügestaltung und Benutzerführung findet sich bei E-Teaching unter dem Punkt Screendesign.

Die Gestaltung der Bedienelemente selbst folgt ebenfalls bestimmten Konventionen. So wird ein kleines Häuschen von uns sofort als Link interpretiert, der uns zur Startseite zurückbringt. Ein Pfeil nach rechts kann in Verbindung mit einem Pfeil nach links dazu auffordern zwischen verschiedenen Seiten hin und her zu blättern. Ist der Pfeil dagegen mit anderen grafischen Symbolen kombiniert, erkennen wir ihn als Startknopf zum Abspielen einer Ton- oder Videoaufnahme. Symbole sollten also möglichst in einem bekannten Zusammenhang verwendet werden.

Daraus ergibt sich zusätzlich, dass sich die Seite beim Anklicken von Bedienelementen immer gleich verhalten sollte. Um beim ersten Beispiel zu bleiben: Wenn ich als Nutzer ein Häuschen anklicke, möchte ich nicht entweder auf der Startseite oder im Impressum oder auf der Adreßseite landen, sondern möglichst immer auf der Startseite.

3. Farbigkeit und Kontrast

Bei der farblichen Gestaltung einer Webseite gibt es wieder eine ganze Reihe von Dingen zu beachten. Zunächst stellt sich Frage, ob es eventuell schon Farben gibt, die benutzt werden können. Das ist z.B. immer dann der Fall, wenn es bereits ein Logo gibt, das auf der Seite weiterverwendet werden soll. Die Farben des Logos sollten dann die Basis für die Gestaltung der Webseite bilden.

Generell werden bestimmte Farben mit bestimmten Eigenschaften verbunden, was beim Gestalten von Webseiten beachtet werden sollte. Soll die Seite seriös wirken, ist blau eher angebracht als neongrün. Für eine Veranstaltungsseite für Jugendliche kann neogrün dagegen eine gute Wahl sein. Vermeiden sollte man möglichst Komplementärfarben wie rot und grün großflächig auf einer Seite zu verwenden (z.B. rote Schrift auf grünem Hintergrund). Die Farben in solchen Designs fangen vor den Augen des Betrachters zu flimmern an und werden daher eher abgelehnt.

Wie Farben in unterschiedlichen Kombinationen wirken zeigt ein Artikel von Dr. Web. Eine gute englischsprachige Zusammenstellung von möglichen Farbkombinationen und Webseiten auf denen sie eingesetzt werden können, bietet Mary E. Carter. Wer schon ein bestimmtes Bild im Kopf hat, an das sich das Design farblich und stimmungsmäßig anlehnen soll, kann auf Webseiten wie Colorhunter ein Bild hochladen oder verlinken und sich daraus eine Farbpalette erstellen lassen. Darauf aufbauend können dann die einzelnen Elemente der Webseite eingefärbt werden.

Wie oben beschrieben muß ein ausreichender Kontrast zwischen Schrift- und Hintergrundfarbe bestehen. Dies lässt sich auf unterschiedliche Weise gewährleisten: Die Seite Web ohne Barrieren bietet eine deutschsprachige Einführung in das Thema Kontrastanlyse. Ein einfaches Online-Werkzeug zur Ermittlung von Farbkontrasten findet sich auf der Website von Hewlett Packard. Eine komplette Analyse der Farbigkeit einer gesamten Webseite in englischer Sprache bietet Acceskeys.

4. Kompatibilität mit dem System des Nutzers

Eigentlich sollte es selbstverständlich sein, dass sich eine Webseite mit unterschiedlichen Browsern, Monitorgrößen und Betriebssysstemen ansehen lässt, schließlich wird überall HTML und/oder CSS verwendet. In der Praxis trifft man allerdings öfter auf Webseiten, die nicht oder nicht richtig angezeigt werden. Zum Glück stehen uns eine ganze Reihe von Hilfsmitteln zur Verfügung, wenn wir unsere selbst programmierte Webseite überprüfen wollen.

Browser: Eine monatlich aktualisierte Statistik des W3C zeigt, welche Browser am häufigsten verwendet werden. Im Mai 2010 waren das vor allem: 46,9% Firefox, 32,2% Internet Explorer und 14,5% Google Chrome. Wer nicht alle diese Browser zu Testzwecken auf seinem Computer haben möchte, kann seine Webseite auch online testen, Z.B. bei Browsershots oder Browsercam. Welche Technologien auf welchen Systemen verfügbar sind kann zudem mit Hilfe einer Tabelle erschlossen werden.

Bildschirmgröße: Nichts ist ärgerlicher, als wenn eine Webseite so programmiert ist, dass wichtige Bedienelemente unter dem Bildschirmrand der meisten Monitore verschwinden – und sich zum Teil auch nicht einfach hervorscrollen lassen. Das W3C bietet auch hier Hilfe in Form einer Statistik an. Da wir unser Angebot an möglichst viele Nutzer richten wollen, sollten wir von der kleinsten Bildschirmauflösung ausgehen. Momentan wäre das 8o0 x 600 px, die Zahl der Nutzer mit dieser Bildschirmauflösung beträgt aber nur 1% und ist in den letzten Jahren stetig gesunken. Wenn wir uns bei unserem Design auf eine Auflösung von 1024 x 768 px beziehen, habe wir dagegen 99% aller möglichen Besucher unserer Seite erfasst.

Plugins: Sollten so wenig wie möglich eingesetzt werden, da sie bestimmten Besuchern unserer Seite die Nutzung erschweren. Wer möchte schon beim Besuch jeder zweiten Webseite erstmal ein neues Script runterladen? Wenn Plugins eingesetzt werden sollen, muss man sich darüber im Klaren sein, dass nur die wenigsten Nutzer die jeweils neueste Version installiert haben. Vor allem dann, wenn diese gerade vor ein paar Tagen herausgekommen ist. Weniger ist hier oft mehr. Näheres hierzu in englischer Sprache in dem Artikel “The Dos and Don’ts of Webdesign“.

Ladezeiten: Eine Webseite, die sehr lange braucht, um auf dem Bildschirm angezeigt zu werden, wird oft genauso schnell wieder weggeklickt. Ohne dass der Besucher darauf wartet, dass die volle Seite endlich angezeigt wird. Wir sollten beim Erstellen unserer Seite immer daran denken, dass nur wenige Nutzer einen High-End PC oder eine extrem schnelle DSL-Verbindung zur Verfügung haben. Speicherfresser sind unter anderem große Bilddateien, sich immer wieder selbst abspielende Animationen, Laufschriften und Hintergrundmusik.

5. Aktualität

Während der Inhalt von gedruckten Prospekten, Flugblättern, Büchern und Zeitungen zunächst erst einmal so wie er ist stehen bleiben muss, sind die Besucher des Internets in der Regel auf der Suche nach aktuellen Informationen. Eine Aktualisierung der Daten auf einer Webseite sollte daher immer möglichst schnell erfolgen. Bei kleinen Seiten ist ein Zeitraum von drei Monaten vertretbar, bei großen Seiten sollte er jedoch deutlich kürzer sein. die Gründe liegen auf der Hand:

Ein Handwerker, der seine Teilnahme am Weihnachtsmarkt vor drei Jahren ankündigt und seitdem keine weiteren Termine mehr verzeichnet, lässt potentielle Kunden im Unklaren: Nimmt er noch an Märkten teil? Gibt es den Betrieb überhaupt noch? Die Wahrscheinlichkeit, dass der Besucher der Seite sich eher nach einem anderen, gleichartigen Betrieb umsieht ist hoch. Gleiches gilt beispielsweise auch für veraltete Vereinsseiten und ähnliches.

Der Grund dafür, dass es im Internet so viele veraltete Informationen gibt, ist häufig, dass der Besitzer nicht gleichzeitig der Programmierer bzw. Ersteller der Webseite ist. Wer nicht selbst programmieren kann oder möchte, sollte sich überlegen, ein Content Management System (CMS) zu verwenden. Diese werden von vielen Internetanbietern im Paket mit Webspeicherplatz angeboten und auch auf Weblogs wie WordPress und Blogspot eingesetzt. Der Vorteil der Content Manangement Systeme ist, dass keine Programmierkenntnisse erforderlich sind. Vielmehr lässt sich in dem System wie in einem Textverarbeitungsprogramm schreiben. Das Design der Seite kann dabei entweder vom einem Programmierer erstellt  oder aus einer Reihe von Vorlagen (“Templates”) gewählt und bei Bedarf geändert werden.

Advertisements

2 thoughts on “Web Design 2: Benutzerfreundlichkeit

    • Ich bin leider momentan sehr stark mit anderen Dingen beschäftigt, so dass ich kaum Zeit dafür finde, hier etwas zu schreiben. An alle, die hier auf eine Fortsetzung warten: Vielen Dank für euer Verständnis!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s