Die Top Ten der Webdesign-Fehler 2003

Zusammenfassung
Sites werden besser, indem sie minimalistisches Design benutzen, Archive bereitstellen und umfassende Dienste anbieten. Allerdings bringen diese Vorteile eigene Usability-Probleme mit sich, wie mehrere markante Fehler des Jahres 2003 zeigen.

Hier ist meine Liste von zehn Unarten, die in jüngster Zeit bei Websites besonders negativ aufgefallen sind.

1. Unklare Zweckangabe

Viele Firmen, besonders in der High-Tech-Branche, benutzen vage und generalisierende Begriffe, um ihre Absichten zu beschreiben. Das Verschleiern dieser grundlegenden Fakten erschwert es den Besuchern sehr, die Informationen und Dienste einer Website einzuschätzen.

Eine belastbares mentales Modell kann aus kleinen Samenkörnern heranwachsen, so wie jedes zusätzliche Design-Element das bestehende Verständnis des Besuchers von der Site ergänzt. Allerdings erzeugen viele Sites verschwommene Vorstellungen in den Köpfen ihrer Besucher. Sie missachten die Tatsache, dass Benutzer die Informationen in den richtigen Kontext einordnen können müssen.

2. Neue Web-Adressen für archivierten Inhalt

Mit sehr geringem zusätzlichen Aufwand vergrössern Archive den Wert einer Site substanziell. Obwohl mehr und mehr Sites alte Inhalte archivieren, misslingt es den meisten Sites, gute Archive bereitzustellen. Manche Sites behandeln Archive als separaten Site-Bereich und vergeben neue Web-Adressen (URLs) an die Seiten, sobald sie aus dem Hauptbereich ins Archiv gestellt werden.

Die Web-Adresse beim Archivieren zu ändern, verursacht gebrochene Links. Außerdem führt es dazu, dass andere Sites nur widerwillig auf Ihre Site verlinken. Obwohl es diese in Betracht ziehen könnten, auf einen Ihrer aktuellen Artikel zu verlinken, werden sie es oft bleiben lassen, falls sie sich damit in der Vergangenheit Probleme mit gebrochenen Links eingehandelt haben. Denn sie möchten sich nicht mit mit dem Aktualisieren ihrer Seiten herumschlagen, falls Sie Ihre umgestalten.

3. Undatierte Inhalte

Ohne Datum auf Artikeln, Pressemitteilungen und anderen Inhalten haben die Benutzer keine Ahnung, ob die Information aktuell oder veraltet ist. Es ist großartig, Inhalte in Archiven bereitzustellen. Die Alertbox zum Beispiel gewinnt 80% ihrer Leserschaft über alte Kolumnen, welche die Leser weiterhin nützlich finden. Aber manche Fakten und Empfehlungen sind stark zeitgebunden, etwa wenn ich empfehle, eine bestimmte Version eines Software-Pakets zwei weitere Jahre lang zu benutzen. Natürlich meine ich zwei Jahre vom Tag an, an dem der Artikel geschrieben wurde; wenn die Leser das Datum nicht sehen können, wissen sie nicht, wie sie der Empfehlung folgen sollen.

Einem ähnlichen Fehler ist ein Benutzer kürzlich in unserer Untersuchung begegnet, wie Investoren und Wirtschaftsjournalisten den Investor-Relations-Bereich von Unternehmens-Websites auswerten. Der Besucher hat über die Suchmaschine der Site eine Nachrichtenmeldung gefunden und sie dazu benutzt, die geschäftlichen Aussichten der Firma zu bewerten. Schön, ausser dass die Meldung schon ein paar Jahre alt war. Die Suchmaschine hatte den Artikel mit einem irreführenden Datum versehen – wahrscheinlich dem Datum, an dem die Datei verschoben oder ein Tippfehler beseitigt worden war.

