UI - User Interface

Was heißt UI?

Begriff

UI steht als Abkürzung für den englischen Begriff User Interface und kann ins Deutsche als Benutzerschnittstelle übersetzt werden.

Im Webdesign ist damit meist das visuelle Erscheinungsbild einer Website oder einer Online-Anwendung gemeint. Wenn es um UI innerhalb des App-Designs geht, wird damit das Aussehen einer App beschrieben.

Mithilfe des UI kann der Mensch Kontakt mit der Maschine aufnehmen. Ein Beispiel für eine einfache Benutzerschnittstelle stellt der Lichtschalter dar, da er weder zum Menschen noch zur Maschine (Lampe) gehört. Die Benutzerschnittstelle wird auch als Mensch-Maschine-Schnittstelle (Human Machine Interface) bezeichnet.

Die Mensch-Maschine-Kontaktaufnahme visuell ansprechend zu gestalten und benutzerfreundlich zu optimieren, ist die Aufgabe des UI-Designers.

Arten von User Interfaces

Es bestehen verschiedene Arten von User Interfaces. Einen hohen Bekanntheitsgrad hat das GUI. Daneben gibt es zum Beispiel NUI und CUI.

• GUI
  GUI kommt aus dem Englischen und bedeutet „graphical user interface“. Im Deutschen wird von der grafischen Benutzeroberfläche bzw. Benutzerschnittstelle gesprochen. Sie ist für die Bedienbarkeit von Anwendungssoftware auf einem Rechner zuständig. Dafür nutzt GUI beispielsweise grafische Symbole und Steuerelemente (Widgets). Bei Computern fungiert die Maus als Steuergerät. Bei mobilen Endgeräten wie Smartphones oder Tablets findet die Bedienung durch eine Berührung des Sensorbildschirms statt.
• NUI
  Das Natural User Interface, auch das Reality Based User Interface genannt, gibt dem Nutzer die Möglichkeit, direkt mit der Bedienoberfläche zu interagieren. Dies geschieht durch Wischen, Berühren, das Vollführen bestimmter Gesten oder durch Sprache. Ziel ist es, das Berühren und Beeinflussen der virtuellen Objekte an das Berühren und Beeinflussen realer Objekte weitestgehend anzupassen. Der Nutzer kann dadurch alltägliche Handlungen in das digitale System übertragen.
• CUI
  CUI steht für Conversational User Interface und bezeichnet Interaktionen mit einem Gerät, bei denen die natürliche Sprache des Menschen verwendet wird. Beispiele dafür sind „Siri“ von Apple oder „Alexa“ von Amazon. Ebenfalls sind als Beispiel Chatbots zu nennen. Die Nutzer treten mit einem Computer in einen Dialog.

Unterschied zwischen UI und UX

Im Bereich der Webentwicklung findet nicht nur der Begriff User Interface häufig Verwendung, sondern auch die Abkürzung UX. UX ist die Abkürzung für User Experience. Während das UI Design eng mit dem Grafik-Design verknüpft ist und viele Elemente aus diesem Bereich aufweist, ist UX eher auf analytische und technische Methoden ausgerichtet. Mit User Experience wird versucht, ein solides Verständnis über das Nutzerverhalten zu erwerben. In vielen Fällen bedingen sich UX und UI und können daher auch von einem UX/UI-Designer als Tätigkeit ausgeübt werden.

User Interface Visualisierungsmöglichkeiten

Um Benutzerschnittstellen ansprechend zu visualisieren, gibt es verschiedene Möglichkeiten innerhalb der Anwendungs- und Webentwicklung. Zu den gängigen gehören Mockups, Wireframes und Prototypen.

Was ist ein UI Mockup

Auf Deutsch bedeutet das englische Wort Mockup Attrappe und stellt einen digitalen Entwurf einer Webseite oder App dar. Im Webdesign werden Ideen und Konzepte erstellt, die mit Mockups visualisiert und evaluiert werden können. Sie dienen sozusagen als Skizze bzw. Ideensammlung.

Im Gegensatz zu anderen Visualisierungsmöglichkeiten zeichnen sich Mockups dadurch aus, dass mit ihnen detailreiche Arbeiten durchgeführt werden können. Sowohl die Navigationsstruktur der Seite als auch Seiten- und Designelemente können so dargestellt werden, dass Auftraggeber einen guten Eindruck von der finalen Website oder App bekommen.

Wie werden Mockups erstellt? Dies kann durch simple Bildbearbeitungsprogramme oder durch Mockup-Tools erfolgen. Mithilfe von Mockup-Tools gelingt es den UI-Designern, bereits finale Funktionalitäten der Webseite oder App einzubauen. Auftraggeber oder Endanwender können auf diese Weise frühzeitig Funktionen der Anwendung testen und bewerten. Dies ist vor allem für den sogenannten Usability-Test hilfreich. Ein Usability-Test wird durchgeführt, um herauszufinden, wie gebrauchstauglich eine Soft- oder Hardware ist. Der Test gehört zu den Techniken der empirischen Softwareevaluation.

Was ist ein Wireframe?

Ein Wireframe ist auch als Drahtgitter bekannt und ist ebenfalls für die Konzeption von Webseiten einsetzbar. Innerhalb des Wireframings werden die Elemente und Inhalte einer Website konzipiert. Dies geschieht durch technische Hilfsmittel. Bei der Erstellung des schematischen Entwurfs geht es darum, auf vereinfachte Weise festzulegen, welche Elemente an welchen Positionen der Webseite vorkommen und wie die Navigation zwischen den Elementen ausgeführt wird.

