Eine eigene Native Mobile App ent­wi­ckeln – Teil 3: Das Mobile-App-Design

Unsere Ar­ti­kel­rei­he über den Weg zur eigenen App be­han­del­te in den ersten beiden Teilen die Planung und die tech­ni­sche Umsetzung einer nativen mobilen Ap­pli­ka­ti­on. In diesem Teil geht es um das Design-Konzept der Anwendung. Hier geben wir Ihnen wertvolle Tipps, worauf Sie bei der Dar­stel­lung von App-Inhalten achten sollten.

Grund­sätz­lich spielt es dabei keine Rolle, ob man sich bei einer iOS- oder Android-App mit dem Design aus­ein­an­der­setzt – die we­sent­li­chen Richt­li­ni­en sind dieselben. Wenn Sie Ihre App designen, sollten Sie al­ler­dings nicht nur auf ein stimmiges Aussehen, sondern immer auch auf die App-Usability (Be­nut­zer­freund­lich­keit der Anwendung) achten. Diverse App-Design-Tools helfen hierbei.

Sobald Sie Ge­wiss­heit darüber haben, wie Sie Ihr App-Konzept auf tech­ni­scher Ebene umsetzen werden, steht Ihnen die Ge­stal­tung der gra­fi­schen Be­nut­zer­ober­flä­che bevor (auch grafische Be­nut­zer­schnitt­stel­le oder Graphical User Interface – kurz GUI – genannt). Die Be­nut­zer­ober­flä­che bildet das Herzstück des Mobile-App-Designs; schließ­lich prä­sen­tiert sich hier das komplette Er­schei­nungs­bild der Ap­pli­ka­ti­on. Folglich darf das GUI-Design als Be­stand­teil der App-Ent­wick­lung nicht un­ter­schätzt werden: Für viele Ent­wick­ler hat es denselben Stel­len­wert wie der Inhalt der Anwendung an sich. Denn selbst wenn eine App aufgrund her­aus­ra­gen­der Funk­tio­nen das Interesse vieler User weckt und zahlreich her­un­ter­ge­la­den wird, kann ein schlech­tes App-Design den Nutzen der Anwendung über­schat­ten und die User schnell ver­grau­len.

Das Mobile-App-Design kann als Über­be­griff für ver­schie­de­ne Sparten der GUI-Ge­stal­tung angesehen werden. Hierbei umfasst das Design einer Ap­pli­ka­ti­on weitaus mehr als nur Schrift­ar­ten und Farb­ge­bung – die komplette grafische Be­nut­zer­ober­flä­che inklusive ihrer Funk­tio­nen und Steu­er­ele­men­te zählt zum Mobile-App-Design. Dem­entspre­chend wichtig ist ein wohl­über­leg­ter Umgang mit allen gra­fi­schen Be­stand­tei­len der App. Vor allem die Position, Größe und Ge­stal­tung der An­wen­dungs­in­hal­te bestimmen die Be­dien­freund­lich­keit einer Ap­pli­ka­ti­on.

Mo­bil­ge­rä­te besitzen zwei Merkmale, die das GUI-Design stark be­ein­flus­sen: Zum einen variiert die Größe und Auflösung des Bild­schirms, auf dem die Be­nut­zer­ober­flä­che dar­ge­stellt wird, je nach Gerät stark. Zum anderen stellt die Touch­screen-Bedienung mobiler Apps gewisse Ansprüche an die Ge­stal­tung der gra­fi­schen Be­dien­ober­flä­che. Auch wenn diese Rah­men­be­din­gun­gen der App-Nutzung recht banal klingen – sie schlagen sich in jedem Ar­beits­ge­biet des Mobile-App-Designs nieder. Wir verraten Ihnen, wie Sie dies bei der Kon­zep­tio­nie­rung der Be­nut­zer­ober­flä­che be­rück­sich­ti­gen, und stellen Ihnen gängige Ge­stal­tungs­prin­zi­pi­en für das Layout und die Usability Ihrer App vor.

