Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 14. Februar 2018

Design: Die Bedienung mobiler Web-Apps muss einfach sein

Etwas zu tun, bloß weil es geht, ist eine ver­brei­te­te Unsitte in der Entwicklung. Gerade auf Smartphones gibt es vie­le tech­ni­sche Möglichkeiten. Vergiss dabei aber nicht, dass der Nutzer dei­ner mobi­len Website es gern ein­fach hat. Was genau das bedeu­tet, erfährst du im fol­gen­den Beitrag.

Es ist eine Perspektive, die man als Designer sel­te­ner ein­nimmt: Könnte es unter den zur Verfügung ste­hen­den Interaktionsmethoden wel­che geben, die der Benutzer gar nicht ver­wen­den will?

Genau die­se Frage klärt für uns das Beratungsunternehmen Change Sciences, mit teils über­ra­schen­den Ergebnissen. Mit Hilfe klei­ne­rer (bis 20 Teilnehmer) und grö­ße­rer (bis 100 Teilnehmer) Studien gehen die Forscher das Thema der Mobilnutzung struk­tu­riert an.

Für das respon­si­ve Webdesign und auch für das nati­ve App-Design erge­ben sich hand­fes­te Empfehlungen, die du beher­zi­gen soll­test, wenn du auch mobi­le Nutzer als Kunden gewin­nen willst.

Verzichte auf überflüssige Gesten

Change Sciences fand her­aus, dass Mobilnutzer sich vor­nehm­lich auf drei Gesten ver­las­sen und es nach Möglichkeit ver­mei­den, wei­te­re Interaktionsmethoden zu ver­wen­den. Insbesondere wol­len sie nicht mit wei­te­ren Steuerungsaktionen, die der Web-App-Entwickler inno­va­ti­ver­wei­se erfun­den hat, kon­fron­tiert wer­den.

Die wich­tigs­ten Gesten sind dem­nach Scrollen, Swipen und Tappen. Die Scroll-Geste ist die bekann­tes­te und meist­ge­nutz­te Aktion über­haupt. Laut Change Sciences nut­zen 94 Prozent aller Nutzer die­se Aktion mehr als drei­mal in einer Sitzung von min­des­tens zehn Minuten. Scrollen ist bekannt vom Desktop und der Mausbedienung. Von daher gehört die Geste zur Basisausstattung des Wissens eines jeden Internetnutzers.

Die Einhandbedienung steht bei Smartphone-Nutzern immer noch hoch im Kurs. (Foto: Pixabay)

Swipen stellt Verwender auch nicht mehr vor Probleme. Die meis­ten Nutzer pro­bie­ren die Geste im obe­ren Bildschirmbereich aus, unab­hän­gig davon, ob visu­el­le Hinweise, etwa Pfeile, den Versuch nahe­le­gen. An ande­ren Stellen des Screens hin­ge­gen sind visu­el­le Hinweise nötig, um Benutzer zum Swipen zu bewe­gen.

Das Tappen ist Nutzern zwar geläu­fig, zählt aber nicht zu den bevor­zug­ten Interaktionsmöglichkeiten. Anders als beim Klicken am Desktop ver­lie­ren Nutzer beim Tappen schnell die Geduld.

Pinch-Zooming ist eine der Aktionen, die der Nutzer ver­mei­det, wenn er kann. Es spricht also nichts dafür, ihn zu die­ser Art der Bedienung zu zwin­gen. Im respon­si­ven Design könnt ihr leicht dafür sor­gen, dass Zoomen nicht erfor­der­lich wird. Es hat sich auch her­aus­ge­stellt, dass Nutzer recht lan­ge nach einer Alternative suchen, bevor sie letzt­lich zoo­men.

Für das Design bedeu­tet das, dass du dich auf so weni­ge Gesten wie mög­lich fest­le­gen soll­test. Wenn du Aktionen ver­wen­den musst, die nicht auf Anhieb ein­gän­gig sind, könn­test du klei­ne Animationen ein­bau­en, die Hinweise auf die Nutzung geben.

Verlange so wenig Tipp-Arbeit wie möglich

Es ist kein Wunder. Auf mobi­len Geräten tippt man nicht gern. Deshalb soll­ten umfang­rei­che Eingabeerfordernisse ver­mie­den wer­den, denn es wür­de ledig­lich dazu füh­ren, dass der poten­zi­el­le Kunde die Eingabe abbricht und die Seite ver­lässt.

Die Abneigung gegen das Tippen ist sogar so hoch, dass Besucher das eigent­lich eher unbe­lieb­te Social-Login über Facebook oder ande­re Netzwerke akzep­tie­ren, nur um nicht tip­pen zu müs­sen.

Messenger-Dienste wer­den immer mehr zum Sprechen statt zum Schreiben benutzt. (Illustration: Pixabay)

Für das Design bedeu­tet das, dass du mög­lichst auf Tippeingaben voll­kom­men ver­zich­ten soll­tet. Wenn das nicht mög­lich ist, soll­test du so weni­ge Eingabefelder wie mög­lich vor­se­hen.

