8 Beispiele für mobile Zielseiten, die Sie selbst inspirieren können

Im dritten Quartal 2021 kauften 30 % der Weltbevölkerung mit Zugang zum Internet Waren über ein mobiles Gerät.

Da sich immer mehr Menschen dafür entscheiden, ihre Smartphones für Online-Shopping zu verwenden, ist es entscheidend, ein nahtloses mobiles Erlebnis zu schaffen, damit Sie mehr von diesem mobilen Traffic in Verkäufe umwandeln können.

Aber das Erstellen einer mobilen Zielseite mit hoher Konversionsrate erfordert einen anderen Ansatz, andere Fähigkeiten und Designtaktiken als das, was Sie für die Desktop-Version verwenden würden.

Wie optimieren Sie also eine mobile Zielseite und was sollten Sie beim Erstellen Ihrer beachten?

Um Ihnen Zeit zu sparen, haben wir Hunderte von Websites durchsucht, um die besten Beispiele für leistungsstarke mobile Zielseiten zu finden. Sie werden sehen, was sie großartig macht, und erfahren, was Sie tun können, um ihren Erfolg zu wiederholen.

Schauen wir uns zunächst einige Beispiele für großartige mobile Zielseiten an.

Sie werden sehen, dass wir ihre mobile Vorschau hinzugefügt haben, und in einigen Fällen haben wir unterstützende Screenshots der Desktop-Version hinzugefügt, um wichtige Unterschiede zwischen den Designs zu veranschaulichen.

1. Simply Chocolate: beeindruckende Designleistung

Simply Chocolate ist eine E-Commerce-Marke, die Premium-Schokoladenprodukte verkauft.

Was macht es großartig:

• Ein komplexes Design, das auf Mobilgeräten gut funktioniert: Dieses Grafikdesign-Projekt ist ein Meisterwerk. Es enthält Animationen, hochwertige Bilder und einige interaktive Elemente. Dies sind die Elemente, von denen Sie erwarten würden, dass sie Ihre Ladegeschwindigkeit verringern, aber Simply Chocolate hat es geschafft, das Design so einzuführen, dass die Ladegeschwindigkeit hoch bleibt, ohne die Qualität zu beeinträchtigen.
• Ein visueller Zeiger : Wenn Sie darauf klicken, sehen Sie eine Vorschau des Produkts. Sie können die Schokolade dann sehen, als ob Sie sie gerade ausgepackt und hineingebissen hätten. Das ist genug, um Sie davon zu überzeugen, ein paar Riegel in Ihren Einkaufswagen zu legen!
• Die Idee, Produkte zu präsentieren, um zum Kauf anzuregen: Das Hauptziel dieser Zielseite ist es, Sie für eine Vielzahl von Produkten zu interessieren. Sobald Sie auf „Jetzt einkaufen“ klicken, werden Sie zu einem Online-Shop weitergeleitet, in dem Sie Produkte zu Ihrem Warenkorb hinzufügen können. Produkte zuerst zu präsentieren, um zum Kauf anzuregen, ist eine großartige Möglichkeit, sich von Tausenden anderer Marken abzuheben, die ähnliche Produkte verkaufen.

2. Curology: ein CTA, der seine Aufgabe erfüllt

Curology ist eine Marke, die kundenspezifische Kosmetik und Beratungen mit Dermatologen anbietet. Diese Marke verwendet Tests, um Informationen über Hauterkrankungen zu sammeln und ein personalisiertes Produkt anzubieten.

Was macht es großartig:

• Ein unkomplizierter CTA, der einen Vorteil kommuniziert: Sie können Curology die ersten 30 Tage kostenlos nutzen und zahlen nur 4,95 $ Versandkosten.
• Dynamischer Titel : Der Titel kommuniziert verschiedene Probleme, die Menschen haben: ungleichmäßiger Hautton, Mitesser, Pickel, Falten. Das lässt den Titel bei allen ankommen.
• Kurzer und prägnanter Text: Sie halten ihren Text kurz und reduzieren ihn auf wenige Textzeilen. Auf diese Weise versteht der Besucher schnell, welche Dienstleistungen sie anbieten und was ihr einzigartiges Wertversprechen ist.

3. Rover: Ersetzen von Filtern mit einer Taste

Rover ist ein Marktplatz, der Tierbesitzer mit Tiersittern verbindet, die nach Jobs suchen.

Was macht es großartig:

• Ersetzen von Filtern mit einer Schaltfläche: Auf der Desktop-Version ihrer Website sehen Sie Filter, die Ihnen helfen, Ihre Kriterien für einen Tiersitter zu definieren. Beim Betrachten der Website auf einem kleinen Bildschirm würden Benutzer mit einer Informationsüberflutung konfrontiert, wenn sie ein ähnliches Layout sehen würden. Rover entfernt die Filter in seiner mobilen Version, um die Aufmerksamkeit der Benutzer auf ihr Leistungsversprechen zu lenken. Die Filter werden angezeigt, nachdem Sie auf den Haupt-CTA geklickt haben.
• Suchoptionen auf eine separate Seite verschieben : Sobald Sie auf den Haupt-CTA klicken, werden Sie auf eine separate Seite weitergeleitet, auf der Sie Ihre Kriterien anwenden können. Dies ist eine gute Lösung, da das Formular ziemlich viel Platz einnimmt.
• Ein klarer CTA : Ihr CTA ist sehr spezifisch und hebt das genaue Ergebnis hervor, das ein Benutzer nach dem Klicken auf die Schaltfläche erwarten kann. Sie vermeiden es, generische Sprache zu verwenden.

4. Canva: Komplexe Elemente entfernen

Canva ist ein Online-Tool, mit dem Sie professionelle Designs ohne Grafikdesign-Kenntnisse erstellen können.

Was macht es großartig:

• Halten Sie die mobile Version einfach: Wenn Sie die Desktop- und mobile Version der Canva-Website vergleichen, werden Sie schnell feststellen, dass der mobilen Version das Vorlagenkarussell und die Suchleiste fehlen. Das liegt daran, dass das Beibehalten dieser Elemente auf einer mobilen Version die Seite unübersichtlich machen und die Benutzer vom Hauptziel von Canva ablenken würde: neue Benutzer dazu zu bringen, ein Konto zu erstellen.
• Das Hervorheben des Haupt-CTA : Durch die farbliche Hervorhebung des Buttons hebt er sich vom restlichen Inhalt ab.
• Effektive Nutzung von Leerraum: Canva führt mehr vertikale Leerräume ein, was dazu beiträgt, die Aufmerksamkeit der Benutzer auf den CTA zu lenken.

5. Mixpanel: Auf Anhieb Vertrauen schaffen

Mixpanel ist ein Produktanalysetool, das Unternehmen hilft, das Benutzerverhalten zu verstehen, indem es Benutzerinteraktionen im Internet und auf Mobilgeräten verfolgt .

Was macht es großartig:

• Verschieben von Logos hochkarätiger Kunden auf der Seite nach oben: Mixpanel hat sich entschieden, diese Logos in seiner mobilen Version anzuzeigen, damit Benutzer, die gerade die Seite betreten haben, einen sofortigen Vertrauensschub erhalten, um Mixpanel weiter zu erkunden.
• Verzicht auf komplexe Animationen auf Mobilgeräten : Die Desktop-Version von Mixpanel ist reichhaltiger an Animationen. Einige der animierten Elemente sind schwierig auf die mobile Version zu übertragen und würden höchstwahrscheinlich die Ladegeschwindigkeit erhöhen, daher wurden sie auf ein Minimum reduziert.

6. Ballsy: eine kreative Nutzung mobiler Popups

Ballsy ist eine E-Commerce-Marke, die Pflegeprodukte für „Männerteile“ verkauft. In ihrem Online-Shop finden Sie Duschgel, Trimmer, Deodorants und weitere Produkte für die Männerhygiene.

Was macht es großartig:

• Verwendung mobiler Popups: Ballsy verwendet Popups, um E-Mail-Adressen und Telefonnummern von Erstbesuchern zu sammeln. Es ist mehrstufig: Zuerst wird dem Benutzer ein Rabatt von 10 % für die Eingabe einer E-Mail-Adresse angeboten, und als nächstes wird ihm die Möglichkeit gegeben, eine US-Telefonnummer für einen noch höheren Rabatt von 15 % einzugeben.
• Verwendung eines Anreizes : Einige Marken fragen immer noch nach einer E-Mail-Adresse, ohne eine Gegenleistung anzubieten. Wie Sie sich vorstellen können, ist die Konversionsrate dieser Popups relativ niedrig. Im Gegenteil, durch das Angebot von Rabatten auf Produkte im Austausch für persönliche Informationen stellt Ballsy sicher, dass seine Popups eine bessere Konversionsrate haben.
• Sofortiger Zugriff auf den Code: Sie müssen nicht Ihre E-Mails abrufen oder Ihr Abonnement bestätigen, um auf Ihren Rabattcode zuzugreifen – Ballsy zeigt den Code sofort an, nachdem Sie Ihre E-Mail-Adresse oder Telefonnummer eingegeben haben, sodass Sie sofort weiter einkaufen können.