Mit dem Layout be­zeich­net man die optische Ge­stal­tung der App-Be­nut­zer­ober­flä­che und die Anordnung der Ap­pli­ka­ti­ons­in­hal­te. Für das Layout einer Native App können Sie auf ver­schie­de­ne Pakete (meist GUI- oder UI-Kits genannt) zu­rück­grei­fen, die vor­ge­fer­tig­te Elemente für die Be­nut­zer­ober­flä­che und Vorlagen für deren Plat­zie­rung und Struk­tu­rie­rung 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-In­ter­net­auf­tritt diverse GUI-Be­stand­tei­le einer App kostenlos zum Download bereit (etwa Templatesl und Icons). Apple bietet gleich­falls – wenn auch weniger um­fang­reich – einige Kom­po­nen­ten für das iOS-Layout über sein Developer-Web­an­ge­bot gratis an. Außerdem stellen manche Ent­wick­ler Ihre eigens zu­sam­men­ge­stell­ten GUI-Kits der Community zur freien Verfügung (z. B. auf de­sign­code.io für iOS oder auf sket­ch­app­sour­ces.com für Android). Der Gebrauch dieser Stan­dard­pa­ke­te 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 Be­schrän­kun­gen, eine aus­tausch­ba­re Ge­stal­tung und die Platt­form­ab­hän­gig­keit von Apps, die mit solchen Vorlagen erstellt werden.

Derartige Pakete und GUI-Kits für das Android- und iOS-App-Design ver­an­schau­li­chen gut, dass sich gewisse Standards für das Layout einer nativen mobilen App etabliert haben. Dazu gehören der Einsatz von Schrift­ar­ten, die Farb­ge­stal­tung sowie ver­schie­de­ne Design-Richt­li­ni­en und App-Layout-Varianten, die der Vielfalt an Dis­play­grö­ßen und Bild­schirm­auf­lö­sun­gen Rechnung tragen.

Jede Ap­pli­ka­ti­on be­inhal­tet Text. Selbst wenn Bilder und Symbole das Layout do­mi­nie­ren, benötigen einige Segmente der App zwangs­läu­fig eine text­ba­sier­te Umsetzung – etwa das Impressum oder die Nut­zungs­be­din­gun­gen. Aber vor allem bei Elementen, die das Aussehen der Be­nut­zer­ober­flä­che maß­geb­lich mit­be­stim­men (Menüs, Artikel usw.), ist der Einsatz einer passenden Schrift­art von Bedeutung. Die Aus­ge­stal­tung von Texten ist ein ele­men­ta­rer Be­stand­teil des App-Layouts.

Als Schrift­art einer Ap­pli­ka­ti­on kann man ganz einfach auf die sys­tem­ei­ge­ne Ty­po­gra­fie der App-Platt­for­men zu­rück­grei­fen. Bei iOS ist dies seit iOS 9 die Schrift­art „San Francisco“ – vormals waren „Helvetica“ und „Helvetica Neue“ die System-Fonts von iOS-An­wen­dun­gen. Android nutzt seit der Version 4.0 „Roboto“ als Sys­tem­schrift. Viele App-Ent­wick­ler setzen aus gutem Grund bei der Schrift­art auf die stan­dar­di­sier­ten Fonts der Android- bzw. iOS-Apps: Das Design der Schrift ist optimal auf das Be­triebs­sys­tem ab­ge­stimmt und platz­spa­rend gestaltet. Außerdem lassen sich die Sys­tem­schrif­ten sofort nutzen – andere Fonts müssen erst ein­ge­rich­tet werden.

Al­ler­dings kann sich auch die Im­ple­men­tie­rung einer anderen Schrift lohnen – besonders wenn Ihre App mit viel Text aufwartet und Sie sich von der Kon­kur­renz ty­po­gra­fisch abheben möchten. Sie können auch diverse Fonts gratis aus dem Internet her­un­ter­la­den. Welche Schrift­art die richtige für Ihre Ap­pli­ka­ti­on ist, steht häufig in Zu­sam­men­hang mit dem Thema und den Inhalten der App. Wenn das Konzept eher künst­le­ri­scher oder spie­le­ri­scher Natur ist, kann man durchaus eine elegant oder ex­zen­trisch wirkende Ty­po­gra­fie verwenden. Al­ler­dings ist hierbei Vorsicht geboten: Besonders wenn Ihre App viele Text­in­hal­te besitzt, sollten Sie unbedingt auf eine gute Le­ser­lich­keit der Schrift achten. Nicht umsonst sind die Zeichen vieler Standard-Fonts wie „Open Sans“ oder „Lato“ eher schmal gestaltet und se­ri­fen­los, wodurch sie sich für viele An­wen­dungs­ge­bie­te eignen.

