Das neue XING – Design Prinzipien

Den folgenden Text hat Björn Waide von der XING-Produktentwicklung geschrieben und in der XING-Gruppe veröffentlicht.

“Liebe Mitglieder,

Ihre Diskussionen, Anregungen und Kritik verfolgen natürlich auch wir von der Produktentwicklung sehr aufmerksam. Dabei kristallisiert sich immer wieder heraus, dass grundsätzliche Fragen oder Unverständnis angesichts unserer Design-Prinzipien bestehen. Wir wollen an dieser Stelle gerne einige Hintergrundinformationen geben, warum bestimmte Dinge so sind, wie sie sind. Drei Punkte werden das Visual Design betreffend besonders häufig genannt:

  • Einsatz weißer Flächen (in der Fachsprache: Whitespace)
  • „Platzverschwendung“ durch zu schmale Darstellung (Gridbreite)
  • Scrolling

Diese drei Themen möchte ich an dieser Stelle gerne aufgreifen und Ihnen einige Einblicke und Hintergrundinformationen zu unseren Entscheidungen geben.

Whitespace/Weißraum

In den Diskussion um das neue XING Design wird gelegentlich kritisch angemerkt, dass wir “verschwenderisch” mit leeren Flächen umgehen und so Platz ungenutzt ließen, der eine kompaktere Darstellung erlauben würde. Für ein gutes Design ist Weißraum allerdings so notwendig wie die Luft zum Atmen, denn auch Inhalte müssen “atmen” können. Zusammengequetscht auf möglichst wenig Raum verliert das Auge Halt und die einzelne Information geht unter.

Wir benutzen zur Erläuterung gerne das Pinguin-Beispiel:

Jeder kennt sicher die Bilder von Pinguin-Gruppen, die bei winterlichen Stürmen in Kreisform eng aneinander geschmiegt stehen. So romantisch dieses Bild auch ist, eines fällt auf: Der einzelne Pinguin wird unsichtbar, es wird nur noch die Gruppe wahrgenommen. Erst wenn der Kreis sich auflöst und in der Antarktis im wahrsten Sinne des Wortes weißer Raum entsteht, wird das einzelne Mitglied der Gruppe sichtbar.

Auf einer Plattform wie XING, wo sich Individuen professionell präsentieren und darstellen wollen, ist es besonders wichtig, dass das einzelne Mitglied und seine Inhalte genug Raum bekommen und nicht in der Masse untergehen.

Weißraum verleiht darüber hinaus Struktur. An die Stelle der kleinen Boxen im alten Design, in die maximal viele Inhalte gepresst wurden, der Inhalt dadurch aber an Sichtbarkeit verlor, tritt nun Weißraum und die Konzentration auf die jeweils wichtige Information. Dies gibt dem Auge Halt und der Information Gewicht. Das ist gut für die Lesbarkeit und gut für den Autor der Information.

In unseren zahlreichen internen Nutzertests haben wir für das neue Design daher in beinahe allen Fällen als erste Reaktion bekommen: “Das neue XING wirkt viel aufgeräumter. Jetzt sehe ich Sachen, die mir vorher entgangen sind.”

Gridbreite

Jede professionelle Seite im Internet basiert auf einem sogenannten Grid, einer Aufteilung der verfügbaren Fläche und einer Festlegung auf bestimmte Breiten und Höhen für die verschiedenen Elemente. Das Grid vom neuen XING basiert immer noch auf der alten Maximalbreite von 1024 Pixeln. Mit dieser Breite unterstützen wir eine maximale Anzahl Nutzer auf den verschiedensten Endgeräten, ohne dass seitwärts gescrollt werden muss.

Für Nutzer deutlich größerer Monitore ergibt sich so viel freie Fläche links und rechts vom eigentlichen Inhalt im Vollbildmodus. Anwender mit sehr großen Monitoren haben aber in der Regel auch mehrere Anwendungen parallel nebeneinander offen, sodass der Browser gar nicht die komplette Fläche des Monitors belegt.

