アプリゲームUIデザイン

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

「CUE!キュー」戻るボタンのレイアウトに関して使いづらいと感じた3点

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

 

CUEの戻るボタンの位置が直感的でなく、不便に感じました。以下で理由を説明します。

f:id:appgameui:20191103141754p:image

 

f:id:appgameui:20191112133402p:plain

画面右上の戻るボタン

 

小さくて隣のボタンの距離も近いので雑に押そうとすると誤タップしやすいです。また誤タップしないように意識するだけでストレスになります。

 

f:id:appgameui:20191112133859p:plain

SEMAI☆

 

慣れもあるのかな、と思ってしばらくプレイしてみましたが、結局慣れず…。

f:id:appgameui:20191112072633p:image

RANK52はぼちぼちちゃんとやってる方だと思う 

 

 

さて、今回の戻るボタンのストレスの原因を整理すると以下のようになります。

 

1:ボタンの位置

2:ボタンの大きさ

3:ボタン同士のマージン

 

それぞれ補足します。

 

1:ボタンの位置に関して

ボタンの位置に関しては学習コストが必要になるので出来れば画面左上など、ユーザーのメンタルモデルを利用するのが良いかな、と思います。

何かしらの根拠か強い信念があってこの位置に配置してあるっぽい気はしますが…ちょっと分からず。

◆他のゲーム

 

2:ボタンのサイズに関して

ボタンのサイズに関しては物理的な問題で、ユーザー側の慣れでは解決しない部分です。

戻るボタンは比較的よく使うボタンですし、画面によってはホーム画面へ戻る導線が無く、戻るボタンでしか画面遷移出来ないケースもあります。

 

具体的にはガチャ画面とイベントガチャの画面です。

f:id:appgameui:20191112073211p:image

ガチャ画面

 

f:id:appgameui:20191112073239p:image

イベントガチャ画面

 

特にイベントガチャ画面はイベントトップの画面を経由して遷移するので、ホームに戻るまでに二手必要です。他画面同様にホームボタンがあれば一手で済むのですが…。

 

こういった画面では戻るボタンを押すしかないので、ストレスのかかる行為を強要させられてしまうという点で更にストレスに感じました。

 

他の画面のボタンも小さめです。

f:id:appgameui:20191112143447p:image

f:id:appgameui:20191112143520p:image

f:id:appgameui:20191112143525p:image

 

じゃあ、どの程度のサイズが適切かというと、最小サイズは1cm程度とされています。

ただ、もう少し補足すると想定ターゲットの小指の爪のサイズを目安にするのが良いのかな、と思っています。

この方が数字で覚えるより感覚的に理解できるため、非デザイナーの方にも伝わりやすいと考えています。

 

3:ボタン同士のマージンに関して

ボタンのサイズが小さくてもマージンが十分に取れていれば、多少ストレスは軽減します。

 

「CUE」はどちらかというと男性がターゲットのアプリです。
男性の指は女性の指より太いので考慮してほしいところ。

 

まとめ

以上のように、戻るボタンに関してボタンの位置、ボタンサイズ、ボタンのマージンがストレスに感じた原因でした。

ゲームのシステムや攻略方法など必要な部分に学習コストを払うのは構わないのですが、戻るボタンのような操作系にはあまり学習コストを払いたくないな、と感じました。