7. MVMT: visuelles mobiles Menü

MVMT ist eine E-Commerce-Marke, die hochwertige Uhren, Brillen und Accessoires verkauft.

Was macht es großartig:

• Visuelles Menü: Sie fügen ihrem Menü visuelle Elemente hinzu, was bedeutet, dass Benutzer sofort wissen, auf welchen Link sie klicken müssen, ohne nachzudenken.
• Geolokalisierung : Benutzer können ihr Lieferland basierend auf dem Standort anpassen und in ihrer Landeswährung einkaufen.

8. RingCentral: intuitive Dienstbildschirme

RingCentral ist eine der bekanntesten Unified-Communications-Lösungen , die Teams dabei unterstützt, über jedes Gerät zu kommunizieren, einschließlich Computer und Smartphones. Es ist ein Ersatz für herkömmliche Festnetztelefone.

Was macht es großartig:

• Vereinfachte Dienstbildschirme: Sie haben die Schaltflächen mit den Diensten ausgetauscht und ein Dropdown-Menü verwendet. Dies ist ein gängiger Trick, der dabei hilft, das mobile Erlebnis für Ihre Benutzer zu optimieren . Auf diese Weise können Benutzer Dienste auf ihren Mobilgeräten genauso bequem durchsuchen wie auf einer Desktop-Website.
• Gute Verwendung von Fußzeilen-Links : Das Desktop-Fußzeilenmenü enthält viele Links, die zu wichtigen Produktseiten führen. Auf Mobilgeräten würde die Einbeziehung all dieser Fußzeilen-Links die Seite zu lang machen. Sie lösen dies, indem sie diese Links in einem Dropdown-Menü unter Kernkategorien ausblenden.

Nachdem Sie nun einige großartige Beispiele gesehen haben, ist es an der Zeit, über Ihre eigenen mobilen Zielseiten nachzudenken. Wir haben einige Tipps und Best Practices zum Erstellen mobiler Landingpages zusammengestellt, die Sie noch heute befolgen können.

1. Erhöhen Sie die Ladegeschwindigkeit der Seite

Wie lange warten Benutzer auf das Laden einer Seite? Hier ist ein Hinweis: Sie werden nicht länger als fünf Sekunden herumhängen. Niemand mag langsame Seiten und sie beeinträchtigen Ihre Conversion-Rate. Wie können Sie also die Ladegeschwindigkeit auf Mobilgeräten verbessern?

Überprüfen Sie zunächst den Gesamtzustand Ihrer Zielseite mit Google PageSpeed ​​Insights .

Sobald Sie Ihre URL hinzugefügt haben, erhalten Sie einen Bericht über alle kritischen Probleme, die mobile Benutzer erleben. Sie sollten daran arbeiten, sie zu beseitigen und Ihren Page Health Score zu erhöhen.

Sie können diesen Domain-Scanner auch verwenden , um technische Probleme im Zusammenhang mit DMARC-, SPF-, DKIM- und BIMI-Einträgen zu identifizieren.

2. Seien Sie prägnant

Auf kleineren mobilen Bildschirmen kann das Einfügen von viel Text Ihre Seite zu lang machen.

Denken Sie daran, dass die Aufmerksamkeitsspanne der Benutzer geringer sein kann, wenn sie Ihre Website unterwegs besuchen, z. B. auf dem Weg zur Arbeit oder unterwegs. Deshalb ist es wichtig, eine prägnante Kopie zu verwenden.

Und denken Sie daran, dass auch Ihre Desktop-Version davon profitieren kann, die Dinge kurz zu halten!

Hier sind einige Schritte zu befolgen:

• Beschreiben Sie Ihr Leistungsversprechen in der Überschrift der Seite.
• Schreiben Sie kurze Absätze, die leicht verständlich sind. Lassen Sie den Fachjargon hinter sich und schreiben Sie, als würden Sie einem Zehnjährigen eine Geschichte erzählen.
• Sei präzise.
• Schreiben Sie kurze Sätze oder unterteilen Sie längere Sätze in kürzere.

3. Erstellen Sie ein separates Design für Mobilgeräte

Wenn Sie mit einem Grafikdesigner an Ihrer UX und UI arbeiten, stellen Sie sicher, dass Sie dem Briefing eine mobile Kopie hinzufügen. Das Erstellen eines responsiven Designs ist nicht so zeitaufwändig oder kostspielig, aber es erfordert UX- und UI-Kenntnisse, um alle Details zu berücksichtigen.

