Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory

Anwendung des Fitts-Gesetzes auf das Design mobiler Schnittstellen

by
Length:LongLanguages:
This post is part of a series called UX Foundations.
Crafting the Experience of User Interface Messages
The Psychology of Content Design

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Das Fitts'sche Gesetz ist ein wesentliches Prinzip der Mensch-Computer-Interaktionstheorie, das vor fast 60 Jahren formuliert wurde. Für das UX-Design für Desktop und Laptop ist dies von entscheidender Bedeutung. Da sich die Interaktionstechniken auf Mobilgeräten jedoch stark unterscheiden, können wir sie dennoch auf dieselbe Weise verwenden? Wir werden uns ansehen, woraus das Fitts-Gesetz besteht und wie es auf das Design auf Mobilgeräten angewendet wird.

Um herauszufinden, wie wir das Fitts' Gesetz anwenden, müssen wir uns zunächst genau ansehen, was es ist und wie es ursprünglich verwendet werden soll. Es wurde 1954 von Paul Fitts erstellt und soll den Vorgang des Zeigens auf ein Ziel auf einem Computermonitor modellieren. Überraschenderweise wurde es auch entwickelt, um sowohl Hand- als auch Mausaktionen zu berücksichtigen.

Beispiel: Stellen Sie sich vor, Ihr Mauszeiger und Ihre Aufmerksamkeit richten sich auf das Logo einer bestimmten Website. Sie müssen dann auf einen Aufruf zum Handeln klicken, um sich auf die betreffende Schaltfläche zu konzentrieren. Die Effizienz dieser Bewegung von einer Position zur anderen ist das Ziel von Fitts' Gesetz.

Fitts Law

Dies ist die Rohformel:

MT=a + b * log2(D/W + 1)

MT ist die Bewegungszeit, die benötigt wird, um sich zwischen zwei Punkten zu bewegen. Dies versuchen wir herauszufinden. Die Variablen a und b sind der Achsenabschnitt bzw. die Steigung, die üblicherweise experimentell besimmt werden. D ist der Abstand zwischen dem Ursprung und dem Ziel. W ist die Breite des Ziels. Trotz alledem ist es selten, dass ein UX-Praktiker diese Formel in ihrer Rohform verwendet, da es einfachere Anwendungen gibt, die sich aus dieser Formel ergeben.

Die Grundidee, die sich aus dem Fitts'schen Gesetz ergibt, ist, je weiter ein Ziel entfernt ist und je kleiner seine Größe ist, desto schwieriger ist es für den Benutzer, korrekt auf diesem Ziel zu landen. Obwohl dies gegen andere UX-Überlegungen abgewogen werden muss, sollte es natürlich Teil des UX-Werkzeugbelt sein.

Nehmen Sie zum Beispiel Bildlaufleisten unter Windows im Vergleich zum Mac (vor OSX Lion). Windows hat den Aufwärtspfeil oben in der Bildlaufleiste und den Abwärtspfeil unten, ebenfalls mit links und rechts. Dieses Format versucht, sich mehr in das mentale Modell des Auf- und Abwärts- und Abwärtssuchens hineinzulehnen. Der Mac legt die Pfeiltasten jedoch nebeneinander, da das Navigieren zwischen ihnen aufgrund des Fitts-Gesetzes in diesem Format viel schneller ist.

osx vs windows scrollbars

In der UX-Welt muss die Benutzerbasis jederzeit berücksichtigt werden, und das Fitts-Gesetz ist nicht anders. Die korrekte Anwendung wird für Personen mit eingeschränkten motorischen Fähigkeiten wie Kinder, ältere Menschen und Behinderte noch wichtiger. Die Ziele müssen noch größer sein, um den Erfolg des Benutzers zu unterstützen, der auf das Ziel zeigt.

Fitts-Gesetz-Anwendungen für Desktops

Größe und Entfernung

Größe und Abstand zu den häufigsten Interaktionen sollten beim Entwerfen eines UI-Elements berücksichtigt werden, mit dem der Benutzer interagiert. Es gibt viele verschiedene Designrichtlinien, aber die meisten haben eine minimale Tastengröße und einen Mindestabstand zu anderen interaktiven Elementen. Es ist auch wichtig, interaktive Elemente mit hohem Risiko zu berücksichtigen, die der Benutzer nicht versehentlich aktivieren soll. Diese sollten häufig weiter von stark genutzten interaktiven Elementen entfernt gehalten werden.

