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

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

「妖怪三国志 国盗りウォーズ」チェックボックスとラジオボタンの使い分けを正しく理解されるためには何が必要なのか…

こんにちは、ちょこきなこです。

 

妖怪三国志 国盗りウォーズ」にて、チェックボックスラジオボタンのUIパーツの使い方が混在しているアンチパターンがあったので、紹介します。

 

f:id:appgameui:20190908154424g:plain 

 

f:id:appgameui:20190901174600p:image

こっちはラジオボタン。複数選択できません。

 

f:id:appgameui:20190901174552p:image

こっちはチェックボックス。複数選択可能です。

 

 

あまりにも頻繁に見るアンチパターンなので、そんなにこだわらなくても良いのかな、って気持ちになってきました…。なんというか、日本語の誤字、誤用も認知、定着したらOKじゃない?的な。 

 

いや、たぶん気のせいなんですけどね…!

 

どういった実装なのか

さて、どういった実装になっているのか紹介します。
「ならびかえ」の方は複数選択不可で、単一の項目しか選べません。

f:id:appgameui:20190908172051p:plain


「しぼりこみ」の方は複数選択可です。

f:id:appgameui:20190908172241p:plain

見た目が同じで、挙動が違うと操作してみるまで何が起きるのか分からないデザインになるので、きちんと分けた方が良いです。

 

お手本は?

お手本としてはこの辺かな…

f:id:appgameui:20190908190715p:plain

ときめきアイドル

ラジオボタンチェックボックスが明確にデザインが分けられているので分かりやすい。

 

 

f:id:appgameui:20190908190737p:plain

f:id:appgameui:20190908190744p:plain

ダンまち~メモリア・フレーゼ~

ラジオボタンは通常のボタンと同じデザインを採用していますが、複数可能なボタンはチェックボックスを取り入れています。

 

 

上記と比較すると、デザインが分けられていないのは、やはりちょっとストレス…。

f:id:appgameui:20190908172051p:plain

 

どういう挙動になるのか操作してみないと分からない

 

まとめ

UIは色んな職種で作り上げていく、ということに対して異論はないのですが、まだまだ理解されていないことも多いのかな、と思っています。

実装コストをかけるなら、なるべくユーザーにストレスが無い、良いUIを実装して欲しいな、と思います。 

 

 過去にも同じような記事を書いてます。

appgameui.hatenablog.com