ユーザーフィードバックにおいて重要な原則と実装手段

Mira Brody

Miraはモンタナ州のウェブデザイン会社JTech Communicationsのコピーライターおよび編集者です。

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。

User Feedback in UX (2017-01-12)

iPhoneの着信音を「オフ」にするとバイブレーションが振動します。これによって意図した行動が成功したことがわかるでしょう。では、「電話を切ってから、もう一度おかけ直しください。」という自動音声はどうでしょうか? 電話の応答を待っていたり、間違った番号にかけたりしたときの、あの悪名高い音声です。

AOLメールからの「メールを受信しました」というメッセージ。車のドアが開いたままだったときのけたたましい音。そしてPCゲームのソリティアでクリアしたときに画面いっぱいに流れるトランプ。

これらはすべてユーザーフィードバックの実例です。これらのフィードバックがなければ、毎日デジタルデバイスを操作する際に、非常に混乱してしまうでしょう。

これらのフィードバックの中には、実際には何の利益もない、ただの方法論のように思えるものもあるでしょう。しかしWebサイトをデザインするとき、関連性のある建設的なフィードバックを提供することは、それがどんなに些細な機能でも、ポジティブなユーザー体験を促進するために必要不可欠です。いかなる状況にあっても、悪質なフィードバックを与えていたり、大切なフィードバックが欠けていたりすると、ユーザーは不必要に混乱してしまうでしょう。

フィードバックの原則

ユーザーにフィードバックを提供するときは、ユーザーがフィードバックを受けるコンテキスト(文脈)を考えることが大切です。コンテキストの1つには、スクリーンのどこでフィードバックを表示するのかという物理的なコンテキストがあります。加えて、ポジティブなフィードバックを与えるのか、ネガティブなフィードバックを与えるのかという感情的なコンテキストも重要です。

物理的なコンテキスト

Webサイトにおいて、私たちは入力したものに対して何かしらの反応が返ってくることを期待しています。そのためフィードバックは、入力に応答したことがわかりやすい場所に表示することが重要です。たとえば、ショッピングカートにアイテムを1つ追加するとします。その場合、起こした動作の近くに「1つのアイテムがカートに追加されました!」という関連するフィードバックが表示されるべきです。ページとまったく関係ない場所で、静かにカートの合計を更新するのでは、何の利便性もありません。

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

物理的なコンテキストにおける、もう1つ便利なフィードバックの適用手段として、フォームを間違って入力したかどうかというものがあります。訂正が必要な項目それぞれに対して、一目でわかりやすいラベルや説明で表示することは、単にエラーが起こった場所をフォームに羅列するよりとても便利です。

エラーが発生すると、物理的なコンテキストを超えて予期せぬ結果を招くことがあります。そのとき、感情的なコンテキストを適切に利用することも、ポジティブなユーザー体験を生み出してブランドに長期的な印象を残すために重要な要素です。

感情的なコンテキスト

Webサイトのコンテンツを作る際、ときにはジェットコースターのように感情を乱高下させる必要があるかもしれません。ほとんどの場合、ユーザーに対して良い知らせを提供する一方で、計画通りに進まなかったことを伝えるフィードバックを与えなければいけない場合もあります。

特にクレジットカードの使用停止やシステムダウン期間の通知、法律問題などのエラーを表示する際は、常にある程度ユーザーに配慮の意思を示す必要があります。フライトがキャンセルになったことを、宝くじの当選を祝うときと同じ口調で顧客に伝えることはないでしょう。

IMDbの404ページでは、映画の名言を引用して何が起きたかをわかりやすく伝えています。

フィードバックの実行

ここで、私たちのWeb開発チームがプロジェクトで利用している中で、もっとも便利だと思うフィードバックの実装手段をいくつか紹介します。とても便利なので、私たちは実際にWebサイトを構築する際のフレームワークに利用しています。ユーザー体験のためになくてはならない存在であるだけでなく、顧客の関心や組織のブランド力への信頼、コンバージョンの件数を維持しつづけるためにも不可欠です。

ローディングインジケーター

何かをクリックしてもその反応がないことによるストレスは、接続が遅いほど顕著に表れます。このときローディングインジケーター(LSI)をデザインすることで、効果的に対処することが可能です。ローディングインジケーターは待機しているときに表示されるアニメーションで、ユーザーからのリクエストが進行中であることを伝えます。さらにローディングインジケーターはWebプロジェクトに応じてカスタマイズすることが可能です。

