Web basierte Anwendungen gestalten, vom Wireframe zum Look.

Basierend auf: Branded Interactions von Marco Spies & Katja Wenger

 

Creating an Interface is much like building a house: If you don‘t get the foundations right, no amount of decorating can fix the resulting structure.

-Jef Raskin: The Human interface.

 

Das Nutzererlebnis gestalten

Es gibt eine Fülle an Berufsbezeichnungen die im Kern alle dasselbe wollen, dasNutzererlebnis gestalten. Interaktionsdesigner, Service Designer, UX Designer, oder wie es in den frühen Jahren dieser Disziplin hieß: Informationarchitekten.

Als übergeordneter Begriff hat sich aber in den letzten Jahren »User-Experience-Design« herausgebildet. Aber eines ist gleich geblieben, die Zielsetzung: Alles was wir tun, sollte entweder in der Marke, im Geschäftsmodell oder im Nutzer verankert sein.

 

Informationsarchitektur

Websites werden meist in Form von »Screens«, also statischen Bildschirm-Zuständen gestaltet. 

Dabei werden konkrete Ansichten zu einem Template zusammengefasst.

Jedes Template beinhaltet Container mit einer definierten Anzahl von Modulen und Elementen, die in einem Raster angeordnet werden. Ein Modul wiederum besteht aus einzelnen Elementen, wie Bild, Text, Überschrift, Link usw. Templates, Module und Elemente werden vom Designer mithilfe von Wireframes beschrieben und grafisch umgesetzt.

 

Wireframe

Wireframes sind schematische Skizzen für Bildschirm-basierte Anwendungen. Sie zeigen Aufbau, Inhalt und Funktion einer Seite oder eines Templates sowie die hierarchische Anordnung der Module und Elemente untereinander. Wireframes können unterschiedlich komplex sein, sie können gescribbelt werden oder man erstellt sie mit einer entsprechenden Software. Wireframes werden vom User Experience Designer erstellt und richten sich an unterschiedliche Zielgruppen: 

 

KUNDE - In der Kommunikation mit dem Kunden können Wireframes helfen, inhaltliche und funktionale Fragen frühzeitig zu klären. 

DESIGNER  - Wireframes dienen ihm als Gerüst für das Layout der Seiten. 

TECHNIK TEAM - Dem Technik-Team liefern Wireframes genaue Funktionsbeschreibungen für die Programmierung. 

 

Die Oberfläche gestalten

Hässlichkeit verkauft sich schlecht, sagte Raymond Loewy in den 1950er Jahren. Was logisch klingt ist auch wissenschaftlich belegt und gilt genauso für digitale Produkte. Nicht ganz so offensichtlich ist der Einfluss der Ästhetik einer digitalen Anwendung auf die Usability. Man spricht vom »Aesthetic Usability Effect«: 

Experimente zeigten, dass ästhetisch gestaltete Produkte als bedienungsfreundlicher wahrgenommen werden, unabhängig davon ob sie es wirklich sind. Das Ganze gilt übrigens umso mehr, je größer die Stresssituation des jeweiligen Users ist. In entspannten Situationen sind die Menschen fehlertoleranter. Ein schönes Design kann somit kritische Nutzungssituationen entschärfen.

 

Der erste Entwurf

Nun geht es um die ästhetische Gestaltung der (Nutzer-) Oberfläche. 

Vor dem ersten visuellen Entwurf sollten ein Moodboard, eine Leitidee und Wireframes vorliegen. 

 

Außerdem sollte man bereitgestelltes Bildmaterial sichten. Wenn das vorliegende Material nicht zur Markenpositionierung passt, ist es wichtig neue Vorschläge zu machen, Stockfotos zu suchen oder selbst ein Shooting zu organisieren. 

 

Wenn die Strategie vorliegt, ist die visuelle Gestaltung das Übersetzen dieses Inputs in einen ersten Entwurf. Mit den ausgewählten Seiten und Templates sollten etwa 70 % des visuellen Vokabulars abgedeckt sein. Danach kann man die Dramaturgie der Seite überprüfen, Elemente und Module angleichen und auf ihre Konsistenz im Sinne der Marke prüfen. 

 

Look und Feel

Grundsätzliche Überlegungen zum Look & Feel sind: Gibt es eine übergeordnete Idee, die als zentrales Element eingesetzt werden sollte? Wie viel Weißraum braucht die Marke? Wie bunt werden die Corporate Farben eingesetzt? Gibt es Bildmaterial oder Texturen? 

Dabei darf man das bestehende Corporate Design nicht verletzen. Es geht darum eine visuelle Eigenständigkeit zu erreichen und sich gegenüber der Konkurrenz abzugrenzen.

 

Form follows Function

Wenn die grundsätzliche Struktur einer Seite definiert ist, kommt es darauf an, die inhaltlichen und funktionalen Module einheitlich zu gestalten. Dabei spielt die Zielgruppe eine wichtige Rolle: 

 

Senioren, Kinder und ungeübte Nutzer haben individuelle Anforderungen, die berücksichtigt werden müssen. Auch das Medium spielt eine Rolle: Menüelemente auf Mobilgeräten benötigen größere Schaltflächen als eine Website, die mit der Maus bedient wird.

 

Der Nutzungskontext ist ebenso relevant: Interfaces die unterwegs oder in stressigen Situationen genutzt werden, müssen einfacher und fehlertoleranter sein, als Interfaces die am festen Arbeitsplatz bedient werden.

 

“Man ist so wie man sich zeigt, und wie man sich zeigt, so ist man. Das Erscheinungsbild ist nicht nur das »Äußere«. Es ist das eigentliche.”

 OTL AICHER: Die Welt als Entwurf

 

Mit dieser Leitlinie entstehen eigenständige Web Anwendungen, die sich einerseits selbst treu sind und andererseits das Arbeiten strukturieren, um mögliche Fehlerquellen im Vorhinein zu vermeiden.

Für eine genaueren Einblick in diese Thematik empfehlen wir das Standardwerk: Branded Interactions von Marco Spies & Katja Wenger, 2018.

 

 

ourEPICblog