Kanten

  • Ecken - Wenn der Mauszeiger am Rand des Bildschirms stoppt, kann davon ausgegangen werden, dass Ecken eine "unendliche" Breite haben. Der Benutzer benötigt viel weniger Präzision, da er die Maus einfach in Richtung einer Ecke bewegen kann und die Einschränkungen des Bildschirms einschränken, wo der Zeiger landet. Dies ist teilweise der Grund, warum Sie das Windows-Startmenü und das Apple-Menü in den Ecken Ihres Bildschirms sehen.
  • Oben und unten - In ähnlicher Weise sind oben und unten aufgrund von Bildschirmbeschränkungen leichter zugänglich. Diese sind nicht so einfach wie Ecken, da sie nur vertikal begrenzt sind, aber dennoch einen schnelleren Zugriff ermöglichen als ein Punkt in der Mitte des Bildschirms. Aus diesem Grund platziert Apple Anwendungsmenüs immer oben auf dem Bildschirm und nicht oben im Anwendungsfenster.

Menüs

  • Popup-Menüs - Durch das Platzieren von Menüs an der Position des Cursors wird die Fahrstrecke verringert, wodurch die Bewegungszeit verkürzt wird. Sie sehen dies in Elementen wie Rechtsklick-Menüs und Flyouts.
  • Tortenmenüs - Popup-Tortenmenüs schaffen eine unmittelbare Nähe mit dem zusätzlichen Vorteil, dass sich die Menüelemente näher am Cursor befinden. Warum sehen wir nicht viele Kuchenmenüs? Ehrlich gesagt, weil sie schwer gut zu entwerfen sind und nicht oft Teil von Standard-UI-Bibliotheken sind.

Fitts Gesetz und Mobile

Wir müssen die beiden Haupttypen mobiler Geräte getrennt betrachten, da die Interaktionen so unterschiedlich sind, dass eine unabhängige Diskussion erforderlich ist. Hier wird das Telefon als 3,5-Zoll-Bildschirm und das Tablet als 7-Zoll-Bildschirm bezeichnet. Es wird anerkannt, dass diese Messungen nicht für alle Geräte gelten. Sie werden in diesem Artikel verwendet, um Größe und Handbewegungen zu erörtern.

Ein weiterer wesentlicher Unterschied bei Mobilgeräten besteht darin, dass es unterschiedliche Ausrichtungen und Möglichkeiten gibt, die Geräte zu halten. In jeder Hinsicht werden Mäuse auf die gleiche Weise gehalten und verwendet. Es gibt Unterschiede bei Trackpads und dergleichen, aber sie ändern die Interaktion im Sinne des Fitts-Gesetzes nicht so wie bei Mobilgeräten. Wir werden dies in jedem Geräteabschnitt untersuchen.

Das mit Ecken und Kanten verwendete Designmuster gilt auch für mobile Geräte, jedoch auf ganz andere Weise. Im Gegensatz zum Desktop sind Ihre Finger nicht auf die Ecken oder Kanten des Bildschirms beschränkt. Dadurch kann die Regel der unendlichen Breite nicht mehr angewendet werden. Wir werden jedoch untersuchen, warum Kanten und Ecken auf Mobilgeräten häufig noch verwendet werden.

Daumenzonen

Die Verwendung von Daumen ist eine häufige Interaktion auf Mobilgeräten. Es gibt Zeiten, in denen der Daumen nicht verwendet wird, aber wenn wir unseren Daumen verwenden, müssen wir berücksichtigen, dass die ursprüngliche Fitts'sche Gesetzformel nur innerhalb des Bewegungsbereichs unseres Daumens gilt. Das Problem tritt auf, wenn ein Objekt außerhalb dieser Zone liegt. Es erfordert dann einen zusätzlichen Aufwand, den das Fitts'sche Gesetz nicht berücksichtigt, und fügt eine zusätzliche Variable hinzu, die die Bewegungszeit verlängert. Wir müssen dies berücksichtigen, wenn wir die unten beschriebenen Effekte diskutieren.

Fitts-Gesetz und der 3,5-Zoll-Bildschirm

Vertikale Ausrichtung

Schauen wir uns zunächst die vertikale Ausrichtung an, da dies die am häufigsten verwendete Ausrichtung für einen 3,5-Zoll-Bildschirm ist. Ich möchte mich zwar nicht auf Apple konzentrieren, aber hinter den Kulissen machen sie einige sehr kluge Dinge, von denen die meisten Menschen nicht einmal merken, dass sie die Benutzerfreundlichkeit verbessern. Das iPhone hat genau die Größe, die es hat, damit der durchschnittliche Daumen jeden Teil des Bildschirms erreichen kann. Stellen Sie sich vor, Sie könnten auf Ihrem Desktop den Cursor nur 3/4 des Bildschirms nach oben bewegen und müssten dann die Maus mit der anderen Hand greifen, um ihn den Rest des Weges zu bewegen. Offensichtlich wirft dies einen Knick in Fitts Law und erhöht die Bewegungszeit erheblich.

Wie der interaktive Designer Josh Clark hervorhebt, gibt es Gründe für die Positionierung bestimmter Elemente. iPhone-Menüs werden aufgrund der Art und Weise, wie sich unser Daumen biegt, und der Tatsache, dass unser Daumen diesen Bereich bereits abdeckt, aufgrund der Art und Weise, wie wir das Telefon halten, unten platziert. Die obere Ecke gegenüber der Hand, mit der Sie das Telefon halten, kann für einige Hände etwas mehr Kraft und Dehnung erfordern. Wie oben erwähnt, fügt dies eine zusätzliche Variable im Fitts' schen Gesetz hinzu, die die Bewegungszeit verlängert. Die Bewegung zwischen zwei Zielen ist keine fließende, widerstandsfreie Bewegung mehr.


Gemeinsame Daumenreichweite mit der rechten Hand.

Android verwendet eine andere Taktik und platziert die Menüs oben. Dies ist nicht ohne Grund. Das Betriebssystemmenü von Android-Telefonen befindet sich unten auf den Telefonen. Sie platzieren absichtlich Bildschirmmenüs oben, um zu vermeiden, dass Sie versehentlich auf die falschen Menüpunkte klicken.

Eine Richtlinienableitung des Fitts-Gesetzes besteht darin, Ziele mit hohem Risiko (Schließen, Löschen usw.) von häufig verwendeten Zielen zu entfernen, um Benutzerfehler zu vermeiden. Bei iPhones kann dies manchmal am oberen Bildschirmrand erfolgen. 3,5-Zoll-Bildschirme sind jedoch klein, und es kann schwierig sein, einen Bereich zu finden, den der Benutzer immer meiden kann. Aus diesem Grund gibt es Tricks wie das "Wischen nach links zum Löschen", deren Ausführung länger dauert, die jedoch dazu beitragen, ein versehentliches Auslösen von Aktionen mit hohem Risiko zu vermeiden.

Horizontale Ausrichtung

In der horizontalen Ausrichtung werden der linke und der rechte Rand des Bildschirms wichtiger, wenn wir versuchen, die Bewegungszeit zu minimieren. Das andere Problem ist, dass der Benutzer in dieser Ausrichtung häufig beide Hände verwenden muss. Sie können gleichzeitig verwendet werden, sodass wir in einigen Fällen die Benutzerzeit verkürzen können, indem das Fitts-Gesetz in zwei Bereichen gleichzeitig und nicht nacheinander ausgeführt wird. Die Gesamtbewegungszeit ist gleich, aber die Benutzerzeit wird reduziert.


Gemeinsame Daumenreichweite beim Halten des Smartphones in horizontaler Ausrichtung.

Infolgedessen wird es schwieriger, die Mitte des Bildschirms zu erreichen, insbesondere die äußerste Ober- und Unterseite der Mitte. Dies erfordert wiederum eine zusätzliche Dehnung, die eine zusätzliche Variable hinzufügt, die die Bewegungszeit verlängert. Dieser Bereich sollte für Aktionen reserviert werden, die entweder selten verwendet werden oder Aktionen mit hohem Risiko darstellen.

Hold and Point-Methode

