Eine erfolgreiche Website – Teil 2 „Usability“


Das Wort Focus als Auszug aus einem Wörterbuch

In diesem Artikel unserer Serie „eine erfolgreiche Website“ geht es um die Gebrauchstauglichkeit (Usability) eines Internetauftrittes.

In den letzten Jahrzehnten sind Websites immer komplexer geworden. Anfängliche Bildkompositionen, wie sie in den 90ern oftmals der Fall waren, wurden abgelöst von technischen und gestalterischen Hochleistungen, die mit dutzenden Unterseiten ganze Unternehmen darstellen müssen. Mit dem Anstieg der Komplexität rückten vor allem die Nutzer, also die potentiellen Kunden, in den Vordergrund. Es wurden zwei Aspekte herausgestellt, die für einen Nutzer relevant sind, um ihn möglichst lange auf der Internetseite halten zu können. Die Schönheit und die Gebrauchstauglichkeit eines Designs. Während die Schönheit, je nach Trend oder Corporate Design, angepasst und verändert werden muss, wird die Gebrauchstauglichkeit anhand von psychologischen und analytischen Grundsätzen festgelegt.

Die Gebrauchstauglichkeit wird schon im ersten Jahrhundert v.C. erwähnt und wurde damals bereits Utilitas (Brauchbarkeit, Tauglichkeit oder auch Nützlichkeit) genannt.  So schreibt der römische Architekt Vitruvius in einem seiner Bücher über die „Utilitas“ als eine von drei Grundsätzen und definiert sie als die Brauchbarkeit und Tauglichkeit eines Designs im Bezug auf dessen Nutzer.  Seitdem Vitrivius die Gebrauchstauglichkeit das erste Mal erwähnte, hat sich viel geändert. Unzählige theoretische und praxisorientierte Thesen wurden entwickelt und auf analytischer und erfahrungsmäßiger Ebene geprüft.

Schemata

Wie wir im vorherigen Artikel dieser Serie gelernt haben, ist der Mensch ein Gewohnheitstier. Umso wichtiger ist es, eine übergreifend einheitliche Struktur auf dem kompletten Internetauftritt beizubehalten, damit der Nutzer sich nicht auf jeder Unterseite neu orientieren muss und durch die Anstrengung die Lust am Weitersurfen verliert.

Um einen einheitlichen Aufbau zu entwickeln, der unseren Besucher zusätzlich dazu bringt, sich auf die Elemente zu fixieren, die für uns wichtig sind, muss man folgende Dinge wissen: Ein Besucher fängt nicht wie bei einem Buch oben links an zu lesen und stoppt dann unten rechts am Ende der Seite, sondern er scannt mit den Augen das Erscheinungsbild, legt Schwerpunkte fest und geht dann erst ins Detail. Mit Gestaltungselementen wie Bildern, Kontrasten und Wiederholungen lässt sich dieser Blick gezielt lenken – man spricht von der Entwicklung eines Flows.

Grafische Darstellung des AIDA Prinzip

Ein bewährter Aufbau, um zum Beispiel ein Produkt im Internet zu vermarkten, ist die AIDA-Methode. Sie steht für Attention (Aufmerksamkeit) – Interest (Interesse) – Desire (Verlangen) – Action (Tätigkeit).  Genauer könnte dies so aussehen: Durch ein emotionen-weckendes Bild oder eine aussagekräftige und auffällige Headline wird die Aufmerksamkeit des Kunden gewonnen, um dann durch das Aufzählen von Vorteilen und Leistungen, die der Kunde durch Sie oder ihr Produkt bekommt, sein Interesse zu wecken. Das Verlangen nach dem Produkt zu wecken, erfordert einen eher analytischen Ansatz. Ziel ist es, dem Kunden durch den Aufbau der Seite jeden Wunsch von den Augen abzulesen und keine Fragen offen zu lassen. Wenn auch dies erfolgreich geschafft ist, ist ihr Kunde bereit, das Produkt zu kaufen. Damit er nicht doch im letzten Moment abspringt, ist es wichtig, den Kaufprozess so einfach wie möglich zu gestalten.

Ladezeiten

Laut einer Studie von gomez.com und akamai.com verlassen 25% der Nutzer bei einer Ladezeit von über 5 Sekunden die aufgerufene Seite, ohne sie überhaupt erst gesehen zu haben. Um dies zu vermeiden, gibt es grundlegende und weiterführende Möglichkeiten, welche die Ladezeit verringern.

Aber zuerst einmal müssen wir klären, woraus eine Internetseite besteht. Eine Internetseite besteht aus vielen einzelnen Dateien. Das Grundgerüst für den Aufbau der Seite inklusive aller Texte bringen die HTML-Dateien mit. Für das eigentliche „Webdesign“, also die Gestaltung und das Aussehen der Internetseite, sind die CSS-Dateien notwendig. Und abschließend gibt es die verschiedenen Scripte (Javascript), die zum Beispiel dafür sorgen, dass Bilder in einer Diashow angezeigt werden.

