UIデザインのためのジェスチャーを理解する

公開: 2021-03-29

タップ、スワイプ、ドラッグ、長押し - これらは、私たちのデジタル体験を支配するようになったジェスチャーのほんの一部です. タッチスクリーン iPhone は数年前にモバイルジェスチャの主流となりました。

ジェスチャーは、電話、ラップトップ、iPad などのインターフェースとのやり取りに影響を与えます。しかし、仕事や娯楽のデバイスを超えたジェスチャーインターフェイスを探す必要はありません。車の画面や洗面台を操作するときにジェスチャーを使用することは、もはや珍しくありません。

ナチュラルユーザーインターフェース (NUI) はユーザーにとって非常に自然であるため、インターフェースはタッチスクリーンインターフェースのように感じられ、場合によっては目に見えません。一部の NUI はジェスチャーコントロールを使用しており、ユーザーは直接物理的に接触することなくインターフェイスを操作できます。 BMW は最近、ユーザーが車の音量や通話などをタッチレスで制御できるジェスチャーコントロール機能をリリースしました。

ジェスチャーは、ユーザーインターフェースのデザインにおいてますます一般的になってきており、私たちの日常生活においてますます複雑な役割を果たしています。

テクノロジが進歩するにつれて、UX および UI デザイナーと企業は適応する必要があります。複雑な技術をすべて知っている必要も、コンピューターインテリジェンスに関する深い知識を持っている必要もありません。それでも、ジェスチャテクノロジの機能、機能、およびベストデザインプラクティスの基本的な理解が必要です。

良いジェスチャーの条件

では、ジェスチャーとは何ですか？

ジェスチャーはコミュニケーションの手段です。私たちは長い間、意味を伝えるために手のジェスチャーと頭のうなずきを使用してきましたが、現在では、ユーザーインターフェイスとのコミュニケーションにおいてジェスチャーが役割を果たしています。

良いジェスチャーは、私たちの考え方に沿った効果的で効率的なコミュニケーションを提供します。私たちの思考と知識は、私たちの話し方に影響を与え、特に UI デザインにおけるジェスチャーの使用に影響を与えます。現代のテクノロジーの周りで育った若い世代がジェスチャーを習得するのがどれほど簡単か、またはスワイプする行為が何かを押したり消したりすることをどのように模倣するかを考えてみてください. そのため、ジェスチャの設計においても、ユーザーを理解することが不可欠です。

ジェスチャーは、物理的な領域とデジタルの領域の間の壁を越えて、デジタルメディアと身体を使って対話できるようにします。いくつかの点で、デジタルアプリケーションの使用がより楽しくなりますが、これだけではジェスチャーを優れたものにするのに十分ではありません。

優れたモーションジェスチャは、あらゆる状況でアプリケーションを使いやすくすることで、ユーザビリティを向上させます。うまく設計されたジェスチャは、自然に感じられ、簡単に理解できるため、学習曲線が短くなります。ビル・ゲイツを引用するには：

「これまで、私たちは常にテクノロジーの限界に適応し、コンピューターの操作方法を恣意的な慣習や手順に合わせなければなりませんでした。 NUI により、コンピューティングデバイスは初めて私たちのニーズや好みに適応し、人間は私たちにとって最も快適で自然な方法でテクノロジーを使用し始めるでしょう。」

ジェスチャー技術の利点

ジェスチャーインターフェイスが広く使用されているのは、さまざまなメリットがあるためです。ジェスチャの最も重要な 3 つの利点は、よりクリーンなインターフェイス、使いやすさ、およびタスク完了の改善です。

1.よりクリーンなインターフェース

人間はかつてないほど多くのコンテンツを消費し、企業はより多くのデータを使用し、テクノロジーはより多くのサービスを提供し続けています。このようにコンテンツが増えると、インターフェイスやディスプレイが雑然と見えやすくなります。デザイナーはジェスチャを使用して、スペースを占有するボタンなどの視覚要素の数を減らすことができます。

2.使いやすさ

前述のように、ジェスチャベースのインターフェイスを使用すると、インタラクションがより自然になります。シンプルな手のジェスチャーの使いやすさにより、最小限の労力で最高速度でテクノロジーを使用できます。

3.タスク完了の改善

タスクを完了するためにユーザーがしなければならないことが少なくなると、タスクの完了率とコンバージョン率が向上します。労力がかからないほど、タスクを完了する可能性が高くなります。ジェスチャベースのユーザーインターフェイスは、タスクをシンプルかつ迅速にすることで、これを利用します。タスクを完了するために必要な手順の数を減らすことさえできます。

UIデザインにおけるジェスチャーの種類

タッチのデザインは、多くの種類のジェスチャの開発につながりましたが、最も一般的なのはタップとスワイプです。ジェスチャには 3 つのカテゴリがあります。

ナビゲーションジェスチャ (ナビゲートするため)
アクションジェスチャ (アクションを実行するため)
ジェスチャを変換する (コンテンツを操作するため)

以下は、すべてのユーザー (またはほとんどすべてのユーザー) が (意識的でなくても) 慣れ親しんでいるインターフェイス全体で最も一般的なジェスチャの一部です。画面について言及していますが、画面をタッチパッドまたはその他のジェスチャインターフェイスに置き換えることができます。

タップ

タップジェスチャとは、1 本の指で画面をタップして、アプリやページなどを開いたり選択したりすることです。ヒントは次のとおりです。テキストだけでなく、ボックスまたは行全体がクリック可能になるように、クリック可能なインターフェイス要素を設計します。ユーザーにより多くのスペースを与えると、使いやすさが向上します。

ダブルタップ

ダブルタップとは、画面を 2 回続けてタップすることです。多くのアプリケーションはこのジェスチャーを使用してズームインしますが、Instagram では、ユーザーは写真をダブルタップして気に入りました。

スワイプ

スワイプとは、画面上で指を一方向に動かし、一方の端をタッチしてもう一方の端で指を離すことです。スワイプジェスチャは、ページのスクロールや切り替えによく使用されます。 Tinder では、右にスワイプしてプロファイルと一致させ、左にスワイプしてプロファイルを通過させます。

複数の指でスワイプ

2 本または 3 本の指でスワイプジェスチャを実行することもできます。これは、さまざまなアクションに 2 本指と 3 本指のスワイプを使用するラップトップタッチパッドの一般的な機能です。

引っ張る

ドラッグはスワイプと同じ一般的な動きを使用しますが、指をゆっくり動かし、オブジェクトを目的の場所に引っ張るまで指を離さないでください。電話アプリを再編成するときのように、アイテムを新しい場所に移動するには、ドラッグを使用します。

フリング

フリングジェスチャは、スワイプと同様に、画面上で指を高速で動かすことです。ドラッグとは異なり、指は要素に触れたままになりません。フリングは、ビューから何かを削除するためによく使用されます。

長押し

長押しとは、画面をタップするときに指を通常より長く押したままにすることです。長押しすると、テキストを長押ししてコピーしたり、アプリを長押しして削除したりするなど、メニューオプションが開きます。

ピンチ

多くの 2 本指ジェスチャの 1 つであるピンチは、画面上で 2 本の指を離して保持し、ピンチ動作で互いに向かってドラッグすることです。ピンチジェスチャは、ズームイン後にズームアウトするためによく使用されます。ナビゲーション目的で、開いているすべての画面のビューを表示することもあります。

ピンチオープンまたはスプレッド

ピンチオープンまたはスプレッドジェスチャは、ピンチの反対です。 2 本の指を近づけたままにしてから、広げます。ダブルタップのような拡大は、通常、拡大するために使用されます。

回転

回転するには、2 本の指で画面を押して円を描くように回転させます。回転の最も良い例は、Google マップで地図を回転させて周囲を確認する場合です。

ジェスチャーの設計 101

人々が知っていることを使用する

ジェスチャーはしばらく前から存在しているため、ほとんどのジェスチャーには一般的なガイドラインが存在します。

ほとんどの場合、インターフェイスのジェスチャを設計するときに従うべきルールがあります。たとえば、アプリを作成するときは、ユーザーがアプリを使用するインターフェイスを考慮する必要があります。ユーザーが Android と Apple の携帯電話にアプリをダウンロードする可能性があります。どちらも製品固有のジェスチャーを既に使用しています。製品のインターフェースのジェスチャを評価し、それをどのように利用するか、またはユーザーが慣れていないジェスチャを追加する価値があるかどうかを判断する必要があります。

一般的な製品インターフェイスの便利なジェスチャーとモーションのガイドラインを次に示します。

Google ジェスチャーガイドライン
Microsoft ジェスチャーガイドライン
Apple ジェスチャーのガイドライン
Android ジェスチャーのガイドライン

ジェスチャベースのユーザーインターフェイスを設計するときは、ユーザーが知っていることに固執することをお勧めします。必要に応じて創造性を発揮することもできますが、ジェスチャとインターフェイスに一定の一貫性を持たせることで、ユーザーが直感的に操作できるようになり、製品の使いやすさが向上します。

新しいジェスチャーが用意されていると思われる場合は、実装する前に広範囲にテストする必要があります。一連のユーザー調査方法を実施して、ジェスチャを公開する前に、ジェスチャの使いやすさ、有効性、学習曲線、およびユーザーの満足度をテストします。

よく知られたジェスチャを別の目的で再利用するオプションがありますが、この戦略の有効性を事前にテストする必要があります。ここでの利点は、ユーザーが少なくとも動きに慣れていることです。

たとえば、Instagram のダブルタップを使用して、投稿に「いいね」または「ハート」を付けます。通常、ダブルタップはズームインに使用されますが、Instagram の目的にはうまく機能します。これは、効率性についての優れた研究でもあります。投稿の下にあるハートをタップするには、1 回タップする必要はありませんが、より多くの狙いを定める必要があります。別のダブルタップ方法では、目的の画像全体があるため、ユーザーはより速くスクロールでき、好みのオブジェクトを直感的にタップできます.

デザイナーは、製品開発者やストラテジストにジェスチャーの意図を伝えるために、手、円、矢印を使用したデザイン言語の開発を開始しています。この言語はほぼ普遍的であり、偏差は最小限です。

UI ジェスチャの例を示す図。

UI ジェスチャの推測の例を示す図。

画面の外で考える

ジェスチャは、電話やラップトップの使用以外の日常的なシナリオに存在します。動きに敏感なシンク、空気乾燥機、ペーパータオルディスペンサーを設置する公衆トイレの数が増えています。これらのデバイスは、インフルエンザの季節には気の利いた特徴である細菌の拡散も防ぎます。一方、自動運転車は、その有効性と安全性を向上させるためにジェスチャー認識技術を採用しています。

ただし、画面の外で考えながら、電話のジェスチャーで創造性を発揮することはできます。デバイスは、何年もの間、相互作用の方法として回転と振動を使用してきました。たとえば、Apple の「Shake to Undo」は、ユーザーが携帯電話を振ることでアクションを元に戻すオプションを提供します。そして今では、画面を水平方向に回転させてフルスクリーンでビデオを見ることに慣れているでしょう。

それらが最初にテストされる限り、創造的なジェスチャ技術は製品をさらに進化させ、使いやすさを向上させることができます。

ジェスチャーとアクセシビリティ

ジェスチャーは、すべてのものと同様に、アクセスできる必要があります。アクセシビリティとは、障害のある人を含め、あらゆる状況ですべての人が製品にアクセスして使用できるようにすることです。ジェスチャは、アクセシブルなデザインのベストプラクティスに準拠して、平等な環境に貢献し、米国障害者法 (ADA) に準拠し、製品の恩恵を受ける可能性のあるすべての人が製品を使用できるようにする必要があります。

インターフェイスジェスチャにアクセスできることを確認する以外に、ジェスチャを使用してアクセシビリティを向上させる方法を検討する価値があります。 Apple は、iPhone のフラットでテクスチャのない画面が目の不自由なユーザーにとって障害になることに気付きました。そのため、ジェスチャーベースのインターフェースを使用して、視覚障害者が製品を使用するのに役立つ追加のアクセシビリティベースのジェスチャーを作成しました。

UXを忘れない

UX と UI という用語を同じ意味で使用するのが一般的ですが、これは不正確な慣行です。 UX はユーザーエクスペリエンスの略で、製品を操作する際のユーザーの認識と感情を扱います。 UI はユーザーインターフェイスの略で、ユーザーが操作する製品の要素を含みます。 UIはUXデザインの重要な要素です。それぞれの違いについて詳しく知りたい場合は、UX と UI デザインに関するガイドをご覧ください。

ここでのポイントは、UX と UI は異なるということですが、インターフェイスを設計する際にはユーザーエクスペリエンスを考慮することが重要です。楽しいが役には立たない、または興味深いがユーザビリティが低い UI ジェスチャーは、デザイナーや開発者が UX を忘れた結果です。

どれだけテストを行ったとしても、特定のジェスチャ機能を削除するオプションをユーザーに提供してください。タップは誰もが知っている重要なタッチスクリーンジェスチャですが、一部のジェスチャは製品の機能にとって重要ではなく、使いやすくするためだけに存在します。このようなジェスチャは、慣れていないユーザーを悩ませたり、意図せずにジェスチャをトリガーしたりすることがあります。

たとえば、Mac では、タッチパッド上で 2 本の指を左右にスワイプすると、Web ブラウザーがページを前後に移動します。多くのユーザーは偶然にこのジェスチャーを行い、ページが変わり続けることに不満を感じています。そのため、Apple はユーザーにこの機能や他の多くの機能を無効にするオプションを提供しています。

ユーザーオンボーディングの改善

ユーザーオンボーディングは、ユーザーに製品の使用方法を教えることで、製品の使用を改善します。初めて開いたときに、すべての機能または使用手順をガイドする新しいプログラムについて考えてみてください。

タッチジェスチャは、特にユーザーがジェスチャに慣れていない場合や、そのコンテキストでの経験がない場合に、隠されていることが多く、見逃しやすいため、ユーザーオンボーディングは重要です。彼らがそれを使用できるか、または使用する方法を知らなければ、使用しません。

ユーザーをオンボーディングするときは、手短に、一度に 1 つのことを教え、テストで最も効果的であることが証明されている学習曲線に従う必要があります。長いチュートリアルやステップバイステップのリストは退屈で、対話性が低く、スキップされることがよくあります。

ジェスチャーインターフェイスの未来を受け入れる

ジェスチャーはすでにここにあります。それらは現在に存在し、私たちの日常生活に役立っています。ユーザーにとって、これらのジェスチャは無意識のうちにスワイプやダブルタップを行うため、潜在意識の中に生きている可能性があります。製品デザイナー、開発者、ストラテジストは、ジェスチャーをより親密なレベルで理解する必要があります。

タッチのデザインは、この分野で成長している部分です。ジェスチャーはバスルームや車に存在します。次に何が起こるかは誰にもわかりません。抱きしめて。より使いやすい製品は効果的な製品です。

質問がある、または製品の UX と UI をアップグレードしたいですか? 喜んでお話します。単に手を差し伸べてください。