Die Kernfrage zuerst beantworten
Bei der mobilen Anpassung sollten folgende Inhalte für Schaltflächen vorbereitet werden: Touch-Bereich (mindestens 44×44 Pixel), Abstände zwischen Schaltflächen (mindestens 8 Pixel), Klick- oder Berührungsfeedback (z. B. Farbwechsel oder Mikroanimationen), Schriftgröße und Farbkontrast sowie Stile für Lade- oder Deaktivierungszustände. Diese Vorbereitungen stellen sicher, dass Schaltflächen auf dem Smartphone leicht zu tippen sind, keine Fehlberührungen verursachen und klares Feedback geben, was die Benutzererfahrung verbessert.
Warum die Vorbereitung von Schaltflächen wichtig ist
Mobile Bildschirme sind klein, und Benutzer bedienen sie mit den Fingern, deren Präzision weit geringer ist als die einer Maus. Wenn Schaltflächen nicht ausreichend vorbereitet sind, treten leicht Probleme wie ungenaues Tippen, Fehlberührungen oder fehlendes Feedback auf, was zu wiederholten Aktionen oder zum Verlassen der Seite führen kann. Eine frühzeitige Anpassung der Schaltflächen reduziert die Absprungrate und verbessert die Konversionsrate.
Touch-Bereich der Schaltflächen
Der Touch-Bereich bezeichnet die klickbare Zone einer Schaltfläche. Empfohlen wird mindestens 44×44 Pixel (gemäß den Apple Human Interface Guidelines), besser sind 48×48 Pixel. Wenn die visuelle Größe der Schaltfläche klein ist (z. B. bei Symbolschaltflächen), sollte der Bereich durch Padding oder transparente Flächen vergrößert werden. Beachten Sie, dass verschiedene Geräte unterschiedliche Pixeldichten haben. Verwenden Sie daher relative Einheiten (wie rem oder vw) in Kombination mit einer Mindestgrößenbeschränkung.
Abstände und Layout der Schaltflächen
Der Abstand zwischen Schaltflächen sollte mindestens 8 Pixel betragen, um zu vermeiden, dass benachbarte Schaltflächen gleichzeitig ausgelöst werden. In Formularen sollten Senden- und Abbrechen-Schaltflächen sowie Aktions- und Zurück-Schaltflächen getrennt platziert werden. Empfohlen wird ein Layout mit der Aktionsschaltfläche rechts und der Abbrechen-Schaltfläche links. Fixierte Schaltflächen am unteren Bildschirmrand (z. B. „Jetzt kaufen“) müssen einen Sicherheitsabstand zum Bildschirmrand einhalten, um Fehlberührungen durch Systemgesten (wie Zurück oder Multitasking) zu vermeiden.
Interaktionsfeedback
Nach einem Klick auf eine Schaltfläche ist sofortiges Feedback erforderlich:
- Visuelles Feedback: Die Schaltfläche wird dunkler, erhält einen Schatten oder einen Skalierungseffekt, um die Auslösung anzuzeigen.
- Haptisches Feedback: Einige Geräte unterstützen Vibrationsfeedback, das die Bestätigung verstärkt.
- Zustandsänderungen: Während des Ladens zeigt die Schaltfläche eine Drehanimation und deaktiviert erneutes Klicken. Nach Erfolg oder Misserfolg wird ein Ergebnis-Hinweis angezeigt.
Text und Lesbarkeit
Die Schriftgröße von Schaltflächen sollte mindestens 14 Pixel betragen, für primäre Aktionsschaltflächen werden 16 Pixel oder mehr empfohlen. Der Kontrast zwischen Text und Hintergrundfarbe sollte mindestens 4,5:1 betragen (WCAG AA-Standard). Bei farbenblinden Benutzern sollte nicht nur auf Farbe zur Unterscheidung gesetzt werden (z. B. Rot für Löschen, ergänzt durch Symbole oder Textbeschreibungen).
Vorbereitung spezieller Zustände
Neben dem Normalzustand sollten auch folgende Zustandsstile vorbereitet werden:
- Deaktivierungszustand: Die Schaltfläche wird grau und ist nicht klickbar. Visuell sollte klar sein, dass sie vorübergehend nicht verfügbar ist (z. B. wenn ein Pflichtfeld fehlt, wird die Senden-Schaltfläche ausgegraut).
- Ladezustand: In der Schaltfläche wird eine Ladeanimation angezeigt, und erneutes Klicken wird deaktiviert.
- Fehlerzustand: Bei fehlgeschlagener Formularübermittlung kann die Schaltfläche „Wiederholen“ oder „Erneut senden“ anzeigen, zusammen mit einer Fehlermeldung.
Häufige Fragen und Hinweise
Frage: Welche Schriftgröße ist für Schaltflächen geeignet?
In der Regel 16px für primäre Schaltflächen und 14px für sekundäre Schaltflächen, nicht kleiner als 12px.
Frage: Wie vermeide ich, dass untere Schaltflächen von der System-Navigationsleiste verdeckt werden?
Verwenden Sie Safe-Area-Variablen und lassen Sie am unteren Rand einen Abstand von mindestens 34 Pixeln.
Frage: Was tun, wenn eine Schaltfläche nach dem Klicken nicht reagiert?
Überprüfen Sie, ob das richtige Ereignis gebunden ist und ob die Schaltfläche von einem übergeordneten Element verdeckt wird. Empfohlen wird die Verwendung von Touch-Ereignissen anstelle von Click (mobil gibt es eine 300ms-Verzögerung) oder die Verwendung der Fastclick-Bibliothek.
Empfehlungen
Erstellen Sie vor der Entwicklung eine Liste aller Schaltflächen basierend auf dem Design, und notieren Sie für jede Schaltfläche die Größe des Touch-Bereichs, Abstände, Feedback-Effekte und Zustandsstile. Nach der Entwicklung führen Sie Tests auf echten Geräten durch, einschließlich Multi-Touch-Tests, schneller Klickfolgen und Tests auf verschiedenen Bildschirmgrößen. Diese Vorbereitungen helfen, Probleme mit der Benutzerfreundlichkeit von Schaltflächen nach dem Launch zu vermeiden.
