UX/UI

Auch wenn die schönste Verpackung aus Mist kein Gold machen kann, ist es dennoch so, dass wir eine Applikation in erster Linie anhand ihres Designs aussuchen.
Wenn wir eine Software jedoch nicht gut bedienen können, bringt sie uns trotz all ihrer tollen Funktionen und ihres schönen Design nichts.

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.

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.

UI

Gutes UI-Design ist mehr als nur Ästhetik – es macht Apps für alle zugänglich und leicht nutzbar. Ein gutes User Interface hilft Nutzern, sich intuitiv zurechtzufinden, wichtige Informationen schnell zu erfassen und Aktionen problemlos auszuführen. Ein zentraler Aspekt dabei ist die Barrierefreiheit: Ein zugängliches UI sorgt dafür, dass auch Menschen mit Einschränkungen, wie Sehschwächen oder motorischen Herausforderungen, die App mühelos bedienen können. Zum Beispiel sollten Buttons klar erkennbar sein und durch Hover-Zustände oder leichte Animationen anzeigen, dass sie interaktiv sind. Diese kleinen Hinweise helfen Nutzern nicht nur zu verstehen, dass eine Funktion bereitsteht, sondern verbessern auch die Nutzerfreundlichkeit insgesamt.

Darüber hinaus steigert gutes UI-Design die Effizienz und Produktivität der Nutzer, da sie weniger Zeit für das Finden und Verstehen von Funktionen aufwenden müssen. Es reduziert Frustrationen, was die Benutzerzufriedenheit erhöht und die Wahrscheinlichkeit steigert, dass Nutzer regelmäßig zurückkehren. Ein klares und ansprechendes Design stärkt außerdem das Vertrauen in die App, da Nutzer das Gefühl haben, dass hier mit Sorgfalt und Professionalität gearbeitet wurde. Letztendlich trägt ein gut durchdachtes UI-Design dazu bei, dass die App intuitiv, angenehm und erfolgreich genutzt wird.

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:

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

Interessiert dich dieses Thema? Erfahre hier mehr darüber, weshalb eine barrierefreie UI essentiell für dein digitales Projekt ist:

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 (MVP) ist eine Produktentwicklungsstufe, bei der mit möglichst geringen Investitionen ein Konzept umgesetzt wird, welches im Anschluss als sogenanntes Vor-Produkt dem Kunden oder einer Zielgruppe präsentiert und zum Nutzen und Testen bereitgestellt wird. Im besten Fall gibt es eine Feedback Runde, in der besprochen werden kann, welche Funktionen begeistern und welche noch verbessert oder auch weggelassen werden sollen.
Das MVP spart uns also eine Menge Zeit und Kosten.

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

Erfahre mehr über die Wichtigkeit einer überzeugenden CI:

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

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 und wie komplex diese gestaltet werden sollen. Zum Beispiel mit zusätzlichen 3D Modellen und/oder Animationen.
• 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.

Wenn du es genauer wissen möchtest, melde dich bei uns und gib uns ein paar genauere Details über dein Projekt.