Usability - Das Erfolgskonzept Teil IV

TP Login

TP Intern

4. Benutzbarkeit

Auf zum letzten Teil in dieser Serie. Zum Text und Inhalt gehören auch noch die Bilder, Links und Farben. Um diese Themen kümmern wir uns jetzt. Zum Schluss sehen wir uns noch verschiedene Site-Typen an, und dann sind wir auch schon am Ende des kleinen Exkurses angelangt.

Autor:: Nico Lange
Arbeitsmaterial:: download
Schwierigkeit:: Fortgeschritten

1Bilder

Das Internet ist auch deshalb so beliebt, da Bilder und Animationen auf eine einfache Art und Weise veröffentlicht werden können. Der Wiedererkennungswert einer Seite steigt enorm, und Anmutung („Look and Feel“) der Seite wird oft hauptsächlich von Bildern bestimmt. Es scheint, als ob Bilder auf Webseiten einen besonders hohen Stellenwert haben.

Dies ist auch der Fall, wenn es um die Optimierung selbiger geht. Wie man technisch das Beste aus den Bildern machen kann, sollte in weiterer Literatur nachgelesen werden. Nicht der Fall ist es aber, wenn die Bilder sinnlos und ohne Funktion in die Seite eingebunden werden. Die Frage nach dem Sinn eines Bildes ist sehr einfach zu klären. Kann man das Bild ohne einen offensichtlichen Nachteil – ausgenommen es beeinflusst das „Look and Feel" der Seite - für die Seite weglassen, ist es funktionslos.

Ein paar gute Beispiele für die Funktion von Bildern ist die Verbindung von Icons und Text in der Navigation (Funktionelle Kongruenz). Die Struktur ist leichter erkennbar und der Wiedererkennungswert ist ebenfalls hoch.

Einmal in den HTML-Code eingebundene Bilder sollte man ordnungsgemäß codieren und mit allen Standard-Tags ausstatten. So ist zum Beispiel der „Alt“-Tag beim W3C-Konsortium als zwingend notwendig vorgeschrieben. Der „Alt“-Text gibt in der Ladezeit der Bilder bereits einen Text aus. Da Bilder oft auch sehr groß sind und somit einen Menge Speicherplatz brauchen, sollte man den Usern ein Vorschaubild (Thumb-Nail) zur Verfügung stellen. Die Erstellung kleinerer Bilder ist nur ein geringer Mehraufwand für den Seitengestalter, im Gegensatz zu den Kosten (Zeit=Kosten) beim Benutzer.

Als „Sonderfall“ der Bilder möchte ich am Ende noch die Animationen besprechen. Bewegte Bilder werden im Internet oft für Werbezwecke eingesetzt. Dazu sind sie wahrscheinlich auch am ehesten zu gebrauchen. Wie im Kapitel „Wahrnehmung“ erläutert, wird unsere Aufmerksamkeit immer auf Bewegungen gezogen. Unser Blick wandert auf das Banner. Das Ziel der Werbefachleute ist erreicht, aber wir werden von unserer eigentlichen Arbeit – der Informationsaufnahme – abgelenkt. Die animierten Banner stören User so sehr, dass bei Versuchen das Zuhalten der Werbung mit der Hand beobachtet wurde. Diese störende Eigenschaft der Banner sollte beim Erstellen der Seiten beachtet werden.

Ein weiteres Einsatzgebiet für Animationen sehe ich in der Beschreibung von komplexen Aufgaben. So ist es ein leichtes, die einzelnen Schritte zum Häkeln eines Schals in einer Animation darzustellen, dieses in einem Text niederzuschreiben, würde wahrscheinlich ganze Seiten in Anspruch nehmen.

Es gibt also mit Sicherheit eine Menge guter Einsatzgebiete für Animationen, aber der „blinkende News-Butten“ oder die „drehende Erde“ wurden nur in der Anfangstagen des Webs als besonders interaktiv empfunden, mittlerweile wurden wir eines Besseren belehrt.

Abb. 8 Knallbunt ist out. Mit solchen Buttons macht man sich heutzutage keine Freunde mehr.

2Links

Die Links sind sozusagen der Inhalt der Navigation. So wie es auch beim Text bestimmte Regeln zur besseren Verständlichkeit gibt, kann man mit Links die Funktion der Navigation verbessern.

