Ihre App wird durch ihr Design leben und sterben.

Glauben Sie es oder nicht, das Design einer App spielt eine große Rolle dabei, Ihre Nutzer zu halten. Es ist nicht unbedingt wichtig, ob sie schwer zu bedienen oder einfach nur hässlich ist, die Leute werden entscheiden, dass es ihre Zeit oder Mühe nicht wert ist. Wie erstellt man also ein App-Design, das für Ihre Nutzer ansprechend ist? Lassen Sie uns eintauchen.

Verständnis von App-Design

Gutes App-Design berücksichtigt eine Vielzahl von Faktoren, sollte aber immer mit einem „User-First“-Ansatz erfolgen – und es darf definitiv nicht Ihr letzter Gedanke sein, wenn Sie eine App erstellen. Es ist auch wichtig, die allgemeinen Designprinzipien im Auge zu behalten und wie sie in den digitalen Raum übersetzt werden.

UI vs. UX

User Interface (UI) und User Experience (UX) Design werden oft fälschlicherweise für dasselbe gehalten. Während sie Hand in Hand gehen, unterscheiden sie sich konzeptionell und in der Ausführung.

User Interface App-Design ist das Aussehen und Gefühl Ihrer App, einschließlich ihrer Präsentation und Interaktivität.

User Experience App-Design ist das technische Gerüst Ihrer App, oder die technische Benutzerfreundlichkeit und Funktionalität.

Stellen Sie sich Ihre App wie ein Bauprojekt vor. Ein UX-Designer ist wie der Architekt, der für die Struktur und ihre Blaupausen verantwortlich ist, die ähnlich wie Wireframes sind. Ein UI-Designer ist der Innendesigner des Hauses, der Tapeten und Möbel wie Farben und Schriftarten auswählt.

(Bild mit freundlicher Genehmigung von Medium)

UI/UX ist ähnlich wie der Unterschied zwischen Front-End- und Back-End-Entwicklung. Diese beiden Komponenten des App-Designs müssen zusammenarbeiten, um etwas zu schaffen, das gut aussieht und gut funktioniert. Wenn die Benutzererfahrung nicht zum Design passt, wird es für die Nutzer schwieriger, sich in Ihrer App zurechtzufinden. Kurz gesagt, Sie möchten nicht, dass der weniger begangene Weg der ist, den Sie für Ihre Nutzer vorgesehen haben.

App-Design-Systeme

Es gibt zwei Hauptdesignsysteme: Human Interface Guidelines auf iOS und Material auf Android. Dies sind designrichtlinien, die spezifisch für jedes Betriebssystem sind und Prinzipien und Muster für häufig verwendete Elemente wie Header, Bottom Sheets, Karten usw. enthalten. Die Nutzung eines Designsystems kann den Prozess der Aktualisierung Ihrer App etwas reibungsloser gestalten.

Während App-Design-Software Leistung sicherstellt, können sie auch flexibel sein. Sie werden typischerweise leicht angepasst oder in einigen Fällen vollständig vom Designer angepasst. Diese Richtlinien ermöglichen es Teams, intelligenter zu arbeiten, sogar abteilungsübergreifend.

(Bild mit freundlicher Genehmigung von Airbnb)

Airbnb verwendet ein Design-Sprachsystem, um die Kommunikation funktionsübergreifend zu verbessern, indem ein gemeinsames Vokabular über Design, Technik und andere Abteilungen hinweg verwendet wird. Es ist im Wesentlichen das Design-Wörterbuch Ihrer App, plus Bilder.

5 App-Design-Tipps

Um Ihre App benutzerfreundlicher zu gestalten, müssen Ihre UI- und UX-Designs nahtlos zusammenarbeiten.

1. Entleeren Sie nicht die Batterie

Wenn Ihre App eine Menge Batterieleistung verbraucht, werden Ihre Nutzer sie weniger wahrscheinlich öffnen. Bildschirmhelligkeit und Bildschirmfarbe sind die größten Faktoren beim mobilen Batterieverbrauch, zusammen mit Hintergrunddiensten wie Standort.

