Mobile UX-Designbeschränkungen, Best Practices und Zusammenarbeit mit Entwicklern

Wir können bessere Benutzererfahrungen erzielen, indem wir Best Practices für mobiles UX-Design befolgen, Einschränkungen verstehen und eine solide Arbeitsbeziehung mit Entwicklern ermöglichen.

Was ist Mobile UX-Design?

Ein kürzlich erschienener Artikel auf TechCrunch wies darauf hin, dass der mobile E-Commerce während der Feiertage zum Erntedankfest 2018 fast ein Drittel aller Online-Verkäufe ausmachte, und Digital Trends berichtete 2017, dass 5 Milliarden Menschen auf der ganzen Welt jetzt ein mobiles Gerät besitzen. Google gab außerdem bekannt, dass die Mobile-First-Indexierung jetzt für mehr als die Hälfte der Webseiten in seinen Suchergebnissen verwendet wird.

Menschen verlassen sich täglich auf mobile Geräte für Kommunikation, E-Commerce, Inhaltskonsum, Arbeit, Bankgeschäfte, Wegbeschreibungen und zunehmend als ihr einziges Computergerät. Darüber hinaus verwenden sie eine Vielzahl von Geräten wie Mobiltelefone, Smartwatches, Tablets, Phablets, Wearables und Hybrid-Laptops.

Mobile User Experience (UX) Design bezieht sich auf das Design positiver Erfahrungen während der Nutzung von mobilen Geräten und Wearables und Anwendungen oder Diensten, die auf solchen Geräten laufen… Mobile UX Design konzentriert sich stark auf Effizienz und Auffindbarkeit. - Interaktionsdesign-Grundlage

Für UX-Designer stellen diese Mobilgeräte-Trends sowohl Herausforderungen als auch Chancen dar. Einerseits müssen wir die Vielfalt der Geräte und deren Verwendung berücksichtigen. Andererseits eröffnet dies ganz neue Schwerpunkte im UX-Design, und das bedeutet, positive Erlebnisse für eine ganz neue Generation von Nutzern zu schaffen.

Best Practices für das mobile UX-Design

Mobile UX-Design ist knifflig. Wie bereits erwähnt, gibt es so viele Dinge, die wir berücksichtigen müssen, einschließlich der wachsenden Liste mobiler Geräte, der Art und Weise, wie Menschen mit ihnen interagieren, und der Tatsache, dass Menschen konsistente und angenehme Erfahrungen über alle Gerätetypen hinweg wünschen.

Googles 25 Mobile UX Design-Tipps

Im Jahr 2015 veröffentlichte Google 25 Best Practices für mobiles UX-Design, die auf internen Untersuchungen basieren. Diese Tipps wurden kürzlich aktualisiert, um sie aktueller zu machen. Der Autor enthält auch ein herunterladbares PDF mit allen 25 Tipps, das für jedes mobile UX-Projekt gut griffbereit ist.

Apples Human Interface Guidelines

Eine weitere großartige Ressource, die Sie immer griffbereit haben sollten, sind die Human Interface Guidelines von Apple für das mobile Design. Sie sind mit einem schönen Layout leicht zu lesen und gespickt mit Best Practices, Tipps und Apples eigenen Designprinzipien. Für mobile UX-Designer sind diese Richtlinien eine großartige Ressource, um qualitativ hochwertige Benutzererlebnisse bereitzustellen.

Zusätzliche Best Practices für mobile UX

Hier sind ein paar weitere Best Practices für das mobile UX-Design, die vielleicht nicht so bekannt sind wie die von Google, aber für mobile Designer genauso wichtig sind.

