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

Seit September 2013 berichten wir hier auf produktbezogen über digitale Produkt­entwicklung und UX-Design und wollen dabei nicht nur predigen sondern auch selber mit gutem Beispiel vorangehen. Darum wollen wir euch unseren, vor einigen Tagen erfolgten, Facelift nicht einfach nur vorsetzen, sondern unsere Gedanken und den Weg bis zum heutigen Stand transparent machen:

Vision & Strategie

In seinem Artikel Produktvision oder die Sehnsucht nach dem weiten, endlosen Meer gibt Rainer einen Einblick in unsere Produktvision mit produktbezogen:

(…) als Vision für produktbezogen wollen wir die deutschsprachige Plattform für alle Produktmanager, Product Owner, User Experience Designer bieten, die allen Interessierten die Möglichkeit gibt, sich über Produktmanagement und die hierfür relevanten Themen auszutauschen (…)

Die Strategie, mit der wir diese Vision verwirklichen wollen ist, eine Plattform mit hervorragenden Inhalten für Einsteiger und Professionals in den genannten Bereichen zu schaffen und damit eine möglichst große Reichweite zu erlangen.

Die drei Komponenten, um die wir uns aktiv kümmern müssen sind also:

  1. Inhalte: Verfassen und Kuratieren von relevanten und hilfreichen, deutschsprachigen Inhalten zu den Themen Produktmanagement, digitale Produktentwicklung, User Experience, Interaktionsdesign, Innovation und Unternehmenskultur.
  2. Plattform: Schaffen eines Blogs als Träger unserer Inhalte und zugehöriger Diskussionen und damit als regelmäßiger Anlaufpunkt für unsere Leser.
  3. Reichweite: Erreichen möglichst vieler Leser über persönliche Kontakte, Social Media, Suchmaschinen, Abonnements etc.

Status Quo Ante

In den 15 Monaten seit dem Start von produktbezogen haben wir und unsere Gastautoren insgesamt 91 Artikel veröffentlicht. Viele davon sind gelobt und geteilt worden und haben zum Teil interessante Diskussionen ausgelöst, zahlreiche Artikel sind bereits über 1.000 Mal aufrufen worden (einer sogar fast 3.000 Mal). In Sachen Inhalte sind wir also im Soll.

Unsere Reichweite haben wir durch rein organisches Wachstum stetig ausgebaut und können uns mittlerweile über 4.000 Besucher im Monat freuen. Hier ist gewiss noch viel Luft nach oben, aber wir sind trotzdem zufrieden und setzen weiter auf organisches Wachstum durch gute Inhalte.

Unsere Plattform hingegen ist über das letzte Jahr zu der Komponente geworden, bei der am meisten Handlungsbedarf bestand:

Um schnellstmöglich mit unserem Blog an den Start zu gehen und damit schnell zu prüfen, ob unser Konzept aufgeht, sind wir getreu dem MVP-Prinzip mit einer möglichst einfachen Lösung gestartet. Wir wählten dazu ein Standard-Template, das bei WordPress mitgeliefert wird und passten dieses minimal an:

produktbezogen altes Design

produktbezogen 2013, kurz nach dem Launch

Bestätigt durch den ersten Erfolg haben wir unseren Blog immer mehr optimiert und erweitert (zum Beispiel durch den Jobs-Bereich). Da das Standard-Template allerdings möglichst viele Einsatz-Szenarien, Erweiterungen und Sprachen abdeckt, war das Anpassen an unsere Zwecke stets ein großer Aufwand und führte letztendlich zu einer inkonsistenten Kraut-und-Rüben-Optik mit unterschiedlichsten Textgrößen und Linkfarben. Ein zweiter negativer Aspekt des Templates war, dass unser Blog etwas beliebig und austauschbar wirkte.

Ziele

Hauptziel des Facelifts war folglich, ein deutlich eigenständigeres und damit wiedererkennbares Design zu schaffen. Dieses soll den Kern unseres Blogs, unsere Artikel, klar in den Vordergrund stellen und ein sehr gutes Leseerlebnis bieten.