Google gibt tatsächlich zu, dass es falsch lag. Noch einmal? Googles Material Design-Initiative ermutigt Designer, Weiß als Primärfarbe für Apps zu verwenden.

(Bild mit freundlicher Genehmigung von Google)

Apps, die viel Bildschirmzeit erfordern, wie YouTube, haben begonnen, den „Dark Mode“ einzuführen, um den Batterieverbrauch zu reduzieren. Laut Google verbrauchte YouTube im Dark Mode bei voller Helligkeit auf ihrem Pixel-Smartphone 43 Prozent weniger Strom als normal.

2. Einfache Navigation gewinnt immer

Sie sollten nicht versuchen, das Rad neu zu erfinden. Versuchen Sie, Standardsequenzen für Ihr Navigationsmenü zu verwenden, wie die iOS-Tab-Leiste oder die Android-Navigationsschublade. Nutzer sind mit diesen gängigen Mustern vertraut, sodass Ihre App für sie intuitiver ist.

Es ist wichtig, dass das Navigationsmenü Ihrer App immer sichtbar ist und nicht herumspringt, während der Nutzer durch die App navigiert. Wenn Sie sich entscheiden, Symbole in Ihrer Navigationsleiste zu verwenden, stellen Sie sicher, dass deren Zweck für den Nutzer klar ist. Sie sollten bestimmte Funktionen gegenüber anderen in Ihrer Navigation priorisieren. Falls erforderlich, erstellen Sie ein primäres, sekundäres und sogar tertiäres Menü.

Dieses Konzept verwendet ein reduziertes Navigationsmenü, nur ein Pfeil, um einen „Zurück“-Befehl darzustellen, und eine Lupe, die „Suche“ bedeutet. Diese beiden Symbole bewegen sich nie, während Sie sich in der App bewegen.

(Bild mit freundlicher Genehmigung von A. Salomon)

Dieses App-Navigationsmuster nutzt auch einige gängige Gesten, wie das Wischen von links nach rechts, um durch die verschiedenen Nachrichtenthemen zu sortieren.

3. Wählen Sie Farben und Schriftarten weise

Farben sind wichtig für sowohl UX- als auch UI-Design. Sollten Sie Ihr sauberes weißes Aussehen opfern, um Batterie zu sparen? Wie viele Farben sind zu viele? Denken Sie an Ihre Markenidentität, wenn Sie diese schwierigen Designentscheidungen treffen.

Zum Beispiel können kontrastreiche Farben Ihre Benutzeroberfläche mehr hervorheben lassen, als wenn Sie ähnliche Farben verwenden. Aber es gibt mehr bei der Farbauswahl als nur das Aussehen. Denken Sie an die Lesbarkeit von sowohl Schriftarten als auch Farben.

Wussten Sie, dass fast 5% der Weltbevölkerung Farbenblindheit erleben? Sie müssen über die Funktion von Farben nachdenken, wenn Sie Ihre App entwerfen.

(Bild mit freundlicher Genehmigung von Smashing Magazine)

Offensichtlich bedeutet Grün gehen. Aber ohne diese Symbole neben den Formularfeldern würde ein farbenblinder Nutzer nicht wissen, welches Eingabefeld den Fehler erzeugt.

4. Visuelles Gewicht macht einen Unterschied

Es ist notwendig, dass Sie die Bedürfnisse Ihrer Nutzer antizipieren, ohne ihre Handlungen vorherzusehen. Geben Sie Ihren Nutzern schnell die Informationen, die sie suchen, indem Sie unterschiedliche Gewichte für verschiedene Abschnitte verwenden. Denken Sie an Überschriften und Fließtext – das Gewicht dieser beiden Elemente sollte ihre Wichtigkeit widerspiegeln.

