Usability Diplomarbeit

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



4.5 Typographie



Der Inhalt sollte so geschrieben und visuell aufbereitet sein, dass dieser möglichst die Aufgaben und Ziele des Users unterstützt. Dabei sollte die Formatierung und die Anordnung der Texte das Lesen erleichtern. Hier ist speziell auf einige Eigenheiten des Internets einzugehen, die auf herkömmliche Druckerzeugnisse nicht zutreffen.

Obwohl im nächsten Teil dieser Arbeit näher auf das Schreiben fürs Web eingegangen wird, soll an dieser Stelle kurz etwas Elementares zum Verständnis der Schriftaufbereitung im Web vorgegriffen werden: Jakob Nielsen hat herausgefunden, dass der Leser am Bildschirm nicht haargenau jedes Wort liest, sondern den Text nur überfliegt. Somit versucht der Benutzer schnellstmöglich sich einen Überblick zu verschaffen um die Relevanz des Textes zu ermitteln und eventuell an die interessanten Informationen zu gelangen. Dies nennt man scannen. Es beeinflusst das Layout der Schrift und somit auch der Texte. Der User überfliegt den Text, sucht sich interessante Schlüsselwörter, Sätze oder Absätze heraus, während er andere Teile der Seite keine Bedeutung schenkt.
Der erste Grund warum User nicht lesen sondern scannen, ist der, dass das Bildschirmlesen mühsamer ist als Lesen auf dem Papier. Studien haben gezeigt, dass das Lesen am Bildschirm 25 bis 30 % langsamer ist und der Leser somit unkonzentrierter und ungenauer liest. Dies ist auch weiterhin ein Grund, warum Internetseiten oft ausgedruckt werden. Vom Lesen auf dem Papier sind wir sehr fein gestaltete, scharfe und klare Schriftbilder gewöhnt. Im Printbereich fängt die bessere Lesbarkeit bei 300 Punkte pro Inch (dpi) an, bei Büchern, Zeitschriften und anderen Drucksachen sind wir zwischen 1200 und 2400 dpi gewöhnt. Dagegen haben die herkömmlichen Monitore eine geringe Zeichenauflösung von 72 dpi beim Mac und 96dpi beim PC.

Hinzukommt das Flimmern des Bildschirms und die Tatsache, dass der Benutzer in eine Lichtquelle blickt und der Hintergrund nicht wie beim Papier die Lichtstrahlen reflektiert.
Für die Darstellung auf dem Bildschirm empfehlt es sich besonders einfache und stabil gestaltete Schriftarten zu verwenden. Grundsätzlich unterscheidet man in der Typografie Serifenschrift und serifenlose Schrift. Serifen sind die kleinen Häkchen und Schnörkel an den Buchstaben und haben die Aufgabe diese voneinander abzugrenzen. Allerdings sind bei 72 dpi und einer kleinen Schriftgröße nur wenige Pixel in Funktion und das Lesen fällt schwer. So gibt es verschiedene Schrifttypen, die speziell für die Bildschirmdarstellung optimiert wurden. Beim Mac sind das die Schriften Chicago, Geneva, Monaco und New York. Bei Windows waren das bisher die Arial und die Times, die allerdings immer mehr von der Verdana und Georgia abgelöst werden.

Problematisch ist in dieser Hinsicht, dass diese genannten Schriften beim Benutzer auf dem Rechner vorhanden sein müssen. Ist eine in HTML angegebene Schriftart nicht installiert, so wird diese durch eine ähnliche ersetzt. Deshalb ist die Wahl der Schrift nur auf einige wenige beschränkt. Man könnte die Schriften als Grafiken darstellen, doch dem stehen einige Probleme entgegen: die Ladezeit wird ansteigen, sie sind nicht editierbar und bei wechselndem Inhalt schwer zu aktualisieren und entsprechen so nicht dem Sinn von Hypertexten. Ebenso kann der Inhalt von Suchmaschinen nicht erfasst werden. Außer bei Corporate Design Elementen wie Firmenlogos sollte darauf weitgehend verzichtet werden.
Zu beachten ist zusätzlich, dass jede Schriftart einen eigenen Charakter hat, der eine Textaussage verstärken oder abschwächen kann. So sollte die Schriftart zum Inhalt passen, eine altertümliche Schriftart z.B. hat nichts auf einer PC-Shoppingsite zu suchen. Match the typeface to the content nennen dies die Amerikaner.

Eine weitere Frage ergibt sich bei der Wahl der Schriftgröße. Im Gegensatz zum Buchdruck sollte beim Screendesign mit einer größeren Schriftart gearbeitet werden. Eine Grundregel lautet hier: lieber zu groß als zu klein. Auch hier entsteht das Problem, dass Mac und PC Schriften in gleicher Punktgröße unterschiedlich groß darstellen. Folgende Screenshots auf der nächsten Seite zeigen einen Vergleich in unterschiedlichen Browsern. Klar zu erkennen ist, dass der Mac die Schriften kleiner anzeigt als ein Windows-PC. Die Serifenschrift Times ist zudem schwer leserlich.
Optimal wäre, den Benutzer selbst entscheiden zu lassen, wie groß die Schriftarten angezeigt werden sollen. Denn fast jeder hat andere Empfindungen, wann ein Text am besten lesbar ist. Die gängigen Browser lassen den User selbst entscheiden, wie groß der Text darstellbar sein soll. So lassen sich bspw. beim IE 6.0 über das Menü Ansicht à Schriftgrad die Größe der Schriften einstellen. Defaultwert ist hier Mittel, welches in HTML einer Größe von drei und auf dem Bildschirm einer Schrift von 12 Punkten entspricht. Doch fraglich ist, ob diese Browseroption beim User bekannt ist und auch benutzt wird.