Die Suchmaschine auf meiner eigenen Site hat das gleiche Problem: Sie orientiert sich am Dateiüberarbeitungsdatum des Betriebssystems anstatt an dem Datum, an dem der Inhalt geschrieben worden ist. Ich habe daraus die Konsequenz gezogen und die Datumsfunktion in den Suchergebnislisten abgeschaltet. Solche Daten können sehr nützlich sein, aber sie richten mehr Schaden an als Nutzen, wenn die Benutzer sich nicht auf sie verlassen können. Natürlich wäre die Ideallösung ein Content-Management-System, das die Suchmaschine mit dem Entstehungsdatum füttert. Jede große Site mit IT-Personal sollte das so handhaben.

4. Kleine Daumennagelbilder von großen, detailreichen Fotos

Es ist großartig, dass Websites jetzt kleinere Bilder verwenden. Die aufgeblasenen Designs der Vergangenheit zu vermeiden, reduziert die Ladezeiten und steigert den Informationsgehalt. Es ist ebenfalls gut, wenn kleine Bilder auf den Sites zu größeren Bildern verlinken, so dass die Benutzer die Möglichkeit haben, das Bild im Detail zu betrachten.

Das Hauptproblem dabei ist, dass die Websites normalerweise kleine Bilder produzieren, in dem sie die großen Bilder einfach verkleinern. Wenn ein Originalfoto eine Menge komplizierter Details enthält, ist das Daumennagelbild oft unverständlich.

Das linke Foto stammt von der Site whitehouse.gov. Es zeigt den US-Präsidenten, den Innenminister und den Nationalparkdirektor in den Bergen von Santa Monica. Wenn ich Ihnen das nicht gesagt hätte, würden Sie es beim Anschauen des Daumennagelbildes nicht erkennen: Es ist bloß ein Foto von drei Personen. Sie können noch nicht einmal wirklich feststellen, dass sie in einem Park sind, geschweige denn, in welchem.

Das rechte Foto stammt von cnn.com, die gewöhnlich auf ihrer Homepage gut mit kleinen Bildern arbeiten. Das Foto hat eine Geschichte über Hochwasser illustriert; in diesem Fall können Sie klar erkennen, was vorgeht, obwohl das Bild bloß 65*49 Pixel groß ist.

Wenn Sie Fotos im Web benutzen:

• Zeigen Sie weniger Leute und Objekte, und weniger komplizierte Settings als Sie für Fotos im Printbereich verwenden würden
• Bevorzugen Sie Nahaufnahmen mit sauberem Hintergrund
• Benutzen Sie Techniken der relevanzabhängigen Bildreduktion, wenn Sie ein kleines Fotos aus einem großen herstellen. Verkleinern Sie es nicht einfach; schneiden Sie das Bild zuerst zurecht, um es auf ein hervorstechendes und einfaches Element zu fokussieren.

5. Zu detaillierte ALT-Texte

Viele Sites sind dazu übergegangen, auf behinderte Benutzer Rücksicht zu nehmen, und befolgen dabei Zugänglichkeitsrichtlinien wie jene der ALT-Texte für Bilder einzubauen.

Leider beachten manche Sites nicht, dass ALT-Text ein Bestandteil der Benutzeroberfläche ist und nicht ein Zeugnis politischer Korrektheit. ALT-Text soll blinden Benutzern (und anderen, die keine Bilder erkennen können) helfen, in der Site zu navigieren und mit ihr zu arbeiten. Der Text sollte die Bedeutung des Bildes für die Interaktion beschreiben und was Benutzer über das Bild wissen müssen, um die Site möglichst effektiv benutzen zu können. Es ist nicht nötig, irrelevante visuelle Details zu beschreiben.

Zum Beispiel bin ich auf eine Site gestossen, die folgenden ALT-Text für ihr Logo eingesetzt hat: »Link zur Homepage über das IDEAS-Logo: Zwei Wirbel umkreisen IDEAS und im Hintergrund geht die Sonne auf.« Es mag sinnvoll sein, irgendwo in der Site eine Textbeschreibung des Logos einzubauen, für blinde Benutzer, die wissen wollen, wie es aussieht. Aber es macht keinen Sinn, wenn der Bildschirmleser jedes Benutzers auf jeder einzelnen Seite die Anzahl der Wirbel im Logo verkündet.

Es braucht einige Zeit, bis der Bildschirmleser neunzehn Wörter vorgelesen hat, und die ausführliche Beschreibung macht es schwerer, die entscheidende Information herauszufiltern: dass die Grafik ein Link auf die Homepage ist.

