わざわざ入力を面倒くさくしているドロップダウンリスト

実在サイトのNG表現を学ぶ

非効率な生年月日入力フォーム

スマートフォン環境を意識して、最近特に濫用気味に使われている、いわゆる「プルダウンメニュー」と言われている『ドロップダウンリスト』は、その利用方法も誤用が多く、返ってユーザーの利便性を阻害して、非効率で非直感的なアイテムとなっていることが多い。
今回は、特にその中でも間違った利用方法の代表的な例として「生年月日の入力フォーム」について紹介します。

スマートフォン向けサイトの普及で、
利用率が多いドロップダウンリスト

多くの人が「プルダウンメニュー」と十把一絡げに呼称していますが、正確には「ドロップダウンリスト」と呼びます。
プルダウンメニューは、文字通りメニューをクリックするとそのまま、引き下げる様に選択肢が下へ表示されるのに対して、ドロップダウンは、まず選択リストの最初の枠が選択ボックスの上にドロップした後、選択肢が下方向へ延びて表示されます。
さて、このドロップダウンリストの一番大きな特長は、2つ以上の選択肢を格納でき、かつ表示自体を1行で済ませられることで、省スペース化を図れます。
この最大の特長が、スマートフォンでの入力フォームなどで、スクロール量を減らせてページの長さを削減できることが重宝され、もはや濫用気味と言って良いぐらい多くのサイトで多数利用されています。
たしかに、便利ではありますが、一方でデメリットもあります。
選択項目が「一目ですべてを一覧できない」ために、特にスマートフォンのiOS環境では、スクロール操作を伴って閲覧する必要が生じます。
大量に選択肢がある中から、目的の情報を探し出すという行為は、特に内容がわかっていて選ぶべき項目が容易に想像しやすいものなら特に、ユーザーにとってはストレスそのものと言って良いでしょう。

ドロップダウンリストでもっとも最悪な生年月日選択

「年」「月」「日」と3つに分割したドロップダウンリストを使った入力フォームは日常的に目にします。ほとんどの人が違和感を感じないぐらいあまりにも日常的と言えます。
しかし、その中でも特にユーザーが「ひたすら選択肢をスクロール」しなければいけないケースが西暦の選択です。
ドロップダウンリストから選択肢を選ぶこと自体を良しとしても、自分が入力したい情報はスピーディに選択したいはずですが、『1900年』から始まる西暦選択は最悪と言わざるを得ません。
理由は簡単で、大多数のユーザーがカンタンに選べる 年代がスタート位置になっていないからです。1900年といえば、2019年の今年でいうと119歳です!
日本における平均寿命は約84歳で、日本でもっとも長生きした方の年齢は113歳で、しかも世界最高齢です。
まったくもって意味不明な年代から、選択肢が始まるドロップダウンリストは、ほとんどのユーザーにとって半世紀以上のスクロールを強いることになります。筆者は1964年生まれですが、それでも64年分スクロールする必要がありますから、読者のみなさんはさらに20年ばかし必要でしょう笑

余談ですが、2018年の日本における人口ピラミッドを見てみると、100歳以上は他の年代と比較すれば「約0%」で、誤差の範囲です。
もっとも人口比率の高い年代は、40歳代で全年代の約7%強になりますから、最低限この人たちの利便性を考慮することは直感的操作性としては必要です。

直近の年代から遡る仕様はまだマシだが、使いにくさは変わらない

利便性の観点から言えば、そもそも生きている人がいない1900年から選択肢を作るよりは、直近の年代から遡って行く方が合理的と言えます。
しかし、それでも大多数の成人は20年以上のスクロールは必須で、少子高齢化の現代社会にマッチしているとは言いがたいのが現実です。

コアターゲットが一番操作しやすい年代をフォーカスする

ユニクロを例にとると、1979年と1980年の間にデフォルト値が設定されていますが、前後5年ぐらいのスクロールが最適と仮定すると、35歳〜45歳がターゲットになり、この年齢の人は僅かなスクロールで生まれた年代を選ぶことができますから、大変便利だと言えます。
事実、ユニクロのコアターゲットを推測する上で、ユニクロのアプリをダウンロードしたユーザーの所有割合からコアとなる年齢層を見てみると、もっとも多い層は30代で、次いで40代となります。