Das Grid selbst ist dann im Inhaltsbereich noch einmal unterteilt in 3 Flächen: Die schmale linke Seite für die “Mein XING“-Leiste, die rechte Spalte für Zusatzinformationen und die zentrale mittlere Spalte für den primären Inhalt. Die mittlere Spalte ist durch die Einführung der “Mein XING“-Leiste etwas schmaler als im alten Design. Das wiederum ist sehr förderlich für die Lesbarkeit von längeren Texten wie z.B. Nachrichten oder Gruppenbeiträgen, denn die Lesbarkeit von Texten nimmt mit kürzeren Spaltenbreiten zu (siehe Quelle). Sie müssen nur eine Tageszeitung Ihrer Wahl aufschlagen, um dieses intensiv erforschte Thema in der Praxis zu begutachten. Denn Tageszeitungen setzen seit jeher auf schmale Spalten-Layouts zur Verbesserung der Lesbarkeit.

Scrolling

Mit dem Weißraum und der Konzentration auf eine zentrale Information pro Seite geht auch eine Ausdehnung der Fläche einher. Anders als vor wenigen Jahren gibt es heute allerdings keine Standardauflösungen, die eine effiziente Ausnutzung der gängigen Browserflächen erlauben würden. Von kleinen Tablets mit Bildschirmgrößen unter 10 Zoll bis hin zu Designer-Monitoren mit 24 bis 30 Zoll werden heute eine Vielzahl von Endgeräten und Bildschirmen genutzt.

Dadurch hat sich im Internet eine Verlängerung der Seite in die Vertikale ergeben. Diesem Umstand tragen heute standardmäßig die meisten Endgeräte Rechnung durch spezielle Features wie Srollräder an Mäusen, spezielle Scrollflächen auf Touchpads und nicht zuletzt die Vielzahl an Geräten mit Touch-Oberflächen wie Smartphones und Tablets. Unzählige Studien haben seitdem den Mythos widerlegt, dass Nutzer angeblich Scroll-faul wären. (siehe beispielhafte Quelle)

Das kürzlich vorgestellte Mac OS 10.7 (Lion) wird gar völlig auf die Anzeige von Scrollbars verzichten, weil Scrollen inzwischen so selbstverständlich geworden ist und intuitiv verstanden wird, dass ein spezielles immer sichtbares Anzeigeelement nicht mehr notwendig ist. (siehe Quelle)

Nichtsdestotrotz ist bei jeder Seite in die Gestaltung die Frage eingeflossen: Was ist die wichtigste Information auf dieser Seite und muss daher möglichst weit oben platziert sein. Die Profilbesucher und Geburtstage sind nicht von ungefähr auf der Startseite rechts oben im gut sichtbaren Bereich angeordnet.

Visuelles Design ist nicht nur Geschmackssache. Das neue XING ist nicht nur auf Basis von wissenschaftlichen Studien und Design Best Practices, sondern vor allem auch auf Basis umfangreicher Nutzertests entstanden. Veränderungen dieses Umfangs bedürfen auch immer einer gewissen Gewöhnung. Trotz der vielen Arbeit und der Tests im Vorfeld sind natürlich auch in diesem Fall manche Dinge noch nicht optimal und bedürfen der Verbesserung.

Etliche Verbesserungen auch und gerade im Hinblick auf das Feedback in der Community sind bereits umgesetzt worden oder befinden sich in der Umsetzung. Es gibt jedoch einige grundsätzliche Prinzipien wie die oben genannten, an denen wir auch weiterhin festhalten werden.

Das Redesign hatte wie vielfach erwähnt insbesondere das Ziel, neue und weniger aktive Mitglieder abzuholen. Die Plattform ist inzwischen sehr groß und damit auch erklärungsbedürftig geworden. Vieles, was insbesondere Sie als Powernutzer ganz selbstverständlich fanden, war den meisten anderen Mitgliedern unklar.

Diese Probleme haben wir beseitigt, was auch und gerade den Moderatoren hilft, neue Mitglieder für Ihre Gruppen zu gewinnen, wie unsere Zahlen eindrucksvoll zeigen.

Nachdem wir diese Hausaufgaben gemacht haben, sind nun wieder etliche Kapazitäten frei, um sich auch den spezifischen Bedürfnissen von Powernutzern zu widmen. Wenn sich der eine oder andere also mit dem letzten Release noch nicht vollständig abgeholt fühlte: Bleiben Sie dran, das war alles erst der Anfang.”

Schlagworte: ,