So gestalten Sie benutzerfreundliche mobile Schnittstellen

Sep 11, 2025
wie man

Einige mobile Designs leiden an einem Problem: Sie könnten auf der Oberfläche großartig aussehen, aber sie verwenden sie, und Sie erfahren, dass ein allzu wichtiger Faktor vernachlässigt wurde: die Ergonomie. Die edle Kunst der Erstellung von Designs, die dem menschlichen Körper passen (und nicht andersherum) ist einer der wahren unbesorgtem Helden der Designwelt.

Die Ergonomie war für industrielle Designer immer sehr wichtig, aber es wird auch für digitale Designer immer wichtiger. Warum? Weil Smartphones und Tablets die Art und Weise ändern, wie wir mit digitalen Designs interagieren. Wir verwenden nicht mehr nur eine umständliche Tastatur und eine Maus, um unseren digitalen Freunden zu erzählen, was zu tun ist. Jetzt ist es direkter, körperlicher. Wir halten unsere Geräte. Wir tippen auf sie. Wir putzen sie. Wir stören sie liebevoll.

Diese zunehmend physische Bindung mit unseren geliebten mobilen Geräten zwingt die Designer, nicht nur darüber nachzudenken, wie ein Design aussieht und fühlt, sondern auch die physischen Aspekte der Verwendung. Es zwingt die Designer, darüber nachzudenken, wie Benutzer mit ihren Smartphones und Tabletten miteinander hält und interagieren; Wie viel des Bildschirms können sie sich bequem erreichen und wie sich ein Design in der Hand fühlt. Es zwingt die Designer, über die Ergonomie eines mobilen Designs nachzudenken.

Wie geht es also, ein mobiles Design zu schaffen, das ergonomisch ist und daher angenehm zu verwenden ist?

01. Raus aus dem Büro

Sogar bevor Sie anfangen, über mögliche Designs nachzudenken, steigen Sie aus dem Büro aus, um einige erstere Beobachtungen durchzuführen. Verbringen Sie einen Morgen- oder Nachmittag, an dem Sie sehen, wo, wann, wie und warum Menschen ihre mobilen Geräte verwenden.

Notieren Sie sich, wie die Menschen mit ihrem Gerät halten und interagieren, was sie zu dieser Zeit und den Arten von Herausforderungen und Ablenkungen tun könnten, mit denen sie möglicherweise kämpfen müssen. Diese Informationen werden dazu beitragen, die Ergonomie des Designs zu informieren, und bedeutet, dass bei der Prüfung eines Designs, das Sie testen können, gegen Szenarien, die Sie kennen, tatsächlich in der realen Welt passieren können.

02. Design für mehrere Holds

The three main holds used for a smartphone, and the frequency which they’re typically used

Die drei Haupthalte, die für ein Smartphone verwendet werden, und die Häufigkeit, die normalerweise verwendet werden

Wenn Sie Personen mit mobilen Geräten einhalten, werden Sie bald sehen, dass sie ein verwenden Vielzahl von verschiedenen Halten . Die Vielfalt der verwendeten Haltungen und die Häufigkeit, mit der Benutzer ihre Halteänderungen ändern, bedeutet, dass es wichtig ist, mit mehreren Halten zu entwerfen.

Beginnen Sie zum Beispiel ein Smartphone-Design mit einhändigem Gebrauch (da dies die anspruchsvollste Verwendung ist), aber immer testet Designs in einer Reihe von Haltungen, um zu sehen, wie sich jeder von ihnen anfühlt.

03. Platzieren Sie beliebte Kontrollen in Reichweite

Green areas are easy to reach, amber takes more effort and red areas are hard to reach

Grüne Gebiete sind leicht zu erreichen, Amber nimmt mehr Anstrengungen und rote Bereiche sind schwer zu erreichen

Legen Sie häufig verwendete Steuerungen, wie Tasten und Verbindungen, wo sie von Fingern oder Daumen leicht erreichbar sind. In der Mitte und der Unterseite des Bildschirms sind gute Bereiche zu verwenden, obwohl die unteren Ecken schwierig sein können, um zu tippen, wenn ein Gerät in nur einer Hand gehalten wird (mehr lesen Hier ).

Es ist immer noch die Konvention, die Menüs oben auf dem Bildschirm zu platzieren. Dies kann jedoch ein schwer zugänglicher Bereich sein, so dass es sich um eine gute Idee handelt, um auch eine Swipe-Aktion zu unterstützen, um das Menü aufzurufen.

04. Platzieren Sie den Inhalt über die Kontrollen

The BBC iPlayer iPad app places controls in easy to reach areas and below content

