ウェブサイトのユーザーエクスペリエンス: ユーザーの成功した操作に対して肯定的なフィードバックを提供する

暑い日はカーテンを閉めて家の中にこもり、猫たちが楽しそうに遊ぶ様子を見ながらブログを書いています。この光景を見るとアラレちゃん一家を思い出します。草が緑で女の子が可愛い楽園の街へ連れて行ってください。

アフタヌーンティーのような短い記事で、運用上の対応、肯定的なフィードバック、ユーザーの満足度などについて書かれており、誰もが満足しています。プレッシャーを感じずに内容に入りましょう。

私たちは、ユーザーが何か間違ったことをしたときにそれを知らせたいと考えており、電話番号の形式が正しくなかったり、ログインに失敗したりといった、あらゆる種類のエラー メッセージを用意しています。しかし、ユーザーの成功したアクションに対して私たちは何をするのでしょうか? 彼らを祝福し、「あなたはうまくやりました」と伝える手助けをするのでしょうか?

肯定的なフィードバックは、ユーザー エクスペリエンスを向上させる重要な要素です。ユーザーが実行しているアクションが正しいことをユーザーに知らせることは非常に重要です。この記事では、肯定的なフィードバックがなぜ重要なのか、そしてデザイナーとしていつ、どのようにウェブサイトで肯定的なフィードバックを使用すべきかについて説明します。

ポジティブなフィードバックがなぜ重要なのか

なぜほとんどの人がタッチスクリーン デバイスの仮想キーボードを好まないのか疑問に思ったことはありませんか? 主な理由は、仮想キーボードが提供するフィードバックを物理キーボードと比較するのが難しいためだと考えられます。タッチスクリーン操作プラットフォームの設計者が最善を尽くしたことは否定できません。たとえば、物理的な質感の視覚効果、キーをタッチしたときのノック音効果、拡大されたポップアッププロンプトなど、これらのソリューションはユーザーの操作行動に一定の肯定的な強化効果をもたらしましたが、実際には物理キーがもたらす肯定的なフィードバック効果を実現することはできません。なぜなら、どうやっても仮想キーボードは物理キーボードのタッチ感覚をシミュレートできないからです。

これは迷惑でイライラする現実ですが、一方では製品に対する肯定的なフィードバックの重要性も示しています。仮想キーボードの場合、十分にリアルで強力な肯定的なフィードバックが不足しており、その結果、ユーザーはこの点で十分な満足感を得ることが困難になっています。

実際、ほとんどのユーザーは、自分のスキルが限られているためか、製品自体に問題があるためか、常に心から満足するのは難しいと感じています。彼らは何か間違ったことをしているのではないかと心配し、サイトが実際に自分たちの運用目標を理解しているかどうか疑問に思います。多くの場合、これはウェブサイトの仕組みをあまり理解していないためであり、その結果、何か問題が発生するとまず自分自身を責めてしまいます。

ポジティブなフィードバック メカニズムを通じて、ユーザーの懸念を徐々に払拭し、自信を高め、すべてが順調に進んでいると感じてもらうことができます。これは、コンピューティング デバイスを操作する能力に自信がないユーザーにとって特に重要です。実際、このタイプのユーザーは操作スキルが不足しているわけではないかもしれません。ただ多くの場合、システムから十分な肯定的なフィードバックが得られないため、自分の判断に疑問を抱き始めるのです。

ポジティブフィードバックの仕組みは、正しい操作を行った後のユーザーの体験満足度を向上させるだけでなく、不必要な懸念を払拭し、ユーザーが正しい操作を行った後にミスをしたのではないかと心配して以前の操作を取り消すことを防ぐことができます。オンライン ショッピングの取引プロセスを例にとると、ユーザーが注文を送信した後、システムの処理に時間がかかり、後続のページの読み込みが遅くなり、フィードバック プロンプトが表示されない場合、ユーザーは注文が正常に送信されなかったと考える可能性が高くなります。この場合、ページの読み込みプロセス中に「システムが注文を処理中です。お待​​ちください」と伝えるなど、ユーザーに肯定的なフィードバックを提供することで、ユーザーが知らないために「戻る」ボタンをクリックすることを防ぐことができます。

考えてみて下さい。もしユーザーが「混乱」や「疑問」のせいで、商品の選択や各種フォームへの記入など、ショッピングのプロセスをもう一度やり直さなければならないとしたら...それはとても苦痛でしょう。前のステップでの設計計画がどれほど優れていても、これだけではショッピングプロセス全体の体験満足度が大幅に低下し、ユーザーが離脱する可能性が高くなります。コンバージョン率はどうですか?

