これらの成功したインタラクションデザインの原則でUXを後押しする

動作するインタラクションと使用できないインタラクションの間には微妙な境界線があります。 インタラクションデザインの原則は、格差を埋めるのに役立ちます。

適切に実行されたインタラクションデザインは、優れたUXの実装において大きな役割を果たし、UXデザインの原則の基本の1つであることは間違いありません。

「使用できない」とは「私は先に進んでいる」という意味であり、視覚的なデザインがどれほど「見栄えが良い」としても、そのアニメーションがいかに派手であるかにかかわらず、インタラクションデザインを台無しにし、UXを台無しにします。 正しく理解すれば、美学が不足している場合でも、はるかに優れたUXへの道を順調に進むことができます。 製品は成功する可能性がはるかに高くなり、それが収益に貢献します。

インタラクションデザイン（IxD）は、インタラクションデザインアソシエーション（IxDA）によって「インタラクティブシステムの構造と動作」として定義されています。 インタラクションデザイナーは、コンピューターからモバイルデバイス、アプライアンスなど、人々と彼らが使用する製品やサービスとの間に有意義な関係を築くよう努めています。」

経験は非常に重要です。経験は、人々が自分のやりとりをどれだけ愛情を込めて覚えているかを決定するからです。 —日常のデザインのドン・ノーマン。

インタラクションデザインの原則に従うことは、優れたインタラクションデザインに大きく貢献し、それがエクスペリエンスに貢献します。

今日のすべてのデバイスとテクノロジーを一夜にしてまったく異なるものに置き換えることができる可能性がありますが、その永続的な原則のために、優れたインタラクションデザインは依然として達成可能です。 それらの一定の原則は、人々を動機付けるもの、彼らの行動、そして彼らがどのように考えるかについてです。

すべてのドアのすべてのドアハンドルの動作が異なる場合を想像してみてください。 1つは、最初にドアに押し込み、次に押し下げる必要があります。 別の人にとっては、押し下げる代わりに引き上げる必要があり、さらに別の人にとっては、 2回引き上げてから、引き下げる必要があります。これは大惨事です。 実際、「ドアハンドルを回す」というフレーズは、それを行う方法が1つしかないことを前提としています。

「ルールに従う」という叫びに頭を悩まされることを好む人は誰もいませんが、真に優れたインタラクションデザインは、一連の標準、ベストプラクティス、規則、および経験則（ヒューリスティック）に依存しています。 それはスクイーズな科学ではありませんが、それらはIxDの基盤を形成し、最小限の摩擦で相互作用を可能にします。 インターフェイス規格は創造性を阻害しません。それらは厳格で迅速なルールではありませんが、設計者が革新するための「使いやすく親しみやすい設計」の基盤を確立するのに役立つ基本的なガイドラインです。

インタラクションデザインの原則とベストプラクティス

インタラクションデザインは、ヒューマンコンピュータインタラクション（HCI）、「コンピュータテクノロジーの設計、特に人間（ユーザー）とコンピュータ間のインタラクションに焦点を当てた学際的な研究分野」の分野に分類されます。デザイン財団。

優れたUIデザインは、基本的なUIデザインの原則と目標主導型のインタラクションデザインを組み合わせることで、純粋なユーザーの喜びを実現します。

• インタラクションデザインを成功させるには、シンプルで明確に定義された目標、強力な目的、直感的なUIを採用します。
• インタラクションをシンプルかつ簡単に保つために、目標主導型の インタラクションデザインでは、ユーザーがタスクを完了するために必要な最小限の機能しかユーザーの前に配置しません。

最も重要な原則のいくつかに飛び込みましょう（決して網羅的なリストではありません）：

発見可能性

基本的に、ユーザーがそれを見つけることができない場合、それは存在しません。 UIでマイクロ秒未満で実行できるアクションをベルとして明確にする必要があります。たとえば、ベストプラクティスとしてアイコンにラベルを付けることができます。 ラベルのないアイコンは、意味を解読するために停止する必要があるため、ユーザーのパスに障害物を投げ込むのと同じです。 「フロー」を中断しています。 そして、ここにショッカーがいます…彼らはあなたのUIを学ぶことに興味がありません。

