Ob Smartphone, Tablet, oder irgendwo dazwischen: Beinahe wöchentlich erscheinen neue Geräte. Egal wie verschieden sie jedoch sind, alle diese Geräte können Webseiten darstellen. Auf diese Weise entstehen ständig neue Situationen und Kontexte, in denen eine Webseite genutzt wird. Ob in der U-Bahn, am Flughafen, im Café oder zu Hause auf der Couch - Ziel des Nutzers ist es immer, die Informationen einer Webseite so einfach und effizient wie möglich zu erhalten.
Informationen im Mittelpunkt: Content First als Grundsatz
Durch die Wahl eines Geräts und eines Browsers, sowie gegebenenfalls durch individuelle Einstellungen bestimmt jeder Nutzer heutzutage selbst, wie er eine Webseite konsumieren möchte. Wir als Webdesigner verlieren daher zunehmend die Kontrolle darüber, wie ein Besucher eine Webseite angezeigt bekommt.
Der Erfolg von Nachrichten-Applikationen wie Flipboard und Diensten wie Pocket zeigt, dass viele Nutzer mittlerweile sogar vollkommen auf gestalterische Elemente verzichten, wenn sie am Inhalt einer Webseite interessiert sind.
Für eine nachhaltig erfolgreiche Webseite muss daher vielmehr der Inhalt im Zentrum stehen. Wenn die Auswahl und Strukturierung von Inhalten bereits in der Planung eines Projektes den höchsten Stellenwert hat, spricht man vom "Content First"-Ansatz (frei übersetzt: "Der Inhalt kommt zuerst!"). Dabei werden im ersten Schritt ausschließlich Inhalte und ihre Struktur definiert und erst in weiteren Schritten ein Design anhand dieser realen Inhalte entwickelt.
Zum Vergleich: Wurde eine Gestaltungsvorlage auf Basis von Platzhaltertexten (sprich: Lorem ipsum) entwickelt und soll schließlich mit echten Inhalten gefüllt werden, besteht die Gefahr, dass Design und Inhalt nicht vollständig zusammen passen. Daraufhin wird meist der Inhalt so modifiziert, dass er zum Design passt - und somit häufig an Aussagekraft und Bedeutung verliert.
Um schon bei der Konzeption einer Webseite sicherzustellen, dass tatsächlich nur die wichtigsten Inhalte im Mittelpunkt stehen, kann der Präsentationsrahmen bewusst so klein gehalten werden, dass nur Platz für die wichtigsten Informationen bleibt. Häufig wird dafür ein Gerät mit einem möglichst kleinen Bildschirm als Startpunkt für die Konzeption gewählt. Da es sich dabei in der Regel um ein Smartphone handelt, wird diese Art der Konzeption auch als "Mobile First" (frei übersetzt: "Mobile Endgeräte kommen zuerst!") bezeichnet. Obwohl die Optimierung für mobile Geräte natürlich ein wünschenswerter Nebeneffekt ist, sollen vorrangig Informationen und Inhalte im Fokus stehen. Wir sprechen daher von "Content First".
"Content First" in der Praxis: Iterativer Workflow und Prototyping
In der Praxis kann die Umsetzung einer Startseite nach dem "Content First" Ansatz beispielsweise wie folgt aussehen:
Durch die Implementierung sämtlicher Inhalte in einem Prototypen sind schon sehr früh erste Ergebnisse im Browser zu sehen. Da ein solcher Prototyp problemlos mit einem mobilen Gerät - beispielsweise einem Smartphone - aufgerufen werden kann, wird bereits ein Gefühl für die Webseite vermittelt und es kann direkt Feedback zum Konzept gegeben werden. Zudem können neue Ideen und Vorschläge leicht ausprobiert und direkt im Browser beurteilt werden.
Nach der Sammlung und grober Strukturierung der Inhalte werden diese basierend auf dem kleinstmöglichen Präsentationsrahmen gewichtet und angeordnet.
Aufbauend auf den Prototypen der kleinsten Auflösung werden schrittweise weitere Prototypen für höhere Auflösungen angelegt. Da die grundlegende Anordnung und Gewichtung der Inhalte bereits festgelegt ist, steht nun die schrittweise Optimierung (das sogenannte "progressive enhancement") im Vordergrund: Überschriften können beispielsweise durch längere Teaser-Texte angereichert und Bilder in unterschiedlichen Größen und Bildausschnitten dargestellt werden. Beispielsweise können zusammengehörige Inhalte bei kleineren Geräten so gruppiert werden, dass zunächst nur ein Element sichtbar ist und weitere Elemente erst durch Interaktion des Nutzers sichtbar werden. Höhere Auflösungen bieten hingegen genug Raum zur gleichzeitigen Darstellung aller Inhalte.
Neben der Optimierung für verschiedene Auflösungen ist auch die Anpassung an Geräteeigenschaften wichtig. Für Touch-basierte Geräte sollten zur leichteren Interaktion beispielsweise größere Schaltflächen angezeigt werden, wohingegen bei Maus-basierten Geräten Interaktionen auf Mausbewegungen basieren können. Solche Geräteeigenschaften können zur Vereinfachung in einem Prototypen an die Auflösung geknüpft werden. So können kleinere Auflösungen beispielsweise gleichzeitig Touch-basierte Geräte repräsentieren.
Im folgenden sind Bilder von verschiedenen Entwicklungsstadien eines Prototyps für die Startseite der neuen networkteam-Webseite zu sehen.
- Nur die wichtigsten Inhalte finden auf einer schmalen Präsentationsfläche Platz
- In größeren Auflösungen können weiterführende Informationen dargestellt werden
- Zu Beginn werden Inhalte grob gruppiert und angeordnet
- und mit jeder Phase iterativ weiterentwickelt und optimiert
Axure RP: Interaktive Prototypen komfortabel erstellen
Zur Erstellung dieses Prototyps haben wir Axure RP eingesetzt. Das Programm bietet viele nützliche Funktionen zur Konzeption von Webseiten wie:
- Ein Drag & Drop Interface zur Erstellung des Prototyps
- Ein "Sketchiness"-Faktor zur verfremdeten Darstellung von Elementen, damit diese wie von Hand gezeichnet aussehen
- Direkte Ausgabe der Dateien als HTML und somit zur Anzeige im Browser
- Möglichkeit, selbst komplexere Interaktionen zu simulieren
- Erstellen von wiederverwertbaren Widgets und Master-Templates
Leider unterstützt Axure RP in der aktuellen Version 6.5 noch kein responsives Verhalten. Da zudem sämtliche Elemente mit fest definierten Pixelangaben erstellt werden, müssen für verschiedene Auflösung einer Seite in Axure RP tatsächlich mehrere Seiten in der jeweiligen Auflösung erstellt werden, was teilweise zu stark erhöhtem Arbeitsaufwand führt.
Das Programm ist insgesamt jedoch ein wichtiger Bestandteil unserer Konzeptionsphase und besonders hilfreich, um früh im Projekt Feedback zu erhalten und so eventuelle Fehler auszubessern. In kommenden Versionen soll Axure zudem responsive Prototypen ermöglichen.
Die Planung steht: Weitere Schritte auf dem Weg zur neuen Webseite
In den kommenden Wochen werden wir in unserem Blog den Entstehungsprozess unserer neuen Webseite begleiten und beschreiben, wie aufbauend auf dem "Content First"-Konzept das Design und schließlich die komplette Webseite entsteht. Wir hoffen, auf diese Weise einen Einblick in unsere Arbeitsweise zu geben und die meist komplexen Schritte auf dem Weg zu einer nachhaltig erfolgreichen Webseite anschaulich zu beschreiben. Gerne beantworten wir Fragen zum Thema und freuen uns auch über neue Anregungen und konstruktive Kritik!