Wie man für großartige mobile UX entwirft

Das Design für großartige mobile UX muss bei allem, was Ihr Unternehmen im Web tut, an vorderster Front stehen. Wenn Sie beim Designen nicht in erster Linie auf Mobilgeräte achten, wird Ihr Unternehmen nicht so erfolgreich sein, wie es sein könnte und sollte. Der Grund ist einfach: Mobilgeräte haben Desktops längst als wichtigste Methode für den Zugriff auf das Internet überholt. Mit anderen Worten, versäumen Sie es, für Mobilgeräte zu entwerfen … versäumen Sie es, so viele Website-Besucher, Leads und Kunden wie möglich zu gewinnen.

Schauen wir uns die Statistiken an.

Laut Smart Insights haben wir den Punkt überschritten, an dem die Anzahl der mobilen Benutzer die Anzahl der Desktop-Benutzer übertroffen hat. Dieser Wendepunkt ereignete sich im Jahr 2014. Seitdem ist die Zahl der globalen Mobilnutzer nur noch aggressiv gestiegen, während die Zahl der Desktop-Nutzer weniger schnell zugenommen hat.

Unter dem Strich landen mehr Leads, Besucher und Kunden auf ihren Mobiltelefonen auf Ihrer Website, nicht auf ihren Desktops.

Wenn Sie Ihre Conversions maximieren möchten, muss Ihre Website zuerst für Mobilgeräte optimiert werden. Gute mobile UX ist heute auch erfolgreiches Mobile Marketing.

Lass uns einen Blick darauf werfen.

Wie man für großartige mobile UX designt: Was die Statistiken sagen

Jedes Mal, wenn Sie einen soliden Anwendungsfall für die Rechtfertigung von Ausgaben in Ihrem Unternehmen finden möchten, z. B. für Mobile-First-Design, schauen Sie sich einfach die Statistiken darüber an, wie und wo Menschen heutzutage einkaufen. Gehen Sie dorthin, wo die Beweise Sie hinführen.

Das globale Technologieunternehmen Criteo, das sich auf Handelsmarketing spezialisiert hat, hat eine Pressemitteilung veröffentlicht, die enthüllt, dass mobile Verkäufe allein in den USA jetzt 52 % aller E-Commerce-Transaktionen ausmachen. Wenn Sie effektiv und erfolgreich verkaufen wollen, brauchen Sie natürlich eine sehr effiziente mobile Präsenz mit einer großartigen UX.

Hier ist eine weitere sehr interessante Statistik, die tatsächlich mehr verrät, als es auf den ersten Blick scheint.

Laut dem Mobile Retail Report von Adobe sind die Conversions auf Desktops 2,8-mal höher als auf Mobilgeräten. Wenn Sie denken, dass dies bedeutet, dass es nicht wichtig ist, für Mobilgeräte zu optimieren, denken Sie noch einmal darüber nach. Dies ist eigentlich ein Grund mehr, sich einer Mobile-First-Strategie zu verpflichten, zumal Mobile immer noch mehr Traffic ausmacht als Desktop.

Der Grund dafür, dass die Conversions auf dem Desktop höher sind, liegt wahrscheinlich an der Tatsache, dass mobile Erfahrungen nicht so optimiert sind, wie sie sein sollten – nicht, weil die Leute nicht lieber auf dem Handy einkaufen und konvertieren, wo es für sie von vornherein bequemer ist !

Stellen Sie sich ein Szenario vor, in dem Ihre mobile Website perfekt optimiert ist, mehr Traffic erhält als Ihre Desktop-Website und mehr Conversions als Desktop-Website, und das alles nur, weil Sie großartige mobile UX implementiert haben.

Es ist in Ihrer Reichweite. Hier ist, was zu tun ist.

Design für Daumen … aber nicht in erster Linie für Daumen

Die mobile Benutzerfreundlichkeit sollte auf all den verschiedenen Arten basieren, auf die Menschen bekanntermaßen mit ihren Smartphones interagieren. Wie man für großartige mobile UX entwirft, ist ebenso gesund wie evidenzbasiert.

