Usability Diplomarbeit

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

Archiv für die 'Kap6 Site-Design' Kategorie

6 Site-Design

Erstellt von admin_usability am 10. März 2006

Das Site-Design befasst sich letztlich mit der Anordnung der Seiten und der internen Struktur. Dadurch wird die Website zu einem Gesamtbild geformt. Die Homepage ist meist der Einstiegspunkt zu den angebotenen Informationen. Doch diese Informationen müssen geordnet sein und in einem Zusammenhang stehen.

Dies ist Aufgabe der Information Architecture und wichtigster Bestandteil des Site-Designs. Denn somit wird der Grundstein für die Navigation gelegt. Von dieser ist abhängig, ob das Surfen auf den Seiten in einem Flow endet und somit leicht von Inhalt zu Inhalt navigiert werden kann.

Tipp:
Mit einem Hompage Baukasten lässt sich am einfachsten eine eigene Webseite basteln, auch wenn dann das Site-Design nicht immer optimal ist.

Abgelegt unter Kap6 Site-Design | Keine Kommentare »

6.1 Die Homepage

Erstellt von admin_usability am 8. März 2006

“The home page is the flagship of the site and should therefore be designed differently from the remaining pages.”

Jakob Nielsen

Aus diesem Grund soll auf die erste Seite eines jeden Internetauftritts – die Homepage – näher eingegangen werden. Dieser Seite kommt eine ganz besondere Rolle zu.

Oftmals wird von der Homepage geredet, wenn der gesamte Internetauftritt gemeint ist. In den folgenden Ausführungen soll unter der Homepage nur die Startseite verstanden werden. Also die erste Seite, die bei Eingabe der entsprechenden URL im Browser erscheint.

Im obigen Zitat ist die Rede davon, dass die verbleibenden Seiten, also die inneren Seiten einer Präsenz, anders gestaltet sein sollten wie die Homepage. Natürlich sollten alle Seiten dem gleichen Style und Grundaufbau folgen, allerdings ergeben sich einige kleine Unterschiede. So sollte auf jeder Unterseite ein deutlicher Link auf die Homepage vorhanden sein. Doch wenn der User denkt, er befindet sich auf der Homepage und findet einen “Home”-Button, so wird er verwirrt sein. Also sollte auf der Homepage auch kein “Home”-Button vorhanden sein. Dies ist eigentlich selbstverständlich, wird aber immer wieder unterschätzt.
Dabei entstehen zwei Fragen: 1) Wie soll der Link oder Button auf den unteren Seiten betitelt werden und 2) an welcher Stelle sollte dieser Link stehen.

Die Münchener Agentur “Die Argonauten” befragten in der bereits oben erwähnten Umfrage (zum Thema Animation, Kap. 5.6.) zum Navigationswording Nutzer, wie dieser Link betitelt sein sollten. 50 % der Befragten urteilten, dass die erste Seite “Startseite” heißen sollte, gefolgt von “Homepage” (26%) und “Home” (17%). Andere Alternativen wie “Start”, “Frontpage”, “Heimseite” wurden nur selten genannt.
Eingebürgert hat sich mittlerweile das Firmenlogo als alleiniger Link zur Homepage. Usability Tests haben ergeben, dass aber nur die Hälfte der Nutzer diese Konvention kennen. Deshalb sollte zusätzlich ein Textlink vorhanden sein.

Weitere Aufgaben des Logos des Unternehmens liegen in der eindeutigen Identifikation sowie in der Vermittlung des Zweckes der Seite. User kommen oftmals von einem Suchmaschinenergebnis auf die Seite und verlieren somit schnell den Ãœberblick. Doch User möchten sofort wissen, auf welchen Seiten sie sich befinden und welche Möglichkeiten ihnen offen stehen. Dies ist die wichtigste Funktion einer Startseite. Zur weiteren Kenntlichmachung sollte das Logo auf der Homepage größer als auf den anderen Seiten erscheinen.
Der Zweck der Seite kann durch eine kurze Zusammenfassung oder einen einprägsamen Satz oder Spruch erfolgen. Folgende Abbildungen zeigen einige gelungene bzw. weniger gelungene Beispiele.

Abbildung 30: Diverse Logos von Unternehmen auf Webseiten. [AM 18]

Während bekannte Anbieter wie Amazon.de keine weitere Unterschrift benötigen, benutzen andere Unternehmen Werbefloskeln zur Seitenidentifikation. So z.B. Wetter.de mit einem plakativem Himmel und General Electric (unten links). Solche Marketing gesteuerten Unterschriften verwirren den Benutzer allerdings und führen schlimmstenfalls zur Unglaubwürdigkeit.

