Usability Diplomarbeit

Usability im www. Redesign eines Webauftritts mit Hilfe von Usability Testing

Archiv für die 'Kap5 Content-Design' Kategorie

5 Content-Design

Erstellt von admin_usability am 12. April 2006

Nach dem Besuch einer Theatervorführung hört man oftmals wie großartig das Stück gewesen ist. Und nur selten wie großartig die Kostüme waren. Natürlich gehören schöne Kostüme zu einem großartigem Theaterstück und drücken letztlich die Visionen der Künstler und Regisseure aus. Das Gleiche gilt im Internet: Der User kommt wegen des Inhalts und nicht wegen dem Design und der visuellen Aufbereitung des Contents.

Blickverlaufsstudien (Eyetracking) des Poynter Instituts haben gezeigt, dass fast alle Benutzer zuerst auf den Text schauen, bevor sie Bilder und Grafiken näher betrachten. Von den ersten drei Augenfixierungen konzentrierten sich 78% auf die Texte. Dies zeigt, dass der textuelle Inhalt weit wichtiger ist als Fotos und Grafiken.

Im folgenden Zusammenhang sollen unter Content auch Bilder, Grafiken und Multimediaelemente verstanden werden, da diese durchaus zur Informationsvermittlung gehören können.
Die Qualität des Contents gehört neben dem Auffinden der Information und der Anordnung der Seiten (siehe Kapitel 6 Site Design) zu den wichtigsten Determinanten des Web Usability. Doch was heißt dies für die Aufbereitung der Texte für das Medium Internet?

Im vorangegangenem Unterpunkt Typografie ging es um die Leserlichkeit des Textes (engl. legibility), also die visuelle Qualität der Buchstaben, Wörter und Sätze. Nun soll die Lesbarkeit (engl. readability) von Texten im Web, also wie verständlich oder unverständlich der Inhalt geschrieben ist, behandelt werden.

Abgelegt unter Kap5 Content-Design | Keine Kommentare »

5.1 Schreiben im www

Erstellt von admin_usability am 11. April 2006

“The Internet will make every enterprise a publisher.”

Steve Case, chairman and CEO of AOL Time Warner

Dieses Zitat zeigt vereinfacht das Grundprinzip des World Wide Webs: Jede Person, jede Institution oder jedes Unternehmen kann auf einfachste Weise im Internet zum Autor werden. Es besteht ein großer Anreiz ein Dokument ins Web zu stellen, da es jeder auf der gesamten Welt abrufen kann. Kombiniert mit dem System von Links war dies der Grundgedanke von Tim Berners-Lee, dem Erfinder des World Wide Webs.

Aufgrund der im letzten Kapitel angesprochenen Schwierigkeiten beim Lesen auf dem Bildschirm und der Tatsache des Scannens unterscheidet sich das Schreiben eines Textes für ein Online-Medium von dem Schreiben für ein Printmedium. Dies wird meist beim Schreiben eines Onlinetextes nicht berücksichtigt bzw. dem Schreiber ist sich der Unterschiede nicht bewusst.

Grundsätzlich sollte der Inhalt auf drei Ziele ausgerichtet sein: den Leser möglichst leicht die Einführung ins Thema zulassen, die Orientierung erleichtern und letztlich Informationen an den Leser weitergeben. Um dies zu erreichen ist es nötig, den Inhalt interessant und dennoch einfach zu gestalten. Zusätzlich sollte die Zielgruppe und deren intendierte Aufgabenstellung unterstützt werden. Jakob Nielsen spricht hier von einer customer-focused language.

Dazu gehört auch eine leicht verständliche Sprache sowie die Vermeidung übertriebenen Fachjargons. Mit der steigenden Anzahl der unerfahrenen Nutzer steigt auch der Anspruch Texte zu schreiben, die von der Mehrheit verstanden werden. Fast immer besteht die Gefahr im eigenen Fachjargon hängen zu bleiben. Im gesamten Usability-Rahmen sollte hier besonderes Augenmerk auf die Zielgruppe gesetzt werden: Muss auf einer Seite für Großhändler der Begriff CPU nicht erklärt werden, so weiß nicht jeder PC-Interessent, dass damit der Prozessor des PCs gemeint ist. Auf diese Terminologie soll in Kapitel 6 noch näher eingegangen werden, wenn es um die Beschriftung von Links und Navigationselementen geht.

In die gleiche Kategorie von nicht optimierten Texten zählt der sogenannte Happy Talk des Usability-Experten Steve Krug. Darunter versteht er den Willkommenstext vieler Homepages, in dem meist keine sinnvollen Informationen weitergegeben werden und so nur den zur Verfügung stehenden Platz verschwenden. Auf vielen Seiten sieht man diese ‘Willkommen’-Meldungen, doch gelesen und gewürdigt werden sie selten. Die Seiteninhaber beachten nicht, dass der User keine Zeit hat zum Smalltalk und direkt zum Thema kommen möchte. Deshalb wird hier empfohlen, diese Art von Meldungen möglichst kurz zu halten und stattdessen eine Beschreibung des Inhalts zu liefern.

Eine allgemeine Regel für das Verfassen von Texten für das Internet lautet: Schreibe kurz und knapp! Aufgrund der Tatsache, dass Lesen am Bildschirm ungefähr 25% langsamer geschieht als auf dem Papier, scheint diese Regel äußerst plausibel. Nielsen empfiehlt Texte aus dem Printbereich bei einer Anpassung für das Web um ca. 50% zu reduzieren. Dies kommt ebenfalls dem Scannen der Informationen zu Gute. In einer Studie zusammen mit John Morkes wurde herausgefunden, dass 79% der Testpersonen den Inhalt der Seiten überflogen und nur wenige Personen Wort für Wort lesen.

Anhand eines Usability-Tests soll eine Optimierung für das Medium Internet veranschaulicht werden. Ein Text wurde fünfmal verschiedenartig aufbereitet. Morkes und Nielsen testeten die Usability der vier Texte im Vergleich zum Originaltext. Dabei wurde die Gebrauchstauglichkeit des letzten Textes um 124% verbessert. Messkriterien waren bei diesen Usertests die Zeit, die für eine Aufgabe benötigt wurde, die Fehleranzahl der falschen Antworten, Gedächtnisleistungen bzgl. späterer Wiedererkennung und die Seitenstruktur. Die nächste Seite zeigt die fünf verschiedenen Texte und deren Veränderung.

Abbildung 19: fünf Versionen eines Beipieltextes
Quelle: Nielsen (2000), S.105.

Text 1 stellt den Ursprungstext dar und wurde viermal verändert. Text 2 wurde um die Hälfte der Wörter gekürzt und zeigte eine Verbesserung von 58%. Text 3 wurde zur besseren Scannbarkeit umgeschrieben, was sich in der Listenaufzählung zeigt. Der vierte Text wurde in einer objektiven und nüchternen Sprache verfasst. Aus diesen drei Arten wurde der Text 5 kombiniert und zeigt die besten Ergebnisse.
Diese Studie zeigt, dass User knapp geschriebenen, leicht zu scannenden und objektiven Text bevorzugen.

