Wie Anpassen von UX für Mobile
Was hat die Psychologie damit zu tun? Wenn es um Benutzererfahrung geht, fast alles.
Mit so vielen Gerätetypen und -größen und so vielen verschiedenen Möglichkeiten, Webseiten für diese Geräte zu entwerfen, bestimmt die Benutzererfahrung, die ein Designer erstellt, den Gesamterfolg der Site und ob ein Benutzer zurückkehrt.
Was ist Benutzerpsychologie?
Benutzerpsychologie ist die Wissenschaft hinter dem, was Menschen wollen und brauchen, wenn sie eine Website oder eine mobile App besuchen. Die Psychologie ist in allen Bereichen verwurzelt, angefangen bei der Frage, ob ein Nutzer Ihrer Marke vertraut, und von der Art und Weise, wie sie die Botschaft verstehen, die Sie vermitteln möchten.
Und Design ist ein großer Teil davon. Alles von Farbe über Bilder zu Mustern bis hin zur Funktionsweise der Seite kann beeinflussen diese Gefühle und emotionalen Verbindungen.
Jedes dieser Elemente sollte letztendlich zu einer Aktion des Benutzers führen. Die meisten Lehrbücher der Psychologie beziehen sich auf Auslöser, die Menschen dazu veranlassen, zu handeln und zu reagieren. Diese Auslöser gelten auch für das Webdesign und insbesondere für das mobile Design, bei dem ein Benutzer fast immer physisch mit einer Website interagieren muss, um etwas passieren zu lassen, wie z. B. das Streichen oder Tippen mit den Fingern auf dem Bildschirm.
- Gegenseitigkeit: Wenn Sie etwas für Benutzer tun, werden sie etwas für Sie tun. (Sie melden sich für einen Newsletter an, Sie geben ihnen ein Freebie.)
- Framing: Benutzer werden Vergleiche zwischen den Dingen machen. (Will ich das oder das? Die meisten Benutzer fallen irgendwo in die Mitte aller Optionen.)
- Ausgeglichenheit: Benutzer wollen, was jetzt wichtig ist. (Aus diesem Grund fügen E-Commerce-Websites während des Einkaufserlebnisses ähnliche Elemente zum Bildschirm hinzu.)
- Sozialer Beweis: Nutzer schauen anderen zu, was sie tun sollen. (Der Einfluss von Social Media.)
- Knappheit: Nutzer wollen, was sie nicht haben können. (Begrenzte Anzahl von Artikeln.)
- Kontrast: Was im Kopf des Nutzers auffällt. (Designtheorie 101.)
Zwei verschiedene Benutzererfahrungen
Während die Auslöser unabhängig vom Gerät gleich sind, ist die Benutzererfahrung nicht. Nutzer möchten mit überwältigender Mehrheit, dass der Inhalt unabhängig vom Gerät gleich ist. Sie haben jedoch unterschiedliche Ideen, wie sie diesen Inhalt verwenden und mit ihm interagieren.
Desktop-Websites dienen zum Lesen und Durchlesen. Der Vorgang des Lesens und Sammelns von Informationen kann zu einer Aktion führen, aber Benutzer haben oft einen eindeutigen Grund, auf eine Website zu gehen, wie zum Beispiel Arbeit. Nicht alle diese Erfahrungen basieren auf Unterhaltung oder Vergnügen und die meisten von ihnen möglicherweise nicht.
Desktop-Benutzer sind relativ noch in ihren Online-Interaktionen. Jede Aktion wird mit einer Tastatur oder Maus ausgeführt. Es gibt einfach nicht viel physische Interaktion mit dem Gerät. (Wenige Benutzer werden den Bildschirm jemals berühren.)
Die Benutzererfahrung für Mobilgeräte unterscheidet sich erheblich. Benutzer berühren ständig das Gerät - Gehäuse und Bildschirm. Daher ist die Größe dieser Elemente und wie sie sich anfühlen ziemlich wichtig. Diese Verwendung von physischer Berührung macht das Gestalten von Elementen auf dem Bildschirm besonders wichtig, da sie leicht zu berühren sein müssen, im Gegensatz zu Desktop-Versionen, bei denen der Mausklick immer die gleiche Größe hat.
Benutzer mobiler Geräte greifen häufig auf Websites mit unterschiedlichen Absichten zu. Unterhaltung oder Aufgabenerledigung sind häufiger als Lese- und Forschungsaktionen. (Denken Sie nur daran, wie oft Sie Ihr Telefon herausziehen, um ein Spiel in der Schlange im Supermarkt zu spielen oder auf eine SMS zu antworten.)
Physische Unterschiede beeinflussen auch die Psychologie des mobilen Designs. Sie müssen Lichtbedingungen, Gerätegröße und Touch-Optionen berücksichtigen. Wie werden diese Elemente für einen tatsächlichen Benutzer zusammenkommen?
Nutzererwartungen
Es geht um eine zentrale Frage: Was will und erwartet der mobile Nutzer?
Anders als bei Desktop-Websites, bei denen Nutzer eine visuell dynamische und ansprechende Erfahrung erwarten, die relativ zweidimensional ist, möchten mobile Nutzer, dass sich alles im dreidimensionalen Raum real und lebendig anfühlt.
Mobile Benutzer erwarten bestimmte Dinge von der Schnittstelle:
- Jede Aktion muss tappbar sein. (Und leicht zu sehen und tippen.)
- Grafiken und Bilder sollten schnell geladen werden und sind möglicherweise nicht Teil des mobilen Erlebnisses.
- Optionen müssen kontextbezogen sein. Benutzer möchten wissen, was als nächstes kommt und wohin sie von hier aus gehen können. Sie müssen nicht jede mögliche Option kennen.
- Websites müssen mit allen Funktionen mobiler Geräte wie Mapping, Anruf und Integration mit anderen Apps integriert werden.
- Interaktionen müssen einfach sein und allgemein akzeptierten Mustern folgen. Mobile Benutzer haben fast keine Aufmerksamkeitsspanne. Wenn Elemente beim ersten Mal nicht funktionieren - und ohne viel Nachdenken oder Erklärung - ist der Benutzer verloren.
Wie man es gestaltet
Das eigentliche Geheimnis ist die Kombination von Auslösern und Benutzererwartungen; dann entwerfe für sie. Lassen Sie uns ein paar Beispiele von Websites aufführen, die das gut machen und wie sie Auslöser und mobile Erwartungen für eine hervorragende Nutzererfahrung kombinieren.
Minze
Minze verwendet eine kartenähnliche Benutzeroberfläche, bei der jede Box ein anklickbares Element im Design der mobilen App ist, während die Desktop-Version mehr klickähnliche Links enthält. Helle Farben und viel Leerraum tragen ebenfalls zur schlanken mobilen Version bei.
Auslöser: Framing und Salience sind die wichtigsten Auslöser, denn als kostenloser Service bittet Sie mint, sich für zeitlich befristete Angebote zu registrieren, basierend auf Dingen, die Sie wahrscheinlich denken oder benötigen, von der Kreditkarte bis zu Versicherungsangeboten.
Mobile Erwartungen: Mint lädt außergewöhnlich schnell mit aktuellen Benutzerdaten. Die mobile App löscht viele der schwereren Bilder, die auf der Desktop-Website erscheinen, und verwendet ein einfaches vertikales Muster, um Informationen zu verfolgen. Es enthält auch einige nette UX-Tools wie Fingerabdruck-Zugriff auf dem iPhone und intuitive Gestensteuerung zum Bewegen zwischen Elementen.
Brenner
Brenner verwendet ein Responsive Framework, so dass Inhalte sowohl auf der Desktop- als auch auf der mobilen Version nahezu identisch aussehen und sich anfühlen. Die Website maximiert jedoch das Potenzial des mobilen Formats mit einzigartigen Möglichkeiten, um den Inhalt zu navigieren.
Auslöser: Sie können leicht erkennen, wie diese Website den Kontrast verwendet, um Benutzerinteraktionen zu erzeugen. Die Verwendung von Farbe und Leerraum in beiden Website-Varianten soll Aufregung erzeugen und Call-to-Action fördern. (Schau dir einfach die bunten Knöpfe und prominenten Platzierungen an.)
Mobile Erwartungen: Distiller verwendet viele allgemein akzeptierte Muster, um die Benutzer zum Eingreifen zu bewegen, mit ein paar subtilen Hinweisen, nur für den Fall, dass der Benutzer Hilfe benötigt. Schauen Sie sich zum Beispiel den zweiten mobilen Bildschirm an: Die Elemente im Kartenstil (die jeweils eindeutige Links sind) können hin- und hergeschwenkt werden, um mehr Inhalt zu sehen, und ein Punkt-Balken zeigt den Benutzern, wie viele Elemente noch übrig sind. Die Navigation ist außerdem deutlich optimiert und in einem Hamburger-Icon versteckt, so dass Benutzer nicht von Optionen überfordert sind und sich frei auf der mobilen Website bewegen können.
Der Wetter Kanal
Der Wetter Kanal bietet den gleichen Inhalt auf seiner Desktop-Website und mobilen App, aber die Erfahrungen sind drastisch unterschiedlich. Die Desktop-Website enthält mehr Informationen zum Lesen und Durchsehen, während die App sich darauf konzentriert, was der Benutzer jetzt wissen muss.
Auslöser: Salience (oben erwähnt) und soziale Beweise sind ein großer Teil dessen, was die Mobile App von Weather Channel unterscheidet. Der Eröffnungsbildschirm ist Wetter, wo der Benutzer zu dieser Zeit steht. Mit einem Fingerzeig können Benutzer Bedingungen melden, in sozialen Medien teilen und ein Teil der Wettergeschichte der bekannten Marke werden.
Mobile Erwartungen: Die App verwendet ein modernes, flaches Karten-Design, um jedes Element leicht zu tippen. Es gibt kein Menü, über das man sprechen kann, da die gesamte Prämisse kontextabhängig ist und Benutzer basierend auf ihren Entscheidungen von einem Element zum nächsten führt.
Dominos Pizza
Dominos Pizza hat einen großen, öffentlichen Deal darüber gemacht, wie einfach es ist, zu bestellen. Und sie haben Recht. Während die Desktop-Site eine sehr traditionelle Atmosphäre hat, verwendet die App viele mobile spezifische Benutzeroberflächen-Tools - wie zum Beispiel Sprachreihenfolge -, um den Prozess zu vereinfachen.
Auslöser: Rekrutierung und Framing sind die Schlüssel zum Einkaufserlebnis, mit vielen Angeboten und Optionen zur Auswahl. Außerdem merkt sich die mobile Version die Vorlieben eines Benutzers, um den Vorgang zu vereinfachen.
Mobile Erwartungen: Obwohl Domino einige Funktionen verwendet, die bei diesen Arten von Apps nicht üblich sind, wird es gut erklärt (z. B. das Symbol für die Sprachreihenfolge). Die Navigation ist kontextabhängig und die App ist mit viel Kontrast und kleinen Bildern ausgestattet, die schnell geladen werden.
Die Tonight Show
Die Tonight Show wurde entwickelt, um Benutzer auf verschiedenen Geräten zu unterhalten. Die Desktop- und Responsive-Site sowie die App sehen alle ähnlich aus. Die mobilen Optionen sind mit einer vertikalen Hierarchie gestrafft und Elemente sind leicht zu beobachten.
Auslöser: Wie bei vielen anderen Entertainment-Sites sorgen Salience und Social Proof dafür, dass die Leute zurückkommen. Sie wollen wissen, was heiß und trendig ist und das ist der Ort, um es zu finden.
Mobile Erwartungen: Einer der großen, kleinen Tricks auf der mobilen Website ist, dass der Nutzer zuerst gefragt wird, ob er die App möchte, als ob er sagen möchte "Willst du die beste Erfahrung, die wir anbieten?" Dies ist ein großartiges Tool für Benutzer sind zu erwarten. Es ist einfach, die App zu finden, weil sie nur einen Fingertipp entfernt ist und die Nutzer nicht nach etwas suchen müssen; Vor ihnen ist alles in Ordnung.
Fazit
Die meisten Benutzer wollen und erwarten, dass sie unabhängig vom Gerät den gleichen Website-Content finden, möchten jedoch häufig, dass die Nutzererfahrung auf das Gerät zugeschnitten ist, das sie verwenden.
Diese gerätespezifische Benutzererfahrung wird dazu beitragen, die Loyalität der Benutzer und die guten Gefühle zu erhöhen, die die meisten Website-Besitzer den Benutzern zutrauen. Einfach gesagt, ein guter Desktop und Erfahrung und eine gute mobile Benutzererfahrung ist wichtig; sie sind vielleicht nicht dasselbe.
Design für Benutzer, indem sie optimieren, wie sie sich mit ihren Geräten fühlen, verwenden und mit ihnen interagieren.