複数の事例を用いたウェブサイトのフィードバックインタラクションデザインに関する簡単な説明

優れたデザインは生活から生まれます。ですから、生活から始めましょう。私たちはユーザーの生活シナリオに合わせて製品を設計します。ユーザーの使用習慣を改めて養う必要はありません。ユーザーは初めて製品を使用するときに目標を達成でき、他の人からの指導は必要ありません。たとえば、Apple が第 1 世代の iMac を設計していたとき、ジョナサンと彼のチームは日本を訪れ、一貫した透明感を維持しながらキャンディー カラーのコンピューター ケースを製造する方法について日本のキャンディー業界の人々に相談しました。

以下では、Web サイト デザインにおけるフィードバック インタラクション デザインの重要性について説明します。その前に、関連する概念を理解する必要があります。

フィードバックとは何ですか?

Wikipedia からの説明: フィードバックは、フィードバックとも呼ばれ、現代の科学技術の基本的な概念の 1 つです。一般的に言えば、サイバネティクスにおけるフィードバックの概念は、システムの出力を入力端に戻し、何らかの方法で入力を変更することで、システムの機能に影響を与えるプロセスを指します。つまり、適切な検出装置を介して出力を入力端に戻し、入力と比較するプロセスです。

インタラクションデザインとは何ですか?

インタラクション デザイン (インタラクティブ デザインとも呼ばれる、略称は IxD または IaD) は、人工システムの動作を定義および設計する設計分野です。アーティファクトとは、ソフトウェア、モバイル デバイス、人工環境、サービス、ウェアラブル デバイス、システムの組織構造などの人工オブジェクトです。インタラクション設計とは、アーティファクトの動作（「インタラクション」、つまりアーティファクトが特定のコンテキストでどのように応答するか）に関連するインターフェースを定義することです。 インタラクション デザイナーは、まず関連分野と潜在的ユーザーに関するユーザー調査を実施し、成果物の動作を設計し、有用性、使いやすさ、感情的要素の観点から設計品質を評価します。

上記の概念を組み合わせると、フィードバックとインタラクションとは、問題が発生したときに警告を表示するだけでなく、適切なフィードバックとプログラムとのインタラクションを通じて、常に何が起こっているかをユーザーに知らせることを意味するとまとめることができます。ここでは、フィードバックをポジティブフィードバックとネガティブフィードバックの 2 種類に分けます。ウェブサイトのユーザーにとって、フィードバックはプロンプト情報の一種です。アカウント登録時にユーザーが間違った情報を入力したときのプロンプトから、正常にログアウトしたときのプロンプトまで、これらはすべてフィードバックベースのインタラクティブ デザインのカテゴリに分類されます。ホームページ

フィードバックインタラクションデザインはとても重要です

人生におけるいくつかのシナリオを想像してみましょう。地下鉄に乗っていて乗り換えが必要だとします。この時点で地下鉄に乗り換え標識がなければ、どの方向に行くべきか判断するのは非常に困難です。どのチャンネルが正しい乗り換えチャンネルなのかわからず、混乱してしまうことは非常に簡単です。地下鉄の建設者は、各乗り換えチャネルに目を引くプロンプトテキストを追加しました。これにより、どのチャネルが正しい乗り換えルートであるかが非常に明確かつ直感的にわかるようになりました。

（ロンドン：地下鉄が看板に置き換えられる）

オンライン ショッピングの取引プロセスを例にとると、ユーザーが注文を送信した後、システムの処理に時間がかかり、後続のページの読み込みが遅くなり、フィードバック プロンプトが表示されない場合、ユーザーは注文が正常に送信されなかったと考える可能性が高くなります。この場合、ページの読み込みプロセス中に「システムが注文を処理中です。お待​​ちください」と伝えるなど、ユーザーに肯定的なフィードバックを提供することで、ユーザーが知らないために「戻る」ボタンをクリックすることを防ぐことができます。

（ウェブサイト上のショッピングカート）

ソフトウェアのインストールを例に挙げてみましょう。一般的に、ソフトウェアのファイルはサイズが大きく、インストールファイルの読み込み時間は少し長くなります。ソフトウェアのインターフェースにはフィードバックプロンプトがありません。このような状況にいると想像してみてください。人々をイライラさせたり不安にさせたりするのは非常に簡単です。その理由は、ソフトウェアのインストールプロセスがユーザーによって支配されているからです。ユーザーは自分の目的を達成するためにソフトウェアをインストールします。このとき、インターフェースにはプロンプトがありません。ユーザーは突然コントロールを失い、目的が中断され、完了できなくなります。この時点で、ユーザーはソフトウェアを閉じて再インストールします。長時間応答がない場合、ユーザーは終了することを選択します。

これらの問題を回避または完全に解決するにはどうすればよいでしょうか。先ほど、「正のフィードバックと負のフィードバック」という 2 つのメカニズムについて説明しました。インストール プロセスのインターフェイスにインストール進行状況バーを追加し、値と進行状況が同時に変化して、ユーザーの制御範囲から外れないようにすることはできますか。たとえば、電子メール フォームのアカウント番号が正しく入力されると、インターフェイスはユーザーにチェック マークのプロンプト ステータスを表示します。これを正のフィードバックと呼びます。

(Photoshop インストール進捗バー)

（シリアル番号が正しく入力され、チェックマークがステータスを促します）

ポジティブなフィードバック メカニズムを通じて、ユーザーのこうした懸念を徐々に払拭し、自信をつけさせ、すべてが順調に進んでいると感じさせ、間違いを犯したのではないかと心配して正しいことをした後に以前のアクションを取り消してしまうことを防ぐことができます。これは、コンピューティング デバイスを操作する能力に自信がないユーザーにとって特に重要です。実際、このタイプのユーザーは操作スキルが不足しているわけではないかもしれません。ただ多くの場合、システムから十分な肯定的なフィードバックが得られないため、自分の判断に疑問を抱き始めるのです。私たちは、これら 2 つのメカニズムを使用して、大規模ユーザーと小規模ユーザーの両方の懸念を和らげたいと考えています。

負のフィードバックメカニズムの例をいくつか挙げる前に、シナリオを想像してみましょう。上記のケースを続けると、ソフトウェアのインストール後に、入力したシリアル番号が仕様を満たしていないことが通知され、以前に入力したシリアル番号は保存されていないため、再入力する必要があります。ユーザーは、無駄な作業をしてしまったため、この時点で非常にがっかりするでしょう。実際、ユーザーがシリアル番号を入力している間に、リアルタイムでシリアル番号を照合することができます。シリアル番号が間違っている場合は、エラー プロンプトを通じて、入力したシリアル番号が間違っていることをユーザーに伝え、ユーザーが時間内にエラーを修正できるようにする必要があります。 。

ネガティブフィードバックのメカニズムを通じて、ユーザーの誤った操作を正確に削減し、誤った操作をユーザーに最初に通知し、タイムリーに修正して、ユーザーの入力が Web サイト自体の運用ニーズを満たすようにすることもできます。すべてが順調に進んでいるとユーザーに感じさせることは、インターネットの熟練ユーザー、一般ユーザー、初心者ユーザーにとって特に重要です。熟練したユーザーは、Web サイトの使用に慣れています。通常、テキストの説明やヘルプは読まず、Web サイトを通じてできるだけ早く目的を達成したいと考えています。たとえば、データのダウンロードなどです。

フィードバックインタラクションデザインの優れた例

正のフィードバックメカニズム

ユーザーがデータコンテンツとやり取りする場合、登録、ログイン、検証、転送、Weibo でのコメントなどの肯定的なフィードバックが必要です。特に、ユーザーが取引に決済商品を利用する場合、ユーザーが入力した情報が規制に準拠しており、正確であることを確認する必要があり、ユーザーに対して正しいガイダンスを提供する必要があります。

(Google 登録フォームのプロンプト)

リンクの移動: ウェブサイトの製品機能の違いにより、ページ全体が 1 つの画面に表示されます。視覚的なエクスペリエンスに影響を与えずに、特定のモジュールを弱めたり強化したりする必要があります。例えば、ウェブサイトのフッターはユーザーのクリック率が比較的低いため、表示を弱めます。マウスが商品モジュールに移動すると、モジュールの色が濃くなります。この点では、Twitter が良い例です。デフォルトのフッターは灰色で、メイン コンテンツの邪魔になりません。ユーザーがこのモジュールにマウスを移動すると、システムはユーザーがフッターを通じて Web サイトの関連情報を知る必要があると判断し、テキスト領域の色値が灰色から黒に変わります。視覚的なプレゼンテーションの点では、肯定的なフィードバックはユーザー エクスペリエンスを次のレベルに引き上げ、さらに大きな牽引力を与えることができます。

ボタンのツールチップの状態: コンテンツが空の場合のクリックできないボタンの状態と、コンテンツがあるボタンの状態の違い。ボタンが灰色になっており、コンテンツを投稿できません。

（Google Plusは現在コンテンツを公開できません）

（コンテンツがある場合はボタンが点灯し、正常に公開できます）

読み込みプロセス: 下に引っ張って自動的にページをめくる機能により、さらにコンテンツが読み込まれます。「読み込み中...」という文字が表示されない場合は、表示中のコンテンツが読み込み中であり、しばらくお待ちくださいとユーザーに通知します。ユーザーが混乱する前に、自分の操作が間違っていると誤解し、以前の操作を簡単に元に戻してしまうことがよく起こります。 Google Plus は、テキスト プロンプトに加えて、読み込みボールに動的な効果を追加して、待機中のコンテンツが読み込まれていることをユーザーに通知します。

