はじめに
サイトを利用した時、こんなUXになったらいいのに。と思ったことありませんか。
ここでは色々なシステムやサイトのUX改修を勝手におこない、より良いユーザビリティを目指し、提案します。
今回はヤマト運輸株式会社のサイトについて考えてみました。
本記事では「クロネコヤマトの荷物お問い合わせシステム」のスマホ画面を改修します。
- 商号
- ヤマト運輸株式会社（YAMATO TRANSPORT CO., LTD.）
- 資本金
- 500億円（2020/4現在）
- 従業員数
- 183,249名（2020年3月31日現在）
- 業界
- 「宅急便」など各種輸送に関わる事業
現状の課題/改修の方向性
今回ターゲットにした「クロネコヤマトの荷物お問い合わせシステム」は、配送の追跡が複数（最大10件）同時にできることが特徴です。ネットショッピングの普及が増えた現在、フリマアプリやECサイトのリンク、検索サイトからの流入で、ユーザー数・PV数も大規模であることが推測できます。
昨今のヤマト運輸のサービスはアプリ対応・LINE連携・PayPay連携など急速にIT化が進んでいます。質の高いユーザビリティのサービス提供が多い中、この画面においては、未だスマホに最適化された状態にはなっておらず、スマホユーザーにとっては見づらいUXUIです。
スマホに最適化されていないため、情報の配置やサイズにばらつきがあり、小さく見づらい文字が多く見受けられます。そのため最初にしたい行動である、伝票番号を入力する部分に目がいきません。
また、問い合わせ結果の表示がとても小さく、現在のステータスをすぐに認識することができません。この状態ではユーザーへの負担になってしまいます。
そこで、ユーザーにとって「見やすい」「使い勝手がいい」サービスにするための改修案として以下を考えました。
- スマホに最適な画面にデザイン改善
- 幅広い年代のユーザーが、多くの情報を感覚的に理解できるデザイン改善
- 分かりやすく使いやすい機能の設計
- 親しみやすさ、楽しさをブランディングを用いて表現
- ユーザーに有益な情報を、最適なタイミング・位置に表示
まずは以下の画面案をご覧ください。
改修案
今回の修正箇所です。
- 画面全体での調整は、優先順位の高い内容は、上部に配置しました。わかりやすい文言・文字サイズ・色のコントラストの強弱・影をつけ立体感とメリハリを出しました。
- ヘッダーは、ホーム・ご利用方法・注意事項の3つをアイコン表示にし、わかりやすく、押しやすいサイズに変更し、右側にまとめて配置しました。
- 詳細情報の有無・お問い合わせ開始ボタン・クリアボタンを削除しました。
- 「枠の中にお問い合わせ伝票番号を入力してください。」の文章を、「（箱のアイコン）荷物のお問い合わせ」に変更しました。
- 伝票番号の入力欄をスマホに適したサイズに変更しました。10件表示から、初期画面では１件表示し、（＋）の丸ボタンを設置しました。※入力欄を10件表示せずに、ボタンを設置することで、ファーストビューはお知らせ部分まで表示されます。これにより、下部の情報まで見ることができます。また、配送状況の表示時、10件分の入力欄が上部に固定されていると、スクロールが多く、ユーザーにとっては煩わしく感じることでしょう。配送状況はできるだけすぐに知りたい情報です。スクロール数が最小限になるように設計しました。
- 「問い合わる」ボタンを設置しました。
- お問い合わせ伝票番号・日付・配達状況のテキストの表の項目を削除しました。
- 「お知らせ」の項目を設置しまとめて記載しました。
- 「クロネコヤマトの荷物お問い合わせシステム」のテキストを削除しました。
- JIT BOXチャーター便のロゴと文章とリンクの部分は、上部のバナーと同じサイズのバナーにスタイルを変更しました。
- ４つのバナーを画面下部に集めて設置しました。
- 「▲先頭に戻る」リンクを丸ボタンに上向き矢印のボタンに変更し、スクロールしてしばらくしたら追従する挙動を加えました。
- 「詳細情報」を「（トラックのアイコン）配送状況」に変更しました。
- カード状にしました。
- 表示されるときにアンカーリンクで画面上部に表示されるように設定しました。
- 伝票番号・ステータスを大きく表示しました。
- ステータス部分にブランディングを意識したデザインを含ませしました。
- 表になっている箇所を「配達状況詳細」とし、アコーディオンにして、閉じました。
- 詳細印刷ボタン、ページネーションを削除しました。
- クロネコメンバーズ登録バナーのデザインはリンク先のイラストを引用し、遷移先のイメージと統一させました。テキストだけではなく、イラストとロゴを含む構成にしたことにより、視覚伝達の質を高めました。
UIコンセプト
今回の画面で最も重要な箇所であり、大きな改修をしたのは、配達状況のデザインです。
- 「問い合わせる」ボタン押下後、アンカーリンクで表示される仕様にしました。
- 「荷物（＝伝票番号）」の「現在の状況（＝ステータス）」を瞬時に認識できるように、伝票番号・ステータスを大きく表示しました。
- クロネコヤマトならではの足跡やネコ型をアイキャッチとしてあしらい、親しみやすさ・楽しさ・わかりやすさを追及しました。
- 詳細部分を全て表示すると、大きな面積になって画面を占領します。限られたスマホ画面のスペースを、無駄なく活用するため、詳細部分はアコーディオンにおさめました。
- 投函される不在通知には、送り主名の記載はありますが、品名の記載がありません。「送り主名だけでは品物が何かわからない(忘れてしまった)ので事前に知りたい。」というユーザーの声が一定数あることが確認できたため、実際の画面にはありませんが、配送状況の詳細に「送り主」と「品名」を追加しました。
まとめ
昨今のニュースでは送り付け詐欺等の被害報告も発生しております。心当たりのない送り主や品物に早い段階で気づき、未然に被害を防止できれば、送り主と品名の情報は、ユーザーにとって有益と考えました。
そして忙しい配送員の方々の移動コスト削減にも繋がれば、今後ユーザーにとってさらに良いサービスになることが期待でき、ユーザーの満足度の向上に繋がるかもしれません。
このようにユーザーの目線に立ち、「どこがストレスなのか」「求めているものは何か」を把握し、改善していくことがUXデザインの鍵となります。
【今すぐにでもデザイン思考を重視したプロジェクトを推進したい場合は】
UXデザインコンサル会社 / Webコンサル会社へ業務を委託するというやり方が考えられます。
幅広い業種・規模での経験があるUXDoctorでは、経験に基づきUI/UXデザインコンサル会社の選び方を無料公開しております。
UI/UXデザインコンサル会社の選び方を無料公開してます。
どんな基準で、何を見ればいいか分からない方におすすめです。
