ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「ブレイブリーデフォルト ブリリアントライツ」ラジオボタンとチェックボックスの見た目が同じなので、見た目だけでは操作が予測しづらい件

こんにちは!ちょこです!

 

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

 

今回は「ブレイブリーデフォルト ブリリアントライツ」、通称「BDBL」から、UIパーツの使われ方のアンチパターンをご紹介します。

 

ラジオボタンチェックボックスの見た目が同じなので、操作する時にどのような挙動になるか推測できずにストレスに感じます。

 

該当の画面はこちらです。

f:id:appgameui:20220518094930p:image

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

翻訳された文章ですが、GUIガイドラインには以下の様なことが書かれています。

標準的な形状のものを使うこと。チェックボックスは、選択したときチェックマークか X が中に示される、小さな四角であるべきだ。ラジオボタンは、選択されたとき塗りつぶした円が中に表示される、小さな円であるべきだ。

チェックボックス 対 ラジオボタン – U-Site

 

また、マイクロソフトガイドラインにもラジオボタンチェックボックスの見た目のサンプルが掲載されています。

ラジオ ボタンのガイドライン - Windows apps | Microsoft Docs

チェック ボックス - Windows apps | Microsoft Docs

 

多くのユーザーはこれらの標準的なUIで学習してきている可能性が高いため、ゲーム独自のルールを取り入れるメリットはかなり弱いかと考えます。

ビジュアル面で世界観を取り入れるのは良いものの、UIのルールを変えてもゲームの面白さに直結せず、むしろ無駄な学習コストをユーザーに課してしまうので、ストレスを与える懸念があります。

f:id:appgameui:20220518094919p:image

 

しかも、ラジオボタンチェックボックスは近くに配置されることも多いため余計にユーザーの混乱を招きかねません。

 

具体的には以下は武器のフィルタですが一見すると区別できない見た目になっており、操作することではじめて理解することができるデザインになっています。

絞り込みのタブはチェックボックスの挙動になっています。
複数の項目が同時に選択可能です。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

並び替えのタブはラジオボタンの挙動になっています。
常にいずれか一つしか選択できません。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

UIパーツの挙動には基本的なルールがあります。

一部の例外がリリースされ、広がってしまった結果、ユーザーの認知コストや学習コストが増してしまいます。
ルールの不統一ということでブランドイメージも弱くなってしまうことも懸念されます。

ルールを守るメリットですが、例えば以下の3点を挙げてみます

  1. ユーザーのメンタルモデルが利用できる
  2. ユーザーの学習コストが抑えられる
  3. 実装する際に詳細な指示書を用意しなくても認識が合わせられる

などです。

 

ゲームがより面白くなったり、ユーザーのストレスが減らせるのであればルールを守らなくても良いこともあります。 

ルールを絶対視してしまうと、デザインの拡張性も失われてしまいます。

 

ただ、必然性がないのであれば余計なことはしない方が良いのかな、と思います。
基本的なUIパーツのルールの挙動や取り扱いのルールには気を付けたいところです。

 

まとめ

まとめると「ブレイブリーデフォルト ブリリアントライツ」のUIパーツのルールについて感じたことは以下の2点です。

  1. ラジオボタンチェックボックスの見た目が同じであるため、操作が予測しづらくストレスに感じる
  2. 独自の見た目であるためメンタルモデルがはたらかず、学習コストが増加する

UIパーツの挙動のルールについてはデザイナーよりもエンジニアの方が深く理解しているケースもあります。

相互に知識を補って、アンチパターンになりそうなデザインがあったら相談すると良いのかもしれません。

 

他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。

 

以上です。

ラジオボタンチェックボックスを利用するデザインをする際の参考になれば幸いです。

 

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

© SQUARE ENIX CO., LTD. All Rights Reserved.
記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

ブレイブリーデフォルト ブリリアントライツ」のガイドラインを確認したところ、公式HPにて、SNSやwebサイトへのゲーム画像の投稿は許諾されている旨の記載がありました。

 

GUIDELINE |【公式】ブレイブリーデフォルト ブリリアントライツ (BRAVELY DEFAULT BRILLIANT LIGHTS) | SQUARE ENIX

 

主な参照箇所を抜粋します。

【利用いただけるもの】
ガイドラインに従い利用いただけるもの(以下「利用対象」といいます)は、以下のとおりです。

  • 以下に記載の本ソフトの公式サイトおよび当社が運営する以下のサイト内に掲載されているテキスト・情報・画像・動画
    https://www.jp.square-enix.com/bdbl_SP/
  • 本ソフト内に表示されるテキスト、ゲーム中で撮影されたスクリーンショット、およびゲーム内で撮影された動画

【利用条件】

  • 掲載・配信に際して、以下の権利表記を表示してください。

    © SQUARE ENIX CO., LTD. All Rights Reserved.
    記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