Gute aussagekräftige Untertitel findet man bei ebay (“Der weltweite Online-Marktplatz”), Cnet.com (“The source for computing and technology”), global sources (“Product and trade information for volume buyers”) und expedia.de (“Das große Online-Reisebüro”). Dies sind gute und direkte Zusammenfassungen und beschreiben passend was den Nutzer erwartet.

Andere Unterschriften hingegen wie “What you need to know About” scheinen kurz und flüssig zu sein, sagen allerdings nichts über den Zweck der Seite aus.
Jakob Nielsen empfiehlt in seiner Veröffentlichung “50 Homepages deconstructed” das Logo in die linke obere Ecke zu platzieren, damit es bei jeder Fenstergrößen gesehen werden kann. Nur knapp 16 % der getesteten Seiten platzieren das Logo an einer anderen Stelle.

Des Weiteren soll der Zweck und die angebotenen Möglichkeiten durch den Content auf der Homepage klar gestellt werden. Da es sich um die meistbesuchte Seite des Projekts handelt, sollten die Hauptfeatures, Nachrichten und Hauptkategorien deutlich erkennbar und möglichst schnell erreichbar sein. Dabei bietet es sich an, den Content durch Beispiele aufzuzeigen. Dies hilft dem Leser sofort sich in das Thema hineinzufinden und die Tiefe und die Qualität des Contents einzuschätzen. Dabei hilft beim Schreiben bspw. die Methode der inversen Pyramide.

Die meisten Besucher kommen auf die Seite, um etwas zu suchen oder zu erledigen. Eine Reiseseite wie expedia.de verkauft Reisen und Flüge. Deshalb ist die Suchfunktion deutlich im Mittelpunkt der Seite anzusiedeln. Folgende Abbildung auf der nächsten Seite zeigt links die komplette Ãœbersicht über die Homepage und rechts zwei Bildschirmausschnitte bei einer Auflösung von 800×600 Pixel.

Deutlich erkennbar unter der horizontalen Primärnavigation findet man die Suchfunktion, in die man Abflug- und Ankunftsort sowie das Datum eingibt. Bei einer Bildschirmauflösung von 800×600 Pixel findet man diese Suchmaske über der Falzmarke, der User sieht also auf den ersten Blick das Hauptfeature. Darunter findet man ausgewählte bebilderte Angebote (also Beispiele des Inhalts) und links davon die Sekundärnavigation. Die rechte Spalte zeigt weitere ausgewählte Angebote ohne Beschreibung mit Preisangaben.
Der User wird nur mit dem Nötigsten konfrontiert und findet auf den ersten Blick das Hauptfeature, nämlich die Auswahlmöglichkeit einer Reise.


Abbildung 31: Die Reiseseite expedia.de stellt die Suchfunktion in den Mittelpunkt. [AM 21]

Diese Homepage hat eine Gesamtgröße von 795 x 1014 Pixel, was bedeutet, dass maximal ein Bildschirm bis nach unten ans Ende gescrollt werden muss um den gesamten Inhalt zu erfassen. Jakob Nielsen hat in seiner oben genannten Inspektion von 50 Homepages eine Spannweite von 634 Pixel bis 1334 Pixel Länge ausgemacht und empfiehlt maximal eine Länge von 2 Bildschirmgrößen zu verwenden. Ansonsten empfindet der User eine Unübersichtlichkeit und ist unfähig die Hauptfeatures zu identifizieren.
Bei einem hierarchischen Aufbau sind alle Websites um die Homepage angeordnet, die als logisches Entree zu den einzelnen Webseiten fungiert. Somit sollte die Seite einen Linkbereich zu allen übergeordneten Bereiche haben, der gut erkennbar für den User ist. Im obigen Beispiel stellen horizontal angeordnete Registerkarten die Links zu den anderen Hauptmenüs dar. Weitere Ausführungen sollen im nächsten Abschnitt “Navigation” erfolgen.
Letztlich soll noch kurz von Splashscreens die Rede sein. Dies sind inhaltslose Startseiten mit Willkommensmeldungen, Logos oder speziellen Effekten wie Flash-Intros. Solche Bildschirme zwingen den Nutzer zu einem überflüssigen Mausklick, um zur eigentlichen Homepage zu gelangen. Abhängig von der Leserschaft können solche Bildschirme den Nutzer verärgern: Sind es vor allem Stammnutzer wie auf Suchmaschinen oder Veranstaltungskalender zu erwarten sind, sind solche Splash-screens zu vermeiden. Folgende Abbildung zeigt die Startseite der Online-Fernsehzeitschrift TvMovie. Bis auf den Hinweis einer Software findet der User nichts bemerkenswertes. Wenn man öfters wiederkommt, um sich über das Fernsehprogramm zu informieren, scheint dieser Bildschirm äußerst unangebracht.