Daraus resultieren drei Richtlinien:
1. Inhalt kürzen: Balance finden zwischen dem Beibehalten des sinnvollen und interessanten Teils des Textes und dem Kürzen von unnötigen Informationen.
2. Text scannbar machen: Hervorhebung von Schlüsselwörtern, Benutzung von Auflistungen, zusätzlichen Ãœberschriften und kürzeren Absätzen.
3. Objektive Sprache verwenden: Marketing-Sprache, Modewörter und Adjektive vermeiden, stattdessen aktive Sprache verwenden.

Vor allem die Befolgung den Text zu kürzen ist schwierig, da es sein kann, Detailinformationen vorzuenthalten und somit einen Teil der Besucher zu verlieren.
Wie man in den Usability-Tests von Nielsen und Morkes gesehen hat, stellt die Kürze der Absätze einen wichtigen Punkt dar. Ein weiterer Punkt ist der inhaltliche Aufbau der Texte. Um Dokumente für das Medium Web effizient und attraktiv für den Leser zu gestalten ist es wichtig, dass die Struktur der Texte, also die Art und Weise, in der Absätze angeordnet sind, webgerecht für den Bildschirm optimiert werden.
Somit sieht es aus, als ob das Web seinen eigenen Schreibstil sucht, der allerdings nahe dem der Nachrichtenjournalisten liegt. Eine aussagekräftige Ãœberschrift mit Schlüsselwörtern und ohne übertriebene Metapher sollte dem Besucher den ersten Anhaltspunkt geben, was ihn auf dieser Seite erwartet. Da der Webnutzer meist wenig Zeit hat sich durch ellenlange Seiten zu quälen, ist es wichtig die Hauptaussage kombiniert mit einem Ãœberblick im ersten Absatz eines Artikels zu bringen. Im Fachgebrauch wird dieser Teaser genannt. Der Leser kann selbst entscheiden, ob er weiterliest oder auf eine andere Seite wechselt.

In den folgenden Abschnitten können dann nach und nach Details beschrieben werden. Obwohl der Besucher die Hauptidee erfassen konnte, ist es ihm jederzeit möglich auszusteigen. Diesen Aufbau nennen die Journalisten die inverse Pyramide. Folgender Bericht der Online-Ausgabe der Tageszeitung ‘Die Welt’ soll dies verdeutlichen.

Abbildung 20: Die inverse Pyramide [AM 9]

Der Leser weiß durch die Ãœberschrift, dass Barrichello schneller als Ralf Schumacher war. Die Sub-Unterschrift sagt, dass Michael Schumacher Dritter beim Training zum Großen Preis von Österreich geworden ist. Im Teaser wird dies nochmals kurz zusammengefasst und schon erste Details preisgegeben, nämlich dass der Vertrag von Barrichello verlängert worden ist. In den folgenden Abschnitten werden weitere Hintergrundinfos wie Rundenzeiten und der Ausstrahlungstermin im Fernsehen bekannt gegeben.
Die Methode der inversen Pyramide trägt somit zwei webspezifischen Tatsachen Rechnung: Der User überfliegt den Text (scannt) und findet gleich am Anfang die relevanten Informationen. Dadurch ist es nicht unbedingt nötig nach unten zu scrollen, da die Hauptinformationen im oberen Teil des Bildschirms liegen.
Den meisten Online-Redaktionen ist dieses Vorgehen durchaus bewusst, sie können es allerdings schlecht umsetzen. So z.B. der folgende Artikel aus dem Online-Magazin Dr. Web.

Abbildung 21: Eine ‘falsche’ inverse Pyramide. [AM 10]

Einer Ãœberschrift wird ein Teaser nachgestellt, der das Wichtigste des Dokuments zusammenfasst. Der zweite Abschnitt wiederholt allerdings einen Großteil des Teasers, was zu einer unnötigen Leseverzögerung führt und kostbare Zeit raubt, falls der Leser über den Teaser hinaus liest. Die Wiederholung wurde im obigen Bild gelb eingefärbt.
Ein anderer Fehler wird oftmals durch den Vorspann eines Textes als Kurzfassung auf einer vorgeschalteten Seite gemacht. Das ist zwar einfach zu realisieren, aber dennoch nicht netzgerecht.
Die Redaktion von AOL Deutschland veröffentlichte auf den Wirtschafts-Seiten eine anscheinende Kurzzusammenfassung eines Berichtes und bringt exakt den gleichen Wortlaut auf der Folgeseite. Der Leser merkt unter Umständen nicht, dass er diese Informationen schon gelesen hat und erst im zweiten Abschnitt ihn neue Hintergrunddetails erwarten.

Abbildung 22: Wiederholung des Textes auf vor- und nachgeschalteter Seite [AM 11]

Der obere Screenshot zeigt die Nachrichtenseite und der untere die Detailseite. Gelb eingefärbt wurde der übereinstimmende Text.

Letztendlich sollte auf eine optimale Zeilenlänge geachtet werden. Usabilitytests haben herausgefunden, dass die Zeilenlänge keinen Einfluss auf die Lesegeschwindigkeit hat. Die Ergebnisse zeigten jedoch, dass die Versionen mit kürzeren Zeilenlängen denen mit längeren Zeilenlänge bevorzugt werden.
Bei der Einschätzung der Leseeffektivität wurde dagegen die Version mit längeren Zeilenlänge bevorzugt, wahrscheinlich da weniger gescrollt werden muss.
Aus diesen Studien geht eindeutig hervor, dass bei Dokumenten für den Bildschirm Zeilenlängen über den ganzen Bildschirm unbedingt vermieden werden sollten. Es bieten sich mittlere Zeilenlängen von ca. 65 bis 75 Zeichen als optimale Zeilenlänge.

Abgelegt unter Kap5 Content-Design | Keine Kommentare »

5.2 Glaubwürdigkeit

Erstellt von admin_usability am 10. April 2006

Eine Vergleichsstudie an der Universität von Ohio hat ergeben, dass Texte auf dem Bildschirm weniger glaubwürdig, überzeugend und schwerer zu verstehen sind als Texte auf Papier.

Glaubwürdigkeit ist somit ein weiterer Erfolgsfaktor einer Website. Der Verbraucher steht dem Problem gegenüber nicht alles glauben zu müssen was er liest und dementsprechend entscheiden kann, wo er welchen Artikel oder Dienstleistung erwirbt. Der Websitebetreiber muss sich also anstrengen einen möglichst glaubwürdigen und vertrauenserweckenden Eindruck zu hinterlassen. Dabei spielt die Usability einer Website eine übergeordnete Rolle.

Glaubwürdige Webseiten haben eine hohe wahrgenommene Vertrauenswürdigkeit in Verbindung mit einer hoch wahrgenommenen Fach- oder Sachkenntnis. Sobald einer dieser zwei Faktoren verletzt wird, sinkt die Glaubwürdigkeit.

Ein Forscherteam der Universität Stanford hat eine empirische Umfrage mit 1400 Testpersonen aus den USA und Europa durchgeführt und dabei gefragt, welche Faktoren die Wahrnehmung der Glaubwürdigkeit eines Internetangebotes steigern oder vermindern. Es wurden 51 Web Site Elemente in sieben Kategorien evaluiert und auf Grund dieser Ergebnisse weitreichende Empfehlungen für das Design eines Internetauftrittes ausgesprochen.

