ビジネス

July 11, 2020

UX
UI

UXを実現させるWebサイトの振る舞いと顧客に寄り添ったUIのサンプル例

post 49

前回記事 の事例以外にも、以下書籍では色んな企業サイトを例に、Webサイトの振る舞いについて説明しており、今まで思いつきで対応していたUIを考え直すキッカケになった。


例えば サイト内検索 では、製品カテゴリを入力すると、型番まで連動して表示されるサジェスト機能を提供。これによって、詳細を細かに記憶していないユーザーも、目的のページへ素早く辿り着ける。

「目的の情報が探しやすく・見つけやすい」 という体験をUIで実現する方法は、過去私が携わったシステム開発の現場でも多く見受けられたが、本書では他にも色んな事例が紹介されている。

複数の検索軸を提供

検索軸について、従来は「製品情報」のメニュー下で「製品大カテゴリ → 製品中カテゴリ → 製品小カテゴリ」のようにドリルダウンさせ、目的の情報を見つけるルートは1つしかないサイトが多かった。

しかし数年前から、グローバルナビゲーション上に アプリケーション(ガイド) を表示させ、「携帯電話用 / 車載用 / 医療機器用」と用途別に “複数の探すルート” を用意 する。

ナビゲーションに慣れ親しむ人からすれば、ナビゲーションの無いWebサイトは不便だと感じ、サイトを利用しなくなる可能性は十分考えられるため、必須施策の一つに思える。

また目的の情報を見つけやすくする施策に 事例紹介 があり、これは課題解決の方法を具体的に理解でき自分事化しやすい。購買検討に大きな影響力を発揮するコンテンツだと言われている。

そのため単に事例を紹介するのではなく「テーマから探す / 業界・職種から探す / 工程・作業から探す / 製品から探す」と複数の検索軸を提供すれば、より利便性を向上させる施策の一つとなると紹介。

世の中の企業HPを確認してみると、大体が上のように対応されている印象。

製品詳細ページとお問い合わせのふるまい

製品詳細ページとお問い合わせについても、典型的な良い事例が紹介されていた。

例えば製品詳細ページから「ご相談 / 見積もり」ボタンを押下しページ遷移する際、詳細ページの「商品名」が引き継がれる ことで、ユーザーは「何に問い合わせをしようとしていたか? 何の商品名だっただろう?」と、再度詳細ページに戻る必要がなくなり、ストレスなく快適なUXを実現出来る。

また各詳細ページで、製品詳細情報のみを印刷出来る ようにすれば、稟議書や製品比較文書に添付する際、そのまま添付出来るので、ユーザーの利便性はより向上。

営業支援機能が期待されるお問い合わせページでは、旧来の単に「お問い合わせ」ボタンを提供するのではなく「お問い合わせ / 価格・見積依頼 / 無料テスト機貸出 / 修理・代替機即納」と目的別に用意 することで、ユーザーのフォーム文章作成の手間を省く効果が見込める。

この施策によって「価格・見積依頼 / 無料テスト機貸出」のような引き合いの強いリードには、営業部門に直接対応し「修理・代替機即納」はサポート部門に連絡が行くような体制を取ることも可能。

トップページ

最後に個人的に一番悩むトップページについて、限られたスペースで何を表示させるかは重要な話。

本書では メガドロップダウンナビゲーション が紹介されており、これはページ遷移せずとも、第2階層や第3階層の情報が表示されるため、ユーザーは目的の情報に辿り着きやすいと思われる。

また最後に ユーザーが訪問目的を達成しやすいWebサイトの要件 がまとめられていた。

・訪問者が必要としている情報がある.

・その情報は見つけやすい(分かりやすい / 使いやすいUI)

・その情報は分かりやすい(分かりやすい言葉遣い / 色使い / 表現)

・その情報が役に立つ(課題解決に有効)

・その会社に決める理由がある(競合他社との差別化 / 優位性)

・そのWebサイトは問題なく操作でき、閲覧できる(標準技術で構築されている)


なんとなくのUI設計から、本ブログも上記観点で見直しが必要だと痛感した。


©Copyright2020 TaNA LABO. All Rights Reserved.