【翻訳】NUIパターンを使ったデジタルデバイス向けのデザイン方法10+ 件(Dhananjay Garg, Prototypr, 2022)

blog.prototypr.io

ナチュラユーザーインターフェース(NUI)デザインの基本原則を活用しましょう。

時が経つにつれ、デジタルスマートデバイスの種類は増加の一途をたどっています。そして、私たちが所有し、日々使用するデバイスの数も増えています。このトレンドが上昇するにつれ、ハイテク産業におけるデザイナーの役割は、時代とともに強化されるに違いありません。より多くのデバイスが私たちの日常に加わることで、それぞれのデバイスに費やす時間は有限なものとなっていくでしょう。Exploding Topics,of%2058%20times%20each%20day.)の2022年の統計によると、人々は1日あたり3時間15分(平均)を携帯電話に費やしています。この数字はあと数時間増えますが、電話全体は減り、時計、スマートテレビタブレット、そしてSurface Tableのような未知のデバイスに取られることを想像してほしいのです。

Quoraで、作家でありインタラクションデザイナーでもあるDan Safferが書いた、NUI(Natural User Interface)デザインの11の基本原則という隠れた名作を見つけました。この11の原則を読んでいると、携帯電話や手首に優しいデバイスが物理的な形を変えても、デザインの黄金律は変わらないことに気づかされます。ここでは、これらの黄金律を再確認し、その意味を探ってみましょう。

#1 カーソルではなく、指のためのデザイン

タッチターゲットはデスクトップ用よりもはるかに大きくする必要があります。指先は8〜10mm、指の腹は10〜14mm。

ウェブサイトを作成する際にも、デザイナーはタッチスクリーン端末で開かれ、インタラクションされることを考慮すべきです。Webのトラフィックの多くは、モバイルデバイスによってもたらされています。それは、モバイルデバイスが常に私たちのそばにあり、他のデバイスにはない快適さと利便性を提供してくれるからです。したがって、何らかのインターフェースを設計する際には、リンク、さまざまな種類のボタン、スワイプターゲットなど、いくつかのインタラクティブコンポーネントのタッチエリアを考慮する必要があります。デスクトップコンピューターなどのデバイスは、マウスやトラックパッドを使ってターゲットを選択したり、オブジェクトをクリックしたりします。ノートパソコンのカーソルは精密に作られているため、高密度のデバイスで利用できます。一方、指は精度が低いため、携帯電話、スマートウォッチ、タブレットなどのタッチスクリーンデバイスの入力として使用されます¹。

#2 生理学と運動学を意識する

ユーザーに過度な伸展や反復作業をさせないこと。

ユーザーに同じ反復作業を何度もさせないこと。2回以上行われるタスクは、退屈で平凡なものになってしまいます。デザイナーとしては、ルールベースの自動化を使うのではなく、データやユーザーのインサイトを見て、タスクを自動化できないかどうかを導き出すべきです。何も派手なことは必要ありません。ただ、手作業で繰り返されるタスクをすべて引き受けることで、ユーザーはあなたの製品に長く付き合うことができるのです。

#3 ゴリラの腕が人間にはない

人間は、長時間、体の前で手を上げて多くの作業をすることを想定していません。マイノリティ・リポートの皆さん、ごめんなさい。

Surface Tabletのような大きなスクリーンを使って、あなたの次のインターフェイスをデザインすることを想像してみてください。わくわくしませんか?大きなスクリーンは、デザインするための広大なスペースを提供しますが、ユーザーの腕がすべてのインターフェイスのコントロールに届くのは面倒なことでもあります。単純なインタラクションを超えるものは、ユーザーにとって平凡で疲れるものになります。もし、ユーザーが画面操作のために腕を長時間伸ばしているとしたら、それは疲労と痛みを引き起こし、ゴリラ腕とも呼ばれます²。

#4 画面の広さ

指は手のひらに付いているため、ジェスチャーをしようとしているときに画面を覆ってしまうことがあります。ラベルのような必須要素をコントロールの下に置くのは避けましょう。ユーザー自身の手によって見えなくなってしまうからです。この現象を避けるために、メニューのようなアイテムはスクリーンの下部に配置します。

オプションをフローティングで表示するプレスインタラクションをデザインするとき、あるいはツールチップを表示するときでも、ユーザーの手のひらが指の下にある情報をすべて隠してしまう可能性があることを考慮してください。これは、太い指の問題にも当てはまります。その代わり、指の上や周りのオブジェクトを表示するようにインタラクションをデザインしてください。Pinterestのピンを保存するための長押しインタラクションは、どのように行うべきかの良い例です。

UI SorucesからのPinterestインタラクション

#5 テクノロジーを知る

タッチスクリーン、センサー、カメラの種類によって、デザインできるジェスチャーの種類は決まります。ジェスチャーの難易度が高ければ高いほど、それを実行できる(あるいは実行したい)人の数は少なくなります。

