サトリクのこだわりのモノ紹介

【ダメなUIについて】androidの生年月日の入力フォームで使ってはいけないUIデザイン

やべえ。UIデザインっておもしれえ

サトリク

どうも、サトリクです。

最近、仕事でandroidの生年月日入力フォームを修正する機会があったのですが、UIデザインについて面白い話があったので、記事にしていこうと思います。

今回、解説するのは、アプリの会員登録などで必ずある、生年月日の入力フォームです。

iOS(iPhone)の生年月日入力フォームのUIデザイン

iPhoneのドラムロール型の画像

iOSでは基本、このようにドラムロール型で表示されます。

そのため、iOSユーザーは迷いなく、生年月日を入力できます。

問題のandroidの生年月日入力フォームのUIデザイン

androidの生年月日入力フォームは、デザインが二手に分かれます。

一つ目は、カレンダー型の入力フォームで二つ目は、ドラムロール型の入力フォームです。

僕は、iPhoneユーザーなので、画像は引用します。

左側がカレンダー型で、右ドラムロール型です。

さて、あなたは、どちらの方が生年月日を入力しやすいですか?

また、どちらの方が、おばあちゃんおじいちゃんがわかりやすく使えると思いますか?

答えは明確です。

androidの生年月日の入力フォームでやってはいけないUIデザイン

サトリク

やってはいけないデザインは、これです。

それは、このカレンダーのデザインです。

絶対にやってはいけません。

やってはいけない理由

理由を端的に言いますと、西暦の入力の仕方がぱっと見わからないことです。

<>で月を変更できる画像

2017年7月の横に、「<」「>」が付いていますが、これを押すと次の月に変わるだけです。

もし、1998年に戻したかったら、100回以上「<」を押さなければなりません

では、どうやって西暦を入力するのでしょうか。

西暦を変える画像

正解はここです。

ここをタップすると、 次のようなドラムロールが表示され、西暦を入力できます。

これ、初見でわかりますか?絶対わかりませんよね。

だって、ボタンだというヒントを一切出していない、ただのLabel(テキスト)ですもん。。

ここで僕は、こう思ってしまいました。

サトリク

このUIデザイン、、クソだ。誰がこんなデザイン考えたんだ。これじゃ絶対年配の方々が、生年月日入力できねーじゃん

と。しかし、この考え方は間違っていました。

このデザインが悪いのではなく、このデザインの使い方が悪かったのです。

どういうことかというと、

カレンダー型のUIデザインは、スケジュール入力用のデザインだったのです。なぜなら、スケジュールの入力では、西暦を変えることはそれほどありません。だから西暦を変える方法を知らなくてもいいのです。

サトリク

だから、このUIデザインは、スケジュール入力のときに使いましょう!

生年月日の入力では、絶対に使わないでください。

ほとんどの人が年齢を変えます。

もし、これが登録しないと扱えないアプリでしたら、今すぐ変えたほうがいいです。生年月日の入力で、西暦が入力できず、アプリの登録をやめてしまう場合があります。

これが、カレンダー型を生年月日の入力で使ってはいけない理由です。

サトリク

上記の理由から、生年月日の入力フォームで、カレンダーのUIデザインを使うのは、やめましょう!絶対だめ!

生年月日の入力に、カレンダーUIデザインを使ってしまった場合

こんな記事を見つけました。

【LINEスコア】「生年月日が入力できない」「年を直接入力・選択する方法は?」について

2019年6月27日にリリースされた「LINEスコア(LINE Score)」で、年齢が入力できなく、困っている人がたくさん出たそうです。

しまいには、登録がわからなく、めんどくさくなって登録を途中でやめてしまった人もちらほらいるらしいです。

まとめ

UIデザインとても面白いですよね笑

機能に適した、UIデザインを使うことを最優先に考えなければなりませんね。

ですから、なるべく生年月日入力フォームを作成するときは、ドラムロール型のフォーマットにしましょう!