Verstehen von Gesten für das UI-Design

Tippen, Wischen, Ziehen, langes Drücken – das sind nur einige der Gesten, die unsere digitalen Erlebnisse dominieren. Touchscreen-iPhones haben vor Jahren mobile Gesten zum Mainstream gemacht, und wir haben seitdem nicht zurückgeblickt.

Gesten beeinflussen, wie wir mit Schnittstellen wie Telefonen, Laptops und iPads interagieren. Aber wir müssen nicht lange suchen, um eine gestische Schnittstelle jenseits unserer Arbeits- und Unterhaltungsgeräte zu finden. Es ist nicht mehr ungewöhnlich, Gesten zu verwenden, wenn man mit Autobildschirmen oder Waschbecken interagiert.

Natural User Interfaces (NUIs) sind für Benutzer so natürlich, dass sich die Oberfläche wie eine Touchscreen-Oberfläche anfühlt und manchmal auch unsichtbar ist. Einige NUIs verwenden sogar Gestensteuerung, sodass Benutzer ohne direkten physischen Kontakt mit der Benutzeroberfläche interagieren können. BMW hat kürzlich eine Gestensteuerungsfunktion herausgebracht, mit der Benutzer berührungslos die Lautstärke, Anrufe und mehr im Auto steuern können.

Gesten werden im Design von Benutzeroberflächen immer häufiger und spielen in unserem Alltag eine immer komplexere Rolle.

Mit fortschreitender Technologie müssen sich UX- und UI-Designer und Unternehmen anpassen. Sie müssen nicht alle technologischen Feinheiten kennen oder über fundierte Kenntnisse der Computerintelligenz verfügen. Dennoch sollten Sie über ein grundlegendes Verständnis der Fähigkeiten, Funktionen und bewährten Designpraktiken für die Gestentechnologie verfügen.

Was macht eine gute Geste aus

Also, was sind Gesten?

Gesten sind eine Art der Kommunikation. Wir haben lange Zeit Handgesten und Kopfnicken verwendet, um Bedeutung zu vermitteln, und jetzt spielen Gesten eine Rolle bei der Kommunikation mit Benutzeroberflächen.

Gute Gesten sorgen für effektive, effiziente Kommunikation, die unserer Denkweise entspricht. Unsere Gedanken und unser Wissen beeinflussen, wie wir sprechen, und sie beeinflussen unsere Verwendung von Gesten, insbesondere im UI-Design. Überlegen Sie, wie viel einfacher es für jüngere Generationen ist, die mit moderner Technologie aufwachsen, Gesten zu verstehen – oder wie das Wischen das Wegschieben oder Wegwischen von Gegenständen nachahmt. Aus diesem Grund ist es wichtig, Ihre Benutzer zu verstehen, selbst beim Gestendesign.

Gesten überwinden die Barriere zwischen der physischen und der digitalen Welt und ermöglichen es uns, mit unseren Körpern mit digitalen Medien zu interagieren. In gewisser Weise macht es mehr Spaß, digitale Anwendungen zu nutzen, aber das reicht nicht aus, um eine Geste zu einer guten zu machen.

Eine gute Bewegungsgeste verbessert die Benutzerfreundlichkeit, indem Anwendungen in allen Kontexten benutzerfreundlicher werden. Gut gestaltete Gesten haben eine kürzere Lernkurve, weil sie sich natürlich anfühlen und leicht zu verstehen sind. Um Bill Gates zu zitieren:

„Bisher mussten wir uns immer an die Grenzen der Technik anpassen und die Art und Weise, wie wir mit Computern arbeiten, willkürlichen Konventionen und Verfahren anpassen. Mit NUI werden sich Computergeräte zum ersten Mal an unsere Bedürfnisse und Vorlieben anpassen und Menschen werden beginnen, Technologie so zu nutzen, wie es für uns am bequemsten und natürlichsten ist.“

Vorteile der Gestentechnologie