Abbildung 32: Der Splashscreen von TVMovie.de. [AM 22]

Abgelegt unter Kap6 Site-Design | Keine Kommentare »

6.2 Navigation

Erstellt von admin_usability am 7. März 2006

Das Navigationssystem einer Website sollte dem Benutzer helfen, sich auf dieser zurechtzufinden. Dabei stellen vier Fragen die Eckpunkte des Navigationsverständnisses dar:

1. Wo bin ich?
2. Wohin kann ich gehen?
3. Wie kann ich dorthin kommen?
4. Wie kann ich dahin zurück gehen, wo ich herkomme?

Diese Schlüsselfragen sind der erste Schritt zum Verstehen eines guten Navigationsdesigns und sollen sich somit durch dieses Kapitel wie ein roter Faden ziehen. Weiterhin soll gefragt werden, woraus eine effektive Navigation besteht.

Des weiteren weist die Navigation noch weitere Eigenschaften auf: Navigation gibt dem Benutzer etwas zum Festhalten und zeigt, was ihn erwartet, indem es einen Ãœberblick über den Inhalt gibt. Wenn die Navigation gut ist, sieht der Anwender, wie die Seiten zu benutzen sind. Somit sollte keine weitere Hilfestellung nötig sein. Letztlich hinterlässt eine durchdachte Navigation einen guten Eindruck beim Besucher und steigert das Vertrauen zu den Machern der Seiten.

Abgelegt unter Kap6 Site-Design | Keine Kommentare »

6.2.1 Organisation von Informationen

Erstellt von admin_usability am 6. März 2006

Ein wichtiger Schritt bei der Planung einer Website ist die Anordnung des Informationsangebotes. Mit diesem Thema befasst sich das Gebiet der Information Architecture (im folgenden IA genannt).
Selbst wenn der eigentliche Inhalt klar und treffend formuliert ist, wird die Site die Ansprüche der Benutzer nicht befriedigen können, wenn die Site nicht auf einem logisch aufgebautem Fundament basiert. Solch ein Fundament stellen Organisationssysteme dar.

Der Informations-Architekt Lou Rosenfeld teilt Organisationssysteme von Webseiten in zwei Dimensionen ein: Organisationsschemata und –strukturen.
Zum einen soll das Organisationsschemata zusammengehörige Inhalte zu logischen Gruppen zusammenführen. Hier kann man wiederum zwischen exakten (eindeutigen) und mehrdeutigen Schemata unterscheiden.

Ein (alphabetisches) Telefonbuch ist die einfachste Variante eines exakten Schemas. Weiß man den Nachnamen, so wird man kaum Probleme haben, die entsprechende Telefonnummer zu finden. Chronologische und geografische Schemata sind weitere Formen. Beispiele hierfür sind ein Verzeichnis von Presseberichten oder eine Auflistung eines Händlernetzes nach PLZ geordnet. Diese drei Arten sind alltäglich und sind somit leicht zu verstehen.
Anders hingegen sind mehrdeutige Schemata, die oftmals wichtiger und sinnvoller erscheinen. Hier werden Dinge zusammengefasst, die auch zusammengehören. Sie sind gerade in diesen Fällen so wichtig, in denen wir uns nicht sicher sind, was wir denn überhaupt suchen. In Fällen, in denen wir die Schreibweise nicht genau kennen oder nur vage Informationen haben, sind diese mehrdeutigen Schemata ebenfalls von Bedeutung.

Die vier wichtigsten mehrdeutigen Schemata sind themenorientiert (z.B. die gelben Seiten), aufgabenorientiert (z.B. Onlinebanking) , zielgruppenspezifisch (z.B. Geschäfts- und Privatkunden) oder Metapher-orientiert (z.B. der Papierkorb auf dem PC-Desktop).
Des weiteren gibt es noch Mischformen zwischen ein- und mehrdeutigen Schemata, die zunehmend im Webbereich angewendet werden. Diese hybriden Modelle lassen den Benutzer im Gegensatz zu den ein- und mehrdeutigen Schemata kein mentales Modell der Seite aufbauen. Stattdessen ist der Besucher gezwungen, alle Menüpunkte durchzugehen und sich für eine oder mehrere Optionen zu entscheiden. Beispiele für hybride Schemata findet man genügend im Web, da die Verantwortlichen sich meist nicht auf ein Muster einigen können. Stattdessen findet der Besucher auf der Homepage einen komplizierten Mix aus verschiedenen Schemata.