ジェスチャーを必要とする製品を設計する場合は、簡単に実行でき、ユーザーにも広く知られているジェスチャーのリストに戻ることをお勧めします。また、ユーザー層を考慮し、ジェスチャーの合図を常に提供する必要があります。また、特別なニーズを持つ人々のために、ジェスチャーをタップや音声操作に変換するアクセシビリティオプションを用意するのもよいでしょう。

タッチ操作を教えるためのアイコン

#6 押したときではなく、離したときにアクションを起動させる

ユーザーテストのセッションで、年配の方々と話していて特筆すべきことは、モバイルデバイスで間違ったタップやアクションをするのが怖いということです。そのため、正しい操作ができたと確信したときだけ指を離し、それ以外は押したままにしていることが多かったのです。この経験は私にとって非常にユニークなもので、私たちが常に気をつけなければならないことです。ユーザーが「押す」アクションをするときは、ボタンが押されたことを知らせるとともに、指を離したときにアクションが実行されるようにします。

#7 魅力的なアフォーダンス

ユーザーにシステムを使い始めてもらうために、簡単なジェスチャーを使用しましょう。

新しい体験にユーザーを取り込むとき、ユーザーのために物事を複雑にしすぎないようにしましょう。シンプルに始め、プログレッシブ・ディスクロージャーを使用して、アプリと実行する必要のある一般的なアクションに慣れさせるようにします。アクションがシンプルであればあるほど、ユーザーはアプリの機能を素早くマスターすることができます。ユーザーを天才のように感じさせるアプリは長い道のりですが、ユーザーやその感性を嘲笑するようなアプリは、すぐにユーザー数が減少してしまいます。

#8 意図しないトリガーを回避する

ユーザー側の日常のさまざまな動作が、誤ってシステムを起動させてしまうことがあります。避けてください。

特に大きなデバイスの場合、ソフトウェアは偶発的なタップやタッチを考慮する必要があります。表面積、タッチの持続時間、角度などに基づいて、ソフトウェアは偶発的なトリガーを巧みに破棄し、また、本物の動作として認められた場合に回復する方法を提供する必要があります。デザイナーとして私は、デバイスの寸法が大きくなり、携帯電話のような小さなフォームファクターでも管理できるようになることで、可能性が広がると考えています。

#9 ジェスチャーとコマンドキー

機能にアクセスするための簡単な方法(ボタン、スライダー、メニュー項目など)を提供しつつ、ショートカットとして高度で学習可能なジェスチャーを提供すること。

ポイント9は、上記で述べたことと似ています。複雑なジェスチャー制御のアプリでは、タップやスワイプをベースとした代替のUIインターフェイスを提供します。たとえば、ユーザーは、2本指で回転させる操作でキャンバスを回転させたり、タップベースのメニューバーで回転の度合いを選択し、回転させる操作を確認したりすることができます。どちらも習得可能な方法であり、おそらく異なる年齢層のオーディエンスにアピールすることができます。ジェスチャーを使用する場合は、ジェスチャーを使用しないユーザーも考慮に入れてデザインしてください。

#10 必要な多様性

どのようなジェスチャーでも、その方法はさまざまです。それを考慮してください。

ジェスチャーをするときは、右手と左手の両方を使うユーザーを想定し、テストしてください。おそらく、特定のジェスチャーを行うのが難しい人は、手のひらをスクリーンの上に置くでしょう。これらはすべて、さまざまなタイプのユーザーがタッチスクリーン・インターフェースを使用する際に利用する、本物のインタラクション・パターンです。デザイナーは、単純なジェスチャーと複雑なジェスチャーの両方を使用する場合、さまざまな運動障害と異なる使用パターンを持つ人々を考慮する必要があります。

#11 ジェスチャーの複雑さをタスクの複雑さと頻度に合わせる

シンプルで頻繁に使用されるタスクには、同じようにシンプルなジェスチャーを使用する必要があります。

1本の指だけでなく、2本の指を使うジェスチャーは、ほとんどのユーザーにとって面倒で厳しいものです。この考え方に基づけば、複雑なジェスチャーは1回限りの操作に限定されるべきです。頻繁に行う操作には、シンプルなタップ、2回タップ、スワイプの操作を使用します。これらは頻繁に行う操作であるため、2本指を使うと疲労や不快感を感じやすくなります。

やったー🙌。全部読み終わったあなたへ

最後まで読んでくれてありがとうございます。何か得るものがあったのなら幸いです。もしこれが洞察に満ちたものであったなら、Headspace 👇が守っているマインドフルな技術デザインの原則にも感心することでしょう。

blog.prototypr.io

また、LinkedInTwitterFigmaDribbbleSubstackの私のコンテンツバースに参加するか、DMにスライドしてください。 💭 感想やフィードバックをコメントしたり、会話を始めたりしましょう!