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

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

「メギド72」同じアイコンのデザインで違う画面に遷移するのは良くないと思う

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。

 

同じアイコンなのに遷移先が違う箇所があります。

これ、初見だと混乱します。

 

 

慣れを期待しているのであっても、学習コストがかかるので良くないです。

f:id:appgameui:20190503132830p:plain

この画面。

 



こんな感じで遷移先が違います。

f:id:appgameui:20190503132542j:plain

アイコンのデザインを変える、というのはダメだったんだろうか…?

 


メギド、こんな感じでUIとしては疑問に感じる部分が多くあります。

 

ただ、何かしらの根拠があっての実装だと思うので、そういった根拠、理由は知りたいな、とは思います。

 

まとめ「同じアイコンのデザインで違う画面に遷移するとユーザーが混乱していまうので、良くない」

「メギド72」揃えられていないパーツがあると目立つので、細かくてもちゃんと揃えるのが大事

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。

 

この画面、キャラ名がズレてる気がしたので、確認してみました。

f:id:appgameui:20190503122640p:plain

 

 

f:id:appgameui:20190503122623p:plain

 

やっぱりズレれてた。

少し左に寄ってますね。

 

これ、開発の方は当然把握してると思うのですが、それでも直せない状況というのが悔しいな、と感じています。

 

UIってそんなに軽視されて良いものなんですかね。

 

チームで働く以上は、個人的な感情ではなく緊急度や優先度に則って判断し、対応するのが当たり前ですが、これを「緊急でない、優先度は低い」判断をされている状況が悔しいな、と。

 

こういう類のミスはシナリオなら誤字、声優なら誤読、イラストなら塗りミスに近いものだという感覚なので、直したい気持ちが強いです。
コンテンツの価値を下げるし、すぐ直せるし、ユーザーにも分かる範囲のミスなので、開発者の方が見てたら検討してほしいな…。

 

見落としてたならどんまいです。

 

まとめ

「揃ってないパーツがあると目立ちます。細かい部分でもちゃんと揃えるのが大事だと思いました」

「メギド72」ウィンドウを閉じる挙動のクセがすごい!

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。

 

今回は久々のアンチパターンです。

 

メギド72 なんですが、ウィンドウを閉じるときの挙動がバラバラすぎます…。
おそらく「画面にボタンは一つしか置かない」という信念が招いた悲劇。またはレギュレーションを決めていなかった。あるいは内部でも意見が割れているのか…。

もし完璧に遂行している状態だったらごめんなさい。でも、ダメだと思います。

どんなパターンがあるか順に紹介していきます。 

 

 

ウィンドウの上側、またはちょっと下側だと閉じれるパターン

f:id:appgameui:20190503121504j:plain

赤い範囲をタップすると閉じることができます。

 

▼gif

f:id:appgameui:20190503113804g:plain

 謎挙動。端末によっては範囲がズレるとかあるのかな。

 

 ▼gif

f:id:appgameui:20190503153050g:plain

他の画面を見てみると「キャラが装備できるアイテム」と「そうでないアイテム」とで挙動が違っています。

やばい…。

 

つぎ!

 

「閉じる」ボタンがあるパターン

f:id:appgameui:20190503130754p:plain

 

閉じるボタンがあると挙動が予想できるので安心します、ただ、ゲーム内と比較してすごく小さいので押しづらく感じます。

 

また、実装方法が違うのは分かりますが、デザインを変える必要はないと思います。デザイン違いすぎて別タイトルに見えます。

デザインと判定範囲をゲーム内のものと統一するのが無難かなと思います。

 

特殊パターン

▼gif

f:id:appgameui:20190503133905g:plain

ガチャ画面。実はガチャの種類によって挙動が異なっています。

 

画像部分をタップした際、「詳細を見る」のボタンがあると、ガチャ詳細に遷移するけど、

「詳細を見る」のボタンがなければガチャを閉じます。

こんなん誤タップするやん…。やーん…。

 

ルールとしては意味は分かるけど、「詳細を見る」の有無を把握してタップしないし、把握していたとしても文字列と判定の範囲が離れすぎてて関連性が分からないです。

また、どうやら判定としては「画像をタップする」みたいなので、下の方をタップすると、「詳細を見る」のボタンがあったとしても、ウィンドウが閉じます。

 

一部透過してる画像の範囲なんか正確に分からないです。

 


う~ん…複雑…。

言葉にしててかなり複雑な仕様なので、ほとんどバグみたいな挙動です。

 

 

次!

 

 

「OK」「キャンセル」があるパターン

f:id:appgameui:20190503144026p:plain

枠内、枠外を含めて「OKボタン以外を押すとキャンセル扱い」となり、ウィンドウは閉じます。

 

 

別パターン。

f:id:appgameui:20190503151148p:plain

 

同じに見えますよね…。

 

でも、こっちは枠内、枠外は反応せず。
処理を進めるためにはいずれかのボタンを押す必要があります。

 

このように同じデザインでも挙動が異なる画面が存在します。

 

…と、挙げればキリがないのですが、おおまかに

1:枠内をタップして閉じるor閉じないパターンの混同。
2:枠外をタップすると閉じるor次の画面に進むパターンの混同。
3:閉じるボタンをタップしないと閉じないパターン。

がこれにデザイン差分が混在していてがすごいことになっています。

ここまで混在しているのは初めて見たかも…。

 

まとめ
「閉じるの挙動が統一されていないと学習コストや誤タップのリスクがあり、ストレスを与えてしまいます」

やりたいことは分かるけど、それならきちんとやり切って欲しい。
現状だと、不統一がものすごいので開発者も何が正解か分かってないんじゃないかな…。

「アルケミアストーリー」会話シーンでキャラの視線が合うのが素敵

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。

 

「アルケミアストーリー」の会話シーンの紹介です。
キャラ同士の掛け合いの時に目線が合うのが結構良いと思うんです。

なんか「ちゃんとしてる」という印象。ソシャゲだとあんまり見たことなかったかも。 

 

相手が低身長だと目線は下に

f:id:appgameui:20190502131126p:plain

 

相手の身長が高ければ目線は上になります。

f:id:appgameui:20190502131131p:plain

 

 

 今のところストーリーはフルボイスだし、結構力入れてるのは伝わります。

 

 

追記

さらっと書いちゃったんですが、この「キャラ同士の掛け合いの時に目線が合う」という意識をもつというのは結構重要な要素だと思うようになりました。

以下詳細です。

 

ソシャゲの文脈としては2Dイラスト→Live2D→3Dという文脈が中心です。

 

2DとかLive2Dでの画面はこんな感じです。

f:id:appgameui:20190519115114p:plain

2Dなので左右反転ができない、反転差分の工数、容量の節約という事情もあり、
結果正面向きになります。

 

3Dも紹介しますね。

同じ3Dのミリシタだとこんな感じ。

f:id:appgameui:20190519112505p:plain

基本的にプロデューサーの方を向きがち。
目線はなんとなく話者の方向を向いているけど、顔が向いてなかったり身長差が考慮されていなかったりして、ちょっと固いなぁ、という印象を受けます。

 

ときめきアイドルもこんな感じの向きでした。

f:id:appgameui:20190519113252p:plain

アイドルの顔がなるべく隠れないように配慮しているのかな…。

 

 

これくらい向いてるとキャラ同士で会話をしている感じが出ます。

f:id:appgameui:20190519112556p:plain

 

 

それでもやっぱり身長差が考慮されていると雰囲気が全然違う。

f:id:appgameui:20190502131131p:plain

 

まとめ

「会話シーンでは話者の向きだけでなく、顔の位置も考慮したい」