シニフィアン

発見可能性と非常に密接に関連しているため、シニフィアンを効果的に使用することで、アフォーダンス（オブジェクトに対するアクションの可能性）がUIに明確に示されます。 シニフィアンは、信号や道標のような強力な手がかりを提供します。 利用可能なインタラクションを示すと、ユーザーが「ここで、私をタップ（クリック、スワイプなど）できます！」と叫んで緑色のライトを点滅させます。 UIにはアフォーダンスが存在する場合がありますが、シニフィアンがない場合は非表示のままになるため、非表示のままになる場合があります。 例としては、ユーザーが誤って左または右にスワイプしない限り（たとえば、何かを削除するために）、それ自体が表示されない「隠されたジェスチャインタラクション」があります。

アフォーダンスは、可能なアクションを定義します。 シニフィアンは、人々がそれらの可能性をどのように発見するかを指定します。シニフィアンは、何ができるかを示す兆候、知覚可能な信号です。 シニフィアンは、アフォーダンスよりもデザイナーにとってはるかに重要です。 —Don Norman（Norman、2013）

フィードバック

署名者に続いて、ユーザーへの次の最も重要なコミュニケーションはフィードバックです。 フィードバックとは、アクションの影響に関する明示的な情報を意味します。 また、システムステータスを常に可視化することも意味します。つまり、システムは次のことを確認する必要があります。

• ユーザーは何が起こっているかについて常に通知されます。
• それらのアクションの結果と製品（システム）の現在の状態に関する継続的な情報があります。
• 製品の状態、つまり、処理、ロード、検索、アップロードなど、またはその他の状態の変化に関して、ユーザーの心に混乱はありません。
• アクションが実行された後、新しい状態を簡単に判別できます。

概念モデルとメンタルモデル

優れたインタラクションデザインは、ユーザーがシステムの優れた概念モデルを作成するために必要なすべての情報を提示し、それによってユーザーの理解と制御の感覚につながります。 概念モデルは、システムを使用する際の結果の発見可能性と評価の両方を強化します。

メンタルモデル（または認知地図）は、特定の相互作用への期待と、現実の世界で何かがどのように機能するかを知らせる、ユーザーの心の中の画像です。 認知地図は、特に空間的関係に関連する、私たちの物理的環境の内部表現です。 ユーザーのメンタルモデルを効果的に使用することで、インタラクションデザイナーは直感的に「感じる」システムを作成できます。

設計者は概念モデル、つまり設計モデルを発明します。これは、設計者がデバイスまたはソフトウェアを機能させる方法です。 このモデルをユーザーに伝える唯一の方法は、UIを介してモデルを実装することです。 次に、ユーザーは概念モデルと対話し、何かがどのように機能するかについての独自のメンタルモデルを作成します。

設計者は、アプリがどのように機能することを意図していたかをユーザーに伝えることはできません。ユーザーは、その目的を明確に伝えるためにUIを適切に設計する必要があります。 つまり、インターフェイスを理解しやすく、使いやすくします。 悪いインタラクションデザインは、ユーザーにとって間違ったメンタルモデルを作成するリスクを伴います。 彼らはデザイナーが意図していなかった方法でアプリを操作しようとしているため、これは混乱とユーザーエラーにつながります。

マッピング

マッピングは、コントロールと世界でのそれらの効果との関係です。 フィードバックの原則は、2つの原則が連携してシームレスなエクスペリエンスを作成するため、マッピングの密接な関係にあります。 ほぼすべてのアーティファクトには、コントロールとエフェクトの間に何らかのマッピングが必要です。インターフェイスデザインの場合、それはコントロールとその結果の関数の間の関係です。

自然なマッピング—物理的な類似性と文化的基準を利用する—は即座の理解につながります。 たとえば、設計者はUIで空間アナロジーを使用できます。

• スライダーコンポーネントで値を増やすには、スライダーを右にスワイプし、
• 減らすには、左にスワイプします。

いくつかの自然なマッピングは生物学的であり、レベルの上昇はレベルの低下を表し、レベルの低下はより少なくなるという普遍的な基準のようにです。

制約

制約の設計概念は、特定の瞬間に発生する可能性のあるユーザー操作の種類を制限する方法を決定する方法です。 インタラクションデザインの制約は、ユーザーに「ガイドレール」を提供することで効率的なインタラクションを支援します。これは、発生する可能性のあるインタラクションを操作するガイドハンドのようなものです。

設計上の制約により、ユーザーを特定のインタラクションに導くために、特定のものだけが有効になっている、または表示されていることを確認します。 サイズ、スケール、比率、強調、および状態を考慮し、これらが調和して連携して階層を作成し、結果としてユーザーに影響を与える方法を検討します。 制約を正しく設定すると、ユーザーエラーの可能性を減らすのにも役立ちます。

制約の反対は、すべてのオプションがユーザーに提供される場合であり、ユーザーが次に何をするかを決定するのが困難になります。 それが選択の原則です。 オプションが多ければ多いほど、それらのいずれかを選択するのは難しくなります。私たちはすべての可能性に圧倒されます。

優れた インタラクションデザインは、利用可能なすべてのオプションをインターフェイスに配置するわけではありませんが、特定の瞬間に最も重要なものに制限します。

一貫性、標準、およびヒューリスティック

これらはすべて関連しています—必要に応じて、パターン（下記）の兄弟です。 ユーザーエラーを防ぎ、アプリケーションを簡単に学習できるようにするには、相互作用モデルに一貫性を持たせることが不可欠です。 一貫性により、UX、一般的な使いやすさ、およびユーザーがデジタル製品を使用できる効率が向上します。

一貫性とは、同様の要素を使用して同様のタスクを実行し、全体を通して同様の機能と動作を実現することを意味します。一貫性のあるインターフェイスとは、同じ操作を使用して何かを行うなどのルールに従うインターフェイスです。

高度なユーザビリティを目指す製品は、確立された規則、標準、ベストプラクティス、およびユーザビリティヒューリスティック（特定のユーザビリティガイドラインではなく、大まかな経験則）に従います。

たとえば、規則に準拠することは、ページのレイアウト方法にある可能性があります。 Webユーザーは、時間の69％をページの左半分の表示に費やし、30％を右半分の表示に費やしています。 したがって、サイトが従来のレイアウトに従っている場合、サイトは収益性が高くなる可能性が高くなります。

標準は、パンくずリスト（すぐに認識できる方向およびナビゲーションデバイス）、またはBCCサイトのようにページの上部にあるグローバルナビゲーションメニューです。

パターンと学習可能性

新しいユーザーは、インターフェイスの操作方法をどれだけ簡単に学ぶことができますか？ 以前のものよりも大きなメリットがない限り、新しい方法を学びたいと思う人は誰もいません。それでも、テストされていない、型にはまらない相互作用が絶えず溢れています。

一般的なコンポーネントまたはパターンは、即座に学習可能です。 スプーンの使い方を学べば、いつでもスプーンの使い方がわかります。 自転車に乗ったり、スケートをしたりするのと同じです。ボタン、テキストフィールド、ドロップダウンメニュー、チェックボックス、ラジオボタン、スピナー、スライダー、アイコン、アコーディオン、検索ボックスなど、私たちが毎日使用するUIコンポーネントにも同じ構成が適用されます。

最高のインタラクションデザインは、車輪の再発明を試みませんが、新しい方法でパターンを効率的かつ効果的に使用します。

パターンは、学習可能性を促進するだけでなく、一貫性（上記で説明した別の原則）を提供し、物事がどのように機能するかについてのユーザーの期待に沿ったものにします。

視覚的階層と強調

サイトやアプリとのやり取り中に、人々は自分の検索に最も関連性のある情報を探しています。 視覚的な階層は、重要性を暗示する方法での要素の配置に関係します。 デザインの視覚的階層は、人間の目が見ているものを知覚する順序に影響を与えます。 すべてに等しい「重み」が与えられるわけではありません。 秩序は、知覚の分野におけるオブジェクト間の視覚的なコントラストによって作成されます。 視覚的なコントラスト（強調）は、サイズ、近接性、色、不透明度、および要素間の実際の色調のコントラストによって実現できます。

