Wie funktioniert ein Website-Chatbot gut auf dem Handy?

Das Problem

Mehr als die Hälfte Ihrer Besucher kommt vielleicht mit dem Handy auf die Website. Auf einem kleinen Bildschirm kann ein Chatfenster zum Ärgernis werden: Es verdeckt den Bestellknopf, die Tastatur schiebt das Eingabefeld aus dem Bild, oder das Fenster lässt sich nicht mehr schliessen.

Sie möchten verhindern, dass das Chatfenster auf dem Handy wichtige Inhalte verdeckt. Das ist keine Nebensache, denn wer nicht weiterkommt, verlässt die Seite, und genau das wollten Sie mit dem Chatbot verhindern.

Gute Nachricht: Mit einer kurzen Checkliste und einem Test auf zwei, drei Geräten erkennen Sie die meisten Probleme selbst.

So lösen Sie es mit KI – Schritt für Schritt

1. Prüfen Sie, wie viele Besucher mobil kommen. Ihre Website-Statistik zeigt die Verteilung nach Gerätetyp. Das gibt das Gewicht für die Arbeit.

1. Stellen Sie das Startbild klein ein. Beim ersten Laden sollte nur ein kleines Symbol sichtbar sein, nicht das ganze Fenster. Fragen Sie Ihren Anbieter, ob sich die Grösse einstellen lässt.

1. Prüfen Sie die Platzierung. Das Symbol sollte nicht über wichtigen Schaltflächen liegen, etwa «Anrufen», «Bestellen» oder dem Cookie-Hinweis. Verschieben Sie es nötigenfalls.

1. Testen Sie das geöffnete Fenster. Öffnen Sie den Chat auf einem echten Handy. Passt er auf den Bildschirm? Lässt sich das Fenster klar schliessen, und kommt man danach zurück zur Seite?

1. Testen Sie die Tastatur. Tippen Sie in das Eingabefeld. Bleibt es sichtbar, wenn die Tastatur erscheint? Sieht man die letzte Antwort des Chatbots noch?

1. Drehen Sie das Gerät. Prüfen Sie Hoch- und Querformat. Im Querformat ist wenig Platz, das Fenster darf nicht abgeschnitten sein.

1. Prüfen Sie Texte und Links. Lange Antworten sind auf dem Handy mühsam. Bitten Sie den Chatbot um kurze Antworten mit Link, siehe Links statt langer Antworten.

1. Prüfen Sie die Ladezeit. Messen Sie mit einem mobilen Test, ob die Seite durch das Chatfenster langsamer wird, siehe Chatbot macht Website langsam.

Vorlage zum Kopieren

Diese Vorlage erstellt einen Testplan für Ihr Team:

Du bist Qualitätsprüfer für Websites. Erstelle einen Testplan für den mobilen Test eines Chatbot-Fensters, geeignet für Personen ohne IT-Kenntnisse.

Website: [Branche und Zweck, z. B. Online-Shop für Bergsportbekleidung]
Wichtige Schaltflächen auf der Website: [z. B. In den Warenkorb, Anrufen, Menü]
Geräte im Team: [z. B. iPhone, Android-Handy, Tablet]

Erstelle eine Tabelle mit den Spalten: Nr., Testschritt, erwartetes Ergebnis, Ergebnis (leer), Bemerkung (leer).
Berücksichtige mindestens: Platzierung des Symbols, Öffnen und Schliessen, Tastatur, Querformat, Scrollen, Antworttext, Links, Ladezeit, Bedienung mit grossen Schrifteinstellungen.
Schreibe jeden Schritt in einem Satz, ohne Fachbegriffe.

Setzen Sie Ihre wichtigsten Schaltflächen ein. Lassen Sie drei Personen mit unterschiedlichen Geräten den Plan durchgehen.

Worauf Sie achten müssen

• Kleiner Bildschirm, kurze Antworten: Lange Absätze lesen sich schlecht. Fordern Sie kurze Antworten mit Links.
• Grosse Schrift: Menschen mit grosser Systemschrift sehen das Fenster anders. Testen Sie auch diese Einstellung.
• Bedienbarkeit: Schaltflächen müssen mit dem Daumen treffbar sein. Zu kleine Tasten führen zu Fehlern. Siehe auch Barrierefreiheit.
• Datenvolumen und Ladezeit: Mobile Verbindungen sind oft langsamer. Ein schweres Skript bremst die Seite.
• Cookie-Hinweis: Prüfen Sie, dass Hinweisbanner und Chatsymbol sich nicht überlagern.
• Kein Ersatz für Kontakt: Zeigen Sie am Handy sichtbar eine Telefonnummer an, die man antippen kann.

Ein Beispiel aus der Praxis

Ein Beispiel: Ein Möbelgeschäft in Luzern hat einen Chatbot auf der Website. Beim Test mit dem Handy stellt die Inhaberin fest, dass das Chatsymbol den Knopf «In den Warenkorb» verdeckt.

Vorher: Das Chatfenster öffnet beim Laden gross und liegt über der Bestellschaltfläche. Mehrere Kunden brechen ab. Nachher: Das Symbol ist klein und links unten platziert. Antworten des Chatbots sind kürzer und verweisen auf Produktseiten. Zwei Mitarbeitende und eine Kundin testen die Änderungen auf ihren eigenen Handys. Seitdem gibt es weniger Abbrüche im Bestellvorgang, und das Team prüft nach jeder Änderung neu.

So hilft Ihnen Alpasana

Wenn Chatfenster, Website und mobile Darstellung zusammenpassen sollen, hilft die KI-Beratung und digitale Transformation der Alpasana GmbH. Nach Leistungsbeschreibung gehören dazu Websites und Web-Apps mit Struktur, UX/UI, Umsetzung, Go-Live und Betreuung sowie die Integration von KI-Agenten mit Pilot und Einsatzregeln. Projekte werden individuell offeriert.

Häufige Fragen

Muss der Chatbot am Handy genauso aussehen wie am Computer?

Nein. Am Handy sollte er einfacher sein: kleiner Start, kurze Antworten, grosse Schaltflächen. Wichtig ist, dass die Bedienung klar bleibt und nichts Wichtiges verdeckt wird.

Reicht es, die Seite im Browser am Computer klein zu ziehen?

Das zeigt einen ersten Eindruck, ersetzt aber keinen Test auf echten Geräten. Tastatur, Daumenbedienung und Verhalten beim Scrollen sehen Sie nur auf dem Handy selbst.

Soll ich den Chatbot auf dem Handy ganz abschalten?

Das ist möglich, wenn er sich nicht sauber darstellen lässt. Bieten Sie dann einen anderen Weg an, etwa einen Anruf-Knopf oder ein einfaches Formular. Prüfen Sie aber zuerst, ob sich das Problem beheben lässt.

Wie oft sollte ich den Chatbot auf dem Handy neu testen?

Nach jeder Änderung an Website oder Chatbot und zusätzlich einmal pro Quartal. Handys und Browser werden laufend aktualisiert, und manchmal verändert sich dadurch das Aussehen, ohne dass Sie selbst etwas getan haben.