UI/UX実績紹介①輸送システム画面を作成しました

はじめに

こんにちは！UI/UXチームです。UI/UXチームでは日々使いやすいシステムをデザインする方法を学んでいます。
今回はUI/UXチームでデザインしたシステムをご紹介させていただきます。

今回デザインを担当させていただいたのは航空輸送の運賃や到着日数の見積もりを取得するシステムになります。
荷物の重さや大きさを入力し、どこからどこまで輸送するのかを選択することで運賃の見積もりを出すことができます。
以下がデザインしたシステムのイメージになります。

ここからはデザインするうえでこだわったポイントをいくつか紹介させていただきます。

①今回は既存のWebサイトの機能追加（ページ追加）ということでしたので、元からあるページとの統一感を演出することにこだわりました。お客様のコーポレーションカラーである青色をメインカラーとしたデザインにしています。

②ペルソナを設定し、お客様との認識合わせを行いました。想定される利用者の年齢層が30代～40代になるとのことでしたので、アイコン等は多用せずにシックで落ち着いたデザインを心掛けました。

③どこからどこまで荷物を輸送するか決めるまでは荷物情報を入力するエリアを非表示にしたり、入力が必須な項目が全て埋まるまではボタンを押せなくしたりするなどしてユーザの注目を1箇所に集めることを意識しています。システムを利用するユーザの注目を集めることで、迷いを減らせるようなデザインになっています。

初期表示では荷物情報を入力するエリアは表示されていません。

どこからどこまで輸送するか決めると荷物情報を入力するエリアが表示されます。

必須項目である重さとサイズが入力されていないので、Get Quotesボタンが押せなくなっています。

必須項目を入力することでGet Quotesボタンが青く目立つようになり、押せることが直感的にわかるようにデザインしました。

④件数が多いセレクトボックスについては検索機能を追加し、選択肢を探す際にかかる認知負荷を減らすことを意識しました。

出発する国を選ぶセレクトボックスです。
セレクトボックス内でもスクロールバーが表示されるほど件数が多くなっています。

セレクトボックス上部の検索窓に入力すると部分一致する国だけが絞り込まれるような
仕組みになっています。

⑤これまでのシステム開発で培ったノウハウを活かし、開発しづらいデザインをあまり採用しないことで開発コストを削減しました。システムズでは50年の歴史の中で様々なシステム開発を行ってきた実績とノウハウがございます。UI/UXデザインから開発までをワンストップで実施することが可能です。

⑥デザインに関してはFigmaを利用し、デザインにかかる工数も大幅に減らすことができました。お客様との打ち合わせもプロトタイプ機能を利用することで、スムーズに認識合わせをすることができました。プロトタイプ機能とはデザインしたイメージをモックアップのように動かすことができる機能で、どこからどこまで荷物を輸送するか決めた際に荷物情報を入力するエリアを表示する動きなどのイメージをお客様と共有することができました。

おわりに

システムズではこのようなシステムのUI/UXデザインから開発までをワンストップで行うことができます。
UI/UXデザインやシステム開発についてお困りごとがございましたらお気軽にお問い合わせください。