肯定的なフィードバックを要求するタイミング

ユーザーがコンテンツを入力する場所は重要なポイントです。登録、ログイン、購入、コメント、ステータスの更新など、データコンテンツとやり取りするすべてのインタラクティブリンクには特別な注意を払う必要があります。特に、ユーザー名、メールアドレス、パスワード、郵便番号などのフィールドについては、システムからの肯定的なフィードバックは、ユーザーのデータ操作スキルに対する疑問を払拭するのに役立ちます。

データ コンテンツの入力に加えて、リンクをクリックすることも重要なインタラクション ポイントです。よく注意してみると、今日のほとんどのウェブサイトでは、ユーザーがリンクをクリックしても肯定的なフィードバックが返されないことに気がつくでしょう。ユーザーがリンクをクリックすると、ブラウザ自体は確かにアドレスバーやタブバーの関連する変更を含む特定のフィードバックプロンプトを提供します。ただし、ユーザーがクリック操作を実行すると、注意はリンクの場所に短時間集中したままになります。そのため、リンク自体に特定の応答ルールを設定する方が効果的です。この点では、Smashing Magazine が良い例です。ユーザーがテキスト リンクをクリックすると、CSS の a:active ルールによってリンク テキストの背景色が赤に設定され、ユーザーはリンクを正常にクリックしたことを直感的に感じることができます。

フィードバックと注目の焦点が一致しないという問題は、リンクに限ったことではありません。多くの場合、ユーザーの操作によって別の場所のコンテンツやインタラクティブ要素が変更され、操作の結果がユーザーに無視されやすくなります。よくある例としては、商品をショッピングカートに追加するプロセスがあります。ここでは、ユーザーの注目は主に「カートに追加」ボタンとその近くの商品情報に集中するため、追加が成功したことを示す最も直接的で効果的なフィードバックも、ボタンの近くや商品画像上など、この場所に表示される必要があります。

距離は問題の 1 つの側面にすぎません。ユーザーのインタラクション動作によってインターフェイスの非常に細かい部分が変更される場合は、フィードバック距離が非常に近い場合でも安全であるとは言えません。この場合、ユーザーが最初に気付くように、視覚的に明確で目を引くフィードバックを提供するのが最適です。

ポジティブなフィードバックを実践する方法

ユーザーが間違いを犯した場合、通常はプロンプトとしてエラーメッセージが表示されます。同様に、これは肯定的なフィードバックにも有効なアプローチです。ただし、肯定的なフィードバックを提供するためにテキスト メッセージを使用する場合は、注意が必要だと思います。テキストを使用すると、ユーザーの注意がそらされ、読んだり考えたりすることになり、タスク フローのスムーズさが大幅に低下します。肯定的なフィードバックの役割は、ユーザーを妨げることではなく、ユーザーが大胆に前進することを奨励することです。

場合によっては、テキスト メッセージを使用して肯定的なフィードバックを提供することが非常に効果的です。たとえば、ユーザーが「カートに追加」ボタンをクリックした後、ボタンのタイトルを「追加を続ける」に変更できます。この変更により、一方では、ユーザーはフォーカスを移動することなく、以前の追加アクションが成功したことをすぐに知ることができ、他方では、ユーザーが関連する操作を続行するように促すこともできます。

視覚的なフィードバック

テキストの代わりに、グラフィック画像、スタイル、色、サイズなどの視覚要素の属性の変更を、肯定的なフィードバックの形としてより頻繁に使用できます。例えば、前述のリンクはクリック後に高コントラストの背景色を表示したり、フォームフィールドが正しく入力された後にその横にチェックマークアイコンを出力したりします。また、ページ上の特定の場所のコンテンツが更新されると、その部分を背景色で強調表示したりといったことも可能です。

もう一つの典型的な例は、マウス ポインターの状態の変化です。ユーザーがインタラクティブなインターフェース要素 (リンクやボタンなど) の上にマウスを合わせると、ポインターが手の形に変わることを期待します。システムがユーザーの期待に応えるフィードバックを提供しない場合、ユーザーは混乱する可能性があります。多くの場合、インターフェイス内のクリック可能な要素はリンクやボタンではありません。代わりに、JS の連携によってインタラクティブになります。この場合、マウスをリンクまたはボタン要素の上に置いたときにポインター状態をシミュレートできるように、スタイルシートで cursor 属性を手動でポインターに設定することを忘れないでください。

アニメーションによるフィードバックの提供