Folgendes Bild zeigt die Erkenntnisse:

 

 

Abbildung 23:Ergebnisübersicht einer Studie an Universität StanfordQuelle: Fogg et al. (2001a), Folie 8

Fünf Kategorien beschreiben Faktoren, die die Glaubwürdigkeit einer Internetseite steigern. Der dominanteste Faktor “Real World Feel” enthält solche Elemente, die zeigen, dass ein Unternehmen oder eine Person für den Auftritt verantwortlich ist und eine Interaktion zwischen Unternehmen und dem Besucher möglich ist. Schnelle Antwortzeiten auf Emailanfragen, Kontaktadressen und auch Fotos der Mitarbeiter erhöhen die Glaubwürdigkeit.

Der nächste Punkt betrifft die Usability, hier als “Ease of use” betitelt:

Es wurde für wichtig gehalten, dass eine Site professionell aussieht, eine sinnvolle Struktur hat, eine leicht nachvollziehende Navigation aufweist und schnell ladbar ist. Dies ist ein in dieser Arbeit bisher nicht erwähnter Grund, Zeit und Geld in die Usability einer Site zu investieren.
Ein weiterer positiver Faktor bezieht sich auf die Expertise, also das auf der Seite zur Verfügung gestellte Wissen. “Trustworthiness” bezieht sich auf das Vertrauen, das sich in Links von anderen Seiten oder auf die Empfehlung von Freunden zeigt. Der schwächste positive Einfluss auf die Glaubwürdigkeit besteht im “Tailoring”, der Personalisierung einer Seite. Dies zeigt sich, indem Bestätigungsmails nach einer Transaktion verschickt werden oder der Anerkennung, dass der Besucher schon einmal da war.
Dagegen wurden zwei Kriterien aufgestellt, die offensichtlich die Glaubwürdigkeit stören können. Der erste negative Faktor besteht in kommerziellen Elementen einer Website. So führen mehrere Werbebanner meist zu einer Unglaubwürdigkeit, wobei eine höchst kommerzielle Atmosphäre aufgebaut wird. Allerdings muss dies nicht immer der Fall sein , weit schwerer ist eine Vermischung von Inhalt und Werbung, da hier die Grenzen nicht mehr leicht zu erkennen sind.

Die schwerwiegendsten Fehler findet man unter der Kategorie “Amateurism”. Die Site hat keine eigene Topleveldomain, sondern ist bei Providern gehostet wie Aol oder Geocities, der Domainname passt nicht zum Angebot oder die Site besteht aus weniger als fünf Seiten. Kleinigkeiten wie Rechtschreibfehler und tote Links werden mit einer hohen Abwertung der Glaubwürdigkeit bestraft.

Letztlich ist eine seltene Aktualisierung des Inhalts ein Indiz für einen vernachlässigten und vom Betreiber nicht ernst genommenen Internetauftritt. Aufgrund dieser Wichtigkeit soll auf diesen Punkt näher eingegangen werden.

Abgelegt unter Kap5 Content-Design | Keine Kommentare »

5.3 Aktualität

Erstellt von admin_usability am 9. April 2006

Aktualität ist streng mit Glaubwürdigkeit und Vertrauen verbunden. Im Vergleich zu den herkömmlichen Kommunikationsmedien verfügt ein Webangebot über ein erheblich größeres Aktualisierungspotential, weil Änderungen ohne große Verzögerung schnell und einfach vorgenommen werden können. Dies zeigen zum Beispiel Börsenkurse oder Wettermeldungen.

Daraus resultiert gleichzeitig eine bestimmte Erwartungshaltung des Besuchers: Wenn Content ins Netz gestellt wird, geht der Besucher davon aus, dass dieser auch gültig und aktuell ist. Ebenso wird erwartet, veralteten Inhalt zu löschen oder nur in einem Archiv abrufbar zu machen.
Mittlerweile findet man auf den meisten Seiten ein Änderungsdatum im Kopf oder dem Fuß der Seite. Wird allerdings ein weit zurückliegendes Datum angegeben, wird der Besucher selten eine Email schicken oder ein Formular ausfüllen, da davon ausgegangen werden kann, dass man keine Antwort erhält. Andere Möglichkeiten zur Präsentation eines Datums sind etwa Links wie “Neu auf diesem Server”, “News” oder “Pressemitteilungen”.

Eine Umfrage vom Dezember 2001 unter 700 Mittelstands- und Großunternehmen zeigte, dass ein geringer Aktualitätsgrad ein typisches Erscheinungsbild ist. Nur 27 Prozent der befragten Firmen-Websites präsentieren Content der jünger als einen Monat ist. Ãœber die Hälfte der Verantwortlichen gab zu, vor mehreren Monaten zuletzt aktualisiert zu haben. Als wichtigster Grund hierfür wurde die fehlende Zeit (41%) angegeben. Eine ähnliche Studie fand heraus, dass zu hohe Personalkosten zur regelmäßigen Bearbeitung der Website ein Update verhindern. Als Konsequenz sollen in Zukunft die Inhalte eingeschränkt werden. Ein verringertes Informationsangebot ist dagegen keine adäquate Lösung. Passender wäre ein geeignetes Content-Managementsystem zur dynamischer Aufbereitung der Site und die Einsicht, dass aktueller Inhalt wichtig für das Image und die Präsentation der Unternehmung ist.
Dagegen gibt es einfache Möglichkeiten die fehlende Zeit oder Ressource zur Aktualisierung zumindest zu verkündigen. Auf KommDesign.de findet man bspw. im Mai 2002 auf der Homepage einen Hinweis, dass bis auf bestimmte Zeit keine neuen Beiträge oder Newsletter veröffentlicht werden.

Abbildung 24: Ein Hinweis, dass zur Zeit keine Seitenupdates möglich sind. [AM 12]

Dies ist eine einfache und zweckmäßige Art dem Besucher mitzuteilen, dass eine Person oder eine Unternehmung hinter dem Auftritt steht, diesen ernst nimmt und die Kommunikation mit dem Besucher nicht scheut.
Um Kommunikation zwischen dem Seitenbetreiber und dem Besucher soll es nun im folgenden Abschnitt gehen.

Abgelegt unter Kap5 Content-Design | Keine Kommentare »

5.4 Kommunikationsschnittstellen

Erstellt von admin_usability am 8. April 2006

Das Web wird als Kommunikationsmedium empfunden und somit erwarten die Benutzer verschiedene Möglichkeiten zur Kontaktaufnahme auf der Website. Dies kann auf verschiedene Weise erfolgen: Der Besucher schickt eine Nachricht per Formular oder Email und ordert bestenfalls ein Produkt oder eine Dienstleistung. Letztlich sind Kommunikationsmöglichkeiten auch in interaktiven Abläufen zu finden.
Auf Diskussionsforen, Gästebücher oder Chats wird nicht näher eingegangen, da diese eher nicht gebräuchlich auf Informationsseiten sind, sondern verstärkt auf privaten Seiten eingesetzt werden.

Abgelegt unter Kap5 Content-Design | Keine Kommentare »

5.4.1 Formulare

Erstellt von admin_usability am 7. April 2006

