Content First und modulare Wireframes für eresult.de – User-Centered Design Reality-Check Teil 2

In der Fortsetzung meines letzten Beitrags zum Redesign unserer Website eresult.de soll es diesmal um das Thema Konzeption gehen. Da wir von Beginn an mit einem responsive Design planten, sollte der Entwurf der Layouts so unabhängig von bestimmten Auflösungen sein wie möglich – wir folgten deshalb dem Ansatz „Content First“ und einem modularen Design. Die Anordnung der Contentmodule bei unterschiedlichen Seitenbreiten sowie die grobe Ausgestaltung der einzelnen Module definierten wir im Anschluss in Form von Wireframes. Wie dieser Prozess genau ablief und die dabei entstandenen Deliverables möchte ich heute zeigen.

Das Projekt: Relaunch von eresult.de

Unsere alte Website bestand in ihrer grundsätzlichen Form bereits seit 2009 – und das sah man ihr auch sicherlich an. Abgesehen vom altehrwürdigen Design war vor allem die mangelnde Darstellung auf mobilen Endgeräten nicht mehr akzeptabel. Und auch im Hintergrund waren einige Änderungen nötig, denn es war bisher noch kein CMS im Einsatz.

Seit dem 13.10 ist die neue Website nun live (siehe Abb. 1), aber fertig sind wir natürlich noch lange nicht. Es gibt weiterhin einiges an Feinschliff zu tun, dem wir uns nun nach und nach widmen werden, getreu dem Motto: Nach dem Relaunch ist vor dem Relaunch.

Abb. 1: Die neue eResult-Website

Abb. 1: Die neue eResult-Website

In meinem vorherigen Beitrag habe ich schon über die ersten Phasen des Projektes berichtet, den Research mit Personas und die Entwicklung der Informationsarchitektur.

Jetzt möchte ich vom nächsten Schritt erzählen, der Konzeptionsphase. Die finale Ausgestaltung des visuellen Designs gehört nicht zu unserem Portfolio, so dass wir uns dafür auf die Agentur Elbfeuer verlassen haben. Dennoch wollten wir grobe Entwürfe als Vorarbeit leisten, so wie wir das auch in Kundenprojekten tun. Deshalb mussten wir einen Weg finden, unsere Überlegungen und Anforderungen zu spezifizieren.

Content First Ansatz zur Definition von Inhalten und ihren Prioritäten

Für die Konzeption eines responsive Designs ist es meist der falsche Ansatz, die Layouts für Desktop-Auflösungen zu entwickeln und dann für kleinere Ansichten herunterzubrechen. Diese Vorgehensweise verleitet dazu, zu viele Inhalte zu verwenden – es ist ja zunächst Platz vorhanden – und dann keine sinnvolle und zielgerichtete Anordnung auf Mobilgeräten zu finden. Aus diesem Grund hat der Ansatz des „Mobile First“ an Beliebtheit gewonnen, also von der geringsten Auflösung auszugehen anstatt von der höchsten. So muss man sich von Anfang an begrenzen und auf wirklich wichtige Elemente fokussieren. Zudem ist es nicht oder kaum möglich, Elemente einfach nebeneinander anzuordnen, so dass man gezwungen wird, klar zu priorisieren.

Mobile First geht im Design aber immer noch von einem bestimmten Endgerät aus, anstatt alle gleichwertig zu behandeln. Aus diesem Grund halte ich „Content First“ für die bessere Alternative. Bei diesem Ansatz werden die Inhalte eine Seite zunächst völlig unabhängig vom Layout definiert und priorisiert. Erst im Nachgang wird dann – basierend auf den Prioritäten – das Layout definiert. Dies hat auch in der Kommunikation mit den relevanten Stakeholdern Vorteile: Anstatt direkt visuelle Entwürfe zu zeigen, die häufig von der eigentlichen Diskussion um die Inhalte ablenken, bleibt die Definition rein textuell und abstrakt. So kann ein Commitment zu Inhalten und besonders ihren Prioritäten eingeholt werden, welches im weiteren weiteren Verlauf sehr nützlich ist und auf das man sich immer beziehen kann. Alle Beteiligten sind gezwungen, als Basis für diese Entscheidungen gut über die Ziele aus Nutzer- und Unternehmenssicht nachzudenken – der zentrale Schritt, der sonst häufig unter den Tisch fällt.