視覚的階層の力を過小評価しないでください。 それは、印刷デザインだけでなく、建築や工業デザインなど、あらゆる種類のデザインで非常に効果的に使用されてきました。 いくつかの素晴らしいポスターデザインをチェックしてください。 インタラクションデザインでこの手法をうまく使用すると、適切なものが適切なタイミングで適切な方法で表示されるように見えます。

優れたインタラクションデザイナーは、強調の力を利用して、魔法のように機能するように見える「無駄のない、平均的な」インターフェイスデザインを成功裏に実現します。

フィッツの法則

信じられないかもしれませんが、この法則は、人間の筋肉の動きと電信オペレーターおよび生産ラインのタスクパフォ​​ーマンスのターゲティングを調べた初期の研究から来ており、後にHCI（人間とコンピューターの相互作用）に適応しました。 基本的には、「ターゲットを取得する時間は、ターゲットまでの距離とサイズの関数です」と書かれています。

簡単に言うと、ターゲットがどれだけ遠く、どれだけ大きいか、そして他のターゲットとの関係でどれだけ近いかということです。 マウスの動きやタップは短い方が良いです。ターゲットが開始位置に近い場合は、ターゲットをクリックまたはスワイプする方が常に高速です。 また、ユーザーがUIを操作して画面を飛び回る必要がないように、関連するタスクも互いに近接している必要があります。

フィッツの法則は、ターゲットに移動して選択するのにかかる時間を正確に予測できます。 ターゲットは、ボタン、ドロップダウン、または画面上のその他のインタラクティブな要素にすることができます。 遠すぎたり小さすぎたり、クリック可能な要素が近すぎたりすると、UIの効率と使いやすさが大幅に低下します。

グーテンベルク図、ZおよびFパターンのレイアウト

これらのパターンは、コンテンツに応じてさまざまな状況に適用でき、主に欧米の視聴者によって使用されます。 グーテンベルクの図は、均等に分散された均質な情報（主にブログやニュースサイトなどのテキストを多用するサイト）を見るときに目が移動する一般的なパターンを示しています。 グーテンベルクの図は、強い休耕地と弱い休耕地が読書重力経路の外側にあり、何らかの方法で視覚的に強調されない限り、最小限の注意しか受けないことを示唆しています。

Zパターンは、文字Zの形状に従います。場合によっては、このパターンはジグザグパターンとも呼ばれます。 グーテンベルク図との主な違いは、Zパターンは、視聴者が2つの休耕地を通過することを示唆していることです。 それ以外の場合は、同じ場所で開始および終了し、途中を通過します。 グーテンベルクと同様に、設計者は最も重要な情報をZパターンのパスに沿って配置します。

Fは高速を表し、ユーザーがコンテンツを読み取る方法を示します。 Fパターンは、200人以上のユーザーがWeb上のコンテンツを読んでいることを記録したNNGroupの視線追跡調査によって普及しました。 人々のスキャンパターンは、多くの異なるタイプのサイト間でかなり一貫していることがわかりました。

何でこれが大切ですか？ たとえば、eコマースサイトでは、スキャンを最大化するために、Fパターンに従う方法で最も重要なコンテンツを配置したい場合があります。

想起ではなく認識

認識とは、出来事や情報をなじみのあるものとして「認識する」能力を指しますが、想起は、記憶から関連する詳細を引き出すことを伴う「認知的負担」です。 ユーザーが認識できるものを表示することで、アイテムを最初から呼び出す必要がある場合よりも使いやすさが向上します。

たとえば、UIでアイコンを使用すると、記号をすぐに認識できるため、強力です。 私たちの脳は、テキストを読むよりも約1000倍速く記号を処理（認識）します。 設計者がダイアログに標準の警告サインアイコンを表示すると、次のアクションが破壊的になる可能性があるため、すぐにユーザーに焦点を合わせて注意を向けさせます。 ただし、アイコンがユーザーに意味を思い出させて解読するように設計されている場合（たとえば、警告アイコンの代わりに手をかざすと）、UIの効率と使いやすさが低下します。

美的でミニマリストなデザイン

本質的でない部分を取り除くためには、製品の本質を深く理解する必要があります。 —ジョナサンアイブ。

