【番外編】勝手にEFO比較分析「選択肢の多いセレクトボックス」集めました(航空券予約サイト・11社)

セレクトボックス(プルダウンメニュー)は、15~20個以上の選択肢が存在するとユーザビリティを落とします。

選択肢が多い場合に出現するプルダウンメニューのスクロールバーを操作することが、大きな手間となるためです。

※セレクトボックスのユーザビリティには下記の過去記事でも詳しく触れてきました

その選択肢、大丈夫?フォームでプルダウンメニューを使う際に気をつけたいこと
https://f-tra.jp/blog/column/2960

海外EFO:プルダウンメニューの乱用はやめよう
https://f-tra.jp/blog/overseas/4518

とはいえ、「15~20個以上の大量の選択肢のなかから何かを選んでもらう」という状況が避けられない場合も多いでしょう。
そんな時、各社はどのような工夫を行っているのでしょうか。

今回は、たくさんの選択肢から選ぶ機会が多そうなフォームということで、航空券の予約サイトに注目。
「出発/到着地」を選ぶユーザーインターフェースを集め、比較してみたいと思います。

今回取り上げるのは下記の11社のトップページにある、航空券の検索フォームです。(順不同、敬称略)

  • JAL(日本航空株式会社様)
  • ANA(全日本空輸株式会社様)
  • エクスペディア(Expedia,Inc.様)
  • H.I.S(株式会社エイチ・アイ・エス様)
  • JTB(株式会社ジェイティービー様)
  • じゃらん(リクルートライフスタイル様)
  • 楽天トラベル(楽天株式会社様)
  • トラベルコちゃん(株式会社オープンドア様)
  • DeNAトラベル(株式会社エアーリンク様)
  • Jetstar(ジェットスター・ジャパン様)
  • peach(Peach Aviation株式会社様)

航空会社から代理店、外資系、LCCなどさまざまなサイトをピックアップしました。さっそく比較していきましょう。

国内空港の選択

まずは、国内の空港の選択方法を比較していきます。※Jetstar、peachを除く
いずれもセレクトボックスを使って選ばせる形となっていました。国内の空港の選択肢は約30~60ほどの選択肢があり、どのフォームでもスクロールバーが出た状態となっています。

いずれも、主要空港を上部に表示

今回比較したサイトのすべてが、主要都市の空港(10箇所前後)の選択肢を上部に配置しており、スクロールなしでも選択できるようになっていました。
利用者の多い空港を選択しやすくしておくことで、多くの人がスクロールのストレスを感じること無く目的の空港を選択することができますね。

JALのセレクトボックス。主要都市9箇所を上部に配置

JALのセレクトボックス。主要都市の空港9箇所を上部に配置

optgroupを使ったカテゴリ分けがあるサイトも

じゃらんとトラベルコちゃんでは、地域ごとに空港がカテゴライズされており、見やすく、選択しやすくなるような配慮が感じられました。
ただ羅列するだけの状態よりも格段に目的地を選択しやすくなっていると思います。

efo_double_ring じゃらん

じゃらん

エリアごとにラベリングされている

efo_double_ring トラベルコちゃん

トラベルコちゃん

ラベリング以外にも仕切り線や余白の開け方で非常に見やすく、ユーザーにやさしい。上部に主要空港がピックアップされている旨も一目瞭然。

海外都市(空港)の選択

次は海外都市の選択場面を比較していきます。
あまり差が見られなかった国内空港に対し、海外都市は選択肢の数が一気に膨れ上がることもあってか、各社さまざまな工夫が見られました。

基本形は、セレクトボックスの入れ子

最も多かった形は、複数のセレクトボックスを選択されるタイプ。
まずは「アジア」「ヨーロッパ」などのエリアを選び、その後国名、都市を絞り込むようなパターンです。
JAL、ANA、JTB、エクスペディア、じゃらん、DNAトラベルの6社がこの形を採用していました。

ANA

ANAのセレクトボックス。大まかなエリアを選んだあと、都市を選択するオーソドックスな形。

さらにじゃらん、DNAトラベルは3階層構造になっており、セレクトボックスが3つ並ぶ形でした。

DNAトラベル

DNAトラベルは「方面」「国・地域」「都市」の3段構造。セレクトボックスひとつあたりのスクロール量は少なく済む

エクスペディアはキーワード検索も併用

エクスペディアは上記の選択方法に加え、「都市名を入力して検索」という選択肢を選ぶことでキーワード検索が可能になるようです。
ただし、上記の選択肢が見つけにくい点と、後述する入力サジェスト型ではないキーワード検索だという旨が少々わかりにくく、まだ改善の余地があるように思いました。

エクスペディアのキーワード検索。

エクスペディアのキーワード検索。

次に多かったのは入力サジェスト型

HIS、楽天トラベル、トラベルコちゃんの3サイトでは、都市名の入力すると該当する選択肢を表示する入力サジェスト型を採用していました。

HISは入力サジェスト型を採用。

HISは入力サジェスト型を採用。

複数のセレクトボックスの大量の選択肢から探す必要がありませんので、入力が非常にスムーズです。

さまざまな方法と豊富な説明を用意した楽天

楽天トラベルは、上記のサジェスト型のほかに「地図から選択」「方面から選択」という2種類の選択方法を用意していました。
ok_blue 楽天トラベル

楽天トラベルは3種類の選択方法が

楽天トラベルは3種類の選択方法が


「地図から選択」をクリックするとポップアップが登場

「地図から選択」をクリックするとポップアップが登場


入力サジェストの使用方法についても、モーダルウィンドウで詳細な説明を表示する親切さが楽天らしさ(※)を感じさせます。
クエスチョンマークを押下すると、オートコンプリートの説明を表示

クエスチョンマークを押下すると、オートコンプリートの説明を表示

※参照:勝手にEFO徹底解剖:楽天市場・購入フォーム

一覧性抜群だったpeach、Jetstar、トラベルコちゃん

今回比較したなかでは最も使いやすいと感じたのはこの3社でした。

まずpeach、jetstarはスクロールの必要のないようにセレクトボックスをカスタマイズしていました。
LCCなので選択可能な都市が少なめということもありますが、この形なら複数のセレクトボックスを操作する必要もなく、手間の少なさや一覧性は圧倒的です。

ok_blue peach

peachではセレクトボックスを押下すると右横に選択パネルが登場。 パネルの登場が少しわかりにくいのが難点か。

peachではセレクトボックスを押下すると右横に選択パネルが登場。
パネルの登場が少しわかりにくいのが惜しい。

efo_double_ring ジェットスター

見やすさ、選びやすさにおいて申し分なしのジェットスター。

見やすさ、選びやすさにおいて申し分なしのジェットスター。

また、トラベルコちゃんでは、主要都市をカテゴライズし、ラジオボタンで表示していました。
efo_double_ring トラベルコちゃん

トラベルコちゃんはラジオボタンを併用

トラベルコちゃんはラジオボタンを併用

セレクトボックスを使うよりも場所は取りますが、非常に一覧性が高いうえに1回のアクションで選択可能な点は優れていると思いました。
その他の都市は入力サジェスト型のテキストボックスから入力できるようになっています。

最後に

いかがだったでしょうか。本日は選択肢の多いセレクトボックス(または代替のフォームコンポーネント)について、11社の例を比較してみました。(勝手にアドバイスは今回は割愛します)

あなたのフォームにも、ぜひ、これらの工夫を採り入れてみてはいかがでしょうか。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です