Die BBC IPlayer iPad App platziert die Steuerelemente in leicht zu erreichenden Bereichen und unterhalb des Inhalts

Sie möchten nicht, dass jemand Finger oder Daumen den Inhalt verdeckt, während sie auf den Bildschirm tippen, also geben Sie den Inhalt über den Kontrollen. Stellen Sie außerdem sicher, dass die Schlüsselinformationen nicht in einem Bereich des Bildschirms liegen, wo er leicht von einem Finger oder Daumen verdeckt werden kann - z. B. die unteren Ecken, die häufig gedeckt werden, wenn ein Smartphone in einer Hand gehalten wird.

05. Design mit Porträtmodus im Sinn

Während sich der eingesetzte Halt ändern könnte, ist eine Sache, die für beide Smartphones und Tablets viel stärker ist, die Tendenz für Menschen, sie für die Mehrheit der Zeit vertikal zu halten. Ein horizontaler Hold wird häufig für bestimmte Aufgaben verwendet, z. B. Sicht von Videos oder Fotos, dies ist jedoch die Ausnahme, nicht die Norm.

Natürlich sollte ein mobiles Design sowohl Porträt- (vertikale) als auch Landschaftsmodi (horizontal) ideal unterstützen, aber es sei denn, Sie entwerfen ein Video- oder Foto-Heavy-Standort oder -anwendung, das Design mit Porträtmodus im Sinn.

06. Design für Daumen

The Spotify app is designed to be thumb-friendly, with large tap targets

Die Spotify-App ist so konzipiert, dass sie thumb-freundlich ist, mit großen Tap-Zielen

Daumen treiben die Mehrheit aller Smartphone-Wechselwirkungen. Dies liegt daran, dass sich die Daumen ausschließlich verwendet werden, wenn ein Mobiltelefon in einer Hand gehalten wird und stark verwendet wird, wenn es in zwei Händen gehalten wird.

Daumen sind etwas größer als Finger und brauchen daher ein größeres Tap-Ziel. Versuchen Sie, diese Ablagerungen mindestens 44 x 44 Punkte (16 x 16 mm) mit mindestens 7 Punkten (2,5 mm) zwischen ihnen abzielen. Gröckere TAP-Ziele sind immer besser und Sie sollten sicherlich nicht kleiner als 44 x 30 Punkte (16 x 11 mm) gehen.

Auch wenn Sie für Tablets entwerfen, stillsteht immer noch auf Daumen, da ein Design die am wenigsten genaue Methode des Berührungsmethode unterstützen sollte, die ertönt. Ein großes Tap-Ziel ist nicht nur gut für Daumen, es ist auch großartig für Finger.

07. Design für große Gesten

Größere Tap-Ziele sind also besser. Welches größere TAP-Ziel gibt es als den gesamten Bildschirm? Versuchen Sie, mit großen Gesten zu entwerfen, z. B. so zu ermöglichen, dass Benutzer, um in einer Fotogalerie vorwärts oder rückwärts zu bewegen, oder um ein Menü aufzurufen.

Denken Sie daran, dass die Benutzer möglicherweise nicht realisiert werden, dass eine Geste unterstützt wird. Daher ist es immer eine gute Idee, einen sekundären Weg zu bieten, um etwas zu tun, beispielsweise ein Pfeilsymbol, um das nächste Foto aufzurufen.

08. Aufstieg zur Herausforderung

In der Ergonomie hören Sie manchmal mit der Gestaltung von mindestens 95 Prozent der Benutzer, indem er ein Design erstellt, das vom 2.5. bis zum 97.5. Perzentil der Nutzer komfortabel ist. Es wird immer extreme Benutzer geben, die sehr schwer aufzunehmen sind - wie wir alle wissen, dass Sie nicht alle die ganze Zeit angeben können, aber wenn Sie ein Design erstellen können, das die anspruchsvolleren Nutzer mit Komfort verwenden können, sollte es auch für alle arbeiten die dazwischen.

Deshalb ist es eine gute Idee, mit anspruchsvollen Benutzern und Szenarien zu entwerfen. Denken Sie zum Beispiel an einen beschäftigten Pendler, der die Straße mit Kaffee in einer Hand und einem Mobiltelefon in der anderen oder mit Arthritis hinuntergeht.

09. Bewahren Sie Interaktionen auf ein Minimum an

Wissen Sie, welche Interaktion der mobilen Mobilgeräte-Interaktion ist? Es ist kein Hahn oder ein Wischen oder eine Presse. Es ist überhaupt keine Interaktion. Je weniger Interaktion Ihr mobiles Design erfordert, desto weniger müssen Sie sich um die Ergonomie kümmern. Ich versuche immer, Interaktionen auf ein Minimum zu halten. Mobilfunktionen rücksichtslos reduzieren, Autosuggeste verwenden und Benachrichtigungen nur an die Dinge einschränken, über die ein Benutzer wirklich benachrichtigt werden muss.

10. Prototypen-Designs.

Sie können die Ergonomie eines mobilen Designs einfach nicht beurteilen, bis Sie es physisch in Ihren Händen halten und verschiedene Griffe ausprobieren können. Deshalb werde ich so schnell wie möglich ein Design prototypieren. Wir mögen Axure , aber es gibt viele andere große Prototyping-Tools. .

Für eine schnelle Studie können Sie sogar grundlegende Benutzertests mit einfachen Papierprototypen ausführen. Eine Skizze oder ein Papierausdruck, die auf einem mobilen Gerät stecken, erzählt Ihnen einen überraschenden Betrag über die Ergonomie.

11. Test, testen, testen Sie weitere mehr

Willst du den garantierten Weg wissen, um ergonomische mobile Designs zu erstellen? Es ist, Designs zu testen, dann zu testen und zu testen, zu testen, zu testen, zu testen, zu testen, zu testen, bis Sie ein paar verschiedene Personen haben, die ein paar verschiedene Geräte abdecken, alle Berichterstattung, die das Design angenehm ist. Es ist so einfach.

Mobile Geräte sind natürlich so konzipiert, dass sie "mobile" sind, also steigen Sie aus dem Büro, um Designs in den Umgebungen und Situationen zu testen, in denen sie wahrscheinlich in eingesetzt werden. Coffee-Shops sind immer ein guter Ort, um zu testen. Testentwürfe mit AS Viele Menschen wie möglich (mindestens fünf oder sechs) und konzentrieren sich auf schwierigere Szenarien, beispielsweise mit einem Smartphone einhändig. Wenn das Design gut funktioniert, wenn die Interaktionen des Benutzers eingeschränkt sind, ist es sicher, den Rest der Zeit aufzuheben. Es ist in erster Linie durch ständiges Testen und itertieren, dass Sie wirklich ergonomische mobile Designs erstellen können.

Dieser Artikel erschien ursprünglich im NET-Magazin. Abonnieren Sie hier.

Zum Thema passende Artikel:

  • 16 UX / UI Instagram-Konten müssen Sie folgen
  • 20 beste Wireframe-Tools
  • Die 5 größten UX-Designtrends für 2018

wie man - Die beliebtesten Artikel

10 Möglichkeiten, bessere Zeichenanimationen zu erstellen

wie man Sep 11, 2025

Mit der Größe der 3D-Branchenwachstum des Jahres ist es wichtiger als je zuvor, dafür zu sorgen, dass Ihre Arbeit von der Menge hervorsteht. Was auch immer Ihr Skill-Level als 3D-Künstler..

So erstellen Sie eine super-realistische Fantasy-Kreatur

wie man Sep 11, 2025

Das Malen einer Fantasy-Kreatur kann viel Spaß machen. Meiner Meinung nach kämpfen Sie, um ein Thema zu finden, das Ihnen mehr ..

Wie man eine Blogging-Site mit Gatsby baut

wie man Sep 11, 2025

Frameworks wie React Senden Sie nur JavaScript auf Clients, die dann verwendet wird, um die Elemente auf dem Bildschirm zu erstel..

Erstellen Sie ein Multi-Exposition-Bild mit Adobe CC

wie man Sep 11, 2025

Adobe hat mich mit der Erstellung einer Illustration, um das Konzept des Multilokalismus auszudrücken, und darüber kann ich meine Antwort sehen. In diesem Tutorial gehe ich durch meinen kre..

So erstellen Sie eine Lava-Lampe mit KeyShot

wie man Sep 11, 2025

Es gibt etwas seltsames Befriedigung von Lava-Lampen. Ein beruhigendes, farbenfrohes Licht und faszinierende wachsartige Blobs, d..

13 Tipps für die Erstellung einer VR-Gaming-Welt

wie man Sep 11, 2025

Tethered ist ein kritisch renommiertes Strategiespiel des dritten Person, das für VR entwickelt wurde. Es wurde im Oktober letzt..

Erstellen Sie einen Spritzwirkung in Realflow

wie man Sep 11, 2025

Seite 1 von 2: Seite 1 Seite 1 Seite 2 In diesem Artikel werde ich ..

So erstellen Sie ein stilisiertes 3D-Zeichen für Spiele

wie man Sep 11, 2025

Dies 3D Art. Das Tutorial konzentriert sich auf die Schaffung eines halbstilisierten Avatars in Iclone-Charakter-E..

Kategorien