Zusätzliche Ziele, bzw. Ziele die sich aus den oberen Hauptzielen abgeleitet haben waren:

  • Auffrischung und Vereinheitlichung des Farbschemas
  • Die Interaktion der Besucher mit produktbezogen verstärken, z.B. durch Aufrufen weiterer Artikel, längerer Verweildauer oder Abonnieren der Inhalte
  • Bessere Kontrolle über Design, Layout und Quellcode, damit Reduzierung des Aufwands bei zukünftigen Erweiterungen
  • Verbesserung der Performance
  • Google-freundlicheres Markup

Bei aller Liebe zum Produkt und professioneller Einstellung darf natürlich nicht vergessen werden, dass ich diesen Facelift ohne Budget in meiner Freizeit durchgeführt habe und damit nicht wirklich die komplette Klaviatur der nutzerzentrierten Produktentwicklung aufgefahren habe :o)

Vorgehensweise: Content First & Design im Browser

Die Entwicklung habe ich getreu moderner Paradigmen wie Content First und Core Model nicht mit Blick auf das Gesamtlayout gestartet, sondern bei unseren Artikeln begonnen. Das „Drumherum” wie Navigation, Sidebar, Kommentare habe ich anfangs zurückgestellt.

As Startpunkt wählte ich einen typischen produktbezogen-Artikel und kopierte dessen Markup in eine jungfräuliche HTML-Datei. Auf Basis dieser Vorlage habe ich dann die visuelle Exploration und das Design fast ausschließlich direkt im Code vorgenommen. Photoshop habe ich nur noch zur Gestaltung von Bildelementen (Icons, Key Visuals, Logo) hinzugezogen.

Mehr Prägnanz durch Typographie

Allererster Schritt für die Gestaltung ansprechender und lesefreundlicher Inhalte ist die Wahl einer oder zwei guter Schriftarten.

Die bisher von uns eingesetzten Schriften waren die Open Sans (als Standard-Schrift des WordPress-Templates) und die Helvetica (im Logo). Beides gewiss ganz ästhetische und angenehme Schriften, aufgrund ihrer Verbreitung und Gefälligkeit sind sie allerdings alles andere als prägnant.

Da wir kein Budget haben um Schriftarten zu kaufen, war die Webfont-Sammlung von Google mein erster Anlaufpunkt. Ich habe dann in meiner HTML-Datei angefangen, verschiedene Kombinationen aus Schriftarten, Schnitten und Größen durchzu­exerzieren. Typographische Experimente sind eine der großen Stärken des Designs im Browser, da dank CSS-Stylesheets Schriftarten und -größen mit wenigen Zeilen Code für den ganzen Artikel angepasst werden können. Mit Photoshop (und fast allen anderen Grafikprogrammen) hätten solche Experimente bestimmt die zehnfache Zeit in Anspruch genommen.

Nach vielen Experimenten hatte ich schließlich mit der Slab-Serif-Variante der Android-Schrift „Roboto“ sowie der „Merriweather Sans“ ein angenehm lesbares Schriftbild mit eigenem, wiedererkennbaren Charakter:

produktbezogen Facelift Typographie

Der skizzenhafte Look unserer Illustrationen war bisher zusammen mit unserem Logo einziger Garant für unsere Wiedererkennbarkeit. Darum habe ich die beiden Schriften noch mit einer Handschrift (keine Webfont) für unsere Key Visuals ergänzt.

Nach Auswahl der Schriftarten, habe ich die Schriftgröße erhöht. So ist der Fließtext jetzt 16 statt 14 Punkt groß und insbesondere auf kleineren Screens deutlich lesefreundlicher.

Exkurs zum Logo

Im nächsten Schritt habe ich den Pfad des Content-First-Designs kurz verlassen und einen Exkurs zum Logo gemacht. Zum einen, um zu erproben, ob unsere neuen Schriften auch mit unserer Bildmarke harmonieren. Zum anderen aber sollte das Logo die Grundlage für unser Farbschema bilden.