Das Watering Tracker App hat das Hauptziel, den Nutzern zu sagen, wann es Zeit ist, ihre Pflanzen zu gießen. Die wichtigsten Informationen haben das höchste visuelle Gewicht.

(Bild mit freundlicher Genehmigung von Tubik)

Was fällt Ihnen ins Auge? Während die App den Nutzern eine Menge anderer Informationen über die Gesundheit der Pflanze gibt, kann der Nutzer schnell sehen, dass sie morgen gegossen werden muss.

5. Konsistenz ist der Schlüssel

Ihr App-Design sollte im gesamten Bereich konsistent sein, sowohl visuell als auch funktional. Es sollte auf jeder Seite gleich aussehen und sich gleich verhalten. Beachten Sie, dass Ihr Android- und iOS-App-Design unterschiedlich sein wird, und das ist in Ordnung. Seien Sie einfach auf jeder Plattform konsistent und behalten Sie das Kern-Design bei. Außerdem wird Ihr App-Entwickler wahrscheinlich mindestens ein Software Development Kit (SDK) verwenden, wie das Facebook-Profil-Login, also versuchen Sie, Ihre App auch mit diesem im Hinterkopf zu entwerfen.

Das Design Ihrer App sollte auch auf Ihre Website und alle anderen Markenmaterialien übertragen werden. Externe Konsistenz wird helfen, Glaubwürdigkeit aufzubauen und Verwirrung bei Ihren Nutzern zu vermeiden. 

Ubers Branding ist aus einer Meile Entfernung leicht zu erkennen. Von der fahrerorientierten mobilen App bis zur fahrerorientierten Website ist Uber konsistent mit Farben, Schriftarten und dem insgesamt modernen Gefühl.

(Bild mit freundlicher Genehmigung von Uber)

Kommt Ihnen dieses Formular bekannt vor? Das liegt daran, dass es den Feldern, die Sie ausfüllen würden, wenn Sie eine Fahrt innerhalb der App anfordern, sehr ähnlich ist.

Verwandt: App-Design-Fähigkeiten sind entscheidend, wenn Sie eine Karriere als Software-Ingenieur anstreben. Erfahren Sie, was es sonst noch braucht, um ein App-Entwickler zu werden, von den Experten.

Einbeziehung von App-Design in das Marketing

Wir sind hier bei G2 alle darauf aus, Expertenmeinungen zu beziehen, weshalb wir fünf Designexperten gebeten haben, zu erklären, wie sie das UI-Design einer App in eine Marketingstrategie und darüber hinaus einbeziehen.

1. Wenn Sie unsicher sind, machen Sie einen Screenshot

„Wenn Sie für eine App werben, geben Sie dem Nutzer einen Vorgeschmack auf die UX/UI und Sie möchten das sehr klar in Ihrer Anzeige nachahmen. Ich finde, dass Anzeigen mit Screenshots und sehr sauberen Hintergründen (um nicht von den einzigartigen Funktionen der App abzulenken) am erfolgreichsten sind.

Halten Sie den Text leicht und auf den Punkt. Wenn Sie ein poliertes GIF oder ein kleines Video erstellen können, das eine schnelle Demo der besten Funktionen der App zeigt, ist das noch besser. Sie haben etwa 3-5 Sekunden, um Ihr Publikum zu fesseln, bevor es weiter scrollt - übersehen Sie nicht das Design Ihrer Anzeige, egal wie klein sie ist! Testen Sie viele Anzeigenbilder - verschiedene Farben, verschiedene Schriftgrößen, verschiedene Screenshots, verschiedene Größen von Assets.“

– Ciara Hautau, Lead Digital Marketing Strategist bei Fueled

2. Schaffen Sie eine einheitliche Front (Ende)

„Eine Möglichkeit, sicherzustellen, dass das Aussehen und Gefühl Ihrer App-UI in Ihren Marketingmaterialien ausgedrückt wird, besteht darin, bestimmte Elemente des App-Designs als Akzentstücke zu verwenden. Wenn Ihre App beispielsweise Abschnitte mit Illustrationen hat, übertragen Sie diese in Ihr Angebot, mit genau demselben Stil.

