Eine eigene Native Mobile App entwickeln – Teil 3: Das Mobile-App-Design

Unsere Artikelreihe über den Weg zur eigenen App behandelte in den ersten beiden Teilen die Planung und die technische Umsetzung einer nativen mobilen Applikation. In diesem Teil geht es um das Design-Konzept der Anwendung. Hier geben wir Ihnen wertvolle Tipps, worauf Sie bei der Darstellung von App-Inhalten achten sollten.

Grundsätzlich spielt es dabei keine Rolle, ob man sich bei einer iOS- oder Android-App mit dem Design auseinandersetzt – die wesentlichen Richtlinien sind dieselben. Wenn Sie Ihre App designen, sollten Sie allerdings nicht nur auf ein stimmiges Aussehen, sondern immer auch auf die App-Usability (Benutzerfreundlichkeit der Anwendung) achten. Diverse App-Design-Tools helfen hierbei.

Sobald Sie Gewissheit darüber haben, wie Sie Ihr App-Konzept auf technischer Ebene umsetzen werden, steht Ihnen die Gestaltung der grafischen Benutzeroberfläche bevor (auch grafische Benutzerschnittstelle oder Graphical User Interface – kurz GUI – genannt). Die Benutzeroberfläche bildet das Herzstück des Mobile-App-Designs; schließlich präsentiert sich hier das komplette Erscheinungsbild der Applikation. Folglich darf das GUI-Design als Bestandteil der App-Entwicklung nicht unterschätzt werden: Für viele Entwickler hat es denselben Stellenwert wie der Inhalt der Anwendung an sich. Denn selbst wenn eine App aufgrund herausragender Funktionen das Interesse vieler User weckt und zahlreich heruntergeladen wird, kann ein schlechtes App-Design den Nutzen der Anwendung überschatten und die User schnell vergraulen.

Das Mobile-App-Design kann als Überbegriff für verschiedene Sparten der GUI-Gestaltung angesehen werden. Hierbei umfasst das Design einer Applikation weitaus mehr als nur Schriftarten und Farbgebung – die komplette grafische Benutzeroberfläche inklusive ihrer Funktionen und Steuerelemente zählt zum Mobile-App-Design. Dementsprechend wichtig ist ein wohlüberlegter Umgang mit allen grafischen Bestandteilen der App. Vor allem die Position, Größe und Gestaltung der Anwendungsinhalte bestimmen die Bedienfreundlichkeit einer Applikation.

Mobilgeräte besitzen zwei Merkmale, die das GUI-Design stark beeinflussen: Zum einen variiert die Größe und Auflösung des Bildschirms, auf dem die Benutzeroberfläche dargestellt wird, je nach Gerät stark. Zum anderen stellt die Touchscreen-Bedienung mobiler Apps gewisse Ansprüche an die Gestaltung der grafischen Bedienoberfläche. Auch wenn diese Rahmenbedingungen der App-Nutzung recht banal klingen – sie schlagen sich in jedem Arbeitsgebiet des Mobile-App-Designs nieder. Wir verraten Ihnen, wie Sie dies bei der Konzeptionierung der Benutzeroberfläche berücksichtigen, und stellen Ihnen gängige Gestaltungsprinzipien für das Layout und die Usability Ihrer App vor.

Mit dem Layout bezeichnet man die optische Gestaltung der App-Benutzeroberfläche und die Anordnung der Applikationsinhalte. Für das Layout einer Native App können Sie auf verschiedene Pakete (meist GUI- oder UI-Kits genannt) zurückgreifen, die vorgefertigte Elemente für die Benutzeroberfläche und Vorlagen für deren Platzierung und Strukturierung enthalten. Sie umfassen oftmals Icons, Templates, Widgets, Farben usw. – einige von Ihnen sind auch kostenlos im Web verfügbar.

