Beispiel einer schnellen App-Entwicklung mit dem Mobile Onboarding Framework

• Für jede App, die man schreibt, immer wieder dieselbe Funktion zu programmieren, kann sehr monoton sein

• Ein gutes Onboarding verbessert aber die die Benutzererfahrung bei der Verwendung von Apps deutlich

• Mit dem Zühlke Mobile Onboarding Framework lässt sich Ihre App schnell, einfach und kostengünstig um eine Onboarding-Funktion erweitern

Die Welt dreht sich schnell und Zeit ist wertvoll. Um mit den Bedürfnissen Ihrer Kunden Schritt zu halten, müssen Sie so viel Zeit wie möglich auf diejenigen Dinge verwenden, die dem Nutzer Mehrwert bieten. Dazu nutzen Entwickler Frameworks und Librarys, mit denen sie Wiederkehrendes überspringen und sich auf das konzentrieren können, was ihre App einzigartig macht. So sind neue Funktionen schneller marktreif. In diesem Artikel möchten wir das «Mobile Onboarding Framework» vorstellen, ein von Zühlke nach den UX-Grundsätzen entwickeltes Framework für das Onboarding in Apps.

Was bedeutet Onboarding in einer Mobile-App?

Der erste Eindruck zählt. Auch wenn Ihre App die beste Nutzerschnittstelle der Welt hat. Sie wollen ja den Nutzer nicht überfordern, indem Sie ihn beim Öffnen der App ins kalte Wasser werfen. Wenn sich Ihre App nicht von Anfang an intuitiv benutzen lässt, riskieren Sie, dass die Nutzer die App löschen, ohne sie je benutzt zu haben.

Mit einem Onboarding-Screen – einem Willkommensbildschirm – stellen Sie Ihre App Schritt für Schritt vor. Dadurch fühlen sich die Nutzer nicht nur sofort willkommen, sondern sie werden vor der eigentlichen Nutzung durch die einzelnen App-Funktionen geführt, was die Nutzerbindung erhöht.

Bei vielen Apps ist auch der Zugriff auf ein Benutzerkonto oder die Erlaubnis zur Verwendung bestimmter Hardware-Elemente wie der Kamera nötig. Mit einem Onboarding-Screen lässt sich ideal erklären, warum eine App Zugriff auf bestimmte Funktionen benötigt. Den Nutzern wird so die Möglichkeit gegeben, die entsprechende Erlaubnis zu erteilen oder zu verweigern. Apple beispielsweise empfiehlt, nicht sofort beim Öffnen eine Anmeldeseite anzuzeigen, sondern erst die Vorteile der Anmeldung zu erklären. Ein Onboarding-Screen kann hier die perfekte Möglichkeit sein.

Das Problem: Der Onboarding-Screen muss jedes Mal neu programmiert werden

Es handelt sich um ein kleines Detail, das die Benutzererfahrung bei der Verwendung von Apps aber deutlich verbessert. Dennoch reicht ein toller Onboarding-Screen natürlich nicht aus, um die eigene App zu verkaufen. Erfolg sichern Sie sich durch einzigartige Funktionen, die tatsächlichen Mehrwert bieten. Da sich die Entwickler meist auf diejenigen Eigenschaften konzentrieren, die geschäftsfördernd sind, tappen viele in die Falle, grundlegende Elemente wie das Onboarding zu vernachlässigen. Diese sind jedoch für ein positives Nutzererlebnis essenziell.

Hinzu kommt, dass sich die Onboarding-Screens vieler Apps sehr stark ähneln, aber trotzdem jedes Mal separat eingebaut werden müssen. Weder Android noch iOS bieten in ihren UI-Frameworks eine integrierte Lösung dafür. Für jede App, die man schreibt, immer wieder dieselbe Funktion zu programmieren, kann sehr monoton sein. Die meisten Entwickler würden lieber an kniffligen Problemen tüfteln, als jedes Mal Schritt für Schritt solche Standardelemente einzubauen.

Wie wäre es also, wenn Sie das Onboarding nicht für jede App von Neuem programmieren müssten?

Wie gehen wir das Onboarding an?

Vor diesem Hintergrund haben wir beschlossen, das Mobile Onboarding Framework zu entwickeln. Wir haben die wichtigsten Elemente eines guten Onboardings in eine benutzerfreundliche Library eingefügt, die sowohl für iOS als auch für Android nutzbar ist.

Mit unserem Mobile Onboarding Framework lässt sich Ihre App schnell, einfach und kostengünstig um eine Onboarding-Funktion erweitern. Statt der Qual der Wahl zwischen einem Onboarding-Screen und einer anderen Funktion können Sie so beides haben.