もちろん、アニメーション自体も視覚表現の一種です。最近では、多くのウェブサイトが、エラーが発生した場所にユーザーの注意を引くために、洗練されたアニメーション効果を使用しています。たとえば、WordPress 管理バックエンドにログインするときに、ユーザー名またはパスワードが間違って入力されると、フォーム全体が「揺れる」効果を示し、入力が間違っていることをユーザーに知らせます。同様に、肯定的なフィードバックにもアニメーション効果を使用できます。

一般的な例としては、ページ内でのアンカー リンク ジャンプがあり、これには、コンテンツを閲覧するために下にスクロールしたり、ページの先頭に戻ったりすることが含まれます。デフォルトでは、アンカー ジャンプにはアニメーション遷移効果がなく、ページは指定された位置に突然移動するだけです。最近では、スムーズなスクロール効果によるジャンプがますます多くの Web サイトで見られるようになり、ページが目的の場所に到達した後に特定のコンテンツが強調表示される Web サイトもあります。この変更により、インタラクション方法全体がユーザーにとってより直感的になり、インタラクションの結果をユーザーに明確に提示できるようになります。

ショッピング ウェブサイトで商品をショッピング カートに追加するインタラクティブなプロセスでも、アニメーション トランジション効果を使用できます。たとえば、ユーザーが [カートに追加] ボタンをクリックすると、ショッピング カートを表すインターフェイス要素が展開され、追加されたばかりの新しい商品が表示されたり、商品がアニメーション化されてショッピング カートに「飛んで」入ったりします。これらの方法により、ユーザーの注意を引き、操作が成功したという情報を正確かつ安全にユーザーに伝えることができます。

アニメーション化されたトランジションは、まだ十分に活用されていないフィードバック形式であり、より多くの製品で検討して実装する必要があると考えています。

効果音によるフィードバックの提供

iPhone や iPad をお使いの方は、テキスト メッセージやメールを送信した後の「シューッ」という音を楽しみにしていませんか? これは、サウンド効果を通じて肯定的なフィードバックを提供する良い例です。デスクトップ デバイスを使用する場合でも、モバイル デバイスを使用する場合でも、私たちは実際にサウンド フィードバックに大きく依存しています。たとえば、ボタンをクリックしたり、仮想キーボードをタップしたりすると、システムから発せられるリアルなサウンド効果により、自信を持って入力操作を続けることができます。

では、なぜ Web 上でオーディオフィードバックの使用が少ないのでしょうか? ファイル サイズの問題のほかに、他の理由があるのでしょうか?

おそらく、ウェブサイトで効果音を使うのが面倒すぎるからでしょう。かつては、大小さまざまなウェブサイトで退屈なオーディオループやバックグラウンドミュージックが使われ、中にはキャンセルできないものもありましたが、私たちは気にしていたでしょうか。とはいえ、過去には悪いビジュアルデザインやアニメーション効果が溢れていましたが、私たちは徐々にこれらの方法を改善し、適切な場所で使用してきました。

ウェブサイトの閲覧は通常デスクトップ デバイスで行われ、これは仕事でも通常使用するプラットフォームでもあるため、サウンド フィードバックを使用すると、ある程度の干渉が発生すると感じる人もいるかもしれません。しかし、ここで話題にしているサウンド効果は、実際にはオペレーティング システム自体の小さなプロンプト音と何ら変わりはありません。これらはすべて、インタラクション プロセス中にユーザーにフィードバックを提供するように設計されています。

サウンド フィードバックをトリガーするクリック アクションは、ユーザーがアクションを正しく効果的に完了したことを知らせるのに非常に効果的です。ショッピング Web サイトでは、ユーザーがショッピング カートに商品を追加するときに、レジを開くサウンド効果を最大限に活用できます。音声フィードバックは強力なコミュニケーション ツールですが、適切な場所で十分に活用されていません。

要約する

オーディオ、ビジュアル要素、アニメーション、テキストなど、ユーザーのインタラクションに対してより肯定的なフィードバックを提供することで、ユーザーの満足度が向上し、Web サイトでの目標達成に対するユーザーの自信と効率性が向上します。

この記事はもともとこのサイトでまとめられたものです。転載する場合は、次のことを明記してください: この記事はBe For Webから提供されています

翻訳者情報: c7210 - ユーザーエクスペリエンスデザインおよびコードプレーヤー。現在、Dianping.com の UED 部門で働いています。

原文: http://beforweb.com/node/98

元のタイトル: ウェブサイトのユーザー エクスペリエンス: ユーザーの成功した操作に対して肯定的なフィードバックを提供する

キーワード: ウェブサイト、ユーザー、経験、成功、運営、提供、肯定的、フィードバック、ホット、天気、ウェブマスター、ウェブサイトのプロモーション、収益