70–80 % Ihrer Kunden kaufen über Mobilgeräte ein. Wenn der Produkt-Customizer auf dem Smartphone schwer zu bedienen ist, verlieren Sie Verkäufe. Dieser Artikel behandelt praktische Anpassungen, die das mobile Personalisierungserlebnis verbessern.

Übersicht

Der Produkt-Customizer skaliert automatisch auf kleinere Bildschirme – die Canvas passt sich an die Breite des Containers an, ohne dass eine Einstellung dafür nötig ist. Responsives Skalieren allein reicht jedoch nicht aus – Sie müssen auch Elementgrößen, Tap-Ziele, Modulanzahl und Tests berücksichtigen.

Canvas- und Elementgrößen

Legen Sie Ihre Canvas-Abmessungen zuerst für den größten Bildschirm fest. Sie konfigurieren die Canvas-Größe pro Ansicht im Product Builder oder legen Standardwerte unter Chamevo > Settings > Advanced > Miscellaneous unter Default Canvas Width und Default Canvas Height fest. Der Customizer skaliert dies proportional auf Mobilgeräten herunter. Eine Canvas, die bei 900 px Breite gut aussieht, kann bei 360 px Breite Elemente enthalten, die zu klein zum Antippen sind.

• Machen Sie Textelemente groß genug, um bei 40 % Skalierung lesbar zu sein. Wenn Ihre Canvas 900 px breit ist und ein Smartphone sie bei ca. 360 px darstellt, entspricht das etwa 40 % der Originalgröße. Eine 14-px-Schrift auf der Canvas wird auf dem Bildschirm zu etwa 6 px – zu klein. Verwenden Sie 24 px oder größer für vom Kunden bearbeitbaren Text.
• Platzieren Sie Elemente mit ausreichend Abstand. Die Tap-Genauigkeit auf Mobilgeräten ist geringer als bei Mausklicks. Lassen Sie mindestens 40 px Canvas-Abstand zwischen Elementen, damit Kunden eines auswählen können, ohne versehentlich ein anderes zu treffen.
• Vermeiden Sie überlappende Elemente. Überlappende Elemente sind auf Mobilgeräten frustrierend. Kunden können nicht zuverlässig das gewünschte Element antippen.

Modulauswahl

Jedes Modul fügt der Oberfläche ein Panel hinzu. Auf Mobilgeräten überladen zu viele Module den Bildschirm und sorgen für Verwirrung.

• Beschränken Sie sich auf 3–4 Module. Die Standardauswahl (Products, Images, Text, Designs) funktioniert gut. Das gleichzeitige Hinzufügen von Names & Numbers, My Designs und Bulk Variations erzeugt eine überladene mobile Oberfläche.