Usability

Website usability

Im folgenden Text wollen wir nun darauf eingehen, wie die ISO-Richtlinien für Usability bei der Erstellung von Websites umgesetzt werden können.

Spezifikationen der Anforderungen an die Benutzbarkeit (usability requirements)

Bevor man beginnt die Anforderungen an die Benutzbarkeit festzulegen, ist es notwendig Informationen über die Zielgruppe und den Nutzungskontext der Website zu erhalten. Auf diese Aspekte gehen wir im Abschnitt "Zielgruppen" näher ein.

Anschliessend sollen für diesen spezifischen Nutzungskontext geeignete Messgrössen für die Effektivität, Effizienz und Zufriedenheit der Nutzung der Website festgelegt werden. Aus diesen Messungen sollen Kriterien für die Akzeptanz der Website beim Benutzer erarbeitet werden.

Diese Anforderungen an die Usability erleichtern die technische Umsetzung der Website. Es gibt aber keine allgemeingültigen Regeln für die Gestaltung von benutzerfreundlichen Internetauftritten. Im folgenden Text werden wir deshalb auf verschiedene Aspekte von Websites wie Layout, Farbgebung, Navigation und Schrift genauer eingehen. Wir geben jeweils praktische Hinweise und erklären welchen Einfluss diese verschiedenen Elemente auf die Benutzbarkeit des Gesamtproduktes haben.

Homepage

Die Homepage ist der Einstiegspunkt in jedes Internetangebot. Hier entscheidet sich innerhalb kurzer Zeit, ob der Benutzer auf der Seite verbleibt oder ob er sie wieder verlässt. Jeder Benutzer kommt mit einem bestimmten Ziel (specified goals) auf ihre Website, welches effizient, effektiv und zufriedenstellend erreicht werden soll.
Unterscheiden sie ganz klar zwischen dem Grund für den Besuch auf der Website und den Inhalten, welche sie vielleicht aus Gründen des Marketings auf ihrer Startseite präsentieren möchten. Bieten sie gut sichtbare Links zu den relavanten Informationen und überschwemmen sie den Benutzer nicht mit Werbetexten.

Alle Firmeninformation schliesst man zusammen und macht einen 'Über uns' Link von der Homepage aus. So ist sie für Interessierte einfach und schnell zu finden.

Präsentieren sie aktuelle Informationen gut sichtbar. Bieten sie aber auch einen Link zu archivierten Informationen an. Versehen sie Neuigkeiten jeweils mit dem Datum der Publikation.

Achten sie besonders auf den Titel den sie für ihre Homepage wählen. Dieser Titel wird in den Resultatelisten von Suchmaschinen angezeigt und sollte möglichst treffend den Inhalt beschreiben.

Layout

Ein genereller Tipp zur technischen Umsetzung: Verwenden sie keine Frames. Obwohl Frames ein sehr nützliches Werkzeug für das Layout von Websites sind, haben sie einige technisch bedingte Nachteile.

  • Frames machen Bookmarks(Favoriten) unnütz, da sie nur immer auf die Homepage der Site zeigen können und tiefer gelegene Seiten nicht direkt wieder anzusteuern sind.
  • Ladezeit einer Seite mit mehreren Frames ist länger, da für jedes Frame eine neue Seite vom Server geholt werden muss.

Damit sich ein User auf einer Website wohl fühlt, muss man es ihm so einfach wie möglich machen. Am besten verwendet man ein bekanntes Layout, man sollte sollte sich also an Formate halten, die sich längst im Internet eingebürgert haben.

Die gebräuchlichste Form ist die folgende: Am Kopf der Seite Überschrift, Firmenlogo. Die linke Seite ist für die Navigationsleiste reserviert. Die rechte Seite kann entweder nicht getrennt behandelt werden, oder es werden dort Links zu ähnlichen oder ergänzenden Seiten, Links zu nur kurze Zeit zurück liegenden Artikeln, oder Werbungen platziert.
Eine zweite Form, die auch oft vorgefunden wird, positioniert die Navigation am Kopf der Seite (unter, oder links vom Logo). An den Seiten befinden sich in diesem Fall die Extras, die in der ersten Form alle in der rechten Spalte waren.

Es ist natürlich technisch und gestalterisch auch möglich andere Formate zu benutzen, dies kann aber weniger sattelfeste Benutzer unsicher machen, was wir ja um jeden Preis vermeiden möchten.

Horizontales Scrollen unterbricht den Lesefluss und wird deshalb von Benutzern als extrem störend empfunden.
Sobald man Bilder und Navigationsleisten in der Website hat, wird es Benutzer mit tiefen Bildschirmauflösung geben, die scrollen müssen um den ganzen Inhalt zu betrachen. Man sollte aber darauf achten, dass horizontales scrollen für Benutzer mit normal grossen Browserfenstern nicht nötig ist.

Dazu dürfen die Bilder nicht zu breit sein: Text passt sich der Grösse des Fensters an, ausser wenn es Objekte gibt, die ein breiteres Fenster benötigen. Dann wird der Text sich in ein Fenster dieser Breite verteilen und der User muss nach jeder Zeile hin und zurück scrollen.
Auch Tabellen können dasselbe Problem zur Folge haben, wenn ihre Dimensionen entweder in absoluten Einheiten angegeben sind, oder wenn es einfach zu viele Kolonnen hat, so dass sie nicht alle ins Fenster passen.

Es ist besser, die Abmessungen der Website nicht absolut festzulegen. Eine solche Website entspricht nicht den Anforderungen an die Individualisierbarkeit, da Benutzer mit tiefen Auflösungen oft scrollen müssen, jene mit höheren Auflösungen aber nicht die ganze Fläche ihres Bildschirms ausnützen können, was auch schnell als störend empfunden wird.

Illustrationen, Grafiken

Die visuellen Komponenten der Website sind sehr wichtig, da sie dazu beitragen, dass sich Besucher wohl fühlen, sie dürfen aber nicht vom Wesentlichen, also vom Inhalt der Seite ablenken, sondern sie sollen helfen die Extraktion des Inhaltes zu unterstützen.

Sie sind gut geeignet, die Seite etwas reizvoller erscheinen zu lassen, Benutzer tun Graphiken jedoch oft als Werbung ab und konzentrieren sich auf diejenigen Teile der Website, die ihnen nützlich erscheinen (Text, Navigation etc).

Die Grafiken in einer Website sollten aussagekräftig und relevant sein. Es ist zum Beispiel besser, Bilder von Leuten zu benützen, die tatsächlich eine Beziehung zum Thema haben, als Models (auch wenn diese wahrscheinlich besser aussehen..).

Auf einer Verkaufsseite sind Fotos der Produkte zu empfehlen, Seiten voller solcher Bilder sollten indessen vermieden werden, da sie überladen wirken. Setzen sie Thumbnails(Vorschaubilder) ein um schnelle Ladezeiten (Effizienzsteigerung) zu erreichen und verlinken sie diese mit den Bildern in Originalgrösse.
Oft ist es nicht sinnvoll das Originalbild nur zu verkleinern, da so oft nicht mehr viel zu erkennen ist. Verwenden sie stattdessen einen aussagekräftigen Ausschnitt des Bildes als Thumbnail.

Navigation

Gute Navigation ist einfach mit klar ersichtlicher Funktionsweise. Es wird erwartet, dass sie selbsterklärend ist und dass sie den bisherigen Erfahrungen des Benutzers entspricht (Erwartungskonformität).

Die Navigationsleiste muss auf jeder Page der Website gleich aussehen und sich an der gleichen Stelle befinden (Konstanz). Sie sollte aber zumindest soweit der aktuellen Seite angepasst werden, dass ein eventuell vorhandener Link auf dieselbe Seite offensichtlich nicht aktiv ist (Erwartungskonformität). Links auf sich selbst verschwenden die Zeit der Benutzer (Effektivität). Sie können unerfahrene Benutzer aber auch verwirren, da das Ergebnis ihrer Aktion(Klick auf Link) nicht ihren Erwartungen (Verweis zu anderem Inhalt) entspricht.

Ausserdem sollte die aktuelle Position innerhalb der Seitenstruktur klar erkennbar sein (Rückmeldung).

Wenn man in einen anderen Teilbereich der Website wechselt sind vielleicht Links auf andere Seiten passender als diejenigen, die zuvor angezeigt wurden. Es muss dem User aber mit visueller Unterstützung klar gemacht werden, dass ihm jetzt andere Links zur Verfügung stehen.
Am besten macht man dies, indem die momentan nicht aktiven Links zwar immer noch angezeigt werden, jedoch klar ist, dass sie momentan nicht anwählbar sind (vielleicht indem sie in einem helleren Farbton erscheinen).

Auf jeder Seite einer Website muss es einen gut sichtbaren Link zur Homepage haben. Ausserdem ist gebräuchlicherweise das Logo ebenfalls mit der Startseite(Homepage) verlinkt. Dies dient einerseits Benutzern, die durch deep-linking die Website betreten haben, schnell die Startseite zu finden. Andererseits hilft ein solcher Link einem Benutzer jederzeit mit nur einem Klick zurück zur Homepage zu gelangen.

Link-Texte sollten immer mit dem wichtigsten Schlüsselwort beginnen, damit das Ziel des Links auf den ersten Blick klar erkennbar ist.

Zwischen bereits besuchten und unbesuchten Links sollte farblich klar unterschieden werden. So kann ein Benutzer die Übersicht behalten über die Seiten, die er sich schon angesehen hat. Allgemein ist diese Funktion im Browser schon implementiert. Also muss der Designer nur noch darauf achten, dass er sie nicht ausser Kraft setzt (beispielsweise durch den Einsatz von Stylesheets).

Sitemap

Sitemaps sind eine grosse Hilfe beim Navigieren einer unbekannten Website. Sie geben dem Benutzer eine Übersicht über den Aufbau der Website und dienen deren besseren Verständnis.

Die Sitemap kann den Benutzer damit unterstützen gesuchte Informationen (tasks) schneller zu finden. Sie kann ihm helfen, seine Schwierigkeiten mit der normalen Naviagtion der Website zu überwinden.

Für eine grosse Website ist die Sitemap ein sehr wichtiger Bestandteil. Es sollte auf jeder Seite einen gut sichtbaren Link dazu geben, so dass ein User jederzeit mit nur einem Klick dorthin springen kann.

Die Sitemap sollte eine kompakte Kollektion von Links sein. Unter Umständen kann sie mehrere Hierarchiestufen umfassen, sie sollte jedoch so kurz gehalten werden wie möglich.

Deep-linking

Oft gelangen Benutzer nicht über die Homepage auf eine Website sondern durch Links in Suchmaschinen oder auf anderen Seiten. Diese nennt man "Deep-Linking", da diese Links sozusagen in die Tiefe der Struktur der Webseite zeigen.

Damit User die auf diesem Weg in die Website hinein gelangen sich orientieren könen, sollten folgende Elemente auf jeder Seite enthalten sein:

  • Firmennamen und/oder Logo mit Link auf die Homepage
  • direkter Link auf die Homepage
  • Suchfunktion

Wenn die Website einen hierarchischen Aufbau hat, ist es hilfreich, eine sogenannte 'Breadcrumb Trail' anzugeben. Diese zeigt dem Benutzer an in welchem Bereich/Unterbereich der Website er sich aktuell befindet.
Beispiel: " Startseite > Geographie > Europa > Deutschland " wobei "Startseite", "Geographie" und "Europa" Links auf diese Seiten sind, und "Deutschland" die momentane Seite darstellt.

Links zu anderen Seiten, die Inhaltlich zum aktuellen Thema passen sind auch eine gute Möglichkeit den Benutzer in der Orientierung zu unterstützen.

 

Suche

Umfangreiche Websites sollten eine Suchfunktion aufweisen, um dem Benutzer effizient Zugang zu den gewünschten Informationen zu bieten.

Die Suchfunktion sollte ganz schlicht dargestellt sein: Eine Textbox mit Button daneben wird jederman erkennen, solange auf dem Button 'suchen' oder 'search' steht. Eine Überschrift, wie zum Beispiel 'Suchfunktion' ist überflüssig.

