Das Startseiten-Design verändert sich

Das Webdesign stabilisiert sich; Startseiten unterscheiden sich von der Version des Vorjahres im Durchschnitt um nur etwa 40%. (Das entspricht einem Abstand von drei Jahren bis zur kompletten Neugestaltung.)

 

by Jakob Nielsen (deutsche Übersetzung) - 24.09.2012

 

19 Jahre lang habe ich Screenshots eines breiten Spektrums an Startseiten gesammelt, jedes Jahr ein Bild der jeweiligen Seite. Durch den Vergleich der Screenshots mit den Versionen des Vorjahres konnte ich den Grad der Veränderung im Startseiten-Design pro Jahr einschätzen.

Lassen Sie uns mit einigen typischen Beispielen aus meiner Sammlung beginnen.

1994/1995: grosse Veränderung (Beispiel: Microsoft)

Dies sind klassische Startseiten aus den frühen Zeiten des Internet: sehr grafisch orientiert und ohne Bezug zu den Konventionen traditioneller grafischer Nutzeroberflächen (GUI).

In diesen frühen Jahren war es auch üblich, dass die Startseite von einer Version zur nächsten völlig neugestaltet wurde. Zu dieser Zeit war das Webdesign so experimentell, dass es fast schon normal war, wenn der Firmenname das einzige Element war, das von Version zu Version überlebt hat.

2002/2003: mittelstarke Veränderung (Beispiel: CNET News.com)

Diese CNET-Beispiele sind typisch für das Ausmass der Designänderungen, die nach dem Platzen der Dotcom-Blase auftauchten: immer noch ziemlich dramatisch, aber die wichtigsten Designelemente überleben den Schritt zur nächsten Version.

Insgesamt war das Layout recht einheitlich - besonders wenn man die Ansicht verkleinert: mit Navigations-Tabs an der Oberkante einer breiten linken Spalte und einer schmalen rechten Spalte. Die linke Spalte begann mit den herausgestellten Top-Nachrichten, dann folgten zehn zusätzliche Meldungen, von denen jede eine Überschrift und eine etwa dreizeilige Zusammenfassung hatte.

Eine genauere Betrachtung der Details zeigt aber, dass das Design von 2003 sich deutlich von der Version von 2002 unterscheidet. Deshalb schätze ich die Veränderungsrate auf 70% ein.

Zwar haben beide Versionen sieben Tabs (Registerkarten), aber bei der neuen Version reichen die Register über die ganze Seite und ein Farbschema zeigt an, dass eine neue Registerkarte ausgewählt wurde. Zudem wurden auch die eigentlichen Navigationsrubriken geändert. Die Rubriken der Informationsarchitektur (IA) von 2002 lauteten: Front Page, Enterprise, E-Business, Communications, Media, Personal Technology und Investor. 2003 hiessen die Rubriken Front Page, Enterprise Software, Enterprise Hardware, Security, Networking, Personal Tech und The Net.

Neben dem eigentlichen Konzept der Startseite (Front Page) hat nur Personal Tech das grosse IA-Schlachtfest von 2003 überlebt, nicht ganz unbeschadet, denn auch hier wurde die Bezeichnung amputiert.

Der gelbe Streifen bietet zumindest eine gewisse Kontinuität, was die Farbgestaltung angeht, aber das eigentliche visuelle Design hat sich drastisch geändert - am deutlichsten sichtbar in der Verkleinerung der Überschriften und dem Wegfall der blauen Farbe für die Links.

Veränderungen der Funktionen gibt es zuhauf:

• statt zwei Hauptmeldungen mit kleinen Illustrationen gibt es jetzt eine Hauptmeldung mit grösserem Bild;
• der news.context-Bereich im unteren Teil des Bildschirms ist weggefallen;
• zusätzliche tertiäre Überschriften unter den sekundären Meldungen;
• Kolumnisten - und ihren Fotos - wird mehr prominenter Platz eingeräumt;
• die Videos werden weniger prominent dargestellt;
• die Standardeinstellung der Suchfunktion wurde geändert: statt umfassender Suche jetzt einfache Suche mit einer optionalen erweiterten Suche;
• Zeitangaben sind nicht mehr absolut ("4.10.2002, 13:46 Uhr PDT"), sondern relativ ("vor 1 Stunde, 17 Minuten") und nun in grau gehalten (für Websites, die sich oft aktualisieren, sind die relativen Zeitangaben besser, da die Nutzer dann nicht mehr in ihre Zeitzone umrechnen müssen);
• der Zeitpunkt der letzten Aktualisierung ist besser sichtbar (passend zum Wechsel von absoluten auf relative Zeitangaben);
• die Nutzer haben die Möglichkeit, Meldungen abzuspeichern;
• eine neuer Bereich "Get Up to Speed" ("Schnellzugriff") ist hinzugekommen.
  Hier erkennt man, dass sich die beiden Screenshots nur auf den ersten Blick ähneln. Wenn man sie tatsächlich nutzt, scheinen sie eher verschieden als ähnlich zu sein.

