• 
• 
• 
• 
• 
• 
• 
• 9

Januar 2010

Von GUI zu NUI

Die nächste Generation des Interfacedesigns

(Link zum Artikel: http://www.createordie.de/cod/artikel/2818)

Schon Tim O'Reilly kündigte in seinem Manifest "What is Web 2.0" an, dass Webseiten "Desktop-alike" werden. Ihr Aussehen und Verhalten gleicht immer stärker jenen von Betriebssystemen, und spätestens seit dem iPhone wandeln sie sich zu direkt und natürlich zu bedienenden Webinterfaces.

Text: Wolfgang Henseler

Der Begriff "Webseite" beschreibt heutzutage eher ein Denken in Metaphern und dient daher nur als mentale Krücke unserer Orientierung im Web, ist eine "Seite" doch dem Navigationsmodell eines Buchs entlehnt. Das ist vergleichbar mit der Entwicklung des Automobils: Die ersten Modelle sahen aus wie Pferdekutschen und erst im Laufe der Zeit entwickelten sie eine eigene Formensprache, die nicht mehr auf der Metapher einer Kutsche ohne Pferde beruht. Gleiches gilt für die meisten der heutigen Webseiten. Auch bei deren Konzeption und Gestaltung wurde noch in "Kutschen" gedacht, weshalb O'Reilly sie auch Version 1.0 nannte. Mit "Web 2.0" zieht aber eine neue Generation an Webseiten herauf, die so genannten Webinterfaces, welche weg von der Seitenmetapher hin zu einem direkten natürlichen Handeln führen, also die Möglichkeiten des Mediums "Internet" besser ausnutzen, als dies Webseiten überhaupt könnten.

Nicht erst seit Apples iPhone und Microsofts Surface bewegen wir uns mitten in einer neuen Ära des Interfacedesigns, im Wandel von grafischen Benutzungsoberflächen (Graphical User Interfaces) zu natürlichen Benutzungsoberflächen (Natural User Interfaces) – von GUI zu NUI. Der Wandel von GUI zu NUI findet dabei in allen Interfacebereichen statt, also bei Webseiten genauso wie bei Betriebssystemen für Desktopcomputer, Applikationen für mobile Endgeräte oder Multitouch-Systemen. Im Kern geht es darum, den Computer durch wesentlich natürlichere Handlungsprinzipien zu bedienen und dadurch dessen Gebrauchstauglichkeit zu erhöhen, also die User Experience und Usability zu verbessern.

Ein Blick zurück: Von Command Line zu GUI

Um die Ausmaße dieses Wandels vollständig zu begreifen, lohnt sich ein kurzer Rückblick: Command-Line-basierte Systeme wie MS-DOS oder Apples ProDOS nutzten textbasierte, kryptische Codes zum Umgang mit dem Computer. Durch den Einzug der Desktopmetapher innerhalb der Betriebssysteme erweiterte sich das Interface um den Bereich der grafischen Gestaltung, dem so genannten Interfacedesign. Der "Look" von Betriebssystemen rückte in den Fokus und steigerte dadurch deren Benutzungsfreundlichkeit und dies wiederum die Verbreitung des Computers in alle Lebensbereiche hinein.

Vom Look zum Feel

Im Laufe der Mensch-Computer-Interface-Entwicklung erkannte man jedoch, dass das Aussehen eine genauso wichtige Rolle wie das Verhalten einer Applikation &ndsh; das Feel – spielt. Daher spricht man bei der Gestaltung von interaktiven Systemen auch immer vom Design des "Look and Feel". Beim Paradigmenwechsel von GUI zu NUI verlagert sich der Gestaltungsschwerpunkt sukzessive vom Look zum Feel. Auf den ersten Blick scheint dieser Wandel weit weniger gravierend als der von Command Line zur grafischen Benutzungsoberfläche, aber es ist vor allem das Verhalten – das Feel – von NUI-Systemen, das sich stark von Systemen mit rein grafischen Benutzungsoberflächen unterscheidet. Das iPhone kommt beispielsweise durch die Nutzung natürlicher Interaktionsprinzipien komplett ohne Handbuch aus, während dieses bei den meisten anderen Smartphones meist dicker als das eigentliche Gerät ist.

Was das für den Designer bedeutet

Welche Auswirkungen hat dieser Paradigmenwechsel auf die Arbeit von Konzeptern, Designern und Developern? Betrachtet man nur die Grafik NUI-basierter Systeme, stellt man fest, dass sich ihr Aussehen häufig nur minimal von rein grafisch basierten Benutzungsoberflächen (GUIs) unterscheidet. Das "gleiche Aussehen" liegt zunächst ähnlich wie beim Auto und der Kutsche daran, dass wir erst einmal verstehen müssen, was denn nun im Speziellen das Wesen des Neuen ausmacht, um es anschließend adäquat zum Ausdruck bringen zu können. Das Wesen natürlicher Interfaces ist ihr Verhalten.

The Difference That Makes the Difference ist the Feel

Gestalter und Entwickler gestalten also immer stärker das Verhalten einer Applikation als nur ihr pures Aussehen. In welcher Art und Weise sich das System im Nutzungskontext verhalten soll oder wie natürliches Nutzer- und Nutzungsverhalten aussieht, stehen dabei im Mittelpunkt der Gestaltung. Klassische Modelle wie Wireframes oder Informationsarchitekturen werden es in Zukunft schwerer haben, zu bestehen. Das Systemverhalten kann nämlich erst durch seine spezifische Ausprägung dargestellt werden, um dann, bis es "rund läuft" sukzessive verfeinert zu werden. Das ist im Vergleich zur Gestaltung von rein grafischen Benutzeroberflächen zeitintensiver, das Ergebnis jedoch spiegelt eine wesentlich verbesserte Usability und distinktive User Experience wider und kann dadurch zum Erfolgsfaktor werden. Die Fokusverlagerung vom Look zum Feel führt dazu, dass die Gestaltung des Immateriellen in den Mittelpunkt der konzeptionellen und gestalterischen Tätigkeit rückt. Als Orientierungshilfe bei der Gestaltung von Verhalten muss die Realität dienen: Virtuelle Dinge verhalten sich wie reale Objekte mit zusätzlichen Möglichkeiten.

Was ist natürlich?

Um zu verstehen, was die Konzeption und das Design von natürlichen Benutzungsoberflächen ausmacht, muss man zunächst verstehen, wann für uns etwas natürlich ist und wann nicht. Dieses sehr stark kulturell und generationsbedingte Phänomen von Natürlichkeit hängt damit zusammen, wie wir uns unsere Umwelt erschließen und das "Erschließungswissen" in Form von mentalen Modellen ablegen. Die wichtigste Facette des natürlichen Handelns bildet die Intuition. Eine Sache intuitiv bedienen oder benutzen zu können bedeutet, seine gelernten Handlungsmuster für etwas einsetzen zu können. Handlungsmuster, basierend auf mentalen Modellen, sind Repräsentanten unseres Wissens.

Intuitiv ist eine Anwendung, wenn sie möglichst deckungsgleich zum mentalen Handlungsmodell des Nutzers ist. Ein gutes Beispiel ist ein Handbuch, das immer dann benötigt wird, wenn das mentale Modell der Nutzer nicht getroffen wurde. Das Handbuch repräsentiert das mentale Modell einer anderen Person, des Programmierers beispielsweise. Der Nutzer muss sich nun das mentale Modell des Programmierers in Form des Handbuchs in mühevoller Kleinarbeit erschließen, um ein Softwareprodukt nutzen zu können. Das entspricht ohne Frage einem wenig intuitiven und arbeitseffizienten Vorgang. Daher ist es für jede nutzerorientierte Gestaltung von elementarer Wichtigkeit zu verstehen, wie Nutzer in einem gewissen Nutzungskontext agieren, um diese Verhaltensschemata später in der Applikation zu implementieren.

Das OSIT-Modell – Orientieren, Selektieren, Informieren und Transagieren

Basis für ein natürliches Handlungsmodell ist das OSIT-Prinzip: Es beschreibt, wie wir uns unabhängig von der kulturellen Herkunft oder dem Alter in der realen und demnach auch in der virtuellen Welt bewegen. Zunächst braucht man Orientierung, wir wollen wissen, wo wir gerade sind. Orientierung bedeutet, einen Überblick über die Dinge zu erlangen; wir heben in der Regel den Kopf oder steigen auf etwas hoch, um uns diesen zu verschaffen. Haben wir unsere Position bestimmt, selektieren wir bestimmte Dinge in unserem näheren Umfeld. Haben wir eine Auswahl getroffen, informieren wir uns im Detail darüber, das heißt wir "zoomen" an etwas heran, indem wir uns einem Objekt nähern oder das Objekt mit den Händen greifen, um es uns näher vor Augen zu führen. Durch die detaillierte Ansicht erfahren wir mehr über das Objekt und steigern so unser Wissen. Haben wir uns im Detail über das Objekt informiert, nutzen wir es oder führen es einem anderen Zustand zu. Es findet eine Transaktion statt.

Das Interessante an solchen Handlungsmodellen wie OSIT ist, dass wir in der Lage sind, diese von einem Medium in ein anderes zu übertragen. Wir nutzen es, gleichgültig, ob wir uns in einem realen Raum, wie zum Beispiel einem Supermarkt, oder einem virtuellen Online-Shop befinden. Weiß der Designer, wie wir handeln, so kann er eine handlungsorientierte Website gestalten, die unserem natürlichen Verhalten entspricht.

Übertragung des OSIT-Models aus Websites: dynamisch & adaptiv

Überträgt man das OSIT-Modell auf die Prinzipien des Website-Designs, bedeutet das, dass die Orientierung an erster Stelle stehen muss. Anstatt durch hierarchisch organisierte Webseiten zu navigieren, kommen die gewünschten Inhalte auf den Nutzer zu. Bildschirmobjekte vergrößern oder verkleinern, je nach Gewichtung und Relevanz. Sie zentrieren sich auf dem Bildschirm und richten sich zum Nutzer hin aus. Die Bewegungen helfen bei der Orientierung, da sich das Verhalten in der Regel dort ausdrückt. Bewegung ist für NUIs von essenzieller Bedeutung, weil durch den Kontext die Seite wesentlich leichter erschließbar wird. Ein fehlender Zoom-Effekt würde den Verlust des Kontexts bewirken. Das wäre vergleichbar mit einem Restart der Orientierung. Springt der Nutzer von einer Webseite auf eine andere, ist die Orientierungsphase wesentlich länger als bei einem Webinterface, bei dem die Inhalte auf einen Nutzer zuzoomen.

Grundsätzlich geht es bei der Gestaltung von NUI-Interfaces darum, analog der Gestaltung neuer Betriebssysteme zu denken, also in einer Benutzungsoberfläche, auf der Inhalte immer dann dynamisch adaptiv auftauchen, wenn sie relevant werden. Man gestaltet für ein Interface, auf dem Dinge erscheinen, Slider einfahren oder sich Objekte zurückziehen. Das entspricht einem Webinterface, also einer einzigen Seite, auf der sich der Nutzer durch Suchen, Sortieren, Filtern oder Zoomen alle Inhalte dynamisch zusammenstellen oder die Inhalte vor seinem Auge seinen Bedürfnissen entsprechend umgruppieren und anpassen kann. Natural User Interfaces nutzen daher häufig eine sehr flächige, fast schon zweidimensionale Gestaltungssprache als Basis, die sich gegenüber einer opulent gestalteten Grafikoberfläche deutlich abhebt.

Möchte man beispielsweise Hintergrundinformationen von einem Medienelement, z.B. ein Bild oder Video, dreht man es, um mehr zu erfahren, um 180 Grad. Dieses als "Flip" bezeichnete Gestaltungsmerkmal ist typisch für NUI-Systeme, wenn es darum geht, Hintergrundwissen zu liefern oder Einstellungen vorzunehmen. Durch die dargestellte Drehbewegung weiß der Nutzer unmittelbar, was passiert ist und wie er zur der "Vorderansicht" zurück gelangen kann. Auch das unmittelbare Anzeigen von ersten Suchergebnissen bei der Sucheingabe oder die Anpassung von Inhalten basierend auf ersten Nutzerangaben, z.B. beim Filtern, sind typische Indikatoren für NUI-Systeme. Statische Fenster werden durch dynamische Flächen ersetzt. Von dem Gestalter erwartet man, dass er in Handlungen und Verhalten denkt, in Bewegung, Veränderung oder dynamischen Zuständen. Die Formensprache von natürlichen Interaktionssystemen orientiert sich an dem Verhalten von Menschen und Dingen. Konzepter, Designer und Entwickler tun also gut daran, die Natur und Menschen bei deren Verhalten in Zukunft stärker zu beobachten, um zu erkennen, welches natürliche, gelernte oder spezielle Verhaltensschemata oder Gesten sind. Dieses Wissen bildet die Basis zur Gestaltung natürlicher Interfaces.

• 1
• 2

 

• Gute Kommentare werden belohnt.
•   (optional)
•   (Kommentar abonnieren/Gravatar - wird nicht veröffentlicht)
•    Benachrichtige mich bei nachfolgenden Kommentaren per E-Mail
• Dein Kommentar (HTML- und sonstige Codeelemente werden nicht angezeigt)
• -+
•