• UX-Forschung . Ab einem bestimmten Punkt fühlen wir uns vielleicht geneigt, uns direkt mit Mockups oder Prototypen zu befassen, aber zuerst eine angemessene UX-Forschung zu betreiben, ist etwas, das nicht unterschätzt werden darf. Denken Sie immer daran, dass „Sie nicht Ihr Benutzer sind“, und eine positive Benutzererfahrung beruht in jedem Fall auf einer gründlichen UX-Forschung. Hier ist der umfassende Leitfaden von Adobe zu UX-Forschungsmethoden als weitere Referenz.
• Unordnung . Wir alle haben die Angst vor einem überladenen Desktop erlebt – stellen Sie sich das auf einem mobilen Gerät vor! Jede hinzugefügte Schaltfläche, jedes Bild, jeder Inhalt usw. macht die Dinge noch viel komplizierter. Es ist eine gute Idee, alles in einer mobilen Benutzeroberfläche loszuwerden, das nicht absolut notwendig ist. Ein guter Tipp ist, nach Minimalismus zu streben, aber nicht auf die Gefahr einer guten Benutzerfreundlichkeit zu verzichten. Dies kann oft erreicht werden, indem auf jedem Bildschirm eine Hauptaktion priorisiert wird.
• Priorisieren . Es besteht die Tendenz, so viele Funktionen wie möglich hinzuzufügen. Wir sind der Meinung, dass das Weglassen von etwas weniger Erfahrung für die Benutzer schafft. Konzentrieren Sie sich im Gegenteil auf die Funktionen basierend auf den Kernzielen und verfeinern Sie das Design, indem Sie analysieren, welche Funktionen am häufigsten verwendet werden, und bemühen Sie sich dann, diese Funktionen sowohl intuitiv als auch angenehm zu gestalten.
• Berühren Sie Ziele . Benutzer können körperlich wütend werden und anfangen, auf ihre mobilen Geräte zu schlagen, wenn sie auf etwas tippen und es nicht reagiert. Eine am MIT durchgeführte Studie ergab, dass sie auf etwas klopften, das ein zu kleines Berührungsziel hatte. Eine bewährte Vorgehensweise besteht darin, Steuerelemente, Schaltflächen, Links usw. (alles, was ein Berührungsziel ist) mit einer Mindestbreite von 7–10 mm zu erstellen, was der durchschnittlichen Fingerspitzenbreite entspricht. Es ist auch eine gute Idee sicherzustellen, dass zwischen diesen UI-Elementen ausreichend Platz ist.
• Lesbarer Text . Da so viel von dem, was Benutzer tun, auf dem Konsum von Inhalten basiert, stellen Sie sicher, dass Sie Schriftarten auswählen, die in verschiedenen Größen und Gewichten gut funktionieren, um ein konsistentes Erlebnis auf allen Arten von Mobilgeräten zu bieten. Es werden Schriftgrößen von mindestens 11 Punkt empfohlen, um die Belastung der Augen zu verringern. Klare und leicht lesbare Schriftarten wie Roboto und Noto von Google oder die neue Schriftart San Francisco von Apple sind eine großartige Wahl zum Erkunden.
• UI-Feedback . Gut gestaltete Anwendungen halten uns auf dem Laufenden, während wir mit ihnen interagieren. Ein Mangel an gutem Feedback kann Benutzer verwirren und dazu führen, dass sie sich fragen, ob etwas passiert ist, passiert oder warum es passiert / nicht passiert ist. Eine bewährte Methode ist es, verschiedene Formen des Feedbacks (Sound, Haptik, Visualisierungen) zu verwenden, basierend auf dem UI-Element oder dem aktuellen Zustand der App.
• Zugänglichkeit . Dies ist wahrscheinlich einer der am meisten übersehenen Aspekte des User-Experience-Designs und insbesondere des Mobile-UX-Designs. 15 % der Weltbevölkerung leiden unter irgendeiner Form von Behinderung. Die Richtlinien für die Zugänglichkeit von Webinhalten sind eine frei verfügbare Ressource und für Digitaldesigner ein „Muss“ als Teil ihrer Werkzeugkiste.

Mobile UX-Designbeschränkungen

Das Ziel der meisten UX-Designer ist es, angenehme Erfahrungen zu bieten und großartige Designs zu entwickeln, die sowohl Auffindbarkeit (welche Aktionen sind möglich) als auch Verständnis (wie soll das Produkt verwendet werden) erreichen. Bei Mobilgeräten gibt es jedoch einige Einschränkungen aufgrund der Größe, Tragbarkeit und Umgebungen, in denen diese Geräte verwendet werden.

Speicherbeschränkungen

Beim Umgang mit nativen mobilen Apps müssen Designer berücksichtigen, dass einige Benutzer möglicherweise Speicherbeschränkungen haben.

Eine mobile App verwendet im Gegensatz zu einer Web-App den Speicher direkt auf dem mobilen Gerät. Dies wirkt sich auf das mobile UX-Design aus, da es potenzielle Einschränkungen bei der Qualität von Video, Audio und Bildern mit sich bringt, die verwendet werden können.

Für native Apps wollen wir mobile UX-Designs, die Speicherbeschränkungen berücksichtigen. Wenn ein Benutzer auf eine Speicherbeschränkung stößt, muss er harte Entscheidungen darüber treffen, was er behalten und was er löschen soll. Es führt zu einer schlechten Benutzererfahrung, wenn wir Benutzer dazu zwingen, diese Entscheidungen zu treffen.

Bildschirme und Bedienelemente

Eine weitere Einschränkung, mit der wir beim mobilen UX-Design konfrontiert sind, ist die Bildschirmgröße und die Steuerelemente auf unseren Mobilgeräten.

