Design ist mehr als nur gutes Aussehen. Bei mobilen Apps kommt es nicht nur auf die Gestaltung an, sondern auch auf die Usability. Daher gilt es mehrere Dinge zu beachten. Idealerweise sollte Deine eigene App einfach zu bedienen sein, ohne dabei langweilig zu wirken. Mit einigen Tipps und Tricks gelingt es auch Dir, ein anspruchsvolles und kreatives App Design zu erstellen.

Inhaltsverzeichnis

Zielgerichtetes App Design

Bevor es an das Erstellen des Designs für Deine App geht, solltest Du Dir vorab einige Fragen stellen:

• Wer sind Deine Nutzer?
• Was ist das Ziel Deiner App?
• Was soll Deine App können bzw. welche mobilen Anwendungen sollen integriert werden?
• Für welche Anbieter soll Deine App verfügbar sein (iOS, Android, Windows etc)?

Überlege Dir vorher genau, wer zu Deiner Zielgruppe gehört. Immerhin soll Deine App idealerweise perfekt auf den Nutzer abgestimmt sein und sich an die Erwartungen und Wünsche der Zielgruppe anpassen. Deshalb empfiehlt es sich vorab ein wenig Nutzerforschung zu betreiben. Einige Tipps können Dir dabei helfen, Deine Zielgruppe einzugrenzen:

• Personas: Personas sind fiktionale Charaktere, die stellvertretend für weitere Untergruppen innerhalb deiner Zielgruppe stehen. Sie ermöglichen es herauszufinden, wie sich der Anwender innerhalb der App verhalten wird.
• Nutzerszenarios: Bei Nutzerszenarios wird überlegt, wie sich die Personas verhalten, wenn sie die App nutzen. Da für jede Persona unterschiedliche Ziele und demnach auch unterschiedlich Handlungsvorgänge entwickelt werden, ermöglichen diese Szenarios den Entwurf einer Benutzeroberfläche, die bestmöglich zu ihnen passt und zu den Zielen, die du erreichen willst.

App Design – Usability

Mobile Apps, die nicht einfach verwendet werden können, sind weniger beliebt und werden damit auch nicht so oft im App Store runtergeladen. Deine App sollte also so gestaltet sein, dass sie möglichst nutzerfreundlich und einfach zu bedienen ist. Obwohl dies zunächst als selbstverständlich erscheint, gilt es jedoch auch hier einige Dinge zu beachten.

Fingerfreundlichkeit ist hierbei das Schlagwort. Anders als bei einem Laptop, wird auf Tablets oder Smartphones nicht mit einem pixelgenauen Maus-Cursor gearbeitet. Der Kern eines jeden Touch-Gerätes sind Gesten. Berührungen, Wischen, Doppelklick und Zoomen machen die Nutzung eines smarten Endgerätes aus und sollten daher auch in das Design mobiler Apps integriert werden.

Größere Buttons mit größerem Abstand verbessern die Zielgenauigkeit beim Tippen mit der Fingerspitze. Zu kleine Buttons, die zu eng beieinander stehen führen zu Frustration, wenn der User sie nicht richtig antippen kann.

Finger sind je nach Größe etwa 45-57 Pixel breit. Danach sollte sich auch die Größe der Buttons richten. Apple empfiehlt beispielsweise eine Fläche von 44 Pixeln im Quadrat.

Für die Bestimmung von Layouts für Interface-Elemente können mobile Interaktionsmuster helfen. Zum Beispiel lassen sich Navigations-Buttons am unteren Rand des Bildschirms besser für den Daumen erreichbar als am oberen Rand.

Ein Beispiel für ein gutes mobiles Interaktions-Design einer mobilen App ist Yelp. Die App gibt es sowohl für iOS als auch Android und Windows. Das App Design ist clean und einfach gehalten. Große, bunte Buttons ermöglichen dem User eine leicht verständliche und bequeme Interaktion.

Um die App spannender zu gestalten und ihr eine neue Tiefe zu verleihen, lassen sich Gesten mit Animationen kombinieren. Animationen verbinden den User durch Bewegung mit der UI. Gleichzeitig können so neue Elemente und Inhalte hinzugefügt, oder entfernt werden.