Im Gegensatz zu einem Mockup hat ein Wireframe lediglich die Aufgabe, die einzelnen Elemente anzuordnen, ohne dabei eine Aussage über das finale Design zu treffen.

Was ist ein Prototyp?

Ein Prototyp stellt ein Entwurfsmuster (design pattern) oder Versuchsmodell dar. Es ist funktionsfähig, jedoch noch stark vereinfacht. Der Vorgang der Erstellung wird als Prototypentwicklung bzw. im Englischen als Prototyping bezeichnet. Die Basis der Gestaltung von Prototypen können beispielsweise komplexe Mockups sein.

Das Ziel des Prototyping ist, frühes Feedback von den Auftraggebern bzw. Nutzern zu bekommen. Änderungswünsche können auf diese Art frühzeitig erkannt und Probleme behoben werden.

Es gibt verschiedene Arten, um Prototyping durchzuführen. Beispiele dafür sind das explorative, das evolutionäre und das experimentelle Prototyping.

Berufsbild UI Designer

Wie ist es möglich, UI Designer zu werden? Welche Voraussetzungen sind dafür notwendig? Welche Aufgaben hat ein UI Designer?

Voraussetzungen

Um als User Interface Designer tätig zu sein, ist es wichtig, analytische und strategische Planungskompetenzen zu besitzen. Außerdem sollten angehende UI Designer ein technisches Grundverständnis aufbringen, um beispielsweise ergonomisch visuelle Entwicklungen zu verstehen. UI Designer können zudem gut kommunizieren und sind kreativ.

Ausbildung

Eine mögliche Option, um User Interface Designer zu werden, ist ein Studium im Bereich Design. Beispielhafte Studiengänge sind Kommunikationsdesign und Mediadesign. Diese Studiengänge werden in Vollzeit, aber auch als duales Studium in Teilzeit angeboten.

Es ist auch möglich das Studium des Interfacedesigns aufzunehmen. Angeboten wird dieser Studiengang beispielsweise an der Fachhochschule Potsdam in Brandenburg. Dort wird das Konzept anhand der Prinzipien Kreativität, Gestaltungs- und Methodenkompetenz und Eigenverantwortung angeboten.

Eine klassische Ausbildung gibt es für den Beruf UI Designer nicht. Nach einer abgeschlossenen Ausbildung in einem Computer- oder Designberuf (bspw. Grafikdesign) können Weiterbildungen absolviert werden, um einen Quereinstieg in den Beruf des User Interface Gestalters zu beginnen.

Aufgaben

Ein UI Designer befasst sich mit dem Backend und Frontend einer Website oder einer Anwendung. Das Backend ist der Teil des IT-Systems, der für die Datenverarbeitung im Hintergrund verantwortlich ist. Das Frontend bezeichnet all jenes, mit dem der Endanwender eines Programms oder einer Webseite interagiert. Zu den Interaktionen zählen unter anderem die Dateneingabe oder die Benutzung der Schaltflächen.

Ein UI Designer sorgt dafür, dass das Produkt intuitiv von Nutzern auch ohne größeres technisches Verständnis genutzt werden kann und sie mit der Anwendung umgehen können. User Interface Designer gestalten dafür passende Schnittstellen.

Folgende weitere Aufgaben werden häufig von UI Designern übernommen:

• Webseitenoptimierung mithilfe der Meinungen von Interface-Nutzern
• Anwendungsanforderungen-Analyse betreiben
• mit UX Designern zusammenarbeiten
• Steuerelemente wie zum Beispiel Auswahlkästchen oder Icons (Piktogramme, die einen Befehl an die Anwendung darstellen) programmieren

Verdienst UI Designer

Die Höhe des Gehalts variiert und hängt von der Berufserfahrung, der Unternehmensgröße und der Region ab, in der als UI Designer gearbeitet wird. Belastbare Zahlen bieten aktuelle Gehaltsreports, etwa der Bundesagentur für Arbeit oder branchenspezifischer Erhebungen.

User Interfaces bei TenMedia

Die TenMedia GmbH ist eine moderne Digitalagentur aus Berlin. In unserem zentralen Office direkt am Rosa-Luxemburg-Platz mit Blick auf die traditionsträchtige Volksbühne entwickelt unser Team individuelle Softwarelösungen nach Maß. Unsere Kunden sind KMU (kleine und mittelständische Unternehmen), öffentliche Einrichtungen und Institutionen, Selbstständige, Privatpersonen und Start-ups.

Neben der individuellen Softwareentwicklung übernehmen wir ebenfalls die Erstellung von Webseiten und Webanwendungen. Unser Entwicklerteam arbeitet zusammen mit der Grafikabteilung am UI und UX Design und erstellt im Zuge dessen intuitiv bedienbare Benutzerschnittstellen. Außerdem gehört die Erstellung von Mockups oder Prototypen, bspw. in Form von Klickdummys, dazu. Wir stimmen uns dabei eng mit unseren Kunden ab und achten immer auf ihre Bedürfnisse und Änderungswünsche.

Für ein konkretes Projekt, das gemeinsam umgesetzt werden soll, freuen wir uns über einen Anruf oder eine Kontaktaufnahme per E-Mail.