Mobile Bildschirme sind kleiner: Das Lesen durch ein Guckloch erhöht die kognitive Belastung und macht es etwa doppelt so schwer zu verstehen. - Jakob Nielsen, Web-Usability-Berater.

Der beste Weg, mit Bildschirmen und Bedienelementen umzugehen, besteht darin, so viel Reibung wie möglich zu beseitigen. Strukturieren Sie Informationen um, achten Sie auf die Daumenzonen, verringern Sie Klicks (insbesondere im E-Commerce) und achten Sie auf den Anmeldeprozess, der oft frustrierend sein kann.

Umfeld

Bei Mobilgeräten sind Umgebungsfaktoren für das UX-Design zu berücksichtigen. Benutzer werden viel häufiger offline geschaltet, und diese Situationen müssen bei der allgemeinen Benutzererfahrung berücksichtigt werden. Wie bringen wir sie dorthin zurück, wo sie waren? Wie stellen wir sicher, dass sie nicht mit dem, was sie getan haben, von vorne anfangen müssen?

Ein weiterer Umweltfaktor sind Ablenkungen. Wenn wir unsere Mobiltelefone oder Tablets benutzen, befinden wir uns oft in einer lauten oder überfüllten Umgebung, die es schwer macht, sich zu konzentrieren. Wie können wir eine gute Benutzererfahrung sicherstellen, wenn Ablenkungen um die Aufmerksamkeit eines Benutzers konkurrieren? Gibt es Möglichkeiten, Zustände zu speichern und es unseren Benutzern zu ermöglichen, Zustände ebenfalls zu speichern?

Kleine Bildschirmgröße, einzelnes Fenster

Eine weitere Einschränkung, mit der Designer beim mobilen UX-Design konfrontiert sind, ist die begrenzte Größe des Bildschirms. Aus diesem Grund können Benutzer jeweils nur ein Fenster sehen, was die Benutzererfahrung stark einschränkt.

Es gibt Bemühungen, „Multi-Screen“ und „Multitasking“ unterzubringen, aber diese sind noch nicht die Norm und bringen ihre eigenen Einschränkungen mit sich.

Der Schlüssel zu einer besseren mobilen UX mit dieser Ein-Fenster-Einschränkung ist, dass das Design autark sein sollte. Alles, was der Benutzer tun muss, sollte innerhalb eines einzigen Bildschirms oder Fensters erledigt werden können, dh er sollte die App nicht verlassen müssen, um Informationen zu finden usw.

Wenn Benutzer Apps verlassen oder neue Bildschirme öffnen müssen, erhöht dies die allgemeine kognitive Belastung, und das bedeutet, dass die Dinge zu komplex und frustrierend werden.

Wie Menschen mobile Geräte halten

Es gibt eine letzte Einschränkung, die Sie beachten sollten: Halten Sie unsere Gadgets. Wie werden sie gehalten und was bedeutet das für das mobile UX-Design?

Laut einer Studie von Steven Hoober, die in „Design for Fingers, Touch, and People, Part 2“ beschrieben wurde, wurde festgestellt, dass Menschen mit ihren Geräten unterschiedlich interagieren, je nachdem, wie sie sie halten, was sich wiederum auf das mobile UX-Design auswirkt.

Menschen halten ihre Mobilgeräte auf unterschiedliche Weise und ändern ständig ihre Position. Dies wirkt sich darauf aus, welche Finger sie verwenden und wie sie mit einer mobilen Benutzeroberfläche interagieren (siehe unten). Wie sich herausstellt, bevorzugen Benutzer die Mitte des Bildschirms und klicken nicht gerne auf Elemente, die zu nahe an den Rändern liegen.

Hier sind einige zusätzliche mobile UX-Tipps aus Stevens Forschung:

• Design für jeden Benutzer und jeden Typ und jede Größe eines Mobilgeräts
• Design für all die verschiedenen Arten, wie Menschen mit ihren Geräten arbeiten
• Bedenken Sie, dass Benutzer in den meisten Fällen lieber die Mitte ihres Bildschirms berühren
• Platzieren Sie wichtige Aktionen in der mittleren Hälfte bis zwei Drittel des Bildschirms
• Stellen Sie sicher, dass Finger und Daumen den Inhalt nicht verdecken
• Auswählbare Elemente sollten groß genug sein, um bequem angetippt werden zu können

Zusammenarbeit mit Entwicklern

