Die Entwicklung aktueller User Interfaces ist durch das Spannungsfeld zweier gegenläufiger Trends geprägt: neben einer - sowohl in visueller als auch interaktionaler Hinsicht - deutlichen Realitätsorientierung lässt sich ein weitgehend reduzierter Designansatz ausmachen, der durch die Nutzung weniger visueller Effekte und Farben charakterisiert werden kann.

Die angesprochene Realitätsorientierung von User Interfaces kann visuell beispielhaft an Windows Vista Icons und bezüglich der Interaktion an Multitouchgeräten wie dem iPad oder Microsoft Surface illustriert werden. Mit Vista hielten ausgeprägte Effekte, bunte Farben und fotorealistische Icons Einzug in die Windows-Welt, während Multitouch-Gesten wie Pinch oder Zoom die Interaktion mit Surface bestimmen. Im Kontrast hierzu stehen Designprinzipien wie „Authentically Digital“, die sich durch eine konsequente Reduktion auf wesentliche Attribute auszeichnen. Im Folgenden werden beide Designströmungen näher diskutiert und anhand von Beispielen illustriert

Icons unter Windows Vista führten realistische Lichteffekte und Perspektiven ein [Quelle]

Trend 1: Realismus

Der Trend zu einem zunehmend an fotorealistischen Darstellungen orientierten Gestaltungsentwurf ließ sich zunächst beim Design von Icons beobachten — bei diesen wurde die Realität durch eine entsprechende Perspektive, Schatten, Licht- und Reflexionseffekte in immer aufwändigerer Weise zum Vorbild genommen. Mittlerweile findet diese Strömung auch im Interface Design und dem Interaktionsverhalten von Applikationen ihre Fortsetzung. So werden die einem Interface zugrunde liegenden Analogien — insbesondere bei Consumer Produkten — zunehmend durch realitätsnah visualisierte Metaphern abgebildet. Das iOS Adressbuch, welches einem ledergebundenen analogen Adressbuch nachempfunden wurde, kann hierzu als Beispiel dienen.

Realitätsnahes Adressbuch auf dem iPad und unter OS X Lion [Quelle]

Bei diesem Entwurf wird neben der Einbindung von Licht und Schatten auch auf naturgetreu wirkende Texturen zurückgegriffen, um eine besondere Nähe zu dem realen Objekt herzustellen. Doch aus diesem — oft überpointierten — Realismus resultiert aus Nutzerperspektive nicht selten auch die Gefahr einer ungerechtfertigten Übertragung von Eigenschaften des Originals auf die visualisierte Darstellung. Eine TouchScreen-Tastatur mag zwar realistisch aussehen, wird aber – zumindest noch einige Zeit – in der Haptik einer realen Tastatur nicht gleich kommen können. Durch die sehr realistisch anmutende Visualisierung werden bei Benutzern jedoch schnell auch entsprechende Erwartungen bezüglich Haptik und Interaktion geweckt.

Zu real wirkende Tastatur auf dem iPad?

Ähnlich verhält es sich auch beim Adressbuch von iOS: durch die sehr realitätsnahe Abbildung erwarten Benutzer auch einer der Realität analoge Durchführbarkeit von Interaktionen wie das Umblättern von Seiten, die aber derzeit nicht erfüllt wird.

Die Abbildung einer ursprünglichen Darstellung in einem neuen Artefakt ohne den notwendigerweise gleichen funktionellen Mehrwert wird auch Skeuomorphismus genannt und beispielsweise von Apple für iPad-Applikationen eingefordert: „When virtual objects and actions in an application are metaphors for objects and actions in the real world, users quickly grasp how to use the app.“ [Quelle].

Dies ist nicht generell als Problem zu werten, da die Referenz auf bekannte Konzepte oftmals die Einarbeitung erleichtert. Die Sicherung der Konformität mit Benutzererwartungen stellt jedoch gerade bei einem ausgeprägten Realismus eines User Interface sowohl aus gestalterischer als auch aus technischer Perspektive eine besondere Herausforderung dar (vor allem in Bezug auf User Experiences, die sich über mehrere Gerätearten erstrecken, wie dies beim Adressbuch der Fall ist).

Die Verwendung eines realistischen Designs kann auch zu einer erhöhten Komplexität des User Interface führen, die einer effizienten Interaktion und erhöhten Entdeckbarkeit von Bedienkonzepten entgegen steht. Als Beispiel lässt sich die Nutzung von Drehreglern bei einem User Interface nennen, deren Visualisierung zwar eine Drehbewegung suggeriert, zu deren Bedienung jedoch vertikale Bediengesten notwendig sind.

Visualisierung von Drehreglern auf einem TouchScreen Interface [Quelle]

Auch beim Entwurf von Icons ist Vorsicht geboten: Funktionieren sehr realistische Icons in großen Abmessungen gut, so sollte bei kleinen Abmessungen besser auf entbehrliche Details verzichtet werden. Hier gilt es, eine gute Balance von Wiedererkennbarkeit und Abstraktion zu finden, die auch auf den kleinen Abmessungen funktioniert.

Trend 2: Reduktion

Der zweite Trend ist gegenläufig zum Realismus, reduzierte Effekte und Farbenpaletten stehen hier im Vordergrund. Microsoft zeigt dies bereits beim Windows Phone 7 UI, welches unter dem von Microsoft propagierten Prinzip „Authentically Digital“ durch reduzierte Formen wie Rechtecke, den Verzicht auf Effekte wie Gradienten und Gloss sowie Icons im Piktogrammstil geprägt ist.

Gerade im Web ist diese Spielart des Designs unter dem Credo „Weniger ist mehr“ bereits seit längerem weit verbreitet. Hierbei spielen klare Rasterstrukturen, ein leichtes und vor allem auch effektives Design eine große Rolle — die Nutzung großzügiger Freiflächen lockert das Design meist zusätzlich auf.

Windows Phone 7 UI im Metro Design [Quelle]

Diese im Design umgesetzte Reduktion ist auch bei anderen Applikationen und UIs zu beobachten und zeigt immer öfters auch bei der Gestaltung von Icons in der zurückhaltenden Anwendung von Farben und Effekten.

Firefox Navigationsleiste

Neue reduzierte Google Navigationsleiste [Quelle]

Bei Microsofts Metro Design werden zunehmend auch Farben für textuelle Elemente eingesetzt, um in der reduzierten Visualisierung Akzente zu setzen und die Aufmerksamkeit von Benutzern zu lenken. Dies erfordert jedoch — vor allem bei mobilen, touchfähigen Geräten, die oftmals auch unter freiem Himmel mit direkter Sonneneinstrahlung genutzt werden — hinreichend ausgeprägte Kontraste, damit die Lesbarkeit auch unter schwierigen kontextuellen Bedingungen gewährleistet ist.

Bei Microsofts Metro UI kann der Benutzer zudem eine Primärfarbe einstellen, welche das komplette UI prägt. Großes Manko hierbei ist die fehlende Berücksichtigung von ausreichenden Kontrastverhältnissen, so dass es durch die Benutzerfarbeinstellung zu schlecht lesbaren Fragmenten wie weißer Schrift auf türkisfarbenem Hintergrund oder türkisfarbener Schrift auf weißem Hintergrund kommen kann. Untersucht man die Kontraste solcher Elemente, so wird hier das empfohlene minimale Kontrastverhältnis von 4,5:1 meist nicht erfüllt.

Schlecht Kontrastverhältnisse bei Microsoft’s Metro UI unter Windows Phone 7 [Quelle]

Türkiser Text auf weißem Hintergrund erfüllt nur ein Kontrastverhältnis von 2.3:1 und nicht das empfohlene Kontrastverhältnis von 4.5:1 (AA Rating)

Generell sollte die Verwendung von sehr gesättigten Farben und Hintergründen — insbesondere bei Productivity Tools, mit denen oftmals stundenlang gearbeitet wird — nur mit Vorsicht erfolgen, da starke Farben automatisch den Fokus lenken und der Benutzer daher sehr stark durch das UI vom eigentlichen Inhalt seiner Arbeit abgelenkt wird.

Fazit

Beim Entwurf touchbasierter UIs bietet sich die Nutzung von an der Realität orientierten Konzepten an, da hier nicht alleinig die Visualisierung, sondern — innerhalb der angesprochenen Grenzen — auch das Interaktionsverhalten aufgegriffen werden kann. Unter Beachtung von Nutzererwartungen bei der Umsetzung lassen sich so Interaktionsmöglichkeiten abdecken, die mit Maus und Tastatur kaum realisierbar sind.

Gerade für Consumer-Produkte bietet sich der Einsatz realitätsorientierter Interfaces an: Benutzer erkunden die durch Metaphern nahe gelegten Interaktionsmöglichkeiten, ansprechende Visualisierungen erhöhen hierbei den empfundenen Joy-of-Use bei der Applikationsnutzung — sofern die Interfacekonzepte konsequent und konsistent umgesetzt werden.

Bei Productivity Tools hingegen steht oftmals die Effizienz und Effektivität eines Produktes stärker im Vordergrund. Durch reduziertere UIs und Icons wird hier der Fokus wieder auf das Wesentliche — nämlich das zu bearbeitende Objekt und nicht das Interface, mit dem man es bearbeitet — gelenkt, dabei sollte aber auch auf die großflächige Verwendung sehr gesättigter Farben verzichten werden.

Beide beschriebenen Trends finden also ein Umfeld, in dem sie sich jeweils angemessen einbetten lassen.