Google stellt auf seinem Material-Design-Internetauftritt diverse GUI-Bestandteile einer App kostenlos zum Download bereit (etwa Templatesl und Icons). Apple bietet gleichfalls – wenn auch weniger umfangreich – einige Komponenten für das iOS-Layout über sein Developer-Webangebot gratis an. Außerdem stellen manche Entwickler Ihre eigens zusammengestellten GUI-Kits der Community zur freien Verfügung (z. B. auf designcode.io für iOS oder auf sketchappsources.com für Android). Der Gebrauch dieser Standardpakete hat zum Vorteil, dass sich mit wenig Aufwand stimmige Designs erstellen lassen, die zudem einfach in der Bedienung und dem Benutzer bereits vertraut sind. Die Kehrseite der Medaille sind diverse kreative Beschränkungen, eine austauschbare Gestaltung und die Plattformabhängigkeit von Apps, die mit solchen Vorlagen erstellt werden.

Derartige Pakete und GUI-Kits für das Android- und iOS-App-Design veranschaulichen gut, dass sich gewisse Standards für das Layout einer nativen mobilen App etabliert haben. Dazu gehören der Einsatz von Schriftarten, die Farbgestaltung sowie verschiedene Design-Richtlinien und App-Layout-Varianten, die der Vielfalt an Displaygrößen und Bildschirmauflösungen Rechnung tragen.

Jede Applikation beinhaltet Text. Selbst wenn Bilder und Symbole das Layout dominieren, benötigen einige Segmente der App zwangsläufig eine textbasierte Umsetzung – etwa das Impressum oder die Nutzungsbedingungen. Aber vor allem bei Elementen, die das Aussehen der Benutzeroberfläche maßgeblich mitbestimmen (Menüs, Artikel usw.), ist der Einsatz einer passenden Schriftart von Bedeutung. Die Ausgestaltung von Texten ist ein elementarer Bestandteil des App-Layouts.

Als Schriftart einer Applikation kann man ganz einfach auf die systemeigene Typografie der App-Plattformen zurückgreifen. Bei iOS ist dies seit iOS 9 die Schriftart „San Francisco“ – vormals waren „Helvetica“ und „Helvetica Neue“ die System-Fonts von iOS-Anwendungen. Android nutzt seit der Version 4.0 „Roboto“ als Systemschrift. Viele App-Entwickler setzen aus gutem Grund bei der Schriftart auf die standardisierten Fonts der Android- bzw. iOS-Apps: Das Design der Schrift ist optimal auf das Betriebssystem abgestimmt und platzsparend gestaltet. Außerdem lassen sich die Systemschriften sofort nutzen – andere Fonts müssen erst eingerichtet werden.

Allerdings kann sich auch die Implementierung einer anderen Schrift lohnen – besonders wenn Ihre App mit viel Text aufwartet und Sie sich von der Konkurrenz typografisch abheben möchten. Sie können auch diverse Fonts gratis aus dem Internet herunterladen. Welche Schriftart die richtige für Ihre Applikation ist, steht häufig in Zusammenhang mit dem Thema und den Inhalten der App. Wenn das Konzept eher künstlerischer oder spielerischer Natur ist, kann man durchaus eine elegant oder exzentrisch wirkende Typografie verwenden. Allerdings ist hierbei Vorsicht geboten: Besonders wenn Ihre App viele Textinhalte besitzt, sollten Sie unbedingt auf eine gute Leserlichkeit der Schrift achten. Nicht umsonst sind die Zeichen vieler Standard-Fonts wie „Open Sans“ oder „Lato“ eher schmal gestaltet und serifenlos, wodurch sie sich für viele Anwendungsgebiete eignen.

Bei der Farbgebung des Layouts sollten Sie unbedingt darauf achten, dass Ihre App über ein gutes Kontrastverhältnis verfügt. Da Apps häufig unterwegs und unter schwierigen Lichtverhältnissen wie starkem Sonnenlicht genutzt werden, erleichtert ein ausgeprägter Kontrast die Leserlichkeit der Inhalte. Welche Farben Sie verwenden, kann vom Thema und der Zielgruppe der Anwendung abhängen. Falls die Applikation mit einem Unternehmen, Projekt oder ähnlichem in Verbindung steht, das bereits ein konstantes Farbschema besitzt, sollte man sich nach diesem im Sinne der Corporate Identity richten. Neben der wiederkehrenden Farbgestaltung drückt auch die Verwendung eines Logos und einer immer wiederkehrenden Hausschrift (Corporate Font) die Zusammengehörigkeit verschiedener Angebote aus und schafft einen Wiedererkennungswert.

