So gestalten Sie lesbare Inhalte für das Web

Inhalte zu gestalten ist mehr als nur etwas großartig aussehen zu lassen. Sie müssen ein Design erstellen, das die Benutzer tatsächlich lesen werden, und ihnen helfen, sich mit dem Inhalt zu beschäftigen. Manchmal ist das leichter gesagt als getan.

Menschen haben im Allgemeinen kurze Aufmerksamkeitsspannen, und Sie sollten nicht erwarten, dass sie jedes Wort auf dem Bildschirm verdauen. Sie können jedoch bestimmte Designtechniken und -elemente verwenden, um Benutzern das Lesen so gut wie möglich zu erleichtern.

Hierarchie mit Größe und Maßstab festlegen

Lesbares Design beginnt mit mehreren Textebenen. Das Einrichten einer Hierarchie von Gedanken wird Benutzern helfen, den Text zu durchlaufen.

Größere Größen sind ein visueller Hinweis, der die Benutzer dazu auffordert, ein bestimmtes Objekt zuerst zu lesen, da es am wichtigsten ist. Die meisten Augen der Benutzer bewegen sich natürlich von größeren Elementen zu kleineren, wodurch ein schöner visueller Fluss entsteht.

Die meisten Augen der Benutzer bewegen sich natürlich von größeren Elementen zu kleineren, wodurch ein schöner visueller Fluss entsteht.

Nutzen Sie die H2-, H3- und H4-Tags im Design optimal und erstellen Sie eine konsistente Skalierung für Unterüberschriften, die zum Aufteilen großer Textblöcke verwendet werden können.

Durch das Erstellen einer Skala mit konsistenten Textplatzierungen und -größen können Benutzer noch einfacher durch den Text navigieren. Dies gilt sowohl für Langform-Inhalte als auch für Kurzinhalte auf Homepages wie Narrative.

Beachten Sie, dass die Startseite vier verschiedene Textebenen im Heldenbereich hat. Es gibt eine große Überschrift in Farbe und oben ein kurzer Ausschnitt. Dann hat der Körperinhalt einen Stil mit einer zusätzlichen fetten Linie zur Hervorhebung. Die meisten Benutzer sehen die Wörter in dieser Reihenfolge: Überschrift, fetter Text, Textkörper, Überschriftenschnipsel aufgrund der Gewichte, Größe und Skalierung der Beschriftung.

Wählen Sie lesbare Schriftarten

Eine lustige Novelty-Schrift oder ein ausgefeiltes Skript macht zwar viel Spaß beim Entwerfen, ist aber für Endanwender nicht immer die beste Wahl.

Lesbare Schriften werden am wahrscheinlichsten tatsächlich gelesen.

Hier ist der Grund:

  • Sehr gut lesbare Schriften lassen sich leichter scannen.
  • Letterforms sind in verschiedenen Größen leicht zu erkennen.
  • Buchstaben laufen nicht zusammen oder bilden unbequeme Räume oder Formen.
  • Diese Schriftarten werden häufig verwendet und sind für Benutzer einfach. (Auch Schriften, die ähnlich sind, aber nicht aus derselben Familie stammen, sind den meisten Benutzern bekannt.)

Merkmale einer lesbaren Schrift sind:

  • Standardgewicht - nicht zu dick oder dünn
  • Übliche x-Höhe - nicht zu kurz oder zu groß
  • Weitere abgerundete Buchstabenformen - so dass das? O? hat eine kreisförmige Form
  • Leichte oder keine Schräge
  • Briefe, die nicht zu nah oder weit voneinander entfernt sind

Wenn Sie diese Merkmale betrachten, können Sie feststellen, dass fast jede Typkategorie wahrscheinlich eine lesbare Option enthält. Sie müssen sich nicht nur an Serifen oder Sans-Serifen halten. Eine Mischung aus anderen Schriften ist eigentlich gut. Testen Sie einfach unsere Wörter, die Sie in dieser Schrift verwenden möchten, um sicherzustellen, dass sie gut lesbar sind.

Stapelinhalt für Personen, die scannen

Das Stapeln von Inhalten geht zurück zur Hierarchie. Aber mit einem zusätzlichen Element: Denken Sie beim Stapeln von Inhalten an Text- und Nicht-Text-Elemente.

Wenn der Benutzer einen Textblock und ein Bild auf dem Bildschirm sieht, ist das Bild fast immer das, was zuerst seine Aufmerksamkeit auf sich zieht. Daher ist es wichtig, Elemente so zu stapeln, dass der Benutzer sich vom Bild auf das Bild bewegt Text.