Für die meisten kommerziellen Webseiten gehört zur wesentlichen Zielsetzung die Kontaktaufnahme zu den Besuchern. Da dies meist durch Formulare geschieht, soll im Folgenden näher auf diese eingegangen werden. Untenstehende Abbildung zeigt die wichtigsten Elementen eines Formulars.

Abbildung 25: Die Elemente eines Formulars [AM 13]

Texteingabefelder (Nr.1 in obiger Abbildung) sind die meist verwendeten Elemente und dienen zur freien Eingabe von Daten. In HTML können dies einzeilige oder auch mehrzeilige Felder sein. Sucheingabemasken verwenden, beispielsweise in Verbindung mit einem Button, diese Art von Element. Der kritischste Faktor ist dabei die Länge des Feldes. Die Länge, die angezeigt wird, sollte immer an die ungefähre Anzahl an Zeichen angelehnt sein, die der Benutzer eingeben wird. Zu lange Felder irritieren den Benutzer, da im Feld noch freier Platz sichtbar ist. Zu kurze Felder dagegen zwingen den Besucher zu scrollen und geben somit keine klare Kontrolle was nun eingegeben worden ist. Im obigen Formular wurde bspw. das Feld Geburtsdatum der Länge angepasst.

Die Beschriftung sollte oberhalb oder links vom Eingabefeld erfolgen, ansonsten besteht die Gefahr, dass das jeweilige Feld der Beschriftung nicht zuzuordnen ist.
Das Eingabeformat eines Textfeldes stellt sich oft als Problem dar, so z.B. wenn es um eine Datumsangabe geht. In solchen Fällen bietet es sich an, dies expliziert anzugeben oder eine Vorgabe zu machen. Im obigen Formular ist dies mit Hilfe von drei kurzen Felder umgesetzt.
Die Checkbox (Nr. 3) ist ein weiteres Element und vermittelt, dass mehrere Einträge aus einer Liste möglich sind. Die Beschriftung sollte rechts liegen und positiv formuliert werden. In einem Onlineshop zum Beispiel wäre eine doppelte Verneinung wie “Nicht als Geschenk verpacken” schwieriger zu verstehen wie “Als Geschenk verpacken”.
Nr. 4 in obiger Abbildung stellt einen Radiobutton dar. Diese vermitteln, dass genau ein Eintrag aus mehreren ausgewählt werden kann. Oftmals wird dieser Button allerdings angewendet, eine Funktion auszulösen. Der Radiobutton wird angeklickt und obwohl der User normal nichts erwartet, wird bspw. eine neue Seite geöffnet.
Die Beschriftung sollte sich hier ebenfalls rechts vom Button befinden, und mehrere stets untereinander statt nebeneinander. Somit ist eine bessere Ãœbersicht gewährleistet und es wird deutlich, dass diese eine Gruppe darstellen.
Als Alternative zu einem Radiobutton kann ein Pulldown-Menü (Nr.2) eingesetzt werden. Diese sollten ab einer Auswahlmöglichkeit von drei Elementen benutzt werden, wobei die Obergrenze aufgrund des Kurzzeitgedächtnisses eine Anzahl von sieben plus minus zwei Items beschränkt sein sollte. Für weniger als drei Elemente sollten Checkboxen benutzt werden. Solche Pulldown-Menüs sieht der Benutzer oft als Navigationselement, wobei problematisch erscheint, dass die zur Verfügung stehenden Alternativen erst bei einem Klick auf den Pfeil zum Vorschein kommen und somit kein primäres Scannen möglich ist.
Jedes Formular verlangt als klaren Abschluß einen Button (Nr.5) am unteren Ende des Formulars. Meist werden die dem User bekannten HTML-Buttons verwendet. Dies ist auch zu empfehlen, obwohl mit Hilfe CSS Farbe und Aussehen verändern werden können. Doch alles was durch Konditionierung gelernt worden ist, so z.B. das Aussehen der typischen Windows-Buttons, sollte auch benutzt werden. Deshalb wird empfohlen die herkömmlichen HTML Buttons weiterhin zu verwenden, ansonsten kann es passieren, dass der Benutzer vergeblich nach einem grauen Button sucht und den vorhandenen anders aussehenden übersieht.
Die ideale Beschriftung der Buttons ist das Ansprechen der Aktion die durch das Drücken ausgelöst wird. Ein einfaches “OK” ist bei einer Absendung einer Bestellung also zu wenig, ein aussagekräftiges “Bestellen” ist vorteilhafter. Der Besucher versteht somit den jeweiligen Vorgang besser.

Fraglich ist, ob ein Button zum löschen der Eingaben nötig ist. Oftmals ist dieser Reset-Button (beschriftet mit “Eingaben löschen”) so angebracht, dass er direkt neben dem Absendbutton liegt und somit schnell verwechselt werden kann. Diesem Problem kann durch weit auseinanderliegende Positionierung entgegengewirkt werden.
Bei kurzen Formularen kann dieser Button sicherlich weggelassen werden. Anders sieht es dagegen bei immer wiederkehrenden Aktionen aus, z.B. bei einer Telefonnummernabfrage, bei der unterschiedlichen Daten hintereinander abgefragt werden.
Nachdem das Formular ausgefüllt und abgeschickt worden ist, ist eine Validierung der eingegebenen Daten möglich. Zuvor sollten alle Eingaben nochmals zur besseren Ãœbersicht auf einer neuen Seite dargestellt werden. Dies gilt vor allem bei Formularen, die sich über mehrere Seiten erstrecken.

Doch auch eine angeblich so leichte Ãœberprüfung einer fünfstelligen Postleitzahl bereitet Probleme: sollte ein Österreicher das Formular benutzen, würde dies zu einer Fehlermeldung führen, da dieser sicherlich eine vierstellige Zahl eingeben würde.
Auszufüllende Mussfelder sollten mit einem roten Stern gekennzeichnet werden und äußerst vorsichtig eingesetzt werden. Die Internetbesucher überlegen mittlerweile genauer, welche persönlichen Daten sie von sich preisgeben. Deshalb sollten alle unnötigen Angaben wie z.B. Beruf oder Einkommen ganz weggelassen werden oder zumindest eine optionale Eingabe sein. Dies soll der Forderung der Aufgabenangemessenheit aus der DIN-Norm 9241 Rechnung tragen.

Eine Fehlermeldung sollte klar vom Inhalt abgesetzt werden und als solche erkennbar sein. Zudem sollten die entsprechenden Felder als Fehler markiert sein. Ansonsten fragt sich der User, was passiert ist, und ob das Formular auch abgeschickt worden ist.
Folgendes Bild zeigt einen typischen Ablauf einer Bestellung per Formular und soll einige unscheinbare Probleme demonstrieren. Bei diesem Formular sind alle Felder auszufüllende Mussfelder, was man an der Fehlermeldung rechts oben erkennt, eine Kennzeichnung im Formular selbst fehlt allerdings.

