アプリゲームUIデザイン

プレイしたアプリゲームのUIデザインに関して、書き残しておこうと思います。毎日24時に更新!

「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. デザインの不統一

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

 

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

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

 

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

 

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

 

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

 

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

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

「Auto Chess」色覚対応が必要に感じる理由をC型(多数派の色の見え方)の人にも実感してほしい事例を集めてみました

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

 

「Auto Chess」に色覚対応のオプション設定が入っていたので、そういったリテラシーがあるのかと期待したのですが残念ながらそんなことなかった…。

一部ですが、文字がめっちゃ読みづらかったです…

1:ユニット詳細画面での事例

f:id:appgameui:20200113195220p:image

上の画面はいわゆるキャラ図鑑の中のユニットの詳細画面ですが、かなり見落としやすい実装があります。

 

こちら。

f:id:appgameui:20200115214531p:plain

この「Rare」という文字です。背景色とほぼ同色の文字色は流石に見落とします。

 

f:id:appgameui:20200113195220p:image

探そうと思えば見落とさないかもしれませんが、画面を切り替える中でふいに登場するので他に注意が向けられていると見落としがちです。

 

2:フィルタ画面での事例

次にこのフィルタ画面の例ですが…

f:id:appgameui:20200114065342p:image

 

この「全レアリティ」と言う文字が読めません。

f:id:appgameui:20200115215932p:plain

黄色は明るい色なのでその上に白い文字を使うと著しく視認性が悪くなります。

他の画面では以下のように見やすい実装もなされているので、開発者の中でも意見が分かれているのかもしれません。

f:id:appgameui:20200115220014p:plain

▲アクティブの文字色が黒い

 

 

3:図鑑画面の事例

図鑑でも左上にある数字が読みづらく感じます。

f:id:appgameui:20200114065402p:image

 

「★109/」の部分がオレンジ色になっています。これは図鑑の開放率を示す数字なのでユーザーに訴求したい情報です。

f:id:appgameui:20200115220623p:plain

だからこそ、他と色を変えてユーザーの注意を引こうとしたのだと考えられます。

 

事例紹介を振り返って

以上の3つ例を紹介して実感されたかもしれませんが、視認性が低い文字に関しては

「何か書いてあることに気付く」⇒「何が書かれているのか理解する」⇒「それが重要な情報かどうか判断する」

という思考のステップを踏みます。

このステップがあることによってストレスに感じてしまいます。

 

開発者からすると「こんな軽微なものいつでも直せる。それよりもバグの対応をするほうが良い」と思っているかもしれませんが、ユーザーはそう思いません。

 

ユーザーからすると「開発者はこれが読みづらいと感じないのか?」というストレスと開発者への強い不信感を抱き、サービスの信頼も失います。

そしてこの軽微な修正のコストを惜しむような開発者は大きなコストも惜しみます。

つまり、この軽微な調整は長らく放置され、最終的にはこれを気にしないユーザーだけが残り、問題は消え去ります。

 

 

大事にしたいこと

この実装例から学びたいこととしては、

  • P型、D型、T型などのC型以外のユーザーは常にこういった見づらさを感じていることを改めて知ること
  • 細かい調整コストを惜しむとユーザーの信頼を失う可能性に繋がるので、そのコストは惜しんではいけないこと

…です。

 

もしこのゲームの開発者がこのテキストを読んでいたら、今一度優先度を考え直して欲しいな、と思います。

今回あげた箇所に関してはいずれの対応もそう大きく時間はかからないこと、一度修正したらバグと違い再発しないこと、そしてそういった細かい調整がユーザーの信頼感に繋がることをお伝えしたいです。

「永遠の七日」その選択肢が選ばれている割合を表示する機能の紹介

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

 

「永遠の七日」で他のユーザー達が選択した選択肢が見れる仕様になっていたのが興味深かったです。

 

 

f:id:appgameui:20200115134507p:plain

こんな感じで選択肢が表示され、

 

 

f:id:appgameui:20200115134420p:plain

右上にある「ヒント」のボタンを選ぶと…

 

f:id:appgameui:20200115170447p:plain

このように他のユーザーが選んだ選択肢の割合が表示されます。

 

流れで見るとこんな感じです。

f:id:appgameui:20200115134308g:plain

 

メインシナリオを周回するのがこのゲームの大きな特徴なのですが、こういった仕様があることによって、1度目は王道のシナリオ、2回目は少数派といったこともできます。

多くのソシャゲのストーリーはスキップ機能があり、周回する必然性もないのでスキップされがちですが、こういった選択肢を用意統計を取ることによって、いつもと違ったユーザー体験を与えることが出来るのかもしれません。

 

コンシューマーではしばしば見かけましたが、ソシャゲでは初めて見たので選択肢として紹介させていただきました。

 

 

「永遠の七日」図鑑画面に遷移する時、手持ちのキャラのグラフィックが表示される

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

 

「永遠の七日」の図鑑画面に遷移する演出が特徴的でしたのでご紹介させていただきます。

 

ここから遷移して…

f:id:appgameui:20191230163716p:plain

f:id:appgameui:20200115011528p:plain



 

この画面が挿入され…

f:id:appgameui:20191230122712p:image

 

画面遷移が完了します。

f:id:appgameui:20191230163824p:plain


流れで見るとこんな感じです。

f:id:appgameui:20191230163618g:plain

 

イージングの詰めと、演出に奥行きがあると更に良くなりそうですが、実に独特な演出だと感じました。

徐々に仲間が増えていくと、思い入れのような感情を抱いたり、全員のグラフィックを見ることになるので手持ちのキャラクターの把握に繋がります。

こういった遊び心に類する実装は必然性が乏しいことが多いのですが、ゲームにおいてはとても大事なUI/UXだと思うので積極的に紹介したいな、と思います。