So steigern Sie die User Experience für Ihre mobile App - Teil 2

So steigern Sie die User Experience für Ihre mobile App - Teil 2

Hier können Sie den Teil 1 lesen. 

Eine zentrale Leitlinie für einen Designer ist ein klares Verständnis des Mediums und der Art und Weise wie die Benutzer mit seinem Design interagieren. Das Medium kann ein Fernseher, ein Computer, ein Buch oder eine Reihe anderer Devices sein. Ein Mobiltelefon z.B. hat seine besonderen Merkmale, Einschränkungen und Chancen. Nur wenn der Designer diese genau verstanden hat, kann er dem Nutzer einer großartigen User Experience bieten.

Die meisten Benutzer halten das Telefon mit nur einer Hand: Sollten wir also für eine Hand entwerfen?

Eine interessante Studie, darüber wie Menschen ihr Smartphone während der Nutzung halten ergab, dass die meisten Benutzer nur einen Finger benutzen. Das war wahrscheinlich leicht zu erraten, aber interessant ist, dass mehr als die Hälfte nur eine Hand benutzen, während der Rest die zweite Hand zur Hilfe nimmt und für einen besseren Griff das Gerät in einer Art "Wiege" -Position hält. Weiterhin gibt einen beträchtlichen Prozentsatz von "zweihändigen" Benutzern, die das Mobiltelefon mit zwei Händen bedienen. Diese wiederum nutzen das Telefon selten im Querformatmodus.

Der erste Gedanke ist, dass wir eine Schnittstelle mit den wichtigsten Steuerelementen entwickeln sollten, die sich in Reichweite des Daumens befinden. Allerdings befinden sich die mobilen Bildschirmgrößen immer noch im Vergrößerungs-Trend: Es ist ziemlich einfach alle Bereiche des Bildschirms mit dem Daumen auf einem iPhone 4 zu erreichen, aber auf einem iPhone 7 Plus müssen die meisten Nutzer auch die zweite Hand nutzen.

Nutzer ändern die Art und Weise wie sie das Telefon halten, je nach der Aufgabe, die sie gerade durchführen. Aber eines ist sicher: Eine Anwendung bei der die am häufigsten verwendeten Steuerelemente in der oberen Leiste sind ist schwer zu verwenden, insbesondere bei Geräten mit einem großen Bildschirm.

Befolgen Sie die Farbrichtlinien: Sie sind schnell und einfach

Es gibt etablierte Farbrichtlinien für Websites und die wurde im World Wide Web über viele Jahre hinweg effektiv genutzt und verfeinert. Die Farbrichtlinien gelten auch für mobile Apps, aber Sie müssen sich eines wesentlichen Unterschieds bewusst sein: Mobile User Interfaces sind einfacher, kleiner und fokussierter.

Die Farbe erhält eine viel höhere Bedeutung in mobilen Interfaces und wird zu einem wichtigen Interaktionsfaktor. Sie müssen sich nur an einige einfache Richtlinien halten, damit ihre App erfolgreicher wird.

• Die wichtigsten Call-to-Action-Buttons sollten natürlich hervorstechen, aber sie müssen nicht unbedingt rot oder orange sein. Diese Farben weisen oft auf eine Ablehnung hin und werden normalerweise mit den Schaltflächen "Löschen" oder "Abbrechen" verknüpft.
  
• Farbtöne erzeugen eine Hierarchie mit den schwächsten Farbtönen, die die am wenigsten wichtigen Elemente definieren und umgekehrt.
  
• Monochrome Farbschemata können ansprechend und erfolgreich sein, aber vergessen Sie nicht für die wichtigen Call-to-Actions eine kontrastierende Farbe hinzuzufügen.
  
• Es gibt einige Farben die üblicherweise mit einigen Industriezweigen verbunden sind und obwohl sie nicht in Stein gemeisselt sind, fühlen sich die Benutzer verwirrt, wenn sie nicht entsprechend genutzt werden.
  
