Best Practices für den mobilen Produkt-Customizer
Optimieren Sie Ihren Produkt-Customizer für mobile Käufer – Layout, Elementgrößen, Modulauswahl und Tests.
70–80 % Ihrer Kunden kaufen auf mobilen Geräten ein. Wenn der Produkt-Customizer auf einem Smartphone schwer zu bedienen ist, verlieren Sie Verkäufe. Dieser Artikel behandelt praktische Änderungen, die das mobile Anpassungserlebnis verbessern.
Übersicht
Der Produkt-Customizer skaliert automatisch auf kleinere Bildschirme. Die Einstellung Auto-Resize Canvas in Chamevo > Settings > Layout (standardmäßig aktiviert) passt die Canvas-Größe an die Container-Breite an. Responsive Skalierung allein reicht jedoch nicht aus – Sie müssen Elementgrößen, Tipp-Ziele, Modulanzahl und Tests berücksichtigen.
Canvas- und Elementgrößen
Legen Sie Ihre Canvas-Abmessungen zunächst für den größten Bildschirm fest. Sie konfigurieren die Canvas-Größe pro Ansicht im Product Builder oder legen Standardwerte in Chamevo > Settings > Advanced unter Default Canvas Width und Default Canvas Height fest. Der Customizer skaliert dies auf Mobilgeräten proportional herunter. Eine Canvas, die bei 900 px Breite gut aussieht, kann Elemente haben, die bei 360 px zu klein zum Antippen sind.
- Textelemente groß genug zum Lesen bei 40 % Skalierung machen. Wenn Ihre Canvas 900 px breit ist und ein Smartphone sie bei ~360 px darstellt, sind das etwa 40 % der Originalgröße. Eine 14-px-Schriftart auf der Canvas wird auf dem Bildschirm zu etwa 6 px – zu klein. Verwenden Sie 24 px oder größer für kundenseitig bearbeitbaren Text.
- Elemente auseinanderhalten. Die Tippgenauigkeit 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.
- Überlappende Elemente vermeiden. Überlappende Elemente sind auf Mobilgeräten frustrierend. Kunden können nicht zuverlässig auf das gewünschte Element tippen.
Modulauswahl
Jedes Modul fügt der Oberfläche ein Panel hinzu. Auf Mobilgeräten überfordern zu viele Module den Bildschirm und verursachen Verwirrung.
- Auf 3–4 Module begrenzen. Der Standard-Satz (Text, Images, Graphics, Layers) funktioniert gut. Das gleichzeitige Hinzufügen von Names & Numbers, My Designs und Pixabay erzeugt eine überfüllte mobile Oberfläche.
- Nicht benötigte Module entfernen. Wenn Ihr Produkt nur Textanpassung hat, deaktivieren Sie die Module Images und Graphics. Bearbeiten Sie Ihr Print Profile in Chamevo > Print Profiles, öffnen Sie den Tab und verwenden Sie die Einstellung , um bestimmte Module auszublenden.