Kurz ist gut, wenn man fürs Web schreibt; es ist sogar noch besser, wenn man für Bildschirmleser schreibt.

6. Keine »Was-ist-wenn«-Hilfe

Alternativen zu vergleichen und auszuwählen ist die Basis für viele entscheidende Aufgaben im Web, doch die meisten Websites unterstützen die Besucher nicht, wenn sie Alternativen abwägen wollen.

Was ist, wenn ich nicht am Samstag, sondern am Sonntag verreisen will? Wie würde das den Preis meines Flugtickets beeinflussen? Bei den meisten Reisesites, ist der einzige Weg, diese Frage zu beantworten, nochmals beim ersten Formular anzufangen, einen völlig neuen Trip zu planen und dabei die ganze Arbeit zu verlieren, die man in das Erstellen der ersten Reiseroute gesteckt hat.

Was ist, wenn ich keinen Schwarz-Weiß-, sondern einen Farbkopierer haben will, aber mit allen anderen Attributen des Schwarz-Weiß-Kopierers zufrieden bin, den ich gerade anschaue? Kann ich nach Attributen navigieren und bloß einen der Parameter verändern? In der Regel nicht.

Manche Websites erlauben es den Benutzern, einige Produkte auszuwählen und eine Vergleichstabelle zu betrachten, aber normalerweise haben solche Tabellen eine geringe Usability und heben die wichtigsten Unterschiede zwischen den Produkten nicht hervor.

7. Lange Listen, die man nicht anhand von Attributen bereinigen kann

Früher haben Websites gewöhnlich ein oder zwei Dinge angeboten. Heutzutage findet man gewöhnlich Sites mit Tausenden oder Millionen von Artikeln. Wunderbar, aber das bedeutet, dass Artikellisten oft sehr lang werden und schwer zu benutzen sind.

Eine der Haupt-Usability-Richtlinien für kategorisierte Seiten besteht darin, die Benutzer anhand ihrer Interessen Artikel aussortieren zu lassen. Eine Liste zu bereinigen bedeutet im Grunde, Elemente herauszufiltern, auf die bestimmte Kriterien nicht zutreffen, so dass eine kürzere Liste entsteht, die einfacher zu handhaben und zu verstehen ist.

Eine nützliche Bereinigung erfordert vier Dinge:

• Zunächst einmal muss die Site das Bereinigen unterstützen, und die meisten tun das nicht.
• Die Bereinigungsattribute müssen für den Benutzer sinnvoll sein und nicht hochtechnisch oder betriebsintern (etwa Artikelnummern; allerdings sollte für Benutzer, die genau wissen, was sie brauchen, eine Suche nach Nummern angeboten werden).
• Die Kriterien sollten interessante Produkte von solchen unterscheiden, die der Benutzer ausblenden möchte. Beispiele:
  • Nur Produkte zeigen, die am Heiligabend ausgeliefert werden können.
  • Nur Schuhe zeigen, die in Größe 10 extraweit erhältlich sind.
• Schließlich muss natürlich die Benutzeroberfläche, die den Bereinigungsprozess steuert, einfach sein, damit sich der Benutzer auf die Attribute und Listen konzentrieren kann und nicht auf die Bedienungsmechanismen der Site.

8. Produkte, die nur nach Markennamen sortiert werden können

Sites, die viele Artikel anbieten, sollten es ermöglichen, zu bereinigen und zu sortieren. Dies ist sehr nützlich, wenn man mit Listen arbeitet, und ist zum Glück ziemlich weit verbreitet. Leider lassen sich auf vielen Sites die Produkte nur nach Markennamen sortieren. So kann man, sagen wir, alle Armani-Produkte finden, nicht aber alle roten Pullover. Um das Sortieren nach Benutzerinteressen möglich zu machen, ist offensichtlich die erste Frage: »Welche Attribute sind den Benutzern wichtig?« Die Antworten werden je nach Produktkategorie verschieden sein, aber Benutzerforschung kann Ihnen helfen, diese herauszufinden, so wie das auch ein guter Verkäufer kann.