Als Erstes müssen Links als solche erkennbar sein. Das heißt, entweder deutlich abgetrennt vom Text in einer Navigationsleiste, oder aber – wie im Internet üblich – unterstrichen. Einem Surfer kann man es nicht zumuten, dass er die Links erst mit dem Mauszeiger suchen muss.

Weiterhin sollte bei einem Link farblich erkennbar sein, ob man eine Seite bereits besucht hat, oder noch nicht. In dieser Formatierung liegt meiner Meinung nach ein großer Fehler beim Erstellen der Webstandards. So wurde dort festgelegt, dass bereits besuchte Links standardmäßig rot und die noch nicht besuchten Links blau gekennzeichnet werden. Im Artikel über die Aufmerksamkeit wurde erklärt, dass grellere Farben eher unseren Blick auf sich ziehen als dunklere. Jetzt bleibt die Frage, ob wirklich die besuchten Links die wichtigeren sind?

Aber zurück zu den allgemeinen Regeln für Links. Zur Beschreibung der Links wurde mittlerweile eine „Title“-Tag eingeführt. Er zeigt beim Verweilen auf dem Link ein Tool-Tip an. Diese Möglichkeit sollte genutzt werden, um den Link näher zu erklären, auch wenn es nur von neueren Browsern interpretiert wird. Bei dieser Beschreibung sollte man auf jeden Fall darauf achten, dass man die folgende Seite so gut wie möglich beschreibt. Der Benutzer sollte sich von vornherein ein Bild darüber machen können, was sich hinter dem Link versteckt. Nach der sehr wichtigen Beschreibung der Links sind noch einige andere Grundregeln zu beachten. So hat sich zum Beispiel eingebürgert, dass man mit einem Klick auf das Logo der Seite zur Titelseite verwiesen wird. Dieser Erwartung sollte man Folge leisten. Bei Download-Links sollte zumindest die Größe der Datei angegeben werden. Besser noch ist es, dem Benutzer zu sagen, wie lange der Download bei 56 bzw. 128 kb/s dauern wird. Man hat sofort eine klare Vorstellung, wie viel Zeit man zum Laden der Dateien brauchen wird.

Als ein Sonderfall der Links möchte ich hier auch noch den Email-Link behandeln. Beim Klicken auf diesen wird meist ein E-Mail-Client (z.B. Outlook) geöffnet, um eine E-Mail zu verschicken. Im Grunde ist dies ein gutes Mittel zur Kontaktaufnahme, solange es der Benutzer auch wirklich möchte. Doch dabei liegt das Problem. Email-Linkes werden häufig nicht eindeutig als solche gekenngezeichnet. Ein Klick auf diese Links öffnet dann ungewollt das Emailprogramm. Für manches System ist das eine größere Rechenleistung und unnötiger Zeitaufwand. Ich persönlich habe es mir angewöhnt, prinzipiell vor dem Linktext den Hinweis „Mail to“ zu schreiben. Nur sechs Buchstaben, die ihren Sinn hier wirklich erfüllen.

3Farben

Neben Bildern sind auch die Farben für den „Look and Feel“ einer Seite zuständig. Die Farben sorgen für eine Grundstimmung und sollten sich auf das Thema der Seite beziehen. Dabei ist es wichtig, dass man Farbakzente nach den Regeln der Aufmerksamkeitsgesetze setzt. Auf einer gelben Seite wird ein orangefarbener Banner weniger auffallen als ein blauer. Mit der Farbe kann man auch den Lesekomfort für die User verbessern. So ist grauer Text auf weißem Hintergrund für die Augen verträglicher, da die Kontraste nicht so stark sind.

Das Spiel mit den Farben sollte man aber mit Vorsicht genießen. Ein großer Nachteil der vielen verbundenen Rechner im Internet ist, dass nicht alle die volle Farbpalette darstellen können. Es gibt ein Grundsortiment von 256 websicheren Farben, an die die „Sonderfarben“ bei Bedarf angepasst werden. Ein Grund, warum man sich die eigene Website auf möglichst vielen unterschiedlichen Systemen anschauen sollte. Weiterhin ist ein großer Nachteil von Farben am Monitor, dass sie Lichtquellen sind und nicht wie gedruckte Farben nur reflektieren. Dadurch passiert es, das verschiedene Farben – wenn sie nebeneinander stehen - zu flimmern beginnen. Technisch ist dies eine Überlagerung der einzelnen Lichtwellen. Dieser Effekt kann zwar als Stilmittel eingesetzt werden, ist aber in den meisten Fällen unerwünscht. Farben sollten im Allgemeinem sparsam eingesetzt werden, wobei vier Farben bei der Gestaltung von Webseiten ausreichen sollten.