2011/2012: wenig Veränderung (Beispiel: Aetna)

Die Farben des Introbereichs sind deutlich anders und es gibt ein neues Logo, aber ansonsten sind diese beiden Startseiten-Designs ziemlich gleich. Beide sind in vier Bereiche unterteilt - Navigationsleiste, Introbereich, Nachrichten und detaillierte Navigation -; Grösse und Inhalte der Bereiche waren in beiden Versionen etwa gleich.

Beim Nutzen der Seiten sind dann aber doch einige Veränderungen erkennbar.

Ein eher unwichtiges Beispiel ist die Schaltfläche "Get a quote", die von rechts nach links verlegt wurde. Ausserdem erschien in 2012 ein rätselhaftes Plus-Zeichen neben dem Logo. (Beim Klick darauf erscheint die Nachricht "Wir haben ein neues Aussehen" mit einem Link zu weiteren Informationen; es wäre besser gewesen, dies in den kleineren Nachrichtenbereich zu verlegen und auf die komische Plus-Grafik zu verzichten.)

Wichtiger sind dagegen die drastischen Veränderungen, welche die Direktlinks zu den wichtigsten Bereichen durchlaufen haben, die sich links im Introbereich befinden.

2011:

• Aetna Navigator Member Log In
• New Members: Register
• Find a Doctor
• Small Business Owners
• Buy Health
• Insurance

2012:

• Find a Doctor
• Get a Form
• Learn about Health Insurance
• Contact us
• Log In to Aetna Navigator (hier sind die Worte "Log In" hervorgehoben)
• Register now to
  • Get an ID card
  • Get Coverage & Benefits Information
  • Get Cost Estimates
  • Complete a Health Assessment

Find a Doctor war der einzige, der unverändert geblieben ist (nur die Platzierung ist anders). Die neue Log-in-Funktion ist eine eindeutige Verbesserung; es ist besser, informative Stichwörter zu verwenden als den eigenen Firmennamen.

Ausserdem wurden die Links zu den chinesischen und spanischen Sprachversionen entfernt. Ob das gut oder schlecht ist, hängt von der Anzahl der Nutzer ab, die diese Sprachen brauchen. Die Version von 2011 hatte die Sprachwahl-Option an einen ungewöhnlichen Ort der Seite verbannt (rechts unten, bei den meisten Monitoren unterhalb der Bildschirmkante per Stand 2011).

Das ist ein gutes Beispiel, warum es gefährlich sein kann, sich nur auf Website-Analysen zu verlassen, wenn es darum geht, den Wert einer Funktion zu bestimmen. Die Sprachwahl-Option wurde 2011 wahrscheinlich wenig verwendet und fiel darum im nächsten Jahr ganz weg. Vielleicht hätten aber mehr Menschen diese Funktion verwendet, wenn sie an der dafür üblichen Stelle platziert worden wäre (rechts oben).

Wachsende Stabilität im Webdesign

Die folgende Grafik zeigt die durchschnittliche Veränderung in meiner jährlichen Sammlung von Startseiten-Screenshots im Vergleich mit den gleichen Startseiten des vorigen Jahres.

Der Trend ist deutlich: grosse Veränderungen in den frühen Jahren des Internet, ein Absinken zur Zeit der Dotcom-Blase und eine Stabilisierung unterhalb von 45% in den letzten Jahren.

Natürlich ist die Kurve nicht glatt, da sie auf der Einschätzung von drei Dingen basiert: der Anzahl der Designelemente, die jedes Jahr verändert werden; der Gewichtung dieser Elemente und dem Ausmass der Veränderung, das sie durchgemacht haben. Es gibt aber keinen Zweifel am grossen Ganzen: das Webdesign stabilisiert sich.

Das ist eine gute Nachricht, denn die Nutzer hassen Veränderungen. Die Menschen haben es gerne, wenn die Dinge so funktionieren, wie sie es gewohnt sind. Das langsamere Tempo gibt den Designteams auch die Möglichkeit zur Reflektion und Forschung, bevor sie Veränderungen vornehmen. Schau hin vorm Sprung! So ist die Wahrscheinlichkeit höher, dass die Veränderungen im Design erfolgreich und profitabel sein werden.

Jährliche Veränderungen von etwa 40% entsprechen einer kompletten Neugestaltung alle drei Jahre (drei Jahre, nicht zweieinhalb, weil manche Dinge mehrfach verändert werden, bevor man im endgültigen Design angekommen ist). Der Fortschritt ist ganz sicher nicht stehen geblieben. Wir müssen Websites immer noch verbessern; das wird deutlich, wenn man die vielen sichtbaren Verbesserungen und Experimente betrachtet, die auftauchen, wenn man Websites über einen längeren Zeitraum hinweg verfolgt.

 

© Deutsche Version von Jakob Nielsens Alertbox. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.