こんにちは、ちょこきなこです。
UIって一貫性とか統一性って重視されますよね。「妖怪ウォッチメダルウォーズ 」のバトル中のバフ、デバフのアイコンでその一貫性に関する実例の参考になりそうな実装があったので紹介します。
実例は以下の2つの画面です。
雑魚のアイコンの位置
ボス戦はこんな感じ。
それぞれ拡大してみます。
こんな感じでアイコンの位置がHPゲージの上と下とそれぞれに配置されていて統一性がありません。
これを許容するかどうかですが、許容しない場合は以下のようなデメリットが考えられます。
敵妖怪に情報が被る
敵妖怪の3Dモデルとバフデバフのアイコンのグラフィックが被ります。敵妖怪にアイコンのグラフィックが被ってしまうとノイズになり、視界のストレスになってしまったり没入感を阻害してしまいます。
なので、被らないようにHPゲージの上に表示しているのだと考えられます。
視線の導線上の妨げになる
3DモデルとHPゲージの間にアイコンがあると視線を行き来する際に視界に入ってしまい、わずかながらストレスに感じます。
バフデバフのアイコンが視線導線上に入るストレスと、レイアウトの不統一によるユーザーの学習コスト増を比較した際に、前者のストレスの対処の方が優先度が高いと判断して不統一を許容したのだと考えられます。
アイコンはゲージの下にあった方が良い？
先に挙げた理由から不統一を許容するのは良いのですが、ついでにアイコンをゲージの上部か下部に配置するかも考えてみます。個人的には情報の優劣の点でゲージの下部にあるのが良いかなと思います。
顔アイコンとゲージは常時表示されている情報です。バフデバフは状況に応じて表示される情報が変わります。大事な情報はそれゆえに常に表示を求められます。安定しない情報は優先度が下がります。なので、ゲージよりも下部にあるのが良いと思いました。
まとめ
「妖怪ウォッチメダルウォーズ 」の事例でしたが、こういった実装もあるのだな、と勉強になりました。UIは統一性を重視するのですが、それはあくまで原則であって例外も柔軟に認めることもあるんですね。
