DailyUI #068

1.DailyUI#068のお題

68日目のお題は「フライト検索」。
googleのフライト検索画面を参考に制作しました。

2.ざっくりワイヤー

ざっくりワイヤー

3.制作したデザイン

制作したデザイン

4.デザインする上で考えたこと

・途中離脱を防ぐため、手続きにかかるステップと現在地を可視化し、ユーザーのストレスを軽減させる

・検索条件を確認しやすいよう、情報をすっきりと簡潔に表示

・画面上部の検索条件が表示されているハーフモーダル部分は、下にスライドするとさらに詳細な条件を指定できるフィルタ画面になる想定

・検索した内容でのフライト料金が平均と比較して安いか高いかを一言で提示することでユーザー自身が調べる手間を省き、予約に繋げる。
・最安料金のフライトは赤の帯で目立たせる

5.反省点

普段フライト予約をすることがないので、フライト表示のカードにどのような内容が載っていると選びやすいのかわからず、必要最低限と思われる情報のみを載せました。経由地の表記はあった方がよかったかなと思いました。

6.おわりに

このお題の参考にするためにgoogleのフライト検索ページを初めて見ましたが、条件を詳細に指定できるだけでなく、料金の上がり下がりを確認しやすいようグラフが用意されていたり、情報の根拠をツールチップで説明していたりと細部にまで親切な情報設計がなされているなと感じました。ここまで考え込まれた画面を作れるにはまだまだ程遠いなと痛感しました…！