• Wenn Sie der Meinung sind, dass ein Text mit geringem Kontrast elegant sei sollten Sie bedenken, dass er wahrscheinlich nicht lesbar ist wenn die Benutzer im Freien bei hellem Licht stehen.
• 
  

Finger kommen in allen Größen und Formen

Apple-Richtlinien für iOs besagen, dass eine Schaltfläche mindestens 44 px sein sollte. Studien zeigen, dass die durchschnittliche Fingergröße etwas größer ist (45-57 px); Google und Microsoft schlagen dennoch kleinere Touch-Bereiche vor. Es wäre nicht so falsch, wenn wir sagen würden, dass die meisten Tasten in mobilen Apps viel kleiner als ein Standard-Finger sind und nicht einfach zu drücken sind.

Aber was ist mit Leuten mit großen Fingern? Sie werden natürlich viel mehr Probleme haben, aber Buttons mit einer Breite von 80 Pixeln könnten auch nicht die praktischste Lösung sein, da die meisten Handys immer noch einen Darstellungsbereich haben, der nicht größer als 320 Pixel ist. Wir müssen also einen Kompromiss finden. Vermeiden Sie kleine und schlecht gestaltete Tasten, die schwer zu drücken sind, ist immer eine gültige Empfehlung, aber wir müssen besonders darauf achten, dass nicht zwei kleine Tasten zu nahe beieinander liegen. Ein Benutzer mit einem Finger größer als der Durchschnitt könnte leicht den falschen Knopf drücken - z.B. “cancel“ statt „subscribe".

Ein Bildschirm, eine Aufgabe

Das Netz ist voller Formulare und das Ausfüllen ist nie ein Vergnügen. Um das Ausfüllen von Formularen zu verbessern haben Designer mehrere Stufen implementiert, die die Konzentration auf jeweils eine Aufgabe, weniger Stress und Ärger bedeutet. Dieses Prinzip ist auch beim Entwerfen einer mobilen App sinnvoll: ein Bildschirm für eine Hauptaktion. Die Einhaltung dieser Richtlinie hilft uns das Design der Benutzeroberfläche übersichtlicher zu gestalten. Wir haben weniger Elemente auf dem Bildschirm, Die Navigation ist einfacher zu handhaben die Komplexität reduziert sich und die App ist auch noch leichter zu produzieren.

Feedback und Mikrointeraktionen sind eine der besten Möglichkeiten, um sich um Ihre Besucher zu kümmern

Mobile Apps enthalten viele Steuerelemente und Interaktionen. Diese sollten Feedback geben, damit der Nutzer nicht das Gefühl hat, verloren zu sein oder nicht zu wissen, was zu tun ist.

• Das Drücken eines Knopfes sollte einen kurzen "gedrückten" Zustand auslösen.
  
• Ein Element sollte beim „Ziehen“ hervorgehoben werden und es möglicherweise gedimmt, so dass es sich von den anderen Elementen unterscheidet. 
• Das Umschalten eines Steuerelements sollte einen Bestätigungston auslösen.
  

Wir könnten mit dieser Liste fortfahren; Mikrointeraktionen und Feedback geben den Nutzern die Möglichkeit mit einer Anwendung interagieren zu können und sie sind in gut gestalteten Apps sehr wichtig. Häkchen neben ausgefüllten Eingaben, Bestätigungsgeräuschen und Fortschrittsbalken sind kleine aber feine Tricks, um den Benutzern zu versichern, dass sie auf dem richtigen Weg sind und sie zu ermutigen, weiter voranzuschreiten.

Weitere mobile UX-Tipps folgen

Wir konnten sicher nicht nicht alle Aspekte des mobilen UX-Designs abdecken, aber hoffen sie dafür sensibilisiert zu haben, das Medium für das Sie arbeiten sorgfältig zu berücksichtigen und viel Liebe in die Details zu stecken. Einige Hinweise scheinen fast offensichtlich, aber Sie werden überrascht sein, wie viele dieser Richtlinien auch von bekannten Diensten nicht oder schlecht umgesetzt werden.

Hier können Sie den Teil 1 des Artikels "User Experience für mobile Apps" lesen