Die folgende Abbildung zeigt die Homepage der Sportmesse ispo 2002 mit der linken Navigationsleiste. Hier wurden verschiedene Schemata miteinander vermischt. So wurde eine Themenorientierung vorgenommen (“Produkte & Marken”, “Tour de France”), eine zielgruppenspezifische Auswahl getroffen (“ispo-Aussteller”), eine Metapher-orientierte (“Sports Communities”) und eine chronologische (“ispo live day 2″). Dies sorgt keineswegs zu einer besseren Ãœbersicht. Der Besucher steht einem viel zu langem Menü gegenüber und kämpft sich durch 19 anklickbare Möglichkeiten.
Usabilitytests haben ergeben, dass eine sinnvolle Rubrizierung mit 5 bis 6 Punkten vollkommen ausreicht, um sich auf den meisten Seiten zurechtzufinden.

Ein gutes Beispiel zur Strukturierung von Artikeln findet man, wenn man auf “Produkte & Marken” klickt. Hier findet der Besucher drei Suchkategorien und eine Volltextsuche: Warenverzeichnis nach Produkten, ein alphabetisches Warenverzeichnis und ein Markenverzeichnis. Diese eindeutigen Organisationsschemata unterstützen den Informationsbedarf bestens und erleichtert die Suche nach einem bestimmtem Item.

Abbildung 33: Das Navigationssystem der Website der ISPO 2002 [AM 21]

Die zweite Dimension von Organisationssystemen besteht in der Festlegung von Organisationsstrukturen, die Beziehungen zwischen den einzelnen Inhalten und den zugehörigen Gruppen aufzeigen sollen.
Websites werden nach bestimmten Prinzipien strukturiert. Diese Architektur ist ausschlaggebend für die Konzeption der Navigation und prägt die Vorstellung der Benutzer von der Anordnung der Informationen.
Die folgende Abbildung zeigt die vier wichtigsten Strukturmodelle: sequentiell, hierarchisch, als Raster (Grid) oder in Form eines Netzes (Web). Diese vier Modelle sollen nun kurz erläutert werden. Das Diagramm zeigt diese vier Arten in Beziehung zur Linearität und Komplexität des Inhalts.
Die einfachste Form besteht in einer linearen Präsentation zusammenhängender Seiten. Diese eignet sich vor allem für alphabetische Listen, Enzyklopädien und Glossare aber auch für Trainingsseiten, auf denen ein bestimmter Stoff vermittelt werden soll. Selbst umfangreiche Seiten können sequentiell aufgebaut werden, indem die Seiten des Hauptstrangs Links zu weiteren Seiten enthalten.

Abbildung 34: Organisationsstrukturen von WebseitenQuelle: Lynch, Horton (1997e)

Das Raster ist besonders für Webseiten, dessen Zielgruppe ein bestimmtes Fachpublikum ist, geeignet. Handbücher, Vorlesungsverzeichnisse oder medizinische Fallbeschreibungen lassen sich am besten mit dieser Struktur darstellen. Somit können mehrere Variablen miteinander verbunden werden. Denkbar ist z.B. ein zeitlicher Ablauf, der mit historischen Daten verknüpft ist. Diese können wiederum verschiedenen Sparten zugeordnet sein. Voraussetzung zur vollen Funktionalität ist allerdings, dass diese Einheiten in über- und untergeordnete Themenbereiche gegliedert sind. Ansonsten verliert der Benutzer die Ãœbersicht oder kann sich erst gar kein mentales Modell der Seite aufbauen. Diese Struktur eignet sich deshalb auch besonders für erfahrene Nutzer oder solche, die sich in der jeweiligen Thematik auskennen.

Eine hierarchische Struktur ist die am meisten benutzte Art, Webseiten anzuordnen. Da die meisten Sites sich um eine Homepage gruppieren, bietet sich diese Art für das Web geradezu an und kann so gut wie auf jede Art von Site angewendet werden. Leicht nachvollziehbar ist die Hierarchie auch deswegen, da sie in wirtschaftlichen und institutionellen Bereichen häufig verwendet wird.

Aufgrund der Wichtigkeit soll hier auf einige Schwierigkeiten aufmerksam gemacht werden. Die Balance zwischen der Tiefe und der Breite innerhalb der Informations- Architektur sollte sich die Waage halten. Bei einer zu tiefen Hierarchie muss der User zu oft klicken, um unter Umständen zum Ziel zu gelangen. Bei einer zu flachen Anordnung muss der User zwar nicht oft klicken, steht aber vielen Rubriken und Möglichkeiten gegenüber. Die Kunst besteht darin, eine möglichst ausgewogene Struktur zu entwerfen. Dies sollte vor allem bei neu entworfenen Websites ein Problem darstellen, die im Inhalt erweitert werden sollen. Die folgenden Abbildungen sollen dies zeigen.

Abbildung 35: Die hierarchische Struktur einer Webseite: zu tief, zu flach und ausgewogene StrukturQuelle: Lynch, Horton (1997e)

Die vierte Art besteht in einer netzartigen Anordnung der Seiten. Diese Struktur schöpft zum vollsten Maße die Eigenschaften des Hypertextes aus. Jede Seite ist mit jeder verbunden. Deshalb eignet sich diese Struktur vor allem für kleine überschaubare Seiten oder reine Linklisten. Doch diese Netzstruktur kann leicht verwirren, da sie unvorhersehbar ist und schwer verständlich bei größeren Seiten erscheint.
Die vorhergehenden Ausführungen zeigten, welche Möglichkeiten es bei der IA einer Website gibt und sollte bei der Entscheidung der Auswahl der besten Navigationsorganisation helfen.

Hat der Informations-Architekt sich nun entschieden, welches System verwendet werden soll, besteht der nächste Schritt im Design des Navigationslayouts. Die Struktur legt somit den Grundstein für das Aussehen und die Funktionalität der Navigation.

Abgelegt unter Kap6 Site-Design | Keine Kommentare »

6.2.2 Design von Navigationssystemen

Erstellt von admin_usability am 5. März 2006

Die erste Frage stellt sich bei der Positionierung der Navigationselemente. Wie schon im Kap. 4.1 Seitenlayout dargelegt worden ist, hat sich die Konvention durchgesetzt, die globale Navigation links oder oben auf der Seite zu platzieren. Umso bekannter die Struktur ist, umso besser wird sich der Besucher auf der Seite zurechtfinden.

Weitere Konventionen haben sich bei der Platzierung des Logos in der linken oberen Ecke ergeben und unterstützen somit die Frage, wo man sich befindet.
Dem Besucher sollte des weiteren klar sein, auf welcher einzelnen Seite er sich befindet. Dazu haben sich sogenannte “You are here” Indikatoren durchgesetzt. Dies kann einerseits durch eine Ãœberschrift über dem Inhalt erfolgen, andererseits durch eine Markierung in der Navigation, bspw. einem Dreieck vor dem Rubrikeintrag. Bei größeren Seiten bietet sich eine Brotkrümel-Hilfe an (engl. breadcrumbs), die genau den Pfad zur Homepage anzeigt. Voraussetzung zur Anwendung ist eine hierarchische Struktur. Breadcrumbs bieten mehrere Vorteile: sie sind selbsterklärend, nehmen wenig Platz in Anspruch und helfen zur Homepage oder zu einer übergeordneten Rubrik zu springen.

Doch hier ist auf einige Fallstricke zu achten: Der Pfad sollte ganz oben auf der Seite stehen und die Trennung zwischen den Seiten bzw. Rubriken sollte durch Sonderzeichen wie z.B. “>” visualisiert sein. Das größer-Zeichen “>” eignet sich dafür am besten, da es den dynamischen Fortschritt in der Hierachie unterstützt. Weiterhin sollte explizit vor dem Pfad “Sie sind hier” oder “You are here” stehen, um den Zweck der Anzeige zu unterstützen. Einige Beispiele zeigen folgende Abbildungen.

Abbildung 36: verschiedene Pfadanalysen [AM 24]

Die nächste Entscheidung stellt sich beim Layouten der Navigationslinks. Dies betrifft die dritte Frage der Einleitung: “Wie kann ich dorthin kommen?”.
Sollen text- oder grafikbasierte Links angeboten werden? Dies mag freilich eine Geschmacksfrage sein, doch Verfechter des guten Designs werden meist auf Grafiken zurückgreifen. Dem visuellen und ästhetischen Vorteil stehen längere Ladezeiten gegenüber. Während schlichte Textmenüs rasch geladen sind, dauert, je nach Ãœbertragungsgeschwindigkeit, eine grafikbasierte Navigationsleiste einige Zeit länger. Vor allem dann, wenn sogenannte Mouseover benutzt werden, d.h. jede Grafik wird quasi zweimal geladen. Dies verdeutlicht wiederum die Bedeutung der Kenntniss der Zielgruppe zu kennen.

Bei näherem Hinsehen aber bieten Textlinks große Vorteile gegenüber grafischen Buttons. Der Schlüsselpunkt liegt hier in der Frage “Wie kann ich dahin zurück gehen, wo ich herkomme?”. Wenn ein Link angeklickt worden ist, ändert sich automatisch die Farbe. Standardmäßig sind Textlinks unterstrichene blaue Wörter, besuchte Links dagegen lila. Somit weiß der Besucher sofort, welche Seiten er schon besuchte und welche noch unbekannt sind. Diese standardmäßigen Farben sollten nicht geändert werden, denn ansonsten sind die Bedeutungen der einzelnen Farben nicht mehr eindeutig und es kann passieren, dass der User genau auf die Links klickt, bei denen er schon war.

