UX versus UI – Warum UI/UX wichtig für eine App ist

Home - Blog - UX versus UI – Warum UI/UX wichtig für eine App ist
UX vs. UI
  • Verfasst von Hubert Weid
  • Datum: 07 Jun 2019

UI Design

UI, die Kurzform von User Interface dient als Kommunikation für die Mensch-Maschine-Technologie. Sie unterstützt Menschen in alltäglichen und beruflichen Situationen. Somit ist das User Interface die Benutzerschnittstelle bzw. die Benutzeroberfläche, die den Kontakt eines Menschen mit der digitalen Welt ermöglicht. Dabei unterscheiden sie sich in den verschiedensten Interface-Variationen, darunter Touch-Technologien, Gesten, Websites, App-GUIs und Digital Publishing für Tablets. Benutzeroberflächen der Interfaces müssen daher so gestaltet sein, dass die NutzerInnen sie verstehen und gern damit arbeiten. Die einfache Bedienung ist demnach sehr wichtig für ein Interfacedesign, folglich wird es auch Screen Design genannt. Es soll Spaß machen und muss zudem effizient und ästhetisch ansprechend sein. Damit ein Produkt erfolgreich ist, müssen Funktionalität und Design des Produktes mit den Fähigkeiten, Erwartungen und Bedürfnissen der Nutzer übereinstimmen und gegebenenfalls angepasst werden.

UX Design

Wie können missverständliche Dinge in einer App durch App UI / UX Design minimiert oder gar verhindert werden?

Die Benutzerfreundlichkeit und die Bedürfnisse jeden Nutzers werden immer weiter durch Erfahrung optimiert, verändert und angepasst. Diese Weiterentwicklung ist beim User Interface und bei dem User Experience wieder zu finden. Fehler und jegliche Art von Missverständnissen können durch die Erfahrung der bereits gemachen Nutzerbedürfnisse reguliert werden.

Das User Experience Design, umgangssprachlich auch unter dem Synonym UX-Design bekannt, umfasst das gesamte Nutzererlebnis und die Nutzungserfahrung bei einer Interaktion mit einem Produkt oder einer Anwendung. Gutes Design und die Funktionalität der Anwendung soll begeistern und den Kunden langfristig binden. Denn das Design der Anwendung prägt den täglichen Mensch-Maschine-Kontakt und ist ein Zusammenspiel aus Design, Strategie, Webentwicklung und Usability. Kurzum UX ist die Nutzererfahrung von der Funktionalität bis hin zur Attraktivität.

Die User Experience besteht aus einzelnen Ebenen, die aufeinander aufbauen, sich gegenseitig beeinflussen und prägen. Um das Nutzererleben der AnwenderInnen ganzheitlich zu befriedigen, benötigt es drei Eigenschaften, die miteinander und aufeinander wirken und sich gegenseitig beeinflussen. Diese drei Elemente sind die Accessibility, die Utility und der Joy of Use. Je mehr Rahmenbedingungen gegeben sind, desto stärker wird ein optimales Erlebnis erzielt.

Zusammenfassung

Die Kernessenz aus der UI und dem UX ist die Verbesserung der User Experience – diese garantiert den Erfolg einer App, sofern die jeweilige Anwendung einfach und intuitiv zu bedienen ist und das User Interface technisch leicht bedienbar ist.

Apps, die die AnwenderInnen effektiv und effizient nutzen können, stellen diese zufrieden. Sie nutzen eine App aus einem bestimmten Bedürfnis heraus und setzen die Benutzerfreundlichkeit voraus, um ihre persönlichen Ziele mit der App zu verfolgen. Sie haben dabei die Intention, eine App ohne Beeinträchtigungen nutzen zu können und ihre bestimmten Ziele zu erreichen. Die Usability orientiert sich somit an den Bedürfnissen der NutzerInnen, bezogen auf Design und Funktion.

  • Verfasst von Hubert Weid
  • Datum: 13 Feb 2019

UI / UX DESIGN

Auf der Basis des Konzepts erstellen wir ein zielgruppenspezifisches UI / UX – Design für Ihre attraktive und intuitiv bedienbare App oder Website. Von den ersten Scribbles bis hin zum fertigen Design – alles aus einer Hand. Und das von erfahrenen Designern, die mit voller Leidenschaft bei der Sache sind.

App UI UX Design Icon
CI Guidelines
Skizzen
Wireframes
Clickdummies
Referenzgeräte
Feedbackschleifen

UX Design für intuitive Bedienbarkeit

Das UX Design sorgt für die einfache Bedienbarkeit Ihrer App oder Website. Hier wird festgelegt, wie Funktionen so realisiert werden, dass der User diese einfach findet und ohne Überlegen und Ausprobieren ausführen kann. Auch die Aspekte der Barrierefreiheit werden hier definiert.

In diesem Arbeitsschritt entscheidet sich, ob User mit der App oder Website zurechtkommen, oder diese für kompliziert oder schlecht durchdacht halten. Damit zeigt sich die besondere Bedeutung dieses Prozessschrittes.

Scribbles – es wird etwas sichtbar

Als Scribbles bezeichnet man einen meist per Stift auf Papier oder mittels Grafiktablet angedeuteten Grobentwurf. Ein Scribble dient der Ideenfindung und steht ganz am Anfang des Designprozesses.

Der Vorteil von Scribbles liegt darin, dass das Konzept ohne großen Aufwand visualisiert und mit Ihnen als Kunde diskutiert werden kann. Sie stellen die wichtigsten Interaktionsabläufe und die Navigationsstruktur dar.

Darüber hinaus werden das Basis-Layout der Screens sowie grundlegende Screen-Elemente visualisiert. Auf Designdetails wird in dieser Phase ganz bewusst verzichtet.

Der nächste Schritt - Wireframes

In Wireframes werden bereits die Kanten der Objekte gezeichnet und ggf. noch Hilfslinien eingefügt. Damit werden Flächen als solche erkennbar und erhalten bereits eine plastische Wirkung.

Wireframes ermöglichen ein besseres Verständnis der Interaktionen und Abläufe in der App oder Website. Sie dienen als Grundlage für gemeinsame Diskussionen, die am Ende keine Fragen offenlassen.

Layouts – es wird konkreter

Mit dem Layout erfolgt die konkrete Visualisierung des Konzepts. Dazu werden die Wireframes weiter ausgearbeitet und mit konkreten Designelementen und Farben finalisiert. Das dadurch entstehende Bild vermittelt Ihnen einen Eindruck, wie Ihre App oder Website aussehen wird.

Das User Interface (UI) der App sollte auf die jeweiligen Gegebenheiten der technischen Plattform, also Google Android oder Apple iOS, angepasst sein. Die Benutzerführung, Buttons und Darstellungsweisen von Icons ähneln sich bei iOS und Android, aber es gibt spezifische Details, die berücksichtigt werden sollten. Unsere UI Designer werden entsprechend der App Store Design Guidelines hinsichtlich Benutzerführung und Design geschult. Sie sind daher immer auf dem aktuellsten Stand, was die herstellereigenen Vorgaben angeht. Somit wird Ihre App hinsichtlich der Optik und Benutzerführung immer den neusten Vorgaben und Designtrends, natürlich entsprechend Ihres Corporate Designs, entsprechen. Die Website wird gemäß den Grundsätzen des Material Designs und unter Beachtung Ihres Corporate Designs erstellt.

Als Text wird in der dieser Projektphase häufig noch als Fülltext (Lorem Ipsum) verwendet, um die Diskussion auf das Layout zu fokussieren. Der endgültige Text wird oft erst im Rahmen der Entwickung vom Kunden finalisiert und dann entsprechend in die App oder Website integriert.

Click Dummy – es wird anschaulich

Um das Layout noch anschaulicher zu machen, können die verschiedenen Screens zu einem Click Dummy verknüpft werden. Die einzelnen Screens weise dabei noch keine Funktion auf.

So können Sie sich bereits zu einem sehr frühen Zeitpunkt durch die Navigation klicken, ohne dass eine Zeile Code geschrieben wurde. Stellen Sie jetzt fest, dass doch noch Änderungen erforderlich sind, können diese immer noch mit vergleichsweise geringem Aufwand umgesetzt werden.

Test auf Referenzgerät spart Aufwand

Dieser Click-Dummy Ihrer zukünftigen App oder Website kann nun auf einem oder mehreren vorher mit Ihnen vereinbarten Referenzgerät(en) begutachtet und kommentiert werden.

Mit der Beschränkung auf ein oder wenige Referenzgerät(e) erspart man sich die responsive Umsetzung zu so einem frühen Projektstadium, in dem noch vielfältige Änderungen zu erwarten sind.