Es ist verlockend anzunehmen, dass es für mich bequemer ist, wenn ich mein Smartphone zum Navigieren und Einkaufen auf einer mobilen Website verwende, indem ich das Telefon einfach in einer Hand halte und den Daumen derselben Hand verwende, um meinen Benutzer zu erreichen Tore. Es ist ebenso verlockend anzunehmen, dass es für mich weniger bequem wäre, beide Hände zu verwenden (das Telefon in einer Hand und den Zeigefinger der anderen Hand zu verwenden, um meine Benutzerziele zu erreichen).

Diese gängige Meinung ist jedoch falsch, da sie davon ausgeht, dass Menschen ihre Telefone nur oder hauptsächlich mit einer Hand bedienen.

Untersuchungen zeigen, dass es tatsächlich sechs unterschiedliche Arten gibt, wie Menschen ihre Telefone halten und mit ihnen interagieren. Jede mobile Website, die nicht für alle sechs Möglichkeiten konzipiert ist, wird scheitern und niedrigere Konversionsraten erfahren, weil die UX darunter leidet.

Die sechs Wege sind:

• Wiegen (eine Hand stützt das Telefon, während der Daumen der anderen Hand tippt)
• Halten und berühren (eine Hand stützt das Telefon, während der Zeigefinger der anderen Hand tippt)
• Zwei Hände für Querformat (denken Sie daran, wie Sie ein tragbares Spielgerät wie den Nintendo 2DS XL halten würden)
• Eine Hand – erste Bestellung (eine Hand hält das Telefon, während der Daumen auf derselben Hand tippt)
• One Hand – Second Order (eine Hand hält das Telefon, während der Daumen auf derselben Hand tippt, aber aus einer höheren Ausgangsposition)
• Zwei Hände zur Ausrichtung im Hochformat (denken Sie daran, wie Sie dieses Mal ein tragbares Spielgerät halten würden, wie den alten Nintendo Gameboy)

Nun, und hier wird es wirklich relevant, hier sind die verschiedenen Anwendungsfälle für die verschiedenen Arten, wie Sie ein Telefon halten können:

• Tippen auf Links – Die meisten halten und tippen oder wiegen
• Kästchen ankreuzen – Die meisten wiegen oder halten und tippen
• Tippen – Die meisten verwenden zwei Finger oder Daumen gleichzeitig oder halten und tippen
• Kurzes Scrollen – Die meisten halten und tippen oder wiegen
• Längeres Scrollen – Die meisten wiegen oder halten und tippen

Fazit: Gestalten Sie Ihre mobile Website so, dass sie die unterschiedlichen Arten, wie Menschen ihre Telefone halten, berücksichtigt.

Größere Knöpfe sind besser

Wenn Sie darüber nachdenken, wie Sie für großartige mobile UX entwerfen können, ist einer der wichtigsten Aspekte, auf die Sie sich konzentrieren sollten, die Schaltflächengröße. Wie bei allen mobilen Dingen ist Ihre Bildschirmgröße viel kleiner als bei Tablets oder Desktops, wodurch die Benutzerfreundlichkeit Ihrer mobilen Website beeinträchtigt wird, wenn die Schaltflächen zu klein sind. Schaltflächen mit unzureichender Größe führen zu UX-Fehlern wie:

• Es ist schwierig, die Tasten richtig anzutippen
• Probleme, die Schaltflächen überhaupt zu sehen
• Schwierigkeiten haben, zu verstehen, dass eine Schaltfläche angetippt oder anderweitig mit ihr interagiert werden kann

Err auf der Seite größer ist besser.

Größere Schaltflächen sorgen für eine reibungslosere UX für Ihre Käufer, Kunden, Besucher usw.

Da stellt sich die Frage, wie groß genau?

Laut Googles eigener Material Design Touch Target Size-Richtlinie sollten mobile Buttons eine Touchscreen-Größe zwischen 7 und 10 Millimetern erreichen. Mit anderen Worten, Schaltflächen sollten unabhängig davon, auf welchem ​​Bildschirm sie angezeigt werden, eine physische Größe von etwa 1 Zentimeter haben. Dies gewährleistet eine hervorragende Balance zwischen:

• Informationsdichte
• „Targetability“ der Elemente der Benutzeroberfläche

