セレクトメニューとオートコンプリートの使い分け

anthony

anthonyはUX Movementの設立者で執筆者です。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

Stop Using Select Menus for Known User Input

フォームでセレクトメニューを使うかどうかを決める前にこう自問してください。セレクトメニューにある選択肢を見なくても、ユーザーは何を入力するかを知っているでしょうか? もし知っていそうであれば、セレクトメニューを使うのは止めましょう。その代わりにオートコンプリートフィールドを使ってください。

もしユーザーがフォームに入力する内容を知っているなら、長々とした選択肢のリストをスクロールして確認させる必要はありません。セレクトメニューはこの余計なタスクをユーザーに強要するため、入力の足かせとなり苛立たせてしまいます。モバイル画面ではセレクトメニューにあるリストのほんの一部しか見えず、キーボードを使って探すこともできないため、さらに事態は悪いです。

ユーザーが入力する内容を知っているときは、セレクトメニューよりも時間と労力の節約になるためオートコンプリートの方が好ましいです。ユーザーは候補の選択肢が現れるまでの、最初の何文字かを入力するだけで済みます。あとは矢印キーを押して選択肢から適切な内容を選べば完了です。

オートコンプリートを使えば大量の選択肢からではなく、最小限の選択肢からユーザーは入力内容を選ぶことになります。入力フォームに入力する文字が多いほど選択肢の数は減って、早く答えを見つけて選べるようになります。また表示される選択肢が減るので、入力間違いをする確率も減ります。

セレクトメニューがユーザビリティを妨害している例は、時間や場所の入力フォームでよく目にします。国や州、月日の入力フォームはその代表格です。ユーザーは何を入力すればいいかを知っていますから、無関係な選択肢に目を通させて時間を無駄にするべきではありません。

セレクトメニューの代わりにオートコンプリートフィールドを使ってフォーム入力をすばやく簡単にできるようにしましょう。これは、ファミリーレストランで食事をするときに、何を注文するかわかっているならメニューを読む必要がなく、ただの時間の無駄であるのと同じことです。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

購読

平日・週2回更新