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

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

「アイドリッシュセブン」ラジオボタンとチェックボックスが混同されているUIデザイン

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

 

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

 

今回は「アイドリッシュセブン」こと「アイナナ」から、ラジオボタンの見た目でチェックボックスの挙動をするアンチパターンを紹介します。

 

アンチパターンである理由はいくつかありますが、以下の要素が関係していると考えます。

  • チェックボックスラジオボタンは挙動が違う
  • 挙動が違うのに見た目が同じだと、タップするまで挙動が予想できない
  • メンタルモデルが利用できず学習コストが高まる

とか。

部屋に例えるなら、押して開けるドアだと思ったら引き戸だった、とかでしょうか。

見た目と挙動が違っていたら誤操作にも繋がったり、アプリの信頼度が低くなるのでなるべく避けたいデザインだと考えます。

 

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

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

 

こちらはキャラクター画面のフィルタ画面です。
この中の「メンバー」「アピールスキル」を選択すると、さらに詳細を設定するダイアログが表示されます。

 

アニメーションで見るとこんな感じです。

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

ラジオボタンをタップしてダイアログが表示されるのは予想外の挙動でした。
しかも、特定の項目のみだと、初見では戸惑う挙動だと感じました。

 

メンバーの中のフィルタの挙動はこんな感じです。

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

アイドルの名前が一覧表示されており、アイドルの名前を複数選択できます。
ラジオボタンと同じUIパーツで、チェックボックスの挙動をしています。

 

 

チェックボックスのUIパーツは使われている

f:id:appgameui:20220825094707p:image

では、ラジオボタンチェックボックスを区別しないデザインなのかな、と考えたのですが、別の画面ではチェックボックスが使われていました。

 

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

既存のチェックボックスのUIパーツを採用するだけでより分かりやすいUIに繋がると思うのですが、何か実装上の都合があるのかな…。

 

 

以上です。

ラジオボタンの見た目でチェックボックスの挙動をするUIはしばしば見かけます。

メジャーなアンチパターンではあるので、できれば避けたいデザインだと感じます。

 

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

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

 


権利者さまへ

 

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

アイドリッシュセブン」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。

 

【2022.01.12追記】「アイドリッシュセブン」コンテンツ利用ガイドライン - 【公式】アイドリッシュセブン

 

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

(1)画像について

・コンテンツ内で使用している一次創作物は、過度の加工等を行わない限り、WebブログやSNSなどで私的利用範囲での掲載をいただいても問題ございません。
ただし、シナリオの過度なネタバレに繋がるものや、掲載の結果アイドリッシュセブンのイメージを逸脱・誤認させる、またアイドリッシュセブンのイメージを損なうことがないようご配慮ください。

イベントストーリー
過度なネタバレ(シナリオを丸ごと含む画像や動画配信など)は禁止といたします。

 

ラビチャ、RabiTV
ラビチャ、RabiTVについては過度なネタバレ(シナリオを丸ごと含む画像や動画配信など)はお控えください。

ただし、以下の範囲内に限り、ラビチャ、RabiTVの感想をSNS等で発信・発言いただけるものとします。
その場合は、ラビチャ、RabiTVの特性や未読の方へのご配慮をお願いいたします。

・感想を伝えることを目的とした発信が前提で、以下の掲載枚数に収まっていること

ラビチャ:通常画面表示で4枚まで、もしくは全画面表示で1枚まで
RabiTV:通常画面表示で4枚まで、ログ表示での掲載は禁止

※既定の枚数以内の場合でも、おおまかな内容がわかるような掲載は禁止いたします。
※動画の公開は禁止いたします。

 

 

アイドリッシュセブンのコンテンツ利用ガイドラインです。2022年1月12日更新版です

 

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

 

お問い合わせ