Die besten Grafikdesign-Tools helfen bei der Anpassung von Webversionen an mobile Versionen und verfügen über die erforderlichen Funktionen, um auf eine mobile Benutzeroberfläche umzusteigen.

In einigen Fällen benötigt Ihre mobile Version eine andere Designlösung. In anderen müssen Sie nur Ihre Animationselemente vereinfachen oder die Komplexität von Grafiken bei Bedarf reduzieren.

4. Vermeiden Sie generische Sprache in Ihrem CTA

Auf welche Schaltfläche würden Sie klicken: „Registrieren“ oder „Kostenlosen Zugang erhalten“? Es besteht eine hohe Wahrscheinlichkeit, dass Sie auf einen CTA klicken, der einen gewissen Wert vermittelt, weil Sie sich (wie jeder) fragen: „Was habe ich davon?“

Allgemeinere CTAs wie „Registrieren“ oder „Jetzt starten“ vermitteln einem Benutzer nicht viel Wert und haben höchstwahrscheinlich eine niedrigere Conversion-Rate im Vergleich zu der spezifischeren Schaltfläche.

Vermeiden Sie generische Sprache im Schaltflächentext und konzentrieren Sie sich stattdessen darauf, die Vorteile zu kommunizieren, die ein Benutzer erhält, wenn er die gewünschte Aktion ausführt. Genau das tut Curology auf seiner mobilen Zielseite:

5. Verwenden Sie mobile Popups

Wenn Sie Pop-ups bereits für Ihre Desktop-Version verwenden, sehen Sie sich an, wie sie auf Mobilgeräten aussehen werden. Stellen Sie sicher, dass sie auf kleineren Bildschirmen reaktionsschnell und einfach zu bedienen sind. Halten Sie den Text auf ein Minimum.

„Denken Sie daran, dass Sie immer zwei verschiedene Popup-Optionen erstellen können – sowohl für Web- als auch für mobile Versionen, sodass Sie die Größe der Bildschirme berücksichtigen können. Daher werden sowohl Web- als auch Mobilbenutzer keine Probleme bei der Eingabe von Informationen in Popup-Felder haben“, sagt Farnam Elyasof, Gründer von Flex Suits .

In OptiMonk können Sie beispielsweise ganz einfach auswählen, auf welchen Geräten Ihre Popups angezeigt werden sollen.

Außerdem sind alle OptiMonk-Popups mobilfreundlich. Schauen Sie sich dieses mobile Popup von BlendJet an, das mit OptiMonk erstellt wurde:

6. Verwenden Sie Kurzformen

Das Ausfüllen von Informationen auf einem kleinen Bildschirm kann ziemlich frustrierend werden. Aus diesem Grund ist es ein sicherer Weg, einen Kunden zu verlieren, wenn Sie in Ihren Online-Formularen nach zu vielen Informationen fragen.

Wenn Sie bereits Kontaktformulare zur Generierung von Leads verwenden, suchen Sie möglicherweise nach Möglichkeiten, deren Effizienz und Konversionsrate zu steigern. Beginnen Sie damit, Ihre Formulare kürzer zu gestalten, und fragen Sie nur nach den wichtigsten Informationen.

Aber was ist, wenn Sie mehr Informationen über Ihren Kunden sammeln müssen und Sie nicht vermeiden können, mehr Felder zu verwenden?

Teilen Sie sie dann in separate Popup-Bildschirme oder „Schritte“ auf und fügen Sie einen Fortschrittsbalken hinzu.

Durch die Verwendung separater Popup-Bildschirme ist jedes Feld groß genug, um Informationen einzugeben. Und durch die Verwendung eines Fortschrittsbalkens wissen Ihre Benutzer immer, wie weit sie vom Ausfüllen des Formulars entfernt sind. Infolgedessen sollte Ihre Abwanderungsrate in jeder Phase sinken.

7. Vergessen Sie nicht das konsistente Branding

Wenn Ihr Logo auf einem Mobilgerät zu groß oder sehr komplex aussieht, sollten Sie eine andere Version für die Verwendung auf kleineren Bildschirmen erstellen.

Es gibt verschiedene Möglichkeiten, Logos, die auf einem Desktop gut aussehen, für kleine Bildschirme anzupassen, aber es ist wichtig, daran zu denken, Vektorbilder zu verwenden, da sie klein, skalierbar und bearbeitbar sind.

