Auf einem Smartphone muss sich Social Proof einen kleinen Bildschirm mit dem teilen, wofür die Käuferin gekommen ist. Die Regeln sind daher strenger als auf dem Desktop: immer nur ein Element sichtbar, kurz gehalten, weg von den Buttons für Warenkorb und Bezahlung platziert und mit einem Tippen zu schließen. Das Widget von Provedly folgt diesen Regeln standardmäßig, und dieser Beitrag erklärt die Gründe hinter jeder, damit du die Einstellungen mit Blick auf die Abwägungen anpassen kannst.
Die Einschränkung. Eine Produktseite auf dem Desktop hat in den Ecken Platz für einen Toast, oben Platz für eine Leiste und neben dem Kauf-Button Platz für einen Zähler, alles gleichzeitig. Ein Smartphone nicht. Der Viewport ist ein paar hundert Pixel breit, der Daumen verdeckt das untere Drittel, und ein fixiertes Element oben oder unten nimmt einen spürbaren Teil des Rests ein.
Jedes Social-Proof-Element auf dem Smartphone konkurriert also direkt mit deinem eigenen Inhalt. Die Designfrage lautet nicht „wie viel Proof können wir zeigen“, sondern „was ist das Minimum, das den Zweck noch erfüllt“.
Regel 1: niemals stapeln
Desktop-Widgets zeigen manchmal zwei oder drei Toasts übereinander in einer Ecke. Auf einem Smartphone ist das eine Wand. Provedly zeigt einen Toast nach dem anderen, und der nächste wartet die Pause ab, standardmäßig 30 Sekunden. Nutzt du zusätzlich eine Leiste, halte sie am gegenüberliegenden Rand vom Toast, damit sich beide nie überlappen.
Fährst du während eines Sales eine Countdown-Leiste, überleg, für diese Zeit das Toast-Limit auf dem Smartphone zu senken, damit die Seite nicht von zwei bewegten Elementen eingerahmt wird. Mit dem Geräte-Targeting kannst du auf dem Smartphone eine andere Konfiguration anwenden als auf dem Desktop; die Einstellung gilt pro Widget.
Regel 2: kurz halten
Ein Desktop-Toast kann ein Produktbild, einen Namen, eine Stadt, einen Produkttitel, eine Zeitangabe und die Verifizierungskennzeichnung tragen. Auf dem Smartphone bricht derselbe Toast auf drei Zeilen um und verdeckt mehr von der Seite, als er sollte.
Beschränke den Toast auf dem Smartphone auf das Wesentliche: „Jemand in Austin hat gekauft“ und den Produkttitel, die Zeit und die Kennzeichnung „Verifizierter Kauf“. Die Kennzeichnung bleibt, denn um sie geht es; sie verlinkt auf die öffentliche Verifizierungsseite, und eine Käuferin, die darauf tippt, sollte die Quellen, Anzahlen und den letzten verifizierten Kauf sehen, keine abgeschnittene Version. Erscheinen Namen in einem Shopify-Shop als „Someone“, liegt das am Protected Customer Data Program; /de/blog/shopify-someone-protected-customer-data erklärt das.
Schreib für Leisten eigene Texte fürs Smartphone. „30 % auf alles, endet in 06:14:22“ passt auf ein Smartphone. „Unser größter Sale des Jahres endet in 06:14:22, nutze den Code AUTUMN im Checkout“ passt nicht, und die Leiste bricht entweder auf zwei Zeilen um oder schneidet genau den Teil ab, auf den es ankam.
Regel 3: den Buttons aus dem Weg gehen
Der Warenkorb-Button auf einer mobilen Produktseite steht meist entweder im Inhaltsfluss oder ist unten am Viewport fixiert. Ein Toast, der darüber erscheint, und sei es nur für sechs Sekunden, ist ein Hindernis im genau falschen Moment.
Fixiert dein Theme seinen Button unten, positioniere den Toast so, dass er diese Leiste freilässt, statt sie zu verdecken. Der obere Rand ist eine alternative Platzierung, die den Daumenbereich ganz meidet, allerdings näher an der Navigation liegt.
Im Checkout ist die Antwort einfacher: ausschließen. /de/blog/social-proof-on-checkout-page erklärt, warum.
Regel 4: mit einem Tippen schließen, und sich das merken
Ein Toast, den die Käuferin nicht schließen kann, hält sie als Geisel. Jeder Toast braucht ein Schließen-Element, das groß genug für einen Daumen ist, und wer einen schließt, sollte für den Rest der Sitzung keine weiteren Toasts sehen. Das Limit pro Sitzung (standardmäßig 5) ist eine Obergrenze; das Schließen ist eine Untergrenze, die die Käuferin selbst steuert.
Leisten brauchen dasselbe Schließen-Element, und eine geschlossene Leiste sollte für die Sitzung geschlossen bleiben, statt beim nächsten Seitenaufruf wieder aufzutauchen.
Regel 5: die Signale des Geräts respektieren
- Reduzierte Bewegung. Ist im Betriebssystem „Bewegung reduzieren“ aktiviert, ist ein Einblenden schonender als ein Hereingleiten.
- Scrollen. Ein Toast, der erscheint, während jemand aktiv scrollt, wird eher versehentlich angetippt. Die anfängliche Verzögerung von 3 Sekunden dient auch dazu; sie gibt der Seite Zeit, zur Ruhe zu kommen.
- Ausrichtung. Smartphones im Querformat haben noch weniger vertikalen Platz, also gelten dieselben Regeln.
Einstellungen, die sich fürs Smartphone lohnen
| Einstellung | Desktop-Standard | Vorschlag fürs Smartphone |
|---|---|---|
| Anfängliche Verzögerung | 3 s | 3 bis 5 s |
| Anzeigedauer | 6 s | 5 bis 6 s |
| Pause zwischen Toasts | 30 s | 45 s oder mehr |
| Limit pro Sitzung | 5 | 2 oder 3 |
| Platzierung | Untere Ecke | Abseits jeder fixierten Button-Leiste |
| Live-Zähler | Angezeigt, wenn über Minimum | Angezeigt, aber im Inhalt statt schwebend |
Das sind Vorschläge, keine Regeln, und der ehrliche Weg, sie festzulegen, ist ein Test. /de/blog/ab-testing-social-proof-honestly beschreibt einen Split-Test, der abgeschlossene Bestellungen misst statt Toast-Klicks. Das ist auf dem Smartphone besonders wichtig, wo versehentliches Antippen die Interaktionszahlen aufbläht.
Performance in Mobilfunknetzen. Das Skript ist gzip-komprimiert etwa 6 KB groß, lädt asynchron und rendert in einem Shadow DOM, blockiert also die Seite nicht und kommt dem CSS deines Themes nicht in die Quere. Bei einer langsamen Verbindung ist das Widget unter Umständen noch nicht geladen, wenn ein schnell abspringender Besucher geht. Dann wird nichts angezeigt und keine Impression gezählt. Das ist das richtige Verhalten im Fehlerfall. /de/blog/theme-app-embed-vs-script-tag zeigt, wie das Skript speziell auf Shopify geladen wird.
Was du auf dem Smartphone lassen solltest.
- Toasts in voller Breite, die den Inhalt verdecken.
- Gestapelte Toasts.
- Eine Leiste und ein Toast am selben Rand.
- Toasts ohne Schließen-Element.
- Ein geschlossenes Element auf der nächsten Seite erneut zeigen.
- Ein Zähler, der über dem Warenkorb-Button schwebt.
- Irgendetwas davon im Checkout.
Häufige Fragen
Kann ich das Widget auf dem Smartphone ganz ausschalten?
Ja. Mit dem Geräte-Targeting zeigst du ein Widget nur auf dem Desktop, nur auf dem Smartphone oder auf beiden. Manche Shops mit sehr engen mobilen Layouts zeigen Toasts auf dem Desktop und auf dem Smartphone nur den Zähler.
Passt die Kennzeichnung „Verifizierter Kauf“ noch auf einen mobilen Toast?
Ja. Sie ist das eine Element, das nie gekürzt wird, weil sie der Link zur Verifizierungsseite ist.
Verdeckt der Toast Shopifys fixierte Warenkorb-Leiste?
Das sollte er nicht. Positioniere den Toast so, dass er diese Leiste freilässt, oder setz ihn an den oberen Rand, und prüf das vor dem Veröffentlichen auf einem echten Smartphone.
Setz ein niedriges Limit fürs Smartphone, prüf die Platzierung auf einem echten Gerät und teste dann; der Free-Plan unter /de/pricing reicht für den Anfang.