Die breite Verwendung von Gestenschnittstellen ist auf die vielen Vorteile zurückzuführen, die sie mit sich bringen. Drei der wichtigsten Vorteile von Gesten sind übersichtlichere Schnittstellen, Benutzerfreundlichkeit und verbesserte Aufgabenerledigung.

1. Sauberere Schnittstellen

Menschen konsumieren mehr Inhalte als je zuvor, Unternehmen nutzen mehr Daten und Technologien bieten weiterhin mehr Dienste an. Mit dieser Zunahme an Inhalten können Schnittstellen und Anzeigen leicht überladen erscheinen. Designer können Gesten verwenden, um die Anzahl visueller Elemente wie Schaltflächen zu reduzieren, die Platz beanspruchen.

2. Benutzerfreundlichkeit

Wie oben diskutiert, werden Interaktionen mit einer gestenbasierten Schnittstelle natürlicher. Die Leichtigkeit einfacher Handgesten ermöglicht es uns, Technologie mit minimalem Aufwand und maximaler Geschwindigkeit zu nutzen.

3. Verbesserte Aufgabenerfüllung

Aufgabenerledigungsraten und Konversionsraten steigen, wenn ein Benutzer weniger tun muss, um eine Aufgabe zu erledigen. Es ist wahrscheinlicher, dass Sie eine Aufgabe beenden, wenn sie weniger Anstrengung erfordert. Eine gestenbasierte Benutzeroberfläche nutzt dies, indem sie Aufgaben einfach und schnell macht. Sie können sogar die Anzahl der Schritte reduzieren, die zum Abschließen einer Aufgabe erforderlich sind.

Arten von Gesten im UI-Design

Design for Touch hat zur Entwicklung vieler Arten von Gesten geführt, von denen die gängigsten das Tippen und Wischen sind. Es gibt drei Kategorien von Gesten:

1. Navigationsgesten (zum Navigieren)
2. Aktionsgesten (zum Handeln)
3. Transformationsgesten (zur Bearbeitung von Inhalten)

Im Folgenden sind einige der häufigsten Gesten auf Schnittstellen aufgeführt, mit denen alle (oder fast alle) Benutzer vertraut sind – wenn auch nicht bewusst. Wir erwähnen Bildschirme, aber Sie können den Bildschirm durch ein Touchpad oder eine andere Gestenschnittstelle ersetzen.

Klopfen

Eine Tippgeste ist, wenn Sie mit einem Finger auf den Bildschirm tippen, um etwas zu öffnen oder auszuwählen, z. B. eine App oder Seite. Hier ist ein Tipp: Gestalten Sie anklickbare Oberflächenelemente so, dass das gesamte Feld oder die gesamte Zeile anklickbar ist – nicht nur der Text. Benutzern mehr Platz zu geben, erhöht die Benutzerfreundlichkeit.

Doppeltippen

Doppeltippen ist, wenn Sie zweimal kurz hintereinander auf den Bildschirm tippen. Viele Anwendungen verwenden diese Geste zum Vergrößern, aber auf Instagram können Benutzer auf ein Foto doppeltippen, um es zu mögen.

Wischen

Beim Wischen wird der Finger in eine Richtung über den Bildschirm bewegt, auf der einen Seite berührt und auf der anderen Seite angehoben. Wischgesten werden häufig zum Scrollen oder Wechseln zwischen Seiten verwendet. Tinder verwendet das Wischen nach rechts, um mit einem Profil übereinzustimmen, und das Wischen nach links, um eines zu übergehen.

Wischen mit mehreren Fingern

Sie können auch eine Wischgeste mit zwei oder drei Fingern ausführen. Dies ist eine häufige Funktion bei Laptop-Touchpads, die für verschiedene Aktionen zwei- und drei-Finger-Wischen verwenden.

Ziehen

