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, dem Vollführen bestimmten Gesten oder der 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, Conversional User Interface, ist der Vorgang, bei dem die Interaktionen mit einem Gerät stattfindet und dabei die 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/UIDesigner 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. 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 Aufgaben, 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.

Prototyp-Art Beschreibung Explorativ Das explorative Prototyping versucht nachzuweisen, ob eine Idee belastbar ist. Auf diesem Weg werden Anforderungen ermittelt, die festgehalten werden können. Evolutionär Hier werden fehlende Funktionen durch die Einbeziehung de Anwender und deren Akzeptanz identifiziert. Ein Beispiel für einen evolutionären Prototyp ist ein sogenannter Klickdummy. Klickdummys sind klickbare Prototypen, die das Klicken von beispielsweise Buttons oder Links realisieren. Experimentell Durch das experimentelle Prototyping sollen Erfahrungen für Forschungszwecke gesammelt werden. Es findet eine umfangreiche Problemanalyse statt, deren Ergebnisse in die Produktproduktion einfließen. Der experimentelle Prototyp selbst wird danach häufig verworfen. ## Berufsbild UI Designer

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

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 Designer umgesetzt:

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

Verdienst UI Designer

Im Durchschnitt verdienen UI Designer deutschlandweit ca. 3.370 € im Monat. Das Einstiegsgehalt liegt durchschnittlich bei 43.000 € im Jahr. Die Höhe des Gehalts variiert und ist abhängig von der Berufserfahrung, der Unternehmensgröße und der Region, in der als UI Designer gearbeitet wird.

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 inuitiv 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.

Wenn Sie neugierig geworden sind und ein spannendes Projekt haben, was Sie mit uns umsetzen möchten, freuen wir uns über ihren Anruf oder die Kontaktaufnahme per E-Mail.