Diese Farbveränderung wird durch den Browser verursacht, der noch weitere Unterstützung liefert, die allerdings nicht immer ausreicht. So kommt man nach dem Klick auf den Zurückbutton zur vorherigen Seite, während die Verlaufsanzeige es ermöglicht kürzlich aufgerufene Webseiten wiederzufinden. Dies scheint aber im Moment des Surfens unakzeptabel und zeitraubend zu sein.
Selbstverständlich gibt es vielerlei Möglichkeiten, Navigationssysteme zu designen, von denen hier nur zwei kurz angesprochen werden sollen.

Oftmals sieht man sogenannte Tabs, also Register- oder Karteikartensysteme, von denen Amazon wohl eines der bekanntesten Beispiele ist. Tabs sind einige der wenigen physischen Metapher, die tatsächlich im Netz angenommen wurden. Außerdem sind sie selbsterklärend und fallen mehr auf als herkömmliche Buttons.
Dieses erfolgreiche Navigationskonzept findet sich bei vielen Nachahmern, so dass sogar von einer “Amazonisierung” des Webs gesprochen werden kann.

Ebenso oft findet man Ausklappmenüs, die mit Hilfe von Dropdown-Menüs, Flash, Java, Javascipt oder anderen Webtechniken realisiert werden. All diese Systeme bieten große Auswahl von Links, haben aber den eklatanten Nachteil, dass nicht alle Möglichkeiten auf einen Blick zu sehen sind. Somit eignen sich diese Systeme am ehesten für Seiten, die meist von erfahrenen Benutzern besucht werden. Auch besteht die Gefahr eines Information Overkills: vor lauter Möglichkeiten weiß der Benutzer nicht, welche Navigation er nun benutzen soll. Die Homepage von T-online ist ein gutes Beispiel dafür. Gleich drei ausklappbare Menüs erwarten den Besucher neben einer langen Navigationsleiste.

Abbildung 37: Die Homepage von T-online. [AM 25]

Obwohl sich somit einige Standards für das Layout von Navigationssystemen durchgesetzt und von den Benutzern angenommen wurden, sollte weiterhin genug Platz für kreative Ideen in der konkreten Ausführung sein. Denn die individuelle Note der Website ist entscheidend für die emotionale Ansprache des Benutzers.

Abgelegt unter Kap6 Site-Design | Keine Kommentare »

6.2.3 Navigationswording

Erstellt von admin_usability am 4. März 2006

Das Organisationssystem mit dessen Schemata und Strukturen bestimmt die Frage, wohin der Nutzer auf der Website gehen kann. Klar ersichtlich wird dies im Navigationswording.
Das Navigationswording bestimmt die Bezeichnung von Links, Rubriken und Buttons. Welche Begriffe dabei verwendet werden, ist allerdings meist eine Bauchentscheidung der Verantwortlichen und beruht auf Erfahrungswerte.

Die richtige Bezeichnung des Hypertextes entscheidet darüber, wie schnell der Benutzer auffassen kann, welche Informationen ihn an welcher Stelle innerhalb der Website erwarten. Somit ist eine gut gelungene Auswahl des Wordings sehr erfolgskritisch, da evtl. die gleichen Informationen auf den Konkurrenzseiten leichter zu finden sein könnten. Dies führt zu einer schnellen Abwanderung der Besucher auf andere Seiten.
Probleme gibt es vor allem bei der Verwendung unternehmensinterner Ausdrücke, wie es z.B. im Bankenwesen üblich ist. Dies findet man ebenfalls oft bei der Strukturierung der Site, bei der die Macher sich an den gewöhnten internen Wortgebrauch halten. Doch den Website Betreibern ist dies nur begrenzt vorzuwerfen, denn oft hat schon eine Art Gewöhnung und somit eine Entstehung von blinden Flecken stattgefunden.

Ebenso führen Wortschöpfungen und Kunstworte zu Verwirrung. Im oben genanntem Beispiel des Autokonfigurators von VW (Kap. 5.4.3) ist nicht direkt ersichtlich, was sich hinter diesem Feature verbirgt. Usability Tests haben z.B. ergeben, dass Nutzer sich vorstellen, dahinter verbürge sich eine “automatische Konfiguration des Computers”. Solche Wortschöpfungen mögen den Machern gefallen, fraglich ist jedoch die Gebrauchstauglichkeit solcher Begriffe.