Verwende nur eindeutige Icons

Icons sind eines der Lieblingsspielzeuge heu­ti­ger Designer. Das erkennt man schon an der unüber­schau­ba­ren Vielfalt an Download-Symbolsätzen im welt­wei­ten Netz. Kaum ein Tag ver­geht, an dem nicht min­des­tens zwei neue Piktogramm-Sammlungen auf den Markt kom­men.

Icons sind zu häu­fig mehr­deu­tig. (Foto: Pixabay)

Im Sinne des Nutzers ist das nicht. Denn die­ser ist über­haupt nicht dar­an inter­es­siert, die fünf­zigs­te ganz schi­cke Variante des Such-Icons dechif­frie­ren zu müs­sen. Change Sciences fand her­aus, dass mit Quoten von über 90 Prozent nur das Dreieck (Abspielen) und das X (Schließen) völ­lig klar ver­stan­den wer­den. Als unklar hat sich in den Studien auch das in Designerkreisen über­aus belieb­te Hamburger-Icon erwie­sen.

Navigation gehört nicht an das Ende des Screens

Es ist auf den ers­ten Blick eine gute Idee: Man hält das Smartphone mit einer Hand und erreicht so am leich­tes­ten die unte­ren Bereiche des Screens. So müss­te es doch logisch sein, die Navigation dort anzu­ord­nen. Untersuchungen zei­gen aller­dings, dass Nutzer stets oben nach der Navigation suchen und unten ange­ord­ne­te Menüs ten­den­zi­ell igno­rie­ren.

Auch die­ser Umstand wird mit der Sozialisation des gemei­nen Computernutzers zu tun haben, denn seit der Einführung des Betriebssystems Windows waren Navigationen aka Bedienleisten stets am obe­ren Bildschirmrand ange­ord­net. Die letz­te mir bekann­te Software mit unten­lie­gen­den Menüs war das gute alte Microsoft Word 5. Mit der Escape-Taste kam man ins Menü. Das wür­de heu­te kein Entwickler mehr wagen, damals war es der Marktführer.

Verzichte nicht auf einen Zurück-Button

Beim Surfen am Desktop gehört der Back-Button, der uns immer einen Schritt zurück­bringt, zu den wich­tigs­ten Bedienelementen. Generationen von Entwicklern bemüh­ten sich schon ver­geb­lich, den Nutzern die­ses uner­wünsch­te Verhalten aus­zu­re­den, mit mäßi­gem Erfolg. Es ist daher rat­sam, sich dem Diktat der Masse zu beu­gen und stets Möglichkeiten vor­zu­se­hen, mit deren Hilfe Nutzer die­sen einen Schritt rück­wärts machen kön­nen.

Gelungen ist das Swipe-Feature unter iOS. Hier gelan­gen Nutzer mit einem Swipe nach rechts auf den vor­he­ri­gen Screen. Unter Android muss es das Pfeil-Icon allei­ne rich­ten. In bei­den Fällen soll­tet ihr auf eine eigen­stän­di­ge Lösung, etwa einen Zurück-Pfeil im obe­ren Bildschirmbereich, nicht ver­zich­ten. Betrachtet die OS-eige­nen Lösungen eher als zusätz­li­che Optionen.

Weitere Erkenntnisse des Teams von Change Sciences

  • Multitasking fin­det auf mobi­len Geräten nicht statt. Die neue­ren Ansätze, meh­re­re Apps neben­ein­an­der dar­stel­len und nut­zen zu kön­nen, sind für den klei­nen Screen sinn­los. Erst auf grö­ße­ren Displays stel­len Nutzer meh­re­re Anwendungen neben­ein­an­der (um sie dann doch ein­zeln zu nut­zen).
  • Völlig anders als auf Desktop-Geräten ist Sound auf mobi­len Devices durch­aus als Feedback-Methode eta­bliert und wird sogar erwar­tet. Wer kennt nicht das klas­si­sche Zisch-Plop beim „Pull to Refresh”?
  • Die Abgrenzung von First und Second Screen ver­wischt. Bei der Verwendung als so genann­ten „Second Screen”, etwa beim Fernsehen, über­wiegt inzwi­schen die Nutzung des eigent­lich als Zweitschirm gedach­ten Smartphones.
  • Anwender erwar­ten auf Mobilgeräten eine bes­se­re Nutzererfahrung als auf Desktop-Geräten. Das hängt nicht zuletzt damit zusam­men, dass Websites und Apps für den klei­nen Bildschirm wesent­lich öko­no­mi­scher gestal­tet sein müs­sen. Dadurch wir­ken sie kla­rer, weni­ger über­la­den. Und dass weni­ger Platz für Werbung ist, wird auch nicht ohne Wohlwollen zur Kenntnis genom­men.

Quellen zum Weiterlesen:

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Ein Kommentar

  1. Ein guter Artikel. “Instinktiv” glaubt man das eh alles zu wis­sen, aber es ist gut, wenn man’s auch schwarz auf weiss hat…;)

Schreibe einen Kommentar zu klawischnigg Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.