Zoomable UI: Alternative zu In-Site Hyperlink-Navigation?

Zoomable User Interface fürs Web
Kommentare

Zoomable User Interface (ZUI) oder skalierbare Benutzeroberfläche beschreibt eine grafische Benutzeroberfläche mit der zusätzlichen Möglichkeit, einzelne Elemente oder die gesamte Oberfläche zu zoomen. Der Nutzer muss allerdings das Zoomable UI steuern, um Zoom und Schwenkrichtung (Pan) zu kontrollieren. Im Gegensatz zum klassischen Graphical UI ist das ZUI intuitiver und flexibler. Da der Aufwand für die Entwicklung aber höher ist, beschränken sich viele Webdesigner auf herkömmliche GUIs.

Als Zoomable User Interface (ZUI) gelten Benutzeroberflächen, die einen der folgenden Aspekte in sich vereinen: Die Bedienelemente liegen auf einer Arbeitsfläche, die gezoomt und horizontal sowie vertikal verschoben werden kann. Mindestens ein Element muss skalierbare Bestandteile enthalten. Zur Zusammenstellung von Bedienelementen können in ZUIs primitive Elemente wie Pfade, Texte und Bitmaps genutzt werden. Diese können je nach Library mit Eventhandlern versehen und animiert sowie transformiert werden.

Der lange Weg zum Zoomable User Interface

Der finnische Web-Designer Joni Korpi beschäftigt sich seit 2012 mit dem Problem, ein ansprechendes skalierbares User Interface zu entwickeln. Sein Plan war es, eine Alternative zur In-Site Hyperlink-Navigation bereitzustellen, da sie laut Korpi oftmals „eine mangelhafte User Experience“ aufweist. So kommt es bei dieser Darstellungsoption vermehrt zu Full-Page Reloads, die die Usability gravierend stören. Auch wenn Browser den „flash to white“-Effekt vermeiden, führt das Ausblenden von Elementen einer Seite und die Einblendung von Elementen der neuen Site laut Korpi zu Schwierigkeiten für den User. Denn der Gedankenfluss wird auf diese Weise unterbrochen und der Übergang zwischen Websites wirkt langsam. Auch willkürliche Animationen verwirren den Nutzer eher, als dass sie positive Effekte nach sich ziehen.

Um diese Probleme zu beheben, ist Korpi verschiedene Umwege über Konzepte wie „Infinite Canvas“ und bi-direktionales Scrolling gegangen. Infinite Canvas basiert auf der Idee, dass der Bildschirm mehr als ein Fenster denn als eine Seite behandelt werden sollte. So sollte man Printprodukte, die online aufbereitet werden, nicht zwangsläufig auf Seiten aufteilen. Die „unendliche Leinwand“ ermöglicht es zum Beispiel Comiczeichnern, ihre Werke anhand der Belange der Geschichte und nicht des Mediums zu gestalten. So soll etwa ein kompletter Comicstrip auf einer Website dargestellt werden – mit der Option, einzelne Sequenzen zu klicken und detailliert anzusehen.

Auch das bi-direktionale Scrolling brachte nicht den gewünschten Effekt: Hierbei wird jeder Seitenabschnitt horizontal angelegt, während der Inhalt vertikal durchläuft. So entsteht ein bi-direktionales Layout: Horizontal lässt sich durch die Kategorien scrollen. Interessiert man sich für ein Thema, kann man durch vertikales Scrollen tiefer vordringen. Auf der Suche nach einem passenden User Interface sind Joni Korpi schließlich skalierbare Benutzeroberflächen begegnet, die eine vielversprechende Möglichkeit für ein Zoomable User Interface darstellen.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Eigenschaften des Zoomable UI

Da Joni Korpi für seinen Blog ein Zoomable User Interface genutzt hat, stechen dem Nutzer direkt die Vor- und Nachteile ins Auge. Zu letzteren kommen wir später; zuerst sollen die Charakteristika dieses Zoomable UI vorgestellt werden:

  • Die Navigation mithilfe von Posts und Kategorien vermittelt dem User das Gefühl, sich im selben System zu bewegen

Durch die Verwendung des ZUI bekommt eine Website mehr den Charakter einer App und wirkt weniger wie eine Sammlung einzelner Dokumente. Jede URL verweist auf einen anderen Status der App. Die Bewegung zwischen den Status‘ gibt Nutzern das Gefühl einer kontinuierlichen Browsingerfahrung.

  • Kein Homepage- oder Navigationsmenü