Hierbei bestehen mehrere Optionen:

• Inhalte, die verschwinden und gelöscht werden.
• Inhalte, die sich aus dem Blickfeld bewegen und für eine spätere Verwendung zur Verfügung stehen.

Richtig eingesetzt, entsteht so ein spannenderes App-Erlebnis.

Verständlichkeit & Erlernbarkeit

User wollen nicht lange darüber nachdenken müssen, wie sie vorgehen müssen. Daher sollten die Anwendungen deutlich machen, wofür sie da sind und wie sie funktionieren. Ein blau unterstrichener Text suggeriert dem Anwender zum Beispiel, dass er beim Klicken zu einem anderen Link geführt wird. Diese Hervorhebungen von Funktionen werden Anzeiger genannt.

Neben Anzeigern sollten auch konventionelle mobile App Design-Patterns verwendet werden. Diese helfen dem User sich schnell an das Interface der Applikation zu gewöhnen. So weiß er instinktiv, wie er die App anwenden muss.

Natürlich solltest Du nicht einfach das Design anderer Apps kopieren. Du kannst jedoch gebräuchliche UI-Patterns als Grundlage verwenden und dann Deiner Kreativität freien Lauf lassen. So passt Du deinen Entwurf an die Erwartungen der User an, ohne langweilig zu wirken.

Weitere Funktionen, die in die App-Entwicklung integriert sein sollten, sind Feedback-, oder auch Antwortfunktionen.  Feedbackfunktionen bestätigen dem Nutzer, dass er eine Handlung zu Ende gebracht hat. Feedbacks sind zum Beispiel ein Bestätigungsfenster beim Abschluss eines Kaufes, oder ein einfacher Ton beim erfolgreichen Runterladen einer mobilen App.

Text in Apps

Auch das kreativste und spannendste App Design kommt nicht ohne Text aus. Bei der Erstellung von Texten ist es wichtig, sie leicht verständlich und trotzdem interessant zu formulieren. In Kombination mit Gestiken und Animationen lassen sich so schöne Nuancen setzen. Für den richtigen Einsatz von Texten in mobilen Apps sollte Folgendes beachtet werden:

• Positive Formulierungen: Beschriftungen, die positiv formuliert sind geben dem Nutzer ein Gefühl der Kontrolle und Sicherheit.

• Klare Ausdrucksweise: Wichtig Begriffe sollten immer vorangestellt werden. Beim Verwenden einer App geht es um Schnelligkeit. Der User sollte auf einen Blick erkennen können, um was es geht. Texte sollten daher klar und eindeutig formuliert werden. Verwende zum Beispiel Formulierungen wie „E-Mail-Adresse“ statt „Adresse (E-Mail)“.

• Einheitliche Formatierung: Bei der Formatierung von Texten sollte auf eine einheitliche Gestaltung geachtet werden. Die Schriftart, Schriftgröße, Schriftfarbe, Abstände, etc. sollten aufeinander abgestimmt sein. So wirkt die App übersichtlicher.

• Weniger ist mehr: Beim Öffnen der App möchte sich der User nicht vor einer geballten Wand aus Text wiederfinden. Das wirkt nicht nur überladen, sondern vertreibt auch viele Nutzer schnell wieder aus der App. Aus diesem Grund sollte der Designer eher auf Text verzichten und stattdessen auf Illustrationen setzen. Per Drag-and-Drop lassen sich beispielsweise vorgefertigte Zeichnungen und Bilder einfach in das App Design einfügen. Im Trend liegen flache und halbflache mobile App Designs. Ausdrucksstarke Kontrastfarben und Farbverläufe wirken spannend und wecken das Interesse der User.

App Design – Farbliche Gestaltung

Wenn es um die farbliche Gestaltung geht, wird der futuristische Look immer beliebter. Besonders die neuen App-Trends setzen auf leuchtende Neonfarben wie Rosa, Lila, Hellblau und Grün. Auf einem hellen oder dunklen, gesättigten Hintergrund schaffen diese Farben auffällige Kontraste und ziehen damit die Aufmerksamkeit der Nutzer auf sich.