Mit nur wenigen Zeilen lässt sich Ihre App um einen einfachen Onboarding-Screen erweitern. So stellen Sie das gesamte Onboarding in weniger als einem Tag auf die Beine, ohne Abstriche bei der Qualität der App selbst oder beim Onboarding machen zu müssen.

Unser Onboarding-Framework basiert auf dem Grundsatz «Konvention vor Konfiguration». Das Onboarding-Element macht auf allen Bildschirmgrössen (vom kleinsten iPhone SE bis zum grössten iPad) sowohl im Hoch- als auch im Querformat einen guten Eindruck, ohne dass irgendwelche Konfigurationsschritte nötig wären. Natürlich haben wir auch UX-Praktiken wie den goldenen Schnitt mit berücksichtigt.

Trotzdem ist unser Framework noch flexibel genug, um bei Bedarf eine komplexe Individualisierung zuzulassen. Diese Flexibilität erreichen wir auf zwei Arten: Erstens ermöglichen wir es den Entwicklern, das Onboarding über eine umfassende Auswahl an Parametern von der Schrift über die Farbpalette bis zum Padding von Bildern zu individualisieren. Bei allen Parametern wurden universell nutzbare Standardwerte gewählt, sodass das Ganze auch ohne jegliche Anpassung noch gut aussieht.

Sollten die Parameter für den gewünschten Individualisierungsgrad dennoch nicht ausreichen, gibt es noch eine zweite Möglichkeit: Mit individuellen Ansichten können die Nutzer den Bildschirm über die nativen Android- oder SwiftUI-Ansichten nach ihren Vorlieben gestalten.

Unserer Meinung nach sind individuelle Ansichten grundlegend für den Erfolg unseres Frameworks. Unsere integrierten Funktionen decken 90 % ihrer Wünsche ab. Allerdings stellen wir fest, dass im wahren Leben für jedes Projekt einzigartige Anforderungen bestehen, die wir nicht vorhersehen können. Mit unserem Framework können Sie sich deshalb die Arbeit sparen, die bei jedem Onboarding-Screen gleich ist, und intensiver an dem arbeiten, was Sie wirklich einzigartig macht.

Unsere Beispiel-App würde gerne auf den Standort des Nutzers zugreifen. Dazu muss sie aber erst die Genehmigung einholen. Der Onboarding-Screen eignet sich hervorragend, um zu erklären, weshalb diese Genehmigung nötig ist, und sie vom Benutzer einzuholen. Die entsprechende Aufforderung lässt sich durch einen zusätzlichen Button umsetzen, der mit unserem Framework möglich wird:

Wie Sie sehen, ist es ganz einfach, Seiten mit einfachen Buttons oder solche, die Informationen auf verschiedene Arten anzeigen, hinzuzufügen.

Zum Abschluss möchten wir aber noch einen Schritt weiter gehen. Unsere Beispiel-App verfügt über eine Profil-Seite, die Daten über die Nutzer enthält. Wäre es nicht toll, wenn die Nutzer diese Daten direkt während des Onboardings eingeben könnten? Natürlich enthält das Mobile Onboarding Framework nicht das genau dafür benötigte Seitenlayout. Wenn man eine individuelle Seite nutzt, ist es aber kein Problem, dies entsprechend zu implementieren.

Dies war nur ein kleines Beispiel dafür, was mit dem Onboarding-Framework innert weniger Minuten machbar ist. Das Beispiel wurde für iOS programmiert. Für Android sieht der Code aber ähnlich aus und ist genauso schnell zu erzeugen.

Schlussfolgerung

Unser Mobile Onboarding Framework bietet, im Vergleich mit anderer Software, zahlreiche einzigartige Funktionen. Zunächst nutzt unser Framework sowohl in iOS als auch in Android sehr ähnliche API, wodurch es einfach über mehrere Plattformen implementierbar ist. Wir haben unser Framework zudem auf einer Vielzahl von Geräten und sowohl im Hoch- als auch im Querformat getestet, um sicherzustellen, dass es immer eine gute Figur macht. Ausserdem verfügt unser Framework über eine umfangreiche Palette an Funktionen.

Das Mobile Onboarding Framework ist nur eine von zahlreichen Lösungen, mit denen wir die App-Entwicklung vereinfachen und damit den Kunden, den Entwicklern und nicht zuletzt auch den Endnutzern des Produkts das Leben leichter machen. Wenn Sie Fragen oder Kommentare zum Framework, zu Open-Source-Lösungen oder zu unserer Arbeit im Allgemeinen haben, zögern Sie nicht, uns zu kontaktieren.