Beim Ziehen wird die gleiche allgemeine Bewegung wie beim Streichen verwendet, nur bewegen Sie Ihren Finger langsamer und heben ihn nicht an, bis Sie das Objekt an die gewünschte Stelle gezogen haben. Sie verwenden das Ziehen, um ein Element an eine neue Position zu verschieben, z. B. wenn Sie Ihre Telefon-Apps neu organisieren.

Schleudern

Wie beim Wischen ist eine Schleudergeste, wenn Sie Ihren Finger mit hoher Geschwindigkeit über den Bildschirm bewegen. Anders als beim Ziehen bleibt Ihr Finger nicht mit einem Element in Kontakt. Flings werden oft verwendet, um etwas aus dem Blickfeld zu entfernen.

Lange drücken

Ein langes Drücken ist, wenn Sie auf den Bildschirm tippen, aber Ihren Finger länger als gewöhnlich gedrückt halten. Langes Drücken öffnet Menüoptionen, z. B. wenn Sie Text gedrückt halten, um ihn zu kopieren, oder eine App gedrückt halten, um sie zu löschen.

Prise

Eine von vielen Zwei-Finger-Gesten, eine Prise, ist, wenn Sie zwei Finger auf dem Bildschirm auseinander halten und sie dann in einer Pinch-Bewegung aufeinander zu ziehen. Pinch-Gesten werden oft verwendet, um nach dem Zoomen wieder herauszuzoomen. Manchmal bieten sie eine Ansicht aller Ihrer geöffneten Bildschirme für Navigationszwecke.

Pinch-Open oder Spread

Eine Pinch-Open- oder Spread-Geste ist das Gegenteil einer Pinch. Sie halten Ihre beiden Finger dicht beieinander und spreizen sie dann auseinander. Spreizen wird im Allgemeinen wie Doppeltippen zum Vergrößern verwendet.

Drehung

Um eine Drehung durchzuführen, drücken Sie mit zwei Fingern auf den Bildschirm und drehen Sie sie in einer kreisförmigen Bewegung. Das beste Beispiel für Rotation ist, wenn Sie die Karte in Google Maps drehen, um zu sehen, was um Sie herum ist.

Gesten entwerfen 101

Verwenden Sie, was die Leute wissen

Gesten gibt es schon seit einiger Zeit, daher gibt es für die meisten Gesten allgemeine Richtlinien.

Und in den meisten Fällen gibt es Regeln, die Sie befolgen sollten, wenn Sie Gesten für eine Benutzeroberfläche entwerfen. Wenn Sie beispielsweise eine App erstellen, müssen Sie berücksichtigen, auf welchen Oberflächen Benutzer Ihre App verwenden werden. Es besteht die Möglichkeit, dass Benutzer Ihre App auf Android- und Apple-Telefone herunterladen, die beide bereits produktspezifische Gesten verwenden. Sie müssen die Gesten der Benutzeroberflächen Ihres Produkts bewerten und entscheiden, wie Sie sie nutzen möchten oder ob es sich lohnt, Gesten hinzuzufügen, mit denen Benutzer nicht vertraut sind.

Hier sind einige praktische Gesten- und Bewegungsrichtlinien für beliebte Produktschnittstellen.

• Richtlinien für Google-Gesten
• Richtlinien für Microsoft-Gesten
• Richtlinien für Apple-Gesten
• Richtlinien für Android-Gesten

Beim Entwerfen gestenbasierter Benutzeroberflächen empfiehlt es sich, sich an das zu halten, was Benutzer wissen. Sie können kreativ werden, wenn es erforderlich ist, aber ein gewisses Maß an Konsistenz zwischen Gesten und Schnittstellen hilft, sie für Benutzer intuitiv zu halten und die Benutzerfreundlichkeit Ihres Produkts zu erhöhen.