In den meisten Fällen möchten Sie mit einem Designer zusammenarbeiten, der Ihren Unternehmens-Styleguide überprüft und seine Fähigkeiten einsetzt, um ein Logo zu erstellen, das für die mobile Verwendung geeignet ist.

Wenn dies jedoch keine Option ist, finden Sie hier einige Tipps, die bei der Erstellung Ihres Logos ohne Grafikdesign-Kenntnisse hilfreich sein können:

• Verwenden Sie horizontale Logos: Verschieben Sie visuelle Elemente von oberhalb des Textes nach links oder rechts.
• Details reduzieren : Erhöhen Sie die Lesbarkeit, indem Sie auf einige weniger wichtige Logoelemente verzichten.
• Kleinen Text entfernen : Entfernen Sie kleinen Text im Logo, der auf kleineren Bildschirmen nicht lesbar ist.

8. Verwenden Sie für Mobilgeräte optimierte Schriftarten

Wenn es um den Inhalt der Seite auf mobilen Geräten geht, sind nicht alle Schriftarten gleich . Wenn Sie eine schwer lesbare Schriftart verwenden, sollten Sie sie durch eine für Mobilgeräte optimierte Option ersetzen, z. B.:

• Sans öffnen
• Roboter
• Montserrat
• Lato
• Adobe Garamond
• Baskerville
• Computermodern
• Georgia
• Trebuchet

9. Wählen Sie eine sichere „Daumenzone“

Der Versuch, auf einem iPhone mini auf kleine Schaltflächen zu klicken, kann zu einem Alptraum werden. Sie können vermeiden, dass Ihre Zielseite für Benutzer zu einer Quelle der Frustration wird, wenn Sie daran denken, eine sichere „Daumenzone“ in den Bereichen einzubauen, in denen Sie erwarten, dass ein Benutzer klickt.

Was ist die Daumenzone und warum sind Mobile-Designer so besessen von diesem Begriff?

Der Begriff „Daumenzone“ wurde von Steven Hoober in seinem 2011 erschienenen Buch „Designing Mobile Interfaces“ geprägt. Die Daumenzone wurde als der Bereich definiert, in dem ein Benutzer am bequemsten klicken kann, wenn er ein Telefon mit einem Finger verwendet.

Hier befindet sich die Daumenzone für verschiedene Benutzer:

Bei der Gestaltung Ihres mobilen Erlebnisses müssen Sie bedenken, dass die Elemente, auf die die Benutzer klicken sollen, im „natürlichen“ Bereich liegen sollten.

10. Verwenden Sie Leerraum

Weißraum wird oft als Leinwand wahrgenommen, auf der Text, Bilder und andere Inhalte platziert werden können. Es spielt jedoch eine große Rolle dabei, wie Benutzer Inhalte konsumieren – insbesondere auf Mobilgeräten.

Was zählt also als Leerraum?

Dies sind die Bereiche, die absichtlich leer gelassen werden, wie der Abstand zwischen Spalten, Rändern und Auffüllungen.

Hier sind einige Tipps, die Sie beim Einfügen von Leerzeichen befolgen sollten:

• Fügen Sie genügend Leerraum zwischen Klickzielen (z. B. Schaltflächen) hinzu: Die Mindestgröße eines Klickziels sollte etwa 30 bis 40 Pixel betragen. Erleichtern Sie die Interaktion mit ihnen, indem Sie ausreichend Leerraum zwischen zwei oder mehr Klickzielen hinzufügen.
• Leerraum vertikal auf Mobilgeräten verschieben: Verwenden Sie Leerraum, um Elemente zu trennen, die einem vertikalen Fluss folgen. Dies ist anders als auf dem Desktop, wo Weißraum sowohl vertikal als auch horizontal eingeführt wird.

Indem Sie das mobile Erlebnis für Ihre Benutzer optimieren, stellen Sie sicher, dass Kunden Ihre Website gerne nutzen, und steigern Ihre Konversionsrate auf mobilen Geräten.

Erleichtern Sie es den Nutzern, ihre Ziele zu erreichen, z. B. Ihre Produkte zu durchsuchen und zu kaufen, sich für Ihre Angebote anzumelden oder andere Maßnahmen zu ergreifen, die sie der Conversion näher bringen.

Hoffentlich helfen Ihnen die Beispiele und Tipps, die wir geteilt haben, zu verstehen, was eine gute mobile Erfahrung ausmacht, und Ihren Fortschritt zu beschleunigen, wenn Sie Änderungen vornehmen. Jetzt ist es an der Zeit, all diese neuen Erkenntnisse in die Tat umzusetzen!