App Design – Was ist UI und UX?

Was ist gutes Design?

Spätestens seit Steve Jobs ist uns allen bewusst, welchen Unterschied ansprechendes, aufregendes Design machen kann. Was macht ein gutes App Design aus? Gutes Design bei Mobile Apps geht immer Hand in Hand mit einer positiven User Experience (UX), welche Funktionalität und App-Design vereint und auf der subjektiven Wahrnehmung Ihres Users basiert. Gute UX-Designs entscheiden darüber, ob es gelingt, eine erfolgreiche App zu erstellen und User für sich zu gewinnen.

UI oder User Interface (zu Deutsch: Nutzerschnittstelle) ist die Bedienoberfläche, mit der die Nutzer interagieren und mit dem Programm kommunizieren können.

Hierbei werden Befehle und Menüs innerhalb der App so entwickelt und anschließend optimiert, dass sie gleichzeitig visuell ansprechend und funktional sind. Nur wenn dies erfolgt ist, wird sich der Nutzer später wohlfühlen und eine positive Nutzererfahrung haben.

Gestaltung von UI und UX

Bei der Gestaltung des UI und der UX gilt es darauf zu achten, dass der Nutzer nur eine begrenzte Kapazität hat Informationen aufzunehmen. Deshalb gilt: Weniger ist meist mehr. Komplexere Aufgaben für den Nutzer, beispielsweise der Payment-Prozess im Check-out einer e-Commerce App sollte unbedingt in Teilbereiche unterteilt werden. Ist dem Nutzer zudem visualisiert, in welcher Phase des Prozesses er sich befindet, fühlt er sich deutlich wohler. Ein bestehender Styleguide, der wichtige Corporate Design Elemente enthält, vereinfacht den App Design Prozess stark und führt zu dem gewünschten Ergebnis des Brand-Designs. Im Fokus sollte immer eine hohe Usability liegen.

Eingabefelder, zum Beispiel zur Buchung von Hotels, sollten nur die wichtigsten und unbedingt notwendigen Felder listen. Eingabefelder sind nutzerfreundlicher, wenn Sie mit Icons unterlegt sind. Generell wurde festgestellt, dass App Nutzer positiv auf sinnvoll eingesetzte Bilder reagieren. Intelligente Funktionen wie das automatische Befüllen von Feldern oder die Vorauswahl der Zahlentastatur sind essenzielle Bestandteile erfolgreicher Apps. Punkte in der mobilen App, an denen der User unter Umständen Hilfe benötigt, sollten frühzeitig antizipiert werden und dem Nutzer dort weiterführende Informationen bereitgestellt werden.

Das Rad muss in vielen Fällen nicht unbedingt neu erfunden werden. Handlungsaufforderungen, Button-Größen oder Darstellung von Statistiken können sich an bekannten, etablierten Designs ausrichten.

Ein wichtiger Ansatzpunkt ist das Konzept der Konsistenz, was sich sowohl im App-Design und der Funktionalität der App, als auch im Brand Design außerhalb der App wiedergefunden wird. Wichtig ist, dass die mobile App unverkennbar als Ihr Produkt wahrgenommen wird. Natürlich sollte auch speziell die Webseite Ihres Unternehmens nah an dem App-Design angelehnt sein.

Dies könnte Sie auch interessieren: App programmieren – 4 Wege zur eigenen App

Wie ein App-Nutzer ein zufriedener Nutzer bleibt

Da die Kosten für die Akquisition eines neuen Nutzers einer App unter Umständen recht hoch sind, ist es wichtig, dass dieser nach dem Download und der Installation bei Ihnen bleibt. Die Entscheidung, ob der Nutzer der App sich zu Beginn angesprochen und abgeholt fühlt und damit die User Experience positiv wahrgenommen wird, fällt in der Regel innerhalb von wenigen Augenblicken nach der Installation. In der Phase des User Onboardings empfehlen wir eine direkte interaktive Kommunikation mit der App, z.B. in Form einer ersten Lernübung in einer Bildungs-App oder ein erstes Mini-Game bei Spiele-Apps- kleine einführende Tutorials eben.

Innerhalb dieser wichtigen frühen Nutzungsphase sollten die Grundeinstellungen in der App bereits voreingestellt sein und sich an den Bedürfnissen der Mehrheit der Nutzer orientieren, um eine größtmögliche Usability zu garantieren. Anpassungen in den Einstellungen sind ohne weiteres möglich, jedoch sollte dieser Prozess optional und nachgelagert sein.

Einige Apps benötigen gesonderte Zugriffserlaubnisse auf Gerätefunktionen des Smartphones oder Tablets (was eine native App-Programmierung erfordert). Beispielsweise benötigt eine Telekommunikations-App einen Zugriff auf das Mikrofon, eine Navigations-App Zugriff auf das GPS-Tracking oder eine Bildaufnahme-App innerhalb der App die entsprechende Erlaubnis zum Nutzen der Kamera. Diese Zugriffsanfragen sollten bei erst Benutzung nur für den Fall gestellt werden, wenn sie absolut notwendig sind. Andernfalls schreckt dies viele App-User ab und die mobile Applikation wird von diesen schneller gelöscht als von Ihnen gewünscht. Daher stellen Sie diese Zugriffsanfragen innerhalb der App nur dann, wenn es im Kontext sinnvoll sind und erklären Sie dem Nutzer, weshalb dieser Schritt notwendig ist.

