Mobile Landing Pages

Bei der Gestaltung einer Mobile Landing Page — Zielseiten für mobile Geräte/Smatphones und Tablets — steht ein Produkt oder eine Dienstleistung im Mittelpunkt. Dieses Ziel, dass Benutzer ein Produkt sofortm, erwerben können, oder Sie möchten einfach, dass sie sich für eine Mailingliste anmelden. Was auch immer das Ziel ist, Sie wollen sicherstellen, dass jedes Stück der User Experience arbeitet, um dieses Ziel zu erreichen.

Mobile Landingpage

Letztlich ist der beste Weg, um einen Benutzer auf eine mobile Landing-Seite zu konvertieren, um eine klare Beschreibung dessen, was Sie anbieten, zusammen mit offensichtlichen Möglichkeiten, um Sie zu kontaktieren. Seien Sie klar in der Beschreibung, was Ihr Produkt tut und wie Sie Ihre Ziel-Kunden Probleme lösen. Zum Beispiel, „Best Vakuum jemals“ sagt weniger als „Breathe leichter mit einem Vakuum, das 99% aller Allergene entfernt.“ Klare Kontaktmöglichkeiten sind einfache, prominenten Formen und sichtbare Telefonnummern, so dass die Besucher nicht zu kämpfen haben, um zu finden Wie du dich erreichen kannst.
Holen Sie sich auf den Punkt, was Sie verkaufen und zeigen Sie dem Benutzer, wie es zu kaufen oder kontaktieren Sie. Mangel an Ablenkungen, sei es aus technischer oder technischer Sicht, wird dazu beitragen, dass die Seite Ihr Ziel unterstützt, Benutzer zu konvertieren.

Conversion Ziele

Wenn Sie noch keine Conversion Ziele festgelegt haben, beginnen Sie mit der Definition von Zielen. Sind Sie bemüht, einen 10% igen Anstieg der qualifizierten Leads zu generieren? Sie wollen einen Umsatz um 20% steigern? Die Festlegung klarer Key Performance Indikatoren auf der Grundlage, was profitieren Ihr Unternehmen wird letztlich Ihnen helfen zu verstehen, wie man richtig an eine Landing-Seite.

Jedes Ziel sollte zu einem klaren Geschäftsergebnis beitragen. Zum Beispiel, sagen wir, Sie führen ein Software-as-a-Service-Unternehmen und haben festgestellt, dass 100 neue Kunden das Einkommen, das Sie benötigen, um Ihre Einnahmen Ziele für das Jahr zu erfüllen. Wenn Sie ordnungsgemäße Analytik etabliert haben und sorgfältig Ergebnisse von Ihrer Website verfolgen, können Sie wissen, dass 10% der Personen, die sich für Ihre Mailing-Liste sind wahrscheinlich zu zahlen Kunden. So schaffen Sie ein Ziel, 1.000 neue E-Mail-Registrierungen zu bekommen, die wahrscheinlich zu Ihrem Ziel von 100 neuen Kunden führen würden.

Für mehr über die Erstellung realistischer Ziele und die Korrelation zu den Online-Zielen, siehe Avinash Kaushiks Artikel „Web Analytics 101: Definitionen: Ziele, Metriken, KPIs, Dimensionen, Ziele“. Beginnen Sie mit der Grundlage, dass Sie die richtigen Daten verfolgen und bauen können Von dort aus, um Metriken zu erstellen, die du verbessern kannst.

Traurig, zu oft Unternehmen Design Landing Pages, ohne eindeutig durch jeden Kontext, in dem Benutzer werden die Seite, einschließlich, welche Geräte werden sie auf. Das Erstellen von Landeplätzen mit mobilen Benutzern im Auge wird Ihnen helfen, sich darauf zu konzentrieren, wie man am besten Menschen auf Smartphones umwandelt.

Auswählen des Tools
Um eine Zielseite zu erstellen, die den Richtlinien folgt, werden wir reden, du musst die richtigen Werkzeuge auswählen, um sie zu bauen und zu hosten. Wenn du die richtige Codierungskompetenz hast, kannst du natürlich eine Seite von Grund auf neu erstellen. Allerdings gibt es eine Reihe von Plattformen, um die Erstellung von Landungsseiten zu optimieren. Während der primäre Zweck dieses Artikels ist, Ihnen zu helfen, die Elemente und die Struktur einer Landing-Seite zu planen, hier sind einige kurze Vorschläge von Werkzeugen, um eine zu bauen.

Zuerst, wenn Sie bereits einen Hosting-Service haben, dann WordPress bietet einen hervorragenden Ausgangspunkt für den Aufbau einer reaktionsfähigen Landing-Seite, die leicht integriert mit Plugins für Formulare und andere Elemente. Sie finden eine Reihe von vorgefertigten Vorlagen auf Websites wie ThemeForest.
Als nächstes können Sie mit mehreren anderen Werkzeugen Seiten auf ihren Plattformen erstellen und hosten. Unbounce und Wishpond sind zwei beliebte Plattformen, die es Ihnen ermöglichen, nicht nur Seiten zu bauen, sondern auch A / B-Tests zu implementieren, die wir im letzten Abschnitt besprechen werden. Neil Patel hat einen detaillierten Überblick über verschiedene Plattformen für Zielseiten.

Betrachten Sie den Content

Eine schnelle Google-Suche gibt Ihnen Tausende von Artikeln, die verschiedene optimale Längen für die Landung Seiteninhalt empfehlen. Eine Quelle sagt, dass sie mindestens 500 Wörter enthält, während ein anderer bis zu 1.000 Worten empfiehlt. In Wirklichkeit hängt die ideale Länge davon ab, was du verkaufst und wer dein Publikum ist, und du kannst testen, um die Länge zu bestimmen, die am besten umwandelt. Allerdings, sobald der Inhalt in ein mobiles Format kondensiert wurde, müssen Sie besonders überlegen, wie viel Ihre Benutzer bereit sind zu lesen und wie weit sie scrollen, bevor Sie die Gelegenheit für eine Umwandlung verlieren. Sie können Seiten mit mehr oder weniger Inhalt testen (z. B. eine 500-Wort-Seite gegen eine 1.000-Wort-Seite testen) mit einem A / B-Test-Tool (weiter unten ausführlicher erörtert), um die Umrechnungskurse zu überwachen, um festzustellen, ob Benutzer mehr sind Wahrscheinlich, Sie mit mehr oder weniger Worten zu kontaktieren, um durch zu lesen.

Um zu ermitteln, welche Content-Längen für Ihre Benutzer ideal sind, können Sie testen, um zu sehen, wie lange im Durchschnitt sie durch den Inhalt scrollen. Zusätzlich zum Scrollen, sollten Sie Faktor, wie wahrscheinlich Menschen sind mit Inhalten durch das Ansehen von Videos, klicken Sie auf Links oder Ausfüllen von Formularen zu engagieren. Die Messung dieser Aktivität ist mit einem Hackmechanismus möglich, auf das wir auch in diesem Artikel noch ausführlicher sprechen werden.

Darüber hinaus können Sie mit einigen Annahmen beginnen, wie das Denken, dass die meisten mobilen Nutzer auf „die Falte“ der Unterseite ihres Bildschirms zu stoppen. Allerdings zeigen mehrere Studien, dass die meisten Website-Besucher natürlich scrollen, solange die Seite bietet eine benutzerfreundliche Schnittstelle für dies zu tun. Zum Beispiel, ein Zeitartikel teilt, dass 66% der Aktivität auf einer Seite passiert unterhalb der Falte. In diesem Sinne, halten immer noch wichtige Inhalte und Elemente sichtbar so hoch wie möglich, aber nicht scheuen weg von der Bereitstellung von mehr Details in der Kopie.

Wenn Sie schauen, um Leads für eine Klimaanlage Reparatur-Geschäft zu generieren, sind die Menschen eher zu wollen, um direkt auf den Punkt des Aufrufs oder Ausfüllen eines Formulars zu bekommen. Wenn jemand Klimaanlage Klimaanlage ist an einem 90-Grad-Tag gebrochen, werden sie wahrscheinlich nicht wollen, um ein 2.000-Wort-Aufschreiben auf die inneren Funktionen einer Klimaanlage zu lesen. Sie werden wahrscheinlich ausgeschaltet, indem sie durch langwierigen Text blättern müssen, bevor sie einen Abschnitt mit Kontaktinformationen erreichen. Sie wollen gleich nach jemandem kommen, der kommen kann, um ihre Einheit zu reparieren, und versichert, dass die Person, die sie kontaktieren, schnell ankommen kann, um sich um das Problem zu kümmern.

Allerdings, wenn Sie verkaufen Luxus-Gold-Uhren für $ 5.000 jeder, werden Sie wahrscheinlich besser dran mit einer detaillierten Erklärung, was setzt Ihre Uhren auseinander. In diesem Fall zielen Sie auf eine Nische reichen Publikum, die wollen, zu lesen und zu visualisieren Details über Ihre Produkte, um eine Kaufentscheidung zu treffen. Sie sind nicht so wahrscheinlich, eine Kaufentscheidung auf eine Laune mit begrenzten Informationen zu treffen: Sie wollen Bilder sehen, die alle Winkel der Luxusuhr zeigen, ein Video über, wie jede Uhr von den feinsten Materialien handgefertigt wird, und ein Schreibe über eine lebenslange Garantie.
Unabhängig von der Länge des Inhalts ist darauf zu achten, dass einzelne Absätze nicht übermäßig lang werden, wenn sie auf einem mobilen Gerät betrachtet werden. Während ein Absatz auf nur vier Textzeilen auf einem Desktop-Bildschirm ausdehnen kann, kann derselbe Absatz zehn Zeilen aufnehmen, wenn er auf eine mobile Bildschirmgröße komprimiert wird. Häufigere Absätze brechen wird die Lesbarkeit verbessern.

Conversions

Ob gefördert durch bezahlte Suche oder eine Social-Media-Kampagne, eine Landing-Seite sollte einen Fokus auf die Umwandlung von Benutzern in den Verkauf oder führt. In der Mitte der Sicherstellung der Marke Integrität und schriftlich Kopie, um ein Produkt oder eine Dienstleistung zu präsentieren, lassen Sie sich nicht dieses Hauptziel auf der Strecke fallen. Vor allem in der begrenzten Menge an Platz auf einem mobilen Gerät, haben Sie ein kurzes Fenster, in dem die Aufmerksamkeit des Benutzers zu greifen und letztlich, um sie zu konvertieren.

Für ein Service-bezogenes Geschäft suchen, um Leads zu generieren, wie die Klimaanlage Reparatur Beispiel, sollten Sie eine Telefonnummer prominent über alle Geräte. Wenn Benutzer schauen, um ein Problem sofort zu beheben, vor allem beim Surfen auf einem Telefon, sie oft lieber einen Anruf für Service. Vergewissern Sie sich, dass die Click-to-Call-Funktionalität auf der mobilen Version der Seite enthalten ist.

Zielseite

Zum Beispiel, schauen Sie sich die Zielseite oben für bezahlte Suche verwendet. In einem Desktop-Format ist die einzige Umwandlungsoption ein Anführungsformular. Sobald jedoch die Seite auf eine mobile Größe schrumpft, erscheint ein Telefonsymbol in der oberen rechten Ecke und gibt die Option zum Anrufen an. Diese Änderung bietet eine positive Umwandlung Fokus für mobile, da Benutzer auf der Suche nach Versicherung von einem Smartphone würde wahrscheinlich mit einem Agenten sprechen wollen.
Zusätzlich zu einer Telefonnummer, stellen Sie sicher, dass ein Formular prominent auf Handy. Einige ansprechende Designvorlagen, die ein Formular enthalten, können bis zu dem Punkt schrumpfen, wo das Formular nicht mehr auf einer mobilen Größe auftaucht. Dies wird mehr als wahrscheinlich zu weniger führt führen.
Vergewissern Sie sich, dass die Felder des Formulars groß genug sind, um mit einem Finger leicht angezapft zu werden. Während ein Formular perfekt auf eine Desktop-Größe funktionieren könnte, können die Felder bis zu dem Punkt schrumpfen, wo sie schwer auf einem Telefon auswählen können. Für mehr über das Entwerfen von Landing Page Formulare, die den Konvertierungsprozess auf mobilen und nicht abschalten Benutzer zu unterstützen, siehe UserTesting’s Artikel über Formular Usability Ressourcen.

User Experience

Um besser zu identifizieren, welche Elemente der Website sind und nicht funktionieren, testen Sie die Erfahrung der Website auf mobilen Geräten. Gewinnen Sie Menschen mit verschiedenen Telefonmodellen über Android und iOS, entweder finden Menschen, die Sie kennen oder mit einer Website wie UserTesting.
Mit dem Start einer Seite können Sie A / B die Platzierung von Elementen auf der Website mit einem Tool wie Optimizely oder Google Analytics ‚freie Content Experiments testen. Zum Beispiel, im Falle von teureren Produkten, die an ein Nischenpublikum verkauft werden, möchten Sie vielleicht prüfen, ob diese Leute tatsächlich auf ein Formular reagieren, das sie sofort sehen, oder wenn sie durch den Inhalt lesen und Bilder lesen müssen, bevor sie sich entscheiden, zu konvertieren. Für weitere Ideen und Tipps, siehe Shopify’s

A / B Testing

Darüber hinaus installieren Sie ein Heißmantel-Tool wie Crazy Egg oder Hotjar zu messen Klick-und Scrolling-Aktivität über ein Tracking-Skript in Ihre Website eingefügt. Diese Daten erlauben es Ihnen, genauer zu betrachten, wie die Leute scrollen und welche Elemente der Seite sie interagieren mit. Auf diese Weise können Sie bestimmen, wie weit in den Inhalt der durchschnittliche Benutzer ist wahrscheinlich zu lesen, sowie welche Tasten und Formular-Konfigurationen sind wahrscheinlich, eine Antwort zu produzieren.

