コンポーネント
評価(レーティング)
Rating
評価とは、星などのアイコンを並べ、そのうち何個を選んで点数をつける入力方式のことです。
3 / 5
星にカーソルを合わせるとプレビュー、クリックで確定します。
定義
レーティングは、星のようなアイコンをいくつも並べ、そのうち何個を選ぶかで点数を つける入力方式です。もっとも見慣れた形は五つの星で、マウスを星の上に乗せるとその 位置まで先に塗られ、どの点数になるかをプレビューしてくれます。実際にクリックすると、 その値で点数が確定します。乗せて見るプレビューと、押して決める確定を分けておくのが レーティングの特徴です。点数をつけるための入力としてだけ使われるわけではなく、 すでに集計された平均評価を見せるだけの表示専用としてもよく登場します。この二つは 目的がはっきり違うので、押せるのか押せないのかをユーザーが迷わないよう、見た目の 時点で区別してあげる必要があります。
なぜ重要か
レーティングが大切なのは、複雑な評価をたった一つの単純な操作に圧縮してくれるから です。ユーザーは長い文章を書かなくても、星を数個押すだけで満足度を表現でき、参加の ハードルが大きく下がります。そうして集まった評価は、ほかのユーザーにとっては選択を 支える確かな判断材料になります。私たちは知らない商品やコンテンツを選ぶとき、まず平均 の星の数と評価件数をざっと眺め、信頼できるかどうかを素早く判断します。つまり レーティングは、片方では手軽な表現手段であり、もう片方では圧縮された信頼情報でも あって、少ない手間でサービス全体に価値あるデータを積み上げてくれる、小さくても 影響力の大きい要素です。だからこそ、正確に、そして正直に扱うことが重要になります。
よくある間違い
- ホバー時のプレビューと、クリックによる確定を区別していないケースです。マウスを 乗せただけで点数が決まってしまったり、逆に押しても何も変わらなかったりすると、 ユーザーは自分が何点をつけたのか確信が持てず戸惑い、望まない値が残る失敗に つながります。
- 表示専用の評価を、入力できるように見せてしまうケースです。押せそうな星を押したのに 何も起きなければ、壊れていると誤解されてしまいます。
- 一度つけた点数を取り消したり、つけ直したりする方法を用意しないケースです。誤って 押してしまったユーザーが値を直せないと、次からは評価そのものを残さなくなります。
実務のヒント
- 乗せて見るプレビューと、押して決める確定をはっきり分けましょう。プレビュー状態と 確定状態を色や塗りで違って見せると、押し間違いが減り、ユーザーは自分の選択に確信を 持てるようになります。
- 点数を見せるだけの表示用と、実際に入力を受け付ける入力用をはっきり区別しましょう。 表示専用なら、カーソルの形や大きさで押せないという印象を与え、ユーザーがつい押して みて反応がないと慌てる事態を防ぎます。
- アクセシビリティのために、星のアイコンとあわせて数値も提供しましょう。星五つ中 四つのように文字でも読めれば、スクリーンリーダー利用者に役立つうえ、0.5刻みの 評価も表現でき、検索や並べ替えにもその値をそのまま活用できます。