Bildschirme sind für Apps das, was Organe für den menschlichen Körper sind.
Jede Komponente ist für sich genommen nutzlos, aber in der richtigen Kombination können sie etwas wirklich Außergewöhnliches bewirken.
Im Gegensatz zum Körper können Apps jedoch aus verschiedenen Kombinationen von Bildschirmen bestehen.
Einige sind universell (wie der Startbildschirm), andere sind spezieller (wie der Audio-Player-Bildschirm).
Als Entwickler ist das Kennenlernen dieser Bildschirme der erste Schritt zur Entwicklung einer fantastischen App. Gehen wir also kurz die gängigsten davon durch.
Table of Contents
Anmeldebildschirm
Der Anmeldebildschirm ist die primäre Möglichkeit für Benutzer, sich bei ihrem App-Konto anzumelden.
Auf den ersten Blick scheint es ein trivialer Bildschirm zu sein, deshalb neigen viele Entwickler dazu, ihn zu übersehen. Aber die Bedeutung des Anmeldebildschirms kann nicht unterschätzt werden.
Wie Sie feststellen werden, bietet die Hubspot-App im Vorfeld zwei Optionen: Entweder Sie melden sich bei einem bestehenden Konto an oder Sie melden sich für ein Konto an.
Dies ist ein besserer Ansatz als der Einstieg mit „Sie haben noch kein Konto? Erstellen Sie eins!“ Es wirkt nicht so aufdringlich und schreckt daher die Nutzer nicht so sehr ab.
Sie werden auch feststellen, dass die App mehrere Möglichkeiten bietet, sich anzumelden oder einzuloggen, z. B. über vorhandene Social-Media-Konten.
Dies vereinfacht die Erstellung eines Kontos erheblich, da sie mit nur einem einzigen Klick möglich ist, was die Reibung und die Absprungrate verringert.
Ein weiterer wichtiger Teil der Anmeldebildschirme (oben nicht abgebildet) ist die Wiederherstellung des Kontos.
Denn trotz der zahlreichen Authentifizierungsverfahren, die heutzutage zur Verfügung stehen, verlassen sich viele Menschen immer noch auf Passwörter, die sie oft vergessen.
Wie Sie sehen können, ist das Verfahren von eToro einfach und direkt auf den Punkt gebracht.
UX ist für die Wiederherstellung von Konten entscheidend. Die Leute sind bereits mit einem frustrierenden Ereignis konfrontiert (sie haben ihr Passwort vergessen), also sollte Ihre App sie nicht noch weiter verärgern.
Tatsächlich hatte eToro laut einer Incognia-Studie den niedrigsten Reibungsindex für die Passwortwiederherstellung unter den Finanz-Apps. Es ist also nachahmenswert.
Das Wichtigste bei einem Anmeldebildschirm ist ein minimalistisches Design. Die Benutzer sollten so schnell wie möglich in Ihre App gelangen können (egal ob sie sich anmelden oder einloggen).
Startbildschirm
Der Startbildschirm ist das wichtigste UI einer jeden App. Er fungiert als Drehscheibe, die alle anderen Bildschirme und Funktionen miteinander verbindet; daher beginnen die meisten Nutzer hier ihre Reise.
Darüber hinaus dient der Startbildschirm auch als Dashboard, das den Benutzer über wichtige app-bezogene Daten informiert.
Bei einer App für ein intelligentes Haus zeigt der Startbildschirm zum Beispiel wichtige Informationen wie Temperatur und Sicherheit an.
Die Startbildschirme sind der Klebstoff, der die App zusammenhält, und somit von entscheidender Bedeutung. Daher sollten sie trotz der Menge an Informationen, die sie bieten, sehr benutzerfreundlich und intuitiv sein.
Sie sollten auch eine gute Navigation ermöglichen. Alles in Ihrer App muss auf die eine oder andere Weise über den Startbildschirm zugänglich sein.
Eine Suchleiste eignet sich hierfür hervorragend und ist daher ein beliebtes Element des Startbildschirms.
Startbildschirme sind auch wichtig, um den Nutzern einen Fahrplan zu geben – oder die idealen Schritte, die sie unternehmen müssen.
Dies ist besonders wichtig für Apps mit Hunderten von Inhalten und Funktionen, bei denen sich die Nutzer in der Masse verlieren können.
Die Meditations-App Headspace zum Beispiel gibt den Nutzern eine Reihe von täglichen Meditationsaufgaben vor, je nach ihrem Ziel.
So wird sichergestellt, dass sie diese trotz eines vollen Terminkalenders sofort erledigen können.
Sie werden auch feststellen, dass Sie mit der Headspace-App Lieblingsinhalte auf dem Startbildschirm hinzufügen können. Dies ist ein weiterer Aspekt eines großartigen Startbildschirms – die Personalisierung.
Auf diese Weise finden sich die Benutzer viel besser in der App zurecht, weil sie auf ihre Vorlieben zugeschnitten ist.
Fazit: Der Startbildschirm ist der Nordstern Ihrer App. Es muss der letzte Ort sein, an dem die Benutzer verloren gehen.
Onboarding-Anleitungsbildschirme
Onboarding ist ein wichtiger Teil der Erstellung und Nutzung einer modernen App. Wenn Sie neue Benutzer anleiten, können Sie die Bindungsrate erhöhen und ihnen eine fantastische Benutzererfahrung bieten.
Daher verdient Ihr Onboarding-Bildschirm genauso viel Aufmerksamkeit wie der Rest Ihrer App – auch wenn die Nutzer ihn nur einmal durchlaufen werden.
Die goldene Regel lautet hier, die Nutzer nicht zu überfordern. Das ist der schnellste Weg, sie zu verschrecken. Hier sind ein paar Richtlinien, mit denen Designer dies vermeiden können:
Onboarding dient vielen Zwecken, aber einer davon ist das Sammeln von Informationen. Die Bildschirme für diesen Zweck sollten einfach und unkompliziert sein, um die Reibung zu minimieren.
Versuchen Sie außerdem, nur eine Frage pro Bildschirm zu stellen, damit die Benutzer nicht überfordert werden.
Ein weiterer sinnvoller Onboarding-Bildschirm ist eine Diashow, in der die Funktionen und/oder Vorteile Ihrer App vorgestellt werden.
Ziel ist es, die Nutzer dazu zu bewegen, die App zu nutzen und sich (in den meisten Fällen) für ein Konto anzumelden.
Als Faustregel gilt: Konzentrieren Sie sich am besten auf drei Kernfunktionen oder Vorteile, wie bei der Jira-App.
Ein wichtiger Bestandteil eines jeden Onboarding-Bildschirms ist schließlich die Schaltfläche Überspringen. Machen Sie sich klar, dass nicht jeder bereit ist, das Onboarding zu durchlaufen; manche brauchen es vielleicht nicht einmal.
Wenn Sie den Benutzern das Überspringen ermöglichen, vermeiden Sie Frustrationen bei diesen Benutzern.
Wenn Sie weitere Tipps zur Gestaltung effektiver Onboarding-Flows und -Screens benötigen, lesen Sie diesen hilfreichen Artikel.
Feed-Bildschirm
Feed-Bildschirme zeigen die neuesten Inhalte an, z. B. Nachrichten oder Beiträge. Sie werden oft in Anwendungen mit einem konstanten Datenstrom angezeigt, z. B. in sozialen Medien.
Das vielleicht beste Beispiel für einen Feed-Bildschirm ist der Facebook-Feed. Er ist auch ein guter Maßstab dafür, welche Elemente in einem Feed-Bildschirm enthalten sein sollten.
Wie bei allen App-Bildschirmen ist auch bei Feed-Bildschirmen Einfachheit das oberste Gebot. Daher sollten nur wenige UI-Elemente den Informationen, die dem Nutzer präsentiert werden, im Weg stehen.
Ein weiterer Aspekt ist die richtige Aufteilung der Informationen auf dem Feed-Bildschirm.
Zum Beispiel sollten visuelle Indikatoren es den Nutzern ermöglichen, eine Nachricht oder einen Beitrag von anderen im Feed zu unterscheiden.
In diesem Fall dient die Kopfzeile mit dem Symbol als Trennelement, das den Nutzern auf subtile Weise mitteilt, wann ein Beitrag beginnt und endet.
Auch die Abmessungen der einzelnen Beiträge sind in etwa gleich, was für Vorhersehbarkeit beim Scrollen sorgt.
Und schließlich sollte man bedenken, dass der typische Nutzer relativ schnell durch den Feed-Bildschirm scrollt. Das UI-Design der einzelnen Elemente ist wichtig, um sicherzustellen, dass der Nutzer keine wichtigen Inhalte verpasst.
Nachrichten-Apps wie das Wall Street Journal enthalten zum Beispiel eine Überschrift und eine Zusammenfassung des Inhalts jeder Nachricht.
Dies hilft den Nutzern bei der Entscheidung, ob es sich lohnt, auf den Inhalt zu klicken oder nicht.
Minimalismus und Einfachheit sind die wichtigsten Merkmale eines News Feeds. So wird sichergestellt, dass die Nutzer die Informationen erhalten, die sie brauchen, wenn sie sie brauchen.
Splash-Screen
Ein Startbildschirm ist oft das erste, was ein Nutzer sieht, wenn er Ihre App öffnet. In der Regel handelt es sich dabei um einen minimalistischen Bildschirm, auf dem das Logo der App im Mittelpunkt steht.
Der Splash-Screen dient aber nicht nur der Markenbildung, sondern hat auch eine wichtige, wenn auch versteckte Funktion.
Sie verbergen die Tatsache, dass Ihre App geladen wird, und bieten den Nutzern etwas Besseres, auf das sie schauen können, während sie warten.
Das ist in der Tat besser, als den Nutzern eine eingefrorene Ladeoberfläche zu zeigen, die noch nicht fertig ist, denn das könnte dazu führen, dass die Nutzer denken, die App sei kaputt.
Für die Gestaltung von Startbildschirmen gibt es nur wenige Richtlinien, außer dass sie einfach gehalten werden sollten. Er sollte höchstens ein visuelles Element und ein paar Worte in der Mitte des Bildschirms enthalten.
Das liegt daran, dass Startbildschirme leicht und schnell ladend sein sollten.
Tatsächlich sollten Startbildschirme höchstens 3 Sekunden lang sichtbar sein – bei bestimmten Anwendungen sogar noch kürzer.
Wenn Sie ihn zu lang machen, wird er Ihre Benutzer jedes Mal, wenn sie die Anwendung öffnen, verärgern. Wenn Sie Animationen hinzufügen möchten, sollten Sie dies sparsam tun.
Manchmal wird Ihr Begrüßungsbildschirm jedoch unweigerlich zu lange dauern, zum Beispiel wenn die App zu lange zum Laden braucht oder eine langsame Netzwerkverbindung besteht.
Für diesen Fall sollten Sie eine Ausweichmöglichkeit haben.
Am besten ist es, einen Ladeindikator anzuzeigen, z. B. einen Fortschrittsbalken oder ein sich drehendes Rad. Damit wird dem Benutzer mitgeteilt:
„Entspannen Sie sich, die Dinge werden im Hintergrund geladen. Das ist ganz normal.“
Wenn die Anwendung aufgrund eines Fehlers nicht geöffnet werden kann, ist es sinnvoll, dies auf dem Startbildschirm zu zeigen. Auch hier gilt: Wenn Sie den Benutzer auf dem Laufenden halten, ist Ihre App reaktionsschnell und benutzerfreundlich.
Splash-Screens mögen einfach sein, aber sie spielen eine wichtige Rolle für die UX. Es lohnt sich also, ihnen angemessene Aufmerksamkeit zu schenken.
Produktkarten-Bildschirm
Produktbildschirme sind die Hauptstütze von E-Commerce-Apps wie Amazon und Etsy.
Ihr Zweck ist es, den Nutzern die Details eines ausgewählten Produkts zu zeigen, um ihre Kaufentscheidung zu unterstützen.
Gleichzeitig sollten aber auch UX-Regeln beachtet werden, indem die Schnittstelle nicht zu unübersichtlich wird.
Die Informationshierarchie ist das wichtigste Element für effektive Produktbildschirme. Unter UX versteht man die visuelle Anordnung von Elementen auf einem Bildschirm nach ihrer Wichtigkeit.
Die wichtigsten Funktionen werden hervorgehoben und betont, während die weniger wichtigen in den Hintergrund rücken.
Ohne Informationshierarchie sehen die Produktbildschirme wie ein einheitlicher Textblob aus, der nur schwer zu erfassen ist.
Sie können diese Hierarchie auf dem Produktbildschirm der Amazon-App in Aktion sehen.
Wie auf der Amazon-Seite werden auch auf der Produktseite der Airbnb-App Fotos und Preise hervorgehoben.
Allerdings stehen hier bestimmte Elemente viel stärker im Vordergrund, z. B. die technischen Daten der Unterkunft (Zimmer und Bäder). Auch die Kosteneinsparungen sind viel deutlicher erkennbar.
All dies spiegelt natürlich wider, wie Reisende die Plattform durchsuchen.
Denn nur wenn Sie wissen, worauf es Ihren Kunden ankommt, können Sie eine geeignete Informationshierarchie für Ihre Produktseite entwickeln.
Aber Produktseiten sind nur ein Teil der Gleichung für E-Commerce-Anwendungen. Der Kassenbildschirm ist die andere Seite davon.
Kassenbildschirm
Der Kassenbildschirm ist vielleicht der wichtigste Teil jeder Einzelhandels-App, denn hier werden Ihre Einnahmen bestimmt.
Es spielt keine Rolle, ob Sie eine benutzerfreundliche App haben; wenn Sie beim Kassenbildschirm versagen, wird sie nicht erfolgreich sein.
Und wenn Sie davon überzeugt werden müssen, hilft Ihnen vielleicht diese Infografik von CleverTap weiter.
Warum schließen also nur 20 % der Nutzer den Bezahlvorgang ab? Meistens liegt es an UX-Problemen.
Und die Optimierung von Checkout-Formularen ist vielleicht der effektivste Weg, um viele dieser Hindernisse zu beseitigen.
Das bedeutet, dass nur die Informationen abgefragt werden, die für den Abschluss der Transaktion erforderlich sind. Wenn sie als Gast einchecken können (wodurch die Notwendigkeit entfällt, ein Konto zu erstellen), ist das umso besser.
Die Verringerung der Anzahl der Schritte (und damit der Bildschirme) sollte oberste Priorität haben. Füllen Sie Felder vor, wann immer Sie können.
Oder noch besser: Erlauben Sie angemeldeten Benutzern, ganze Bildschirme zu überspringen. Eine Studie ergab, dass dies zu höheren Konversionsraten führt.
Der zweite Ablauf in der Abbildung oben hatte höhere Konversionsraten.
Denken Sie daran, dass Checkout-Seiten nur ein Ziel haben: die Konversionsrate zu erhöhen. Alles, vom nahtlosen Design der Benutzeroberfläche bis hin zu großartigen Texten, trägt dazu bei, mehr Verkäufe abzuschließen.
Statistik-Bildschirm
Viele Apps, vor allem in der Fintech-Nische, nutzen Statistikbildschirme in großem Umfang. Ihr Zweck ist es, dem Nutzer relevante Daten anzuzeigen.
Hier ist ein Beispiel für einen Statistikbildschirm in der Finanzbranche.
Anhand des obigen Bildschirms können Sie viel darüber erfahren, was einen guten Statistikbildschirm ausmacht.
Der vielleicht wichtigste Punkt ist die Visualisierung – also dieDarstellung von Daten mit grafischen Elementen wie Diagrammen und Tabellen.
Auf diese Weise lassen sich Informationen für Gelegenheitsnutzer viel einfacher und interessanter darstellen.
Darüber hinaus können die Daten durch die Visualisierung auch kompakter dargestellt werden, so dass der Bildschirm nicht überladen wird.
Allerdings sollte man es mit der Visualisierung auch nicht übertreiben. Platzieren Sie nicht mehr als zwei Elemente gleichzeitig auf dem Bildschirm.
Ein gutes Beispiel ist dieser Bildschirm von Mint. Beachten Sie, wie schön die Daten auf dem Statistikbildschirm dank einer kontrollierten Mischung aus visuellen Elementen, Text und Farbhinweisen angezeigt werden.
Statistikbildschirme gehören zu den größten Herausforderungen bei der Gestaltung, vor allem, wenn Sie viele Daten präsentieren müssen. Es kommt darauf an, was man weglassen und was man einfügen will.
Audio-Player-Bildschirm
Ein Player-Bildschirm ist genau das, was es klingt – hier können Benutzer Audiotitel in einer Musik-App abspielen.
Wenn Sie wissen möchten, wie der ideale Audioplayer-Bildschirm aussehen sollte, dann schauen Sie sich Spotify an
Das Entwerfen von Audiosteuerungen ist vielleicht am einfachsten, weil die Konventionen bereits ziemlich gut etabliert sind. Das erlaubt es Ihnen, mit anderen Elementen kreativ zu werden.
Dies sind nur die Grundlagen
Wir haben nur einen kleinen Teil der Bildschirme behandelt, die in modernen Apps zu sehen sind.
Bei der heutigen Vielfalt gibt es noch ein Dutzend mehr, die wir nicht besprochen haben, wie z. B. Chat-Bildschirme oder Kartenbildschirme bei Navigationsanwendungen.
Eines haben sie jedoch gemeinsam: Sie alle benötigen ein gutes UX-Design, um effektiv zu sein.
Marko gründete DECODE zusammen mit seinen Mitgründern Peter und Mario, und ein Jahrzehnt später führt er das Unternehmen als CEO. Heute konzentriert sich seine Rolle nahezu vollständig auf die Geschäftsstrategie, wobei sein umfangreicher Hintergrund in der Softwareentwicklung sicherstellt, dass er die Zukunft des Unternehmens aus allen Blickwinkeln betrachtet.
Als Absolvent der Fakultät für Elektrotechnik und Informatik an der Universität Zagreb ist er von der Architektur mobiler Apps und reaktiver Programmierung fasziniert und ein starker Verfechter lebenslangen Lernens. Immer bereit für Action. Oder einen spontanen Skiurlaub.
Das Entwerfen von Wireframes kann überraschend komplex sein. Um Ihnen dabei zu helfen und Sie zu inspirieren, stellen wir Ihnen in diesem Artikel über 20 Beispiele für Wireframes für mobile Apps vor.
