Neue Technologien

Beispiel einer schnellen App-Entwicklung mit dem Mobile Onboarding Framework

8 Minuten Lesezeit
Mit Insights von
Oliver Gepp

Oliver Gepp

Lead Software Architect

  • 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.

App-onboarding-user-interface

Ein Beispiel für das Mobile Onboarding Framework

Schauen wir uns als Beispiel einmal die fiktive App TrackMyFitness an. Obwohl die Benutzerschnittstelle recht einfach gestaltet ist, können wir das Nutzererlebnis für Erstnutzer mithilfe eines Onboarding-Screens verbessern. Für eine solche App ist ein Onboarding-Screen besonders wichtig, da der Nutzer noch keinen Inhalt sieht, wenn er die App das erste Mal öffnet. Von einer leeren Seite begrüsst zu werden, ist nicht ideal.

onboarding-without-message

Mobile Apps können ganz einfach um einen Onboarding-Screen ergänzt werden:

  • Fügen Sie eine neue übergeordnete Ansicht hinzu (MOFOnboardingFlow), auf der der Onboarding-Screen erscheint.
  • Ergänzen Sie die übergeordnete Ansicht um die anzuzeigenden Seiten.

Mit diesen wenigen Zeilen haben wir bereits unsere erste Seite gestaltet.

MOFOnboardingFlow(pages: [
    MOFPage(
           titleText: "Are you ready? 🚀",
           image: MOFImage(from: UIImage(named: "page_1")!),
           descriptionText: findText("PAGE_1_TEXT")
   )
)

 

onboarding-with-message-picture

Fügen wir nun Erklärungen zu den einzelnen Funktionen der App hinzu. Aufzählungszeichen sind hier die perfekte Wahl. Und natürlich unterstützt unser Framework diese standardmässig:

MOFPage(
    titleText: "We've got you covered!",
    image: MOFImage(from: UIImage(named: "page_2")!),
    descriptionText: findText("PAGE_2_TEXT"),
    bulletPointList: MOFBulletPointList(items: [
        "Running", "Cycling", "Gym Sessions", "Swimming", "Many More"
    ], bulletPointImage: Image(systemName: "bolt"))
)

 

So entsteht eine schöne Aufzählung. Beachten Sie bitte auch, dass Ihre App am unteren Rand automatisch eine Seitenanzeige sowie einen «Weiter»-Button erstellt, der auf der letzten Seite zum «Fertig»-Button wird. Natürlich lassen sich die Buttons bei Bedarf anpassen: Sie können den «Weiter»-Button in jeder beliebigen Ecke platzieren, optional «Onboarding überspringen» ermöglichen oder sogar ganz individuelle Felder hinzufügen.

user-experiemce-improved-with-bullets

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:

MOFPage(
    titleText: "Do you want to track your activity distance?",
    image: MOFImage(from: UIImage(named: "page_2")!),
    descriptionText: findText("PAGE_3_TEXT"),
    buttonText: "Allow Location Services",
    buttonAction: requestLocationPermissions,
    style: MOFStyleConfiguration(secondaryColor: UIColor(named: "purple"))
)

 

Dadurch wird automatisch eine Seite mit einem zusätzlichen Button erstellt. Beachten Sie, dass wir mit einem einfachen einzeiligen Befehl rasch die Seitenfarbe auf violett ändern konnten. Und natürlich ist auch der Übergang zwischen den Farben vollständig animiert.

location_cta_in_app

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.

MOFPage(
    titleText: "Complete your profile",
    image: MOFImage(from: UIImage(named: "page_4")!),
    descriptionText: findText("PAGE_4_TEXT"),
    customViewConfiguration:
    MOFCustomViewConfiguration(customView: ProfileOnboardingScreen())
)

 

Wir können mithilfe einer individuellen Seite die Funktionalität des Onboarding-Frameworks erweitern, um massgeschneiderte Funktionen für unsere App zu ermöglichen.

functionality-tailored-to-app

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.

Oliver Gepp

Lead Software Architect

Oliver Gepp ist ein erfahrener Software-Architekt mit dem Schwerpunkt Mobile Entwicklung. Seine Erfahrung hat er in zahlreichen erfolgreichen Kundenprojekten unter Beweis gestellt. Sein Wissen deckt den gesamten Entwicklungszyklus ab, von der Konzeption und Entwicklung über das Testen bis hin zur Veröffentlichung und Wartung von Apps.

Kontakt
+41315613949
Vielen Dank für Ihre Nachricht.
Insights
Weitere Artikel lesen