Eine Frau sitzt im Rollstuhl und hält ein Smartphone in der Hand.
Kerstin | 09.09.2024

So relevant sind motorische Einschränkungen für Mobile UI Design

Webentwicklung > So relevant sind motorische Einschränkungen für Mobile UI Design

Ich habe mich in den letzten Monaten intensiv mit Accessibility im Web beschäftigt. Bei Fortbildungen ging es viel um die Sensibilisierung für die Nutzungsgruppen und das Verständnis für den Kontext. Einige Erkenntnisse fasse ich in diesem Blogbeitrag zusammen. Gerne erinnere ich dabei jeweils an kontextbedingte Einschränkungen, die dann wirklich jeden User betreffen.


Zunächst eine Frage:

Halten Sie Ihr Smartphone mit beiden Händen?


Das wäre gar nicht mal ungewöhnlich:

👍 75% der User bedienen ihr Smartphone nur mit dem Daumen.

👋 Aber: < 50% halten ihr Smartphone nur mit einer Hand.

👐 denn: 36% nutzen die zweite Hand für eine größere / effizientere Reichweite und einen stabileren Halt.

👉 10% halten mit einer Hand das Smartphone und bedienen es mit der anderen Hand.


Ein Smartphone mit markierten Bereichen am Bildschirm. Durch farbliche Bereiche und Transparenz wird dargestellt, dass der untere Bildschirmbereich am bequemsten für Nutzerinnen und Nutzer erreichbar ist. Durch die Kurven der Bereiche wird deutlich, dass der Bewegungsraum von Daumen dargestellt wird. Der obere Bildschirmbereich ist nur noch mit leichter Transparenz markiert, da der Bereich schwerer erreichbar ist.
Ein Smartphone mit markierten Zonen am Screen. Es wird das Thumb-sweep Chart für Rechtshänder:innen dargestellt. Dabei ist der mittlere Bereich von unten bis zur mittleren Höhe des Bildschirms grün markiert. Das stellt dar, dass man hier am bequemsten mit dem Daumen dran kommt. Drumrum wird ein gelber Bereich markiert, der etwas schlechter erreichbar ist und der obere Rand und unten rechst sind rote Bereiche.


Das bekannte Thumb-sweep Chart ist damit nur noch begrenzt relevant. Bei diesem Chart wurde der Fokus noch auf die bequemste Reichweite für den Daumen gesetzt, wenn man das Smartphone mit einer einzigen Hand bedient (im Bild die Variante für Rechtshänder:innen dargestellt). Alle Bildschirmbereiche, die für den Daumen nur schwer erreichbar sind, sollten demnach keine wichtigen Interaktionselemente enthalten.

Das Nutzungsverhalten hat sich aber nach den genannten Statistiken angepasst:

Das Smartphone wird variabel festgehalten und die genutzte Screenfläche erhöht. Bei beidhändiger Bedienung des Smartphones ist nun nahezu die gesamte Bildschirmfläche problemlos nutzbar.






Eine weitere Frage:

In welchen Situationen bedienen Sie Ihr Smartphone nur mit einer Hand?

  • Wenn Sie mit der anderen Hand alle Einkaufstüten tragen, um nicht zweimal Laufen zu müssen?

  • Wenn Sie Ihr Kleinkind mit dem anderen Arm tragen?

  • Immer?

Manchmal bedient man sein Smartphone und seinen PC zur besseren Effizienz oder einfach Faulheit mit nur einer Hand. Manchmal ist man situationsbedingt eingeschränkt und hat nur eine Hand frei. Manchmal ist man aber auch dauerhaft in der Motorik eingeschränkt.




Motorische Einschränkungen durch Krankheit

Ein paar Beispiele:

  • Wer Rheuma hat, leidet oft an reißenden und ziehenden Schmerzen. Dann versucht man natürlich, den Körper zu schonen und nicht mehr Bewegungen durchzuführen als unbedingt nötig.

  • Wer Parkinson hat, hat mit Muskelstarre und grundsätzlicher Bewegungsarmut zu kämpfen.

  • Die umgangssprachlich benannte Glasknochenkrankheit kann zu Deformierungen in der Hand führen. Auch das kann zu Schmerzen und einer motorischen Einschränkung führen.




Übrigens wurden fast 91% aller schweren Behinderungen in Deutschland durch Krankheit ausgelöst.

Bei 11% der Deutschen mit schwerer Behinderung liegt die größte Einschränkung bei Armen oder Beinen und bei 10% bei der Wirbelsäule und dem Rumpf.





Welche Relevanz hat ein barrierearmes Web?

> 1,6 Millionen Menschen in Deutschland haben demnach eine dauerhafte motorische Einschränkung. Das ist eine immens große Nutzungsgruppe, die bei der Gestaltung von Webanwendungen nicht vergessen werden darf!




Wie können Sie Ihre Webanwendung barrierearm gestalten?

Abgesehen von der Sensibilisierung möchte ich ein paar Hinweise für ein optimales UI-Design festhalten:

  • Interaktionselemente sollten möglichst mittig am Bildschirm positioniert werden.

  • Elemente müssen groß genug sein. Ein bekannter Richtwert ist ein Minimum von 42px in Höhe und Breite. Denn: Nicht alle User haben kleine Finger und nicht alle User können feinmotorisch mit dem Finger zielen.

  • Interaktionselemente sollten weit genug voneinander entfernt sein. Wenn sie zu nahe beieinander liegen, kann der User sich schneller vertippen. Ist genug Abstand zwischen den Elementen, muss der User weiterhin nicht konzentriert zielen.

  • Eine Navigation komplett über die Tastatur ist sehr wichtig! Assistive Technologien wie Screenreader oder Spracheingaben führen Befehle über Keyboard Navigation aus.

Meine Beispiele zu situationsbedingten Einschränkungen bezogen sich auf Smartphones. Idealerweise überprüft man die Nutzbarkeit auch am Desktop.



Interesse an ähnlichen Themen?

In einem anderen Blogartikel erkläre ich etwas zu gestalterischen Mitteln für UI-Designs und in einem weiteren Blogartikel lassen wir hinter die Kulissen der Gestaltung einer Museumsapp blicken.

Zu den Quellen:
Informationen zu den aktuellsten Statistiken habe ich von Veröffentlichungen der REHADAT entnommen. Wer sich mehr zum Thema Interaktionsbereiche durchlesen möchte, dem empfehle ich Artikel von UX MATTERS.

Kerstin Meschede
Kerstin (Softwareentwicklerin)

... ist eine leidenschaftliche Frontendentwicklerin in Dortmund. Ihre Hauptwerkzeuge sind TypeScript, Angular, und Figma. Sie baut im Nu zauberhafte Mockups und setzt diese effizient um. Nutzerzentrie... mehr anzeigen

More from Kerstin

Unsere Entwicklungsexpertise

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund