Deutsch (du)

Prüfung der mobilen Einsatzbereitschaft

Mit dem Mobile Readiness Scan von condoo.Vibe mobile Probleme im Projekt erkennen, beheben und den Android- oder iOS-Export vorbereiten.

Bevor du deine condoo.Vibe-Anwendung für Android oder iOS exportierst, solltest du sicherstellen, dass das Projekt für eine mobile Umgebung bereit ist.

Der Mobile Readiness Scan von condoo.Vibe analysiert deine Anwendung und hilft dabei, Probleme zu erkennen, die die mobile Nutzung beeinträchtigen könnten.

So kannst du diese Probleme bereits vor der Erstellung des mobilen Builds finden und beheben.

Zuerst prüfen. Wichtige Probleme beheben. Exportieren, wenn die Anwendung bereit ist.

Was ist der Mobile Readiness Scan?

Webanwendungen und mobile Anwendungen verhalten sich nicht immer genau gleich.

Dein Projekt kann im Desktop-Browser einwandfrei funktionieren und dennoch Elemente enthalten, die vor dem mobilen Export angepasst werden müssen.

Der Mobile Readiness Scan hilft, solche Probleme zu erkennen.

Der Ablauf:

condoo.Vibe-PROJEKT
     ↓
MOBILE READINESS SCAN
     ↓
ANWENDUNG ANALYSIEREN
     ↓
PRÜFERGEBNISSE
     ↓
PROBLEME BEHEBEN
     ↓
ERNEUT PRÜFEN
     ↓
EXPORTIEREN

Die Prüfung ist wie eine Kontrolle vor dem Start, bevor die mobile Anwendung erstellt wird.

Wann sollte die Prüfung erfolgen?

Führe den Mobile Readiness Scan aus, wenn die grundlegende Anwendung funktioniert und du den nächsten Schritt zu Android oder iOS vorbereitest.

Idealerweise:

ERSTELLEN
  ↓
TESTEN
  ↓
FÜR MOBILGERÄTE OPTIMIEREN
  ↓
EINSATZBEREITSCHAFT PRÜFEN
  ↓
BEHEBEN
  ↓
EXPORTIEREN

Warte mit dem Erkennen grundlegender mobiler Probleme nicht, bis die Anwendung bereits bei einem App Store eingereicht wurde.

Die erste Prüfung starten

Öffne das Projekt, das du für Mobilgeräte vorbereiten möchtest.

Navigiere zum Bereich Mobile Export und starte den Mobile Readiness Scan.

Mobile Prüfung in condoo.Vibe

condoo.Vibe analysiert das Projekt und ermittelt, welche Bereiche vor dem Export überarbeitet werden sollten.

Prüfe die Ergebnisse nach Abschluss der Analyse.

Die Prüfergebnisse verstehen

Die Ergebnisse zeigen den Zustand deiner Anwendung vor der Erstellung eines mobilen Builds.

Ergebnisse der mobilen Prüfung in condoo.Vibe

Je nach Projekt erkennt condoo.Vibe Punkte, die vor dem Export Aufmerksamkeit oder Verbesserungen erfordern.

Ein solcher Hinweis bedeutet nicht:

Meine Anwendung ist kaputt.

Sondern:

Hier sollte ich etwas anpassen, bevor ich die Anwendung für Mobilgeräte verpacke.

Worauf condoo.Vibe achtet

Mobile Einsatzbereitschaft umfasst mehr als ein responsives Erscheinungsbild.

condoo.Vibe muss berücksichtigen, ob wichtige Teile der Anwendung in einer mobilen Umgebung sinnvoll nutzbar sind.

Je nach Anwendung sollten folgende Bereiche geprüft werden:

Nicht jedes Projekt hat dieselben Probleme.

Eine einfache Unternehmenswebsite und ein komplexes CRM haben sehr unterschiedliche mobile Anforderungen.

Responsive Layouts

Zuerst sollte geprüft werden, ob sich die Oberfläche richtig an kleinere Bildschirme anpasst.

Ein Desktop-Layout könnte beispielsweise so aussehen:

┌───────────────────────────────────────┐
│ Seiten- │ Dashboard                   │
│ leiste  │                             │
│         │ Karte │ Karte │ Karte │ Karte│
│         │                             │
│         │ Große Datentabelle          │
└───────────────────────────────────────┘

Dieses Layout sollte nicht einfach auf die Größe eines Telefonbildschirms zusammengedrückt werden.

Ein mobiles Layout könnte so aussehen:

┌─────────────────────┐
│ ☰  Dashboard        │
├─────────────────────┤
│ Umsatz              │
├─────────────────────┤
│ Kunden              │
├─────────────────────┤
│ MRR                 │
├─────────────────────┤
│ Aktivität           │
└─────────────────────┘

Die Informationen bleiben verfügbar, aber die Darstellung passt sich an.

Navigationsmuster für den Desktop lassen sich nicht immer gut auf Mobilgeräte übertragen.

Eine dauerhafte Seitenleiste muss beispielsweise möglicherweise ersetzt werden durch:

Teste, ob Nutzer die wichtigsten Bereiche der Anwendung leicht erreichen können.

Frage dich:

Könnte jemand diese Anwendung bequem mit einer Hand auf einem Telefon bedienen?

Berührungsflächen

Schaltflächen und Bedienelemente müssen sich leicht antippen lassen.

Ein winziges Symbol, das mit einer Maus gut funktioniert, kann auf einem Touchscreen frustrierend sein.

Prüfe:

Vermeide mehrere kleine interaktive Elemente direkt nebeneinander.

Formulare

Formulare gehören zu den wichtigsten Testbereichen.

Angenommen, das Desktop-Formular sieht so aus:

Vorname          Nachname

E-Mail           Telefon

Unternehmen      Website

Adresse          Stadt

Auf Mobilgeräten ist eine Anordnung untereinander möglicherweise besser:

Vorname

Nachname

E-Mail

Telefon

Unternehmen

Website

Adresse

Stadt

Prüfe außerdem:

Tabellen

Tabellen sind in SaaS-Anwendungen, CRMs, Admin-Dashboards und internen Werkzeugen weit verbreitet.

Sie gehören außerdem zu den Desktop-Mustern, die auf Mobilgeräten besonders leicht Probleme verursachen.

Beispiel:

Name | E-Mail | Unternehmen | Tarif | Status | Erstellt | Aktionen

Alle Spalten auf einem schmalen Telefonbildschirm anzuzeigen, kann zu horizontalem Scrollen oder unlesbaren Inhalten führen.

Stattdessen sollten die wichtigsten Informationen zuerst erscheinen.

Zum Beispiel:

Sarah Chen
Acme Ltd.
Agentur

Aktiv

[View]

Die übrigen Informationen können auf der Detailseite angezeigt werden.

Modalfenster und Dialoge

Prüfe, ob Dialoge auf kleinere Bildschirme passen.

Ein für den Desktop entworfenes Modalfenster kann manchmal:

Auf Mobilgeräten sollten Dialoge während der gesamten Interaktion zugänglich und bedienbar bleiben.

Authentifizierung

Teste den vollständigen Authentifizierungsablauf auf Mobilgeräten.

Dazu gehören:

Registrieren
   ↓
Verifizieren / Authentifizieren
   ↓
Anmelden
   ↓
Geschützte Anwendung
   ↓
Abmelden

Falls du die Google-Authentifizierung oder einen anderen externen Authentifizierungsablauf verwendest, teste diesen ebenfalls.

Authentifizierung ist zu wichtig, um allein wegen eines funktionierenden Desktop-Ablaufs von korrektem Verhalten auf Mobilgeräten auszugehen.

Bilder und Medien

Große Bilder können die mobile Nutzung beeinträchtigen.

Prüfe:

Ein Bild, das auf einem Desktop-Bildschirm beeindruckend wirkt, kann auf Mobilgeräten zu viel Platz einnehmen.

Die Anwendung öffnet möglicherweise:

Teste, was geschieht, wenn diese Links in der mobilen Anwendung geöffnet werden.

Stelle sicher, dass Nutzer den Ablauf abschließen und gegebenenfalls zur Anwendung zurückkehren können.

Integrationen

Wenn die Anwendung von Connectors abhängt, beziehe diese in die mobilen Tests ein.

Zum Beispiel:

Mobile App
    ↓
Buchung
    ↓
Google Calendar
    ↓
Resend
    ↓
Bestätigung

Prüfe nicht nur, ob die Buchungsschaltfläche funktioniert.

Teste den vollständigen Ablauf.

Erkannte Probleme beheben

Wenn die Prüfung Handlungsbedarf zeigt, arbeite die Probleme vor dem Export ab.

Beispielsweise könntest du condoo.Vibe auffordern:

Das Kunden-Dashboard anhand der erkannten Probleme für Mobilgeräte optimieren. Die bestehende Desktop-Nutzung und Funktionalität beibehalten.

Oder:

Die bei der Prüfung erkannten Probleme mit mobiler Navigation und Tabellen beheben, ohne das bestehende Desktop-Layout zu ändern.

condoo.Vibe kann dann gezielt die verbesserungsbedürftigen Bereiche bearbeiten.

Nicht für jedes Problem alles neu gestalten

Ein Problem bei der mobilen Einsatzbereitschaft erfordert nicht unbedingt eine vollständige Neugestaltung.

Wenn das Problem beispielsweise lautet:

Die Kundentabelle passt auf Mobilgeräten nicht auf den Bildschirm.

Sollte die nächste Aufforderung nicht sofort lauten:

Mein gesamtes CRM vollständig neu gestalten.

Sondern:

Die Kundentabelle auf Mobilgeräten nutzbar machen und dabei die bestehende Desktop-Tabelle und ihre Funktionen beibehalten.

Kleinere, gezielte Änderungen verringern das Risiko, funktionierende Anwendungsteile zu beschädigen.

Die Desktop-Nutzung erhalten

Mobile Optimierung sollte die Desktop-Version nicht unnötig beeinträchtigen.

Teile condoo.Vibe mit, wenn beide Darstellungen wichtig sind.

Zum Beispiel:

Dieses Dashboard für mobile Bildschirme optimieren und das aktuelle Desktop-Layout für größere Bildschirme beibehalten.

Schematisch:

               ANWENDUNG
                   ↓
          RESPONSIVE DARSTELLUNG
             ↙           ↘
         DESKTOP         MOBIL

Dieselbe Anwendung kann sich an das verwendete Gerät anpassen.

Die Prüfung wiederholen

Nach dem Beheben der erkannten Probleme führe den Mobile Readiness Scan erneut aus.

Verbesserte Prüfergebnisse in condoo.Vibe

Der Prozess erfolgt bewusst schrittweise:

PRÜFEN
 ↓
PROBLEME
 ↓
BEHEBEN
 ↓
ERNEUT PRÜFEN
 ↓
WEITERE PROBLEME?
 ↙       ↘
JA        NEIN
 ↓         ↓
BEHEBEN  EXPORTIEREN

Eine einzelne Änderung bedeutet nicht automatisch, dass die gesamte Anwendung bereit ist.

Auch manuell testen

Der Mobile Readiness Scan ist hilfreich, ersetzt aber nicht die tatsächliche Nutzung der Anwendung.

Öffne die mobile Vorschau und gehe die wichtigen Nutzerabläufe durch.

Bei einer E-Commerce-Anwendung beispielsweise:

App öffnen
   ↓
Produkte durchsuchen
   ↓
Produkt ansehen
   ↓
In den Warenkorb legen
   ↓
Zur Kasse gehen
   ↓
Bestätigung

Bei einem CRM:

Anmelden
 ↓
Leads ansehen
 ↓
Lead öffnen
 ↓
Status aktualisieren
 ↓
Notiz hinzufügen
 ↓
Nachfassaktion erstellen

Ziel ist festzustellen, ob sich das Produkt gut bedienen lässt, nicht nur, ob die Oberfläche technisch auf den Bildschirm passt.

Verschiedene Bildschirmgrößen testen

Mobilgeräte sind nicht alle gleich groß.

Eine Anwendung, die auf einem großen Telefon gut aussieht, kann auf einem kleineren Probleme haben.

Besondere Aufmerksamkeit verdienen:

Gestalte die Anwendung nicht nur für ein bestimmtes Telefon.

Hochformat

Die meisten Nutzer verwenden die Anwendung im Hochformat.

Stelle sicher, dass die wichtigsten Abläufe in dieser Ausrichtung bequem funktionieren.

Zum Beispiel:

┌───────────────────┐
│                   │
│      DIE APP      │
│                   │
│                   │
│                   │
│                   │
└───────────────────┘

Gewöhnliche Aufgaben sollten nicht voraussetzen, dass Nutzer ihr Telefon drehen.

Auf horizontales Scrollen prüfen

Unerwartetes horizontales Scrollen deutet oft darauf hin, dass etwas nicht richtig auf den Bildschirm passt.

Häufige Ursachen:

Wenn sich beim Scrollen die ganze Anwendung seitlich verschiebt, prüfe, welche Komponente über den Rand hinausragt.

Fixierte Elemente prüfen

Anwendungen verwenden gelegentlich fixierte:

Stelle sicher, dass diese auf kleineren Bildschirmen keine wichtigen Inhalte verdecken.

Zum Beispiel:

┌─────────────────────┐
│ Inhalt              │
│                     │
│                     │
│                     │
│ [Wichtige Aktion]   │
├─────────────────────┤
│ Fixierte Navigation │
└─────────────────────┘

Die Navigation sollte die darüberliegende Schaltfläche nicht verdecken.

Leere Zustände testen

Teste nicht nur Bildschirme voller Beispieldaten.

Prüfe, was ein neuer Nutzer sieht.

Zum Beispiel:

Projekte

Es wurde noch kein Projekt erstellt.

[Create Your First Project]

Auch ohne Daten auf dem Bildschirm sollte ein mobiler Nutzer verstehen, was als Nächstes zu tun ist.

Fehlerzustände testen

Teste außerdem, was bei einem Fehler geschieht.

Zum Beispiel:

Zahlung fehlgeschlagen

Die Zahlung konnte nicht abgeschlossen werden.

[Try Again]

Oder:

Projekte konnten nicht geladen werden.

[Retry]

Fehler sollten keine unbedienbaren Ansichten erzeugen oder Nutzer festsetzen.

Mobile Leistung

Mobile Nutzer haben möglicherweise langsamere Verbindungen und weniger leistungsfähige Geräte als Desktop-Nutzer.

Vermeide nach Möglichkeit unnötig aufwendige Darstellungen.

Achte auf:

Auch eine schöne Anwendung bietet eine schlechte mobile Erfahrung, wenn sie sich langsam anfühlt.

Zahlungen erfordern besondere Aufmerksamkeit

Wenn die Anwendung Zahlungen umfasst, ist mobile Einsatzbereitschaft mehr als eine Layout-Frage.

Für Anwendungen, die über Google Play oder Apples App Store vertrieben werden, können je nach verkauftem Angebot storespezifische Zahlungsvorgaben gelten.

Vor dem Einreichen sollte sichergestellt werden, dass das Zahlungsmodell die Anforderungen des jeweiligen Stores erfüllt.

Das Einreichen bei Stores wird separat behandelt.

Ein guter Prompt für mobile Optimierung

Ein aussagekräftiger Prompt könnte lauten:

Die Anwendung auf mobile Einsatzbereitschaft prüfen. Die bestehende Desktop-Nutzung beibehalten. Navigation, Dashboard-Karten, Kundentabellen, Formulare, Dialoge und zentrale Abläufe für kleinere Touchscreens optimieren. Unnötiges horizontales Scrollen vermeiden und wichtige Aktionen leicht erreichbar halten. Keine bestehende Funktion entfernen.

Das ist wesentlich präziser als:

Für Mobilgeräte optimieren.

Plan-Modus für komplexe Anwendungen verwenden

Bei einer großen Anwendung sollte die mobile Anpassung geplant werden, bevor Änderungen erfolgen.

Zum Beispiel:

Diese Anwendung für die mobile Nutzung analysieren. Ermitteln, welche Layouts, Navigationsmuster, Tabellen, Formulare, Dialoge und Abläufe für eine gute mobile Nutzung geändert werden müssen. Nur einen Plan erstellen. Die Anwendung noch nicht verändern.

Prüfe den Plan.

Anschließend setzt du die Änderungen um.

EXPLORE
   ↓
PLAN
   ↓
PRÜFEN
   ↓
BUILD
   ↓
PRÜFEN

Wann ist die Anwendung bereit?

Mobile Einsatzbereitschaft bedeutet nicht:

Jeder Bildschirm sieht genau wie die Desktop-Version aus.

Sie bedeutet, dass die wichtigen Anwendungsabläufe auf Mobilgeräten gut funktionieren.

Vor dem Export solltest du sicher sein, dass Nutzer:

ohne mit der Oberfläche kämpfen zu müssen.

Checkliste für mobile Einsatzbereitschaft

Vor dem Export prüfe:

Dann ist die Anwendung bereit für den nächsten Schritt.

Von der Prüfung zum Export

Der Ablauf sollte so aussehen:

FUNKTIONIERENDE WEB-APP
       ↓
MOBILE READINESS SCAN
       ↓
ERGEBNISSE PRÜFEN
       ↓
PROBLEME BEHEBEN
       ↓
TESTEN
       ↓
ERNEUT PRÜFEN
       ↓
BEREIT
       ↓
MOBILER EXPORT

Die Prüfung ist kein Hindernis auf dem Weg zur mobilen App.

Sie hilft sicherzustellen, dass der Export tatsächlich einsatzbereit ist.

Als Nächstes: Export für Android (APK)

Deine Anwendung ist bereit für Mobilgeräte.

Als Nächstes bringen wir sie auf Android.

Dabei behandeln wir:

Export für Android (APK)

Einen Android-Build aus deinem condoo.Vibe-Projekt erstellen.