UX Development & UI Design

Home » UX Development & UI Design

UX Development & UI Design


Was ist „User-Experience“ und was ist „User-Experience-Development“?

Der Begriff „User-Experience“ (dt. Nutzererlebnis) ist seit geraumer Zeit ein wesentliches Thema unter Webdesignern. An einer griffigen Definition mangelt es aber oft. Doch um Ihren Nutzern ein perfektes Erlebnis mit einer Software oder auf Ihrer Websites zu ermöglichen, sollten Sie zunächst wissen, was gutes User-Experience-Design ist, was eine User-Experience (UX) ist und was diese ausmacht:

UX beschreibt den gesamten Komplex der emotionalen Erfahrung eines Anwenders im Umgang mit einer Website, App oder mit einem anderen beliebigen Produkt. UX-Design zeichnet sich grundsätzlich durch die Kenntnis der Zielgruppe einer Website/App bzw. eines Produktes und deren Anforderungen aus und bezeichnet die Kombination aus einer attraktiven Benutzeroberfläche und einer zielgruppengerechten und überzeugenden Funktionalität der App oder Website.

Über welche Bestandteile ein Produkt verfügen muss, um eine gute User-Experience zu gewährleisten, wusste schon der römische Architekt Vitruv (Marcus Vitruvius Pollio) im ersten vorchristlichen Jahrhundert: Damals beschrieb er für Gebäude die drei Begriffe „Firmitas“ (Festigkeit oder Standhaftigkeit), „Utilitas“ (Nützlichkeit) und „Venustas“ (Schönheit) als grundlegende Eigenschaften eines guten User-Experience-Designs – natürlich, ohne damals diesen Begriff selbst zu nutzen. Das von ihm entwickelte Prinzip gilt aber auch mehr als 2000 Jahre später – ganz gleich ob Sie eine Website launchen, eine App basteln oder ein Videospiel programmieren wollen.

Drei Faktoren für eine gute User-Experience

  1. An erster Stelle steht die „Festigkeit“ bzw. „Standhaftigkeit“ – moderner ausgedrückt: die Funktionalität. Was schlichtweg bedeutet, dass Ihr Produkt funktionieren muss. Abstürze, Downtimes und lange Ladezeiten sind ein No-Go für eine gute User-Experience! Der Nutzer muss sich auf Ihr Produkt verlassen können. Wenn Sie das nicht gewährleisten, wird er sich nach Alternativen umsehen. Besonders im Webzeitalter sind diese dank Suchmaschinen binnen Sekunden auch gefunden. Für nahezu jede App, jeden ihrer Einsatzzwecke und jede Website gibt es zig Alternativen. Funktioniert Ihr Produkt nicht oder zumindest nicht so, wie es sich die Zielgruppe wünscht, werden sie keine Empfehlungen oder Likes im App-Store bekommen und Ihre Website wird nicht geteilt oder verlinkt.
     
  2. An nächster Stelle steht die Nützlichkeit: Ihre Website oder Ihre App muss dem Nutzer relevanten Mehrwert bieten. Das können etwa in einem Onlineshop die Produkte sein, die er oder sie unbedingt haben möchte. Auf anderen Websites sind gute Inhalte – ob informativ oder unterhaltend – gefragt. Hierbei gelten die generellen Regeln für guten Content. Wie Sie diesen optimieren können, verraten wir Ihnen in diesem Beitrag. Darüber hinaus ist hiermit auch die leichte Anwendung gemeint: Die Menüführung muss intuitiv und logisch sein. Sie muss eingängig und zugleich leicht einzuprägen sein. Der Funktionsumfang muss den Anforderungen der Zielgruppe entsprechen, aktuell sein und im Idealfall vom User an seine Nutzungsgewohnheiten anpassbar sein.
    Zwei einfache Beispiele: Bei einem Grafikprogramm sollte die Funktion für das Zurechtschneiden eines Bildes gut schnell im Hauptmenü erreichbar sein und einen Button und einen Shortcut dafür anbieten, ansonsten ist es für die Zielgruppe unbrauchbar. Auch bei einem Schreibprogramm sollten die Buttons für Fettung, Unterstreichungen oder Kursivierung auf den ersten Blick gefunden werden, sin diese in irgendwelchen Untermenüs versteckt bietet es keine gute User-Experience.
     
  3. Nicht zu vernachlässigen für eine gute User-Experience ist auch die Schönheit, also die Ästhetik Ihres Angebots: Was diesen Bereich betrifft, ist die Liste an potenziellen Fallstricken am längsten. Denn ästhetische Maßstäbe können je nach Kulturkreis, Szene oder Zielgruppe sehr unterschiedlich ausfallen. Uneinheitlichkeit oder Überfrachtung schrecken ebenso ab wie ein Design, das an der Zielgruppe vorbeischießt. Daher muss die Gestaltung nicht nur funktional, sondern auch zielgruppenrelevant sein.