4Seitentypen

Am Ende möchte ich noch einen Überblick über verschiedene Arten von Webseiten geben. Diese Typen haben natürlich auch einen entscheidenden Anteil daran, ob die bisher besprochenen Regeln befolgt werden müssen, oder ob man gegen alle Konventionen abreiten kann.

In vielen Artikeln wird das Design in „klassisches“ und „freies“ (offenes) Design unterteilt. Ich möchte eine weitere Unterteilung in Linklisten und Intros vornehmen. Zur ersten Gruppe gehören alle Onlineshops, Nachrichtenportale, Visitenkarten von Firmen und ähnliche Seiten. Mit „freiem“ Design meint man Seiten, die nur unter gestalterischen Aspekten erstellt wurden. Experimente diverser Designer sowie Präsentationen selbiger sind oft frei gestaltet.

Private Seiten, wie zum Beispiel „Weblogs“, sind auch oft sehr individuell erstellt.

Linklisten sind zum Beispiel Suchmaschinen und Verzeichnisse, die eine Vielzahl von Links als Verweis anbieten, und Intros sind Seiten, die oft den eigentlichen Homepages vorangestellt werden, ihren Sinn und Unsinn werde ich kurz erläutern.

5Klassisches Design

Diese Art von Seiten ist im Internet am häufigsten zu finden. Sie sind aus den technischen Voraussetzungen entstanden und haben sich in ihrer Funktion beim Benutzer eingeprägt.

Da diese Angebote oft zur Informationssuche genutzt werden, sollte man keine Experimente mit dem Nutzer machen.

Bei diesem Seitentyp treffen die genannten Regen oft in Reinkultur und meist zu 100% zu. Oft wird das Design der Funktion angepasst, um einen größtmöglichen Nutzen für die User zu erreichen. Natürlich gehört auch diese Seite zum "klassischen Design".

6Freies (offenes) Design

Designtechnisch ist vieles in der virtuellen Welt möglich, und nicht erst seit der Verbreitung von Flash arbeiten die Kreativen an immer neuen Ideen. Auf dieser Art von Seiten ist fast alles erlaubt. Es wird bewusst versucht, gegen den Strom zu schwimmen, um neue Wege zu finden und diese zu etablieren.

7Linklisten

Beim Erstellen von Linklisten sollte man besonders behutsam vorgehen. Auf diesen Seiten ist die Navigation der einzige Inhalt. Eine Vielzahl von Links wird dem Benutzer zur Verfügung gestellt. Dadurch verliert der User schnell den Überblick, und es kommt zu Verwirrungen. Durch ausgeklügelte Formatierung und Gruppierung kann man diesem Problem vorbeugen. Ein besonders gutes Beispiel ist dabei die „Google- Suchmaschine“.

8Intros

Für mich persönlich sind Intros die wahrscheinlich unwichtigsten Seiten im Internet, und obwohl man nicht von seiner eigenen Meinung auf andere schließen sollte, kann man doch eine Menge Argumente gegen den Einsatz von Intros vorbringen. An erster Stelle steht die Frage, was ein Intro für eine Funktion hat.

Es soll den Benutzer auf die Website führen, ihm den Sinn des Inhalts erläutern und ihn auf die Seite einstimmen. Leider kommt eine Vielzahl von Leuten nicht über die Vordertür auf die Webseiten. Über Suchmaschinen und Bookmarks sind Links direkt in das Projekt gesetzt. Somit muss jede einzelne Seite Aussage über den Sinn der Präsenz geben können.

Also ist der erste Punkt nicht gerechtfertigt, um für den Einsatz von Intros zu sprechen. Eine weitere Funktion kann sein, dass man Besucher aufgrund ihrer technischen Voraussetzung selektieren möchte und auf die vorhandenen optimierten Seitenversionen schicken will. Diese Abfrage ist sehr einfach mit einer Scriptsprache wie PHP möglich, und davon sollte man auch Gebrauch machen (Wer weiß schon, ob er das Plug_in x-y-z installiert hat?).