Abbildung 16: Vergleich von Schriften auf PC und Mac

Abbildung 16: Vergleich von Schriften auf PC und MacQuelle: http://www.upuauet.com/_webworld/typo/vergleich_02.html

Meist wurde die Schriftart- und größe per font- Anweisungen des HTML Standards angegeben. Dies wird heute immer öfters durch CSS ersetzt, welches 1996 erstmals in HMTL implementiert wurde und von der 4er-Browsergeneration weitgehend unterstützt wird. CSS bietet eine einfache Möglichkeit Texte zu formatieren. Dadurch sind vielfältige Möglichkeiten geboten, schränken den User allerdings auch ein. So funktioniert die oben beschriebene Schriftgrößen-Einstellung nicht und der Besucher ist auf die definierte Größe festgelegt.
Dagegen sind aber auch neue Möglichkeiten gegeben den User das Design bestimmen zu lassen. Bei www.css-design.de lässt sich z.B. aus acht verschiedene Designs wählen und somit das Erscheinungsbild verändern. Die folgende Screenshots zeigen eine Seite, auf der eine Option geboten wird, mit der der User die Schrift über einen Button größer einstellen kann. Falls der User die Browsereinstellung nicht kennt, wird er somit direkt hingewiesen, dass es möglich ist, die Schrift zu vergrößern.

Abbildung 17: Möglichkeit zum Vergrößern der Schrift [AM 8]

Abbildung 17: Möglichkeit zum Vergrößern der Schrift [AM 8]

Viele Grundsätze aus der traditionellen Typografie gelten auch beim Screen-Design. Dazu gehören solche Selbstverständlichkeiten wie die Vermeidung von GROSSBUCHSTABEN, Mischung von übermäßig vielen Schriftarten, überlange Zeilen mit mehr als 80 Buchstaben oder einer Vermeidung von dominierenden Hintergrundbildern. Darauf soll hier nicht näher eingegangen und stattdessen als gegeben voraussetzt werden.
Abschließend soll auf eine Studie eingegangen werden, die explizite Handlungsempfehlungen bzgl. des Webdesigns und an dieser Stelle speziell der Typografie gibt.

Ende 2001 haben Jakob Nielsen und Marie Tahir 50 Homepages untersucht und grundlegende Statistiken veröffentlicht. Dabei handelte es sich nicht nur um nordamerikanische Projekte, sondern Seiten aus allen Kontinenten. Wie sehr kulturabhängige Eigenheiten berücksichtigt wurden, bleibt allerdings unklar. So waren die meistbenutzten Schriften serifenlos. Lediglich 2 Homepages benutzten Schriftarten mit Serifen. Meist wurde eine Größe von 12 Pixel verwendet (Body-Text Size) und die Schrift schwarz auf weißem Hintergrund dargestellt. Nur 8 Seiten benutzen blaue oder graue Schrift für den eigentlichen Inhalt (Body-Text Color). Aus diesen Inspektionen leitet Jakob Nielsen einige Richtlinien ab, die der Lernförderlichkeit entgegenkommen, aber dennoch keine Axiome darstellen sollen. Dabei stützt er sich auf diese erwähnten 50 Homepage-Inspektionen als auch auf Erfahrungen aus anderen Usertests. Webseiten funktionieren am besten, indem bekannte Stilmittel eingesetzt werden, so der Gedanke Nielsen’s. User werden von anderen Internetseiten wissen, wie die jeweilige Seite zu benutzen ist.

Abbildung 18: Handlungsempfehlungen aus der Studie 50 Homepages Deconstructed

Abbildung 18: Handlungsempfehlungen aus der Studie “50 Homepages Deconstructed”

Diese Tabelle zeigt die in diesem Zusammenhang wichtigsten Erkenntnisse. Die Stärke der Empfehlung wurde durch eine Sternchenrangfolge operationalisiert. Drei Sterne bedeuten, dass diese Richtlinie unbedingt befolgt werden sollte, ein Stern ist dagegen die niedrigste Stufe und kann gebrochen werden, wenn eine bessere Lösung sich anbietet. Im Teil 6.1 Homepage soll nochmals auf diese Studie verwiesen werden.



Social Bookmarking
Bookmark bei: Mr. Wong Bookmark bei: Webnews Bookmark bei: Icio Bookmark bei: Oneview Bookmark bei: Linkarena Bookmark bei: Folkd Bookmark bei: Yigg Bookmark bei: Digg Bookmark bei: Del.icio.us Bookmark bei: Reddit Bookmark bei: Simpy Bookmark bei: StumbleUpon Bookmark bei: Slashdot Bookmark bei: Netscape Bookmark bei: Furl Bookmark bei: Yahoo Bookmark bei: Spurl Bookmark bei: Google Bookmark bei: Blinklist