空港カウンターページのUI改善
改善の目的
レンタル機器の受取や返却を行っている空港のカウンターを案内するページにて、空港スタッフやコールセンターへのクレームや問い合わせ件数が一定数あるとのことで、改善要望が上がってまいりましたので、UI改善を行うことになりました。
目的としては、問い合わせ件数を減らすことと、コールセンターへ問い合わせがあった際に、電話口からお客様へご案内しやすい作りとすることです。
改善前の全体画像(PC)
改善後の全体画像(PC)
改善後の全体画像(SP)
問題点と改善内容
ファーストビューのリード文が長い
- 問題点
- どの空港カウンターのページを見ても同じリード文であり、変化が乏しく何処のページを見ているか分かりづらい。
- 改善内容
- カウンターで受取や返却ができる旨は、他の方法でも伝えることができるので削除しました。
情報を整理することで、どのページを見ているのか把握しやすくしました。
受取カウンター・返却カウンター・24時間返却BOX・当日申込みというカウンターの機能を表題としたタブ表示での弊害
- 問題点
- 受取や返却など複数の機能を持ったカウンターが、各タブに重複表示されていて、どのタブを見ているのかわからなくなる。
空港にカウンターがいくつあるのか不明瞭。
タブ内のコンテンツにハッキリとした区切りがないため、情報が散漫している。
- 改善内容
- カウンター名・階数・対応機能アイコンを表題としたアコーディオンメニューとすることで情報を整理しました。
カウンター名が表題となることで、重複表示がなくなり、何処をみているのか判別しやすくしました。
コンテンツも罫線を引くことで、情報がまとまるようにしています。
航空会社がどのターミナルから発着するのか見つけるのが大変
- 問題点
- タブ内に唐突に発着対応リストが出てくるのは不親切。
リストとして羅列しているだけなので利便性が悪い。
- 改善内容
- 発着対応リストを外に出し、各ターミナルごとにまとめてリスト化しました。
また、Vue.jsで検索機能を実装し、絞り込み表示に対応しています。
現在表示していページに対応したターミナルがないことを考慮して、下部にテキストリンクで導線を作成しました。
改善結果
担当者からの評価も良く、その後他部署より該当ページに関する改善要望が上がってこなくなった点から、今回のUI改善は上手く行ったのではないかと感じております。
制作について
- 工夫したところ
- お客様を言葉で誘導することを考慮して、基本的なことではありますが、上から下へ進む導線の中で、目的の箇所へ迷うことなくたどり着ける構成になるように努めました。
文字のジャンプ率で目が止まる箇所を作り、アイコンの活用で端的に情報が伝わるようにしています。
Vue.jsでの検索窓につきましては、記事で見かけたことがある程度の知識ではありましたが、サンプルを流用することで導入することができました。
いずれは知識を深めていき、さらに便利な機能を実装できるようになりたいと考えています。
- 開発環境
-
- フロントエンド
- 言語： HTML5, CSS3, JavaScript
フレームワーク： Vue.js 2
ライブラリ： jQuery 3系 - バックエンド
- 言語： PHP
実行環境： XAMPP - インフラ
- オンプレミス Linux サーバー（Apache）
- バージョン管理
- Sourcetree
- エディタ
- Dreamweaver
- デザインツール
- Photoshop CC, Illustrator CC
- 制作期間
- 2018年6月 (3週間)