9. Überrestriktive Formularfelder

Belasten Sie den Computer, nicht den Menschen: Lassen Sie die Benutzer ihre Daten so eingeben, wie sie es möchten. Zwei verbreitete Arten, die Benutzer unfair einschränken:

• Ausgewählte, überspezifische Formulare. Auf mehrere Felder aufzuteilen, was die Benutzer als einzelnes Stück Information betrachten, führt dazu, dass die Benutzer Zeit verschwenden müssen, um den Cursor fortzubewegen. Ein typisches Beispiel ist, wenn Formulare vom Benutzer verlangen, Vornamen und Nachnamen als zwei getrennte Elemente einzugeben, anstelle ihm die Möglichkeit zu lassen, seinen ganzen Namen in ein einzelnes Feld zu schreiben, was viel schneller geht. Ein anderes Beispiel:
  
  Telefonnummer: (______) ______-_______
   
• Gewohntes Formatieren verboten. Jedes Texteingabefeld, das vom Benutzer verlangt, die Information in einer bestimmten Art und Weise einzugeben und ihm die natürlichen Variationen, die von den Benutzern bevorzugt werden, nicht erlauben, kann irritierend sein. Viele Sites zwingen die Benutzer zum Beispiel, die Kreditkartennummer als 1234567890123456 einzugeben, und lassen es nicht zu, nach jeweils vier Ziffern einen Abstand einzugeben, was die Gefahr für Fehler signifikant verringern würde. Genau so lassen manche Sites die Besucher keine Telefonnummern mit Klammern um die Vorwahl eingeben, obwohl viele Besucher es gewohnt sind, solche Klammern zu setzen. Unsere Tests haben gezeigt, dass besonders ältere Bürger darunter leiden, wenn das Format in der Website anders ist als das Format, das sie seit vielen Jahren gewohnt sind.

Restriktive Dateneingabefelder verursachen auch Internationalisierungsprobleme, weil das eine, heilige Format, das der Computer akzeptiert, oft an den Grenzen endet und Kunden aus anderen Ländern ausschliesst.

10. Seiten, die auf sich selbst verlinken

Dieser Punkt wurde im Detail als Punkt #10 meiner Liste der meist-missachteten Homepage-Richtlinien ausgeführt, aber er ist für alle Seiten wichtig, nicht nur für Homepages.

Web-Usability: Zwei Schritte vorwärts, einen Schritt zurück

Viele der Top-Designfehler dieses Jahres sind bezeichnend für ein positives Phänomen: Wir machen Fortschritte bei der Web-Usability. Da die Sites jetzt bestimmte Dinge richtig machen, stossen wir auf Phänomene zweiter Ordnung, die erst dadurch Probleme machen, weil die Benutzer die Probleme erster Ordnung überwunden haben.

Zum Beispiel tritt die Frage nach guten oder schlechten ALT-Texten erst bei Sites auf, die sich um ihre Zugänglichkeit kümmern und deshalb überhaupt ALT-Texte einsetzen. Andere Top-Fehler dieses Jahres kommen von Sites, die kurze Ladezeiten erzielen möchten, indem sie die Größe der Bilder reduzieren, die gute Archive bereithalten oder eine breite Produktauswahl anbieten. Das sind alles positive Design-Entwicklungen, aber Aufmerksamkeit für Details ist erforderlich, um eine optimale Usability-Wirkung zu erzielen.

Frühere Top-Ten-Listen

Die meisten der folgenden Top-Ten-Listen sind immer noch hoch relevant für die Websites von heute. Auch wenn neue Fehler auftreten, verschwinden die alten nicht, obwohl (zum Glück) ihre Verbreitung abnimmt.

• Webdesign-Fehler (1996)
• Webdesign-Fehler (1999)
• Gute Taten fürs Webdesign (1999)
• Top-Homepage-Usability-Richtlinien (2002)
• Webdesign-Fehler (2002)
• Meistmissachtete Homepage-Richtlinien (2003)

Fehler für 2004 vorrangig behandeln

Disclaimer ¦ AGB

© 2004 - Institut für Software-Ergonomie und Usability. Alle Rechte vorbehalten