medani-pixel
news
26
Sep 16

User Experience - die Wahl der richtigen Navigation

Ist die konventionelle Form der Navigation die passendste? Wir zeigen hier innovative Navigationskonzepte und sehen dabei, wie einzigartige Navigationen die User Experience von Projekten positiv beeinflussen können.

Bei der Konzeption von Digitalen Konzepten wird man immer vor die Wahl der richtigen Navigation gestellt. Verständlich, klar, übersichtlich. Das sind verbreitete Ansätze die sich immer wieder bewähren. Um diese zu erzeugen werden im aktuellen Webdesign oft gut funktionierende User Patterns verwendet und wiederholt: Das Logo links oben als Home-Button, die Menüpunkte stets sichtbar am oberen Screenrand. Etc…

Doch ist die konventionelle Form der Navigation die passendste? Studien von Verhaltensmustern des Benutzerflusses auf Websites zeigen zwar, dass klare klassische Navigationsmuster die Bedienbarkeit einer Website fördern. Wird aber in der Digital Branding Strategie einer Marke herausgearbeitet, die Innovationskraft und Erlebbarkeit eines Produktes oder Services zu betonen, dann wird die optimale Benutzererfahrung (User Experience) genauso gefördert, wenn der Entdeckungsgeist der Besucher angeregt wird. Denn gerade eine erfahrungsreiche Navigationsarchitektur kann dazu führen, dass weitere Unterseiten geöffnet werden, gerade weil die Lust am Mehr gefördert wird.

Natürlich darf in wirkungsvollem Webdesign die Orientierung und Bedienbarkeit des Interfaces nicht auf der Strecke bleiben. Wir zeigen hier einige innovative Navigationskonzepte und sehen dabei, wie unterschiedlich Lösungen aussehen können.

 

Mapping Worlds

e.leclerc

Eine französische Brauerei wurde im Stil eines großflächig angelegten Suchbildes erlebbar gemacht. Besucher können sich hier mit Maus und Cursor in allen 4 Himmelsrichtungen über das sympatisch illustrierte Firmenareal bewegen. Durch Micro-Animations werden Details liebevoll in Szene gesetzt. Lieferwägen und Gabelstapler bewegen sich emsig über die Landschaft. Menschen erledigen sympatisch ihre Arbeit. Die Informationen die im Webdesign transportiert werden, sind in Tooltips verpackt, die man aktiv aufrufen kann. Das Prinzip ist leicht verständlich. Gleichzeitig lädt gerade eine derartig spezielle Navigationsidee zum forschen ein.

Quelle: eLeclerc

Quelle: eLeclerc

Dole Banana

Auch Dole Banana nützt als Informations- und Imagetool eine erlebbare Landkarte einer Bananenplantage. Hier wird nicht rein mit Illustration gearbeitet, sondern Fotografien und Videos aus dem Real Life werden eingebunden um die Vertrauensbildung weiter zu stärken. Die Karte als zentraler Orientierungspunkt ermöglicht eine klar verständliche Navigationsstruktur. Vertrauensbildung wird hier in einem spielerischen Navigationskonzept transportiert. Mehr dazu lesen Sie in einem unserer vergangenen Artikel.

medani-web-und-design-dole-earth

Quelle: Dole Earth

Horizontal Infinity Scroll

FS MILLBANK

Die Präsentation des Typeface FS Millbank zeigt einen eigenständigen Zugang zur Navigation. Klassische User Experience Prinzipien werden zu Gunsten des Erfahrungsreichtums des Webdesigns beiseite gelegt. Entgegen der gängigen Top-down Scroll Konzepte, kann man sich hier ausschließlich horizontal bewegen. Die Orientierung wird durch eine zusätzliche klassische Navigationsmöglichkeit erleichtert. Schön sind hier die räumlichen Ebenen, die durch ästhetischen und reduzierten Einsatz von Typografie  und dezenter Illustration erzeugt werden. Sehen Sie hier.

Quelle: FS Millbank

Quelle: FS Millbank

Immersive Scroll

World of Swiss