Sowohl iOS Apps als auch viele Android Apps setzen mittlerweile auf eine bunte Ästhetik mit strahlenden Farbverläufen. Zu den bekanntesten Beispielen für den bunten Farb-Look gehören das App-Icon von Instagram, dem Google Play Store oder auch die neue Kurzbefehl-App von iOS.

User von Apple und Android Produkten haben zudem auch die Möglichkeit, App Icons und damit auch ihren Homescreen individuell zu gestalten. Damit können sie eigenständig den Look ihres Smartphones oder Tablets anpassen.

Eine weitere Möglichkeit zur individuellen Anpassung für den Nutzer bietet der Dark Mode. Der Dunkelmodus ist nicht nur für Apple und Android Apps verfügbar, sondern kann mittlerweile auch am Desktop für Windows und bei vielen Web-Apps eingestellt werden.  Die knalligen Farben wirken auch auf dunklen Hintergründen und lassen sich daher auch für den Dark Mode gut umsetzen.

App Design – Trends

Um das App Design möglichst modern und interessant zu gestalten, hilft es sich an aktuellen Design-Trends zu orientieren.

Das neue Stichwort in der App-Welt lautet „Morphismus“. Kartenbasierte Looks wie bei dem Material Design von Google stehen schon seit langem an der Spitze der Trends. Mittlerweile hat man sich von dem etwas veralteten Skeuomorphismus wieder verabschiedet. Neumorphismus und Glasmorphismus heißen die aktuellen Spitzenreiter. Der Glas-Look sollte vorwiegend Nutzern des Microsoft Betriebssystems Windows Vista ein Begriff sein. Apple arbeitet seit iOS 7 mit UI-Elementen in Glas-Optik.

Neumorphismus

Neumorphismus ist der Nachfolger des Skeuomorphismus, der unteranderem lange Zeit für iOS und vielen E-Book Readern im verwendet wurde.

Ausgangspunkt ist ein kartenbasiertes Design. Die Elemente werden aus einem einzigen soliden Material zusammen mit einem homogenen Hintergrund angelegt, so dass eine einzige Benutzeroberfläche entsteht. Anschließend werden die UI-Elemente in das Material hinein- oder aus ihm herausgeprägt. Damit erhalten Designer die Möglichkeit, Interaktionen frei zu gestalten. Es entsteht ein User-Interface, dass aufgeräumt und durchstrukturiert, aber zugleich spannend wirkt.

Besonders wichtig sind hierbei Schatten und bunte Farben. Sie verleihen dem App Design erst ihren 3D Effekt und geben den Bedienoberflächen ein natürlicheres Aussehen.

Für die Erstellung eines mobilen App Designs mit 3D Buttons, Schaltern, Hebeln oder anderen UI-Elementen muss zwischen vertieften und erhabenen Elementen unterschieden werden.

Vertiefte Elemente:

• Gedrückte Buttons
• Nicht ausgewählte Radio-Buttons
• Die Spuren von Schiebereglern
• Eingabefelder
• Checkboxen

Erhabene Elemente:

• Nicht gedrückte Buttons
• ausgewählte Radio-Buttons
• Schieberegler
• Dropdown-Schaltflächen
• Popups

Glasmorphismus

Auch bei diesem Trend wird ein kartenbasiertes App Design in Reinkultur verwendet. Die neue Optik ermöglicht sowohl fest angelegte als auch fluide Gestaltungen. Damit ist das Design nicht mehr nur auf eine Karte begrenzt und kann vom Designer vielseitig eingesetzt werden.

Den modernen „Glaslook“ erhält das Design durch die teiltransparente Unschärfe auf der gesamten Fläche der Karten. Abgerundete Kanten, eine schwächere Auflösung der Outline, und ein möglichst farblich prägnanter, aber ebenfalls stark unscharfer Hintergrund lassen so den Eindruck einer schwebenden Glasscheibe entstehen. Deutliche Farbverläufe als Untergrund können den räumlichen Eindruck noch zusätzlich verstärken.

Wireframe Tools

Um festzulegen, welche Elemente wo eingesetzt werden sollen, eignen sich Wireframe Tools. Mit ihnen kann die Navigation zwischen den Elementen auf einzelnen oder verschiedenen Screens einer Software oder Anwendungen im Web definiert werden. Mit zu den beliebtesten Anbietern gehören:

Miro

Dieses Web Tool zeichnet sich besonders durch seine einfache Anwendung per Drag-and-Drop aus. Zudem bietet es eine große Brainstorming-Leinwand, unterschiedliche Vorlagen, Toolkits, robuste Widgets, vorgefertigte Customer Journey-Karten, Roadmap -Planungen und vieles mehr. Die Anwendung ermöglicht auch die Zusammenarbeit mehrere Teammitglieder, in den unterschiedlichen Anwendungsbereichen.

Lucidchart

Lucidchart wird unteranderem von BP, L’Oréal und BMW verwendet. Das Tool vereinfacht die App-Entwicklung durch eine große Vorlagenbibliothek, Drag-and-Drop-Funktionen, Echtzeit-Zusammenarbeit, In-App-Chat, automatischer Synchronisierung und Speicherung.

Da das Tool im Web online verfügbar ist, sind keine Installationen oder Downloads erforderlich und die Anwendungen sind für jedes Betriebssystem frei zugänglich.

Sketch

Sketch steht im Web als Software zum Download zur Verfügung. Jedoch gibt es keine Windows Version der Software, sondern nur OS X.

Das Tool zeichnet sich dabei vor allem durch Schnelligkeit und Leistungsstärke im Bereich Zusammenarbeit aus. Sketch bietet pixelgenaue Präzision, vielfältige Plug-In-Optionen, Drag-and-Drop Funktion, Exportvoreinstellungen, Codeexporte und vieles mehr.

App Design – Mockup-Tools

Um Ideen und Entwürfe schon vor dem ersten Download zu visualisieren, empfehlen sich Mockup-Tools. Mit diesen Tools können Designer am Desktop per Drag-and-Drop sehen, wie der Prototyp auf einem mobilen Endgerät aussieht und so ihre Ideen evaluieren. Mit zu den beliebtesten Tools im Web gehören:

Placeit

Placeit ist ein browser-basierter Mockup Dienst des Website-Builders Breezi. Er überzeugt vor allem mit seiner hohen Qualität und weiten Spanne an Möglichkeiten. Per Drag-and-Drop können Bilder authentisch in die Produktbilder eingefügt werden. Zur Verfügung steht eine große Auswahl an Bilder von Geräten von Apple, Android, Nokia, Lenovo und vielen mehr, sowie Web Browsern von Windows und Apple.

App Design – Shotsnapp

Dieser Dienst ist besonders wegen seines smarten Designs und der qualitativ hochwertigen Präsentation überzeugen. Technisch haben Designer zudem die Möglichkeit Hintergründe, Farben und Schriftzüge individuell anzupassen, sowie Screenshots per Drag-and-Drop einzufügen.

Mockup Photos

Das Drag-and-Drop treue Tool setzt seines Fokus auf fotorealisitsche Mockups mit eingebundenen Screenshots. Mit über 200 Motiven vom Smartphone bis zum Desktop lassen sich so alle möglichen Previews erstellen.

Picapp

Picapp gehört zu den einfachsten Mockup-Diensten im Web. Per Drag-and-Drop werden Screenshots in den zuvor ausgewählten Geräteauschnitt eingefügt und gespeichert. Zur Verfügung stehen unteranderem Smartphone Modelle von Apple, Android, Google und LG und Tablets von Lenovo, Google und Apple.

Fazit

Allgemein gilt für das Design der App Deines Unternehmens ein einfaches Prinzip: Vermeide Chaos und sorge für klare Strukturen. Der User sollte in der Lage sein so schnell und unkompliziert wie möglich sein Ziel zu erreichen. Hierfür solltest Du die Two-Tap-Regel im Hinterkopf behalten. Die Anwender sollten nicht mehr als zwei Tapps brauchen, um ihr Ziel zu erreichen.

Auch, wenn Du die Vorlieben Deiner Zielgruppe im Blick behalten solltest, die Gestaltung Deines eigenen App Designs liegt ganz in Deiner Hand. Behalte Trends im Blick und lasse Deiner Kreativität dabei trotzdem freien Lauf. Probiere Dich aus und habe Spaß beim Erstellen von verschiedenen Designs. So findest Du das Konzept, das zu der App Deines Unternehmens passt.