Ein weiterer Tipp ist, auf den Stil von Schaltflächen und Boxen in der App zu achten. Wenn Ihre App Rechtecke als Schaltflächen verwendet, ohne abgerundete Ecken; sollten Ihre Marketingmaterialien diesem Stil folgen und niemals abgerundete Kanten verwenden. Dies gilt auch für Schlagschatten, Schriftgrößen, Transparenz usw.“

– Jenna Erickson, Marketing Manager bei Codal

3. Seien Sie konsistent mit der Farbe

„Denken Sie an konsistentes Branding. Ich empfehle, eine sehr begrenzte Farbpalette zu verwenden, wenn Sie die UI für eine App entwerfen. Wenn Sie dies über all Ihre Marketingmaterialien hinweg verwenden, ist es sehr einfach, Konsistenz und vor allem Wiedererkennung für die Marke zu erreichen.

Ich erstelle derzeit eine UI für eine App. Ich habe die ursprüngliche Markenfarbe Rot genommen und sie als Farbwaschhintergrund für alle Marketingmaterialien verwendet. Das Endergebnis ist eine mutige, sehr erkennbare Marke, die sich die Leute merken.“

– Jean H. Paldan, Gründer & CEO von Rare Form New Media

4. Sprechen Sie die gleiche Sprache

„Wir integrieren direkt Elemente unserer UI in unsere Marketingkampagnen, um unserem Publikum ein besseres Verständnis dafür zu geben, wie unsere App funktioniert und welche Vorteile sie aus dem Produkt ziehen könnten. Unsere App ist eine plattformübergreifende Suchplattform, um gleichgesinnte Menschen in der Nähe durch gemeinsame Interessen zu finden. Wir verwenden die Schlüsselwort-Tags, genau so, wie sie in der App aussehen, in unseren Kampagnen auf Instagram und Facebook, um die verschiedenen Interessen vorzustellen, durch die Sie sich verbinden könnten. Dies gibt unserem Publikum einen Vorgeschmack auf unser Produkt vor dem Download.

Isolieren Sie die Schlüsselelemente Ihres Produkts. Was macht es einzigartig? Was macht es ansprechend? Versuchen Sie dann, auf eine nicht zu offensichtliche Weise, dieses Element durchgehend einzubeziehen. Es ist wichtig, an etwas zu denken, das ansprechend und möglicherweise sogar partizipativ ist, wie eine Hashtag-Kampagne.“

– Melanie Aronson, Gründerin von Panion

5. Bringen Sie Ihren Punkt rüber

„In all unseren Marketingmaterialien – auf unseren Webseiten, in unseren Broschüren, in unseren E-Mails, in unseren Videos usw. – stellen wir sicher, dass wir unsere elegante UX/UI visuell hervorheben und wirklich die Benutzerfreundlichkeit und Zugänglichkeit demonstrieren, die unsere Ein-Klick-App-Oberfläche bietet.

Es ist wichtig, das Publikum zu fesseln, indem man beschreibt, wie das Design der App die Benutzererfahrung verbessert. Sie müssen einen Weg finden, zu vermitteln, wie die Benutzeroberfläche Ihren Kunden zugutekommt und wie sie potenzielle Leads anspricht. Ihre Botschaft sollte sich darauf konzentrieren, wie die Benutzeroberfläche eine noch einfachere, reibungslosere und leicht zugängliche Erfahrung für alle Nutzer schafft.“

– Sagi Gidali, Mitbegründer & CPO von Perimeter 81

Ein "Make it work"-Moment

OK, wir wissen, dass das App-Design definitiv das gesamte Entwicklungsbudget beeinflusst. Aber es gibt noch mehr. Entdecken Sie wie Sie das Beste aus Ihrem App-Prototyp herausholen und beantworten Sie die Frage: wie viel kostet es, eine App zu erstellen?