Die schweizer Flugline Swiss Air präsentiert in einer eigenen aufwendig gestalteten Micro-Site World of Swiss ihre Flotte und ihr Streckennetz. Die tolle User Experience wurde hier durch ein experimentelles Navigationskonzept erzeugt: Als ob man abhebt, scrollt man hier nicht von oben nach unten, sondern von unten nach oben. Bewegt man sich von einem Abschnitte zum anderen durchbricht man animierte Wolkendecken. Flugzeuge zeigen sich dreidimensional im Himmel angeordnet. Navigiert man von einem Flugzeug zum Anderen, fliegt man durch den Raum. Da der Erfindungsreichtum hier groß ist, aber die Orientierungshilfen geringer, hilft man Usern mit einem zusätzlichen Seitenmenü, das sich schon am Einstieg in das Webdesign zeigt. Zusätzlich dient ein mittlerweile recht gängiges Bullet-Menü am rechten Seitenrand als Navigationsleiste. Speziell ist hier aber, dass es Untermenüpunkte hat. Mehr zu diesem Projekt sehen Sie auch hier.

Quelle: Swiss

Quelle: Swiss

Boligreisen.no

Boligreisen ist ein gutes Beispiel das zeigt, dass experimentelle User Experience mit klarer Orientierung vereinbar ist. Hier taucht man ein in die clever und filmartige Welt der Marke. Papierwelten, Kartenhäuser werden erlebbar inszeniert, und man taucht als User regelrecht ein in die Einzelnen Kapitel des Storyboards. Die Navigation ist gut durchdacht, experimentell und sehr erfahrungsreich.

Quelle: boligreisen.no

Quelle: boligreisen.no

Vertical Storytelling Scroll

One-Page Webdesigns Konzepte, Websites, die die Mehrheit aller Inhalte allein auf einer Seite zeigen, sind bereits seit mehreren Jahren sehr weit verbreitet. Hier gibt es bereits unzählige gelungene Beispiele. Sie eignen sich besonders um Geschichten zu erzählen oder um überschaubare Mengen an Inhalten emotional und top präsentiert zu organisieren.

Horizontal und vertical Scroll     

Komplexer wird es bei einer zusätzlichen vertikalen Ebene. Hier gibt man Benutzern die Möglichkeit tiefer in horizontal aufgebaute Inhaltskonzpete einzutauchen. Die Anforderung die Szene überscheubar zu halte wird dadurch größer. Jedoch die Möglichkeit die User Experience spielerischer und tiefer zu gestalten ebenso. Im Folgenden einige Beispiele:

Warschau Rising

Warschau Raising ist ein gelungenes Beispiel an cleverem Informationsaufbau und spannender User Experience. Das Webdesign ist hier so gestaltet, dass man sich als User durch verschiedene chronologisch aufgebaute Kapitel der  Stadtgeschichte des Warschauer Widerstandes bewegen kann. Entscheidet man sich im Vertikalen Menü für eine Zeitspanne, öffnet sich eine zusätzliche horizontale Navigationsebene, die Themen zeigt. Infografiken zeigen animiert die Bevölkerungsdichte der Stadt mit ihren unterschiedlichen Kulturen. Historische Filmszenen zeigen Ausschnitte des flourierenden Stadtlebens. Nimmt man die erhöhte Ladezeit in Kauf, ist Warschau Rising ein klar aufgebautes und verständliches Navigationskonzept, das den Entdeckungsgeist voll anspricht und das Thema audiovisuell optimal illustriert. Diese Website hat nicht von ungefähr beim European Design Award gepunktet. Mehr dazu auch in einem unserer vergangenen Artikeln.

Quelle: warsaw raising

Quelle: warsaw raising

Hellenic Shrimp Farms. Prämiert.

Das Design der Website Hellenic Shrimp Farms ist wie ein klassischer One-Pager aufgebaut. Allerdings kann man in vielen Sektionen tiefer in die Inhalte eintauchen, indem man nach rechts weiterscrollt bzw. sich mobil durch wischen bewegt. Informationen können so verständlich in zusätzlichen Ebenen präsentiert werden.

Quelle: Hellenic Shrimp Farms

Quelle: Hellenic Shrimp Farms

 

Handy und Desktop synchronisiert

Besonders ist die Website der ukrainischen Rockband OE20, wo man per synchronisiertem Mobiltelefon  die Räume einer Website begehen kann. Das Handy wird sozusagen zur Fernbedienung eines Smart Homes. Man kann Licht ein und auschalten, Räume begehen und weitereDigitale Erfahrungen machen, die Spaß machen! Sehr zu empfehlen.

Quelle: OE20

Quelle: OE20

 

Quelle

Page Magazin 8/15 sowie alle zitierten Beispiele