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

プレイしたゲームアプリの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:閉じるボタンをタップしないと閉じないパターン。

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

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

 

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

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