Der Usability-Experte Jacob Nielsen schrieb vor mehr als 3 Jahren in seiner Alertbox über das Thema „Screen Resolution and Page Layout“ und stellte hier heraus, dass man „heutzutage“ seine Website für eine Bildschirmauflösung von 1024×768 optimieren sollte. Welche Bildschirmauflösung derzeit die Aktuelle ist, kann sehr gut an öffentliche Statistiken und natürlich an den Web-Statistiken des Kunden abgelesen werden. Letzteres sollte natürlich vorgezogen werden. Die Grundaussage in Nielsen’s Artikel ist, dass die Website fehlerfrei dargestellt werden muss, auch wenn diese mit einer kleinen Bildschirmauflösung betrachtet wird. Das Layout der Website muss sich also an die Bildschirmauflösung anpassen.

Kriterien nach J. Nielsen für das Seitenlayout

Doch allein mit der Wahl der richtigen Bildschirmauflösung ist es nicht getan. Es gibt nach Jacob Nielsen drei wesentliche Kriterien, die für die Darstellung unbedingt sichergestellt werden sollten:

• Initial visibility: Dies ist der sichtbare Bereich auf dem Bildschirm des Besuchers, in dem alle Schlüsselinformationen der Website bereitgestellt werden müssen. Das bedeutet im Klartext: Surfen ohne horizontales Scrollen.
• Aesthetics: Ist die Darstellung und das Layout der Website gewahrt, wenn die Auflösung stark variiert? Ist die grundlegende Gestaltungsästhetik sichergestellt? So darf zum Beispiel der Abstand zwischen Bild und Text oder der Abstand zwischen zwei Spalten nicht variieren.
• Readability: Ist der Text, trotz variierender Auflösung noch gut lesbar? Ist beispielsweise bei Spalten der “width” Parameter definiert?

Richtige Betrachtung der “Auflösung”

Was Nielsen hier richtigerweise gut ausformulierte, stellt allerdings nicht genügend das eigentliche Problem heraus oder gibt Handlungsempfehlungen, wie die obigen Kriterien sichergestellt werden können. Denn im Grunde muss bei Betrachtung der Auflösung unterschieden werden nach:

• Bildschirmauflösung,
• Browser-Fenstergröße (actual browser size) und
• Content Area

Jasper Rønn-Jensen formulierte diese wichtige Feststellung in seinem Artikel “Design for Browser Size — Not Screen Size“. Ferner verdeutlicht er, dass für die Gestaltung einer Website die Bildschirmauflösung weniger bedeutend ist (ganz im Gegensatz zu Nielsen). Aus seiner Sicht ist die Browser-Fenstergröße entscheidend, was aus meiner Sicht auch die richtige Betrachtung ist.

Jasper begründet dies damit, dass die Größe des Browserfensters meistens geringer ist als die tatsächliche Bildschirmauflösung des Users. Mac-User wissen, was er meint, denn auf dem Mac gibt es keine Funktion zum Maximieren der Fenster, wie bei Windows. Somit ist zum Beispiel mein Browser Fenster beim Surfen bei einer Auflösung von 1440×900 px nie maximiert. Weiterhin müssen von der Browser-Fenstergröße die horizontale und vertikale Scrollbar sowie die Symbolleiste des Browsers abgezogen werden. Erst danach erhält man die Content Area, für die die Website gestaltet werden muss.

Content Area bzw. Actual Browser Size

Und an diesem Punkt wird es interessant! Wie kann man nun die Content Area bei den vielen verschiedenen Browsern ermitteln? Jasper Rønn-Jensen hat Durchschnittswerte für Scrollbar, Statusleiste und Symbolleiste ermittelt und auf dieser Basis die Content Area berechnet. Die folgende Tabelle zeigt – neben der Content Area pro Bildschirmauflösung – dass immer seltener das Browserfenster bei steigender Bildschirmauflösung maximiert wird:

Zusammenfassung

Im Grunde ist es aus meiner Sicht wichtig sicherzustellen, dass sich eine Website an die Fenstergröße der Browser anpasst und der User nicht nachhelfen muss, um alles lesen zu können (durch Maximieren des Fensters oder durch Scrollen). Um hier das Optimum sicherzustellen, sollte man sich an obige Tabelle von Jasper orientieren.

 
         

Die User Experience einer interaktiven Anwendung setzt sich aus dem Nutzen (engl. Utility), der Nutzbarkeit (engl. Usability) und der Nutzungsfreude (engl. Joy of Use) zusammen, wie in Abbildung 1 dargestellt.

Abbildung 1: User Experience

Utility, Usability und “Joy of Use” gelten immer gleichzeitig zu jeder Zeit mit der gleichen Relevanz.

Die drei Komponenten der User Experience lassen sich sehr gut erklären durch die Aufgliederung in einzelne Bestandteile. Diese Bestandteile wollen wir wie folgt kurz erläutern:

Usability – Nutzbarkeit:

-        Konsistenz

Von Konsistenz spricht man, wenn vergleichbare Sachverhalte stets in derselben Art dargestellt sind und wenn sie auf vergleichbare Nutzereingaben und vergleichbare Situationen stets in derselben Art reagieren.

Beispiel: Das Logo ist konstant oben links in der Anwendung platziert.

-        Nachvollziehbarkeit

Nachvollziehbarkeit ist gewährt, wenn dem Nutzer zu jeder Zeit vermittelt wird, welche Eingaben in welcher Art und Reihenfolge notwendig sind, um den aktuellen Zustand der Anwendung zu erzeugen.

-        Kontextsensitivität

Unter Kontextsensitivität versteht man, wenn die umgebende Situation registriert und diese zusätzlich zu den Nutzereingaben für die Ausgabe von Daten berücksichtigt wird.

Beispiel: Bei der Suche nach Kaminöfen in Google, finden sich im Suchergebnis lokale Ergebnisse wieder - passend zum Standort des Benutzers.

-        Selbstbeschreibungsfähigkeit

Liegt vor, wenn dem Nutzer die Möglichkeit gegeben wird zu jeder Zeit die Anzahl und die Art der möglichen Eingaben und die daraus folgenden Ausgaben der interaktiven Anwendung anzuzeigen.

-        Fehlertoleranz

Eine hohe Fehlertoleranz ist gegeben, wenn offensichtlich fehlerhafte Eingaben durch den Nutzer ohne negative Auswirkungen auf die von ihm beabsichtigte Art der Nutzung der Anwendung bleibt.

-        Individualisierbarkeit

Wenn der Nutzer aus mehreren möglichen Arten der Präsentation, der Interaktion oder des Inhalts auswählen kann, um seine Anforderung zu erfüllen.

Utility – Nutzen:

-        Relevanz

Wenn die Anwendung in der Lage ist, die konkreten, persönlichen Anforderungen des Nutzers zu erfüllen.

Beispiel: Der Nutzer sucht einen Logistiker, dann ist die Anwendung von Kühne und Nagel in dem Moment relevant.

-        Vollständigkeit

Wenn die Anwendung in der Lage ist, alle in einem definierten oder allgemein akzeptierten Zusammenhang stehenden Anforderungen des Nutzers zu erfüllen.

-        Integration

Wenn die Anwendung die Anforderungen des Nutzers, unter Berücksichtigung von anderen vom Nutzer verwendeten interaktiven Anwendungen, erfüllt.

Beispiel: Bestimmte Datenformate einer anderen Anwendung können weiterverarbeitet werden, wie z.B. das Uploading über ein Webinterface von einer csv Datei mit Kontaktdaten aus Excel.

-        Aktualität

Wenn die Anwendung die Anforderung des Nutzers gemäß dem letzten Stand des allgemeinen Wissens erfüllt.

-        Korrektheit

Wenn die Anwendung die Anforderungen des Nutzers in einer gesellschaftlich oder wissenschaftlich anerkannten Form erfüllt.

-        Kooperation

Wenn die Anwendung in der Lage ist, den Nutzer bei der Erfüllung seiner Anforderungen proaktiv zu unterstützen.