Auf den ersten Blick sieht dieses Formular sehr übersichtlich aus, was wünschenswert ist. Negativ auffallend ist die kleine weiße Schrift und die Tatsache, dass bis auf ein Feld alle gleich lang sind, was wiederum nicht zum erleichterten Ãœberblick beiträgt. Hilfslinien oder eine andere Hintergrundfarbe könnten zudem das letzte Feld “Anzahl der Gutscheine” von den Daten des Bestellers abgrenzen.
Der Reset-Button liegt genau neben dem Abschickbutton und sollte besser mit “Eingaben löschen” betitelt sein. Fraglich ist, ob bei diesen relativ wenigen Eingaben überhaupt solch ein Button nötig ist. Nach Druck auf den Button “Beförderungsbestimmungen” öffnet sich ein Windows-Warnfenster mit den allgemeinen Beförderungsbestimmungen. Ein Link, welches ein neues Fenster öffnet, wäre besser und man könnte diesen Text ausdrucken.

Nachdem der Abschickbutton (Nr.1 in der Abbildung) gedrückt worden ist, erscheint ein Hinweisfenster mit der Auflistung aller Eingaben, welches zu einer guten Kontrolle führt. Nach einem weiteren Klick auf “OK” erscheinen nochmals die Beförderungsbestimmungen (Nr.2). Bestätigt man dieses Fenster, so öffnet sich der Hinweis, dass die Eingaben per Email und nicht sicherheitsverschlüsselt verschickt werden (Nr.3). Nach diesem Vorgang über 4 Mausklicks bleibt es dem potentiellen Kunden offen, die Bestellung abzuschicken. Optimierte Formularsysteme kommen mit höchstens zwei Klicks aus und kosten dem User somit weniger Zeit.

 

 

Abbildung 26: Verlauf einer Bestellung über ein Formular [AM 14]

Einen weiteren Vorteil von Formularen kann dieses Beispiel nicht ausnutzen. Kontaktformulare sollten auch von Benutzern abgesendet werden können, wenn diese sich nicht an ihrem eigenen PC aufhalten. Ist der potentielle Käufer an einem anderen Arbeitsplatz oder gar in einem Internetcafe, so ist es meist nicht möglich oder wäre zu zeitaufwendig, den eigenen Email-Account in einem Mailclient zu konfigurieren. Kostenlose Emailadressen wie man sie bei GMX oder Web.de einrichten kann, werden meist über das Browserinterface bedient und der Nutzer kennt selten seine Accountdaten.

Im obigen Fall merkt der Benutzer evtl. erst am Schluss, dass ein letztendliches Abschicken aufgrund fehlender konfigurierter Emailadresse nicht möglich ist. Der gesamte Vorgang wäre dann auf Grund der vielen Klicks und des Zeitaufwands nicht effektiv und effizient und würde auch den Benutzer nicht zufrieden stellen.
Nebenbei sei auf etliche Rechtschreibfehler in den Warnfenstern hingewiesen (vor allem missachtete Groß- und Kleinschreibung sowie vertauschte Buchstaben), was nicht zum Vertrauensaufbau und einer hohen Glaubwürdigkeit beiträgt.

Neben solchen Kontaktformularen sollte man dem Interessenten aber dennoch einen Link zur Emailadressen anbieten können.

Abgelegt unter Kap5 Content-Design | Keine Kommentare »

5.4.2 Email

Erstellt von admin_usability am 6. April 2006

Email ist neben dem WWW die meist benutzte Anwendung des Internets. Die User kennen sich mit dem Vorgang des Emailschreibens aus und erwarten somit eine Emailadresse zur Kontaktaufnahme auf einer Webseite. Deshalb ziehen viele Benutzer den Anfrageformularen oft Email vor. Häufiger aber auch deswegen, weil sie sich nicht die Mühe machen wollen, vorgegebene Felder auszufüllen, während diese Daten in den Emails oft als Signatur automatisch eingefügt werden.
Die Emailadresse sollte als <mailto> auf jeder Seite zu finden sein, d.h. als Link zur Emailadresse, so dass das bevorzugte Mailprogramm geöffnet wird. Dabei sollte nicht nur der Name des Ansprechpartners genannt werden, sondern der Link sollte auch als Emailadresse sichtbar sein. Also nicht nur Hermann Mustermann, sondern z.B. hermann@mustermann.de wäre die bessere Alternative.

Auch sollte klar erkennbar sein, ob es sich um einen Link zu einem Kontaktformular (siehe mailing-software.de) oder einer Emailadresse handelt. Wird eine Emailadresse angekündigt, so sollte sich auch ein Link auf diese befinden und nicht auf ein Formular.
Die Emailadresse nicht mit einem <mailto> Link zu versehen, führt dazu, dass der User umständlich die Adresse markieren und diese in das Emailprogramm einfügen muss. Dies kostet wieder einige Sekunden kostbare Zeit.
Andererseits schützt es die Emailinhaber vor unerwünschten Werbemails, da die automatischen Sammelprogramme die Adresse nicht erfassen können.
Unter anderem nennt Jakob Nielsen diesen Grund, warum seine Emailadressen auf seiner Homepage keinen <mailto> Link folgen. Des weiteren möchte er sich vor unerwünschten Emails schützen, dessen Beantwortung viel Zeit in Anspruch nehmen. So geht er sicher, dass ihn nur ernstgemeinte Anfragen erreichen. Folgende Abbildung zeigt die Fußsignatur seiner Homepage.

 

Abbildung 27: Nicht verlinkte Emailadressen auf der Homepage von Jakob Nielsen [AM 15]

Für große Firmen ist diese Art der Kontaktaufnahme eine Möglichkeit, unerwünschte Anfragen (die meist sowieso nicht beantwortet werden) fern zu halten. Eine bessere Möglichkeit besteht darin, die Anfragen von vornherein zu kanalisieren, in dem z.B. ein Pulldown-Menü angeboten wird, über das die Benutzer ihr Feedback an bestimmte Abteilungen senden können.

Abgelegt unter Kap5 Content-Design | Keine Kommentare »

5.4.3 Interaktive Abläufe

Erstellt von admin_usability am 5. April 2006

Usability Tests von acht großen amerikanischen Shoppingseiten haben gezeigt, dass 43 % aller Einkäufe fehlschlagen. Größtes Problem ist hierbei der Checkout-Prozess: Der Kunde hat die gesuchte Ware gefunden, fügt diese in den Einkaufswagen und entscheidet die Bestellung abzuschicken. Unglücklicherweise sind viele solche Prozesse schwierig gestaltet und ermöglichen somit keine konsequente Bestellaufnahme. Die häufigsten Probleme dabei entstanden beim Anlegen eines neuen Accounts sowie schlecht markierte Fehlermeldungen. Dabei endete der Einkaufsbesuch in einer Sackgasse: Der potentielle Kunde verlässt die Seite und kommt selten ein zweites Mal zu Besuch.

Diese Schilderung zeigt, dass Webseiten nicht nur eine statische Architektur haben, sondern sie bestehen auch aus dynamischen und interaktiven Abläufen. Unter einem interaktiven Ablauf sollen in diesem Zusammenhang diejenigen Prozesse verstanden werden, bei denen der Besucher nicht nur klickt um zu navigieren, sondern eine komplexere Aufgabe erledigt. Typische Beispiele sind hierfür Onlineeinkäufe von Produkten, die Eingaben zur Personalisierung einer Nachrichtenseite oder das Heraufladen von Fotos zur Entwicklung auf Papier.
Obwohl dies meist relativ einfache Anwendungen mit linearen Abläufen sind, entstehen hier oftmals Probleme, die im schlimmsten Fall zum Abbruch des Vorgangs führen. Es ist daher notwendig, diese Abläufe so intuitiv und verständlich wie möglich zu gestalten.

