こんにちは！ちょこです！
このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。
今回は「トランスフォーマー：鋼鉄の戦士たち」から、強化アイテムを所持していなかった場合の画面デザインと導線の設置について紹介いたします。
多くのソシャゲではキャラクターを強化する機能が実装されています。
そういったわけで画面をデザインする際の参考になるかと思いました。
該当の画面はこちらです！
画面左側に強化するキャラクターが３Ｄで表示され…
右側にはキャラクターを強化するためのメニューが配置されています。
状況にあわせてデザインが変化していました
枠内あるのは強化アイテムです。
それらのアイテムとコインを消費してキャラクターを強化していきます。
強化アイテムが無ければ、そのアイテムを入手できる方法と導線が表示されるデザインになっています。
この辺りは言葉よりもアニメーションで見ると分かりやすいかと思います。
以下は強化アイテムとコインを消費して、キャラクターを強化する場面です。
画面右側を拡大してみます。
アイテムが消え、代わりに
オーア13がありません！
ミッションからもと獲得しましょう！『ミッションに進む』
というメッセージが表示されています。
このように状況にあわせてデザインが変化していました。
強化アイテムを入手するための導線を設置する考え方
ユーザーがこの画面に遷移する主な目的はキャラクターの強化です。
ですので、強化アイテムが不足していると目的が果たせません。
目的が果たせないとなると、ユーザーはストレスを感じます。
UIデザイナーとしては、どうしたらユーザーのストレスを抑えられるのか考える必要があります。
素直に考えるのであればユーザーの目的である、キャラクターの強化ができれば良いはずです。
その解決方法のひとつのアプローチとして、強化アイテムを入手するための導線を設置する考え方があります。
導線を設置することにより、ユーザーの手数や学習コストが抑えることができます。
うっかりすると忘れられがち
以上です。
強化アイテムがない時にどういった表示にするか、デザインを検討する段階で想定できていれば良いのですが、うっかりすると忘れられてしまうこともあります。
画面をデザインする際には
- どういった時にエラーになるか
- その時にユーザーが何を望むか
- どのような対応方法があると良いか
など、考えられると良いのかもしれません。
キャラクターを強化・育成する画面をデザインする際の参考になれば幸いです。
