Entwerfen einer Artikelseite
Als ich mit der Gestaltung des Layouts, der Stile und der Hierarchie für die in dieser Web-App veröffentlichten Blog-Posts begann, hatte ich ein großes Ziel vor Augen: Der Inhalt steht an erster Stelle. Keine Werbung, keine Pop-ups und keine Banner jeglicher Art. Ich wollte einfach ein möglichst minimalistisches Design, um die bestmögliche Lese- (und Lern-) Erfahrung zu bieten.
Die folgenden Schlüsselkennzahlen wurden definiert:
- keine Benutzerinteraktion erforderlich, zum Beispiel DSGVO-Banner, Anzeigen oder CTAs
- eine 100 % semantisch fundierte HTML-Struktur, damit jeder Nutzer die Artikel genießen kann, zum Beispiel bei Verwendung eines Screenreaders
- ein minimalistisches Design, das in erster Linie den geschriebenen Text in den Mittelpunkt stellt
- ein toller SEO-Score, damit meine Artikel in Suchmaschinen hoch gerankt werden, sonst wäre das Schreiben eine Aufgabe ohne ROI
Layout eines Content-First-Artikels
Alle folgenden Beschreibungen und Entscheidungen sind rein persönlich und spiegeln meine Überlegungen zur Gestaltung einer Artikelseite wieder. Dies ist keine Anleitung zum Verfassen von Blog-Posts, sondern eher ein Lernen für Sie, wie ich es gemacht habe und ob die Ergebnisse es wert sind.
Gut, reden wir über das Layout! Wenn Sie so weit gekommen sind, haben Sie bemerkt, dass sich die Seite für einen Artikel erheblich von anderen Websites unterscheidet:
- es gibt keine obere Navigationszeile
- es gibt keine wirklich interaktiven Elemente, es ist fast ausschließlich der Artikeltext sichtbar
Hier sehen Sie das Layoutkonzept für einen einzelnen Artikel aus der Vogelperspektive.
Keine Top-Navigation
Ich habe es vermieden, ein Hauptnavigationselement hinzuzufügen, das prominent oben oder seitlich auf der Seite platziert wird, wie dies bei vielen anderen Web-Apps der Fall ist, um ein vollständig immersives, magazinartiges Leseerlebnis zu bieten. Dies hat den großen Nachteil, dass Benutzer, die interessiert sind und andere Seiten erkunden möchten, nicht wissen, wo sie nach ihnen suchen sollen, was zu einer Erhöhung der Absprungrate führen kann. Die Absprungrate definiert den Prozentsatz der Benutzer, die nicht über die ursprünglich besuchte Seite hinaus navigiert sind.
Für mich ist es jedoch ein Experiment, ob die Nutzer ihre Reise auf der Site trotzdem fortsetzen. Es mag eine falsche Annahme sein, aber ich gewichte die vorgeschlagenen Beiträge stark, die nach dem Hauptinhalt sichtbar sind. Meine aktuelle Absprungrate in den letzten 30 Tagen liegt zwischen 70 % und 80 %, was dem Branchendurchschnitt für Blog-Post-Sites entspricht.
Das geschriebene Wort und sonst nichts
Jede Seite hat einen ersten Teil, den sogenannten „above the fold“-Bereich, der die volle Fensterhöhe des Geräts einnimmt. Es hat einen großen Titel, einen kleineren Untertitel und einige Metadaten und den Fensterboden. Dieses Design weicht ziemlich drastisch von den meisten anderen Artikelseiten im Web ab, da es im Grunde das minimalistischste ist, das ich erreichen konnte.
Wenn ein Benutzer ein wenig nach unten scrollt, wird der „above the fold“-Bereich unsichtbar und der Hauptinhalt wird eingeblendet. Dies gibt dem Benutzer einen natürlichen Hinweis, wo die Seite weitergeht und welcher Inhalt der Seite jetzt am wichtigsten ist.
Der Artikelinhalt wird mit einer schönen Lesebreite zentriert, wie es bei vielen Blogs üblich ist. Codebeispiele sind wichtig, daher werden sie in einer eigenen Komponente gerendert, die ein Fenster des Betriebssystems des Benutzers nachahmt, zusammen mit einer Schnellaktion zum Kopieren in die Zwischenablage.
Das einzige interaktive Element, abgesehen von Links im Text, ist der Vorlese-Button oben, wenn das aktuelle Gebietsschema auch Sprachsynthese ermöglicht.
Der Nachtrag
Direkt nach dem Artikel kommt der Abschnitt mit einigen Metadaten. Das erste Element hier ist ein Raster aller Gebietsschemas, in denen der Artikel verfügbar ist. Da diese Web-App einige Sprachen unterstützt, ist das Raster relativ groß. Ich habe jedem Rasterelement Farbverläufe hinzugefügt, da dies die Aufmerksamkeit des Benutzers stark darauf lenkt, insbesondere auf dem fast schwarzen Hintergrund. Die meisten Benutzer, die hier das Gebietsschema ändern, probieren es einfach aus, da sie ihre Reise nach der Änderung nicht fortsetzen.
Unterhalb der Gebietsschemas befindet sich eine Reihe einfacher Feedback-Schaltflächen, denen der Abschnitt für vorgeschlagene Beiträge folgt. Diese Vorschläge sind sowohl eine handverlesene Auswahl als auch eine Liste einiger Beiträge, die vor dem aktuellen veröffentlicht wurden.
Nutzer, die es bis hierher geschafft haben, sehen dann endlich eine Reihe externer Links, die weitere Informationen zum Thema liefern, sowie eine Reihe interner Links zu den verwandten Kategorien des Artikels.
Navigation unten
Die umstrittenste Entscheidung, die ich getroffen habe, war, die Hauptnavigation ganz am Ende der Seite zu platzieren, wo nur die kleinste Anzahl von Benutzern sie jemals sehen wird. Beachten Sie, dass dies nur für die Artikelseite gilt. Auf anderen Seiten dieser Web-App gibt es eine prominente Navigationszeile, die häufig oben auf der Seite platziert wird.
Ich habe mich für dieses Layout entschieden, da ich unbedingt testen wollte, ob dieses Design überhaupt funktionieren kann. Wie geschrieben, ist meine Absprungrate durchschnittlich, also ist es zumindest keine Katastrophe. Ich beabsichtige jedoch in einem zukünftigen Update das Layout in dieser Hinsicht zu ändern, damit die Hauptnavigation sowohl besser und früher sichtbar als auch ohne optische Ablenkungen schön in die Artikelseite integriert wird.