Die Methoden, die zu einer Modellierung solcher Szenarien verwendet werden, kommen meist aus dem User-Interface-Design für Software, in der es vor allem um die Entwicklung von Interaktion und Abläufen geht. So auch die Methode des Cognitive Walkthrough. Diese Methode wird in Punkt 7.4.1.2 näher beschrieben.
Zu Beginn des Interaktionsdesigns sollte der Hauptzweck der Interaktion feststehen und das wichtigste Szenario gefunden sein. Beim Cognitive Walkthrough werden die vorher auf Papier skizzierten Abläufe geistig durchgearbeitet und auf Vollständigkeit und Bedienungsfreundlichkeit geprüft.

Welche Schwierigkeiten und Fehler bei einer solchen interaktiven Anwendung entstehen können, soll wie schon oben bei den Formularen anhand eines Beispiels gezeigt werden.
Auf den Internetseiten des Automobilkonzerns Volkswagen findet der interessierte Besucher einen sogenannten Konfigurator. Hier kann er sein Wunschauto zusammenstellen und sich anschließend ein Finanzierungsangebot unterbreiten lassen.
Die Abbildung auf der nächsten Seite soll auszugsweise diesen Prozess für das Modell Sharan darstellen.
Auf der jeweiligen Homepage des einzelnen Modells steht ein Link mit der Betitelung “Fünf Schritte zum Wunschauto.” bereit (Nr.1 in folgender Abbildung). Was genau unter diesem Konfigurator zu verstehen ist, wird dem Besucher nicht erklärt.
Nach einem Klick erscheint ein PopupFenster mit der Ãœberschrift “Der Sharan. Im Konfigurator”. Darunter findet man eine Erklärung zu den Eigenschaften des Fahrzeugs anstatt einer Erklärung des Konfigurators. Der Benutzer wird hier weiterhin im Unklaren gelassen, wie nun dieses Tool bedient wird und welche Vorteile es hat (Nr.2).
Auf der nächsten Webseite wird der Nutzer mit der Auswahl der Ausstattungen konfrontiert. Zur Auswahl stehen Basis, Comfortline, Highline und Trendline. Damit der Nutzer sich über die einzelnen Vorzüge der Ausstattungsvarianten informieren kann, steht ein winziger Button “i” bereit (Nr.3). Es öffnet sich wiederum ein kleines Fenster mit näheren Informationen (Nr.4). Einfacher wäre hier eine kurze Information unter der jeweiligen Auswahlmöglichkeit – der Platz wäre vorhanden gewesen. Mit einem Klick auf die Checkbox der jeweiligen Auswahlmöglichkeit und einem Klick auf Weiter im rechten Navigationsmenü wird der Nutzer zur Motorisierung geführt (Nr.5).
Sieben Möglichkeiten stehen hier zur Verfügung, darunter zum Beispiel Sharan Comfortline 4motion 1,8 l 5V turbo 110kw (150PS) 5 Gang. Diese werden zeilenorientiert angeboten, lediglich der Preis ist abgesetzt. Ãœbersichtlich erscheint dies nicht. Die Bezeichnung “Sharan Comfortline” kommt in jeder Zeile vor und würde lediglich als Ãœberschrift ausreichen. Hier wird die Datenbankstruktur, die hinter dem System steht deutlich. Doch Datenbankkonzepte sind nicht notwendigerweise benutzerorientiert. So fehlt eine Erklärung des Ausdrucks “4motion”, was mit einem einfachen Link auf dieses Wort leicht zu bewerkstelligen wäre.
Im Falle des VW-Konfigurators würde sich eine farbliche Gestaltung anbieten, wie dies beim grafischen Link auf der Homepage angedeutet wird (Nr.1). Die farbigen Quadrate könnten hier einen einzelnen Schritt darstellen.
Fährt man nun im Verlauf des Zusammenstellens des Wunschautos weiter, so fallen Inkonsistenzen im Bezug der zusätzlichen Informationen auf. Bei der Auswahl der Innenausstattungen stehen vier Sitzbezüge zur Auswahl. Die einzelnen Einträge sind Links zu einem neuen Fenster mit einer Abbildung der jeweiligen Muster (Nr.6). Dies ist eine gute Unterstützung, die Links sind allerdings nicht als solche erkennbar. Klickt man die jeweilige Checkbox davor an, so öffnet sich ebenfalls das Fenster mit der Abbildung des Musters. Bei den vorangegangenen Auswahlschritten passierte dies nicht. Die Einträge waren keine Links und beim Anklicken der Checkboxen öffnete sich kein Fenster. An diesen Stellen fehlt die Konsistenz der Bedienungsoberfläche.

 

Abbildung 28: Der VW Konfigurator im Ãœberblick. [AM 16]

In den folgenden Menüs bei der Auswahl der Sonderausstattungen kommt eine weitere Variante hinzu: Die Auswahlmöglichkeiten sind Links zu Fotos der Varianten, rechts daneben findet sich ein Koffersymbol, welches beim Klick eine Liste des Zubehörs öffnet (Nr.8). Die Fotos wirken teilweise unnötig, wie z.B. die Ansicht des Schlüssels (Nr.7).
Kommt im Verlauf der Zusammenstellung eine nicht bestellbare Kombination zustande, so wird eine Fehlermeldung angezeigt, die gut deutlich markiert ist (Nr.9) Allerdings ist die Erklärung unzureichend und schickt den Benutzer bei einer weiteren falschen Auswahl zurück an die jeweilige Stelle der Ausstattung ohne hier einen Fehler anzuzeigen oder die Auswahl aufzuheben.
Hat der Benutzer sich nun durch alle Einstellmöglichkeiten gehangelt, so wird er zu einem Endbildschirm weitergeleitet, der die rechte Navigation der Konfiguration auflöst und stattdessen neue Auswahlmöglichkeiten zur Finanzierung, der Händlersuche oder einer Neuwagenbörse anzeigt. An dieser Stelle ist der Besucher fertig mit der Konfiguration, was allerdings nicht mit einer Erklärung gewürdigt wird (Nr.10).
Während des gesamtem Prozesses ist eine Kontaktaufnahme zu einem Händler oder Firmenvertreter nicht möglich, spezielle Fragen muss der Benutzer sich notieren und später abklären.
Der Navigationsbereich (z.B. Nr. 5 in obiger Abbildung) liegt rechts von den Auswahlmöglichkeiten und zeigt an, an welcher Stelle der Benutzer sich gerade befindet. Allerdings weiß der Nutzer nicht, wie viel Schritte er bis zum Ende der Konfiguration hat. Da dieses Tool allerdings einen linearen Ablauf vorweist, ist es für den Benutzer einfacher auf jeder Seite angezeigt zu bekommen, in welchen Schritt dieser sich gerade aufhält und wie viele er noch vor sich hat. Amazon zeigt beim Bestellvorgang dem Benutzer eine grafisch gestaltete Leiste am oberen Rand der Seite.

 

