”距離”を制したIxD(インタラクションデザイン)の魅力

電話を受け取りスマートフォンを耳に近づけると、スクリーンが自動でオフになることに気付いていますか？

これがIxD（インタラクションデザイン）における「距離」の役割です。

IxDとはUXのサブカテゴリーであり、ユーザーとプロダクトがどのように反応し合うのかに関するデザインです。

IxDの最終目標は「短い時間と少ない労力で、ユーザーが目的を達成すること」になります。つまりユーザビリティの目標と同じことがいえるのです。IxDにおいて対象との「距離」をデザインすることは、ユーザーに負担をかけずに目的を達成させるためなのです。

この記事では、IxDにおける「距離」の事例と、そのメリットをお伝えします。

デスクトップとモバイル、それぞれの「距離」とトリガー

クリックやスワイプなどは、アクションを引き起こすためのトリガーです。ただしモバイルとデスクトップでは操作方法が異なるので、トリガーのあり方も当然異なります。

トリガーのあり方が異なることを理解したうえで、モバイルとデスクトップそれぞれの「距離」を考慮してデザインをする必要があります。

以下ではトリガーのあり方に応じた「距離」を活用したデザインの事例をご紹介します。

デスクトップインターフェースにおける「距離」を活用したデザイン

デスクトップ環境では、画面上のマウスの動きをベースにユーザーのアクションを把握します。

デスクトップインターフェースにおける「距離」を活用したデザインの事例みてみましょう。

事例：トップに戻る

縦長にコンテンツが配置されているWebサイトでは、多くの場合「トップに戻る」というボタンが備わっています。ヘッダーに簡単にアクセスできる点で便利ですが、コンテンツに被ってしまうデメリットもあります。

しかし「距離」をデザインすれば、ユーザーのニーズに合わせて「トップに戻る」ボタンの表示／非表示が調整できます。

たとえばユーザーが下にスクロールアップをしたら、「トップに戻る」ボタンを表示させるデザイン。一方でスクロールダウンしているときは、「トップに戻る」ボタンは非表示とします。

こうすることで画面をすっきりとさせ、「トップに戻る」ボタンがコンテンツの上に被ってしまうことを防げるのです。

モバイルインターフェースにおける「距離」を活用したデザイン

スマートフォンなどのモバイルデバイスでは、ユーザーのアクションを「タッチ」などのセンサーにより認識します。画面のタッチ箇所やスワイプ動作、周囲の明るさ、カメラ等を感知することで、ユーザーの次の行動を予測できるのです。

タッチスクリーンにおける「距離」を活用したデザインの事例を見てみましょう。

事例：フォーム送信内容のチェック

フォーム送信のエラーは、記入漏れや誤入力から起こります。

長いフォームになるほど、ユーザーは下にスワイプをしながらフォームを記入していくことになりますが、内容をチェックするタイミングは大抵の場合、ユーザーが送信ボタンを押した後です。

苦労して入力したあとに、フォームをさかのぼり訂正する作業は、ユーザーのストレスになる可能性があります。

そこでユーザーがフォームを記入している最中に間違いを見つけ、プッシュダウンで警告メッセージを表示しましょう。下にスクロールしたときに、エラーがあればアラートを表示することで、フォームの記入がよりスムーズに行えます。

「距離」を制したIxDが、UXに与える3つのメリット

1. 生産性の向上

ユーザーのアクションを予測する「距離」は、アプリやプロダクトの反応を素早くし、ユーザーの生産性を向上させます。

上記のGIFはユーザーが「Contact Us」をクリックしようとしている事例です。クリックを予測し、カーソルのスクロールに合わせてコンタクトフォームを自動で開いています。

このようにアプリやプロダクトと素早くインタラクションできれば、ユーザーの作業効率はアップするのです。

2. フィードバックの強化

「距離」のデザインは、プロセスの進捗状況を素早くフィードバックするときにも役に立ちます。

上の事例は、ユーザーが「Sing In」をクリックする前に、パスワードの入力忘れを伝えています。

カーソルの動きから予測することで、パスワードが抜けていることを素早くフィードバックし、エラーを未然に防ぐのです。

3. 直感的な反応

ユーザーがWebサイトやアプリを利用するときに理想的なのは、無意識レベルで操作できることです。

そして「距離」のデザインは、ユーザーが直感的に操作するのに役立ちます。

上の事例では、ユーザーがメニューボタンにカーソルを動かすと、クリックせずに自動でメニュー画面が開く仕組みとなっています。

ユーザーが直感的にWebサイトを使用できると、ユーザビリティは向上するでしょう。

おわりに

今回は「距離」を意識したIxD（インタラクションデザイン）の事例とメリットをたっぷりとご紹介しました。

ユーザーのアクションを「距離」により予測することで、より直感的なインターフェースを生み出せます。ただし、ユーザーのアクションを間違って予測することのないよう、くれぐれも注意が必要です。

正しい予測をすれば、UXにもよい影響を与えるでしょう。

（執筆：Nitish Khagwal　翻訳：Sugita Mariko　編集：Sansui Riho）