In einem anderen Zustand hält der Benutzer das Gerät mit einer Hand und zeigt mit dem Zeigefinger der anderen Hand. In diesem Modus wird das Dehnen der Finger kein Problem. Viele Benutzer, die diesen Modus verwenden, behindern jedoch nur diesen Finger. Dies ist nicht ideal für Aktivitäten wie Tippen und einige Spiele.


Halte- und Punktemodus (Gestensymbol von gesturecons.com)

Fitts-Gesetz und der 7-Zoll-Bildschirm

Vertikale Ausrichtung

In Josh Clarks Artikel "Designing For Touch" weist er auch darauf hin, dass die meisten Leute ihre Tablets oben auf dem Gerät halten. Daher werden die beiden oberen Ecken zu den wichtigsten Zonen, um umsetzbare Ziele zu platzieren. Nach meiner Erfahrung haben viele Leute gesehen, wie sie es unten halten. Dies gilt insbesondere für die Eingabe, wenn Benutzer die geteilte Tastatur des iPad aktiviert haben. In diesem Fall wären die unteren Ecken die wichtigsten Zonen, außer wenn eine Eingabe erforderlich ist.

Horizontale Ausrichtung

Tablets können relativ leicht mit einer Hand vertikal gehalten werden, horizontal ist dies jedoch eine größere Herausforderung. Die Masse kann die Neigung erhöhen, das Gerät fallen zu lassen. Wenn Tabletten in horizontaler Ausrichtung gehalten werden, handelt es sich daher fast immer um eine Zweihandoperation. Wir müssen auch bedenken, dass eine Seite normalerweise eine Home- oder Menütaste auf dem Gerät hat, damit auf dieser Seite noch weniger Platz für den Daumen auf dem Bildschirm vorhanden ist.

"Docking"-Modus

All dies hängt davon ab, ob Tablets gehalten werden. Aufgrund der Größe und des Volumens des Tablets befindet es sich jedoch häufig in einem "angedockten" Modus. Dies bedeutet nicht, dass es angeschlossen ist, sondern dass es häufig auf unseren Runden, Schreibtischen oder Tischen platziert wird. Die neue iPad-Hülle, die sich zurückklappen lässt, um einen kleinen Ständer zu schaffen, macht dies noch wahrer. Dies ermöglicht mehr Zeigen auf dem Tablet als auf dem Smartphone. Daher ist das Design nicht so auf die Daumenzonen beschränkt und erweitert unsere ursprüngliche Fitts'sche Gesetzgleichung auf die gesamte Berührungsfläche.

Nahtloses Schalten

Es ist wichtig zu bedenken, dass das Umschalten von Modi und Ausrichtungen bei Benutzern häufig vorkommt. Benutzer wechseln den Modus, ohne darüber nachzudenken, und gehen zu dem Modus, der für die Aktivität, die sie gerade ausführen, am bequemsten ist. Jetzt gibt es eine gewisse Verzögerungszeit für den Wechsel zwischen vertikal und horizontal, sodass der Wechsel nicht ganz so nahtlos ist. Der Punkt bleibt, dass wir sicherlich unter Berücksichtigung der oben genannten Punkte entwerfen müssen, aber es ist nicht so, als ob Benutzer an einen bestimmten Modus oder eine bestimmte Ausrichtung gebunden wären. Wir müssen den Modus und die Ausrichtung kennen, in der sich der Benutzer wahrscheinlich für eine bestimmte Aktivität/Aktion und ein bestimmtes Design befindet.

Abschluss

Die Ausrichtung und die Art und Weise, wie das Gerät gehalten oder stationiert wird, wird bei unseren Entwürfen von entscheidender Bedeutung. Das Fitts-Gesetz kann auf verschiedene Arten beeinflusst werden. Um eine optimale UX zu erzielen, ist es wichtig zu wissen, wie. Das Fitts-Gesetz ist sicherlich nicht die einzige oder sogar wichtigste Designüberlegung, aber es ist fast immer ein guter Ausgangspunkt. Auf Mobilgeräten stehen wir vor bestimmten Herausforderungen, die wir mit dem Desktop nicht haben. Da das Handy so schnell wächst wie es ist, sollten diese Überlegungen eine Standardwaffe im UX-Repertoire sein.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.