uxzentrisch erörtert:
Neues Google+ Feature zeigt Best Practice für responsive UIs und Scrollen

Es sind interessante Zeiten für Interaktionsdesigner, die an Webapplikationen arbeiten. Zwei neue Trends bieten viel Potential zur Optimierung der User Experience. Interfaces werden responsiv und ein neues Verhalten beim Scrollen in Applikationen etabiert sich.

Ein brandneues Feature von Google+ gibt uns die Möglichkeit einer ersten Betrachtung beider Trends, demonstriert von Andy Hertzfeld, programmierender Designer bei Google+ und ehemaliger Apple-Mitarbeiter Nummer 435:

Trend 1: Responsive Interfaces

Responsive Interfaces meint, dass die Seite oder Applikation ihre Inhalte an den maximal verfügbaren Platz im Browserfenster anpasst. Ziel ist, den verfügbare Fläche optimal auszunutzen und das perfekte Nutzungserlebnis für alle Auflösungen zu schaffen.

Schon seit einigen Monaten schwärmt die Webdesign-Szene davon, ihre Content-Seiten zu optimieren – eine Bewegung die sich in der Seite mediaqueri.es wohl am besten manifestiert. Diese Seite sammelt eben solche responsiven Webseiten. Wurzel dieser Bewegung ist sicher, dass wir endlich akzeptiert haben, dass es keine Standard-Größen bei Browserfenstern gibt, sondern im Gegenteil die Anzahl der Ausgabegeräte und Bildschirmauflösungen durch Subnotebooks, Tables und Smartphones ständig wächst. Wegbereiter des Trends ist die Tatsache, dass neue Technologien wie HTML5/CSS3-Mediaqueries es heute sehr einfach machen, ein Interface zu optimieren.

Es ist nicht weiter verwunderlich, dass diese Bewegung mit etwas Verzögerung im Webapplikationsmarkt ankommt.

Google+ zeigt das Potential für Interaction Design Optimierungen: Abhängig von der verfügbaren Bildschirmhöhe entscheidet die Applikation, wie viel Bildschirmplatz es für feste Interface-Elemente reservieren darf. Und dieses Detail ist sicher erst der Anfang.

Weitere Beispiele wie responsive UIs Webapplikationen verbessern können:

  • Facebook führte vor einem Monat die Chat Sidebar ein. Wenn das Fenster breit genug ist, wird die Freunde-Liste jetzt nicht mehr als kleine Profilbild-Gruppe unterhalb der linken Navigation angezeigt, sondern nutzt die gesamte Fensterhöhe rechts am Bildschirm aus.
  • Google hat im Rahmen seiner großen Designoffensive angekündigt, dass die neuen Templates für Google Mail (Artikel) und Google Calendar (Artikel) responsiv sein werden. Aktiviert man das neue Google Calendar-Design kann man schon jetzt sehen, dass der Bereich von Logo und Suchbox seine Größe ändern, abhängig von der Fenstergröße.
  • Webapplikationen mit große Tabellen können ebenfalls profitieren, wie in der Diskussion meiner IxD-Details-Session auf dem uxcamp Berlin herausgestellt wurde: Spalten, die bei kleinen Bildschirmen nur Abkürzungen enthalten, können wenn mehr Platz verfügbar ist Begriffe beispielsweise direkt ausschreiben.

Fazit: Interfaces müssen zukünftig responsiv auf den verfügbaren Bildschirmplatz eingehen, schon allein um ein negatives Nutzungserlebnis  bei mobilen Anwendungsfälle zu verhindern. Denkt man dann einen Schritt weiter und optimiert auch für große Bildschirme, kann man einen Wow-Moment erschaffen, der Kunden bindet.
Die Herausforderung für Konzept, Design und Entwicklung ist jedoch, diese neuen Anforderungen in ihre Arbeitsprozesse zu integrieren. Die Methoden und Hilfsmittel dafür müssen noch entwickelt werden.

Trend 2: Scrollen in Web­applikationen, der Hybrid aus Webseite und Software

Ein zentraler Unterschied zwischen Softwareprogrammen und Webseiten war immer schon ihr Umgang mit dem verfügbaren Bildschirmplatz. In einer Software ist die Funktionsleiste (Menü und Symbole) fixiert und man scrollt in einem (kleinen) Bereich der Applikation. Häufig gibt es sogar mehrere Bereiche, in denen unabhängig voneinander gescroll werden kann. Webapplikationen dagegen folgen historisch dem Scrollverhalten von textbasierten Webseiten: man bewegt die gesamte Seite samt ihrer Funktionselementen.

Die Vor- und Nachteile sind offensichtlich und jeder Vorteil ist gleichzeitig auch ein Nachteil. Mal sind die Funktionselement immer im sichtbaren Bereich – und mal hat man den vollständigen Platz für den Content zur Verfügung.

Google+ zeigt eine Hybridlösung. Diese ist zwar nicht neu aber auch bei weitem noch kein Standard und auch erst jetzt, in Kombination mit dem oben beschriebenen Trend zum responsiven Interface wirklich als best practice umgesetzt: Google+ folgt weiterhin dem Seitenaufbau einer textbasierten Seite mit all seinen Vorteilen, fixiert aber (abhängig von der verfügbaren Bildschirmhöhe) die Funktionselemente am Kopf der Seite, sobald diese aus dem sichtbaren Bereich herausscrollen.

Weitere Beispiele für die unterschiedlichen Scroll-Verahlten:

Fazit: Schon die Beispiel-Liste zeigt, dass es keinen Standard geben darf. Unterschiedliche Content-Typen brauchen einen unterschiedlichen Seitenaufbau. Die neue Hybridlösung erweitert hier das Spielfeld und verbessert die Usability – besonders, wenn sie in ein responsives Interface eingebettet ist.

Wie gesagt: Spannende Zeiten für Interaktionsdesign-Liebhaber. Ich bin gespannt, welche Neuerungen uns noch begegnen werden und freue mich auf die UX-Verbesserungen, die sie mit sich bringen. Bitte kommentiert, wenn ihr weitere Beispiele kennt!