Die definierten Inhaltsmodule und ihre Prioritäten

Abb. 2: Die definierten Inhaltsmodule und ihre Prioritäten

Abb. 2 zeigt die von uns für eresult.de definierten Inhalte und ihre Prioritäten. Wir unterscheiden dabei zwischen normalen Inhaltsseiten und der Startseite. Zudem gibt es noch einige statische Seitenelemente, die immer auftauchen und deren Positionierung klar ist. Wir haben für unsere Seite entschieden, alle Inhaltsseiten identisch zu behandeln und entsprechend von konkreten Inhalten zu abstrahieren. Der Grund war einfach der reduzierte Aufwand, sowohl in der Konzeption als auch später im Design und der Umsetzung. Natürlich macht es bei größeren Websites möglicherweise Sinn, granularer vorzugehen und viele unterschiedliche Arten von Inhaltsseiten zu definieren. Wichtig war uns dies nur bei der Startseite, die passende Inhalte aus verschiedenen Bereichen der Website zusammenführen und Einstiege in tieferliegende Inhaltsseiten bieten sollte.

Neben den Inhalten, die ein Seitentyp enthalten kann, definierten wir auch etwas detaillierter, in welcher Form diese Inhalte auftauchen könne. Als Beispiel seien die „Primärinhalte“ genannt, die etwa als Text mit Bilder, in Form eines Akkordeons oder auch als Navigationsteaser erscheinen können.

Nach der Definition der Inhalte ging es im nächsten Schritt darum, diese zu priorisieren. Hierbei gibt es keine Ausflüchte – alles muss eindeutig priorisiert werden, entsprechend der Relevanz für die Nutzer aber auch für die Ziele der Website aus Unternehmenssicht. Diese Priorisierung ist die Entscheidungsgrundlage für alle weiteren Schritte der Konzeption und dementsprechend zentral für den Erfolg des Vorgehens. Im Diagramm haben wir sie durch die Reihenfolge der Inhalte und entsprechende Markierungen mit Zahlen vermerkt.

Modulare Wireframes zur Grobkonzeption der Layouts

Basierend auf der Inhaltsdefinition entwickelten wir im nächsten Schritt Wireframes, die später zur Kommunikation mit der Agentur für das visuelle Design dienen sollten. Die einzelnen Inhaltselemente haben wir im Folgenden als Module bezeichnet, da sie jeweils unterschiedlich zusammengesetzt werden.

Alle entwickelten Wireframes finden Sie als Anschauungsmaterial unterfolgender Adresse: http://axshare.eresult.de/4EB9IW

Insgesamt haben wir folgende unterschiedliche Arten von Wireframes erstellt:

  • Die grobe Anordnung der Module in 3 verschiedenen Beispielauflösungen (Ordner „Layouts“)
  • Die Ausgestaltung der einzelnen Module in diesen 3 Auflösungen (Ordner „Module“), wobei diese (teilweise) zunächst sehr grob (Endung „_low“) und dann noch einmal etwas detaillierter (Endung „_high“) ausgearbeitet wurden.
  • Einige Beispielseiten unterschiedlicher Arten, zusammengesetzt aus den einzeln definierten Modulen, um die Konzepte für Stakeholder erlebbarer zu machen (Ordner „Beispielseiten“)

Die Modulanordnung definierten wir einfach mit reinen Kästen als Platzhalter für die Module. Die Benennung der Kästchen referenziert eindeutig die zuvor im Schema definierten Inhalte. Abb. 3 zeigt einen solchen Wireframe der Startseite bei einer Seitenbreite von 770 Pixeln. Das responsive Verhalten folgt dabei im Großen und Ganzen dem Prinzip namens „Drop Column“, bei dem in mehreren Spalten nebeneinander angeordnete Inhalte bei niedrigeren Auflösung untereinander rutschen, so dass auf einem Smartphone nur noch eine Spalte von Inhalten vorhanden ist.

Layout-Wireframe der Startseite bei 770 Pixel Seitenbreite

Abb. 3: Layout-Wireframe der Startseite bei 770 Pixel Seitenbreite

Die Modul-Wireframes für die genauere Ausgestaltung der Module sind ebenfalls sehr grob mit Kästchen gehalten. Diesmal beziehen sich die Titel der Kästchen auf die jeweiligen Daten, die an dieser Stelle angezeigt werden, etwa „Überschrift“ oder „Bild“. Zudem werden weitere Kästchen genutzt, um zusammengehörende Daten zu gruppieren, denn diese Zusammengehörigkeit muss sich auch später im visuellen Design widerspiegeln. Abb. 4 zeigt einen dieser groben Wireframes für das Team-Modul auf der Startseite.

Wireframe des Team-Moduls auf der Startseite bei 770 Pixel Seitenbreite

Abb. 4: Wireframe des Team-Moduls auf der Startseite bei 770 Pixel Seitenbreite

Durch diese Aufteilung der Konzepte in einzelne Wireframes auf Basis der Module konnten wir sehr genau spezifizieren, wie sich die Seite bei unterschiedlichen Auflösungen und mit unterschiedlichen Inhaltselementen verhalten soll. Jedoch ist diese fragmentierte Definition nicht besonders anschaulich. Aus diesem Grund erstellten für einzeln Beispielseiten detailliertere Wireframes, die die Moduldefinitionen entsprechend der Layoutdefinitionen zusammenführen. So ist es einfacher, Stakeholdern das tatsächliche Aussehen der späteren Website verständlich zu machen. Abb. 5 zeigt einen solchen Wireframe für die Startseite.

Zusammengesetzter Wireframe der Startseite bei 770 Pixel Seitenbreite

Abb. 5: Zusammengesetzter Wireframe der Startseite bei 770 Pixel Seitenbreite

Content First und modulare Wireframes haben besonders in großen Projekten Vorteile

Aus meiner Sicht war unsere Vorgehensweise bei der Konzeption für die neue Website ein voller Erfolg: Wir haben uns durch den Content First Ansatz auf die Inhalte konzentriert und mit den modularen Wireframes sehr strukturiert das responsive Verhalten der neuen Website definiert.

Natürlich war dies ein recht einfaches Projekt – nur wenige, interne Stakeholder und eine nicht übermäßige Komplexität der Website. Aus diesem Grund wären wir wahrscheinlich auch mit einem weniger strukturierten Vorgehen erfolgreich gewesen. Trotzdem war es ein gutes Gefühl, die eigene Website genauso strukturiert und professionell anzugehen wie ein komplexeres Kundenprojekt.

Ich bin überzeugt, dass das gewählte Vorgehen seine Vorteile gerade dann zeigt, wenn es umfangreicher und komplexer wird. Gerade bei sehr vielen Seitenarten und Stakeholdern hilft es, sich nicht direkt ins visuelle Layout zu stürzen, sondern entsprechend dem Content First Ansatz zunächst über Inhalte, Ziele und Prioritäten zu sprechen. Die modulare Definition der Wireframes ist ebenfalls sehr vorteilhaft, wenn es komplex wird. Denn ansonsten steigt die Anzahl der zu erstellenden Wireframes ins unermessliche und Inkonsistenzen sind quasi vorprogrammiert. Das von uns gewählte Vorgehen vermeidet solche Probleme zu einem großen Teil.

Wie immer interessiert mich Ihre Meinung: Was halten Sie von unserem Vorgehen? Haben Sie es schon einmal ähnlich gemacht oder bevorzugen Sie einen anderen Ansatz? Ich freue mich über Ihre Kommentare.

Ein Gedanke zu „Content First und modulare Wireframes für eresult.de – User-Centered Design Reality-Check Teil 2

  1. Pingback: Case Study: Ein neues Design für produktbezogen.de - produktbezogen.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.