Die Verpackung ist entscheidend

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.

Anhand der gewonnenen Informationen werden sogenannte Wireframes erstellt. Wireframes sind Hilfsmittel für die Konzeption von Webseiten, wobei mit technisch reduzierter Darstellung die Inhalte der Webseite geplant werden. Wireframes bilden das Layout von Inhalten und Funktionen ab, unter Berücksichtigung von Nutzerbedürfnissen und Nutzerverhalten.

Das UI Design verpackt die vom UX Design bereitgestellten Wireframes in eine ansehnliche Hülle.

"Der erste Eindruck zählt." Natürlich!

Beim UI muss allerdings auch der zweite Eindruck stimmen. Entscheidend für eine gelungene UI sind nämlich nicht nur hübsch gewählte Farben. Das UI greift die Daten aus dem UX auf und führt den User auf eine wunderbare Reise durch die Anwendung.

Der UI Designer sorgt dafür, dass der User sich wohl fühlt und die App am liebsten nie mehr verlassen möchte. Er achtet auf eine einladende Formsprache, auf eine ausgewogene und harmonische Auswahl der Farben und der Schriften. Und last but not least auch auf die Barrierefreiheit des Designs.

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.