Heatmap: Seien Sie sicher, auf hitze zu sehen, die für das Mobile spezifisch sind. Während Desktop-Hotmaps keine Probleme zeigen, könnte Mobile eine andere Geschichte zeigen. Natürlich werden Daten von Website zu Website variieren, aber Sie könnten feststellen, dass ein größerer Prozentsatz Ihrer Desktop-Benutzer durch eine ganze Seite als mobile Benutzer (oder umgekehrt) scrollen. Oder Sie könnten feststellen, dass Desktop-Benutzer eher geneigt sind, eine längere Form auszufüllen, während mobile Benutzer die ersten beiden Felder ausfüllen und dann aufgrund fehlerhafter Funktionalität auf Handy ausfallen. Im folgenden Beispiel sehen Sie, wie Benutzer durch den Inhalt des Desktops scrollen, als auf dem Handy. Basierend auf diesen Daten wäre der Entwickler klug, einige der langwierigen Inhalte auf der mobilen Version der Seite herauszunehmen.
Heatmaps, die den Desktop gegenüber den mobilen Scrollmustern zeigen
Heatmaps, die den Desktop gegenüber den mobilen Scrollmustern zeigen (View large version)
Verwenden Sie außerdem Google Analytics, um die mobile Leistung auf Ihrer Zielseite zu überprüfen. Segment nach Gerät bei der Betrachtung der Daten, um bestimmte Probleme mit mobilen Nutzung zu identifizieren. Zum Beispiel haben wir im folgenden Beispiel eine bestimmte Zielseite unter dem „Behavior“ → „Landing Pages“ -Report ausgewählt und das Dropdown-Menü „Secondary Dimension“ verwendet, um die Leistung nach Gerätekategorie auszubrechen. Hier sehen wir, dass mobile Sessions zu einer deutlich niedrigeren Conversion-Rate als dem Desktop (0,65% gegenüber 2,35%) geführt haben, was auf eine mögliche Fahne einer schlechten User Experience hinweist.

Mobile Performance

Während die Seitenbelastungsgeschwindigkeit für jede Website auf jedem Gerät entscheidend ist, sollten Sie sich vorstellen, wie schnell eine Seite auf dem Handy zu laden scheint. Eine zusätzliche Sekunde der Zeit, die darauf wartete, dass ein Bild geladen wurde, könnte bedeuten, dass ein ungeduldiger mobiler Benutzer aufgibt. Um die Aufmerksamkeit des Benutzers zu bewahren, stellen Sie sicher, dass die Ressourcen so schnell wie möglich in den Augen des Benutzers geladen werden.
Eine nützliche Lösung beinhaltet das Vorladen von Ressourcen auf einer Zielseite. Sie können HTML5-Prefetch verwenden, um einige Assets abzurufen, die auf einer Seite verwendet werden, die angezeigt wird, wenn der Benutzer auf eine Zielseiten-Schaltfläche auf einer Zielseite klickt. Darüber hinaus können Sie auch dynamisch injizieren Ressource Hinweise, die dem Browser sagen, um die erforderlichen Ressourcen vor der Zeit herunterladen. Für mehr zu diesem Thema, siehe Denys Mishunovs Serie auf „Warum Performance Matters“ (einschließlich Teil 2 und Teil 3) und CSS-Tricks Artikel zum Prefetching.

Schlussfolgerung

Hier ist eine Rückmeldung, was bei der Gestaltung einer Zielseite zu beachten ist:

  • Definiere deine Ziele, um festzustellen, was auf der Seite zu sagen ist und welche Handlung du willst.
  • Beschreiben Sie Ihr Produkt oder Ihre Dienstleistung so prägnant wie möglich, um die Aufmerksamkeit der Nutzer zu erregen.
  • Brechen Inhalt in kurze, lesbare Absätze.
  • Ausschluss von ablenkenden Elementen, wie zB große Navigationsleisten und übermäßige externe Links.
  • Wenn nötig, zeigen Sie Bilder und / oder Video im Zusammenhang mit dem, was Sie verkaufen.
  • Platzieren Sie Umwandlungselemente wie Formulare und Telefonnummern in gut sichtbaren Abschnitten.

Testen Sie die Landungsseitenleistung über Analytics, Hitzemagazin und A / B-Testwerkzeuge, um die Änderungen der Inhaltslänge und der Seitenelemente zu bestimmen.
Bei der Erstellung einer Zielseite für jede Online-Kampagne, besondere Vorsicht, um die mobile Erfahrung zu betrachten. Überprüfen Sie die Darstellung der Inhalte sowie die Bedeutung der Kontaktinformationen. Erfordert die Meinungen von mehreren Benutzern, um Probleme zu identifizieren und mit Analysedaten zu testen, um die Usability zu bestimmen. Mit einem klaren Plan für mobile, werden Sie besser konvertieren Benutzer kommen aus mehreren Geräten.

Mobile Landing Page
Optimization

Mobile Landing Page Optimization

Mobile Landing Page
Best Practices

Mobile Landing Page Best Practices

Mobile Landing Pages
Beispiele/Examples