あやね
評価UIは、決められた尺度の中から、利用者に1つの評価を選んでもらう仕組みです。回答を役立てるには、何を評価するのか、各段階が何を意味するのかを示し、選択途中と送信済みを区別する必要があります。星を並べるだけでは、見慣れた見た目でも、意図した質問とは違う回答を集めてしまうことがあります。
例として、サポートのやり取りの後に「この回答はどの程度役に立ちましたか？」と尋ねるヘルプセンターを考えます。利用者は5段階から選び、必要ならコメントを書いて送信します。別の場所には、過去の回答を集計した評価を表示します。PixsoのUIデザイン機能で、この2つを分けて設計しましょう。1人の評価を入力することと、多くの回答の集計を読むことは、別のタスクです。
星を選ぶ前に、質問を決める
「体験を評価してください」だけでは、対象が曖昧です。サポート担当者、返答の速さ、製品そのもの、元の問題が解決したかどうかなど、回答者によって判断が分かれます。この例で知りたいのは、特定の回答がどの程度役に立ったかです。
尺度のラベルも質問に合わせます。この例では、1 役に立たなかった、2 少し役に立った、3 ある程度役に立った、4 役に立った、5 とても役に立ったとします。同じ観点を順序立てて評価でき、途中で話題が変わりません。「遅い」「普通」「親切」を、同じ性質の程度を表す連続した選択肢のように混ぜないようにします。
5段階はこの例で選んだ方式であり、すべてのフィードバックに必要なわけではありません。役に立ったかどうかだけ分かればよいなら、「はい」「いいえ」で十分なこともあります。既に定義された調査尺度を使っているチームなら、見た目のバランスを理由に文言や段階数を変えず、その定義を保ちます。
質問するタイミングを選び、回答は任意にします。次のサポート操作を評価依頼で妨げたり、回答を読む前に評価を求めたりしないようにします。まだ助けが必要な人には、フィードバックとは別のサポート導線を用意します。
意味が伝わる見せ方を選ぶ
星はコンパクトで、商品レビューなどでは多くの人に親しまれています。数字なら順序が明確です。顔のアイコンは親しみやすく見えますが、感情、満足度、回答の有用性のどれを答えるのか、解釈が分かれる可能性もあります。
サポートの例では、5つの選択肢に言葉を添えると意味が明確になります。星を併記しても構いませんが、タッチ端末でも支援技術でもラベルを利用できるようにします。ホバー時にしか説明が出ないと、スマートフォンでは推測して選ばなければなりません。
両端のラベルしか置けない場合も、選択後にはその値の意味を示します。4を選んだ人には、色の付いた4つの星だけでなく、「4 — 役に立った」と表示します。スクロールしたり戻ってきたりしても回答の意味が分かるよう、質問文を尺度の上に残します。
飾りの星だけで編集可能かどうかが伝わるとは限りません。入力部分は操作できる見た目とフォーカス表示が必要です。読み取り専用の評価は、触ると自分の回答を上書きしてしまいそうなコントロールに見せないようにします。
未選択で始め、選んだことを明確にする
最初は何も選択しません。初期値を5にすると、本人が意図していない回答が生まれる可能性があります。中央の3も中立な初期状態ではありません。3は回答であって、未回答ではないためです。
未選択を明確に示します。入力欄の空の星は「まだ評価していない」を表せますが、0点と混同しないようにします。この5段階には0という回答はありません。質問を飛ばした人が低い評価を送信したことになってはいけません。
ポインターを4つ目の星に重ねると、4の見た目をプレビューできますが、確定した値はまだ変えません。外へ移動したら、以前の選択か未選択に戻します。クリックやタップで、画面上の選択を確定します。ホバー、キーボードフォーカス、選択済みの見た目を区別し、何が送信されるか分かるようにします。
この例では、選択だけで回答を送信しません。「4 — 役に立った」を選び、必要なら理由を書いて「フィードバックを送信」を押します。送信前は評価を変更できます。選択と同時に保存する方式もありますが、その場合は保存した値を明示し、訂正方法を用意します。星を押した時点で確定することを隠してはいけません。
マウスを使わなくても1つの評価を選べるようにする
1〜5の評価は、順序のある候補から1つを選ぶ操作です。W3Cの評価用ラジオグループの例（英語）では、アクセシブルな名前、キーボード選択、見えるフォーカスを示しています。動作を考える参考であり、そのまま本番実装の品質を保証するものではありません。
グループ全体には質問文を名前として関連付け、各選択肢には値と意味を付けます。「星」と5回聞くより、「4、役に立った」と聞く方が判断できます。最初の4つを塗りつぶす見せ方でも、4つの独立した選択ではありません。送信するのは1つの評価値です。
選択色の上でも確認できるフォーカス表示にします。黄色と灰色の差だけに頼らず、塗り、輪郭、文字、フォーカス枠を組み合わせます。高コントラストの表示でも意味が残ることを確認します。
狭い画面で5つの小さなタップ対象を飾りの帯に押し込めないようにします。操作できる領域を広げるか、ラベルを読みやすく保てる配置を選びます。折り返す場合も順序は明確にします。1〜3が1行目、4〜5が離れた場所にあると、簡単な質問でも理解しにくくなります。
短く答えたい人に余分な負担をかけない
評価を選んだ後、ほかに書きたいことがない場合もあります。調査上、本当に必要な場合を除き、コメントは任意にします。説明のない空欄より、「どのような回答なら、もっと役に立ちましたか？」のような問いの方が意図を伝えられます。
低い評価を選んだ人だけに、長い説明を書かせなければ回答を受け付けない設計は避けます。評価によって必要な手間が変わってしまうためです。追加質問を評価別に変えるなら、目的を明確にし、否定的な意見を送りにくくするために使わないようにします。
送信中も、選んだ値とコメントを残します。サービスが失敗を確認した場合は、「フィードバックを送信できませんでした。もう一度お試しください」と伝え、下書きを保ちます。結果が不明なら、保存できたとも消えたとも断定せず、サービスが対応できる方法で復帰できるようにします。
受信が確認できたら、「フィードバックを受け付けました」という簡潔な表示で十分です。編集できる場合は、送った個人の評価を示し、「フィードバックを編集」と表示します。回答の公開先や公開範囲を説明せずに、別の公開レビューへ転用してはいけません。
操作中の問題を自由に報告してもらいたい場合、点数が最適な出発点とは限りません。期待していたことと、実際に起きたことを尋ねる方法もあります。チームが対応に使える情報を得られる手段を選びましょう。
集計評価は背景が分かる形で表示する
読み取り専用の集計には、尺度と回答数を添えます。このデザイン例の5点中4.2点・128件の評価なら、部分的に塗られた星だけより多くの情報を伝えられます。これは過去の回答の集計を表す例であり、前述した1人の回答から導いた数字ではありません。
「評価件数」と「文章付きレビュー件数」を区別します。128件の点数があっても、コメントはそれより少ないかもしれません。点数だけの回答も含む数をレビュー件数と呼ぶと、詳細を開いた人の期待と食い違います。
まだ評価されていない対象には「まだ評価がありません」と表示します。0.0/5では、未評価なのに低い評価を受けたように見えます。同様に、1人の5点だけを大きなバッジにして、多数の支持があるように見せないようにします。
平均の根拠を判断する必要がある場合は、分布や個別の回答への導線を示します。同じ平均でも、評価の分かれ方は異なります。集計方法はラベルと一致させ、重み付け、除外、対象期間を設けるなら、読者に関係する範囲を説明します。
個人の回答と集計値も分けます。「あなたの評価：4 — 役に立った」を集計の近くに置いてもよいですが、別々のラベルで示します。1人が回答を変えたからといって、過去の平均全体が4になったような表示にしてはいけません。
Pixsoで入力と集計表示を並べて設計する
任意のサポート評価フォームと、読み取り専用の回答集計パネルの2つのフレームを作ります。フォームでは質問の下に5つの選択肢を順序どおりに置き、その下に任意コメント、最後に「フィードバックを送信」を配置します。集計側には4.2/5と128件の評価を示し、入力欄のようなホバー表現は付けません。
未選択、フォーカス中、選択済みの見た目を再利用できるように作ります。Auto Layoutで短いラベルと長い翻訳文を比較します。「4 — 役に立った」を選んだ画面と、未回答の画面を残し、空の状態が誤って初期評価にならないようにします。
回答に4を付ける、送信前に3へ変える、公開集計に何人が回答したかを調べる、という3つのタスクで確認します。何を評価する質問かも尋ねます。意図する対象は「この回答」なのに「サポート担当者」と答えられるなら、星の見た目を磨く前に質問文を直します。
コンポーネントの仕様には、尺度のラベル、選択と送信のルール、編集可能な状態、集計の表記を含め、開発に引き継ぎます。役立つ評価UIは、質問に答えやすく、結果を読み違えにくいものです。その区別を支えるために見た目を整えましょう。