Alzheimers New Zealand (oben) verwendet Stacking, um Benutzer zur Hauptschlagzeile zu bringen. Beachten Sie, wie der Text mit drei Personen in der Bildmitte positioniert wird. Ihr Auge geht zuerst auf die Gesichter, dann fällt sie auf den subtil animierten Kreis mit Text. Dann bewegt sich das Auge zu dem kleineren, sekundären Textblock.

Und hier ist das Ding: All dies geschah so schnell, als Sie das Bild zum ersten Mal sahen, dass Sie vielleicht nicht einmal darüber nachgedacht haben. Die meisten Benutzer scannen den gesamten Bildschirm auf dieselbe Weise, wenn sie entscheiden, ob sie mit dem Inhalt interagieren möchten oder nicht.

Play Up Visuals

Spielen Sie visuelle Elemente, indem Sie sie mit anderen Elementen integrieren, um ein immersives Design zu erhalten.

Möchten Sie wirklich sicherstellen, dass die Nutzer Ihre Inhalte sehen? Integrieren Sie Text und Grafiken auf sinnvolle Weise. Erstellen Sie ein Heldenbild, das ein interessantes visuelles, ungewöhnliches Farbpaar oder eine Kombination aus Animation und Schrift verwendet, um Benutzer zum Anhalten zu bringen.

Der Fehler, den Designer manchmal machen, besteht darin, jedes Element in eine eigene Box oder einen eigenen Raum zu unterteilen. Spielen Sie visuelle Elemente, indem Sie sie mit anderen Elementen integrieren, um ein immersives Design zu erhalten.

Octavo Designs, oben, hat eine Homepage, auf die Sie nicht verzichten können. Für den Anfang gibt es eine sehr lustig aussehende Kuh auf hellem Hintergrund. Der Text ist sehr viel Teil des Bildes. (Es berührt tatsächlich die Hörner der Kuh oben.) Diese Kombination aus Text und Text zieht die Benutzer in den Inhalt und lässt sie mehr wollen.

Halten Sie die Zeilen (und Gedanken) kurz

Denken Sie bei der Planung des Entwurfs in kurzen Schüben. Jede Seite oder jeder Bildschirm sollte sich auf einen einzelnen Gedanken und einfache, leicht lesbare Textblöcke konzentrieren.

Strukturieren und organisieren Sie Gedanken für Benutzer so, dass sie zum Lesen anregen:

  • Verwenden Sie Absätze von 1 bis 3 Sätzen
  • Integrieren Sie Listen mit Aufzählungszeichen
  • Verwenden Sie Subheads, um große Textblöcke aufzuteilen
  • Fügen Sie Links für Interaktivität hinzu
  • Markieren Sie die fett hervorgehobenen Punkte
  • Bearbeiten Sie alle Kopien für Klarheit und Kürze

Erstellen Sie einen zentralen Punkt

Jedes Design sollte einen Schwerpunkt haben. Im Mittelpunkt steht der Teil des Designs, den fast jeder Benutzer zuerst sehen wird. Es ist oft sehr visuell oder steht im krassen Gegensatz zu anderen Elementen auf dem Bildschirm.

Der Schwerpunkt sollte festlegen, worum es beim Design geht und warum sich die Benutzer darum kümmern sollten.

Im obigen Beispiel verwendet Abingworth einen hellrosa Fleck als Brennpunkt. Es zieht Aufmerksamkeit auf sich aufgrund der Farbe und Neugier (was ist das?) Und weil es sich von der weißen, offenen Fläche auf der anderen Seite des Bildschirms unterscheidet.

Der Schwerpunkt des Designs sollte Ihr bestes Bild, Ihre beste Illustration oder Animation sein und sich auf wichtige Nachrichten beziehen. Der Schwerpunkt sollte festlegen, worum es beim Design geht und warum sich die Benutzer darum kümmern sollten. Da dies der erste Ort ist, an dem die Benutzer nachsehen, gibt sie den Ton an, wie (und ob) sie mit dem Design interagieren werden.

Fazit

Das Erstellen von Inhalten, die Benutzer tatsächlich lesen werden, ist mehr als nur Text auf dem Bildschirm. Es ist eine Kombination aus schriftlichen und visuellen Elementen, die die Benutzer anziehen, ihnen einen Einblick in das Design vermitteln und dann entscheiden, mit dem Interaktionssystem weiter zu interagieren.

Das hört sich nach viel an, dies geschieht jedoch in Millisekunden. Es gibt Studien, die besagen, dass die meisten Benutzer die Aufmerksamkeitsspanne eines Goldfisches haben - 8 Sekunden - und die Inhalte mit gut lesbaren Inhalten optimal nutzen.