こんにちは、ちょこです。
「仮面ライダー シティウォーズ」からバッドUIなデザインがあったのが気になりました。
どんなUIだったか
画面のデザインとしては以下のようなデザインでした。いわゆる課金画面の前に表示される年齢確認の画面です。
枠内に生年月日を入力するデザインです。
このような形式で生年月日を入力します。
どこが良くなかったか
この画面のどこが良くなかったかですが、
- 入力する値のフォーマットが分からない
- 不安に感じつつ、数字を入力する必要がある
- 一度間違えないとフォーマットが示されない
などです。ひとつずつ補足します。
1：入力する値のフォーマットが分からない
これに関しては、フォームが年月日で区切られておらず、自由入力と同じフォーマットなので数字を入れる、ということが直感的に分かりません。
2：不安に感じつつ、数字を入力する必要がある
フォーマットが分からないので、ユーザーは不安に感じつつ生年月日を入力することになります。
このUIの場合、数字を入力することは分かりますが、半角での指定が無いので全角での入力でも良いのか迷います。
ある程度リテラシーがあるユーザーであれば半角にしますが、今度は1月1日を1/1と表記するか01/01と表記するかで迷います。
このように、ユーザーは様々な推測をし迷います。
その結果、どれが正解なのか間違いなのか、不安に感じながらも生年月日を入力します。
3：一度間違えないとフォーマットが示されない
では正しいフォーマットは何か？
それはエラー画面に表示されています。間違ったフォーマットで値が入力されたのであれば、正しいフォーマットを示すのは当然ですが、未然にエラーを防ぐ姿勢も必要です。
▲入力するフォーマットを間違えると正しいフォーマットが表示される
間違えると正しいフォーマットが表示されるのはありがたいのですが、それ以前にユーザーがミスをしないようなUIであることも大事だと思いました。(大事なので2回言う)
どうすれば良いのか
では、どうすれば良いのか、ですが
例えば入力する枠を年月日で分けても良いですし、ドラムロールのUIを採用すれば、誤った値が入力されるというエラーが発生する余地もありません。
もし枠をそのままにしたいのであれば、入力するフォーマットを枠内に薄く表示しておくだけでも分かりやすくなります。
他のタイトルではこのようなデザインになっていることがあります。ご参考までに紹介致します。
1：自由入力型
▲アイドルマスター ミリオンライブ! シアターデイズ。
ベースは今回紹介した仮面ライダーと同じUIですが、入力フォーマットが枠内に示されているため、ユーザーが迷う確率は減ると思われます。
▲とある魔術の禁書目録 幻想収束。
生年月までの管理です。日までは管理していません。この場合も入力フォーマットが枠内に示されています。
▲ダンまち〜メモリア・フレーゼ〜。
枠が年月日ごとに分かれており、さらに枠外に「年」「月」「日」が表示されています。さらに全角か半角かを迷わせないように、使用できるキーボードを指定しています。
直感的な理解とエラーを防ぐデザインに、なっていると感じました。
2：ドラムロール型
▲cue。
入力できる値を制限するUIです。これなら不正な値が入力される余地はありません。
▲アニドルカラーズ
同じくドラムロールのUIが採用されていました。ゲーム中でもここ専用のUIになりがちかもしれません。
これはプルダウンからのドラムロールかな…。上で紹介したドラムロールと比較すると下三角のボタンを押したり数字を確定するための手数が増えるのでこのタイプのUIを実装するのであれば、上のタイプのデザインと比較検討した上で判断するのが良いかと思います。
3：年齢区分型
年齢区分で分けるUIもあります。ユーザーの年齢が変わった場合の管理や対応ってどうしてるのかな、と疑問に感じてはいます。
▲パレットパレード。
これまで紹介したUIと比較して
- 手数が少ない
- ユーザーに確認していることシンプルである
- 表示されている情報がシンプルである
という特徴があります。
横に並べると指で情報が隠れないので、その点も配慮があるのかな、と思いました。
▲ゴエティアクロス
パレパレと同じですがボタンが縦に並んでいます。
以上です。
意外とデザインフォーマットが被ることがなくて驚きました。正直もっと偏ると思っていました。
生年月日を入力するUIはゲームに限らず利用されるUIなので、他のゲームやサービスを見てメンタルモデルを利用するのが良いのかな、と思いました。