Wenn Sie denken, dass eine neue Geste auf Lager ist, müssen Sie sie ausgiebig testen, bevor Sie sie implementieren. Sie führen eine Reihe von Benutzerforschungsmethoden durch, um die Benutzerfreundlichkeit, Effektivität, Lernkurven und Benutzerzufriedenheit mit einer Geste zu testen, bevor Sie sie der Öffentlichkeit zugänglich machen.

Sie haben die Möglichkeit, eine bekannte Geste für einen anderen Zweck wiederzuverwenden, aber auch hier sollten Sie die Wirksamkeit dieser Strategie im Voraus testen. Der Vorteil dabei ist, dass die Benutzer zumindest mit der Bewegung vertraut sind.

Nehmen Sie zum Beispiel die Verwendung von Doppeltippen auf Instagram, um einen Beitrag mit „Gefällt mir“ oder „Herz“ zu versehen. Ein doppeltes Tippen wird normalerweise zum Vergrößern verwendet, aber es funktioniert gut für den Zweck von Instagram. Es ist auch eine großartige Effizienzstudie: Das Tippen auf das Herz unter einem Pfosten erfordert ein Antippen weniger, aber mehr Zielen. Die alternative Double-Tap-Methode ermöglicht es Benutzern, schneller zu scrollen, da sie das gesamte Bild anvisieren können, und es ist intuitiv, auf das gewünschte Objekt zu tippen.

Designer haben begonnen, eine Designsprache mit Händen, Kreisen und Pfeilen zu entwickeln, um Produktentwicklern und Strategen die Absicht von Gesten mitzuteilen. Diese Sprache ist nahezu universell mit minimalen Abweichungen.

Denken Sie außerhalb des Bildschirms

Gesten existieren in alltäglichen Szenarien außerhalb der Verwendung von Telefonen und Laptops. Eine wachsende Zahl öffentlicher Toiletten hat bewegungsempfindliche Waschbecken, Lufttrockner und Papierhandtuchspender installiert. Diese Geräte verhindern auch die Ausbreitung von Keimen – eine nette Eigenschaft während der Grippesaison. In der Zwischenzeit werden selbstfahrende Autos mit Gestenerkennungstechnologie ausgestattet, um ihre Effektivität und Sicherheit zu verbessern.

Aber Sie können mit Telefongesten immer noch kreativ werden, während Sie außerhalb des Bildschirms denken. Seit Jahren nutzen Geräte Rotation und Schütteln als Interaktionsmethoden. Zum Beispiel gibt Apples „Shake to Undo“ Benutzern die Möglichkeit, eine Aktion durch Schütteln ihres Telefons rückgängig zu machen. Und inzwischen sind Sie wahrscheinlich mit dem horizontalen Drehen von Bildschirmen vertraut, um ein Video im Vollbildmodus anzusehen.

Solange sie zuerst getestet werden, können kreative Gestentechnologien Produkte weiterbringen und die Benutzerfreundlichkeit erhöhen.

Gesten und Zugänglichkeit

Gesten sollten, wie alle Dinge, zugänglich sein. Barrierefreiheit bezieht sich darauf, ein Produkt für alle Menschen in allen Kontexten, einschließlich Menschen mit Behinderungen, zugänglich und nutzbar zu machen. Gesten sollten den Best Practices für barrierefreies Design entsprechen, um zu einer gleichberechtigten Umgebung beizutragen, dem Americans With Disabilities Act (ADA) zu entsprechen und es allen zu ermöglichen, die von Ihrem Produkt profitieren könnten, es zu verwenden.

Abgesehen davon, dass sichergestellt werden muss, dass Benutzeroberflächengesten zugänglich sind, sollten Sie überlegen, wie Sie Gesten verwenden können, um die Barrierefreiheit zu verbessern. Apple erkannte, dass die flachen, texturlosen Bildschirme des iPhones ein Hindernis für blinde Benutzer darstellten. Also nutzten sie ihre gestenbasierte Benutzeroberfläche, um zusätzliche barrierefreie Gesten zu erstellen, die Sehbehinderten bei der Verwendung ihrer Produkte helfen.