All diese Dateien werden beim Aufrufen der Seite geladen und versuchen sich fast gleichzeitig durch die kleine Internetleitung zu zwängen. Doch weil wir keine Möglichkeit haben, die Internetleitung unserer Besucher zu vergrößern, müssen wir an „unserem“ System Optimierungen und Vereinfachungen vornehmen, die dafür sorgen, dass die Dateien möglichst schnell und geordnet durch die Leitung fließen. Als erstes kümmern wir uns um die Bilder auf der Seite. Je größer ein Bild ist, desto länger braucht es, um bei unserem Besucher angezeigt zu werden.  Deswegen hier folgende Tipps, damit die Bilddatei so klein wie möglich wird, ohne einen großen Qualitätsverlust zu erleiden:

  1. Die Bilder sollten von der Pixelgröße nur so groß sein, wie sie im Endeffekt auf der Website angezeigt werden. Werden die Bilder erst durch Angaben in unserer HTML-Datei skaliert, kostet das zusätzliche Ladezeit.
  2. Fotos sollten immer im jpeg-Format gespeichert werden, da dieses Format über die größte Komprimierungsstufe verfügt. Außerdem sollte darauf geachtet werden, dass Bilder mit einem Bildbearbeitungsprogramm unter dem Menüpunkt „Für Web speichern“ gespeichert werden. Dort haben Sie nämlich meist zusätzlich die Auswahlmöglichkeit, die Bilder mit einer Komprimierungsstufe von zum Beispiel 80% zu speichern. So wird das Datenpaket noch enger geschnürt und in Folge dessen auch schneller beim Benutzer angezeigt.
  3. Bilder für Icons können in einer großen Bilddatei zusammengefasst werden, einem so genannten Sprite. Durch die Zusammenfassung muss sich nur ein Bild durch die Leitung zwängen und nicht viele kleine. Zudem ist die Datenmenge einer großen Datei geringer als die gleiche Anzahl Grafiken auf Einzeldateien geteilt.

Der zweite Punkt, mit dem wir eine Verbesserung der Ladezeiten erzielen können, bezieht sich einmal auf all unsere CSS-Dateien und einmal auf all unsere Javascript-Dateien. Da durch viele externe Erweiterungen oftmals auch separate CSS- beziehungsweise Javascript-Dateien mitgeliefert werden, sammelt sich schnell eine Menge kleiner Dateien an, die beim Aufruf der Seite alle gleichzeitig geladen werden wollen. Hier gilt das gleiche wie für unsere kleinen Icons. Versuchen Sie jeweils alle CSS-Dateien und alle Javascript-Dateien in einer Datei zusammenzufassen.

Blicken wir nun mit einer etwas technischeren Sicht auf unsere zusammengefasste CSS-Datei. Da innerhalb dieser Datei Eigenschaften an Unterelemente vererbt werden, kommt es am Ende der Programmierung oft zu ungewollten Dopplungen, die sich aber nicht auf das Design auswirken. Diese gilt es ausfindig zu machen und dementsprechend zu löschen. Denn jedes zusätzliche Zeichen in unserem Quellcode vergrößert die Datei und verzögert die Ladezeit.

Der nun folgende Punkt bezieht sich auf diese Minimierung der Zeichen. Da auch Leerzeichen Speicherplatz in Anspruch nehmen, sollten diese aus unserer CSS-Datei herausgelöscht werden. Dieser Prozess sollte den Abschluss der Programmierung bilden, da durch die Minimierung der Quellcode schwieriger zu lesen wird und gegebenenfalls Anpassungen einige Zeit länger brauchen, als es ohne die Minimierung der Fall gewesen wäre.

Übersichtlichkeit

Mit dem Medienwandel und der stetigen Diversifizierung von Endgeräten ist das pixelgenaue Designen zum Abschnitt der Vergangenheit geworden. Um dem Nutzer einen bestmöglichen Überblick unabhängig von der Bildschirmgröße, die ihm zu Verfügung steht zu vermitteln, müssen wir bewusst Veränderungen am Design in Kauf nehmen.  Dazu gehört zum Beispiel klickbare Elemente für den Benutzer an einem Touch-Gerät leichter zugänglich und erkennbarer zu gestalten, als es auf einem großen 24" Monitor der Fall sein muss. Außerdem sollte sich die Website der Bildschirmbreite anpassen, sodass kein zusätzliches horizontales Scrollen auf kleineren Geräten notwendig ist. Fester Bestandteil der dynamischen Breitenanpassung ist das Skalieren von Bildern. Egal ob als Hintergrundgrafik im CSS oder direkt in der HTML Datei eingebunden, die Bilder müssen sich den verschiedenen Bildschirmgrößen anpassen, damit sie auf jedem Gerät gut zu erkennen sind.

Ein letzter wichtiger Punkt ist die Verwendung von intuitiven Icons, die dem Besucher auch ohne weitere Beschriftung verraten, was hinter ihnen steckt. Gerade auf Smartphones ist der zur Verfügung stehende Platz begrenzt und eine erklärende Beschriftung zum Beispiel für die Suche oder Navigation fällt zwangsweise weg. Schauen wir im Internet, stellen wir fest, dass gewisse Grafiken zum Standard geworden sind.

Beherzigt man diese grundlegenden Tipps zur Steigerung der Usability von Anfang an in seinem Projekt, ist es relativ einfach, mit geringer Ladezeit, einem geräteübergreifendem Design und einem gut entwickelten Flow seinen Kundenkreis zu erweitern beziehungsweise seine Verkaufszahlen zu steigern.