Generell sollten Sie beim GUI-Design sicherstellen, dass alle Elemente einheitlich formatiert sind. Weitere Tipps zum Erscheinungsbild der Benutzeroberfläche finden Sie in unserem Beitrag über Corporate Design und Farbwirkung im Webdesign. Die dort vorgestellten Hinweise und Richtlinien lassen sich ohne Weiteres auf das App-Design übertragen.

Das Display der App-User bestimmt im Endeffekt immer, wie viel Platz für die Darstellung der Inhalte im Einzelfall vorhanden ist. Bereits bei Smartphones lassen sich erhebliche Unterschiede in der Bildschirmgröße und -auflösung ausmachen – noch deutlicher wird das Spektrum der Display-Formate, wenn man sich die Vielfalt der Tablets vor Augen führt. Zwar passt sich bei einer iOS- und Android-App das Design einer Anwendung immer automatisch an die Bildschirmgröße an, indem die Applikationselemente passend zur Benutzeroberfläche skaliert werden – das App-Layout als solches bleibt dabei aber unverändert, was schnell zu einer ungünstigen Abbildung der Anwendungsinhalte führt.

Beispielsweise ist ein Layout, das optimal an das kleine Display eines iPhones angepasst wurde, nur in seltenen Fällen auch für den wesentlich größeren Bildschirm eines iPads geeignet – denn ohne eine Anpassung an ein gängiges Tablet-Format kann es z. B. passieren, dass die Buttons auf dem iPad unverhältnismäßig groß dargestellt werden. In aller Regel ist es deshalb besser, wenn man eine spezielle Tablet-Variante des App-Layouts erstellt. Solch ein Tablet-Layout verfügt für gewöhnlich über verhältnismäßig kleinere Buttons und nutzt den dadurch gewonnenen Platz für die Darstellung weiterer Inhalte.

Mehrere Layout-Ausführungen, die für bestimmte Display-Auflösungen und -größen hergestellt werden, sind im professionellen Mobile-App-Design beinahe schon ein Muss: Viele Apps verfügen über drei oder mehr Varianten – zumindest wenn sie sich auf dem Markt etabliert haben oder dies anstreben. Allerdings bedeutet die Entwicklung unterschiedlicher App-Versionen selbstverständlich auch einen Mehraufwand.

Nicht zu vergessen sind zudem die zwei Möglichkeiten bei der Ausrichtung eines Smartphones oder Tablets: Wenn man vom Hochformat ins Querformat wechselt, sollte sich die Ansicht der App-Inhalte entsprechend anpassen. Auch hierfür ist ein weiteres Layout vonnöten. Ob und wie viele verschiedene App-Layouts man für eine Applikation anfertigt, hängt prinzipiell vom jeweiligen Projekt ab. Bedenken Sie bei Ihrer eigenen App aber stets, dass unter einer ungünstigen Layout-Formatierung schnell die Usability leidet.

Als Voraussetzung für eine hohe App-Usability wird gemeinhin ein intuitives App-Design genannt. Hiermit ist vor allem eine einfache, selbsterklärendeBedienung gemeint, die sich an etablierten Mustern und Strukturen der App-Bedienung orientiert. Die Entscheidung, ob die Bedienung einer Applikation benutzerfreundlich ist oder nicht, liegt in letzter Instanz immer bei den Nutzern der App. Deshalb ist es umso wichtiger, dass Sie beim Mobile-App-Design die Nutzungsvorlieben und Erwartungshaltungen Ihrer Zielgruppe kennen und sich nach diesen richten. Es geht nicht darum, Ihren Usern zu zeigen, über welche App-Design-Fähigkeiten Sie verfügen – vielmehr sollten Sie der App-Zielgruppe das bestmögliche Nutzungserlebnis bieten.

