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

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

「きららファンタジア」チェックとタブのデザインが同じなのが分かりづらい。挙動が違うデザインは見た目にも差をつけて。

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

 

「きららファンタジア」にて、チェックボックスとタブのデザインが同じなので、見た目から予測される挙動が分かりづらいと感じました。

 

f:id:appgameui:20190519223003p:plain

ちょっと分かりづらいデザインですが、上の段はタブの挙動で、下の段がチェックボックスの挙動です。

 

それぞれのパーツの挙動の違いですが、タブは複数選択できません。チェックボックスは複数選択可能です。

このように名前で定義するとそのパーツの振る舞いも定義できますが、見た目が同じですと見分けがつきません。

人は初めて見るものに対して知識や経験に基づいた予測や推測で物事を認識します。ですので、同じ見た目であれば同じ挙動をするものだ、という認識をします。

その後、触ってみて挙動が予想と違った場合、その事を学習します。

 

タブであればタブのメンタルモデルを利用したデザインにすると、ユーザーの学習コストが下がります。

なので、操作する前に見た目で分かるようにデザインに差をつけてあげると「どんな挙動かな」と悩まずに済みますので、触る前の心理的な負担が減ります。

 

 

まとめ

挙動が違うなら見た目も変える。その際はパーツにあるメンタルモデルを利用すると良いです。

 

「テラウォーズ」ショップバナーの事例紹介。分かりやすさを大事にしよう。

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

 

 

今回は「テラウォーズ 」のショップのバナーデザインについて書いてみたいと思います。ちょっと見た感じ分かりづらく感じたんですよね… 

 

 

早速ショップ画面の訴求画像を見てみます。

f:id:appgameui:20190702235442p:image

ぱっと見のショップのちぐはぐ感…。

 

 

ポップアップを開くとこんな感じです。

f:id:appgameui:20190702235451p:image

先ほどの賑やかさとは変わって、落ち着いたデザインになっています。

 

 

 

ショップの下の方はこんな感じ。

f:id:appgameui:20190702235557p:image

f:id:appgameui:20190702235610p:image

色数、フォントの種類の多さなど、情報量が多く、他画面の世界観から外れてしまっているように見えます。

「これも世界観です」と言ってしまうことも可能ですが、厳しい…。

 

見てて思ったのですが、
これ…、オススメだけあとで強引に追加してないかな。

 

あとから追加するのは文脈として自然というか、むしろ先にオススメの項は作れないから良いんですが…。
オススメのところだけ、妙にデザインが不時着しています。

 

やりたいことは分からなくはないけど、結果的にまとまってない感。

仮説を交えつつ、具体的にまとまっていないと感じた部分を見ていきたいと思います。

 

 

1:文言

文言がまとまっていないのが気になりました。

f:id:appgameui:20190704065227p:image

気になったのは以下の文言です。

「ガチャ0回が10回に」

f:id:appgameui:20190811150904p:plain



解釈すると、

「通常の購入レートだと有償分のエナジー40個で、ガチャを引ける回数に換算すると0回ですが、960個の無償分のエナジーが付いてくるので、合算するとエナジーが1000個になります。
これをガチャが引ける回数に換算すると10回引けることになります。」

 

…ということだと思うのですが、訴求文言としては些か難解。
お得感が直感的に伝わりづらいです。

 

 

じゃあ文字数を減らせないか、ということで減らしてみたものの「ガチャ0回が10回に」だと、

1回限定のガチャを引いて、残り回数が0回になったガチャの回数を10回にしてくれるのか?

 

とも解釈可能です。

もちろんガチャの仕様や前後の文脈から判断して、最終的にそう理解されることはありませんが、ソシャゲに慣れていない人の方が圧倒的に多いです。

 

また、慣れていたとしても、文言だけを見て頭の中で瞬間的に複数の選択肢が浮かびます。その取捨選択の判断の回数を減らした方がストレスになりません。

 

例えば「半額!」とかは生活していてもよく見かけるので、そう言った文言を利用するとかです。

 