(Google Plus読み込み中にボールに水が入った効果)

(リンク: ユーザーがクリックしたリンクのステータス)

負のフィードバック機構

人生において誰もが間違いを犯します。重要なのは、その間違いをどう修正するかです。ウェブサイトのユーザーにとって、同じ間違いを繰り返さないように間違いを修正するのを支援することも同様に重要です。上記のテキストでは、負のフィードバックメカニズムとしてシリアル番号の例を示しました。これをより徹底的に理解してもらうために、ここでさらにいくつかの例を示して印象を深めたいと思います。

テキストが 140 文字を超えた場合のプロンプト テキスト: たとえば、Twitter にコンテンツを投稿すると、TWITTER はすぐに赤いマイナスの数字を使用して、超過した単語数を表します。ボタンは灰色になり、クリックできなくなります。時間内に削除していただければ幸いです。

(Twitter テキストがプロンプト状態を超えています)

(豆板: 非準拠フォームフィールドのプロンプト)

フィードバック インタラクション デザインでよく使用されるいくつかの方法:

インタラクティブデザインにおけるフィードバックを提供するために視覚を活用する

インターフェースの視覚的な表示と視覚要素の属性を変更して、フィードバックの表現型を変更できます。たとえば、マウスが画像内を移動したときにフローティング レイヤーを追加したり、スタイルを変更したり、画像選択効果を追加したり、ページの色やサイズを調整したりすることで、肯定的なフィードバックを実装できます。先ほども述べたように、リンクをクリックする前と後の背景色はコントラストが高くなります。 Google プラスの読み込み中に水を注入するプロセス、またはユーザーが登録中に正しい情報を入力したときに表示されるステータス プロンプト アイコン。もう 1 つの例は、Twitter のフッター モジュールです。マウスを入力すると、テキストの色が変わり、強調表示されます。

たとえば、非常に典型的な例は、マウス ポインターの状態の変化です。オペレーター（ユーザー）がテキストを入力できるテキスト領域にマウスを移動すると、ポインターが I 記号に変わり、テキストを入力できることを示します。もう 1 つの例は、マウス ポインターの状態の変化です。ユーザーがリンクやボタンなどのインタラクティブなインターフェイス要素にマウスを合わせると、ボタンが手の形になり、リンクが手の形になり、フィードバックを追加してリンクとテキストの違いをユーザーに知らせるための下線が表示されます。システムがユーザーの期待を満たすフィードバックを提供しない場合、ユーザーは混乱したり困惑したりする可能性があります。

アニメーションを使用してフィードバックを提供する

実はアニメーション自体が視覚表現の一種です。例えば、WordPressの管理バックエンドにログインする際、ユーザー名とパスワードが間違っていると、ログインボックスのフォームに揺れる効果が表示されます。ユーザー名またはパスワードが間違っているというメッセージが表示されます。アニメーションの視覚的なパフォーマンスに応じて、アニメーション効果をフィードバックにも適用できます

たとえば、アンカーリンクがページ内でジャンプする場合、システムのデフォルトの状況では、アンカーリンクジャンプにはアニメーション遷移効果がなく、ページはアンカーポイントで指定された位置に突然移動するだけです。しかし、最近では、ユーザーエクスペリエンスに重点を置いた多くの優れたWebサイトで、スムーズなスクロール効果を備えたリンクジャンプを見ることができます。一部の Web サイトでは、ページが目的の場所に到達した後に、アンカー ポイントで指定された場所が強調表示されます。この微妙な変更により、ユーザーとのやり取り全体がより直接的になります。同時に、インタラクションの結果をユーザーに明確に提示することができます。

全文の要約:

たとえば、記事の 3 番目の段落には、「フィードバックとインタラクションとは、何か問題が発生したときに警告を表示するだけでなく、適切なフィードバックとプログラムとのインタラクションを通じて、常に何が起こっているかをユーザーに知らせることを意味します。フィードバックは、一時的に肯定的なフィードバックと否定的なフィードバックの 2 種類に分類されます。Web サイトのユーザーにとって、フィードバックはプロンプト情報の一種です。ユーザーがアカウントを登録するときに間違った情報を入力したときのプロンプトから、正常にログアウトしたときのプロンプトまで、すべてフィードバック インタラクション デザインのカテゴリに分類されます。」と記載されています。肯定的なフィードバックと否定的なフィードバックを通じて、現在何が送信されているかをユーザーに明確に知らせることができますか? ユーザーの疑問を払拭し、できるだけ早く目標を達成できるようにしながら、Web サイトをより使いやすく、ユーザーフレンドリーにします。