Weitere Verständnisprobleme findet man bei der Verwendung von Anglizismen im Internet, was wieder zum Gedanken des User centered Designs führt. Diese englischsprachigen Ausdrücke stammen meist aus den Anfangszeiten des Internets, sie sind heute allerdings mit anderen Augen zu sehen: Durch die weite Durchdringung des Netzes in der Bevölkerung sind nicht nur junge, gut ausgebildete Menschen Nutzer des Internets, sondern auch zunehmend ältere Personen und solche, die über keine guten Englischkenntnisse verfügen.
Um die Nutzer besser zu verstehen und um auf deren Erfahrungen und Kenntnisse besser eingehen zu können, führte die Münchener Medienagentur Die Argonauten die repräsentative Studie Klartext durch, die aufzeigen sollte, welche Begriffe von welcher Nutzergruppe verstanden werden und welche nicht. Dabei sollten vor allem auf die soziodemografischen Variablen Englischkenntnisse und Interneterfahrung Acht gegeben werden.
In die Untersuchung wurden klassische Streitfälle im Navigationswording einbezogen. Eine Ãœbersicht dieser Wörter und die Verständlichkeit bei den Nutzergruppen nach Interneterfahrung in Prozent zeigt folgende Tabelle:

Abbildung 38: Das Verständnis von Navigationswording in Abhängigkeit der Interneterfahrung.
Quelle: Bopp (2001), Studie Klartext, S. 27.

Das Verständnis der Betitelung von Links hängt somit vor allem vom Ausmaß der Interneterfahrung der Benutzer ab. Bei den Neulingen lassen sich große Defizite feststellen, was das Verständnis dieser Wörter angeht. (Die Klassifizierung der Nutzer in die einzelnen Gruppen erfolgte durch eine Selbsteinschätzung der teilnehmenden Personen).

Ein weiteres, generelles Problem bei der Navigation besteht in der Mehrdeutigkeit vieler Wörter und Ausdrücke. Nicht immer verstehen die Benutzer das gleiche unter einem Wort wie die Macher einer Website. Probleme bereiten vor allem Abstraktionen von Rubrikeinteilungen.

Dies war ebenfalls Bestandteil der Studie Klartext. Es wurde gefragt, welche die wichtigsten Elemente von Standardrubriken sind. Die Funktionen und Inhalte der Site müssen den einzelnen Navigationsrubriken auf optimale Weise, also intuitiv und durch leichtes Auffinden, zugeordnet sein. Vor allem für Anfänger sollten die jeweiligen Angebote durch einen zusätzlichen erklärenden Text zugänglich gemacht werden.
Folgende Tabelle zeigt die Empfehlungen, die auf dieser Studie basieren. Wie zu erkennen ist, kann bei der Auswahl der passenden Begriffe durchaus differenziert werden. Dabei ist auf die Zielgruppe und deren Interneterfahrung zu achten.

Obwohl die Ergebnisse zeigen, dass in Einzelfragen Gruppenunterschiede bestehen, ist ein Prozess der Standardbildung bei Navigationswordings im deutschsprachigen Internet zu beobachten.

Abbildung 39: Empfehlungen zum Navigationswording
Quelle: Bopp (2001), Studie Klartext, S. 61.

Die Begriffe Guided Tour und Skip Intro sollten nicht verwendet werden, sondern durch deutschsprachige Alternativen ersetzt werden. Dagegen werden einige englische Navigationsbegriffe auch von Internetneulingen akzeptiert und verstanden, darunter Login/Logout, Newsletter, Download und Chat. Diese Webfachausdrücke haben zudem den Vorteil, dass sie eindeutig mit dem Internet assoziiert werden.
Insgesamt bleibt anzuraten, den richtigen Mix aus deutsch- und englischsprachigen Begriffen zu finden und somit die Zielgruppe bestens zu unterstützen.

Abgelegt unter Kap6 Site-Design | Keine Kommentare »

6.2.4 Alternative Navigationsmittel

Erstellt von admin_usability am 2. März 2006

Nachdem die Struktur und die Organisation der einzelnen Seiten festgelegt worden ist, sollte vor allem bei großen Sites mit vielen einzelnen Seiten an alternative Navigationsmittel gedacht werden.
Darunter fallen Suchfunktionen, Indizes, Sitemaps und Pull-Down-Menüs. Diese Shortcuts sollen die Besucher unterstützen, in dem sie ihnen schnelles und leichtes Auffinden von bestimmten Informationen innerhalb des Gesamtangebotes ermöglichen.