Benutzerfreundlichkeit wird oft über ein klares, aufgeräumtes und eingängiges App-Layout erreicht. Insbesondere bei kleinen Smartphone-Bildschirmen steht Ihnen nicht viel Platz zur Verfügung. Gehen Sie deshalb behutsam mit der Menge der Inhalte um, die Sie in einem Screen Ihrer App unterbringen. Die Anwendung darf nicht überladen wirken. Reduzieren Sie die App-Inhalte und Funktionen auf das Nötigste – dies ermöglicht Ihnen, alles ausreichend groß zu gestalten und auch Freiflächen anzubieten. Genügend Freiräume innerhalb einer App lassen die Screens harmonischer wirken.

Das Menü Ihrer App muss prominent platziert und für die Nutzer sofort erkenntlich sein. Meist werden in Applikationen Drop-down-Menüs verwendet, da diese eine besonders platzsparende Lösung darstellen. Ausgeklappt darf die Auflistung der einzelnen Menüpunkte die Nutzer nicht überfordern: Es kommt auf eine übersichtliche und zielführende Menüführung an. Wenn Ihre App über viele verschiedene Features verfügt, die jeweils einen eigenen Menüpunkt benötigen, sollten Sie im Hauptmenü allein die wichtigsten Funktionen der App abbilden und über ein Untermenü die restlichen Funktionen zugänglich machen.

Die Abbildung der einzelnen Menüpunkte sagt allerdings noch nichts über die zugrundeliegende Struktur des Menüs aus. In Ihrer App sollten Sie unbedingt lange Tippwege vermeiden. So mancher Experte rät, dass man am besten mit nur zweimal tippen alle Bereiche einer App erreichen sollte. Ob alle Untermenüs wirklich so nah beieinander liegen müssen, ist sicherlich von jeder einzelnen App abhängig – aber die Richtlinie, die Wege in Ihrer App so kurz wie möglich zu halten, sollten Sie definitiv beherzigen. Zu komplexe Menüstrukturen verwirren Ihre Nutzer und führen dazu, dass diese innerhalb der App die Orientierung verlieren.

Ein weiterer wichtiger Faktor der App-Usability ist die benutzerfreundliche Umsetzung der Bedienelemente. Insbesondere die Größe, Anordnung und das Design der Buttons innerhalb der Benutzeroberfläche ist hier von Bedeutung. Achten Sie darauf, dass alle interaktiven Elemente (Drop-down-Menü, Buttons, Links usw.) stets als solche erkenntlich und problemlos anzutippen sind. Dabei sollten Sie ebenfalls bedenken, dass es auch Nutzern mit breiteren Fingern möglich sein sollte, die Buttons ohne Schwierigkeiten zu nutzen. Zu kleine und zu schlecht positionierte Buttons führen zum Vertippen und frustrieren so die User Ihrer App.

Darüber hinaus ist ein grafisches Feedback bei der Bedienung interaktiver Elemente wünschenswert: Vor allem bei Aktionen, die eine längere Ladezeit benötigen, sollte Ihre App den Usern über ein Symbol oder eine Animation zeigen, dass der Prozess momentan ausgeführt wird. Dies fördert die Transparenz von App-Prozessen, etwa Such- oder Ladevorgängen.

Im Gegensatz zu einer Web-App oder Hybrid-App lässt sich das Design einer Native App weitgehend an die zugrundeliegende iOS- oder Android-Plattform anpassen. Aus diesem Grund kann man nativen mobilen Apps ein besseres „Look and Feel“ verleihen, was sich besonders in der Usability positiv bemerkbar macht.

Wenn Sie mit verschiedenen Layouts experimentieren möchten, helfen Ihnen spezielle Programme – bei der Ausarbeitung des finalen Mobile-App-Designs können Sie auf Tools unterschiedlicher Anbieter zurückgreifen. Es ist dabei von Vorteil, digitale Design-Vorlagen der einzelnen App-Screens zu besitzen, die man mit einem Programm wie Photoshop oder Sketch erstellen kann. Die Bilddateien fügt man dann in ein App-Design-Tool ein, verknüpft sie miteinander und fügt sie so zu einem Prototypder Applikation (auch Mock-up genannt) zusammen.