Innerhalb dieses Designs wurden die beiden Elemente weggelassen und durch etwas Einfacheres ersetzt: eine skalierbare Ansicht des Seiteninhalts. Der Inhalt selbst wird zur Navigation.

  • Jeder Artikel hat eine bestimmte räumliche Position auf der Website

Die skalierbare Animation hilft beim Verständnis, wo Elemente herkommen und wohin sie führen. Ziel ist es, dass User sich mehr an der Optik der einzelnen Elemente orientieren – beispielsweise „Der Artikel mit gelben Streifen unten links“ anstatt am Namen.

  • Permalinks, Browser-History, JavaScript- und animationsfreies Browsen werden unterstützt

Der Unterschied zwischen einem herangezoomten und nicht gezoomten Post besteht in ein paar Kategorien und AJAX-gefülltem Markup. Besucht man einen Permalink, ist es leicht, auf Serverseite zu rendern. Das bedeutet auch, dass eine Website mit herkömmlichen Full-Page Reloads gebrowst werden kann – das ist zum Beispiel für Nutzer mit Bewegungskrankheit oder in Fällen von nicht verfügbarem JavaScript wichtig.

  • ESC zum Herauszoomen

Befindet man sich auf einer Unterseite oder einem Artikel, besteht die Möglichkeit mit der ESC-Taste wieder herauszuzoomen und eine Ebene höher zu gelangen.

  • Zoomen oder scrollen

Entweder zoomen Nutzer oder scrollen – aber niemals beides gleichzeitig. Die Home View passt sich immer der Größe und Form des Darstellungsfelds an. Durch das Zoomen wird dem Überfluss an Informationen Einhalt geboten, indem man sich für eine Ebene entscheidet. Verschiedene Elemente werden in zoombare Kategorien gruppiert.

  • Fließende Übergänge für jeden Artikel bestehen aus HTML/CSS

Da Artikel neu skaliert werden, anstatt Scale Transforms zu nutzen, kann ihr tatsächlicher textueller Inhalt nicht angezeigt werden, bevor sie herangezoomt sind. Aus diesem Grund wurden „Covers“ hinzugefügt, damit User während der Seitennavigation einen Wiedererkennungswert haben. Für diese Übergänge hat Korpi reine HTML/CSS-Illustrationen verwendet, die einfach zu skalieren sind.

Zoomable UI: Alternative zu In-Site Hyperlink-Navigation?

Das Konzept des Zoomable User Interface ist vielversprechend, da es den User intuitiv eine Website benutzen lässt. So zumindest die Standardannahme. In der Praxis kann es allerdings zu einigen Problemen kommen. Das bemerkt man auch an Korpis Website. Beginnt man den Besuch dort nicht auf der Startseite, sondern kommt beispielsweise über Google direkt auf eine Unterseite, wird es kompliziert. Da kein Menü vorhanden ist, gelangt man schnell zu der Annahme, dass es nur eine einzige Seite gibt. Das Konzept hinter der Website ist nicht klar: Woher sollen Nutzer wissen, dass man durch Drücken des ESC-Buttons zurück auf die übergeordnete Kategorieseite gelangt? Einzig der kleine Pfeil links unten in der Ecke zeigt an, dass es hier auch noch weiter bzw. zurück geht – doch muss man diesen auch erst mal finden und als interaktives Objekt verstehen.

Der User muss bei diesem User Interface mehr an die Hand genommen werden, da er sich sonst auf der Website verliert. Für Websites mit flacher Hierarchie ist das Zoomable UI sicherlich sinnvoll und attraktiv, bei komplexeren Sites wird es aber schwierig. Die User Experience leidet, da die Website eben nicht selbsterklärend ist. Es hängt also davon ab, an welchem Punkt man einsteigt. Etwas mehr Usability würde der Website helfen – denn nur dann kann sie eine echte Alternative zur In-Site Hyperlink-Navigation werden.

[/vc_column]

Man muss sich das Zoomable UI wie ein Eintauchen ins Web vorstellen: Genauso wie ein Taucher im Meer entdeckt der Nutzer immer neue Facetten der Site und taucht tiefer ein – das ist aber nur möglich, wenn er zuvor eine Anleitung an die Hand bekommen hat, wie das Ganze funktioniert.

Der Code steht übrigens auf GitHub zum Download zur Verfügung. Joni Korpi sagt dazu selbst, dass er „messy“ sei – glaubt man einigen Web-Entwicklern, dann ist messy gar kein Ausdruck.

Aufmacherbild: investigator looking with magnifying glass von Shutterstock / Urheberrecht: Ollyy

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -