UX und UI Design

UX und UI

Es ist mittlerweile common sense den App Design Prozess in zwei Bereiche zu unterteilen: in UX (User Experience) und UI (User Interface). Das UI folgt auf die UX.

Die UX orientiert sich an den Berührungspunkten oder Touchpoints eines Nutzers mit einem Unternehmen.

Der UX Designer stellt sich folgende Fragen: Wo kommt ein User her? Wo befindet er sich? Und wo geht er hin?

Ein User könnte zum Beispiel durch Anklicken eines Online Werbespots auf die Webseite des Unternehmens gelangen, Artikel in den Warenkorb packen und diese dann über das Purchasing System der Webseite kaufen.

Auf diesem Weg durch die Webseite macht der User Erfahrungen mit verschiedenen Touchpoints. Diese werden als UX bezeichnet.

Um nachvollziehen zu können, welche Touchpoints der User einer App passiert, muss der UX Designer bestens informiert sein, über die Wünsche seines Kunden (des jeweiligen Unternehmens) und die Bedürfnisse der Nutzer.

Hierfür müssen im Vorfeld die richtigen Fragen gestellt und beantwortet werden. Der Markt, die Zielgruppe und viele andere Faktoren müssen analysiert werden. Der UX Designer kennt Tools und Techniken, um die nötigen Informationen zu erhalten.

Was sind Wireframes?

Wireframes sind ein Teil der sogenannten User Experience (UX). Sie sind visuelle Entwürfe, die die Struktur und Funktionalität der Benutzeroberfläche (UI - User Interface) eines digitalen Produkts abbilden. Soll heißen, sie bieten eine vereinfachte Darstellung des Designs und konzentrieren sich dabei auf die wesentlichen Komponenten und Interaktionen, ohne ablenkende visuelle Elemente.

Welche Vorteile bietet dir das?

Das Wireframing hilft bei der Identifizierung potenzieller Probleme mit der Benutzerfreundlichkeit. Wireframes helfen dir und den Designern, die Struktur und den Umfang deines Projekts zu definieren. Durch die vereinfachte Darstellung der verschiedenen Komponenten, Funktionen und Navigationspfade bieten Wireframes einen klaren und umfassenden Überblick darüber, wie die verschiedenen Elemente zueinander in Beziehung stehen.

Vorteile für Designer:

Auf diese Weise können die Designer einen logischen Ablauf und eine intuitive Benutzerführung sicherstellen und so spätere Probleme vermeiden. Das spart Zeit auf mehreren Ebenen. Die Wireframes ermöglichen sehr frühes Feedback und Iterationen. So können Anpassungen an der Struktur des Projekts vorgenommen werden, bevor eine Menge Zeit in das visuelle Design und die Entwicklung geflossen ist. Nach Fertigstellung des Designs der Benutzeroberfläche (UI), werden Änderungen deutlich zeitintensiver.

Vorteile für Entwickler:

Auch die Zusammenarbeit von Designern und Entwicklern wird durch die Wireframes effektiver. Da sie das Grundgerüst des Designs darstellen, bekommen Entwickler nicht nur ein sehr gutes Bild über den logischen Aufbau. Der Fokus wird gleich zu Beginn auf die Funktionalität und die Benutzerinteraktionen gesetzt. So kristallisieren sich Zweck und Ziele des Produkts besser heraus, was wiederum Zeit spart und bei allen Beteiligten für mehr Klarheit sorgt.

Deine Vorteile:

Wie wir jetzt wissen, spart dir das Wireframing eine Menge Zeit und dementsprechend auch finanzielle Mittel. Die vorzeitige Visualisierung des Projekts hilft dir außerdem dabei, eine genauere Vorstellung vom Endprodukt zu erhalten und dich aktiver am Designprozess zu beteiligen. Dadurch stellen wir sicher, dass das fertige Produkt wirklich deinen Zielen entspricht.

Der Wireframe Prototyp

Die Wireframes, welche du von uns erhältst, funktionieren bereits wie ein kleiner Prototyp. Durch Anklicken der Elemente und Buttons wirst du schon auf Seiten weitergeleitet oder der Status eines Elements verändert sich. So musst du dich nicht zwischen einer Ansammlung zusammenhangsloser Elemente orientieren, sondern gewinnst direkt einen Eindruck der späteren Klickwege durch das Produkt.

Ja richtig! Barrierefreiheit. Vielleicht nicht der Begriff, der dir beim Öffnen einer App als erstes in den Sinn kommt.

Tatsächlich spielt Barrierefreiheit jedoch eine extrem wichtige Rolle im UI Design. Bereits bei der Farbauswahl muss der Designer verschiedene Faktoren miteinbeziehen.

Allein in Deutschland sind um die 4 Millionen Menschen von einer Farbsinnstörung betroffen, was bedeutet, dass sie entweder bestimmte Farben sehr schlecht oder gar nicht erkennen können.

Auch Lichtempfindlichkeit und das erkennen von Kontrasten, werden im UI Prozess mit einbezogen.

Bestimmt hast du ihn auch schon entdeckt: Den Theme Toggle.

Ein Button, mit dem du das Theme einer App von hell nach dunkel wechseln kannst. Auf den ersten Blick eine nette kleine Spielerei für den User. Aber natürlich hat der Theme Toggle besondere Eigenschaften, die nicht sofort ersichtlich sind:

Unter anderem kann dein Handy im Dark Mode Energie einsparen.

Und wo gerade von Barrierefreiheit die Rede war:

Die Möglichkeit, in den Dark Mode zu wechseln, ist besonders entscheidend für lichtempfindliche Menschen.

Der Dark Mode macht die Nutzung eines Smartphones in einer dunklen Umgebung auch wesentlich entspannter für die Augen. Vor dem Schlafengehen sollte man am besten auch in den Dark Mode wechseln, um die Melatoninausschüttung nicht zu verhindern.

Entwickler brauchen nicht nur das Design, sondern vor allem die Daten dahinter, um es pixel perfect in Code umzusetzen.

Bei uns werden einzelne Funktionsbereiche, Farbwerte und andere relevante Daten des Designs in Komponenten gespeichert. Unsere Entwickler können diesen Komponenten alle Daten entnehmen, die für die Umsetzung des Designs benötigt werden. So kommuniziert das Design mit der Entwicklung.

Das Minimum Viable Product ist eine Produktentwicklungsstufe, bei der mit möglichst geringen Investitionen ein Konzept umgesetzt wurde, welches im Anschluss als sogenanntes Vor-Produkt dem Kunden oder einer Zielgruppen präsentiert und zum Nutzen und Testen bereitgestellt wird. Im besten Fall gibt es eine Feedback Runde, bei der besprochen werden kann, welche Funktionen begeistern und welche noch verbessert oder auch weggelassen werden sollten.

Das MVP spart uns somit also eine Menge Zeit und Kosten.

Wie viel kostet ein professionelles Design

Hast du erwartet hier feste Preise vorzufinden?

Festpreise für ein Projekt zu nennen, ist schlichtweg nicht möglich. Aber wir können dir hier einige Parameter aufzeigen, die Einfluss auf den letztendlichen Preis eines Projektes haben.

Es wird in Stunden abgerechnet. Das bedeutet, je mehr Zeitaufwand, desto mehr Kosten.

Natürlich ist der Umfang des Projektes hauptausschlaggebend. Mit Umfang ist gemeint, wieviele Seiten und Komponenten dein Projekt haben soll.

Entscheidend ist auch, ob bereits ein Logo oder eine CI für das Projekt existiert, oder ob diese ebenfalls im Rahmen des Projekts erstellt werden sollen.

Die Corporate Identity bildet sich aus den sichtbaren Merkmalen eines Unternehmens, wie zum Beispiel dem Logo, dem Design der Webseite oder App, dem Social Media Auftritt, den Produkten. Und auch aus den subjektiven Merkmalen, wie den Unternehmenszielen, gemeinnützigen Projekten und wofür das Unternehmen steht.

All diese Merkmale bilden ein nach außen sichtbares Gesamtbild eines Unternehmens, die sogenannte CI (Corporate Identity).

Wir geben nichts auf Äußerlichkeiten..

Und wie du jetzt weißt, ist Design nicht nur, was an der Oberfläche zu erkennen ist.

Design geht auf deine Bedürfnisse und Emotionen ein, es ist inklusiv, strukturiert und im besten Fall zieht es dich in seinen Bann.