Abbildung 29: Der lineare Bestellvorgang bei Amazon. [AM 17]

Zusammenfassend treten folgende Probleme beim VW-Konfigurator auf:

  • eine unzureichende Erklärung des gesamten Vorgangs
  • Marketingsprache ohne weiterführende Erklärung
  • Datenbankstruktur ist nicht benutzerorientiert
  • fehlendes Navigationskonzept: Wie viele Schritte bis zum Ziel?
  • Inkonsistenz der Links für weiterführende Informationen
  • unzureichende Fehlermeldung bzw. -erklärung
  • fehlender Kontakt während der Konfiguration

Diese Anwendung zeigt stellvertretend für viele ähnliche Prozesse, dass augenscheinlich Kleinigkeiten zu Schwierigkeiten und somit zum Abbruch des Prozesses führen können.

Neben den Texten gehören auch Grafiken und Fotos zu den Informationselementen einer Website. Die Auswahl von Farben, Schriftgrößen, Schrifttypen, Grafiken, Fotos und Icons sollen dabei das inhaltliche Verständnis

Abgelegt unter Kap5 Content-Design | Keine Kommentare »

5.5 Grafiken

Erstellt von admin_usability am 4. April 2006

“Ein Bild sagt mehr als 1.000 Worte”.

Dieses Sprichwort gilt auch im WWW. Doch aufgrund des Ladezeitproblems ist Vorsicht bei der Verwendung von Grafiken und Fotos geboten. Die verwendeten Grafiken sollten eine kommunikative Funktion haben und nicht nur Dekoration oder Platzverschwender sein. Die Tatsache, dass User im WWW den Inhalt scannen, kann eine klare Bild-Text-Sprache den Inhalt unterstützen. Zusätzlich ist darauf zu achten, dass Bild und Text immer in Beziehung zueinander stehen und einander ergänzen.

Dabei ist auch auf eine rhythmische Gestaltung zu achten: Texte und Bilder sollten so angeordnet sein, dass die freien und die bedeckten Flächen von unterschiedlicher Proportion und Größe sind. Somit wird eine visuelle Spannung erzeugt.

Zudem sollte die Funktion der einzelnen Grafik unmittelbar erkennbar sein: Ist diese nur Dekoration, Illustration oder Navigationselement? Dazu gehört auch eine adäquate Erläuterung oder Bildunterschrift.
Fotos können den User aktiv unterstützen: Auf einer Produktseite sollte stets ein Bild des Produktes erscheinen. Falls nur ein kleines Bild (Thumbnail) angezeigt wird, so sollte ein Link zu größeren Fotos erkennbar sein, da der User bei echtem Interesse gerne Fotos mit näheren Details zur Kaufentscheidung heranziehen würde.

Im oben besprochenen Konfigurator von Volkswagen erscheint bei der Auswahl der Außenlackierung automatisch eine Ansicht des Wagens, die den Benutzer animiert, verschiedene Farben auszuprobieren. Dies ist eine sinnvolle Anwendung von Fotos, allerdings wären hier zusätzlich Rundumsichten des Fahrzeuges denkbar und wünschenswert.
Bilder ziehen allgemein mehr Aufmerksamkeit auf sich als reiner Text und werden müheloser entschlüsselt. Ebenso ist die Gedächtnisleistung für Bildmaterial wesentlich besser, was die Orientierung innerhalb komplexer Websites vereinfachen kann. Markante Bilder können somit als Bookmark in der mentalen Landkarte abgespeichert werden, die die Benutzer während des Besuchs aufbauen. Somit können die Benutzer schon besuchte Seiten leichter wiedererkennen. Dies kann z.B. durch Gesichter oder andere Fotos geschehen.

Aus technischer Sicht sind bei der Verwendung von Grafiken und Fotos einige spezielle Tatsachen zu berücksichtigen.
Da Text vor Grafik geladen wird, ist bei der Einbettung von Grafiken in die HTML-Seite darauf zu achten, die Angabe der Höhe und Breite der entsprechenden Grafik mit anzugeben. Der Browser weiß somit, welche Dimensionen die Grafik hat und kann den Text ohne ruckeln auf der Seite darstellen. Der User kann sich somit schnellstmöglich eine Ãœbersicht über die Seite verschaffen. Allerdings ist hier die Originalgröße der Grafik anzugeben um ein Zoomen zu verhindern. In diesem Fall wird die Grafik entweder zu groß angezeigt, was zu einer qualitativ schlechten Darstellung führt oder zu klein, was unnötige Ladezeit nach sich zieht.
Für bestimmte Nutzergruppen, wie Sehbehinderte oder User, die die Grafikdarstellung im Browser deaktiviert haben, ist es nützlich, Grafiken mit einem alternativen Text zu versehen. Dies ist der gelbe Text, der bei Mausberührung über dem Objekt angezeigt wird oder bei einer nicht geladenen Grafik an dessen Stelle erscheint. Sehbehinderte Surfer, die sich den Inhalt von einem Scanner vorlesen lassen, können so bei einem geeigneten Text die Grafik wahrnehmen.
Somit sieht ein optimaler HTML-Code für die Einbettung eines Bildes folgendermaßen aus:

<img src=”augsburg.jpg” width=”300″ height=”100″ alt= “Fotovon Augsburg”>< /EM> < /STRONG>

Bei der Aufbereitung von Grafiken und Fotos für das Web ist es nötig qualitativ hochwertige Grafiken bei geringen Ladezeiten zu entwerfen.
Obwohl den Internetnutzern immer schnellere Downloadgeschwindigkeiten zur Verfügung stehen, sollte auf eine sehr gute Dateigrößenoptimierung der Grafiken und Fotos Wert gelegt werden. Sind mehrere Grafiken auf einer Seite herunterzuladen, so schwillt die herunter zu ladende Dateimenge schnell an.

Zwei Grafiktypen werden für das Web benutzt:

Bitmap- und Vektorgrafiken.
Vektorgrafiken sind z.B. Flashgrafiken und bestehen aus Flächen, welche durch Ausdehnung in die entsprechenden Größen skaliert werden. Diese Grafiken werden in mathematischen Werten (Vektoren) angegeben, dadurch sind deren Dateien kleiner als die optisch gleichgroßen Bitmapgrafiken.
Gif und Jpg Grafiken sind die gebräuchlichsten Bitmapgrafiken fürs Web. Im Gegensatz zu den Vektorgrafiken setzen sich Bitmapgrafiken aus einzelnen Pixeln zusammen, was sichtbar wird, wenn die Grafik vergrößert wird.
Jpg-Grafiken sind aufgrund der großen Farbtiefe von bis zu 16,7 Mio Farben (24 bit) besonders für Fotos geeignet. Somit sind auch komplexe Farbübergänge wie z.B. ein Sonnenaufgang optimal darzustellen.
Gif-Grafiken können dagegen nur 256 Farben (8 bit) darstellen und eignen sich nicht für Fotodarstellungen. Dieses Dateiformat ist am geeignetsten für Strichzeichnungen und Bilder, die nur geringe Farbtiefen aufweisen sowie viel gleichfarbige Flächen enthalten. Einige Besonderheiten machen dieses Dateiformat besonders geeignet für das Web. Es kann Interlaced abgespeichert werden, so dass während des Ladens das komplette Bild in einer niedrigen Auflösung gezeigt und nach und nach vollständig geladen wird. Der User meint dadurch, dass das Bild schneller lädt als eine non-interlaced Grafik. Vom Dateiumfang ist allerdings kein Größenunterschied erkennbar.
Des Weiteren kann eine transparente Farbe in einer Gif-Grafik definiert werden, was sich vor allem für Logos und Navigationselemente anbietet.
Ebenfalls sind animierte Grafiken möglich. Dies soll im Folgenden näher erläutert werden.

