ユーザーエクスペリエンスにおけるユーザーフィードバック

iPhoneの呼び出し音スイッチを「オフ」に切り替えた後に発生する安心感のある振動について考えてみてください。そうすれば、意図したアクションが正常に実行されたことがわかります。 悪名高い傍受音声についてはどうでしょうか。「電話をかけたい場合は、電話を切ってもう一度やり直してください。」 電話回線をぶら下げたままにしたり、間違った番号をダイヤルしたりしたときは？

AOLメッセージからの歓迎の「あなたはメールを持っています」。 車のドアを半開きにしたときの甲高い音。 ソリティアのゲームに勝った後、コンピュータ画面を埋め尽くすデジタルカードのカスケードでさえ。

これらはすべてユーザーフィードバックの例であり、それがなければ、日常のデジタルアクションの多くは非常に混乱します。

これらのいくつかは私たちには過度に系統的であるように思われるかもしれませんが、建設的で関連性のあるフィードバックを提供する能力は、どんなに微妙であっても、ウェブサイトのデザインでポジティブなユーザーエクスペリエンスを促進するために不可欠です。 どのような状況でも、悪いフィードバックの適用、または有用なフィードバックの欠如は、不必要な混乱にエスカレートする可能性があります。

フィードバックの原則

ユーザーにフィードバックを提供するときは、ユーザーがフィードバックを受け取っているコンテキストを考慮することが重要です。 これには、物理​​的なコンテキストが含まれます。画面のどこにフィードバックを提供していますか？ –そして感情的な文脈–あなたはポジティブなフィードバックを提供していますか、それともネガティブなフィードバックを提供していますか？

物理的コンテキスト

ウェブサイトが私たちの入力に応答することを期待しているので、このフィードバックが明白な場所で提供されることが重要です。 たとえば、アイテムがショッピングカートに追加された場合、関連する入力（1つのアイテムがカートに追加されました！）は、アクションが発生した場所の近くに提供する必要があります。 ページのまったく異なる部分でカートの合計を静かに更新することは、あまり役に立ちません。

REI.comは、ドロップダウンメッセージを提供することにより、「カートに追加」アクションが成功したという物理的なフィードバックを提供します。

コンテキストでのユーザーフィードバックのもう1つの便利なアプリケーションは、フォームへの入力中に誰かがミスをした場合です。 フォームの上部または下部にすべてのエラーのリストを単に提供するよりも、必要な修正ごとに明確な視覚的なラベルと説明を提供する方がはるかに役立ちます。

エラーには、物理​​的なコンテキストを超えた影響があります。感情的なコンテキストを適切に使用することは、ポジティブなユーザーエクスペリエンスを作成し、ブランドの印象を持続させるためにも同様に重要です。

感情的な文脈

Webサイトのコンテンツを作成することは、感情的なローラーコースターになることがあります。 多くの場合、良いニュースを提供していますが、他の状況では、計画どおりに進まなかった何かについてフィードバックを提供することを余儀なくされています。

エラー状態、特にクレジットカードの拒否、ダウンタイムの通知、法的ポリシーにはすべてある程度の共感が必要です。懸賞に当選したことを祝福するために使用するのと同じトーンでフライトがキャンセルされたことを顧客に通知することはありません。君？

IMDB 404ページには、何が起こったのかを理解するのに役立つ一連の映画をテーマにした引用が用意されています。

フィードバックの実装

これが私たちのウェブ開発チームが私たちのプロジェクトに含めるのに最も役立つと思ういくつかのフィードバックの実装です。 実際、非常に便利なので、それぞれがWebサイトを構築するフレームワークに適用されます。 これらは、ユーザーエクスペリエンスだけでなく、顧客の注目を維持し、組織のブランドを信頼し、コンバージョン数を増やすためにも不可欠です。

負荷ステータスインジケータ

何かをクリックしても反応が見られないというフラストレーションは、接続が遅い場合に最も顕著になり、待機中にアニメーション化して要求が進行中であることを示す負荷ステータスインジケーター（LSI）を設計することで効率的に対処できます。 さらに良いことに、LSIはWebプロジェクトごとにカスタマイズできます。