2:丁寧に言葉を選ぶ

次に「無償をサービス」という言葉も丁寧さに欠けています。

f:id:appgameui:20190811151335p:plain

商品購入画面なので「無償エナジー」と丁寧に言葉を選ぶ必要があります。
もう一つあります、以下の画面にて… 

f:id:appgameui:20190704070423p:image

エナジー7,500」とあるのですが、他で「個」が付いているので、不統一にする必要は無いかなと思いました。

f:id:appgameui:20190811151412p:plain

このようにフォーマルさに欠け、情報の信頼性が下がっているように感じました。

賑やかさも必要な場面ではありますが、金銭が絡む画面ですので、最低限の丁寧さも必要な画面です。

 

 

3:レイアウト

3つめはレイアウトのルールが守られていないことです。

アイコンと数字の位置が離れすぎている、他の画面とレイアウトが違うので、直感的に理解できなくなってしまいます。

f:id:appgameui:20190811153150p:plain

情報が整理されていないと受け取り側の解釈に差が生まれます。

 

例えばこちらは購入して瞬時に獲得できるエナジーです。

f:id:appgameui:20190811153559p:plain

 

それに対してこちらは30日間ログインして獲得できる最大値です。

f:id:appgameui:20190811153653p:plain

なので、通常は「最大3800」などユーザーが誤解しないようにテキストを添えます。

 

一応、下の方に※で記載はありますが、情報が整理されていないので、やはり分かりづらいですし、気付きづらい…。

f:id:appgameui:20190811153842p:plain

という具合に、フラットデザインでどう訴求するか、という以前に基本的なデザインの粗のようなものが目立ちました。

 

そうなってくると、ショップのデザインの意図がどの程度考えられたものなのか、疑問が生まれてきます。

 

 

 

例えば、バナーにフォントを多数使っていますが、仮に意図したデザインとして、その意図をどこまで考えれば良いのか、です。

 

f:id:appgameui:20190704092923p:image

 

 例えば価格の表記のフォントですが、バナーによって変えています。

f:id:appgameui:20190811154314p:plain

 

商品名のフォントも同様です。

f:id:appgameui:20190811154516p:plain

作業していて通常はこうなりません。
恐らく販売している商品のカテゴリによって意図してデザインを変えたのだとは思うのですが、先ほどの粗を考慮すると必然性が不明というか…なんとなくであったり、手癖でデザインした可能性もでてきてしまいます。
(なぜその部分のフォントだけ変えた?とか…)

 

4:色

色は部分的には分らなくもないけど…。
例えば以下の素材は価格の高さによって色を使い分けしているのだと思われます。

f:id:appgameui:20190811154607p:plain

以上です。

 

このように分かりづらさがある画像やデザインです。
その原因は主に、情報が整理できておらず、レイアウトが不統一になっていること。必要な情報が分かりやすいところに表示されていないことがあるのかなと思っています。

特に金銭に絡む画面に関してはユーザーに分かりやすく誠実なデザインをすべきだと思います。まずは分かりやすいサービス内容。少し複雑であれば分かりやすくする工夫が必要かなと思います。

分かりづらいとリスクに感じ手を出しづらい心理が働くので、金銭が絡む画面に関しては分かりやすさも大事にしたいな、と思いました。

「きららファンタジア」ミッションリスト、タブを越えて受け取れるのは便利ぃ!

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

 

「きららファンタジア」のミッションリストにてタブを越えて報酬が受け取れるのが便利なので、紹介します。

f:id:appgameui:20190519222459p:plain

 

挙動としてはこんな感じです。
デイリータブを選択している状態で、トータルタブのミッションが受け取れているのが分かるかと思います。

f:id:appgameui:20190811144329g:plain

 

この機能は使ってみるととても便利で、

メリットとしてはタブを選択する手数、タブを選択したのちに一括受け取りを押す手数が省略できるので時短に繋がります。