Die Roboto machte sich auf Anhieb großartig für den produktbezogen-Schriftzug, allerdings bedurften die Farben einer dringenden Auffrischung. Der verwaschene Look der ersten Iteration ist durch die Transparenzen der überlappenden Kreise entstanden, also habe ich zuerst die Bildmarke komplett neu aus nicht-transparenten Kreis-Stücken aufgebaut, dann die Farbtöne aus dem alten Logo übernommen und zuletzt jede Farbe einzeln optimiert:

Logo produktbezogen Facelift

Farbschema

Aus den sieben Farben der Bildmarke habe ich dann ein Farbschema entwickelt und so für Logo, Key Visuals, Typographie und Interaktions-Elemente (Links, Buttons,…) ein einheitliches Farbprofil ermittelt.

produktbezogen Facelift Farben

Statt der bisher drei Farben stehen damit nun insgesamt fünf Hintergrundfarben für unsere Key Visuals zur Verfügung und sorgen für etwas mehr Abwechslung ohne Beliebig zu werden:

produktbezogen Facelift Key-Visuals

Aufbau des Templates

Mit der neuen Typographie und einem aufgefrischten Fabkonzept hatte ich nun die wichtigsten Bausteine für das neue Blog-Template zur Hand. Als nächster Schritt, getreu der Arbeitsrichtung vom Kerninhalt zur Gesamtseite, ging es im nächsten Schritt darum, das Artikellayout zu finalisieren.

An dieser Stelle habe ich mich entschieden, nicht nach dem Mobile-First-Paradigma vorzugehen. Mittlerweile ist diese Vorgehensweise fast alternativlos, in unserem Fall bin ich aber davon überzeugt, dass unsere langen Fachartikel eher auf größeren Bildschirmen, also auf Tablets, Notebooks und Desktop-Rechnern gelesen werden.

Als Grundlage habe ich die Idealbreite für unsere Schriften experimentell ermittelt. Diese habe ich bei 700px festgelegt und an allen Seiten 50px Rand hinzugefügt. Ein Artikel benötigt im Idealfall also 800px – eine Breite, die bei gängigen Tablets im Hochkantmodus schon fast erreicht wird und ab 1024er-Screens bereits eine Sidebar erlaubt.

Im nächsten Schritt habe ich, inspiriert von Googles Material Design, den Artikeltext auf eine weiße Fläche gesetzt, diese mit einem randlosen Key Visual verbunden und beides auf grauem Hintergrund platziert, so dass ein klar umgrenzter Artikelblock entsteht.

produktbezogen Facelift Artikel

Um unsere Inhalte klar in den Vordergrund zu stellen bleibt diese weiße Hinterlegung unseren Artikeln bzw. Hauptinhalten der Seite vorbehalten. Alle weiteren Inhalte (Logo, Navigation, Sidebar) sollten hingegen zur Abgrenzung auf dem grauen Hintergrund stehen.

Responsive Design

Nachdem ich mit der Gestaltung des Inhalts zufrieden war, ging es an die Anordnung der restlichen Inhalte für alle denkbaren Screengrößen. Dazu habe ich alle weiteren Bereiche der Seite, also Header, Navigation, Sidebar und Footer, als bunte Rechtecken der zuvor aufgebauten HTML-Datei angelegt.

produktbezogen Facelift DOM

Eine schnelle und realistische Simulation einer responsiven Website ist eine weitere große Stärke des Gestaltens im Browser. Gewissermaßen ist es damit noch nicht einmal eine Simulation sondern schon das „real thing“. Im Rahmen von OTTOs Responsive-Design-Projekt habe ich viele Designprogramme getestet und mit keinem konnten ähnlich schnell, elegant und zuverlässig responsive Layouts entwickelt und getestet werden. (Nicht nur aus diesem Grund ist es wichtig, als Interaktions- oder Webdesigner ein gutes Verständnis für HTML und CSS zu haben.)

Für den Aufbau des Layouts bin ich wieder auf den „Pfad der Gerechten“ (Mobile First) zurückgekehrt und habe mein 800px breites Ideallayout des Artikels auf eine mobiltaugliche Breite gebracht. Viel musste ich nicht dafür verändern, nur die Headlines und Außenabstände ein Stück verkleinern.