プロジェクトごとに、ブランドの色とWebサイト全体のスタイルに固有のLSIを設計することを標準的な方法にしています。 このデザインはまた、感情的なフィードバックツールとしての使用を促進します。これは、ユーザーの移行の瞬間に落ち着いた感覚を誘発するスムーズなアニメーションです。

すべてのユーザーフィードバックと同様に、LSIのアプリケーションには注意が必要です。 かなりの時間が経過する前に負荷ステータスインジケータが表示された場合、気が散ったり、進行が遅いという印象を与える可能性があります。 このため、数百ミリ秒が経過した後にのみLSIを表示します。

プログレスバー

ファイルの処理に数秒以上かかる場合は、プログレスバーを適用します。 プログレスバーはファイルの読み込み時に更新され、問題が発生した場合は、何らかの理由でアップロードが失敗した場合にエラー状態を提供することでユーザーに警告します。

より良いユーザーフィードバックを提供するために、サイトのプログレスバーを段階的に強化しています。 アップロードの進行状況を検出できない古いブラウザを使用しているユーザーのために、何かが起こっていることを示すストライプバー（バーバーポールとも呼ばれます）を提供します。基本的には、ファイルのアップロード専用のLSIです。

ユーザーが最新のブラウザを使用している場合、アップロードの実際の進行状況の更新、画像のアップロード時のサムネイルの提供、追加のファイルのキューなどの詳細情報を提供します。これにより、多数のファイルをアップロードした場合でも、ユーザーは進行状況を確認できます。利用可能なアップストリーム帯域幅をすべてのファイルに分散させるのではなく。 これらの手がかりは、タスクが意図したとおりに進行し、機能しているというユーザーの信頼を高めます。

ホバーイベント

Webの初期には、リンクが何であるかは明らかでした。 そのロイヤルブルーの下線付きのテキストは、ほぼ普遍的な視覚パターンでした。 要素のカスタムスタイルが現状になったことで、この視覚的なパターンは薄められ、ホバーイベントはマウスを使用するユーザーにとって便利なフィードバックツールになりました。

画像、テキストリンク、ボタンなど、カーソルを置いているものを操作できることをユーザーに警告します。

画像ホバーイベントは、ユーザーが要素を操作できることを理解するのに役立ちます。

ただし、モバイルデバイスでは、ホバー状態は不十分です。 要素をアクティブ化するには、ほとんどの場合、ユーザーは1回タップしてホバーイベントをトリガーし、次に2回タップしてアクションを実行する必要があります。フィードバックが少ない方が役立つ場合です。

エラーメッセージ

状況に応じた感度のレベルに応じたテキストを使用して、ユーザー入力フォームにコンテキストに適したエラーメッセージを提供することが重要です。 これらの入力フォームには、必須であるが入力されていないフィールドや、正しくフォーマットされていない情報に関するフィードバックが含まれています。

フィールドを離れるとすぐにフィードバックを提供するため、無効なメールアドレスを入力すると、エラーが発生したことを即座に警告します。 ユーザーをさらにガイドするために、フォームが送信されると、最初のエラーが発生したページ上の場所にユーザーをスクロールし、場合によっては、エラーのある要素にポップアップメッセージを修正して、ユーザーが間違いを簡単に見つけて修正できるようにします。不必要な欲求不満を排除します。

フォームラベル

多くのフォームでは、ユーザーが情報を提供する前に単純なプレースホルダーラベルを提供しているため、ユーザーはそのフィールドの目的を認識しています。

次に、入力を開始したら、ラベルを隣接する位置に移動して、長いフォームに入力したり、タスクの途中で中断したりした場合に情報の目的が保持されるようにして、再開しやすくします。

結論

欲求不満は、満足のいくユーザーインタラクションのキラーであり、多くの場合、回避可能です。 デザインプロジェクトに適切なフィードバックを実装することで、成功するコンバージョン率を確保できるだけでなく、顧客が会社のブランド全体に対して感じる自信を固めることができます。

デザイナー兼作家のジョシュ・クラークは、次のように適切に書いています。 」インターフェースを通じてユーザーをガイドし、ユーザーの進捗状況について明確なフィードバックを提供できるほど、成功率が高くなり、フラストレーションが少なくなります。