私たちはそれぞれのプロジェクトで、ローディングインジケーターのデザインを普段の業務に組み込んでいます。作業はブランドの特色やWebサイトのスタイルに応じて変わります。また、感情的なフィードバックのツールとして、ユーザーがトランジションをする瞬間にスムーズなアニメーションを用いることで、ユーザーに自然な感覚をもってもらうことができます。これによって、ユーザーが効率よく利用できるようにデザインしているのです。

あらゆるユーザーへのフィードバックに関して、ローディングインジケーターを活用する際には配慮が必要です。最低限必要な時間が経過する前にローディングインジケーターが表示されると、ユーザーの気を散らしてしまったり、動作がより遅く進行しているような印象を与えたりする可能性があります。よって私たちは、数百ミリ秒が経過したあとにローディングインジケーターを表示するようにしています。

プログレスバー

ファイルをダウンロードするのに数秒以上かかる場合、私たちはプログレスバーを利用します。プログレスバーはファイルのローディング状態に応じて更新されます。また、何らかの理由でローディングできなかった場合は、エラー表示でユーザーに問題が生じたことを通知します。

ユーザーへより良いフィードバックを提供するために、私たちのサイトではプログレスバーをさらに応用しています。古いブラウザでは、ユーザーはアップロードの進行状態を知ることができません。私たちは床屋のポールとしても知られるストライプのバーを使ってこれに対処し、進行していることを知らせます。ローディングインジケーターは、そもそもファイルのアップロードに特化して作成されるのです。

より新しいブラウザで閲覧するユーザーに対しては、アップロードの進行状態をオンタイムで示したり、ローディング中の画像のサムネイルを表示したりして、より多くの情報を提供します。また、大量のファイルをアップロードするときは、利用可能なアップストリーム帯域幅をすべてのファイルに分散させるよりも、ユーザーが進行状態を確認できるようにアップロード待ちのファイルの順番を表示しています。これらによって、意図した通りにタスクが進行していると、ユーザーに理解してもらうことができます。

ホバリング

初期のWebでは、どの部分がリンクなのかがとても明確でした。ロイヤルブルーの下線が引かれたテキストが、リンクを意味するほぼ共通のビジュアルパターンだったからです。しかし現在では要素のスタイルをカスタマイズするのが一般的なので、旧来のビジュアルパターンはあまり使われなくなり、かわりにマウスを使ったホバリングがフィードバックの方法として注目されています。

ホバリングは画像やテキストリンク、ボタンなどにカーソルを合わせたとき、その要素がインタラクション可能であることをユーザーに知らせます。

ホバリングは、インタラクション可能な要素であることをユーザーが理解するのに役立ちます。

しかしモバイルデバイスでは、ホバリングに欠点が生まれます。要素を起動するために、ユーザーは1回タップでホバリングをスタートさせて、2回目のタップで動作を実行しなければなりません。この場合では、フィードバックの回数が少ないほうが効果的です。

エラーメッセージ

状況に応じてどの程度の配慮が必要なのかを考えて、ユーザーの入力フォームに適切なエラーメッセージを表示することが重要です。入力フォームでのエラーメッセージには、要求されたフィールドに記入がない場合や、情報が正しく入力されていない場合のフィードバックなどがあります。

私たちは、ユーザーがそのフィールドから離れたらすぐにフィードバックを返しています。もし無効なメールアドレスが入力されたら、エラーがあったことを即座に知らせます。さらにユーザーを上手く誘導するために、私たちはフォームが送信されたら、最初にエラーが検出された場所までスクロールしてユーザーに表示しています。または、誤りがある要素に固定されたポップアップメッセージを表示して、入力間違いをユーザーが簡単に直せるようにし、不要なストレスを与えないようにしています。

フォームのラベル

私たちはユーザーが情報を入力する前から、多くのフォームに簡単なプレースホルダーラベルを設定しています。それによりユーザーがそのフィールドに何を入力するかわかるようにしています。

ユーザーが入力し始め次第、ラベルを隣接する位置に移動させて、その入力の目的が見えつづけるようにしておきます。これによって、ユーザーが長いフォームを入力したり途中で入力を妨げられたりした場合も、簡単に直すことが可能です。

結論

ユーザーが不満を持つことは、ユーザーとのインタラクションの満足度に対して深刻な影響を与えます。しかし、多くの場合は回避が可能です。デザインプロジェクトに正確なフィードバックを実装することで、コンバーションを確実に獲得できるだけでなく、企業のブランド全体に対する顧客の信頼を強固にすることもできます。

デザイナーおよびライターであるJosh Clark氏は、「私たちの仕事は、ユーザーの意思を行動に繋げる手助けをすることです」と書いています。インターフェイスを通してユーザーを誘導し、進行状態のわかりやすいフィードバックを提供することで、よりユーザーの不満が少なく、優れたユーザー体験を生み出すことができるでしょう。