Bei der Farb­ge­bung des Layouts sollten Sie unbedingt darauf achten, dass Ihre App über ein gutes Kon­trast­ver­hält­nis verfügt. Da Apps häufig unterwegs und unter schwie­ri­gen Licht­ver­hält­nis­sen wie starkem Son­nen­licht genutzt werden, er­leich­tert ein aus­ge­präg­ter Kontrast die Le­ser­lich­keit der Inhalte. Welche Farben Sie verwenden, kann vom Thema und der Ziel­grup­pe der Anwendung abhängen. Falls die Ap­pli­ka­ti­on mit einem Un­ter­neh­men, Projekt oder ähnlichem in Ver­bin­dung steht, das bereits ein kon­stan­tes Farb­sche­ma besitzt, sollte man sich nach diesem im Sinne der Corporate Identity richten. Neben der wie­der­keh­ren­den Farb­ge­stal­tung drückt auch die Ver­wen­dung eines Logos und einer immer wie­der­keh­ren­den Haus­schrift (Corporate Font) die Zu­sam­men­ge­hö­rig­keit ver­schie­de­ner Angebote aus und schafft einen Wie­der­erken­nungs­wert.

Generell sollten Sie beim GUI-Design si­cher­stel­len, dass alle Elemente ein­heit­lich for­ma­tiert sind. Weitere Tipps zum Er­schei­nungs­bild der Be­nut­zer­ober­flä­che finden Sie in unserem Beitrag über Corporate Design und Farb­wir­kung im Webdesign. Die dort vor­ge­stell­ten Hinweise und Richt­li­ni­en lassen sich ohne Weiteres auf das App-Design über­tra­gen.

Das Display der App-User bestimmt im Endeffekt immer, wie viel Platz für die Dar­stel­lung der Inhalte im Ein­zel­fall vorhanden ist. Bereits bei Smart­phones lassen sich er­heb­li­che Un­ter­schie­de in der Bild­schirm­grö­ße und -auflösung ausmachen – noch deut­li­cher 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 au­to­ma­tisch an die Bild­schirm­grö­ße an, indem die Ap­pli­ka­ti­ons­ele­men­te passend zur Be­nut­zer­ober­flä­che skaliert werden – das App-Layout als solches bleibt dabei aber un­ver­än­dert, was schnell zu einer un­güns­ti­gen Abbildung der An­wen­dungs­in­hal­te führt.

Bei­spiels­wei­se ist ein Layout, das optimal an das kleine Display eines iPhones angepasst wurde, nur in seltenen Fällen auch für den we­sent­lich größeren Bild­schirm eines iPads geeignet – denn ohne eine Anpassung an ein gängiges Tablet-Format kann es z. B. passieren, dass die Buttons auf dem iPad un­ver­hält­nis­mä­ßig groß dar­ge­stellt 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 ge­wöhn­lich über ver­hält­nis­mä­ßig kleinere Buttons und nutzt den dadurch ge­won­ne­nen Platz für die Dar­stel­lung weiterer Inhalte.

Mehrere Layout-Aus­füh­run­gen, die für bestimmte Display-Auf­lö­sun­gen und -größen her­ge­stellt werden, sind im pro­fes­sio­nel­len 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. Al­ler­dings bedeutet die Ent­wick­lung un­ter­schied­li­cher App-Versionen selbst­ver­ständ­lich auch einen Mehr­auf­wand.

Nicht zu vergessen sind zudem die zwei Mög­lich­kei­ten bei der Aus­rich­tung eines Smart­phones oder Tablets: Wenn man vom Hoch­for­mat ins Quer­for­mat wechselt, sollte sich die Ansicht der App-Inhalte ent­spre­chend anpassen. Auch hierfür ist ein weiteres Layout vonnöten. Ob und wie viele ver­schie­de­ne App-Layouts man für eine Ap­pli­ka­ti­on anfertigt, hängt prin­zi­pi­ell vom je­wei­li­gen Projekt ab. Bedenken Sie bei Ihrer eigenen App aber stets, dass unter einer un­güns­ti­gen Layout-For­ma­tie­rung schnell die Usability leidet.

Als Vor­aus­set­zung für eine hohe App-Usability wird gemeinhin ein in­tui­ti­ves App-Design genannt. Hiermit ist vor allem eine einfache, selbst­er­klä­ren­de Bedienung gemeint, die sich an eta­blier­ten Mustern und Struk­tu­ren der App-Bedienung ori­en­tiert. Die Ent­schei­dung, ob die Bedienung einer Ap­pli­ka­ti­on be­nut­zer­freund­lich 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 Nut­zungs­vor­lie­ben und Er­war­tungs­hal­tun­gen Ihrer Ziel­grup­pe kennen und sich nach diesen richten. Es geht nicht darum, Ihren Usern zu zeigen, über welche App-Design-Fä­hig­kei­ten Sie verfügen – vielmehr sollten Sie der App-Ziel­grup­pe das best­mög­li­che Nut­zungs­er­leb­nis bieten.

Be­nut­zer­freund­lich­keit wird oft über ein klares, auf­ge­räum­tes und ein­gän­gi­ges App-Layout erreicht. Ins­be­son­de­re bei kleinen Smart­phone-Bild­schir­men 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 un­ter­brin­gen. Die Anwendung darf nicht überladen wirken. Re­du­zie­ren Sie die App-Inhalte und Funk­tio­nen auf das Nötigste – dies er­mög­licht Ihnen, alles aus­rei­chend groß zu gestalten und auch Frei­flä­chen an­zu­bie­ten. Genügend Freiräume innerhalb einer App lassen die Screens har­mo­ni­scher wirken.

Das Menü Ihrer App muss prominent platziert und für die Nutzer sofort er­kennt­lich sein. Meist werden in Ap­pli­ka­tio­nen Drop-down-Menüs verwendet, da diese eine besonders platz­spa­ren­de Lösung dar­stel­len. Aus­ge­klappt darf die Auf­lis­tung der einzelnen Me­nü­punk­te die Nutzer nicht über­for­dern: Es kommt auf eine über­sicht­li­che und ziel­füh­ren­de Me­nü­füh­rung an. Wenn Ihre App über viele ver­schie­de­ne Features verfügt, die jeweils einen eigenen Menüpunkt benötigen, sollten Sie im Hauptmenü allein die wich­tigs­ten Funk­tio­nen der App abbilden und über ein Untermenü die rest­li­chen Funk­tio­nen zu­gäng­lich machen.

Die Abbildung der einzelnen Me­nü­punk­te sagt al­ler­dings noch nichts über die zu­grun­de­lie­gen­de 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 Un­ter­me­nüs wirklich so nah bei­ein­an­der liegen müssen, ist si­cher­lich von jeder einzelnen App abhängig – aber die Richt­li­nie, die Wege in Ihrer App so kurz wie möglich zu halten, sollten Sie definitiv be­her­zi­gen. Zu komplexe Me­nü­struk­tu­ren verwirren Ihre Nutzer und führen dazu, dass diese innerhalb der App die Ori­en­tie­rung verlieren.

Ein weiterer wichtiger Faktor der App-Usability ist die be­nut­zer­freund­li­che Umsetzung der Be­dien­ele­men­te. Ins­be­son­de­re die Größe, Anordnung und das Design der Buttons innerhalb der Be­nut­zer­ober­flä­che ist hier von Bedeutung. Achten Sie darauf, dass alle in­ter­ak­ti­ven Elemente (Drop-down-Menü, Buttons, Links usw.) stets als solche er­kennt­lich und pro­blem­los an­zu­tip­pen sind. Dabei sollten Sie ebenfalls bedenken, dass es auch Nutzern mit breiteren Fingern möglich sein sollte, die Buttons ohne Schwie­rig­kei­ten zu nutzen. Zu kleine und zu schlecht po­si­tio­nier­te Buttons führen zum Vertippen und frus­trie­ren so die User Ihrer App.

Darüber hinaus ist ein gra­fi­sches Feedback bei der Bedienung in­ter­ak­ti­ver Elemente wün­schens­wert: 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 aus­ge­führt wird. Dies fördert die Trans­pa­renz von App-Prozessen, etwa Such- oder La­de­vor­gän­gen.

