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

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

「スターホースポケット」OKボタンはどこにあるのが良いのか。他社研究とユーザーテストの結果

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

 

 

OK、キャンセルのボタンの位置の話です。
 

f:id:appgameui:20190511090053p:plain

OKが左かー…

多くのアプリはiOSガイドラインに沿っているようなので、
OKが右に配置されがちです。

 

1:他社事例から学んでみる

まずは他社研究です。

参考までに最近プレイしてたタイトルから抜粋してみます。

f:id:appgameui:20190503151148p:plain

 

f:id:appgameui:20190317185939p:plain

f:id:appgameui:20190511105207p:plain

 

 

f:id:appgameui:20190511110850p:plain

 

f:id:appgameui:20190511110859p:plain

 

f:id:appgameui:20190511110914p:plain

f:id:appgameui:20190511110918p:plain

f:id:appgameui:20190511110922p:plain

こんな感じで、私がプレイした範囲のゲームだと右が多いです。

紹介した数は少ないですが今まで2000タイトル以上はプレイしています。
その体感として95%以上は右かなぁ、という印象です。

 

左にあるタイトルはPCゲーやCSからの移植といったケースもあるので、そういう事情のあるタイトルって傾向が強い印象です。


▼参考:りっくじあ~す。元はPCプラットフォームでリリース。

f:id:appgameui:20190511111619p:plain

この辺りはサンプル数が集まったら振り返ってみても良いかもですね。

以上が他社事例からのアプローチです。
次にデザインからのアプローチを考えてみます。

 

2:デザインから考えてみる

先ほどはクリエイター的なアプローチでしたが、
今度はデザイナーとして考えてみます。

 

なるべく主観をなくして客観的で合理的な判断をしたいところ。
いくつかネットでの記事を参考にしました。

 

【OKボタンはダイアログボックスの右側?左側?】適切なボタンの配置について考える|SeleQt【セレキュト】

> プライマリアクションを左側に配置しておくと、ユーザの視線が届きやすくなりますが、ユーザーの精神的なプロセスや固視に関してスピードを重視するときは、ダイアログボックスの右側にプライマリアクションを配置する方が効果的です

 

視線の流れを根拠にするパターンか…。
ユーザーがこの通りに視線を流しているか、というと割と懐疑的です。
何なら文章は読まずに、思い込みでボタンをタップすることもあると思うので、根拠としては弱いかな…。

 

-----------------------------

 

ボタンのラベルや配置順序のベストプラクティスとは | UX MILK

つまり、ほとんどのケースでプラットフォームのGUIガイドラインを従うべきですが、Webベースのアプリケーションとなると、あなたはどちらの配置がユーザーにとって最も最適か考える必要があり、それを知るためにはユーザーに向けてテストしていくしかありません。

 

確かにテストは大事だよね。偏りがなくなるのと、客観的なので良さそう。

 

-----------------------------

 

OKボタンの位置はどこが適切?

> 「左右分離した配置では右ボタンへ編重」という結果から、画面デザインにおいて、「肯定系・前進系のボタンを右端に独立して配置しておくと、ユーザは認識しやすい」と考えられる。
この考察を基にシステム運用側は、「ユーザを誘導したいボタンを画面右端に単独配置しておくと有効な手段となる」という画面設計の考え方が成立する。

※画面内での上下分離配置はテストしなかったため上下位置の関係については不明である。

 

で、テストした結果。テストの手法も大丈夫だと思う。
限定的にですが偏重が見られたので、こういうデザインにしました、は理に適っています。

 

 -----------------------------

3:まとめ

「他社事例とユーザーテストの結果、OKボタンは右に置く方が良さそう」

 

です!

 

もちろん、前提として、
・プラットフォームのガイドラインに則る
・破壊的なメッセージは例外
・上下に並べるデザインの場合はこの限りではない

 

など、妄信的に「OKは右!」とするのではありません。
ただ、他社事例とユーザーテストの結果、右に置く方が良さそう、という話です。

 

今回のスターホースポケットは、元はアーケードですが、UIもUXも異なっていたので別物として考えました。

そう考えた際に、OKが左にあるのは珍しかったので、考察のサンプルとさせていただきました。