UX vs. UI: Was ist der Unterschied?

Gelegentlich wird User-Experience (UX) mit User-Interface (UI) verwechselt. Auch wenn beide Begriffe eng verwandt sind, bestehen signifikante Unterschiede, die man auf eine simple Faustregel herunterbrechen kann:

Während die User-Experience all das umfasst, was Nutzer empfinden, beinhaltet der Begriff User-Interface all das, was die Nutzer (vor allem visuell) wahrnehmen. Dieser Begriff umfasst die Oberfläche, auf der Nutzer agieren bzw. auf der ein Austausch zwischen Mensch und Maschine stattfindet.

User-Interface (UI) ist der technischere, UX hingegen der strategischere Begriff. Das User-Experience-Design ist das Resultat eines guten User-Interfaces, umfasst aber darüber hinaus auch Bereiche wie die Informationsarchitektur, Usability oder rein ästhetische Gesichtspunkte. Damit ist die User-Experience ein übergeordneter Begriff – User-Interface hingegen eine Teildisziplin.  

 

UI Design

Das User Interface ist die Schnittstelle, die den Nutzer mit der Anwendung verknüpft. Einfach ausgedrückt, das UI ist bei mobilen Geräten das, was auf dem Touchscreen erscheint. Die Oberfläche der App muss so gestaltet werden, dass der User gern mit der Anwendung interagiert. Deshalb spielt das UI für das UX eine so große Rolle. Das UI ist mit der grafischen Ausgestaltung der App (Text-Design, Content Dartsellung, Farben und Bedienelemente usw) eng verbunden.

Ziel der Gestaltung des Interfaces ist es, eine Darstellung zu erschaffen, die durch ihr Aussehe und ihre Funktionalität höchste Anziehungskraft auf den User ausübt.

Designer, die sich mit dem UI auseinandersetzen, brauchen vor allem eine gute Portion Kreativität und Einfühlungsvermögen. Sie sind dafür verantwortlich, dass die einzelnen Teile einer Mobile App zusammenpassen und stimmig auf den Nutzer wirken. Die App soll gut aussehen aber auch perfekt bedienbar sein. Da die App auch auf Smartphones und manchmal sogar auf Wearables laufen soll, sind vor allem die Gegebenheiten der Endgeräte zu beachten. Auch die klassischen Elemente wie Farben und Schriftarten spielen bei der Bedienbarkeit eine herausragende Rolle.

Der Designer muss es schaffen, technische Lösungen zu finden, die bestmöglich zu den Bedürfnissen der User passen. Die Werkzeuge sind oft Skizzen und Mockups. Doch bei allen Designinnovation sollte die Anwendbarkeit immer im Blick bleiben!

Kontaktieren Sie uns jetzt!

Wie gehe ich vor?

Skizzen, Storyboards & mehr

Skizzen sind außerdem ein guter Startpunkt für die Team-Arbeit, denn mit Stift und Papier bewaffnet (oder alternativ mit Marker und Whiteboard) lassen sich gut gemeinsame Lösungen erarbeiten. Im Vergleich zur Skizze sind Wireframes der erste schematische Designentwurf des Frontends. Der nächste Schritt zur finalen Darstellung ist das Mockup. Aus dem Modellbau bekannt als Attrappe ähnelt es dem finalen UI visuell, weist allerdings nur Teilfunktionalität auf. In der Regel versteht man unter Click-Dummys eine programmierte, teilfunktionale Demonstration der Anwendung.

Design und Kollaboration

Kollaborationen sind in der heutigen Zeit aktueller denn je. Design-Ideen, Konzepte für die Navigationsstruktur oder Interaktionen lassen sich schon sehr früh im Entwicklungsprozess visualisieren und durch potentielle Nutzer oder Usability Experten testen und korrigieren. Am Ende steht die Frage: „Was ist, wenn wir digitale Produkte erschaffen, die nicht nur von einem User, sondern von 2 oder gar mehreren kollaborativ erlebt und beeinflusst werden können?
Wir sprechen also nicht nur nicht darüber, wie man zusammenarbeitet um ein Produkt zu erschaffen, sondern darüber, wie man Produkte erschafft, die eine kollaborative Nutzung implizieren.

Usability-Test

Ein Nutzertest ist die wohl effektivste Methode um Usability-Probleme und Verbesserungspotentiale einer Anwendung aufzuspüren. Usability-Tests führen wir grundsätzlich mit realen Nutzern der jeweiligen Zielgruppe durch. Dabei beobachten wir das tatsächliche Verhalten eines Nutzers bei der Interaktion mit einem Produkt oder einer Anwendung und können auf diese Weise alle wichtigen Usability-Schwachstellen aufdecken und Optimierungsvorschläge entwickeln