Die Suchmaschine sollte auch Schreibfehler akzeptieren und Verbesserungsvorschäge machen. Zum Beispiel sollte jemand, der 'Websiet' eingibt, gefragt werden 'Meinten Sie vielleicht "Website"?'

Die Suchmaschine sollte auch die Treffer nach Priorität geordnet auflisten und nicht einfach jedes Dokument, das den Suchterm enthält in einer zufälligen Reihenfolge zusammenstellen.

 

Textgliederung

Ein Besucher einer Website möchte keine Zeit damit verlieren, Informationen zu verarbeiten die für ihn nebensächlich sind. Daher ist es sehr wichtig, dass der Text möglichst einfach zu überfliegen ist.

Kurze, durch Leerzeilen klar voneinander getrennte Absätze machen die schnelle Informationssuche viel angenehmer: Man kann mit nur wenigen Blicken feststellen, ob in einem Absatz relevante Fakten enthalten sind. Ein Text der nur aus einem grossen Block besteht ist mühsam zu überfliegen. Schnell hat man wichtige Informationen verpasst, falls man nicht auf jede Zeile einen Blick wirft. Weil der Text keine klare visuelle Struktur hat, braucht es grosse Konzentration um nicht um eine Zeile zu verrutschen. Wenn man sich den Ort relativ zu den nächsten Leerzeilen merken kann (was unbewusst geschieht), so fällt dieses Problem weg.

Die Gliederung des Textes kann man durch Untertitel unterstützen. Ein User kann die Untertitel lesen und dadurch Themen die ihn nicht interessieren ignorieren. Falls er genau weiss was er sucht, so kommt er durch die Untertitel (solange sie tatsächlich sinnvoll und aussagekräftig sind) schneller zum Ziel.

Eine ähnliche Funktion haben hervorgehobene Schlüsselwörter. Dies kann durch Farbe erreicht werden, oder durch fette oder kursive Schrift. Es muss aber sparsam damit umgegangen werden: Zu viele hervorgehobene Ausdrücke machen die unterstützende Wirkung derselben zunichte.

Um den Text visuell aufzulockern sind Listen gut geeignet. Sie brechen einen Blocktext auf und machen das Lesen angenehmer.

Inhaltlich macht man den Text einfacher zu überfliegen indem man ihn nach den Regeln der "invertierten Pyramide" aufbaut. Das heisst, dass man wie Journalisten den Text mit der Schlussfolgerung beginnt. Im Anschluss daran bringt man die wichtigsten Informationen worauf die Schlussfolgerung sich abstützt. Man schliesst den Artikel ab, indem man Hintergrundfakten erläutert. Ein so aufgebauter Text hat zur Folge, dass der Leser jederzeit aufhören kann und trotzdem die wichtigsten Informationen erhalten hat.

Verschiedenes

Links auf E-Mail-Adressen sollten ganz klar als solche gekennzeichnet sein. Der Link-Text muss entweder die Ziel-Emailadresse sein, oder etwa 'Email an Kundendienst senden' lauten. Links, die den Namen von jemandem als Text haben, sollten auf den Lebenslauf der betreffenden Person führen oder auf deren persönlche Website. Ein Link, der ohne Vorwarnung einen Email-Editor öffnet, wird den Benutzer irritieren, weil dies nicht erwartet wird.

Benutzer reagieren oft empfindlich darauf, wenn auf ihrem Bildschirm ein neues Fenster geöffnet wird. Es kann als agressiv wahrgenommen werden, als Versuch die Kontrolle über die eigene Maschine zu übernehmen.
Der zweite Punkt ist, dass heutzutage sehr viele Internetbenutzer so sehr an Popups mit Werbung gewöhnt sind, dass sie jedes neue Fenster automatisch schliessen.

Ein neues Fenster zu öffnen macht zudem den Zurück-Knopf unbrauchbar. Viele User benutzen den "Zurück-Knopf" in ihrem Browser um innerhalb von Websites zu navigieren.

Jede grössere Website sollte eine FAQ (frequently asked questions) Seite haben. Diese sollte aber nicht die Fragen beinhalten, von denen die Firma möchte, dass die User sie stellen, sondern diejenigen, die tatächlich immer wieder gestellt werden.

Quellenverzeichnis