Brauchbar oder gut? Usability im Webdesign
Artikel erschienen in Swiss IT Magazine 2001/11
Zeitmangel ist eines der Hauptprobleme des Websurfers: Es gibt immer mehr Webseiten mit immer mehr Informationen. Da der Tag auch bei optimalem Time Management nur vierundzwanzig Stunden hat, steht nach Adam Riese zum Auffinden, Erfassen und Verarbeiten einer bestimmten Information immer weniger Zeit zur Verfügung.
Nicht zuletzt deshalb ist es für den Erfolg einer Website essentiell, dass sie effizient zu bedienen ist. Ebenso wichtig ist aber auch der subjektive Faktor: Macht es keinen Spass, die Seiten nach dem gesuchten Inhalt zu durchstöbern, wird kaum jemand eine Site regelmässig besuchen. Und last but not least: Ohne Gehalt bleibt die schönste und schnellste Seite ein ödes Gerippe - wer nichts zu sagen hat, braucht auch keine Site ins Netz zu stellen.
Die IT-Szene spricht, wenn es um die Interaktion zwischen User und Software geht, im allgemeinen von Usability, was man auf deutsch etwa mit Benutzbarkeit übersetzen könnte. Es geht aber um mehr: Sowohl der inhaltliche Nutzen, den der Gebrauch eines Programms oder eben der Besuch einer Website bringt (Utility) als auch die Art und Weise, wie der Anwender in den Genuss dieses Nutzens kommt (Usability) sind wichtig. Zusammengefasst ergeben die beiden Komponenten den Gesamtnutzen (Usefulness).
Im folgenden präsentieren wir die elementaren Gegebenheiten und Regeln der Usefulness auf dem Web. Vieles mag dem abgebrühten Webprofi als Binsenwahrheit erscheinen - die Praxis zeigt jedoch immer wieder, dass gerade die grundlegendsten Anforderungen von vielen Websites nicht erfüllt werden.
Der Kernpunkt der ersten Usefulness-Komponente: Die Website beziehungsweise deren Inhalte müssen beim Surfer einen echten Nutzen generieren. Neben dem eigentlichen Inhalt, der so verschiedene Interessengebiete umfassen kann wie Karnickelzucht, Big Brother oder Pharmakokinetik von Antidepressiva, ist die Präsentation der Informationen ausschlaggebend:
Inhalt und Form müssen zur Zielgruppe passen. Stimmt die Sprache, stimmt das grafische Erscheinungsbild? Hip-Hopper haben andere Ansprüche als Börsenmakler. Zielgruppen sind aber nicht nur Surfer mit unterschiedlicher Interessenlage. Auch Webanfänger und Profi-Surfer können als Zielgruppe gezielt auf bestimmte Websites oder Bereiche der Site gelenkt werden.
Unabhängig von der Zielgruppe gilt: nicht angeben! Wer auf der Homepage vor allem verkündet, er sei in seinem Feld der Beste und Einzige, gibt nur inhaltslose Marketingphrasen von sich. "We are the leaders in innovation" sagt überhaupt nichts aus. Der typische Surfer ist nicht an Werbung, sondern an echten Informationen interessiert.
Die präsentierten Informationen müssen vollständig sein. Grundsätzlich eher mehr und detaillierter anbieten als in Print-Broschüren.
Grössere Informationsmengen erfordern eine besonders durchdachte Site-Struktur. Tools wie Volltextsuche auf der ganzen Site oder übersichtliche Site-Maps helfen dem Surfer, sich zurechtzufinden.
Ballaststoffe sind in der Ernährung unabdingbar; auf Webseiten ist Nichtinformation überflüssig. Die Nahaufnahme einer Rose ist bestimmt wunderschön - aber was, bitte, hat sie auf der Startseite eines Online-Brokers zu suchen?
Eckdaten wie Adresse und Telefonnummer des Site-Betreibers sollten möglichst schon auf der Startseite, höchstens aber mit einem einzigen Mausklick zugänglich sein.
Nur Informationen präsentieren, die tatsächlich vorhanden sind. Dringlichst abzuraten ist von Seiten "under construction" - der Surfer empfindet es als Frechheit, wenn er im Navigationsmenü geködert wird und nach dem Klick nur eine öde Wüste vorfindet.
Sämtliche Informationen sind immer auf dem neuesten Stand zu halten und nicht mehr benötigte Angaben sofort zu entfernen. Der Veranstaltungskalender vom vergangenen Monat macht keinen guten Eindruck - vor allem dann, wenn im Gegensatz dazu der aktuelle Kalender nicht zu finden ist.
Hochnotpeinlich sind ersichtlich schlecht genutzte Angebote wie Gästebücher mit einem einzigen Eintrag, permanent leere Chat Rooms oder der dankenswerterweise aus der Mode gekommene Seitenzähler, der insgesamt fünf Besucher während sechs Monaten vermeldet. Solche Elemente sollte man entweder gar nicht erst einbauen oder bei schlechter Nutzung rasch wieder entfernen.
Das Web ist keine Zeitung und kein Buch. Physikalische und physiologische Gegebenheiten führen dazu, dass Texte ab Bildschirm anders gelesen werden als gedruckte. Text sollte nicht direkt aus bestehenden Publikationen übernommen, sondern speziell für die Website redigiert werden.
Studien weisen deutliche Unterschiede in der Wirkung nach. Surfer, die einen Text ab Bildschirm gelesen hatten, konnten sich danach schlechter an den Inhalt erinnern als die Kontrollgruppe, die den gleichen Text auf Papier erhielt. Es ist demnach wichtig, für die Onscreen-Präsentation besonders prägnant zu formulieren und die wichtigsten Punkte auch optisch hervorzuheben. Eine durch Punkte markierte Liste knapp formulierter Basisinformationen wird besser aufgenommen als ein langer Textabschnitt.
Bei der Textaufbereitung sollte man allerdings auch nicht übertreiben. Oft wird erwähnt, dass nur ein Zehntel der Surfer eine längere Website nach unten scrollt. Dies mag zutreffen, spielt für professionell angelegte Texte aber ohnehin keine Rolle: Jeder Journalist weiss, dass das Wichtigste im ersten Abschnitt stehen sollte; danach folgen nur noch Detailinformationen. Eine brauchbare Variante ist auch ein Inhaltsverzeichnis vor dem eigentlichen Text, das mit Hyperlinks auf die darunter folgenden Abschnitte verweist.
Auf keinen Fall dürfen bei der Webredaktion Informationen verloren gehen. Nicht Kürzen um der Kürze willen ist gefragt, sondern eine wortökonomische und dennoch umfassende Formulierung des gesamten Sachverhalts. Ein gutes, wenn auch unbeabsichtigtes Beispiel übertriebener Kürzung bringt Usabilty-Guru Nielsen in seinem bekannten Buch. Bei der Umwandlung eines länglichen, marketinglastigen Texts über die touristischen Sehenswürdigkeiten Nebraskas in eine Bullet-Liste mit den sechs Hauptattraktionen fallen alle Angaben über die genauen Besucherzahlen weg.
Es ist aus dem Geschäftsleben hinlänglich bekannt: Das beste Produkt verkauft sich schlecht, wenn die Kunden es nicht kennen, es nur mit Mühe zuhinterst im Laden finden oder dem Händler gar "mit Bestellung" drohen müssen, bevor er damit herausrückt. Ganz ähnlich kann es Webinhalten gehen, wenn sie nicht auf einfache und effiziente Weise zugänglich sind. Unter dem Oberbegriff der Usability sind mehrere Aspekte subsumiert:
Ease of learning: Zur Benutzung einer Website sollte keine Bedienungsanleitung nötig sein. Der Surfer muss alle Schritte, die zum Zugriff erforderlich sind, aufgrund des Site-Designs intuitiv auf den ersten Blick erfassen können.
Efficiency of use: Die Inhalte müssen mit möglichst geringem Aufwand zugänglich sein. Als Grundregel gilt: ab der Startseite maximal drei Mausklicks bis zur gewünschten Information.
Memorability: Ergibt sich automatisch aus den vorhergehenden Punkten. Wenn die Bedienung intuitiv erfassbar und die Inhalte ohne Aufwand zugänglich sind, muss nicht bei jedem Besuch der Site von neuem überlegt werden, wie man sie am besten nutzt. Exotische Interface-Ideen wie versteckte Buttons und kurios animierte Menüs mögen nett aussehen, erschweren aber meist die Bedienung.
Error frequency and severity: Es versteht sich von selbst, dass beim Besuch der Site keine Fehler auftreten sollten. JavaScript-Fehlermeldungen sind absolut unerotisch, und auch die bekannte Webserver-Notiz 404 bei ungültigen Hyperlinks ist nicht beliebt. Wie alle technisch bedingten Probleme lassen sich beide Vorkommnisse durch ausgiebiges Testen der Site weitgehend vermeiden. Gar nichts kann der Durschschnittssurfer mit kryptischen Fehlermeldungen wie "server socket read timeout" anfangen. Solche Fehler, die voraussehbar passieren können, was meistens bei fortgeschrittenen Anwendungen mit Scripts und serverseitiger Verarbeitung der Fall ist, müssen wie bei herkömmlichen Anwendungen in der Programmierung abgefangen werden. Es gibt keine Entschuldigung dafür, eine Webapplikation mit weniger Sorgfalt zu entwickeln.
Subjective satisfaction: Die Zufriedenheit mit der Website ist für jeden Surfer ein individuelles Erlebnis. Die breiteste Akzeptanz erreicht man mit einer zielgruppengerechten, ansprechend gestalteten Site ohne technischen und gestalterischen Firlefanz.
Wer es kürzer will, fährt mit der Grundregel Nummer eins ganz sicher nicht schlecht: Keep it simple!
Die meisten Websites bestehen aus einer Startseite mit deutlich unterschiedlicher Gestaltung und mehreren identisch aufgebauten Folgeseiten. Oft wird eine eigentliche Startseite zugunsten einer durchgängig einheitlichen Gestaltung auch weggelassen.
Beide Varianten haben sich in der Praxis bestens bewährt. Präsentationen einzelner Produkte oder Firmen profitieren von einer exklusiv aufgemachten Startseite, während umfassendere Angebote oder Portale, die Informationen aus mehreren Quellen zusammenstellen, mit dem durchgängigen Look besser fahren.
Unbedingt zu vermeiden sind langfädige Intro-Filmchen, wie sie lange Zeit in der Flash-Szene en vogue waren. Auch wenn ein solcher Film per Skip-Button abgebrochen werden kann, verliert er spätestens beim zweiten Besuch einer Site jegliche Faszination und der gutgemeinte Eye-Catcher entwickelt sich um Ärgernis. Wer unbedingt eine Animation an den Anfang der Webpräsenz stellen will, soll sie möglichst kurz halten - zwei, drei Sekunden witzige Bewegung auf dem Bildschirm sind genug und strapazieren die Ladezeit nicht übermässig. Eine längere animierte Präsentation zeigt man am besten innerhalb der Site erst dann, wenn sie der Surfer explizit anfordert.
Für die logische Verknüpfung der einzelnen Seiten wählt man mit Vorteil eine lineare Folge mit direkten Links von einer Seite zur nächsten, eine Baumstruktur mit hierarchisch angeordneten Ebenen und Unterebenen. Alternativ empfiehlt sich auch eine Kombination der beiden Modelle.
Weniger vorteilhaft ist ein allgemeiner Graph mit Seiten, die ausserhalb einer klaren Grundstruktur ausschliesslich durch Quer- und Rückverweise per Hyperlink verknüpft sind.
Wichtig: Auf allen Seiten muss ein Link zur Startseite oder zur ersten Seite der linearen Folge eingebaut werden, damit der Surfer im Notfall wieder von vorne beginnen kann.
Der Surfer sollte zudem zu jedem Zeitpunkt wissen, wo er sich genau befindet. Zu diesem Zweck hat sich die Anzeige des vollständigen Navigationspfades auf jeder Seite bewährt, zum Beispiel "Huber AG:Produkte:Haushalt:Schmierseife".
Für die Navigation zwischen den Seiten einer Website stehen dem Surfer drei Möglichkeiten zur Verfügung: die Navigationselemente des Browsers (Back- und Forward-Button, Bookmarks, History), das Site-eigene Navigationsmenü und die in Text- und Bildelementen integrierten Hyperlinks. Dabei gelten zwei einfache Grundregeln:
Der Klick auf einen Hyperlink oder eine Menüoption ersetzt die aktuell im Browser angezeigte Seite durch den neuen Inhalt im gleichen Fenster.
Der Back-Button des Browsers führt zur direkt davor angezeigten Seite.
Im real existierenden Web kommen allerdings zahlreiche Ausnahmen vor. Am beliebtesten: Beim Anklicken eines Links wird ein neues Fenster geöffnet. Dies ist legitim, wenn der Link auf eine Seite ausserhalb der aktuellen Website verzweigt oder irgendwelche Zusatzinformationen bietet, die parallel zum eigentlichen Seiteninhalt angezeigt werden sollen.
Insbesondere bei Websites, die mit Flash aufgebaut sind und mit einem eigenständigen Navigationsmodell arbeiten, wird oft zu Beginn ein neues Fenster ohne die üblichen Toolbars und Menüs des Browsers geöffnet, damit der Surfer nicht anstelle der Flash-Navigation die Elemente des Browsers benutzt. Auch das ist legitim, sofern die Site-eigene Navigation wirklich durchdacht und korrekt implementiert ist.
Völlig unakzeptabel ist dagegen das automatische Öffnen eines neuen Fensters, wenn der Surfer ein anderes Fenster schliesst. Leider arbeiten einige Sites zu Werbezwecken mit diesem Mechanismus - eine der schlimmsten Belästigungen, denen der Internet-User ausgesetzt ist.
Das wichtigste Navigationsmittel ist das Site-Menü, aus dem der Surfer per Mausklick auf die Seite seiner Wahl gelangt. Ausser bei einer rein linearen Seitenfolge kommt keine Website ohne Menü aus.
Das Menü ist ein direktes Abbild der hierarchischen Struktur der Site. Auf jeder Ebene sollten aber nicht mehr als sieben Optionen gezeigt werden - das Kurzzeitgedächtnis nimmt maximal sieben Informationseinheiten auf: mehr auf einmal verwirrt. Es empfiehlt sich deshalb, dieser Beschränkung der menschlichen Aufnahmefähigkeit unbedingt Beachtung zu schenken.
Die Optionen von untergeordneten Ebenen zeigt man deshalb am besten erst auf der entsprechenden Ebene an, oder man arbeitet mit einem hierarchischen Pop-up-Menü im Stil der Windows-Pendants, die sich bis anhin bestens bewährt haben.
Die Bezeichnungen der Menü-Optionen müssen dem Surfer klar und deutlich vermitteln, was ihn auf der jeweils angewählten Seite erwartet. Dies gilt insbesondere dann, wenn auf der neuen Seite weitere untergeordnete Ebenen zur Verfügung gestellt werden.
Beispiel: Bei einem Versandhaus kann der Kunde erwarten, dass unter der Hauptmenü-Option "Abteilungen" die einzelnen Produktebereiche erscheinen. Bei der Option "Kontakt" dagegen ist nicht ersichtlich, ob detaillierte Adressangaben und Anfahrtspläne oder bloss ein Online-Kontaktformular folgt.
Untersuchungen zeigen, dass Menüs am linken Fensterrand am besten funktionieren. Möglich ist auch ein Menübalken zuoberst im Fenster. Eine Position am unteren oder rechten Rand ist weniger geeignet, da sie kaum zur Kenntnis genommen wird. Grund: Das Menü steht für die Struktur der Site, die sich der Surfer räumlich vorstellt. Elemente im linken Teil des Blickfeldes werden mit der rechten Hirnhälfte erfasst, die für das räumliche Vorstellungsvermögen zuständig ist. Ein links positioniertes Menü hinterlässt einen nachhaltigeren Eindruck.
Ob das Menü mit animierten Rollover-Buttons oder mit simplen Hyperlinks aufgebaut wird, ist Geschmackssache. Es geht sogar völlig ohne "Menü-Look". Wie die verschiedenen Yahoo-Sites zeigen, ist auch im einundzwanzigsten Jahrhundert eine komplette Website im simplen HTML-Stil kein Ding der Unmöglichkeit.