Eine weitere Selektierung etwa nach Kunde / Großkunde / Presse sollte man vielleicht nicht nur auf der Startseite, sondern auf jeder Seite anbieten. Somit kann der Benutzer jederzeit zur anderen „Gruppe“ springen. Er erhält damit auch nicht das Gefühl, dass ihm etwas vorenthalten wird.

Eine gute Funktion gibt es also für Intros nicht, außer dass sie dem Selbstdarstellungstrieb der Gestalter dienen.

Ein weiterer Nachteil ist, dass ein Intro die Benutzer linear durch eine Art Tunnel in das Projekt führt. Meist ist das auch noch mit einer Vielzahl von Klicks - und somit Arbeit – für den Benutzer verbunden. Eine besonders fragwürdige Art des Intros sind Flash-Intros. So innovativ diese Technik auch ist, hier ist sie wirklich fehl am Platz. Die meist informationslosen Clips haben oft eine enorme Downloadzeit und kommen dann mit kitschigen Bildern und lauter Musik an den Arbeitsplatz. Wenn dann der Abrechen-Knopf unter dem Fremdwort „Skip intro“ versteckt ist, bleibt nur das Betrachten des Films als letzte Lösung übrig. Bei so wenig Interaktionsmöglichkeit ist es kein Wunder, wenn der Benutzer sofort den Back-Button am Browser verwendet und auf Nimmerwiedersehen verschwindet.

9Zusammenfassungen

Auf den letzten Seiten habe ich das Problem mit Internetseiten und der Informationsübermittlung erläutert. Es ist klar geworden, dass nicht nur der „Look and Feel“ einer Seite oder nur die fehlerfreie Programmierung einer Seite für den Erfolg verantwortlich sind.

Der Inhalt und die Aufarbeitung der Informationen haben einen ebenso großen Anteil an den Besucherzahlen der Seite. Da man während der Entwicklung einer Seite sehr oft Fehler verursacht, die als solche nicht erkannt werden, sollte man vor der Veröffentlichung des Projekts einen Usability-Test machen.

10Schluss

Internetseiten dienen der Informationsübermittlung, nicht der Selbstdarstellung der Gestalter. Dies ist ein wichtiges Kriterium, das immer wieder missachtet wird. Die Informationen sollten auf den Surfer zurechtgeschnitten sein, und diese Interessen sollten immer im Vordergrund stehen, andernfalls wird das Angebot nicht genutzt werden. Auch sollte eine Webseite auf den funktionellen Ansatz reduziert werden, um dem Benutzer bestmöglichen Komfort beim Studieren der Seiten zu bieten.

Ich hoffe, mit dieser Arbeit neue Sichtweisen auf Webseiten eröffnet zu haben. Vielleicht habe ich auch zum Lesen angeregt. Die im Literaturverzeichnis gelisteten Bücher geben oft einen tieferen Einblick in dieses Gebiet der Softwareentwicklung. Ein Gebiet, das in Zukunft wahrscheinlich immer mehr an Bedeutung gewinnen wird.

11Literaturverzeichnis:

Lehrbuch der Software-technik: Software Entwicklung
Helmut Balzert / isbn: 3-8274-0042-2
Das Usuabillity Prinzip
Frank Puscher / isbn: 3-89864-130-9
Missing Links //Über gutes Webdesign//
Thomas Wirth / isbn: 3-446-22009-7
Internetprojekte von <start> bis</ende>
H. Taglinger / M. Post / M. Jung / W. Wiese (2002) / isbn: 3-8273-1940-4
Psychologie des Software-Entwurfs
W: Dzida & U. Konradt (Hrsg.) (1995) / Göttingen: Hogrefe-Verlag
Allgemeine Arbeitspsychologie
Prof. Dr. W. Hacker (1998) / Bern: Verlag Hans Hubert
Anwendungsentwicklung
Bleßmann / Bütter / Dax (2000) / Köln: Stam Verlag
Allgemeine Arbeitspsychologie
Prof. Dr. W. Hacker (1998) / Bern: Hans Hubert Verlag
Lehrbuch Allgemeine Psychologie
Spada, H. (Hrsg.). (1992) / Bern: Hans Huber Verlag