Die Bedienung der Tools ist meist äußerst einfach gehalten und erfolgt via Drag-and-Drop in einem WYSIWYG-Editor. Durch die Verknüpfung verschiedener Screens untereinander und das Einpflegen von Interaktionen wird die App-Benutzung simuliert. Den Prototyp können Sie anschließend auf einem Smartphone oder Tablet testen, wo auch die App-Bedienung per Wischen und mit anderen typischen Gesten sehr gut nachzuempfinden ist.

Mithilfe der Tools lassen sich so App-Mock-ups komplett ohne Programmierkenntnisse entwickeln. Mit ein bisschen Arbeitsaufwand verhält sich der Prototyp auch verblüffend ähnlich zur Funktionsweise einer echten App. Drei der bekanntesten und besten Design-Tools hierfür stellen wir im Kurzporträt vor.

Bei InVision handelt es sich um eine Anwendung für den professionellen Einsatz. Das Tool wird auch in einer kostenlosen Variante angeboten, in der man allerdings auf einige Funktionen verzichten muss. Über das Einfügen und Anpassen von Design-Vorlagen können Sie relativ schnell und unkompliziert ein komplettes App-Layout als Prototyp erstellen und es auf einem mobilen Endgerät ausprobieren. Dabei ist es durch diverse Einstellungen möglich, die Bedienung des App-Prototyps sehr ähnlich zu der einer richtigen App zu gestalten.

Eine Besonderheit des Tools ist die gelungene Umsetzung der Teamarbeit-Funktionen. Hier haben nicht nur mehrere Nutzer Zugriff auf die Mock-ups, sondern können direkt im Prototyp Markierungen setzen und sich per Kommentarfunktion zum App-Design austauschen. Viele namhafte Unternehmen wie IBM, Twitter, Netflix oder Soundcloud haben bereits InVision für Ihre Design-Prototypen verwendet.

Auch Pixate ist ein Design-Programm, das in der Basisversion gratis heruntergeladen werden kann. Das App-Design-Tool bietet sich aufgrund seiner vielen Features besonders für App-Prototypen an, die mit komplexen Animationen ausgestattet werden sollen.

Pixate wurde im Juli 2015 von Google gekauft. Seitdem ist die Standard-Version des Programms kostenlos. Auch am Aufbau des Tools hat sich einiges geändert. Die Nutzer können mittlerweile die grundlegenden Funktionen des Programms recht intuitiv und schnell erlernen. Außerdem bieten zahlreiche Dokumentationen und Tutorials eine Menge weiterführendes Wissen für fortgeschrittene Nutzer.

Falls Sie keine eigenen Design-Vorlagen erstellt haben, bietet Ihnen Fluid UI immerhin verschiedene Sammlungen von vorgefertigten Screens an, die Sie in Ihren Prototypen integrieren können. Aber auch sonst muss sich das Programm nicht vor der Konkurrenz verstecken – es bietet einen ähnlich großen Funktionsumfang wie InVision und Pixate.

Die kostenfreie Version erlaubt jedoch nur das Anlegen eines App-Prototyps mit maximal 10 Screens. Dies wird meist nicht für einen vollumfänglichen Test der Anwendung ausreichen, aber immerhin können Sie so die Funktionen und die Bedienung des App-Design-Tools solange wie nötig gratis testen.

Beim Mobile-App-Design müssen Sie an viele Details denken. Um Ihre Vorstellung des App-Layouts anderen Kollegen oder möglichen Sponsoren nahezubringen, bieten sich die drei vorgestellten Mobile-App-Design-Tools an – es gibt aber noch viele weitere Alternativprogramme. Haben Sie das optimale Design gefunden, dürfen Sie nicht außer Acht lassen, dass es auch auf verschieden große Bildschirme und Auflösungen übertragbar ist. Daher sollten Sie unbedingt verschiedene Versionen der App erstellen, in denen Sie die Anordnung der Inhalte an unterschiedliche Display-Formate anpassen.

Wenn das Mobile-App-Design und auch die Entwicklung der Applikation abgeschlossen sind, steht Ihnen noch ein weiterer Meilenstein bevor, ehe Sie sie in einem App-Store anbieten können: das Testen der App. Deshalb beschäftigt sich der nächste Beitrag unserer Artikelreihe mit dem App-Testing.