CC "Myopa" von 96dpi
Die Lesbarkeit von Internetseiten lässt in vielen Fällen zu wünschen übrig. Da schließe ich meine eigenen Webseiten gar nicht aus. Heute bin ich auf einen Beitrag bei den „Informations Architekten“ gestoßen (ich weiß leider nicht mehr wo), der kurz und knapp erläutert, wie nun die Lesbarkeit von Internetseiten deutlich verbessert werden kann.
Ich habe mich gleich an www.i-shin.de rangesetzt und habe die vorgeschlagenen Punkte eingearbeitet. Ich finde die Ergebnisse verblüffend.
Der Anfang geht sehr schön darauf ein, dass Webdesigner_innen in erster Linie Dienstleister_innen sind. Es geht nicht um ihr Produkt sondern darum, wie es ankommt. Für alle die Webdesign machen, ist dieser Beitrag sicher zu empfehlen.
Liebe Webdesignerin, sag uns nicht, …
- dass wir die Schriftgröße in unserem Browser verändern sollen
- dass überladene Seiten besser aussehen – wähle vorher etwas besser aus, denn das ist nicht unser Job
- dass Scrollen schlecht wäre – denn dann wären ja alle Internetseiten schlecht
- dass Text nicht so wichtig wäre – wenn doch 95% von Webdesign mit Textdesign zusammenhängen
- dass wir eine Brille brauchen
Dann folgen fünf einfache Regeln, wie ich die Lesbarkeit auf Internetseiten erhöhen kann, und den darüber geschilderten Problemen aus dem Weg gehe 🙂 Im Originalbeitrag findet ihr die Regeln ausführlicher und auf englisch.
- Verwende die Schriftgröße bei 100%
- Lasse deinen Text atmen (Stichwort: Whitespace)
- Leserinnenfreundliche Zeilenhöhe liegt bei line-height=140%
- Schwarz und weiß sind kein guter Kontrast im Internet
- Kein Text in Bildern
Internetseiten mit großer Schrift zu gestalten ist schwieriger aber es lohnt sich, da ich mich dabei sehr beschränken muss. Find ich jedenfalls!
marius.zierold 
Hm, hm, hm. Ich wollte schon vor einiger Zeit was zu dem Beitrag hier schreiben, weil mir dazu so viel einfiel. Auch Kritisches, weil ich generell der Ansicht bin, dass gutes Design eben nicht mit Regeln auskommt. Jedenfalls nicht nur. Das fängt bei der 100%-Schriftgröße an. Wenn das ein relativer Wert ist, richtet er sich logischweise nach unterschiedlichen Vorgaben. 100% ist also nicht gleich 100%. In 100% sehen je nach Browser etc. Sachen extrem unterschiedlich aus – und mir ist es meist zu groß, so dass ich die Sachen kleiner darstellen lasse. Will sagen: Solche Dinge, genauso wie Kontrastvorgaben, sind auch eine Frage der eigenen Wahrnehmung (was nicht mit Geschmack verwechselt werden sollte). Anderes Beispiel:Ich kenne genug Leute, deren Monitor hätte aufgrund des Alters oder der Bauart Probleme, diesen leicht rosa Ton links und rechts überhaupt angemessen darzustellen – wo bleibt dann überhaupt der Kontrast? Und seine Funktion, eine Seite zu strukturieren…Funktioniert ein Design überhaupt plattform- und technikübergeifend? Technische Ungereimtheiten, die man im Grunde nicht vorhersehen kann, können aus einer Regel schnell ne Hürde machen. Beispiel: Große Schrift auf kleinem Monitor (oder auch kleinem Fenster) und ich scrolle mich tot. Und tatsächlich bin ich kein Fan des Scrollens. Im Moment bleibt mir aber nichts übrig, ich kann beispielsweise den Text da oben nicht neben dem Eingabefenster zum Kommentar sehen, das Eingabefenster ist für meinen (zugegeben langen) Text auch zu klein, ich scrolle zweifach hoch und runter, um nochmal nachzulesen, einem Link zu folgen, einen Tippfehler auszubessern etc…
Meine Kritik richtet sich also nicht nur diffus gegen die hier angesprochenen konkreten Punkte, denn die Forderung nach mehr Weiß teile ich voll und ganz, aber gutes Design ist eben die blöde Suche nach einer guten Antwort auf ne schwierige Frage. Oder so. Und weil es verdammt viele verschiedene Fragen gibt, glaube ich, dass es eben Webdesign braucht, das eben nicht nur Dienstleistung ist, sondern sich mit dem auseinandersetzt, was da designt wird. Einerseits findet das zu selten statt und man ist mit Wortwüsten im Einheitslook konfrontiert, die krasser sind als zu tiefsten Bleidruckzeiten. Auf der anderen Seite sieht mancher Designer vor Selbstüberschätzung nicht, wie wenig von seinem Design funktioniert, auch wenn es vielleicht typografisch höchst ausgefeilt ist und die verwendeten Farben am Rand der gängigen Farbprofile herumdümpeln. Aber das ist ne andere Frage. Darauf wollte ich nur hinweisen und empfehle einen Blog (bei dem man übrigens viel scrollen kann ;)) namens http://www.slanted.de. Da gibts zwar mehr Print- als Webdesign, aber das nimmt ihm nichts von seiner Kraft, vor allem mich zu späten Stunden vom Arbeiten abzuhalten und mir Gedanken über Typen und Typodesign zu machen, ähem.
Grüße,
Andi.
@Andi vielen Dank erst mal für deine Antwort. Auf ein paar Anmerkungen von dir will ich eingehen, weil ich sonst nicht die Möglichkeit habe, mich ausgiebig mit anderen Meinungen auseinander zu setzen.
zur Schriftgröße: 100% ist eine relative Angabe, da hast du schon recht. Aber die Angabe font-size:12px ist ebenfalls in Abhängigkeit von der Endnutzer_in nur eine relative Größe. Die einzige Möglichkeit Schriftgrößen exakt fürs Web zu skalieren ist die Darstellung von Schrift in Bildern, was wiederum nicht barrierefrei wäre. Relativ ist also bei abweichender Auflösung, Betriebssystem und Grundeinstellung (z.B. Minimale Schriftgröße im Firefox Browser) jede Schriftgröße. Ich habe bei http://browsershots.org/https://marius300482.wordpress.com/ mein Weblog durch 45 Browser/Betriebssysteme laufen lassen und bei 33 Browsern ist das Ergebnis (Schriftgröße) absolut vergleichenswert. Deiner Einschätzung, dass es „extrem unterschiedlich“ aussieht kann ich nicht zustimmen.
zum scrollen: Scrollen auf Webseiten ist für mich vergleichbar mit dem Blättern in einem Buch. Wenn ich in einem dicken Buch lese, dann muss ich auch nach vorne und nach hinten blättern, um an die Informationen zu kommen. Was deine Anmerkung betrifft, wäre ich mir gar nicht sicher, wie es möglich sein sollte, dass ohne scrollen zu realisieren. Also Kommentieren und gleichzeitig lesen. Wenn du ein Beispiel hast, wo das technisch Umgesetzt ist, würde ich mich freuen, weil es an sich eine gute Idee ist. Über die länge des Editofensters, mache ich mir auch mal Gedanken. Das ist wirklich ziemlich klein und eher für kurze Kommentare geeignet.
zu Design vs. Dienstleistung: Wenn ich eine Webseite gestalte, dann bin ich Webdesigner_in. Den Vergleich mit der Suche nach Antworten auf so viele schwierige Fragen finde ich gelungen. Ich persönlich verfolge da einen sehr pragmatischen Ansatz, den ich in all meinen gestalteten Seiten versuche umzusetzen. Ich versuche ihn mal kurz zu erläutern:
Was dieses Weblog betrifft, ist der Mittelteil der wichtige/inhaltliche Teil. Diesen habe ich mit einer Schriftgröße von 100% und einer Line-height von 140% ausgestattet. Ziel ist es, dass regelmäßige Leser_innen und zufällige Besucher_innen, große Teile des Textes schnell aufnehmen können, da genug Platz gelassen wurde (Lesefreundlichkeit). Ich gehe davon aus, dass ich Menschen auch nicht mit einer Zeitung locken könnte, die eine Schriftgröße von 10pt hat. Da gibt es Printbereich sicher auch festgelegte Standards die Lesbarkeit zu erhöhen.
Was die Seitenleisten betrifft, sind sie für die Leser_innen da, die sich über das Thema hinaus für weitere Inhalte interessiert. Deswegen ist der Kontrast etwas Mau und die Schrift etwas kleiner. Da befinden sich aber auch keine längeren Texte sondern nur kurze Hinweise. Das mute ich meinen Leser_innen gerne zu.
Hauptaufgabe für mich in diesem Blog ist die Vermittlung von Inhalten. Christin hat gesagt, dass die Seite wie ein Kinderbuch aussieht. Das empfinde ich als Kompliment, da Kinderbücher für nicht lese-geübte Menschen konzipiert sind. (Kann aber auch sein, dass sie damit die Bilder gemeint hat:)
zu slanted.de: eine sehr hübsche Seite. Die vorgestellten print-Beispiele zeichnen sich alle dadurch aus, dass sie viel Platz lassen. Die Seite finde ich auch sehr stimmig. Sie lassen bei den wichtigen Metadaten vor einem Beitrag und bei der Überschrift viel Platz. Der Text unter dem Bild ist zwar sehr klein, dient aber mehr als Bildunterschrift. Wenn sie mehr Text produzieren würden, wäre mir die Schrift aber wieder zu klein.
Ich glaube, dass sich die Gestaltung von Webdesign im Spannungsfeld von künstlerischem Anspruch, technischer/barrierefreier Umsetzung und Nutzer_innenfreundlichkeit bewegt. Ich stelle den ersten Punkt immer hinten an, da ich für eine barrierefreie Nutzung von Informationen plädiere. Die http://www.i-shin.de Seite hat zum Beispiel den Anspruch, die Fülle von Informationen so sinnvoll wie möglich zu verwalten. Einen Designpreis wird sie nicht gewinnen, aber ihre Leser_innen gut informieren. Und das ist für mich der nachhaltigere Ansatz. Die http://www.slanted.de Seite bietet eine Fülle von Informationen und ein gelungenes Design. Sie richtet sich aber auch an Designer_innen und nicht an Gelegenheitsnutzer_innen.
So. Ich hoffe auf eine Antwort, da ich mich gerne mit dir darüber weiter austauschen möchte.
Hey, ein Dialog. Find ich gut.
„Extrem“ ist vielleicht auch übertrieben formuliert. Aber dennoch bleibt jegliche Vorgabe relativ: Ich kann Firefox ja sagen, dass er die Schrifteinstellungen ignorieren soll, kann eigene Fonts verwenden bzw. als Vorgabemuster einrichten usw. Insofern decken sich unsere Meinungen, aber meine Interpretation von „extrem“ bezieht sich eben darauf, dass ich sehr ungern in Courier oder Verdana lese, während Helvetica grad noch geht. Das mag Haarspalterei sein, aber es ist eben eine Sache der Gewöhnung. Und Du hast Recht, 12pt ist nicht gleich 12pt, klar. Selbst bei gleicher Ausgabegröße unterscheidet sich ja die Anmutung, eine Serifenschrift hat meist kleinere Mittellängen als serifenlose Schriften, das kennt man aus dem Print seit Ewigkeiten und auch der nötige Zeilenabstand/Durchschuss ist abhängig von der Spaltengröße, ergo der Zeilenlänge. Ich will damit die These unterstreichen, dass solche gestalterischen Entscheidungen auf derart viele Einflüsse reagieren müsste, es aber nicht können, dass eine Regel festzulegen quasi nicht möglich ist. Eine Näherung – ja, okay. Da relativiere ich meine Interpretation von „extrem“.
Scrollen:
Das sehe ich anders. Blättern kommt für mich einem Link gleich, nicht dem Scrollen. Manchmal geht der Link nur auf die nächst(folgende) Seite (umblättern) , aber was Navigation angeht, ist der Vergleich noch besser: Ich sehe das Inhaltsverzeichnis und klicke auf den Link bzw. blättere zu der gesuchten Seite. Auch gute Nachschlagewerke besitzen Hypertext-Elemente, Querverweise – das ist ja eine Ebene des Links.
Aber was ist dann Scrollen? Auch eine Buchseite kann ich nicht unbedingt auf den ersten Blick erfassen, meine Augen machen Sakkaden, um das alles nach und nach zu erfassen, Zeile für Zeile kommt der visuelle Rückschwung nach links (in Westeuropa zumindest), ich rutsche mit den Augen langsam nach unten, bei Kindern, die lesen lernen mit Hilfe eines Lineals ist das gut zu beobachten.
D.h. ich bin nicht gegen Scrollen allgemein, aber Seiten mit vielen Informationen müssen die auch auf mehreren Ebenen gliedern können und nicht nur linear hin-/untereinander darstellen. Viele Nachrichtenseiten vereinigen Texte mehrerer A4-Seiten auf einer page. Dagegen richtet sich meine Kritik, weil es dann unübersichtlich wird. Blättern strukturiert, weil ich verschiedene Seiten habe, Scrollen hingegen ist ein oben-unten oder links-rechts, also eine zweidimensionale Bewegung, Blättern eine dreidimensionale (vergleiche wieder ein dickes Nachschlagewerk). Damit kann ich eben Informationen besser zuordnen: z.B. Info XY war doch auf der vorletzten Seite oben irgendwo oder im vorletzten Absatz. Ich plädiere dafür, dass Informationen handhabbar bleiben.
Edito-Fenster: Die Antwort schreibe ich übrigens in einer Textverarbeitung, wo ich die Absätze jeweils nacheinander kommentiere, ist aber auch dem geschuldet, was ich sagen will). Hilfreich ist entweder eine Zitatfunktion (geht auch manuell, klar) oder ein floating window, das der Scrollbewegung folgt. Aber gut, das wäre Flashkram und vielleicht zu aufwendig. Ein bisschen größer, das Fenster: reicht schon.
Ich bin nicht für Mikroschriften (auch wenn sie ihren Reiz haben), aber wie gesagt, ich habe vor allem aus dem Printbereich die Erfahrung, dass es zwar Hinweise geben kann, aber kaum Regeln. In einer Zeitung wäre eine 10pt-Helvetica undenkbar und zu groß, eine 11-pt-Garamond oder vergleichbare Serifenschrift vielleicht gerade groß genug, auch siehe oben… Für das letzte Buch, an dem ich mitgearbeitet habe, haben wir extrem kleine Versionen der serifenlosen Univers (8 und 9 Punkt) verwendet, weil es kleine, kurze Absätze waren, die trotzdem lesbar waren, während ich für eine andere Aufgabe die gewählte 10,5-pt-Spectrum (mit Serifen) gerade so richtig fand. Auch das sind auf den ersten Blick minimale Unterschiede, die sich jedoch im Umfang einer Publikation in etlichen Seiten mehr oder weniger niederschlagen können und natürlich vor allem in der Lesbarkeit. Zurück zum Web: Deine Seite ist gut lesbar, keine Frage, aber z.B. für meinen persönlichen Geschmack zu groß gesetzt. Wie gesagt, keine Kritik, sondern nur der Hinweis, dass jegliche Entscheidung anders wirken kann, als man es vielleicht beabsichtigt, aber das weißte ja. Vielleicht kann man es so sehen, dass man sich bemüht, für eine möglichst große Anzahl an Menschen lesbar zu gestalten – das kann dann der kleinste gemeinsame Nenner sein.
Deinem letzten Absatz stimme ich zu und Du hast ja selbst einen wichtigen Punkt hinzugefügt: An wen adressiert sich meine Information? Designe ich für eine eingegrenzte Gruppe von Menschen, habe ich vielleicht mehr Freiheiten, beschränke ich aber auch die Reichweite. Dafür ließen sich etliche Beispiele in unzähligen Kommunikationsformen finden (Radio, Zeitung, Handy/MMS etc. und vieles mehr. Gestaltung, Barrierefreiheit und Usability sind gut gewählte Punkte, um Webdesign zu machen und zu beurteilen. Aber wie wir festgestellt haben, überlappen sie sich und sind nicht nur Pole, die sich gegenüberstehen, deshalb ist es wohl so schwer, besagte Lösungen oder Regeln zu finden.
Hm, das war wieder viel, aber hat mir Spaß gemacht zu antworten. Wenn mehr Zeit ist, suche ich vielleicht das nächste Mal auch aussagekräftigere Beispiele als nur „Univers 9pt“ zu schreiben, das ist recht abstrakt, leider. Naja. Zumindest ein paar Links.
http://praegnanz.de/essays/classic-fonts-univers/
http://www.100besteschriften.de/10_Univers.html#a10
Leider nur zur Ansicht die spectrum in der Monotype-Version:
http://www.fonts.com/DE/detail.htm?pid=414246
Andi
Mein erster echter Dialog auf diesem Blog.
So wie es aussieht liegen wir bei wichtigen Punkten nicht sehr weit auseinander. Ich will kurz auf praktische Überlegungen und Probleme eingehen, die Webdesign so mit sich bringen und über die ich bis jetzt nur am Rande nachgedacht habe.
Das Kommentarfenster habe ich nach deinen Anmerkungen vergrößert. Die Schriftgröße beträgt nun 90%. Jetzt sollte es ein wenig mehr Spaß machen auch längere Kommentare zu schreiben. Kleiner wollte ich die Schrift nicht machen, da es sonst schwer wird Fehler zu finden.
Ich habe mir die Schriftart Univers angesehen und finde sie sehr gelungen. Wie ich bei http://www.typetester.org/ feststellen musste, ist sie aber bei keinem System vorinstalliert. Fürs Webdesign eignet sich diese Schrift also nicht. Meine Einstellungen für diese Webseite lauten: font:100% Helvetica, Arial, Verdana, Trebuchet MS sans-serif;. Helvetica ist immerhin bei Mac-Systemen (und Linux) vorinstalliert. Die Schriften danach sind eher für Windows gedacht, sehen aber bei weitem nicht so gut aus (Kompromisslösung). Eine Schrift mit Serifen (Georgia – immerhin als sichere Schrift eingestuft) wollte ich nicht wählen, da ich Probleme habe diese zu lesen.
Ich habe versucht die Schrifteinstellungen meines Firefoxbowsers zu manipulieren. Außer der minimalen Schriftgröße hat sich bei mir nichts verändert. Nach meiner Zeit im Computerpool des ZtG und den Computerkursen, die ich angeboten habe, sind sich viele Internetnutzer_innen nicht darüber im Klaren, dass sie die Einstellungen zu ihren Gunsten verändern können. Hast du bei dir Veränderungen vorgenommen? Wenn ich länger Surfe und Texte lese stelle ich die Schriftgröße auf „min 14“. Das macht das Lesen sehr viel angenehmer und ich muss nicht immer „STRG“ und „+“ drücken.
Scrollen. Bei meinem Vergleich mit dem Blättern bin ich schon gestern bei Christin nicht weitergekommen. Der Vergleich geht an Krücken. Deine Ausführungen sind da stichhaltiger. Der Vergleich mit dem Blättern im Buch wird erst dann besser, wenn man für die Benutzung der „Page Up“ (Seite hoch oder Bild hoch) plädieren würde.
Wenn du noch Beispiele für gut gemachte Webseiten hast, würde ich mich über die Links freuen. Ich denke, dass die Gestaltung im Netz gerade durch die Miniaturisierung der Endgeräte einiges Überdenken muss.
Eine Schriftart, die mir besonders wegen der freien Zugänglichkeit gefällt ist Linux Libertine. http://linuxlibertine.sourceforge.net/Libertine-DE.html#styles
Marius
webdesign is not an easy profession to work with.
@Webdesign fortunatly webdisign ist not my profession. It is more like a hobby! Sometimes its hard, sometimes its nice 🙂
man kann den Unfug der Typografie bei Internetseiten nicht besser demonstrieren, als mit Ihrer Startseite. Wer bei Informationstexten nicht die leichte Lesbarkeit berücksichtigt, hat sein Handwerk nicht gelernt,
@max der Kommentar kommt ungefähr 9 Jahre zu spät und ist leider wenig hilfreich weil sich das Design bereits geändert hat und hier auch nur noch selten veröffentlicht wird.