Cogneus®_stern5

Was ist User Interface Design? Cogneus auf dem Webmontag Gießen.

Was ist User Interface Design? Auch bekannt als UI oder UX zieren diese Begriffe viele Anbieter rund um App-, Web- oder Software-Entwicklung. Kein Designer, der modern und zeitgemäß erscheinen will, kommt an diesen vier Buchstaben vorbei. Cogneus Design erklärt auf dem Webmontag in Gießen, was der Unterschied ist und wo die Ursprünge des Interface Designs liegen.

Die mechanische Ente, 1738

Die mechanische Ente, 1738

Die Gestaltung der Nutzerschnittstelle zwischen Mensch und Maschine stammt aus dem Industrial Design. Maschinen verrichten auf Anweisung des Menschen komplexe Aufgaben. Diese Aufgaben werden aber nicht durch je einen Knopf oder Hebel dargestellt. Eine Benutzer-Schnittstelle bietet also eine Vielzahl an Aufgaben an, die mit einer Maschine verrichtet werden können, und das auf minimalem Raum mit minimaler Anzahl von Bedienelementen. Soweit die Theorie.

In der Realität interagieren wir heute mit einer Vielzahl von Maschinen – angefangen beim Smartphone, über das Tablet bis zum PC. Doch auch eine Kaffeemaschine, ein SmartTV oder Amazon Echo sind moderne Beispiele dafür, wie unser Alltag mit Mensch-Maschine-Schnittstellen bewältigt werden kann. Jedes Interface bietet hierbei andere Elemente: Tastatur, Maus, Trackpad, Touchpad, Gestiken oder sogar unsere Stimme.

User Interface Design bedeutet universale Gestaltung

Also steigt die Anzahl von digitalen Schnittstellen und fordert die Gestaltung heraus. User Interface Design ist der Oberbegriff für die Gestaltung dieser Schnittstellen. Dabei beschränkt sich das Design nicht allein auf grafische Aspekte, sondern greift tief in die Informationsarchitektur, die Strukturierung von Arbeitsschritten bin hin zur Dialoggestaltung ein.

Heute wird in zwei Bereiche unterteilt: UI steht für User Interface – also die Gestaltung der Benutzerschnittstelle. UX hingegen betrachtet die User Experience, also die positive Nutzererfahrung. Während das UI also die Erscheinung eines Interfaces beleuchtet, wird in der UX das Verhalten des Nutzers analysiert. UI wird auch in einzelnen Industriezweigen als HMI oder MMI beschrieben. Also als Human-Maschine-Interface oder als Man-Maschine-Interface. Andere Begriffe für UX sind: Ergonomie, Usability oder Usability Engineering.

Teilbereiche des User Interface Design

Das User Interface Design gliedert sich in die folgenden Teilaufgaben des Designs einer Schnittstelle:

  • Konzeptdesign findet über Wireframes, Flowcharts und Prototypen statt
  • Screendesign ist die grafischer Umsetzung gesamter oder einzelner Darstellungen
  • Graphical User Interface (GUI) stellt abschließend die Bereitstellung aller Bedienelemente in allen Zuständen dar
  • Vocal User Interface (VUI) beschreibt die Dialoggestaltung mittels Sprachbefehlen und -ausgabe

Workflow im User Interface Design

Soll ein Interface neu gestaltet werden, so ist es häufig ein Team, was ein User Interface Design neu entwirft. Dabei bildet sich das Team aus unterschiedlichen Bereichen wie Design, Entwicklung und Psychologie. Dieses Team geht in der Regel nach diesen Schritten vor:

  1. Alle Aufgaben werden analysiert und strukturiert
  2. Aufgabenbereiche werden in Arbeitssequenzen zerlegt, also in Teilschritten mit klarer Abfolge
  3. Diese Abfolgen werden grafisch darstellt, die Darstellungsform ist i.d.R. ein Flowchart
  4. Mittels CardSorting u.a. werden Aufgabengruppen gewichtet
  5. Aus den Abfolgen, Informationen und Bedienelementen werden Wireframes skizziert
  6. Wireframes („Drahtgittermodelle“) lassen sich auch in Papier-Prototypen umsetzen
  7. Einzelne Teilschritte werden exemplarisch gestaltet als rein grafisches Screendesign
  8. Interaktionen lassen sich mittels Prototyping und interaktiven UI-Elementen testen
  9. Abschließend werden alle grafischen Elemente mit allen Zuständen als GUI-Bibliothek zusammengestellt
Workflow User Interface Design

Workflow User Interface Design

Nicht alle Schritte sind in jedem Projekt nötig oder relevant. Weitere Schritte wie Nutzerbefragungen oder Kliniken können integriert werden. Unter einer Klinik versteht man den Test eines Prototypen innerhalb einer ausgewählten Nutzergruppe, um entweder die Ästhetik abzufragen oder konkrete Aufgaben von Testpersonen unter Beobachtung durchführen zu lassen. Diese Erkenntnisse fließen dann in die Gestaltung ein.

Und wo bleibt die User Experience?

Die sogenannte User Experience oder UX betrachtet die Seite des Anwenders, genauer gesagt: sein Nutzerverhalten und den daraus schließenden Erfolg oder Misserfolg. Um ein Produkt wie eine Website oder eine App möglichst zum gewünschten Nutzererlebnis zu verhelfen, werden Testgruppen vor der Designphase (s.o.) befragt, Marktanalysen getätigt oder Recherchen zu verwandten Bereichen durchgeführt. Somit ist sichergestellt, dass die Ausgangslage für das Design geschaffen wurde.

In weiteren Schritten helfen Usability-Tests herauszufinden, ob Testpersonen auch tatsächlich Aufgaben so bewältigen können, wie sich das Designteam das gedacht hat. Unter erschwerten Bedingungen hingegen werden auch Beeinträchtigungen des Nutzers simuliert, wie z.B. Motorik, Haptik oder Wahrnehmungseinschränkungen, um keine Nutzer vom Erfolg in der Bedienung auszuschließen. Barrierefreiheit ist hier schon seit langer Zeit ein fester Bestandteil in der Gestaltung von User Interfaces!

Moderne Ansätze sehen die UX vor dem UI. Das ganzheitliche Nutzererlebnis steht dabei über der einzelnen Anwendung. Hierbei spielt auch die Marken-Wahrnehmung eine große Rolle. So wird ein Automobilhersteller heute nicht nur über die Fahreigenschaften wiedererkannt, sondern auch über Apps, Spiele oder Messeauftritte. Diese Sichtweise ist sehr nachhaltig und langfristig ausgelegt.

Christoph Luchs

Christoph Luchs

Christoph Luchs ist Inhaber von Cogneus Design und Videotrainer. Eines seiner Videos dreht sich um die Grundlagen des Interface Designs, erschienen bei video2brain und ist verfügbar auf der Plattform LinkedIn-Learning. Als Lehrbeauftragter der Hochschule für Bildende Künste in Braunschweig (HBK) unterrichtete er von 2008 bis 2012 Studierende des Studiengangs Kommunikationsdesign und Industrial Design. Dabei entwickelte er eine neuartige Workshop-Form, die man heute als „Agiles Prototyping“ bezeichnen würde. Dabei entwickelten Studentengruppen innerhalb kürzester Zeit neuartige Produkte und deren Bedienung.

Share