Die Rolle der UX im Webdesign

User Experience Dossier – Teil 1: UI versus UX
Kommentare

Im Webdesign drehte sich lange Zeit alles ausschließlich um die Gestaltung des User Interfaces. Allerdings sorgen neue Entwicklungen in der Web-Branche für frischen Wind. Um beruflich konkurrenzfähig zu bleiben, müssen Webdesigner ihr Skillset auch auf den Bereich der User Experience ausweiten. Die Artikelserie führt Schritt für Schritt in die Materie des User-Experience-Designs ein. Im ersten Teil diskutieren wir den Wandel vom UI- zum UX-Design.

Worin liegt eigentlich der Unterscheid von UI und UX? Wer glaubt, dass es sich bei den Kategorien um konkurrierende Konzepte handelt, irrt. Sie beziehen sich zwar auf Unterschiedliches, gehören aber unzertrennlich zusammen. Im Designprozess müssen die beiden Elemente miteinander vermittelt und aufeinander abgestimmt werden, damit ein Design funktioniert.

  • UI bezieht sich auf das User Interface: Im Grunde sind damit alle visuellen Bausteine gemeint, die von den Usern wahrgenommen werden und mit denen sie interagieren können. Zu denken ist hierbei an Menü-Optionen, Buttons, Texte, Layouts, Navigationen usw.
  • Die UX bezieht sich auf das Verhalten und die Zufriedenheit der Nutzer: Der Terminus User Experience ist ein Sammelbegriff und umfasst alle Erfahrungen, die User mit einem (digitalen) Produkt machen. Wie fällt die Bewertung der Kunden aus, was mögen sie an einem Produkt, können sie ihre Ziele leicht erreichen, gibt es Frustmomente, war der Besuch einer Webseite eine angenehme Erfahrung etc.

Ein gutes Beispiel, um sich den Unterschied zu vergegenwärtigen, ist die Porträtmalerei (Abb. 1). Während die UI gestalterische Aspekte wie die Leinwand, die Auswahl der Farben und die Art der Strichführung umfasst, bezieht sich die UX auf die Gefühle und Emotionen, die das Gemälde beim Betrachter hervorrufen.

Überblick zur Artikelserie: User Experience Dossier

User Experience Dossier – Teil 1: UI versus UX
User Experience Dossier – Teil 2: UX Best Practices
User Experience Dossier – Teil 3: UX Best Practices

Abb.1: Original Oil Painting, © Shutterstock / LanaBrest

Abb.1: Original Oil Painting, © Shutterstock / LanaBrest

Erst durch das Zusammenspiel von UI- und UX-Elementen kann das Portrait seine volle Wirkung entfalten. Ein technisch perfekt umgesetztes Werk, das bei den Menschen keine Gefühlsregungen hervorruft, gilt kaum als Kunst. Die Auswahl der Farbe und die Art der Pinselführung können von der Intention des Künstlers, wie seine Arbeit auf andere wirken soll, nur schwer getrennt werden. Das Gleiche gilt auch im Webdesign: Ein noch so gutes User Interface ist ohne Bezug auf die User Experience nur selten von Erfolg gekrönt.

“UI is the vehicle, but UX should drive.”

Spricht man von User Experience, geht man in der Regel auf intentionale Momente wie Emotionen und Affekte ein. Die UI hingegen beschreibt die Art und Weise, wie im Design mit solchen Merkmalen umgegangen wird.

HTML5 Days

CSS Grid – das neue Layoutmodul im Einsatz

mit Dr. Florence Maurice (maurice-web.de)

Vom UI- zum UX-Design

Besonders im Webdesign kann man versucht sein, sich ausschließlich auf die UI zu konzentrieren – erhalten die Auftraggeber von ihren Kunden in der Regel das meiste Feedback auf die visuelle Gestaltung eines Produkts. Nach wie vor erfolgt die Interaktion mit digitalen Produkten hauptsächlich am Screen und via User Interface.

Aber die Entwicklung schreitet voran. Neue Projekte wie Googles Jacquard oder Soli arbeiten an Bedienoberflächen, die Touchscreens und Displays in Zukunft möglicherweise überflüssig werden lassen. Sollten wir bald per intelligenter Kleidung oder via Handgesten mit unseren mobilen Endgeräten interagieren, geht das insbesondere zu Lasten der UI.

Die neuen Eingabemethoden wirken sich jedoch in erster Linie nicht negativ auf die visuelle Gestaltung aus, sondern schmälern die Bedeutung von UI-Elementen. Büßen Displays ihre Monopolstellung als Bedienoberflächen ein, stellt auch das User Interface nicht länger die einzige Interaktionsmöglichkeit dar.

Aber soweit muss man gar nicht in die Zukunft blicken. Bereits heute haben technische Entwicklungen den Bereich des Webdesigns entscheidend verändert. Das UX-Design gewinnt immer mehr an Bedeutung und ist zu einer ernstzunehmenden Konkurrenz geworden. Zunehmend rücken Fragen einer positiven Nutzererfahrung in den Mittelpunkt, die nicht allein durch die Umgestaltung des Designs beantwortet werden können.