Beispiel: Die Anwendung von Kühne und Nagel zeigt verwandte Themen an.

Joy of Use – Nutzungsfreude:

-        Innovation

Wenn neuartige oder bisher unbekannte Möglichkeiten zur Dateneingabe angeboten werden und wenn neuartige oder bisher unbekannte Formen der Datenausgabe genutzt werden.

-        Symbolik

Wenn die Anwendung in der Lage ist, persönlichen Status und Gruppenzugehörigkeit, persönliche Überzeugung und Einstellung sowie persönliche Erinnerungen des Nutzers darzustellen.

-        Exklusivität

Wenn die Anwendung wenigstens zu einem Teil nur einer eingeschränkten Gruppe von Nutzern zugänglich ist.

Beispiel: Anwendungen in Intranets und Extranets.

-        Herausforderung

Wenn die Anwendung unerwartete, überraschende und unbekannte Reaktionen im Rahmen der Fähigkeiten des Nutzers neue Möglichkeiten und Perspektiven der Interaktion offenbart und anbietet.

-        Vertrauenswürdigkeit

Wenn das Nutzungsrisiko für den Nutzer soweit wie möglich minimiert wird.

-        Personalisierbarkeit

Wenn der Nutzer mittels eigener, nicht allgemein zur Verfügung stehender Mittel seinen persönlichen Vorlieben entsprechend anpassen kann.

Studie – An welcher Position wird was erwartet

In einer Studie hat Michael Bernard geprüft, an welcher Position im Layout einer Website die Nutzer bestimmte funktionale Elemente erwarten. Für den folgend abgebildeten Test hat er ein Browserfenster in ein Raster mit 7×6 quadratischen Flächen eingeteilt. Die Studie zeigt, dass die verschiedenen Elemente an genau den Stellen erwartet werden, an denen sie auch auf der Mehrzahl der Website zu finden sind. Bernard schliesst daraus, dass es bei der Neuentwicklung einer Website sinnvoll ist, diese Standards einzuhalten, da die Nutzer sonst verwirrt werden könnten und die Usability der Website darunter leiden würde.

User ExpeGlobal Expectations of Users´Mental Modelsrience

Je dunkler die Farbe einer Fläche, desto größer der Prozentsatz der Nutzer, die an dieser Stelle das jeweilige Element erwarten. Für die Kühne und Nagel Anwendung zeigt diese Studie, dass die Platzierung des Logos oben links beibehalten werden sollte. Gleiches gilt auch für die Platzierung des Hilfe Buttons bzw. in dem Fall Kühne und Nagel der Suchfunktion oben rechts.

[Abbildung 1] Arndt, Henrik. „Integrierte Informationsarchitektur“.  Heidelberg 2006, S.85

 
         

Einführend ein Beispiel aus dem Alltag: Wie oft ist man schon mit der Absicht etwas einzukaufen, in einen Laden gegangen und frustriert mit leeren Händen herausgekommen, weil man nicht das gefunden hat, wonach man suchte? Und weil der Verkaufsraum schlichtweg unübersichtlich war?[1]

Hilfestellungen wie Schilder, Wegweiser, Informationsstände und Lagepläne vereinfachen die Orientierung im Verkaufsraum und lassen das gewünschte Produkt schneller finden. Nach dem erfolgreichen Kauf verlässt man den Laden mit einem zufriedenen Gefühl und der Gewissheit zurückzukehren.

Die Problematik der Orientierung lässt sich ebenso auf Websites übertragen, dem virtuellen Verkaufsraum. Eine sinnvolle Navigation, Suchfunktion, schnell ladende Seiten und Inhalte, auf die einfach zugegriffen werden kann, die schnell überflogen werden können und leicht verständlich sind – das sind die Dreh- und Angelpunkte, die den Besuch zu einem mühelosen und erfreulichen Erlebnis machen und die Webseite als benutzerfreundlich in Erinnerung behalten lassen.[2]