これは難しいので、最も難しい原則の1つです。 デザイナーや製品マネージャーは、利用可能なすべてのオプションを太陽の下で追加し、ユーザーがたどりたい道を決定できるようにする傾向があります。 それは本当に怠惰なアプローチであり、不要な雑然とした製品につながります。

インターフェースは、ユーザーの目標とタスクをサポートしない不要な要素とコンテンツを取り除く必要があります。 設計者は、見た目に美しいUIを設計するだけでなく、ユーザーフローで画面ごとに情報を優先する必要があります。 視覚的な階層と強調の魔法を使用して、ユーザーがタスクを完了するために必要な本質的かつ絶対的な最小限の情報のみを提示する必要があります。

ミケランジェロは彼の作品について次のように述べています。「私は天使が大理石の中にいるのを見て、彼を解放するまで彫りました。」

ミニマリストで、見た目に美しく、シンプルなインタラクションを設計するには、デザイナーは、人々が製品を使用する瞬間に何が起こっているのかを正確に理解し、不要なものをすべて取り除く必要があります。 ユーザーが製品をどのように使用するかを理解するためにユーザーの詳細な調査とテストを実行することは、通常、最良のアプローチです。

エラー防止

ユーザーはタスクを実行するときに気が散ることが多いため、視覚的な強調、提案の提供、慎重に設計された制約の使用によって無意識のエラーを防ぐことが重要です。 エラー防止の形式（ポカヨケとも呼ばれます）は、プロセスがエラーを生成するのを防ぐためのフェイルセーフメカニズムの実装を指します。

エラーを防ぐための最良の方法の1つは、より良いメンタルモデルを設計することです。 設計者のモデルとシステムの動作方法の解釈がユーザーのメンタルモデルと一致しない場合、多くのユーザーの間違いが発生します。

標準の設計規則は、ユーザーが実行できるアクションを理解するのに役立つため、（上記の原則の1つ）に役立ちます。 Webサイトやアプリケーションを操作するユーザーは、他の何千ものサイトやアプリを使用しており、一般的なインタラクティブ要素が特定の方法で表示および機能することを期待しています。 製品がこれらの規則から逸脱すると、エラーが発生しやすい状況が発生する可能性があります。

エラーが発生する前に警告し、破壊的なアクションの前に確認します。 適切に実装されたエラーメッセージよりも優れているのは、最初から問題が発生しないように注意深く設計されていることです。 エラーが発生しやすい状況を排除し、それらをチェックし続けるようにしてください。

インタラクションデザインの未来

新しいデバイス、環境、およびインターフェースは、新しい相互作用の可能性とともに進歩し続けます。 ビデオゲームコントローラーは絶えず進化しており、さまざまな入力コントロールと触覚フィードバックを提供します。 ジェスチャインターフェイスは、2Dおよび3Dジェスチャ（たとえば、iOSおよびAndroidデバイスのジェスチャ）をサポートするタッチスクリーンから、3D空間での手のジェスチャを使用して、仮想現実空間、ゲーム機、および環境を制御できるIoTデバイスと対話するように成熟します。 。

GoogleのProjectSoliの場合と同様に、マウス、トラックパッド、ジョイスティックにさよならと言い、手と指を使ってデバイスを制御することで、より自然なジェスチャー操作に切り替えることができます。 特定の例（会話型UIなど）では、入力方法がキーボードから音声に変わる場合があります。 それでもなお、何らかの形（音声、触覚、視覚）での即時かつ継続的なフィードバックの原則が依然として必要です。

基本的なインタラクションデザインの原則は、将来のシステムの設計において常に中心的な役割を果たします。UX/UI設計者はそれらを念頭に置くことが重要です。 それらは厳格で迅速なルールではありませんが、より良く、より魅力的な製品やサービスになります。 成功した映画が、実績のある、昔ながらの構造に従った古代のストーリーテリング技術を使用しているように、正当な理由で存在するインタラクションデザインの原則があります。 それらに従うことは、使いやすさを改善し、製品の幅広い採用を促進することにより、製品設計者に利益をもたらします。

Toptal Designブログでさらに読む：

• 設計原則：階層の概要
• UIデザインのベストプラクティスとよくある間違い
• ゲシュタルトのデザイン原理を探る
• 情報アーキテクチャの包括的なガイド