Warum es für Webdesigner nicht länger ratsam ist, sich allein auf die UI zu konzentrieren, können folgende fünf Punkte verdeutlichen.

  1. Günstige und gute Templates: Heute kann jeder seine eigene Homepage in wenigen Stunden erstellen. Möglich machen das fertige Designvorlagen und Frameworks, die von Web-Services wie WordPress kostenlos angeboten werden. Unternehmen müssen für einen visuell ansprechenden Internetauftritt nicht mehr tief in die Tasche greifen und einen teuren UI-Designer anheuern. Um hier konkurrenzfähig zu bleiben, sollten Webdesigner auf die Stärke der User Experience setzen.
  2. Standardisierte UI-Designmuster: In die gleiche Kerbe schlagen standardisierte UI-Muster, die viele Designentscheidungen deutlich vereinfacht haben. Die meisten Webseiten bedienen sich heute der gleichen UI-Bausteine. So ist fast jeder Onlineshop im Netz gleich aufgebaut und hält nahezu identische Interaktionsmöglichkeiten für seine Kunden bereit. Der Grund hierfür ist simpel: Einmal erprobt und etabliert, minimieren geläufige Interaktionsmuster die Einstiegsbarrieren bei den Usern. Webdesigner müssen daher nicht jedes Mal das Rad neu erfinden, wenn sie ein Projekt in Angriff nehmen. Der schwierige Part ihrer Arbeit besteht nun vielmehr darin, die richtigen Muster für die entsprechenden Seiten auszuwählen.
  3. Automatisierte Designs: Einen Schritt weiter treiben die Standardisierung von Designmustern Projekte wie The Grid. Mithilfe von artifizieller Intelligenz werden den Kunden maßgeschneiderte UI-Designs angefertigt. Allerdings kann der Dienst nicht bestimmen, ob die Muster den Ansprüchen der Nutzer und Unternehmen auch vollends genügen. Noch sind Maschinen nicht in der Lage, die Arbeit von UX-Designer zu übernehmen – ein Umstand, den jeder visueller Designer im Hinterkopf behalten sollte.
  4. Social-Media-Webseiten: Auch nicht außer Acht lassen sollte man die Bedeutung von Social-Media-Webseiten. Sie mögen zwar nicht besonders aussagekräftig sein oder die individuelle Note eines Unternehmens originell unterstreichen – sie besitzen aber etwas, was jede junge Firma braucht: Reichweite. Für viele kleine Betriebe ist es ausreichend mit einer Facebook-Seite zu starten. Im Gegensatz dazu können Designer mit UX-Kenntnissen junge Startups davon überzeugen, dass eine Homepage nach wie vor notwendig ist: User machen in verschiedenen sozialen Kanälen unterschiedliche Erfahrungen, von denen die Unternehmen wiederum verschiedenartig profitieren können.
  5. Mobiles Surfen: Mittlerweile entfällt der Großteil der Internetnutzung auf das mobile Surfen per Smartphone oder Tablet. Designer müssen sich mit responsiven und adaptiven Designs auskennen, deren Umsetzung einen Mobile-First-Ansatz voraussetzt. Skalierbare Designs – ausgehend vom kleinsten zum größten Bildschirm – setzen hierbei solide Kenntnisse über grundlegende UX-Prinzipien voraus.

Form folgt Funktion

Blickt man auf die ersten drei Punkte der Liste, fällt auf, dass die visuelle Umsetzung und die Backend-Implementation von Webdesigns immer einfacher werden. Designfragen treten deshalb aber nicht komplett in den Hintergrund. Nach wie vor ist der individuelle Auftritt eines Produkts entscheidend für den Erfolg am Markt.

Was sich allerdings im Zuge des Aufschwungs der UX gewandelt hat, ist das gestalterische Selbstverständnis von UI-Elementen. Das Design einer Homepage steht nicht mehr für sich alleine, sondern muss den Ansprüchen der User genügen. Visuelle Merkmale sind nun an ein konkretes Ziel gebunden: Den Nutzern die bestmögliche Erfahrung in der Interaktion mit einem digitalen Produkt zu liefern.

„Form follows function“ – Louis Sullivan, Architekt

Bereits Ende des 19. Jahrhunderts hat der amerikanische Architekt Louis Sullivan einen Begriff geprägt, der die Entwicklung vom UI- zum UX-Design sehr gut auf den Punkt bringt: Form folgt Funktion.

Abb. 2: The Guaranty Building (New York): Entworfen von Louis Sullivan und Dankmar Adler. © Shutterstock / Atomazul

Abb. 2: The Guaranty Building (New York): Entworfen von Louis Sullivan und Dankmar Adler. © Shutterstock / Atomazul

Sullivan forderte mit seinem Ausspruch weder einen vollständigen Verzicht auf Schmuck und Ornamente noch die Gestaltung rein funktionaler Objekte ganz ohne ästhetische und symbolische Funktion (Abb. 2). Was er im Sinn hatte, war die Ausrichtung gestalterischer Aspekte an ihrer funktionalen Bestimmung – ganz wie heutzutage im Webdesign.

Fazit

Die Entwicklungen im Bereich des Webdesigns machen deutlich, warum die User Experience in Zukunft eine immer wichtigere Rolle spielen wird. Die Standardisierung visueller Elemente und die Minimierung der Einstiegsbarrieren machen es Designern möglich, sich stärker auf die Verbesserung der User Experience zu konzentrieren. Im zweiten Teil befassen wir uns daher mit den unterschiedlichen Methoden und Best Practices im User-Experience-Design.

Überblick zur Artikelserie: User Experience Dossier

User Experience Dossier – Teil 1: UI versus UX
User Experience Dossier – Teil 2: UX Best Practices
User Experience Dossier – Teil 3: UX Best Practices

Aufmacherbild: Tug of war via Shutterstock / Urheberrecht: Andrew Rybalko

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -