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

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

「ロックマンX DiVE」ラジオボタンとチェックボックスが同じ見た目で違う挙動のアンチパターン

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

 

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

 

今回は「ロックマンX DiVE」におけるチェックボックスラジオボタンが同じ見た目になっている事例をご紹介します。

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

 

この機能により以下の特徴があるように感じました。

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

 

ラジオボタンなどが利用されているのがこちらのソート画面です。

f:id:appgameui:20220523094323p:image

 

アニメーションで見るとこんな感じの挙動です。
ラジオボタンチェックボックスも同じ見た目ですが、それぞれ違う挙動をしていることが分かります。

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

 

GUIガイドライン紹介

チェックボックスラジオボタンガイドラインを紹介します。
プラットフォームによってガイドラインは異なりますが、ニールセン氏の紹介しているGUIガイドラインには以下の様なことが書かれています。

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

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

 

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

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

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

 

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

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

 

ラジオボタンチェックボックスのルールが混在している

ロックマンX DiVE」のソート画面の場合、ラジオボタンチェックボックスのルールが混在しています。
以下は武器のフィルタですが、見た目ではラジオボタンチェックボックスが区別できず、操作することではじめて理解することができるデザインになっています。

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

 

まずはGUIのルールを知るところから

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

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

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

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

などです。

 

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

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

 

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

 

まとめ

まとめると「ロックマンX DiVE」のチェックボックスラジオボタンが同じ見た目になっている事例について感じたことは以下の2点です。

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

 

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

 

以上です。

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

 

 

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

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

 


権利者さまへ

 

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

ロックマンX DiVE」のガイドラインを確認したところ、権利者のカプコン公式HPにて、SNSやwebサイトへのゲーム画像の投稿は許諾されている旨の記載がありました。

 

カプコンのゲームの画像を動画サイトやSNS・個人サイト等に掲載してもいいですか? (著作物に関するQ&A) | 株式会社カプコン : サポート

 

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

ご自身で撮影されたゲーム映像のスクリーンショットに関しては、動画投稿のガイドラインカプコン動画ガイドライン)に沿った内容であれば、使用していただくことが可能です。

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

 

以下は上記のQ&Aにて示されているリンク先の画面のキャプチャです。

カプコン動画ガイドライン(個人向け) | CAPCOM

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

【投稿できるもの】

  • PCのキャプチャーボード・PCソフト(Steamクライアントを除く)など、ゲーム機やゲームの機能以外を使用する場合は、「ご自身がプレイした映像を編集する」「ご自身のコメントを付ける」など、ゲーム映像に独自の付加価値を付けたもの

【投稿できないものの主な例】

4:タイトル個別でガイドラインを設けているタイトルはありますか?

現時点では、ございません。

 

10:ガイドラインの対象になるゲームソフトは何ですか?

機種にかかわらず、カプコンから発売されているゲームソフト(ゲームアプリも含む)全てが対象です。

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

 

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

 

お問い合わせ