レーティング
Rating
別名: 星評価、スターレーティング、評価スター、レビュー評価、Rating、Star rating
生態(さわってみる)
一言定義
星などの記号を並べ、段階的な評価を入力または表示するUI。
分類
使う場面
- 商品レビューなど、段階的な満足度を入力・表示したいとき
- 過去の評価の平均値を、記号でわかりやすく示したいとき
避ける場面
- 賛成/反対のような単純な二値の反応で十分なとき(→いいねボタン)
- 数値そのものが主情報で、記号による表現がかえって精度を損なうとき
近縁種との比較
いいねボタンが賛否や好意を単純なオン/オフのトグルで表明するのに対し、レーティングは段階的な満足度を複数値(多くは5段階)で表明する点で表現力が異なり、いいねボタンのavoidWhenが示す通り、賛成/反対のような意味のある評価を残したい場合はレーティングを使うべきとされる。レーティングは入力用途(自分が何点をつけるか)と表示用途(他者の評価の平均値を見せるだけの読み取り専用表示)の2つの役割を1つの見た目で兼ねる点も特徴で、実装上はradiogroupによる入力とテキストによる表示を明確に分ける必要がある。
近縁種
実例リンク
アクセシビリティ
- role
- 入力用は5つのradioをrole="radiogroup"にまとめ、それぞれに「1つ星」〜「5つ星」のアクセシブルネームを持たせる。読み取り専用の平均表示はフォーカス対象にせず、テキストとして数値情報を伝える
- キーボード操作
- 入力用radiogroupは矢印キーで選択肢間を移動し、Tabではradiogroup全体に1回だけ入るネイティブradioの標準動作に従う
- 補足
- 見た目は星の記号だが、読み上げは「5段階中3」のような数値情報として伝わるようにする。ホバーで一時的にプレビュー表示する場合も、確定値と混同しないよう視覚的に区別する