ミッションの数が多くなると個々のミッションの価値は下がるので、個別に受け取るときの特別感は下がります。(一括受け取りのボタンも昔はなかったですしね。プレゼントやら報酬配りすぎてこうなったんじゃなかろうか、って気がしてます)

 

なので、タブごとに受け取るメリットとデメリットを比較して実装を検討していただけると良いのかな、と思います。

 

未実装のゲームはぜひ実装の検討を!

「妖怪ウォッチメダルウォーズ」画面UIまとめ (冒険、ランキングバトル)

こんにちは、ちょこきなこです。
妖怪ウォッチメダルウォーズ」の画面紹介です。今回で最後、冒険まわりの画面の紹介です。

エスト選択

 

f:id:appgameui:20190801231152p:plain

f:id:appgameui:20190801231233p:plain

 

夜だとこんな感じ。

f:id:appgameui:20190811140356p:plain



 

トレジャーミッション

f:id:appgameui:20190801231523p:plain

レジャーミッションのボタンを選択すると、ミッションのリストが表示されます。

デイリーミッション

f:id:appgameui:20190801231315p:plain

 

 

エストボタン

f:id:appgameui:20190801231610p:plain

エストボタンはミッションと同じようなものですね。

ストーリークエス

ストーリークエストはストーリーを進行することで達成するタイプのクエストです。

f:id:appgameui:20190801231629p:plain

 

報酬を獲得してみます

f:id:appgameui:20190801231752p:plain

f:id:appgameui:20190801231728p:plain

 

お手伝い

お手伝いは妖怪やNPCからのお題が並びます。

f:id:appgameui:20190801231841p:plain

 

ともだち

ともだち、はともだちが発見したボスなどの情報が並びます。レイドボスの討伐のようなものをイメージしていただければ。

f:id:appgameui:20190801232015p:plain

 

イベント

イベントは運営が主催する期間限定のクエストです。

f:id:appgameui:20190801232034p:plain

 

 

ストーリー選択

f:id:appgameui:20190801232340p:plain

f:id:appgameui:20190801232228p:plain

 

 

 

f:id:appgameui:20190801232520p:plain

f:id:appgameui:20190801232432p:plain

 

バトルスタート

f:id:appgameui:20190801232538p:plain

f:id:appgameui:20190801232646p:plain

 

進行にあわせて会話パートが挿入されます。 

f:id:appgameui:20190801232731p:plain

f:id:appgameui:20190801232757p:plain

f:id:appgameui:20190801232811p:plain

 

ポーズボタン

f:id:appgameui:20190801233037p:plain

f:id:appgameui:20190801232905p:plain

 

ボス登場

f:id:appgameui:20190801232927p:plain

 

f:id:appgameui:20190801233107p:plain

 

撃破

f:id:appgameui:20190801233136p:plain

 

エスト結果

f:id:appgameui:20190801233245p:plain

f:id:appgameui:20190801233307p:plain

f:id:appgameui:20190801233327p:plain

妖怪ウォッチメダルウォーズ

 

 

レベルアップ

以上が冒険のメニューです。

ランキングバトルも少し紹介します。

 

ランキングバトル

f:id:appgameui:20190811134924p:plain



 

ランキングバトルメニュー

 

ランク情報

 

対戦履歴

f:id:appgameui:20190811135024p:plain



 

全体ランキング

f:id:appgameui:20190811135103p:plain



 

ともだちランキング

f:id:appgameui:20190811135301p:plain



 

 

交換

 

バトルスタート

f:id:appgameui:20190811135337p:plain



f:id:appgameui:20190811135400p:plain



f:id:appgameui:20190811134219p:plain


f:id:appgameui:20190811134158p:plain

f:id:appgameui:20190811134245p:plain

 

バトル終了

f:id:appgameui:20190811134303p:plain

f:id:appgameui:20190811134344p:plain

f:id:appgameui:20190811135437p:plain


以上がランキングバトルです。
画面紹介するの今度はざっくりにしよ…。