Als Mindestbreite habe ich mich auf 320 CSS-Pixel festgelegt. Es gibt nur noch sehr wenige Geräte mit kleineren Breiten und ein Blick in unsere Analytics-Daten verriet mir, dass in den letzten Monaten niemand mehr mit einem kleineren Screen produktbezogen besucht hat. Im Moment mag ich mir auch nicht vorstellen, das irgendwer unsere Artikel auf einer Smartwatch lesen mag.

Von diesem Startpunkt habe ich nach oben skaliert, bis ich ab 640px Bildschirmbreite genügend Platz für die ursprünglichen Größen für Headlines und Außenabstände gefunden habe. (Diese Variante der Seite, die bei den meisten hochkant gehaltenen Tablets angezeigt wird, bietet ein wunderbar störungsfreies Leseerlebnis. Einfach mal ausprobieren!)

Ab 960px hatte ich dann genügend Platz, um den Header und die Sidebar neben den Artikel zu setzen. Auf diese Art kommt die volle Bildschirmhöhe ohne zu Scrollen dem Artikel zugute. Ab 1.200px waren die maximal sinnvollen Breiten für Artikel und Sidebar erreicht und ab dieser Größe kommen nur noch Außenabstände hinzu.

produktbezogen Responsive Design

(zum Vergrößern anklicken, oder einfach den Browser kleiner ziehen)

Ein weiterer wichtiger Punkt im Rahmen eines Multi-Device-tauglichen Designs ist sicherzustellen, dass alle Klicktargets genügend groß für Touch-Bedienung sind. Bei mir hat sich bisher die Faustregel gut bewährt, dass in einem Bereich von 50×50 CSS-Pixeln keine zwei Klicktargets sein dürfen. Dieser Bereich ermöglicht auf dem Großteil aktueller Touch-Devices eine Bedienung mit sehr geringer Fehler­wahrscheinlichkeit. Bei der Hauptnavigation musste ich allerdings einen Kompromiss mit nur 40px eingehen, da diese ansonsten zu viel Platz benötigt hätte und visuell auseinander gefallen wäre.

Nach einem ausgiebigen Testlauf des responsiven Layouts auf unterschiedlichsten Browsern und Geräten, stand der dritte große Schritt an: Das Auftrennen meiner statischen HTML-Datei in WordPress-Template-Dateien und damit einhergehend, die Erstellung aller Seitentypen (Startseite, Archiv, Artikel, Jobangebot, Seite, usw.).

Das neue Template habe ich dann auf einer Wordpress-Installation auf einem lokal installierten Webserver aktiviert. Mit den gespiegelten Daten unseres Blogs konnte ich so anhand echter Inhalte und echtem WordPress-Verhalten am Template weiter arbeiten, ohne einen Leser zu stören.

Details, Details, Details…

Fast die Hälfte der Arbeitszeit floss im Anschluss in die unzähligen Details, von der Gestaltung der Kategorieseiten bis hin zu den Autorenboxen und den Nutzerkommentaren. Um den Rahmen des Artikels aber nicht vollends zu sprengen, beschränke ich mich auf ein Beispiel:

Um unser Ziel zu erreichen die Interaktion von Lesern mit produktbezogen zu stärken, wurde unsere Sidebar an drei Stellen angepasst:

  1. Es wurden mit Karriere und Unternehmenskultur zwei weitere Artikelkategorien in unsere Hauptnavigation aufgenommen. Beide haben seitdem ihre Aufrufzahlen gut verzehnfacht.
  2. Die Möglichkeiten, unserem Blog zu folgen (Social Media, RSS & Mail) wurden auffälliger gestaltet und nach oben verschoben, um bei größeren Bildschirmen über der Fold zu landen.
  3. An Stelle der Liste der neuesten Artikel (die einfach nur die Startseite doppelt) ist eine Liste der meistgelesenen Artikel der letzten 48 Stunden getreten, die mutmaßlich interessanter wirkt und deren Inhalte sich deutlich schneller ändern.

produktbezogen Facelift Sidebar

…und wieder irgendwie MVP

