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

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

「Auto Chess」アンチパターンがあるとアプリに対する信頼性が下がる気がするのは私だけ?

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

「Auto Chess」でフィルタのレイアウトで気になるところがありました。

 

グルーピングが出来ていない

気になるところですが、大きなところで言うとグルーピングです。

f:id:appgameui:20200114065114p:image

 

この個別のフィルタは以下のようなグループになっているのですが、一見してそれが理解できませんでした。

f:id:appgameui:20200115222127p:plain

 

この画面に必要な意識は「近接の法則」と呼ばれるものです。

例えば上のように枠囲うなり、背景に色を乗せるなどしてもよいですし、余白を設けて、罫線を引くだけでも十分グルーピングになりえます

f:id:appgameui:20200115224601p:plain

f:id:appgameui:20200115225202p:plain

ちょっとやるだけで直感的に分かりやすくなるので、この手間は惜しんで欲しくないな、と思います。

 

見出しが中央からズレている

見出しが寄っている気がして気持ち悪かったのでちょっと見てみます。

f:id:appgameui:20200114065114p:image

ガイドを引いてみるとやっぱりズレていました。

f:id:appgameui:20200115223438p:plain

 

拡大してみると文字中央が右に寄っていることが分かります。

f:id:appgameui:20200115223521p:plain

開発者はおそらくズレていることは把握していると思うのですが、それをそのままにしている運営の姿勢が気になります。

ズレていることに気付いていない場合はもう少しちゃんと見てほしいな、と思います。

 

デザインが不統一

アプリ全体で見るとデザインの不統一がありました。例えば下の二つのデザインと比較してみます。

f:id:appgameui:20200114064041p:image

f:id:appgameui:20200114072134p:image

  1. 見出しの濃さ
  2. 閉じるボタンの大きさ
  3. 見出しの装飾を文字に合わせて詰める
  4. 項目の文字サイズ
  5. ボタンの文字サイズ
  6. 枠の下の装飾の有無
  7. アクティブ時の文字色
  8. 項目の要素の文字の揃え方
  9. 翻訳文の不統一

以上が不統一が気になった部分です。

 

 

感想

  1. グルーピングしていない
  2. レイアウトのズレ
  3. デザインの不統一

以上がフィルタ画面のレイアウトで気になった部分です。

 

人によっては「指摘が細かすぎる」「機能に支障はない」という考え方をされるのかな、とも思います。

その線引きは人ぞれぞれの許容値があるので争いませんが、デザインの中にはアンチパターンと呼ばれるものがあることを知って欲しいです。

 

言ってしまえば「良くないデザインあるある」みたいなものなので、実装しているとユーザーに迷惑をかけるし、恥ずかしいというかダサいというか…「こうしてはいけないよ」という事例です。

 

ただ「絶対するな!」というものでもないように思います。

 

敢えてグルーピングをしないことでユーザーの思考をまとまらせないようにする。
敢えてレイアウトを崩すことで動きを表現する。

 

といったことも世の中にはあり、それらはアンチパターンではなくデザインの選択かなと思います。

今回の場合はデザインを採用する合理的な理由が欠けていたと感じたため、アンチパターンとさせていただきました。