Um dies zu gewährleisten ist notwendig, die „Sprache des Users“ die sogenannte „User language“ zu sprechen.

Was ist Usability

Der Begriff Usability steht im Zusammenhang mit einer Webseite für ihre Gebrauchstauglichkeit beziehungsweise für die Benutzerfreundlichkeit der Anwendung.

Der Gestaltungspsychologe Prof. Dr. Thomas Wirth formuliert und erklärt Usability im Zusammenhang mit der Anwendungsgestaltung u.a. durch die folgenden zwei Gesetze:

„Das Gesetz der Einfachheit.“

Bei Objekten mit verschiedenen Zusammensetzungsinterpretationen wird jeweils die einfachste gewählt (KISS: „Keep-It-Simple-and-Stupid”)

„Das Gesetz der Ähnlichkeit“.

Förmlich oder farblich ähnliche Objekte werden vom Gehirn gruppiert.[3]

An diesem Punkt wird die Relevanz der Wiedererkennung einer Webseite und deren Elemente deutlich.

Die Gestaltung einer Webseite wird von vielen Faktoren beeinflußt. Diese Kriterien sind zum einen konkret nachprüfbar, können zum anderen aber teilweise nur „gefühlt” werden.

Grundsätzlich sollte der Nutzer jederzeit folgende Fragen in der Anwendung beantworten können, gemäß den Nievergeltschen[4] Fragen:

• Wo bin ich?
• Worum geht es bei dieser Website? Was kann ich hier tun?
• Welche Inhalte gibt es mir?
• Wie bin ich hierher gelangt?
• Wohin kann ich gelangen und wie kann ich dorthin gelangen?

Eine Anwendung sollte im Idealfall für alle zugänglich und benutzbar sein, hierbei spielen Accessability und Barrierefreiheit, also die Möglichkeit des uneingeschränkten Zugangs aller Nutzer, unabhängig von körperlichen oder technischen Möglichkeiten, eine große Rolle.

Ebenso wichtig neben der Barrierefreiheit ist die Berücksichtigung der kulturellen Differenzen. Bei kulturübergreifenden Zielgruppen ist es daher elementar, sich der Verschiedenartigkeit bewusst zu sein und die Websites gegebenenfalls an die einzelnen Kulturen anzupassen. Für Kühne und Nagel bietet sich die „Globale Strategie“ nach „Hofstede“ an, die einen Webauftritt für alle Länder mit komplett identischen Websites und nur Englisch als globale Sprache umfasst. Der Vorteil ist, dass eine geringe lokale Verantwortung und hohe globale Integration gegeben ist. Dies ist die einfachste Art der Anpassung bei interkulturellem Auftreten.

Drei-Klick-Regel – Usability-Design

Die „Drei-Klick-Regel“ schreibt vor, dass maximal drei Mausklicks erforderlich sein sollten, um die Inhaltsbereiche einer Website zu erreichen[5]. Begründet wird diese Regel zum einen damit, dass Nutzer häufig aufgeben, wenn sie nicht innerhalb weniger Schritte erfolgreich sind.[6] Zum anderen beobachten viele Usability-Spezialisten, dass Anwender auf tief strukturierten Sites schnell die Orientierung verlieren. Bernard erklärt dies mit der begrenzten Kapazität des menschlichen Kurzzeitgedächtnisses, das verschachtelte Strukturen schlecht behalten könne.

Lesen Sie im nächsten Teil: Was ist User Experience und an welcher Position sollten die einzelnen Werkzeuge auf der Internetseite dargestellt sein.

[2] Kaiser, Shirley. “Projektfahrplan für erstklassige Websites“. Heidelberg 2007, S.67

[3] Prof. Dr. Thomas Wirth´s. Gestaltungspsychologie: http://www.kommdesign.de/texte/gestaltpsychologie1.htm. 16.05.2009

[4] Arndt, Henrik. „Integrierte Informationsarchitektur“.  Heidelberg 2006, S.157

[5] Bernard 2003, „How can I make my website’s structure more navigable?“

[6] Zimmermann 2000, S. 98