Natürlich ist auch jetzt unser Blog nicht fertig und an vielen Stellen ist noch Feinschliff nötig. Aber wir sind weit genug, den Blog live zu stellen und neu zu lernen. Vergleicht man die Screenshots von 2013, 2014 und 2015 haben wir auf dem Weg, unsere Ziele und unsere Vision zu erreichen, schon ein ganzes Stück geschafft:

produktbezogen Screenshots

(zum Vergrößern anklicken)

Darüber hinaus ermöglicht uns unser neues, aufgeräumtes Template viel schneller, Anpassungen vorzunehmen. Die CSS-Datei konnte z.B. auf ein Drittel ihrer ursprünglichen Größe reduziert werden, überflüssige Übersetzungsfunktionen und Seitentypen konnten komplett ausgebaut werden.

Der neue Überblick hat bereits geholfen, ein Stück an der Lade-Performance drehen und Google mit einer saubereren Semantik zu erfreuen. In den 9 Tagen seit der Umschaltung auf das neue Design sind zudem schon zwei Dutzend weitere Optimierungen eingeflossen.

Eure Hilfe (und Meinung) ist gefragt

Natürlich lernen wir am besten mit eurer Hilfe: Schreibt uns, wie euch unser neuer Auftritt gefällt. Haben wir unsere Ziele erreicht? Oder fandet ihr den alten Auftritt etwa besser? Habt ihr Verbesserungsvorschläge? Wäret ihr anders vorgegangen? Hättet ihr die Zeit besser zum Schreiben von Artikeln eingesetzt?

Auch könnt ihr uns weiterhelfen, indem ihr uns Fehler oder „Dinge, die nicht so aussehen, als ob sie so gehören“ meldet (mit Angaben zu Betriebssystem und Browserversion). Denn die Qualitätssicherung nimmt bei mehreren Seitentypen, Responsive Design, unzähligen Browserversionen und Devices mittlerweile Dimensionen an, die in der Freizeit nicht mehr handhabbar sind.

Erstes positives Feedback ist auch schon eingetrudelt:

Und jetzt kommt ihr!

Avatar-Foto

Über Wolf Brüning

Wolf arbeitet als Executive UX Designer in der Abteilung User Experience der OTTO GmbH & Co KG und kümmert sich hier mit seinen Kollegen um Konzeption und Interaktionsdesign der vollständig inhouse entwickelten eCommerce-Plattform des Konzerns. Vor seiner Hamburger Zeit hat Wolf in verschieden Web- und Usability-Agenturen gearbeitet und in Magdeburg Computervisualistik studiert. Wolf ist Mitgründer von produktbezogen.de und kümmert sich neben den Inhalten auch um Design und Technik des Blogs.

