Ich gebe hier einmal meine Tipps aus Erfahrung weiter, worauf ich bei einer mobilen Landingpage achte.
Responsive Design
Zu allererst: Das Wort „responsive“ wird in meinen Augen missbraucht. Es ist nur ein Adjektiv, so wie „Der Himmel ist blau“ oder „mein Auto ist schnell“. Es sagt etwas über Ihre Layout-Technologie aus, aber nicht ob Ihre UserExperience genial ist.
Es gibt responsive und wirklich responsive. Das kommt aus dem Englischen und meint, das Reagieren auf die Umgebung des Nutzers, also je nach Bildschirmgröße eine angepasste Version der Inhalte darzustellen.
Hier die häufigsten Probleme:
Layout Umbrüche
Das Layout bricht seltsamerweise auf einer oder mehreren Geräteklassen (oder einzelnen Geräten) in einer Weise um, die für den Benutzer und das Ziel der Seite keinen Sinn ergibt. Es kann technisch ansprechend sein, aber die visuelle Hierarchie kann völlig falsch sein. Damit ist es vielleicht technisch attraktiv gelöst, aber nicht ansprechend auf Benutzer, Gerät und Ziel. Überprüfen Sie Ihre Breakpoints, das Layout und die Ausrichtung mit realen Geräten.
Kein Testmaterial
Ein weiterer großer Fehler ist es, die Geräte, die die Mehrheit Ihrer Kunden repräsentieren, nicht zu testen. Wenn Sie das Nutzererfahrung auf dem iPhone 6, 7, 8, X+ nicht selbst nachvollziehen können, können Sie dann wirklich behaupten: “Wir haben ein großartiges Erlebnis auf dem iPhone”? Normalerweise meinen die Leute hier: “Wir haben eine tolle Erfahrung auf meinem eigenen iPhone” – was aber nicht dasselbe ist! Orientieren Sie sich an den meistgenutzten Mobilgeräten Ihrer Nutzer und prüfen Sie selbst nach – am besten auf physisch vorhanden Geräten.
Kaputte Darstellungen sind schlecht
So manche Seite hat wirklich schlimme Darstellungsprobleme auf dem iPhone. Soetwas trübt natürlich immer den ersten Eindruck. So als wenn Sie in einem Restaurant Pommes auf dem Boden sehen oder im Kino abgerissene Karten oder Popcorn auf den Sitzen vom Vorgänger. Kaputte Darstellungen wirken unprofessionell und lässt die Seite insgesamt unglaubwürdiger aussehen. Sie wären überrascht, wie kleine Fehler, Darstellungsprobleme, Rechtschreib- und Sprachfehler die Converisons beeinträchtigen können.
Hinweise zum Scrollen
Wenn Sie möchten, dass die Leute scrollen, ist die Ansicht beim ersten Laden wichtig, da Ihre Besucher möglicherweise nicht “sehen”, dass da unten etwas ist. Ein allgemeines Seitenlayout zu haben, das zum Scrollen anregt, ist ein Bereich, den ersten Bildlauf zu erhalten, ein anderer. Vergessen Sie nicht, am Ende der vollständigen Seite weitere Sprungpunkte anzubieten – d.h. Navigation, Footerlinks, Weiterlesen, andere Persona-basierte Optionen usw .
Und wenn Sie Ihre Seiten nicht testen, verpassen Sie Dinge, die schwer wiegen können. Meine liebstes Beispiel ist beim Scrollen: Wenn eine Karte oder ein anderes Seitenobjekt den Bildlauf unterbricht und meine Scroll-Aktion gehijacked wird. 1) Ich muss diesen Hijack bemerken, anhalten und dann ein winziges Stückchen des Hintergrunds finden, auf das ich meinen Finger legen kann, damit ich auf der verflixten Karte oder einem anderen Objekt, das Sie auf die volle Breite erweitert haben, herumscrollen kann!
Ziehen Sie die Kundenbrille an
Wenn Sie nicht die komplette Userjourney von der SERPS-Seite (d. h. der Google-Suchseite) oder der kreativen Werbung bis zur Website überprüfen, fehlen Ihnen kontextbezogene Informationen. Die Suchseite, die Werbung oder der treibende Faktor des Besuchs muss im Zusammenhang mit der gesamten Reise gesehen werden. Um zu sehen, wie responsive sich der Prozess anfühlt und wie gut er aussieht, müssen Sie Dinge sehen, Dinge überprüfen, Dinge testen, von diesen Dingen besessen sein.
Stellen Sie sich vor, ich wäre der Manager in einem Kaufhaus und für neue Kleidung zuständig und würde sagen: “Ich brauche keines der Geschäfte zu besuchen, um zu sehen, wie die Frühjahrskollektion aussieht. Meine Auswahl wird sich verkaufen, und ich werde am Ende des Quartals nachsehen, wie gut die Zahlen sind.” Sorry, so läuft das leider nicht.
Man muss die gesamte Erfahrung mit dieser neuen Bekleidungslinie machen, damit sie ein Erfolg wird, und ich würde jedes Geschäft besuchen und mich mit jedem Detail beschäftigen, um die Performance zu verbessern.
Erleben Sie die Websites mit den Geräten ihrer Kunden, deren Kontext, deren Netzwerkverbindung und mit dem Wissen um Ihre Ziele, Aufgaben, Ängste, Sorgen und Barrieren.
Gerätekompatibilität & Layout
Ja – ich habe dies bereits erwähnt, aber es geht tiefer als nur das Layout.
Nehmen wir ein einfaches Beispiel, das ich immer noch häufig sehe. Ich wähle nicht den richtigen mobilen Input Typ im HTML für die Eingabe von Daten in ein Formular. Perfektes Beispiel dafür. nicht gerätebewusst zu sein.
Wenn Sie die Rechtschreibprüfung aktiviert lassen, wenn ich ein paar Daten eingebe (z.B. mein Autokennzeichen), dann wird es mich ärgern, wenn ich versuche, das Wort oder den Satz auf Rechtschreibung zu prüfen. Wenn Sie den falschen Eingabetyp für ein Datenelement wählen, wird es für mich schwieriger, Ihr Formular auszufüllen oder auf Absenden zu drücken. Ich bekomme als Nutzer immer mehr Gründe ihr Formular zu hassen.
Wenn ich es dann auch noch benutzen muss, wird sich diese Abscheu noch vertiefen.
Gerätekompatibilität bedeutet auch, mit den Eingabesteuerungen und der Benutzeroberfläche des Telefons zu arbeiten – die Art und Weise, wie Sie zum Beispiel Apps entwerfen, wird sich in einigen subtilen, aber wichtigen Punkten je nach iPhone- und Android-Plattform unterscheiden.
Das ist der Grund, warum es nicht ausreicht, Screenshots von Ihrem Prozess mit einer hübschen kleinen iPhone-Shell zu machen. Sie müssen jedes Element, jeden Klick, jede Interaktion, jeden Fehler, jede Option – Dinge, die Menschen tun können – testen, um sicherzustellen, dass es für dieses Gerät Sinn macht. Das Ansichtsfenster (Bildschirmgröße) macht einen großen Unterschied darin, wie Ihre Landingpage, Website oder Ihr Produkt wahrgenommen wird – Sie müssen also erfahren, wie es aussieht und wie man damit interagieren kann.
Wenn Sie etwas testen möchten, erstellen Sie mit Google Analytics (oder anderen Tools) eine Liste mit den wichtigsten Desktop-Browsern, Tablet-Geräten und mobilen Geräten auf Ihrer Website. Wenn Sie Ihre Liste haben, testen Sie sie. Die meisten Unternehmen haben Mitarbeiter, Freunde und Familie, die eines oder mehrere der Geräte besitzen werden. Fragen Sie einfach herum, schreiben Sie eine Nachricht.
Wenn Sie reale Geräte testen wollen, aber kein Gerätelabor haben, mieten Sie sich doch einfach eines. Ja – Sie können ein Telefon mieten, das in einem Serverschrank in der Innenstadt von San Jose, oder Bogota, oder London – oder Berlin steht. Keynote hat überall auf der Welt Racks mit Telefonen und Tablets, die an die lokalen Netzbetreiber für 3G und 4G angeschlossen sind (Sie können auch ihr eigenes W-LAN benutzen). Der Punkt hier ist, dass ich ein echtes Telefon in einem echten anderen Land und in einer echten anderen Stadt kontrolliere – so kann ich Dinge tun wie GPS benutzen, nach Sachen suchen, den lokalen Apple App Store besuchen und Sachen installieren oder Textnachrichten an lokale Nummern senden. Das ist so real wie dort zu sein.
Treffen Sie also eine Entscheidung! Ich habe Ihnen alle Möglichkeiten aufgezeigt, wie Sie an echte Handys herankommen können. Oh und nicht vergessen WLAN auszustellen – benutzen Sie stattdessen eine Datenverbindung (es sei denn, WiFi ist ein echtes Szenario, natürlich).
http://www.keynote.com/solutions/testing/mobile-testing
Desktop Testing
https://crossbrowsertesting.com
Mobile Testing
https://aws.amazon.com/device-farm
Es reicht nicht, zu glauben, dass Ihr neuester Kram funktioniert – Sie müssen es beweisen. Testen, testen testen: mit Blick bis ins kleinste Detail.
Benutzerfreundlichkeit
Dies ist ein großer Themenbereich, und ich könnte allein zu diesem Thema einen ganzen Artikel schreiben. Ein einfacher Ratschlag – bitte testen Sie die Sachen mit Leuten.
Dieses Testing funktioniert und ja, es braucht Zeit. Es ist jedoch die Zeit, die Sie sparen, indem Sie knappe Entwicklungsressourcen nicht für dummes Zeug verschwenden, das die Leute sowieso nicht benutzen können oder wollen. Und damit die letztlichen Testing-Kosten in vollem Umfang hinten heraus abdeckt. Es ist viel billiger, keine schlechten Dinge zu bauen, als suboptimale Designs umzubauen, zu überarbeiten, neu zu entwerfen.
Wenn Sie es nicht tun, sind Sie dumm oder arrogant – niemand mag es, wenn sein Produkt kritisiert wird, aber Sie müssen zuhören, schlucken und auf Rückmeldungen reagieren, nicht auf Ihre innere weinerliche egoistische Stimme, die Sie immer wieder hören.
Verdreifachen Sie Ihre Effektivität, indem Sie sicherstellen, dass Sie eine wirklich großartige analytische Nachverfolgung und auch qualitatives Feedback (Sitzungswiederholung, NPS, Umfragen, Voice of Customer, Feedback, Benutzertests) dabei haben. Testen Sie so früh wie möglich mit Menschen, während der Prototypenphase (ab Papier) und testen Sie oft während des Produktlebenszyklus.
Die wichtigsten Usability-Probleme, auf die ich stoße, sind unten aufgeführt. Und hier ist noch ein großartiger Tipp: Wenn Sie ernsthaft mobile Nutzerfreundlichkeit und insbesondere mobile gute Formulare bekommen wollen – und zwar zum Klassenbesten – dann müssen Sie alles von diesem Mann hier – Luke Wroblewski (www.lukew.com) – lesen und beobachten.
Herausgezoomt
Einige (oder alle) Seiten werden auf dem Gerät herausgezoomt oder können nicht im Ansichtsfenster gerendert werden (d.h. sind nicht auf dem Bildschirm). Dies kommt normalerweise daher, dass die Website keine für Mobiltelefone optimierte Seite anbietet.
Ansicht aus Kundenperspektive
Ihre Seite ist beim ersten Laden mit dem Viewport des Kunden schlecht lesbar (d.h. Landing Page, Homepage, andere Seite). Damit ist das schöne Layout, das der Designer produziert hat für die Tonne. Es berücksichtigt nicht, dass der Großteil Ihrer Seite von iPhone 6/7/8 Nutzern besucht wird. Schauen Sie auf die Daten und testen Sie es!
Wir haben bereits über einige Punkte davon gesprochen, aber es lohnt sich, diese Liste zu erweitern. Stellen Sie sicher, dass Ihre Navigation benutzbar ist (testen Sie sie) und haben Sie immer eine Jumpoff-Navigation am Ende einer langen Seite (Fußzeile, nächste Schritte, CTA, Onbound-Navigation, Links). Die visuelle Hierarchie (der Fluss des Designs, die Abschnitte, die Überschrift, die Wörter, das Framing, die gesamte Layout-Erfahrung) ist ebenfalls entscheidend.
Größe der Steuerelemente, Platzierung und Abstände
Call-to-Actions sind wichtig, aber ein Wort zu allen allgemeinen Steuerelementen. Wenn Sie Links, Schaltflächen, Elemente, die “anklickbar” sind, zu dicht auf der Seite platzieren, diskriminieren Sie jeden Menschen mit Fingern. Bedienelemente sollten groß genug sein, um sie sehen zu können, einen freien Raum um sie herum haben, in einem Bereich platziert werden, in dem sie gut sichtbar sind, und – was am wichtigsten ist – nicht im Weg stehen, um auf etwas anderes zu klicken, selbst wenn man den Daumen benutzt. Diejenigen, die geneigt sind, ihre Daumen zu benutzen, werden auch Probleme haben, Ihre Website zu benutzen, wenn Sie bei gemeinsamen Interaktionen auf der Website Dinge weit entfernt von der “Daumenreichweite” platziert haben. Microsoft und Apple empfehlen 0,25″ bzw. 0,3″ als Mindestgröße. Auch hier handelt es sich wieder um ein Rendering-Problem für Sie – es kann sein, dass es auf einem Handytyp anklickbar und einfach zu bedienen ist, auf einem anderen jedoch versagt.
Die Geräteausrichtung kann variieren
Es gibt einige Möglichkeiten, dies herauszufinden und die Daten in Google Analytics zu speichern, wenn Sie es wirklich wissen wollen. Stellen Sie einfach sicher, dass Ihr schönes Design im Quer- und Hochformat gut aussieht und funktioniert, insbesondere bei Tablets.
Formulare
Mobile Formulare sind zum Kotzen, weil die Schwelle für einen Abbruch auf dem Handy noch niedriger ist. Und die meisten Unternehmen machen schlechte Formulare auf dem Desktop, was bedeutet, dass sie all das Gepäck auf das Handy tragen. Sie müssen Formulare auf Mobiltelefonen in großem Umfang optimieren, und es gibt hier zu viel abzudecken. Mobile Formulare sind einfach einer der am meisten unterschätzten Bereiche für die Optimierung.
Umleitung und Layout
Wenn Sie sich entscheiden, Leute auf eine bestimmte mobile Site oder ein bestimmtes Layout zu “schicken”, haben Sie die Pflicht, sicherzustellen, dass diese “Auswahllogik” korrekt funktioniert. Wenn Ihre Breakpoint- und Layout-Entscheidungen oder Ihre Umleitung auf eine mobile Site nicht richtig funktionieren, wird dies die Nutzererfahrung beeinträchtigen.
Hier ist eines der Probleme, mit denen dedizierte mobile Sites zu kämpfen haben. Nehmen wir an, ich besuche die Google-Suchergebnisseite – und klicke auf einen Sitelink unter dem organischen Suchergebnis meiner Hauptmarke. Ich habe “Kontakt” ausgewählt, und die Website leitet mich dann zu m.website.com weiter. Wurde ich auf die Seite “Kontakt” umgeleitet? Nein – ich bin auf der Startseite geblieben.
Wenn Leute nach der Kontakt-Seite fragen, müssen Sie sie dorthin schicken. Dazu sind einige Analysen (Daten) und ein gewisses Maß an Geschicklichkeit erforderlich, um die Weiterleitung relevant zu machen. Sie haben vielleicht nicht die gleichen Seiten auf Ihrer mobilen Website, aber bitte versuchen Sie, sich darum zu kümmern, wohin Sie die Leute schicken – falls Sie sie weiterleiten. Seltsamerweise ist es gut fürs Geschäft, sich um die Links zu kümmern, auf die die Leute klicken und um die Relevanz und Nützlichkeit der Zielseite, zu der Sie sie weiterleiten.
Customerjourney Flow
Ich habe einige köstlich idiotische Sachen auf Mobiltelefonen gesehen. Michael Aagard hatte mal ein WLAN-Registrierungsformular gezeigt, das Ihnen die Anmeldebestätigung geschickt hat! Wenn Sie also keine Datenverbindung hatten, konnten Sie die Mail nicht bekommen und das WLAN nicht benutzen. Wenn Sie ein Produkt entwerfen, ist es eine Reihe von ineinander greifenden Interaktionen, wie eine große Kette. Das bedeutet, dass alle Pfade und Interaktionen bearbeitet werden müssen, um die Probleme wirklich herauszubekommen . Und herauszufinden, was nicht in Ordnung ist, fängt damit an, Dinge zu messen, die schlecht sind.
Ein anderes Beispiel ist, wo Offline (SMS, E-Mail, andere) verwendet wird, um etwas zu verifizieren. Wenn dies nicht innerhalb des Zeitrahmens geschieht und Ihnen die Zeit ausgeht oder Sie bei Ihrer Aufgabe ein hohes Maß an Dringlichkeit haben, ist das ätzend. Stellen Sie sicher, dass alle Elemente der (Customerjourney-)Kette stark sind – ziehen Sie an ihnen, versuchen Sie, sie zu brechen, testen Sie sie.
Wenn Sie sich einige der Referenz-Service-Designs da draußen ansehen, die wunderbar choreographiert sind und dennoch ein Gefühl von reibungsloser Leichtigkeit vermitteln – es ist kein Glück oder Zufall. Dieses Zeug erfordert harte Designarbeit, Messung und Optimierung. Ich schaue mir an, was Leute wie Airbnb oder Amazon machen, und ich nicke ihnen oft zu. Harte Arbeit und Intelligenz führen zu nahtlosen und qualitativ hochwertigen Erfahrungen.
Ein Glied in der Kette ist die E-Mail – und wenn sie nicht ankommt, in der Google Mail auf der falschen Registerkarte landet oder im Spam-Ordner hängen bleibt – dann ist man am Ende. Zwei Dinge sind bei E-Mails wichtig –
- Werden sie zugestellt, und wenn ja, “wo kommen sie an” in der Ansicht der E-Mail-Clients, an die Sie senden
- Welches sind die E-Mail-Clients, Webmail-Dienste und mobilen Geräte, an die Sie senden, und wie wird Ihr Material im Ziel tatsächlich dargestellt?
Zu 1: Aurea, Returnpath und Email on Acid bieten alle Zustellbarkeitsdienste an. Nur ein Wort der Warnung zu diesem Bereich – konzentrieren Sie sich darauf, regelmäßige Audits Ihrer Zustellbarkeit und für wichtige Kampagnen zu machen. Wenn Sie Kampagnen vorab testen, habe ich oft Dinge gefunden, die in Spam-Filtern gelandet sind, was bedeutete, dass, wenn ich den gesamten E-Mail-Batch verschickt hätte, es ziemlich schief gelaufen wäre. Und ich hätte nichts davon gewusst. Jeder hätte jemand anderem die Schuld gegeben, und wir hätten weniger als nichts gelernt.
Zu 2: Litmus ist eine sehr beliebte Lösung, und Email on Acid, Aurea und Returnpath bieten Testdienste an. Man schickt seine Post an eine “Seed”-Adresse oder einen Posteingang – und schon wird sie erzeugt und an alle Zieladressen geschickt. Sie erhalten eine Momentaufnahme davon, wie sie bei der Zustellung aussieht. Oje. Die meisten Leute wissen es nicht, weil sie nie zu sehen bekommen, was der Kunde sieht. Kaputte Bilder ohne Anhaltspunkte, schlechtes Rendering, nicht mobilgerechte Layouts, gezoomter Text..
Also – Schritt 1 zum E-Mail-Glücklichsein: Stellen Sie zunächst sicher, dass Sie mit den Vorgaben der Zielgruppe testen. Verwenden Sie Excel und gruppieren Sie die häufigsten Domänen, an die sie versenden. Das gibt Ihnen zumindest eine Vorstellung davon, was Sie testen sollten. Verwenden Sie Litmus, Email on Acid oder einen der anderen, um Ihre Haupt Templates zu testen.
Wenn Sie noch nicht über responsive E-Mail-Vorlagen verfügen, sollten Sie das unbedingt nachholen. Wirklich. Wenn Sie kein großes mobiles Publikum haben, dann großartig: Sie können Sie wahrscheinlich noch etwas länger überleben. Für alle anderen auf diesem Planeten sollten Sie anfangen, Vorlagen zu verwenden, die auf dem Handy, dem Tablet UND dem Desktop gut dargestellt werden können.
- Stellen Sie zunächst sicher, dass Sie mit den Vorgaben der Zielgruppe testen
- Nachdem Sie sich vergewissert haben, dass die E-Mail tatsächlich gerendert wird, senden Sie sie an den Zustellbarkeitsdienst.
- Stellen Sie sicher, dass die E-Mail den Edge-Network-Filter für Spam durchläuft (Wichtig für Outlook!).
- Stellen Sie sicher, dass die E-Mail nicht in den Spam-Ordner gesendet wird.
- Gute Chancen, dass es ankommt und gut aussieht? – Schicken Sie es jetzt ab!
- Wow – perfekt, es ist angekommen, es ist gut gemacht, sie können es lesen.
Entschuldigen Sie den Exkurs in die E-Mail, aber wenn Ihr Unternehmen auf eine Aktivierung, ein Onboarding, ein Dankeschön, eine Bestätigung oder irgendeine E-Mail angewiesen ist, die eine Handlung erfordert, um die Dinge zum Laufen zu bringen, Einnahmen zu generieren oder Kosten zu senken – dann müssen Sie sicherstellen, dass sie schnell und zuverlässig geliefert wird und auch auf MEINEM Gerät toll aussieht.
Kontext
Der größte Punkt von allen. Auf Mobilgeräten ist der Kontext das Wichtigste.
Wo sich Menschen aufhalten, welches Gerät sie in der Hand halten, welche Datenverbindung sie haben, wie laut es ist, welche Dringlichkeitsstufe sie haben, was das Ziel oder die Aufgabe ist, die Zeit, die sie dafür haben, die reale Nutzererfahrung und alles, was ein Labor nicht ist.
Wenn Sie nicht versuchen, den Kontext zu verstehen, in dem Ihr Produkt verwendet wird, werden Sie schlechte Designentscheidungen treffen. Es ist auch eine nützliche Geschäftsinformation. Ein wirklich guter Tipp, insbesondere für Multi-Channel-/Plattform-Einzelhändler, ist die Durchführung einer “Tagebuchstudie” mit Teilnehmern, die Ihre Produkte und Websites (oder die der Konkurrenz) verwenden. Auf diese Weise können Sie Daten darüber sammeln, welche Geräte sie in welchem Kontext verwenden, um Aufgaben zu erfüllen und Ziele zu erreichen.
Maximierung der Personalisierung anhand Gerät und Standort
Sie erhalten all diese schönen Daten und verwenden sie nicht. Nutzen Sie die Gerätefunktionen, die Ihre Kunden haben, maximal aus – streben Sie die bestmögliche Geräteerfahrung auf den beliebtesten Mobiltelefonen an und nutzen Sie so viele erweiterte Gerätefunktionen wie möglich (schrittweise Verbesserung der Erfahrung).
Mobile Website Performance
Als einer der am meisten unterschätzten Optimierungsbereiche meiner Meinung nach ist die Perofrmance. Und es wird sich auch nicht in Luft auflösen, weil wir höhere Datengeschwindigkeiten auf Mobiltelefonen sehen. Löst 4G nicht Ihr Problem, dass Ihre mobile Website für die Verbraucher zu langsam ist? Nein.
Wir verstehen also alle, dass das Performance-Problem Ihrer Seite ‘zu groß’ ist. Sie ist zu groß (in Kilobyte oder Megabyte). Und das arme kleine Mobilgerät hat Mühe, es auf das Gerät in den schlechten Datennetzen, die wir noch haben, herunterzuladen. Im Kölner Großraum bekomme ich nur selten zuverlässige Datenverbindungen, vor allem in Zügen und fahrenden Fahrzeugen. Das ist ein großer Faktor bei der Conversion-Optimierung. Wenn Sie die Seiten-Nutzlast (das Gewicht jeder Interaktion) nicht auf eine vernünftige Größe herunterbringen können, leidet die Kundenzufriedenheit, wenn ihre Kunden keine guten Verbindungen haben.
Das zweite Problem ist die Latenz. Stellen wir uns vor, ich beginne, Briefe an Max Mustermann in Australien zu schreiben. Er und ich schreiben schnell, so dass wir unsere Antwort in einer Stunde herausschicken könnten, sobald wir den Brief erhalten. Die Zeit, die wir brauchen, um einen ganzen Diskurs über mehrere Briefe zu führen, wird von der Versandzeit beeinflusst. Wenn der Brief per Luftpost verschickt wird, kann es nur ein paar Wochen dauern, bis er ankommt. Wenn er per Schiff verschickt wird, kann es 6 Monate dauern. Natürlich können wir die Briefe länger machen, um Zeit zu sparen, aber der größte Faktor ist immer die Versandzeit.
Denken Sie jetzt daran, dass Ihr mobiles Gerät Pakete verschickt. Die Größe Ihrer Seite, wird die Zeit, die es zum Download beim Nutzer braucht, natürlich beeinflussen. Die Anzahl der Seitenelemente, die Sie auf jeder Seite herunterladen (und wie Sie sie rendern), wirkt sich jedoch direkt auf die Leistung aus. Wie die Versandzeit im Beispiel des Briefschreibens verursacht die Verbindung Ihres Telefons mit dem Mobilfunkmast und dann mit dem Internet eine Verzögerung. Dies nennt man Latenz und sie summiert sich für jedes Objekt, das Sie herunterziehen. Zwei Seiten von 100 KB, von denen eine Seite 5 Objekte und eine Seite 90 Objekte enthält, zeigen dem Benutzer eine deutlich unterschiedliche Leistung.
Sie müssen das Seitengewicht niedrig halten, aber auch die “Geschwätzigkeit” Ihrer Website und die Anzahl der bei jeder Interaktion geladenen Objekte. Bitte benutzen Sie www.webpagetest.org, um die Leistung von Desktop & Tablet zu überprüfen, und pagespeed insights für mobile Geräte.
Performance-Arbeit ist für die meisten Leute langweilig (so habe ich festgestellt), aber sie ist auch lukrativ. Ich habe viele Unternehmen gefunden, die „responsive“ sind, aber nicht erkennen, dass die Performance-Schwäche die Erfahrung zunichte gemacht hat. Responsive bedeutet auch reaktionsfähige Performance auf dem Gerät, das der Kunde besitzt.
CTA-Hierarchie
Es gibt alle möglichen Ratschläge. „Nur ein Button auf einer Landing Page“. „So viele Buttons wie Sie möchten“. „Grüne Schaltflächen“. „Orangefarbene Schaltflächen“. Sie müssen es einfach auf Ihrer Seite mit ihren CTA Buttons Splittesten – das ist mein zentraler Rat für diejenigen, die glauben, dass allheiligen Gesetzmäßigkeiten schon gefunden wurden.
Welche nützlichen Dinge kann ich Ihnen sagen?
Nun – jede Seite sollte eine primäre Aktion haben, für die die Seite konzipiert ist. Dies ist der wichtigste Geschäftsfaktor oder das wichtigste Ergebnis, das Sie anstreben, und Sie brauchen dafür ein Designmuster für Ihre gesamte Website. Dies ist das Hauptmuster – auf einer e-Commerce Produktseite wäre dies zum Beispiel die Schaltfläche “In den Warenkorb” (zusammen mit den anderen Elementen – Größe, Farbe usw.).
Ein sekundärer CTA auf dieser Seite könnte “Zum Wunschzettel hinzufügen” sein – dies bleibt eine Schaltfläche, aber vielleicht etwas unscheinbarer, in Graustufen, aber vor allem nicht so aufmerksamkeitserregend gegenüber dem primären CTA. Im Klartext muss er “mehr” als der primäre CTA in den Hintergrund treten.
Ein tertiärer CTA auf dieser Seite könnte „Auf den Merkzettel“ lauten, und in diesem Fall würden wir einen Hyperlink verwenden.
Hoffentlich hilft Ihnen das, zu verstehen – es mag viele Aktionen und Interaktionen geben, die Sie den Leuten wünschen, aber es gibt eine Geschäftsschicht, die bei Entwürfen und Wireframes tendenziell übersehen wird – “Welche primäre Aktion sollen diese Leute ergreifen? Wenn Sie das sowie die sekundären und tertiären Aktionen noch nicht ausgearbeitet haben, müssen Sie daran arbeiten.
So sehr es in vielen von uns verwendeten Designs (Zeitungen, Webseiten) eine visuelle Hierarchie gibt, so sehr muss es auch eine CTA-Hierarchie geben, und zwar eine, die die Geschäftsstrategie widerspiegelt.
Bei mobilen Landing Pages brauchen Sie meiner Meinung nach einen starken primären CTA (ich habe kein Problem damit, dass es wiederholt wird, insbesondere wenn Sie verschiedene Anwendungsfälle oder Personas haben, die sich weiter unten auf der Seite widerspiegeln).
In gestalterischer Hinsicht sollte der CTA eine Kontrastfarbe haben (auch nicht schrill – siehe Farbwissenschaft), großformatig sein (wenn auch nicht in der Breite der Seite, da das auf größeren Geräten unschön wirkt), von Farbe oder Weißraum umgeben sein, innerhalb der Seitenhierarchie sowie von umgebenden Elementen visuell hervorstechen, klare, prägnante, handlungsorientierte Formulierungen haben und eine Schaltfläche, die wie ein Button aussieht – sie sieht klickbar, buttonmäßig, interaktionsfähig aus – mit Effekten (Aufleuchten, Schatten, 3D-Hinweise), die die Buttons auf der Seite weiter nach vorne bringen.
Mein letztes Wort zu den CTAs ist, dafür zu sorgen, dass sie erst dort auf der Seite platziert werden, wenn die Leute bereit sind zum klicken. Es hat keinen Sinn, CTAs oder Formulare zu früh auf einer Landingpage zu haben, insbesondere nicht bei dem engeren mobilen Format. Ich muss als Besucher das Nutzenversprechen, das Produkt, den Inhalt, die sozialen Beweise und all die andere schöne Arbeit, die Sie geleistet haben, “bekommen”, denn ich werde nicht klicken, bis ich es tue. Klarheit vor dem Button. Und das führt uns schön zu…
Texte
Danach suche ich bei der Überprüfung:
- Klarheit, Einfachheit, Kürze des Angebot und der Texte
- Lesbarkeit von Text (Typografie, Fontgröße, Stile, Hierarchie, Gerätedarstellung), Textkontrolle (Kontrast, Farbe, Raum, Fontgröße)
- Hauptziele erfüllt? Prüfen, was den Traffic hierher getrieben hat (Anzeige, Link) und Kunden-/Kontextinformationen kennen
- Nutzen – ist der Fokus auf Features oder reine Eigenschaften statt auf was das Produkt für mein Leben bringt? Vorteilskommunikation! Es geht um die Ergebnisse, die mir das Produkt, die Dienstleistung bietet – das sind die Vorteile, nicht die trockenen Merkmale, die Sie verkaufen wollen. Beim Marketing geht es darum, zuzuhören und zu wiederholen, nicht mit einem Megafon zu schreien. Und die Unique Value Propositions über Ihre Dienstleistung, Ihr Unternehmen oder Ihr Produkt sollten vollständig auf der Linse von Kundeneinsichten und historischen Daten basieren. Ein nutzenorientierter Ansatz, bei dem der Kunde informiert und nicht erraten wird, spart Ihnen auch beim Experimentieren Zeit. Viele der Tests, die ich durchgeführt habe, haben gezeigt, dass das, was die Verbraucher schätzen, nicht immer das war, was die Unternehmen an sie vermarkten wollten. Kennen Sie Ihre Lücke.
- Verwenden sie Fett-, Kursiv- und Hervorhebungen – um die Triggerwörter für das Scannen von Besuchern zu vereinfachen? Kaum jemand tut dies, doch ich weiß aus dem Eye Tracking, dass es funktioniert. Einige Gruppen (besonders ältere Menschen) lesen absolut alles auf einer Seite. Ich habe einmal 3 Tage lang mit über 65-Jährigen getestet, und es war wunderbar, aber anstrengend. Fast jeder las alles, jede Zeile, jedes Atom der Kopie. Für diese Gruppe bringt man sie also dazu, alles zu lesen – weshalb Optimierer die Texte immer reduzieren. Sie verschwenden hier ihre ZeitJ Als ich gegen eine Kontrollgruppe testete, zeigte sich ein viel höheres Scanning-Verhalten. Die Augen sprangen von einem betonten Bereich in einen anderen – und bei den Textabschnitten konnte ich nicht nur die mit dem Lesen verbundenen Augenkaskaden sehen, sondern auch Leute, die ganze Absätze, Strukturen, aber mit einem Flimmern verschlangen. Wenn ich zum Beispiel einen Text hervorhob: “Unser Dienst ist für 3 Monate völlig kostenlos und hat keinen Vertrag oder Papierkram“. Sie würden Sprünge vom Titel oder ersten Wort des Absatzes sehen, hinüber zum hervorgehobenen Text, zu einigen (oder allen) der anderen hervorgehobenen Wörter und dann zum schnellen Scannen der gesamten Seite. Also – das Formatieren des Textes funktioniert für das Scannen von Besuchern und für diejenigen, die lesen, und betont auch die Schlüsselwörter, die den Kunden auslösen. Dies ist eine Arbeit mit Hyperlinks. So wurde das Web erstellt. Möglicherweise verlinken Sie diese Wörter (z.B. „unsere Garantie“), aber wenn Sie es nicht tun – werden sie durch die Formatierung zumindest stärker wahrgenommen. Und bei der Formatierung geht es nicht nur um die Betonung – es geht auch um Layout, Hierarchie, die Verwendung von Aufzählungszeichen, das Aufbrechen von Abschnitten, Linienlänge, Stile, Farben. Nutzen Sie einfach dieses Scanverhalten zu Ihrem Vorteil und halten Sie die Texte kurz. Ein Teil Ihrer Besucher liest nicht alle Ihre Texte, und die andere Gruppe braucht ein gewisses Alter, um das zu tun.
Geräte- und Standortbezogenheit
Verwendet diese Seite das Gerät, den Standort, die IP-Adresse oder andere Informationen, um den Inhalt anzupassen? Um ihn relevanter zu machen? Ist sie für mein Land, mein Gebiet, den Link oder die Anzeige, auf die ich geklickt habe, angepasst?
Sie könnten z.B. das GPS im Mobilgerät nutzen, um Personen schnell zu den Ergebnissen des nächstgelegenen Geschäfts zu führen, anstatt dass sie ihre aktuelle Adresse eingeben müssen. Hört sich nicht nach viel an, aber die Leute vergessen, dass sie Schritte auf dem mobilen Gerät entfernen müssen. Sie haben weder die Zeit noch die Neigung, die Standortsuche auf dem Mobiltelefon zu verfeinern, also warum also nicht direkt lokalisieren, was Sie anzeigen?
Sogar etwas so Einfaches wie die Vorgabe der Angabe des Bundeslandes auf einem Formular für deutsche Adressen kann die Conversions erhöhen. Die Nutzung solcher Informationen über das Kundengerät, den Standorts und anderer Fähigkeiten sollte eigentlich viel häufiger vorkommen und ich denke, die Zukunft lässt nur erahnen, welche noch reichhaltigeren Daten wir noch erhalten werden. Verwenden Sie diese Daten.
Finger- und Daumenfreundlichkeit
Dieser Punkt verdiente eine Überschrift ganz für sich allein, auch wenn es sich um ein häufiges Usability-Problem handelt. Meine Frau, meine Tochter, meine Freunde – alle haben unterschiedliche Muster, wie sie Telefone halten und benutzen.
Einige Schulkinder haben heute schon einen Knick in ihrem kleinen Finger, weil sie wiederholt ihre iPhones so halten und benutzen. Diese Dinge müssen studiert werden, denn sie sind bizarr und zeigen wirklich die Auswirkungen der übermäßigen Nutzung von Telefonen!
Aber zurück zum Problem – Die Nutzungsweise der Kunden ist vielleicht nicht die ihre. Und das bedeutet, dass auch mit einem Daumen auf schlankere Ziffern gedrückt werden könnte. Das schränkt ein, wie Sie gute “klickfreundliche” Bedienelemente, CTAs und andere Links entwerfen können – denn sie brauchen Abstand zueinander und Sie müssen einen größeren klickbaren Zielbereich haben, um das Klicken mit allen Finger abzudecken.
Unzählige Websites da draußen haben zu nahe beieinander liegende Bedienelemente oder Hyperlinks. Dadurch wird das Anklicken (ohne zu zoomen) zu einem Lotterie Spiel. Das ist einfach ärgerlich und lähmt die Benutzerfreundlichkeit.
Lesen Sie mehr über dieses ganze Themengebiet und insbesondere über die Forschung zum Smartphonenutzung und Optimierung für die Fingerbedienung unter www.lukew.com
Möglichkeiten zur Kontaktaufnahme
Bietet diese Seite oder Website MIR die richtigen Kontaktmöglichkeiten?
Wenn Sie ein Smartphonebsucher haben, dann müssen Sie auf einer mobilen Website ‘click to call’ haben. Ich würde ein Telefonsymbol, eine klare und große Schriftnummer und, wenn möglich, eine Kombination dieser beiden Elemente als Paar verwenden – Icon, Telefonanruf zur Aktionstaste.
Jeder hat das, was man denkt, aber ich habe schon Telefonnummern gesehen, die nicht anklickbar aussehen. Behandeln Sie die Telefonnummer wie einen wichtigen Call to Action, der er auch wirklich ist!
Und ein Wort für den Rückruf. Ich biete gerne einen Rückruf-Service an. Er ist für den Kunden kostenlos, man kann ihn fragen, “wann” er den Anruf wünscht (was die Zufriedenheit verbessern kann) und worum es bei seiner Anfrage geht.
Das sind sehr einfache Formulare: Im einfachsten Fall nur die Nummer, die Sie zu einer bestimmten Zeit angerufen haben möchten. Sie können den Kunden Zeitbereiche wählen lassen (sofort, in 1 Stunde) und/oder die Uhrzeit wählen lassen.
Viele Leute telefonieren heutzutage über den Bildschirm. Wenn die Nummer Ihres Callcenters als ‘UNBEKANNT’ erscheint, dann werden viele Leute abgeschreckt sein und erstmal nicht drangehen.
Wenn Sie ihren Leuten eine Nummer statt dieses „UNBEKANNT“ zeigen (und ihnen davon erzählen können, bevor sie anrufen), dann werden mehr Leute ans Telefon gehen. Es wird Ihnen eine Menge Geld sparen, wenn Sie irgendwen anrufen, Nachrichten hinterlassen oder zurückrufen. Sie können diese Info entweder auf dem Rückruf-Formular, auf der Dankesseite beim Absenden oder in einer E-Mail-Bestätigung mitteilen. Eine andere gute Möglichkeit ist, Ihrem Kontakt x Minuten vor dem Anruf eine SMS zu schicken, um ihn wissen zu lassen, dass er einen Anruf von Ihnen erwartet.
Ihre mobile Website hat wahrscheinlich auch ein Kontaktformular? Im Abschnitt Formulare unten finden Sie die üblichen Dinge, nach denen ich suche. Wenn Leads für Sie wertvoll sind (und das kann sehr unterschiedlich sein), dann reduzieren Sie die Kontaktformularfelder auf ein Minimum. Stellen Sie für jedes Feld des Formulars die Frage: “Wenn wir diese entfernen, wird sich die Erfahrung verschlechtern und warum? Es ist besser, einen Haufen Fragen beim Anruf zu stellen, als gar keine Leads zu bekommen. Wenn Ihnen jedoch hilft, eine Anfrage an die beste Abteilung weiterzuleiten – dann tun Sie das!
Wenn Sie die Daten nutzen, um die Dinge besser, schneller und einfacher für den Kunden zu machen, dann ist das großartig. Seien Sie einfach vorsichtig mit Kontaktformularen, da Sie entweder zu viele Kontakte erhalten können, die Sie nicht bearbeiten können, oder wertvolle Aufträge verlieren.
Wenn Sie die Telefonnummer Ihres Unternehmens auf Ihrer Website haben, bedenken Sie die Anrufkostenlandschaft. Wie viel kostet es Ihre Kunden, diese Nummer anzurufen? Gibt es eine gebührenfreie Nummer, die Sie benutzen können? Erklären Sie die voraussichtlichen Anrufkosten? Dies ist eine unglaublich wichtige Sache, die Sie tun müssen, und wird sich auf Ihre Anrufe auswirken.
Aus Tests, geht hervor, dass allein durch lokale statt nationale Nummern die Zahl der Anrufe enorm steigen wird. Es ist wichtig zu verstehen, wie Ihren Kunden Anrufe in Rechnung gestellt werden, und es gibt viele Möglichkeiten zur Optimierung. Solche Strategien können auf dem Smartphones jedoch scheitern, weil es sich um eine andere Kostenlandschaft handelt, als wenn man zu Hause mit einem Festnetzanschluss anruft.
Unternehmen, Kontakt, Social Proof
Enthält diese Seite Glaubwürdigkeitssignale oder Links wie Firmeninformationen, Adresse, Rezensionen, Auszeichnungen, Erwähnungen in der Presse, Kontaktdaten, über uns oder Social Proof?
Ich schaue hier nach:
- Social Proof / Kundenstimmen / Zeugnisse, Siegel, Zertifizierungen
- Vertrauen, Datenschutz, Sicherheit (nur für einige Seiten)
- Kontakt und Glaubwürdigkeit des Unternehmens
Tipps zur Formular Optimierung
Hat diese Seite eines der folgenden häufigen Probleme mit Formularen auf Mobiltelefonen?
- Rechtschreibprüfung an – in Feldern, in denen dies nicht wünschenswert ist
- Falsches Eingabeformat (z.B. bei Verwendung von tel: und anderen Eingabemasken)
- Minimale Anzahl von Feldern – und NUR das, was Sie verwenden und benötigen
- Alle oder die meisten Feldbeschriftungen obligatorisch
- Schlechte Ausrichtung der Beschriftung, mehrdeutige Etikettentexte, Kontrast
- Inline-Feldbeschriftungen, die Menschen verwirren
- Inline-Feldbeschriftungen, die dasselbe aussagen wie eine Beschriftung außen (“E-Mail” “Bitte geben Sie Ihre E-Mail ein” – Bitte!!!).
- Lange Dropdowns mit unnötiger Differenzierung
- Fummelige Eingaben (z.B. horizontale Felder, schwer zu bedienende Bedienelemente, übermäßiger Einsatz von Pickern)
- Keine kontextbezogene Hilfe oder unterstützenden Texte am Anfang des Formulars (behandeln Sie das Formular als Landing Page innerhalb einer Seite – erklärt es sich selbst innerhalb dieses Bereichs?)
- Was passiert als nächstes – deutet das Formularereignis darauf hin?
- Fehlervermeidung – Wird dies durch intelligente Standardeinstellungen (d.h. die wahrscheinlichste Option für diesen Kunden), intelligente Validierung (z.B. automatische Korrektur von Schreibfehlern bei E-Mail-Adressen) und die Verwendung der richtigen Steuerelemente (sowie das Ausschalten der Rechtschreibprüfung) auf ein Minimum beschränkt?
- Wenn Fehler angezeigt werden, werden sie im Ansichtsfenster angezeigt? Sind die Fehlertexte schlecht? Bietet die Meldung ein Beispiel dafür, wie der Fehler korrigiert werden kann? Gibt sie dem Benutzer die Schuld? Wie werden mehrere Fehler angezeigt? Wird die Inline-Validierung verwendet? Gibt es positives Feedback zum Ausfüllen eines Feldes?
- Klarheit und Nützlichkeit der CTA-Buttons (Weiter → Adressangaben)
- Nutzen des Fortschrittsindikators (falls vorhanden)
- Validierung beim Einreichen des Formulars – stellen Sie sicher, dass das Formular versucht, Dinge zu korrigieren, anstatt den Benutzer zu zwingen dies zu erledigen. Stichwort Adresskorrektur.
Fazit
Ich hoffe, dass das nützlich war – dies ist meine Checkliste, auf die Sie sich beziehen können, wenn Sie sich Ihre Mobile Landing Pages ansehen.
Wenn Sie noch etwas haben, was in diese Liste unbedingt reingehört, schreiben Sie es mir gerne in die Kommentare.