Entwerfen von Blog- / Artikelseiten: UX-Fallstudie

Da die Anzahl der Leser in dieser schnelllebigen Welt von Tag zu Tag zunimmt, ist es wichtig, die Benutzer länger auf der Seite zu halten.

Foto von Lukas von iconscout

Kürzlich habe ich bei iconscout daran gearbeitet, die Blog-Artikelseite zu entwerfen. Ziel war es, dem Benutzer ein komfortables Leseerlebnis zu ermöglichen. Die Erfahrung hängt von der Art und Weise ab, wie der Benutzer liest. Vor dem Design war daher eine Benutzerrecherche erforderlich.

Nutzerforschung

Eigentlich las niemand zuerst. Benutzer scannen Sie einfach die Informationen im Web. wenn sie etwas hilfreich finden, werden nur sie weiter lesen. Nach einer User-Recherche habe ich viele Dinge kennengelernt, einige davon sind:

  • Benutzerverhalten beim Lesen
  • Muster lesen
  • Visuelle Hierarchie des Textes
  • Typografie

Informationsbeschaffung

Jede Seite enthält Schlüsselelemente, die die jeweilige Seite beschreiben. Wenn diese Elemente nicht vorhanden sind, wird möglicherweise die Benutzerinteraktion verringert, was zu einer schlechten Erfahrung führt. Als ich hier eine Blog-Seite entwarf, fing ich an, Informationen darüber zu sammeln, was die Schlüsselelemente für die Blog-Seite sind, welche Daten dort sein sollten und welche Priorität sie haben sollten.

Entsprechend der Anforderung habe ich Schlüsselelemente für die Blog-Seite definiert. welches ist:

  • Titel
  • Abdeckung
  • Autor
  • Veröffentlichungsdatum
  • Kategorie
  • Überschrift
  • Unterüberschrift
  • Absatz
  • Bilder
  • Bullet Punkte
  • Zitat
  • Social Sharing
  • Abonnieren Sie CTA
  • Stichworte
  • Bemerkungen

Low Fidelity Wireframe

Bei den Recherchen, die ich durchgeführt habe, habe ich festgestellt, dass kein Benutzer nach unten scrollen und weiterlesen kann, wenn er auf dem Startbildschirm nichts Nützliches findet. Deshalb habe ich auf dem Startbildschirm noch einmal aufgelistet, welche Dinge vorhanden sein müssen, um die Benutzer anzusprechen und sie zum Scrollen zu bringen, um mehr zu lesen.

Die Metadaten, für die ich mich entschlossen habe, auf dem Startbildschirm anzuzeigen:

  • Blog-Cover
  • Blog Titel
  • kurze Beschreibung
  • Autor
  • Veröffentlichungsdatum
  • Kategorie
Wireframe mit niedriger Wiedergabetreue

Benutzeroberfläche gestalten

Nachdem alle Schlüsselelemente aufgelistet waren, begann ich mit der Arbeit an der Benutzeroberfläche. Wieder war das Ziel, ein angenehmeres Lesen zu ermöglichen. Lesbarkeit bezieht sich auf das gesamte Leseerlebnis. Wie einfach können wir das Textlayout scannen, Überschriften, Unterüberschriften, Absätze und Blöcke unterscheiden?

Dinge, auf die ich mich konzentrierte, um das beste Leseerlebnis zu bieten:

1. Geben Sie Hierarchie ein, um einen klaren Eindruck von der Struktur der Seite zu erhalten

Die Hierarchie definiert, wie der Inhalt gelesen werden soll. Dadurch unterscheiden wir die Überschrift von der Überschrift und dem Haupttext. Um dies zu erreichen, können wir verschiedene Textgrößen, Abstände, Ränder, Kontraste und vieles mehr verwenden.

Typografie-Hierarchie

Hier ist der Grund, warum die visuelle Hierarchie wichtig ist:

visuelle Hierarchie

Wir können den deutlichen Unterschied erkennen, warum die Definition der Typografie-Hierarchie wichtig ist. Es hilft dem Benutzer, die Seite besser zu scannen.

2. Linienhöhe - zur Verbesserung der Lesbarkeit

Beim Lesen von Inhalten spielt die Zeilenhöhe eine wichtige Rolle. Dies gilt nicht nur für das Design, sondern auch für Dokumente und Bücher.

Hier habe ich eine einfache Berechnung verwendet, um die perfekte Linienhöhe zu erhalten:

Neue Zeilenhöhe = Standard-Zeilenhöhe * 1,5

Es kann in verschiedenen Szenarien variieren, aber die meiste Zeit funktioniert es perfekt.

warum linienhöhe wichtig ist

3. Absatzabstand - um jeden Absatz zu unterscheiden

Wenn der Absatzabstand nicht definiert ist, drückt der Benutzer (Schreiber) mehrmals die Eingabetaste, was zu einer großen Lücke führen kann. Aus diesem Grund kann es für den Leser verwirrend sein, ob der Inhalt zum selben Abschnitt oder zum neuen Abschnitt gehört.

Der Absatzabstand sollte der Größe des Haupttextes entsprechen. Wenn die Textgröße 20 ist, sollte der Absatzabstand 20 sein.

Absatzabstand

4. White Space - um Inhalte einfach scannen zu können

Wenn kein weißer Bereich vorhanden ist, sieht der Benutzer viele überladene Inhalte auf einmal, was zu einem unangenehmen Leseerlebnis führt. Damit der Benutzer den Inhalt der Seite problemlos scannen kann, ist ein Leerraum wichtig.

Die grundlegende Rolle des Leerraums besteht darin, die Anzahl der Textnutzer zu verringern, die gleichzeitig angezeigt werden.

Endergebnis

Mit diesen kleinen Dingen habe ich versucht, dem Benutzer ein angenehmes Leseerlebnis zu bieten.

Endergebnis

Danke fürs Lesen. Gib Klatschen, wenn es dir gefällt Und ich würde gerne deine Gedanken und Ideen hören.

Wenn du mehr Arbeit sehen und mehr über mich erfahren willst, kannst du mir auf dribbble, Instagram, Twitter folgen.