Im Gegensatz zu einer Web-App oder Hybrid-App lässt sich das Design einer Native App weit­ge­hend an die zu­grun­de­lie­gen­de 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 ver­schie­de­nen Layouts ex­pe­ri­men­tie­ren möchten, helfen Ihnen spezielle Programme – bei der Aus­ar­bei­tung des finalen Mobile-App-Designs können Sie auf Tools un­ter­schied­li­cher Anbieter zu­rück­grei­fen. 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 Bild­da­tei­en fügt man dann in ein App-Design-Tool ein, verknüpft sie mit­ein­an­der und fügt sie so zu einem Prototyp der Ap­pli­ka­ti­on (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 Ver­knüp­fung ver­schie­de­ner Screens un­ter­ein­an­der und das Ein­pfle­gen von In­ter­ak­tio­nen wird die App-Benutzung simuliert. Den Prototyp können Sie an­schlie­ßend auf einem Smart­phone oder Tablet testen, wo auch die App-Bedienung per Wischen und mit anderen typischen Gesten sehr gut nach­zu­emp­fin­den ist.

Mithilfe der Tools lassen sich so App-Mock-ups komplett ohne Pro­gram­mier­kennt­nis­se ent­wi­ckeln. Mit ein bisschen Ar­beits­auf­wand verhält sich der Prototyp auch ver­blüf­fend ähnlich zur Funk­ti­ons­wei­se einer echten App. Drei der be­kann­tes­ten und besten Design-Tools hierfür stellen wir im Kurz­por­trät vor.

Bei InVision handelt es sich um eine Anwendung für den pro­fes­sio­nel­len Einsatz. Das Tool wird auch in einer kos­ten­lo­sen Variante angeboten, in der man al­ler­dings auf einige Funk­tio­nen ver­zich­ten muss. Über das Einfügen und Anpassen von Design-Vorlagen können Sie relativ schnell und un­kom­pli­ziert ein kom­plet­tes App-Layout als Prototyp erstellen und es auf einem mobilen Endgerät aus­pro­bie­ren. Dabei ist es durch diverse Ein­stel­lun­gen möglich, die Bedienung des App-Prototyps sehr ähnlich zu der einer richtigen App zu gestalten. Eine Be­son­der­heit des Tools ist die gelungene Umsetzung der Team­ar­beit-Funk­tio­nen. Hier haben nicht nur mehrere Nutzer Zugriff auf die Mock-ups, sondern können direkt im Prototyp Mar­kie­run­gen setzen und sich per Kom­men­tar­funk­ti­on zum App-Design aus­tau­schen. Viele namhafte Un­ter­neh­men wie IBM, Twitter, Netflix oder Sound­cloud haben bereits InVision für Ihre Design-Pro­to­ty­pen verwendet.

Falls Sie keine eigenen Design-Vorlagen erstellt haben, bietet Ihnen Fluid UI immerhin ver­schie­de­ne Samm­lun­gen von vor­ge­fer­tig­ten Screens an, die Sie in Ihren Pro­to­ty­pen in­te­grie­ren können. Aber auch sonst muss sich das Programm nicht vor der Kon­kur­renz ver­ste­cken – es bietet einen ähnlich großen Funk­ti­ons­um­fang wie InVision.

Die kos­ten­freie Version erlaubt jedoch nur das Anlegen eines App-Prototyps mit maximal 10 Screens. Dies wird meist nicht für einen voll­um­fäng­li­chen Test der Anwendung aus­rei­chen, aber immerhin können Sie so die Funk­tio­nen 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 Vor­stel­lung des App-Layouts anderen Kollegen oder möglichen Sponsoren na­he­zu­brin­gen, bieten sich die drei vor­ge­stell­ten Mobile-App-Design-Tools an – es gibt aber noch viele weitere Al­ter­na­tiv­pro­gram­me. Haben Sie das optimale Design gefunden, dürfen Sie nicht außer Acht lassen, dass es auch auf ver­schie­den große Bild­schir­me und Auf­lö­sun­gen über­trag­bar ist. Daher sollten Sie unbedingt ver­schie­de­ne Versionen der App erstellen, in denen Sie die Anordnung der Inhalte an un­ter­schied­li­che Display-Formate anpassen. Wenn das Mobile-App-Design und auch die Ent­wick­lung der Ap­pli­ka­ti­on ab­ge­schlos­sen sind, steht Ihnen noch ein weiterer Mei­len­stein bevor, ehe Sie sie in einem App-Store anbieten können: das Testen der App. Deshalb be­schäf­tigt sich der nächste Beitrag unserer Ar­ti­kel­rei­he mit dem App-Testing.