【1作目アップデート計画】#8 ヘッダーのデザインを改善

【1作目アップデート計画】記事一覧

【1作目アップデート計画】前回の記事

これまでのヘッダー

これまでのヘッダーはこんな感じでした。

まず左側、パズル番号とパズルのタイトルを表示する部分。

まずパズル番号ですが、これは不要なのではないかと思ったので削除しました。
パズルのタイトルのみを表示するように変更。

次に右側が、左から「答えを見るボタン」「リトライボタン」「ポーズボタン」。

これがかなりUXの悪いものになっていました。

動画広告を見ると答えが見られる仕組みになっているのですが、動画広告を見ていない状態で「答えを見るボタン」を押すと、このようになります。

答えを見ようとすると、「ポーズ画面の答え解放ボタンを押して動画広告を見てね」というアラートが表示されます。

これはわざわざアラートを出さなくても、その場で動画広告を見せれば良いのではないでしょうか。
（動画広告を見るか確認するダイアログを挟むのが最も親切）

一手間かけさせるのはストレスにもなりますし、動画広告の視聴率も減少しそうです。

これまでのボタンは、アイコンをそのまま表示しただけのものであり、ボタンかどうかが判別しづらい表現方法でした。

プレイヤーには「これはボタンで、押すことができる」というのを伝える必要があります。

そこで、このようなデザインに変更しました。

ボタンの形自体はパズルのパネルと同じものを使って統一しつつ、よりボタン感を出すためにパネルよりも少し影を濃くしました。

これをパズルと少し離れたヘッダー部分に配置することによって、99.9%の人がボタンだと認識できるかと思います。

前回の記事で述べた「クリアウィンドウは必要か？」に引き続き、設定ウィンドウ（ポーズウィンドウ）も必要か考えてみます。

結論から言うと、このゲームでは必要ないと考えました。

これまでポーズボタン押下時に表示されていたウィンドウはこちら。

相変わらずダサい背景なのは置いておいて、まずアイコンが分かりづらいですよね。

左から「ウィンドウを閉じる」「ステージ選択に戻る」「動画広告をみて答えを開放する」ボタン。

このぐらいの内容だったら、ウィンドウを表示しなくても良いと思います。

最近流行っているハイパーカジュアルのオプションボタンを見てみてください。

ウィンドウは特に出ず、オプションの内容がその場で表示されて操作できるようになっています。

下は一斉を風靡したVoodooハイパーカジュアルゲーム「Dune!」のオプション表示アニメーション。

これも参考にしながら、ヘッダーとオプションのデザインを改善したものがこちら。

半透明黒の背景は入れるべきか悩んだのですが、展開されたオプションボタンとパズルが被ってしまうことも考えられるので、最終的に半透明黒でオーバーレイすることにしました。

もちろん半透明黒の部分をタップしても、オプションは閉じます。
こういう細かなインタラクションが大事。

また、ボタン押下時にボタンのアイコンを回転させるアニメーションを実装しています。

かなり細かい部分ですが、これをやるだけで少しプレイヤーに「おっ」と思わせることができると思います。

さらに、アイコンだけでは内容が分かりづらいと思ったので、素直にテキストを追加しました。

無理にアイコンのみにこだわって伝わりにくくなるよりは、素直に文字で表示するべき。

それと、これまでは「答えを見る」ボタンと「答えを開放する」ボタンがあったのですが、それを「答えを見る」ボタン1つに統一。

一度動画広告を見たパズルは再度広告をみなくても答えが表示できるようにしたかった、という意図がこれまでの「答えを開放する」という操作に繋がっていたのですが、これを「毎回動画広告を見せる」という仕様に変更しました。

二度同じパズルを解くことはあまりない想定なので、まあストレスにはなりにくいかなと判断。