こうしたことを踏まえると、ターゲットとなるユーザー層を考慮して、ドロップダウンリストのデフォルト値は、中心的な年代を基準に設定することがもっとも適切と結論づけてもよいのですが、これは一方で毎年調整をするなどの運用上の手間ひまが伴いますから、手放しでは喜べませんね。

直接キーボード入力した方が早く、ストレスが少ない生年月日入力

そもそも、なぜドロップダウンリストやラジオボタン・チェックボックスなどの選択肢が生まれたかと言えば、ほぼ同じことを記入する場合でも、人によって記憶や書き方が異なるために入力にバラツキが生じるからです。

たとえば、
 ・1999年(半角)
 ・1999年(全角)
 ・平成11年(半角)
 ・平成十一年(漢数字)

というように、これらはすべて同じ意味であるのに表記が統一できていないため、集計が煩雑になり、手間が膨大になることを避けるために、既定の情報から選んでもらう方法が普及しました。
まだコンピュータやWEBが、普及しはじめたばかりのころならいざ知らず、JavaScriptなどの技術が発達した現代では、入力が全角・半角かは置換で統一することが可能であり、特にスマートフォン環境であれば入力文字種をキーボード表示で固定することも可能ですから、もはや入力に「ゆらぎ」など存在しないといっても良いでしょう。
そう考えれば、わざわざ膨大なスクロールを強いてまで、ドロップダウンリストから目的の年号を選択させる必要などないのが正解と言えます。

ヤコブ・ニールセン博士が警告するドロップダウンリストの使い方

ユーザビリティの研究・発表に関して著名なヤコブ・ニールセン博士が、自身のWEBサイトでドロップダウンリストに関するガイドラインを示しています。

特にWEB表現に関係の深い項目だけリストアップすると下記になります。

●スクロールが必要なドロップダウンは、すべての選択肢を一覧できない
●打ち込んだほうが早い内容なら、ドロップダウンは使わない
●ユーザーが常に記憶している生年月日のような情報は、ドロップダウンは使わない
※邦訳:U-Site「ニールセン博士のAlertbox」
※原題:Dropdowns: Design Guidelines by Angie Li on June 11, 2017

U-Site「ニールセン博士のAlertbox」

他社がやっている、世の中で多く使われているからと言って、それが常識だとは限らないということを念頭に置き、常にユーザーが軽快でストレスなく操作できるWEB体験とは何かを、より多くの制作者が考えながら制作することを、改めてここに推奨します。


ホーム UIデザインの極意 実在サイトのNG表現を学ぶ わざわざ入力を面倒くさくしているドロップダウンリスト

企業内セミナーや社員のUI/UXスキルアップ講座の開催を
ご検討の企業様からのお問い合わせはこちら

香西 睦

香西 睦

論理的で客観的なデザイン理論と、ユーザーの視点に立った情報デザインは、Webサイトの課題を見極め、わかりやすいインタフェースを実現!

同じテーマのおすすめ記事

おすすめランキング

  1. 1

    認知科学で考える「ローカルナビゲーション」のデザイン表現

  2. 2

    短期記憶に関するミラーの法則(マジカルナンバー)

  3. 3

    現在志向バイアス(現在バイアス)

  4. 4

    ユーザーの「知りたい度」によって変わる、「読み方」と「読む範囲」

  5. 5

    05:ユーザー視点で作る高い説得力を持つUI設計&提案書

  6. 6

    わざわざ入力を面倒くさくしているドロップダウンリスト

  7. 7

    バンドワゴン効果

  8. 8

    シグニファイア(知覚されたアフォーダンス)

  9. 9

    チャンク

  10. 10

    2つの思考モード(二重過程理論)

香西 睦

香西 睦

「だから、そのデザインはダメなんだ。(エムディエヌコーポレーション刊) 」の著者。 論理的で客観的なデザイン理論とユーザー視点の構造設計・情報デザインを用いて、Webサイトの課題を見極め、Webサイトの性能をアップさせる利用者の目線に立ったわかりやすいインタフェースの設計で多くの企業様のお手伝いをしてきました!

UIデザインがよくわかる本

香西睦の執筆デザイン書籍・電子書籍

TOP