Web + Text

Web + Text
KP Ludwig John
Web + Text
Web+Text
Textgestaltung für Webseiten
Die Vermittlung von Inhalten über Textinformation
spielt auch im Web eine entscheidende Rolle.
Die Prämissen für dessen rezeptionsoptimierte Aufbereitung
unterscheiden sich auf Grund der Nutzungsumgebung jedoch ganz
wesentlich von denen für gedruckte Medien.
KP Ludwig John
Web + Text
Web+Text
Textgestaltung für Webseiten
Typografie und Textgestaltung werden oft als gegeben hingenommen
und selten bewusst wahrgenommen.
Ihre Konsequenzen für Design und Kommunikationserfolg von
Veröffentlichungen sind jedoch erheblich.
Einfluss auf:
-
KP Ludwig John
Übersichtlichkeit der Seite
Aufmerksamkeit / Interesse für bestimmte Inhalte
Lesbarkeit (Lesetempo / Leserichtung)
Textverständlichkeit (!)
Imagewirkung für den Autor / Verlag / Inhalt
Web + Text
Web+Text
Textgestaltung für Webseiten
Ziele:
- Lesen soll nicht ermüden
- Nutzer soll sich schnell auf der Seite zurecht finden
entsprechend eigenen Interessen Wesentliches
von Unwesentlichem unterscheiden
- Aufmerksamkeit auf der Seite halten (fesseln)
- Botschaft der Seite verständlich übermitteln
KP Ludwig John
Web + Text
Web+Text
Textgestaltung für Webseiten
Worauf können wir zurück greifen?
- Wahl der Schriftarten (Gruppen) und Größe
- Anordnung auf der Seite (Schriftsatz)
- Strukturierung / Formulierungen der Inhalte
- Verwendung strukturierender Elemente (visuelle Ankerpunkte)
KP Ludwig John
Web + Text
Web + Text
Fließtexte
Lesbarkeit + Verständlichkeit
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Schriftart + Schriftsatz
Viele Möglichkeiten der Schriftgestaltung für den Druckbereich
stehen dem Webdesigner nicht oder nur mit begrenzter Zuverlässigkeit zur Verfügung:
- sicherer Zugriff nur auf browserunterstütze Systemschriften
Schriften werden referenziert, nicht eingebettet
möglicherweise steht ein ausgewählter Font auf Nutzergerät nicht zur Verfügung
- oft wird deshalb nur eine bestimmte Schriftfamilien vom Designer angegebenen
aus der dann nach Verfügbarkeit auf dem Nutzergerät ausgewählt wird.
- keine Möglichkeit des Ausgleichens von Buchstabenabständen
- reale Darstellungsgröße des Schriftgrades
kann vom Nutzer individuell verändert werden
(Browsereinstellungen, Bildschirmauflösung)
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Schriftart + Schriftsatz
Welche Entscheidungen sind vom Webdesigner
bezüglich Schriftart und Schriftsatz verlässlich zu treffen?
-
KP Ludwig John
Schriftart (Font): serifenlos oder serifenbetont
Schriftschnitt: normal, fett, kursiv
Schriftsatz: linksbündig, zentriert, Blocksatz
anzustrebende Zeilenlänge
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Schriftart + Schriftsatz
- Font: serifenlose oder serifenbetonte Schrift?
Erfahrungen aus Printbereich:
Es existieren widerstreitende Untersuchungen zu dieser Frage
Tinkers 1963:
Serifenschriften sind leichter und schneller zu erfassen
ähnlich erscheinende Buchstabenkombinationen sind besser unterscheidbar
>> rn m / rn m
Wheildon 1986
bestätigt diese Aussage in breit angelegter Lesbarkeitsstudie
Turtschi 1998
bestreitet bessere Lesbarkeit von Serifenschriften
verweist auf Gesamtheit der Einflussfaktoren auf Lesbarkeit
Empirisch Web:
Wie gehen aktuelle Nachrichtenseiten damit um?
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Schriftart + Schriftsatz
- Font: Grotesk oder Antiqua?
Erfahrungen am Monitor
Monitorauflösung liegt bei ca. 72 - 96 dpi
Retina Display (2012): 220 dpi
(gedruckten Dokumente: bis zu 2540 dpi)
>> kleine Schriftschnitte weniger klar in der Darstellung (Pixeleffekt)
>> Kantenglättung (Antialiasing) weicht Schriftbild auf
erst ab 12 Punkt einsetzen
>> Serifen werden bei geringer Monitorauflösung
nur unzureichend dargestellt
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Schriftart + Schriftsatz
- Font: Grotesk oder Antiqua?
Untersuchungen zur Lesbarkeit von Schriften am Monitor
Wilson 2001
Am Monitor können serifenlose Schriften
sehr viel schneller gelesen werden als Serifenschriften
Eigens fürs Web entwickelte Verdana ist in einer Größe von 12 Punkt
schlechter zu lesen als Arial.
Bei kleineren Größen (10 Punkt) haben Testleser der Verdana
den Vorzug gegeben.
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Schriftart + Schriftsatz
- Font: Grotesk oder Antiqua?
Untersuchungen zur Lesbarkeit von Schriften am Monitor
Bernard et al. 2001
testete 12 unterschiedliche Schriften auf Lesbarkeit; u.a.:
Arial, Comic, Tahoma, Verdana,
Courier, Georgia, Goudy,
Schoolbook,
Times, Bradley, Corsiva
ergab folgende Rangfolge bezüglich Lesbarkeit:
!
KP Ludwig John
Courier
Comic
Verdana
Georgia
Times
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Schriftart + Schriftsatz
- Font: Grotesk oder Antiqua?
Typografische Konsistenz oberstes Gebot
bei Gestaltung textbasierter Inhalte wie bei Navigationselementen
>> viele und zu unterschiedliche Schriften führen zu Unübersichtlichkeit
>> innerhalb der Navigationselemente nur eine Schriftfamilie verwenden
>> bei Verwendung zweier unterschiedlicher Schriftarten:
Schriften gleicher Schriftgruppen nicht mischen
(heben sich zu wenig voneinander ab)
>> typografische Darstellung soll inhaltliche Gliederung
transparent machen.
>> Gliederungsebenen gleicher Ordnung sind immer gleich darzustellen
>> keine Unterstreichungen als Hervorhebungsmerkmal verwenden
kennzeichnen Links im Text
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Schriftart + Schriftsatz
- Schriftsatz: linksbündig, zentriert, Blocksatz?
Erfahrungen aus Printbereich:
Bezüglich Lesbarkeit gelten Blocksatz und linksbündiger Flattersatz
als gleichrangig.
Rechtsbündiger und Mittelachsensatz sind für längere Texte nicht geeignet,
da das Auge große Schwierigkeiten hat den Beginn der nächsten Zeile zu finden.
Empirisch Web:
Wie gehen aktuelle Nachrichtenseiten damit um?
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Schriftart + Schriftsatz
- anzustrebende Zeilenlänge
Erfahrungen aus Printbereich:
Lesbarkeit hängt auch von Breite der Spalte (Zeilenlänge) ab.
Zu schmale Spalten verringern die Lesegeschwindigkeit, da das Auge von
Zeile zu Zeile springen muss.
Sehr breite Spalten hemmen den Lesefluss, , weil das Auge Schwierigkeiten hat,
den Anfang der nächsten Zeile zu finden.
Optimale Zeilenlänge liegt zwischen 50 und 60 Zeichen.
Bei mehrspaltigem Satz geringer (30 -40 Zeichen)
Empirisch Web:
Wie gehen aktuelle Nachrichtenseiten damit um?
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Formulierung / Strukturierung
Beobachtung:
Wir lesen keine Texte im Netz, wir überfliegen sie!
Dokumente, die länger als ein paar Absätze sind,
werden - am Bildschirm - nicht mehr gelesen.
Bei diesem “Querlesen” (Scanning) werden nur 75% des Textes erfasst.
Am ehesten werden Zusammenfassungen gelesen
(Vgl. Untersuchung Stanford / Poynter 2000)
Das Lesen am Monitor erfolgt zu ca. 25% langsamer als gedruckte Texte
(Nielsen, 2000)
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Formulierung / Strukturierung
Warum? Spekulationen:
Nutzer weiß um die Fülle des Angebots im Netz und ist immer in Eile.
(information overload)
Auch in gedruckten Publikationen wird nicht alles gelesen, sondern überflogen.
(Gewohntes Verhalten aus Zeitungen und Magazinen)
Beim “Scannen” des Angebots reagieren wir auf Reizwörter
(kostenlos, Angebot, Sex, eigener Name) sowie visuelle Ankerpunkte
und steigen dann tiefer in die entsprechenden Inhalte ein.
(aktives lean forward Verhalten interaktiver Mediennutzung)
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Formulierung / Strukturierung
Quelle: Steve Krug, Don’t make me think 2002
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Formulierung / Strukturierung
Quelle: Steve Krug, Don’t make me think 2002
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Eye-Tracking Studie
Eye-Tracking Visualisierungen zeigen, dass die Augenbewegung der Nutzer
beim Lesen von Webseiten oft in ein F-förmiges Muster bildet:
zwei horizontalen Linien folgt ein vertikaler Streifen.
Jacob Nielsen:
In our new eyetracking study, we recorded how 232 users
looked at thousands of Web pages.
We found that users' main reading behavior was fairly consistent across
many different sites and tasks. This dominant reading pattern looks
somewhat like an F.
Quelle: Jacob Nielsen, useit.com, alert box vom 17.April 2006 (http://www.useit.com/alertbox/reading_pattern.html)
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Eye-Tracking Studie
Wärmebild:
Bereiche die von Nutzern am intensivsten
angeschaut wurden sind rot dargestellt.
Gelbe Zonen zeigen weniger intensiv betrachtete
Bereiche.
Blaue Bereiche wurden am wenigsten betrachtet.
Graue Bereiche wurden überhaupt nicht
angeschaut.
Text “wir über uns” einer Firmenwebseite
Quelle: Jacob Nielsen, useit.com, alert box vom 17.April 2006 (http://www.useit.com/alertbox/reading_pattern.html)
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Eye-Tracking Studie
• Users first read in a horizontal movement,
usually across the upper part of the content
area. This initial element forms the F's top bar.
• Next, users move down the page a bit and
then read across in a second horizontal
movement that typically covers a shorter area
than the previous movement. This additional
element forms the F's lower bar.
• Finally, users scan the content's left side in a
vertical movement. Sometimes this is a fairly
slow and systematic scan that appears as a solid
stripe on an eyetracking heatmap. Other times
users move faster, creating a spottier heatmap.
This last element forms the F's stem
Text “wir über uns” einer Firmenwebseite
Quelle: Jacob Nielsen, useit.com, alert box vom 17.April 2006 (http://www.useit.com/alertbox/reading_pattern.html)
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Eye-Tracking Studie
If you squint and focus on the red (most-viewed)
areas, heatmaps show the expected F pattern.
Of course, there are some differences.
The F viewing pattern is a rough, general shape
rather than a uniform, pixel-perfect behavior.
On this e-commerce page, the second crossbar of
the F is lower than usual because of the
intervening product image.
Users also allocated significant fixation time to a
box in the upper right part of the page where the
price and "add to cart" button are found.
Produktseite einer e-commerce Site
Quelle: Jacob Nielsen, useit.com, alert box vom 17.April 2006 (http://www.useit.com/alertbox/reading_pattern.html)
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Eye-Tracking Studie
The second crossbar of the F is longer than the
top crossbar, mainly because the second
headline is longer than the first.
In this case, both headlines proved equally
interesting to users, though users typically
read less of the second area they view on a
page.
Suchmaschinen Ergebnisseite
Quelle: Jacob Nielsen, useit.com, alert box vom 17.April 2006 (http://www.useit.com/alertbox/reading_pattern.html)
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Eye-Tracking Studie
Schlussfolgerungen:
• Users won't read your text thoroughly in a word-by-word manner. Exhaustive reading is
rare, especially when prospective customers are conducting their initial research to
compile a shortlist of vendors. Yes, some people will read more, but most won't.
• The first two paragraphs must state the most important information.
There's some hope that users will actually read this material, though they'll probably read
more of the first paragraph than the second.
• Start subheads, paragraphs, and bullet points with information-carrying words that
users will notice when scanning down the left side of your content in the final stem of their
F-behavior.
They'll read the third word on a line much less often than the first two words.
Quelle: Jacob Nielsen, useit.com, alert box vom 17.April 2006 (http://www.useit.com/alertbox/reading_pattern.html)
KP Ludwig John
Web + Text
KP Ludwig John
Web + Text
Spiegel online 8.Okt. 2011
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Formulierung / Strukturierung
Erfahrungen aus Printbereich:
- Hauptthema in Teilthemen untergliedern
- verschiedene Sichtweisen separat behandeln (Betroffene, Experten, Zeugen)
- zeitliche Staffelung
(aktuellere Themen exponierter als Hintergrundinformationen)
- große Informationseinheiten in Cluster oder Chunks gruppieren.
(thematisch zusammen gehörende Einheiten)
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Gestaltungsmittel Formulierung / Strukturierung
Erfahrungen aus Printbereich:
- Hierarchische Ordnung der Chunks kenntlich machen:
Haupttext mit Überschrift
Nebentexte mit Überschrift
Fotos mit Bildunterschrift
Infografiken, Logos
Beiträge selbst können mit Zusammenfassungen und Vorspännen
versehen werden.
>> entscheidende Hilfe beim selektiven Lesen!
Empirisch Web:
Wie gehen aktuelle Nachrichtenseiten damit um?
KP Ludwig John
Web + Text
Web + Text
Empfehlung
Straffen, Portionieren, Strukturieren
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Empfehlung: Texte Straffen, Portionieren, Strukturieren
Fasse dich kurz!
Man sollte nicht mehr als 50% des Textes schreiben,
den man für ein gedrucktes Buch über das gleiche Material
verwenden würde.
Unterteile lesefreundlich!
Es ist den Benutzern nicht zuzumuten, langgezogenen
Textabschnitte zu lesen.
Unterteile in kurze Absätze, Untergruppierungen und Listen.
Verwende Hypertext!
Verteile die Information auf mehrere Seiten.
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Empfehlung: Texte Straffen, Portionieren, Strukturieren
Lasse nutzlose Wörter weg
Warum?
- Weglassen ornamentaler Wörter strafft den Stil
- Reduziert das Rauschen auf der Seite
- Stellt nützlichen Inhalt deutlicher heraus
- Macht Seite kürzer und für den User besser auf einen Blick
erfassbar
Wo kann ohne Probleme gespart werden?
- nette Begrüßungsfloskeln
- Bedienungsanweisungen (werden ohnehin nicht gelesen, bzw.
nur, wenn intuitives Bedienen nicht zum Ziel geführt hat
und also schlechte Gestaltung vorliegt.)
- ggf. sehr konzentriert und knapp halten
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Empfehlung: Texte Straffen, Portionieren, Strukturieren
Überschriften
- klar und eindeutig formulieren
- kurz und sachlich mit Bezug zum eigentlichen Text
- vermeide Sprachspiele und Ironie,
für deren Entschlüsselung der Leser mehr Zeit benötigt
- verwende neben der Hauptüberschrift auch Zwischenüberschriften
zur Gliederung und Strukturierung des Textes
Zusammenfassungen / Vorspanntexte
- folgen unmittelbar der Hauptüberschrift
- erleichtern die Orientierung auf der Seite
- geben relevante Informationen des nachfolgenden Beitrages wieder
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Empfehlung: Texte Straffen, Portionieren, Strukturieren
Prinzip der umgekehrten Pyramide
Am Anfang stehen die wichtigsten Informationen des
Textes
Dann folgen Detailinformationen zu den Kerninformationen
Zuletzt kommen Hintergrundinformationen
- unterstützt das Überfliegen des Textes
- Wesentliches kann an Hand von Schlüsselbegriffen
schnell transportiert werden
Kann auch auf jeden einzelnen Textabschnitt angewandt werden:
- Pro Absatz nur eine Kernaussage formulieren
- oft wird nur der erste Satz eines Absatzes gelesen!
(Stanford / Poynter, 2001)
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Empfehlung: Texte Straffen, Portionieren, Strukturieren
Typografische Textauszeichnungen
Prägnante Begriffe werden typografisch hervorgehoben, z.B. fett
(kursiv ist am Monitor sehr viel schwerer zu lesen)
Zu viele Hervorhebungen hemmen allerdings den Lesefluss!
Kürzungen auf Wortebene
schreibe:
... use statt utilize...
(gleiche Bedeutung aber 2 Silben weniger)
...decided statt made a decision...
und kürze ganze Passagen mit weniger wichtigen Informationen
KP Ludwig John
Web + Text
Web + Text
Empfehlung
Straffen, Portionieren, Strukturieren
KP Ludwig John
Web + Text
Lesbarkeit + Verständlichkeit von Texten aus dem Web
Übung: Straffen, Portionieren, Strukturieren
Nehmen Sie den Beispieltext „Text_zu_kuerzen.rtf“
http://www.hs-augsburg.de/~john/Gestaltung_interaktiver_Medien/
der so in gedruckter Form verbreitet wurde.
Aufgabe:
Formulieren Sie den Text entsprechend seinem inhaltlichen Anliegen neu.
Kürzen Sie dabei den Umfang auf max. die halbe Textlänge!
Bereiten Sie den Text webkonform (!) als html-Seite auf.
Beachten Sie dabei,
die heute behandelten Aspekte der Textgestaltung!
Bringen Sie die Seite als Ausdruck zur Auswertung mit.
KP Ludwig John
Web + Text
Auswertung
in 14 Tagen
KP Ludwig John
Web + Text
Web+Text
Quellen
Bernard et al: A Comparison of Popular online Fonts: Which is the best and When? 2001
Kilian, Crawford, Effective Web Writing, 2001
Krug, Steve; Don’t make me think 2002
Nielsen, Jacob; useit.com, alert box vom 17.April 2006
http://www.useit.com/alertbox/reading_pattern.html
Rada, Holger; Design digitaler Medien, Niemeier Verlag 2002
Stanford Poynter Project: Internet Eyetracking study 2000
Tinker, Miles; Legibility of Print, 1963
Turtschi, Ralf; “Die Mär von der Lesbarkeit” ; in Desktop Dialog 4 / 1998
Wheiidon, Colin; Communicating or Just Making Pretty Shapes; North Sysdney 1986
Wilson, Ralph F.; Text Font Readability Study, 2001
http://www.wilsonweb.com/wmt6/html-email-fonts.htm
KP Ludwig John
Web + Text