Abgelegt unter Kap5 Content-Design | Keine Kommentare »

5.6 Animationen und Flash

Erstellt von admin_usability am 3. April 2006

Mit Gif-Grafiken ist es möglich kleine Animationen herzustellen, bei denen mehrere Einzelgrafiken hintereinander in einer Datei abgespeichert werden. Dadurch vergrößert sich die Dateigröße schnell und führt zu längeren Ladezeiten.

Grundsätzlich sollten solche Animationen, die man z.B. oft als Briefkasten, “drehendes @” oder Weltkugel sieht, sparsam eingesetzt werden. Alles was blinkt oder sich bewegt wird reflexartig erfasst, was wahrnehmungspsychologische Ursachen hat. Die Folge davon ist, dass der Mensch sich gar nicht solchem Blinken und Bewegen entziehen kann und somit vom eigentlichen Inhalt abgelenkt wird. Die Aufnahme, das Verarbeiten und das Behalten von Informationen wird somit erschwert. Dies ist wohl auch eine Erklärung, warum die meisten Werbebanner animiert und nicht statisch sind. Gleichzeitig entsteht hier die Gefahr die Animation zwar wahrzunehmen, aber zu ignorieren, da man denkt, es sei Werbung. Deshalb sollten keinesfalls wichtige Navigationselemente die Form eines animierten Banners haben.

Wenn trotzdem nicht auf Animationen verzichtet werden kann, so sollten einige Grundregeln beachtet werden, die wiederum auf wahrnehmungspsychologischen Eigenschaften beruhen:

  • Regelmäßiges Blinken ist besser als unregelmäßiges.
  • Glatte, saubere Bewegungen sind weniger beeinträchtigend als unruhige und ruckartige.
  • Verfolgbare Bewegungen sind besser als schnelle.
  • Möglichkeiten zum Ein- und Ausschalten sollten vorhanden sein.
  • Der Benutzer sollte nicht den Eindruck haben, dass sich die Animation auf ihn zu bewegt.
  • Animationen, die ein Ende haben, sind besser als solche, die in einer Endlosschleife laufen.

Natürlich gibt es auch sinnvolle Anwendungen, die eine Animation rechtfertigen. Komplexe Handlungsabläufe können so mediengerecht durch eine Animation erklärt werden. Auf der Seite Wetter.de können z.B. Satellitenfilme angeschaut werden und somit die Wetterentwicklung beobachtet werden. Ein weiteres Beispiel zeigt die Seite Mydailyyoga.com, auf dem Yoga-Ãœbungen vorgeführt werden. Bei Intervoice.de werden Ãœbungen zur Stimmtherapie vorgestellt.

Das bereits oben erwähnte Flash-Format bietet eine weitere Möglichkeit Animationen darzustellen. Allerdings wird diese Technik vor allem von den Usability-Experten als bloße Spielerei abgetan und vermindert grundsätzlich die Usability einer Website.

Jakob Nielsen sagt eindeutig “Flash: 99% bad”. Dafür nennt er drei Hauptgründe: Erstens würde Flash das Design in den Vordergrund stellen und den falschen Gebrauch von Design ermutigen. Dies zeigt sich z.B. in den neu kreierten Scrollbalken, wie man sie oft auf Flash-Seiten sieht. Typische, vor die Homepage gestellte Flash-Intros findet man immer wieder, sind allerdings im Laufe der Zeit auf ernstzunehmenden Seiten wieder entfernt worden.

Auch wenn diese Intros einen sogenannten Skip-Intro Button aufweisen, halten sie den Besucher vom eigentlichen Inhalt ab. Zudem ist es fraglich, ob im deutschsprachigen Gebrauch dieser Ausdruck verstanden wird. Selten findet man eine ins deutsche übersetzte Alternative. Eine repräsentative Studie der Münchener Medienagentur Die Argonauten zum Thema Navigations-Wording zeigt, dass 38 % diesen Ausdruck nicht oder falsch verstehen. 98% der Nutzer, die viel Interneterfahrung haben, verstehen diesen Begriff, aber lediglich 39% der Internetneulinge.

Die Autoren empfehlen letztendlich den Begriff nicht zu verwenden und diesen stattdessen durch eine verständlichere Variante wie “Intro überspringen” oder Ähnliches zu ersetzen.
Zweiter Grund für die Ablehnung von Flash ist, dass gewohnte Interaktionselemente des WWW nicht mehr funktionieren. So funktioniert der Back-Button des Browsers innerhalb der Flash-Seite nicht mehr, die Linkfarben sind außer Kraft gesetzt, die
Funktion den Text kleiner/größer stellen zu können ist deaktiviert und eine Suche-Funktion ist kaum möglich.
Der dritte Grund besteht darin, dass Flash vom eigentlichen Inhalt der Website ablenkt und ungenügend auf den Nutzen der User angepasst ist. Oftmals wurde der Inhalt einmal erstellt und dann niemals aktualisiert. Außerdem sei dieser oberflächlich und nie mit einem Gedanken an Usability entworfen worden.

Dagegen gehen Befürworter der Flashtechnik davon aus, dass Flash sogar die Usability einer Seite verbessern kann. Schlechte Navigation und langsame Downloads sind schließlich nicht nur Probleme von Flash, sondern generelle Probleme des Internets. Außerdem ist nicht die Technik Flash an sich schlecht, sondern die Designer wären verantwortlich für fehlende Usability.

Mittlerweile findet man einige Guidelines für bessere Flashseiten im WWW. Hier wird bspw. die Verwendung von Splash-Screens empfohlen, also einer Ankündigung, dass es sich hier um Flash-Seiten handelt (für die man das geeignete Plug-In braucht). Ebenfalls sollte immer ein Preloader benutzt werden, der den Fortschritt der übertragenden Datenmenge anzeigt. Die Intros sollten nicht zu lang sein und immer einen Skip-Button enthalten. So können Wiederholungsbesucher das Intro überspringen.

Doch man darf gespannt sein, ob Flash auch in Sachen Usability Fortschritte machen wird: Im Juni 2002 erfolgt die Meldung, dass Nielsen von Macromedia, den Programmierern der Software Flash, angeheuert wurde, um Richtlinien zur Verwendung von Flash zu erarbeiten.
Ebenfalls sind in der neuen 2002er Version Flash MX Features integriert, die das Browserinterface, wie z.B. den Back-Button, unterstützen.

Eng verwandt mit Animationen sind Audio- und Videofiles, auf die im Folgenden kurz eingegangen werden soll.

Abgelegt unter Kap5 Content-Design | Keine Kommentare »