UX nicht vergessen

Es ist üblich, die Begriffe UX und UI synonym zu verwenden, aber das ist eine ungenaue Vorgehensweise. UX steht für User Experience und befasst sich mit den Wahrnehmungen und Emotionen des Benutzers bei der Auseinandersetzung mit einem Produkt. UI steht für User Interface und umfasst die Elemente eines Produkts, mit dem ein Benutzer interagiert. UI ist ein wichtiges Element des UX-Designs. Wenn Sie mehr über die einzelnen Unterschiede und ihre Unterschiede erfahren möchten, lesen Sie unseren Leitfaden zu UX vs. UI-Design.

Der Punkt hier ist, dass UX und UI unterschiedlich sind, aber es ist wichtig, die Benutzererfahrung beim Entwerfen von Schnittstellen zu berücksichtigen. UI-Gesten, die Spaß machen, aber nicht hilfreich oder interessant sind, aber eine schlechte Benutzerfreundlichkeit aufweisen, sind das Ergebnis von Designern und Entwicklern, die UX vergessen haben.

Unabhängig davon, wie viele Tests Sie durchgeführt haben, geben Sie Benutzern die Möglichkeit, bestimmte Gestenfunktionen zu entfernen. Tippen ist eine wichtige Touchscreen-Geste, mit der jeder vertraut ist, aber einige Gesten sind für die Funktion eines Produkts nicht entscheidend und dienen nur dazu, es benutzerfreundlicher zu machen. Manchmal nerven solche Gesten Benutzer, die damit nicht vertraut sind, oder lösen die Geste aus, ohne es zu wollen.

Wenn Sie beispielsweise auf einem Mac mit zwei Fingern auf dem Touchpad nach links oder rechts wischen, wird ein Webbrowser eine Seite zurück- oder vorgesendet. Viele Benutzer machen diese Geste aus Versehen und sind frustriert, wenn sich die Seite ständig ändert. Apple gibt Benutzern also die Möglichkeit, diese und viele andere Funktionen zu deaktivieren.

Optimieren Sie das Benutzer-Onboarding

Das Benutzer-Onboarding verbessert die erfolgreiche Nutzung eines Produkts, indem es den Benutzern beibringt, wie man es benutzt. Denken Sie an ein neues Programm, das Sie beim ersten Öffnen durch alle Funktionen oder Schritte zur Verwendung führt.

Das Onboarding von Benutzern ist für Touch-Gesten wichtig, da sie oft versteckt und leicht zu übersehen sind, insbesondere wenn ein Benutzer mit einer Geste nicht vertraut ist oder in diesem Zusammenhang keine Erfahrung damit hat. Wenn sie nicht wissen, dass sie es benutzen können oder wie sie es benutzen sollen, werden sie es nicht tun.

Beim Onboarding eines Benutzers sollten Sie sich kurz fassen, eine Sache nach der anderen lehren und der Lernkurve folgen, die sich beim Testen am besten bewährt hat. Lange Tutorials und Schritt-für-Schritt-Listen sind langweilig, weniger interaktiv und werden oft übersprungen.

Begrüßen Sie die Zukunft der Gestenschnittstellen

Gesten sind schon da. Sie existieren in der Gegenwart und machen sich in unserem Alltag nützlich. Für Benutzer können diese Gesten in ihrem Unterbewusstsein leben, wenn sie ohne nachzudenken wischen und doppeltippen. Produktdesigner, Entwickler und Strategen müssen Gesten auf einer intimeren Ebene verstehen.

Design for Touch ist ein wachsender Teil des Bereichs. Gesten gibt es in Badezimmern und Autos – wer weiß, was als nächstes kommt? Umarme es. Ein brauchbareres Produkt ist ein wirksames Produkt.

Haben Sie Fragen oder möchten Sie die UX und UI Ihrer Produkte aktualisieren? Wir unterhalten uns gerne. Einfach melden.