9 Kommentare


  1. Avatar-FotoTamim

    Der „Weiterlesen“ Button auf der Startseite ist mit zu prägnant. Das kann sicherlich noch etwas schlichter werden.


  2. Avatar-FotoWolf Brüning Artikelautor

    Danke für das Feedback, Tamim! Der Weiterlesen-Button ist allerdings die Primäraktion der Startseite, so viel unprägnanter würde ich den daher gar nicht machen wollen.

    (PS: Hatte dir vor ein paar Tagen eine Mail geschrieben, ist die angekommen?)


  3. Avatar-FotoBernd Schröder

    Wir gehen auch zunächst den Weg eines Wordspress Stils zu Anfang und werden später eigene Ansätze verfolgen, je nachdem wie der Blog läuft. Die neue Schrift gefällt mir und ist sehr gut lesbar. Open Sans ist derzeit für uns eine gute Wahl.


  4. Avatar-FotoThorsten Wilhelm

    Vielen Dank für den tollen Einblick. Ich finde Dir / euch ist Gutes gelungen, mein Glückwunsch.
    Meiner Meinung nach sind die Beiträge nun deutlich schneller und angenehmer zu lesen. Das empfinde ich als sehr nützlich auf einem Blog. Ich lese täglich in mehr als 10 Blogs – und wenn ich dann schnell „querlesen“ kann, dann ist das für mich eine große Freude.


  5. Avatar-FotoChristoph Ullmann

    Hi,

    sehr schöner Artikel. Ich finde es gut erklärt wie und warum ihr Änderungen gemacht habt.

    Was mir noch ein bisschen fehlt, ist eine Möglichkeit auf die Übersichtsseite/ Startseite zurückzukommen, wenn ich einen Artikel durchgelesen haben. Im Moment kann ich da nur mit Browser back arbeiten, wieder ganz hochscrollen oder ich hab die andere Möglichkeit nicht gefunden. Gibt es einen speziellen Grund das ihr mit keinem fixed Header im XL und L Viewport arbeitet?

    LG,
    Christoph


  6. Avatar-FotoWolf Brüning Artikelautor

    Vielen Dank für das weitere Feedback!

    @Thorsten: Freut mich, dass ich dein Leseerlebnis steigern konnte. Wie gesagt, besonders kann ich das Lesen auf Tablets im Portrait-Modus empfehlen.

    @Christoph:

    Ich frage mich, was hilfreicher ist. Ein Button zur Startseite im unteren Bereich der Seite oder ein Nach-Oben-Link? Letzterer würde für einen Rücksprung zur Startseite einen Klick mehr bedeuten aber dem Nutzer auch alle anderen Optionen offen lassen, ohne die Seite neu zu laden. Ich lass mir das auf jeden Fall mal durch den Kopf gehen, viele unserer Artikel sind ja echt lang… (Aber eigentlich komisch, dass die Webbrowser noch keine native Lösung für diese Problematik anbieten. Geht ja nicht nur ums Springen nach oben, sondern auch an andere Stellen.)

    Zu deinem zweiten Punkt: Was genau meinst du mit „fixed Header“? Meinst du eine Navigationsleiste, die nicht mitscrollt sondern irgendwo am Bildschirmrand klemmt?


  7. Avatar-FotoChristoph Ullmann

    Hi Wolf,

    bei Immonet hatten wir ein ähnliches Problem mit dem Expose.
    Wir haben deswegen ein Navigationselement, dass sich am oberen Bildschirmrand setzt sobald die eigentlich Navigation nicht mehr im sichtbaren Bereich ist.
    In dem Element haben wir die Navigation auf die wichtigsten Aktionen beschränkt, die ein Nutzer bei uns auf der Seite machen kann und noch etwas angereichert mit Keyfacts
    Guck dir das am besten mal an bei uns auf der Seite. Es ist relativ schwer, dass zu erklären, wenn man es nicht sieht.

    LG
    Christoph


  8. Avatar-FotoWolf Brüning Artikelautor

    Hallo Christoph,
    ok, ich verstehe jetzt, was du meinst. Ist bei immonet auch mMn sehr gut umgesetzt. Ich werde beizeiten mal mit einer Nach-Oben-Lasche experimentieren, die sich perspektivisch zu einer Sticky Navigation ausbauen lässt. Allerdings grübele ich noch über die Frage, ob ich diese dann nach oben oder nach unten mache. Bei iPads ist ja das Problem, dass bei Klicks in Nähe der Oberkante erstmal Tabs und Adressfeld eingeblendet werden und so groß wie in eurem Exposé mag ich das hier im Blog nicht machen.
    Auf jeden Fall danke für deinen Input. Bevor ich mich aber daran mache, gibt es noch einen Stapel weiterer Dinge glatt zu ziehen :)
    Grüße,
    Wolf


Schreibe einen Kommentar

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

Mit Absenden des Kommentars stimmst Du der Speicherung deiner persönlichen Daten (Name, eMail-Adresse, Webseite und Nachricht) durch uns bis auf Widerruf zu. Zur Vermeidung von Spam und zur rechtlichen Absicherung wird deine IP für 2 Monate gespeichert. Ebenfalls zur Vermeidung von Spam werden diese Daten einmalig an Server der Firma Automattic inc. geschickt. Zur Darstellung eines Nutzerbildes wird die eMail-Adresse im pseudonymisierter Form an Automattic inc. übermittelt. Wenn du einen oder beide Haken für die eMail-Benachrichtigungen setzt, wird deine eMail-Adresse bei Automattic inc. gespeichert. (Datenschutzerklärung)

Du hast noch viel mehr zu erzählen?

Dann schreib doch einen eigenen Artikel auf produktbezogen.

Artikel vorschlagen →