【社労士解説】ジョブ型雇用時代におけるフリーランスの生存戦略とは?
- コラム
- とは
- フリーランス/個人事業主
モバイルにおける選択式フォームインターフェイスといえば、ドロップダウンメニューが最も一般的なのではないでしょうか。
「スペースをそれほど取らない」「自動で入力認証ができる」「どのブラウザーでも使える」などの理由から、多くのモバイルサイトに取り入れられ、ほとんどのユーザーが使い方を知っています。
しかし、実際に間違った使い方をされることも多いのがドロップダウンメニュー。
場合ごとに分けて、適切な選択フォームの形を考えました。
性別の選択のような、ふたつしか選択肢がない場合にドロップダウンメニューを使うのは効果的でありません。チェックボックスやトグルスイッチを使うようにしましょう。
選択肢が Yes/No や On/Off しかない場合はシンプルなボックス形式にしましょう。下の画像の左側が間違った例で、右側が参考にするべき例です。
選択肢が少ない場合は、選択肢を全部表示してしまい、ラジオボタンを使ったり、セグメントコントロールという下の画像の右にあるような表示方法がおすすめです。よりシンプルになりますね。
セグメントコントロールを使うときは、選択肢の数が5個以上にならないように注意しましょう。
ユーザーが何を求めているかわかっている場合は、”start typing…”のように入力を促して、一文字か二文字が入力された後にフィルターを通すことで出てきた結果を表示する方法があります。
フィルターを通すので、表示するオプションの数は少なくて見やすくなります。これは、市や都道府県を選択する時に便利ですね。
ユーザーデータを参考に、一番選択される可能性の高いオプションから表示しましょう。こうすることで、9割のユーザーは即時に適切な選択肢を見つけることができるでしょう。
“その他”を選ばなくてはならないユーザーもいますが、大多数のユーザーエクスペリエンスを向上させることができます。
回答がそれほど長くない文字数の場合、リストから選択するよりタイピングする方が簡単な場合があります。
たとえば生まれ年など。
一般的に、モバイル機器ではリストからスクロールして選ぶより、実際に入力する方が効率的と言われています。
もしも入力されるデータにフォーマットがある場合は、”start typing…”を使うことで簡単に、そして正確な情報の入力が可能になります。
下の画像から、アメリカの州を選ぶ時はアルファベット一文字でもかなり絞ることができるのがわかると思います。
このフィルター機能は、選択肢の順番があいまいな時に特に役に立ちます。下の画像にあるように、通貨の検索が良い例です。
また、200以上もある国の中から一つを選ぶ時にも、フィルター機能は便利ですね。
チケット数や乗組員の数など、数字を扱う場合はステッパーというものを使うと良いでしょう。
ワンタップで簡単に数の追加や削除ができるので便利です。
数値の範囲が広かったり、整数で表せない場合は、スライダーを使ってみましょう。
コツとしては、最小と最大の数字を表示することで、直感的に使えるようになります。
現在の時間と近い日付を選ぶ場合は、カレンダー方式にすることで日付の選択が直感的で簡単になります。
しかし注意するポイントは、誕生日を入力する時だけは、カレンダー方式を使わないようにすることです。
ここまではさまざまな代用例を紹介してきましたが、ドロップダウンメニューが必ずしも悪いという訳ではありません。
時には、ドロップダウンメニューが一番ふさわしいという状況もあります。そのような時は、なるべくユーザーフレンドリーになるように心がけることがコツです。
使用する際のポイントを紹介しましょう。
メニューラベルの名前や説明は明確に、そしてリストを開いている時でも見えるようにしましょう。また、選択メニューの中は説明的なラベルにしましょう。たとえば、ただの”選んでください”ではなく、”国を選んでください”にするなど。
ユーザーデータに基づいて、よく選ばれる選択肢をリスト上部にもってきたり、一番人気のものを初期値として選択しておくと使いやすくなります。
モバイル機器やブラウザーは、現在地や日付などの情報をすでに知っています。その情報を使って初期値を設定しておくことでユーザーが入力する手間を省けます。
例えば、郵便番号を入力するだけで都道府県と市の名前はわかります。クレジットカードも番号を入力するだけでカード会社がわかります。これらを上手く利用することで、ユーザーが余計な入力をしなくて済みます。
Facebookでログインする機能は、サインアップの入力フォームを埋めるより簡単だと思います。Paypalでの支払いも、クレジットカード情報を入力するより簡単です。
ここでいくつかの問題点をあげてみましょう。
選択式フォームでなるべくストレスを減らせば、ユーザーに最後まで入力してもらいやすくなります。この記事を参考に、フォームをブラッシュアップしてみてください。
(翻訳:Juri Ando)