Wenn Ihre Benutzer Schaltflächen leichter sehen, ihre räumliche Beziehung zu anderen Bildschirmelementen verstehen und auf sie tippen können, um Seitenziele erfolgreich abzuschließen, dann bieten Sie ihnen eine erstaunliche UX.

Priorisieren Sie die wichtigsten Inhalte

Die Antwort auf die Frage: Wie designt man für großartige mobile UX? liegt manchmal darin, was Sie subtrahieren anstatt zu addieren. Bei Bildschirminhalten gilt diese Regel zu 100 %.

Der Segen von Smartphones ist ihre kleine und tragbare Größe, trotz des jüngsten Trends, die Bildschirmgröße von Mobilgeräten zu erhöhen. Diese Bequemlichkeit hat einen Nachteil, nämlich dass Benutzer höheren Interaktionskosten ausgesetzt sind. Dies ist die körperliche und geistige Anstrengung, die sie aufwenden müssen, um ihre Ziele für mobile Websites zu erreichen.

Wenn Sie beispielsweise auf Ihrem Desktop auf einer Nachrichtenseite navigieren, können Sie auf der Startseite wahrscheinlich die Sportergebnisse und die Wettervorhersage in den Seitenleisten „above the fold“ sehen, sodass Sie sich nicht die Mühe machen müssen, nach unten zu scrollen. Auf Mobilgeräten würde derselbe Inhalt jedoch wahrscheinlich ein ernsthaftes Scrollen erfordern, um ihn zu erreichen, da der Speicherplatz auf Mobilgeräten knapp ist.

Daher besteht die einzige Lösung darin, die wichtigsten Inhalte „above the fold“ auf Mobilgeräten zu priorisieren. Mit anderen Worten: Überlegen Sie gut, welche Inhalte Sie Ihren Nutzern und Besuchern auf Ihren mobilen Seiten „above the fold“ zeigen. Schließlich muss für jedes Inhaltselement, das Sie „above the fold“ einfügen, ein weiteres Element nach unten geschoben und sogar „below the fold“ geopfert werden.

Ein Ansatz zur Maximierung des mobilen Inhalts "above the fold" ist die Minimierung des sogenannten Chroms. Wir sprechen in diesem Fall nicht über den Browser von Google. Chrome ist eine Sammlung von visuellen Designelementen, die Benutzern helfen, mit dem Inhalt einer Benutzeroberfläche zu interagieren oder zusätzliche Informationen darüber bereitzustellen, die jedoch nicht Teil des Inhalts sind. Chrome stammt aus dem Betriebssystem des Mobiltelefons.

Ein Beispiel für Chrome wären alle Bilder, die mit den Konten von Personen verknüpft sind, wenn Sie E-Mails im Posteingang Ihrer Google Mail-App anzeigen. In diesem Beispiel helfen Ihnen diese Bilder zusätzlich, Ihre Absender zu identifizieren, aber sie sind nicht unbedingt erforderlich, um sie zu identifizieren (die Von-Zeile in der E-Mail selbst würde ausreichen).

Indem Sie diese Chromelemente reduzieren, sparen Sie viel Platz auf dem mobilen Bildschirm und haben daher eine bessere Chance, die wichtigsten Informationen über dem kleinen Faltbereich zu platzieren.

Konzentrieren Sie sich auf den Endbenutzer

Das Geheimnis des Designs für großartige mobile UX liegt immer beim Endbenutzer. Denken Sie daran, wenn Sie Ihre mobilen Websites entwerfen, und Sie werden eine Website erstellen, die benutzerfreundlich ist. So einfach ist das.

Um dorthin zu gelangen, stellen Sie sicher, dass Sie auf echten Daten und nicht auf Annahmen basieren. Ein guter Anfang ist, wie Ihre Benutzer ihre Telefone überhaupt halten. Wenn Sie für eine Art entwerfen, in der viele Menschen nicht einmal ihr Telefon in der Hand halten, sind alle Wetten abgeschlossen.

Es ist auch wichtig, sich daran zu erinnern, dass Inhalte aufgrund der kleinen mobilen Bildschirme einfach und schnell zu sehen sein müssen, also vergrößern Sie die Elemente und stellen Sie sicher, dass die wichtigsten Inhalte "above the fold" sind.