Unabhängig davon, ob Sie in einer agilen/schlanken UX-Umgebung arbeiten oder nicht, es sind die Entwickler, die die so sorgfältig ausgearbeiteten Designs interpretieren und implementieren müssen. Es ist eine gute Idee, frühzeitig einige bewährte Best Practices mit den Entwicklern festzulegen, um sicherzustellen, dass Designs wie beabsichtigt implementiert werden. Hier ein paar Anregungen und Tipps.

Modelle

Versuchen Sie bei der Vorbereitung und Übergabe von Modellen, Dateinamen einfach, einheitlich und aussagekräftig zu halten. Das spart viel Zeit beim Hin- und Hergehen. Es ist auch eine gute Idee, alle Mockups fertigzustellen, bevor Sie sie mit den Entwicklern teilen, damit sie nur eine Version jedes Bildschirms erhalten. Ein weiterer zeitsparender Tipp besteht darin, alle Interaktionen mit Prototypen zu testen, damit sie funktionieren und funktionieren. Gute Tools zum Teilen von Mockups: InVision und Marvel .

Funktionsspezifikationen

Die meiste Arbeit, die UX-Designer leisten, bezieht Entwickler früh in das Projekt ein, und eine großartige Möglichkeit, ein kontinuierliches Verständnis des Designprozesses zu erleichtern und eine bessere Kommunikationslinie zu schaffen, besteht darin, ein Dokument mit funktionalen Spezifikationen oder ein „Func -Spezifikation.“

Das Func-Spec-Dokument ähnelt einem Entwurf, den Architekten erstellen, mit der Ausnahme, dass es während des gesamten Designprojekts mit Entwicklern geteilt wird und es ihnen ermöglicht, zu verstehen, wie eine Anwendung oder Website funktionieren wird (im Vergleich dazu, wie die Benutzeroberfläche aussehen wird).

Ein gutes Beispiel für eine funktionierende Func-Spec ist unten dargestellt:

Kopieren

Es gibt normalerweise eine Menge Kopien, die außerhalb eines Mockups existieren, die den Entwicklern mitgeteilt werden müssen. Hier ist eine Idee, die sie definitiv zu schätzen wissen werden:

Wie oben gesehen, hilft der Kontext dem Entwickler zu verstehen, wann die Nachricht erscheinen oder verschwinden soll. Es sollte den Entwickler wissen lassen, was vor sich geht, damit er nicht raten muss. Die Nachricht ist die tatsächliche Kopie, die angezeigt wird. Verwenden Sie die echte Kopie und kein Kauderwelsch (zB Lorem Ipsum). Entwickler wollen keine Texter sein und wir wollen es ihnen so reibungslos wie möglich machen.

Spezifikationen

Dies ist einer der wichtigsten Teile der Kommunikation von Designs mit Entwicklern. Hier glänzen Tools wie Zeplin und InVision von InVision wirklich, weil sie sich um die Kommunikation von Spezifikationen wie Maßen, Styleguides, Schriftarten, Benutzererfahrungsfluss und der Funktionsweise jedes Teils des Designs kümmern.

Kommunikation IRL (im wirklichen Leben)

Designer lieben ihre Werkzeuge. So sehr, dass man leicht vergisst, zum Telefon zu greifen, einen Videoanruf zu starten oder zu den Entwicklern zu gehen und zu reden. Es wurde viel Zeit gespart, indem man sich einfach mit den Entwicklern traf, nachdem man einen Teil eines Designs abgegeben hatte, weil alle Fragen oder Nuancen vor Ort besprochen werden konnten. Dies wird oft vergessen, aber wenn es Teil des normalen Übergabeprozesses wird, wird jeder die Zeitersparnis zu schätzen wissen.

Alles zusammenbinden

Das Handy verschwindet nicht. Im Jahr 2016 überstieg die Anzahl der Benutzer, die mit einem mobilen Gerät auf das Internet zugreifen, erstmals die Desktop-Nutzung. Für UX-Designer wird die zunehmende Akzeptanz von Mobilgeräten und die Verbreitung verschiedener Gerätetypen das User Experience Design zu einer noch größeren Herausforderung machen.

Aus diesen Gründen sind die Einhaltung einer Reihe von Best Practices, das Verständnis der Einschränkungen, die Mobilgeräte mit sich bringen, und die Gewährleistung einer reibungslosen Zusammenarbeit mit Entwicklern Schlüsselfaktoren für das Erreichen von Designs, die positive menschliche Erfahrungen schaffen.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Die Gestaltungsprinzipien und ihre Bedeutung
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Erforschung der Gestaltungsprinzipien des Designs
• Adobe XD vs. Sketch – Welches UX-Tool ist das Richtige für Sie?
• Die 10 UX-Ergebnisse, die Top-Designer verwenden