Außerdem soll den Lesern ohne großen Aufwand eine klare Vorstellung vom Umfang und der Strukturierung des Angebotes bereitgestellt werden. Dies geschieht am besten durch Sitemaps, die ein exaktes grafisches Abbild der einzelnen Rubriken und deren Verbindung untereinander aufzeigen. Hier ist allerdings auf eine Grafikoptimierung zu achten, damit sich die Ladezeit in Grenzen hält. Alternativ dazu bieten sich textbasierte Indizes an, die ebenfalls kurz, schnell und klar den Aufbau der Site vermitteln soll.

Suchfunktionen sind auf großen Seiten mittlerweile zum Standard geworden und auch für kleine Seiten eine sinnvolle Erweiterung der Navigation. Jakob Nielsen teilt in diesem Zusammenhang die Nutzer in drei verschiedene Typen ein. Der Such dominierte Benutzer betritt eine Seite und steuert sofort die Suchfunktion an. Diese Typen sind Aufgabenorientiert und deshalb kaum interessiert einen Ãœberblick zu gewinnen. Der zweite Typ ist Link orientiert und hangelt sich von Link zu Link durch das Angebot. Der dritte Typ ist letztlich beides zugleich und hat keine bestimmte Präferenzen.

Doch bei der Konstruktion einer Suchmaschine stehen einige Fallstricke im Weg. Die meisten Suchmasken sind aufgrund der vielen Suchoptionen unbrauchbar und liefern zudem ellenlange Ergebnislisten, so dass die Auswahl des richtigen Links letztendlich schwer fällt.

Jedoch kann eine Suchmaschine keine gut strukturierten und navigierbaren Seiten ersetzen. Diese beiden Methoden – sich über Menüs vorzuarbeiten und per Suchbegriff zu suchen – sollten sich optimal ergänzen.
Diese Shortcuts sind exzellente Tools, es mangelt ihnen aber an Flexibilität, so dass sie nicht als stand-alone-Feature nützlich sind.

Abgelegt unter Kap6 Site-Design | Keine Kommentare »

6.3 Zusammenfassung: Site-Design & Usability

Erstellt von admin_usability am 1. März 2006

Die Homepage sollte dem Besucher einen Ãœberblick über den angebotenen Inhalt der gesamten Site geben und ihn diesen schmackhaft machen.

Schon hier sollte eine gewisse Struktur der Informationen erkennbar sein und dem Nutzer einen Zusammenhang des Inhalts liefern. In der Information Architecture unterteilt man Organisationssysteme von Webseiten in Organisationsschemata und –strukturen. Organisationsschemata sollen den Inhalt in logisch zusammenhängende Teile strukturieren, während Organisationsstrukturen Beziehungen zwischen diesen Teilen herstellen sollen. Die meist verwendete Struktur im Web ist die hierarchische, bei der die inneren Seiten um eine Startseite angeordnet sind.

Beim Navigationswording ist auf eine klare, sinnvolle und einfache Beschriftung von Rubriken, Links und Buttons zu achten. Nur so weiß der Benutzer, was sich hinter den einzelnen Links verbirgt und dass er auch das erhält, was er angefragt hat.

Alternative Navigationsmittel wie Suchfunktionen oder Sitemaps sollen den Besucher bei der Informationssuche unterstützen und somit die Navigationselemente ergänzen.
Was bedeuten nun die Zielgrößen Effektivität, Effizienz und Zufriedenheit für diese Website-Dimension?
Wie beschrieben wurde, besteht eine Website aus verschiedenen miteinander in Beziehung stehenden Seiten, allen voran der Homepage. Effektiv ist eine gesamte Website dann, wenn die Links zwischen den einzelnen Seiten, aus denen eine Website besteht, vorhanden und erkennbar sind. Dazu gehören nicht nur Links in der Navigation, sondern auch im Bereich des Contents. Durch die Homepage als Eingang in die Website soll ein bestimmter Flow hervorgerufen werden, der die Verfolgung bestimmter Ziele und Zwecke ermöglichen soll. Dieser Flow kann durch entsprechende Gestaltung der Homepage unterstützt werden.
Bezüglich der Effizienz hat der Nutzer bestimmte Erwartungen an die Verlinkung: Navigationshierarchien müssen erkennbar sein, Rückschritte müssen möglich sein und der User muss in jedem Augenblick wissen, wo er sich befindet. Dazu gehört auch ein eindeutiger Homebutton auf jeder einzelnen Seite, der auf die Startseite des Angebots zurückführt.

Zufriedenheit stellt sich beim Nutzer ein, wenn verschiedene Wege und Orientierungsmöglichkeiten angeboten werden. Neben einer übersichtlichen Navigationsleiste machen bspw. eine Sitemap oder eine Volltextsuche einen Auftritt schnell navigierbar.

Abgelegt unter Kap6 Site-Design | Keine Kommentare »