Nutzer sind heutzutage performante, schnell reagierende Apps gewohnt. Stellen Sie folglich sicher, dass die Ladezeit der App unter 2,5 Sekunden liegt. Umso schneller die Ladezeit, desto größer die Usability und desto besser empfindet der Nutzer die User Experience. Dem Nutzer sollte mindestens aufgezeigt werden, dass er sich in der Situation in einem Ladebildschirm aufhält, lenken Sie ihn dort visuell ab, um die Zeit erträglicher zu machen. Der Designer muss also einen Spagat zwischen Design, Fülle und Effizienz schaffen.

‍

Wie Sie die passenden App Entwickler für Ihr Projekt finden, erfahren Sie in unserem Artikel "App Entwickler finden".

‍

Neben Bildern und Animationen sind vor allem Texte für den Inhalt entscheidend, daher gilt es bezüglich des Schriftdesigns einiges zu beachten. Nutzen Sie leserliche Schriftarten und -größen. In mobile Apps enthaltener Text sollte nicht kleiner als Schriftgröße 11 sein. Apple iOS empfiehlt Schriftarten aus der San Francisco Font Familie, Android und Google empfehlen die Schriftart Roboto. Texte sollten sich kontrastreich vom Hintergrund abheben und verzichten Sie auf in Großbuchstaben geschriebene Texte. Klar strukturierte Texte sind ebenfalls ein Teil der Usability und steigern die User Experience.

Die Entwicklung vom Mock-Up zum Prototypen

Technisch werden in der Design Phase Mock-Ups für den späteren Prototypen erstellt. Mit Wireframes werden erstmals die Inhalte sinnvoll in Struktur gebracht und festgelegt, inwieweit der zukünftige Nutzer der App mit ihr interagiert. Prototypen sollten meist schon professionell erstellt werden und sind vor allem bei großen App Projekten sinnvoll. Gefragte Tools für UI und UX sind Adobe XD oder Sketch, bei denen man kostenfrei großartige Designentwürfe erstellen kann.

Der Weg zum Prototypen hat wichtiger Weise auch direkt die entsprechenden Guidelines der unterschiedlichen Betriebssysteme (iOS und Android) zu beachten. Apple-Nutzer sind andere Bedienschemata gewohnt als ein Samsung- oder Huawei-Nutzer, welcher Android nutzt. Handelt es sich um eine native oder hybride Entwicklung? Die native Entwicklung hat nicht nur Vorteile bezüglich der Nutzung von Gerätefunktionen, z.B. Kamerazugriff oder GPS-Tracking, sondern punktet besonders im Design beim Nutzer. Des Weiteren verfügen Native Apps über die stärkste Performance der verschiedenen App Entwicklungsarten, was eine maximale User Experience garantiert. Erfahren Sie mehr über die Vor- und Nachteile der Nativen Entwicklung.

Wie viel kostet das App Design? Was verdient ein App Designer?

Erfahrene UI- und UX-Designer sind heute sehr gefragt und sind wichtiger Teil erfolgreicher App Entwickler Teams aus unserem Netzwerk. Dabei arbeiten kleine Agenturen unter Umständen mit Design Freelancer zusammen, führende Agenturen haben meist jeweils erfahrene UI- und UX-Designer mit im Team.

Je nachdem wie viele UI- und UX-Experten in den Prozess des App-Design involviert werden, desto höher liegen die Kosten. Haben Sie schon eigene Designskizzen und ein vorhandenes Corporate Design in dieser Phase erarbeitet, können Sie die Kosten für die Entwicklung des deutlich senken. Wichtig ist, dass Sie beim Design Ihre Zielgruppe im Blick zu haben. Handelt es sich um eine App zum Digitalisieren von internen Prozessen, kann beim App-Design in der Regel etwas gespart werden. B2C-Apps, die unbedingt mit einem top Design punkten sollen, müssen professionell und intensiv durchdesignt werden. Hier liegen Kosten über den durchschnittlichen 4000 € für das App-Design. Wer keinen Wert auf ein individuelles Design legt, kann hierbei sparen und auf bestehende Vorlagen, sog. Templates, setzen. Gutes App-Design kostet Zeit und Geld.

Ein UI-Designer kostet zwischen 70 und 130 €, ein UX-Designer im Durchschnitt 105 € pro Stunde. Tagessätze für Designs liegen bei Agenturen zwischen 700 und 1300 €.

Wie viel es kostet, eine App von Grund auf entwickeln zu lassen, erfahren Sie im folgenden Artikel: App entwickeln lassen – Kosten