ユーティリティナビゲーションそれがユーザーエクスペリエンスデザインに与える影響

効果的でユーザーフレンドリーなナビゲーションをデザインするために、私たちはどのようにするかについて考える必要はありません。 コンテンツをうまく構成されたメニューにグループ化する ユーザーが自分の欲しいものを簡単に見つけられるようにする方法 サイトとやり取りするために必要なツールを設計する

コンテンツと厳密には関係がなく、ユーザーがさまざまなアクションを実行するのに役立つナビゲーションは、「ナビゲーション」と呼ばれます。 ユーティリティナビゲーション, それは、あまり広くは議論されていませんが、ユーザーエクスペリエンスデザインの非常に重要な側面です。検索バー、ログインおよびサインアップフォーム、購読、共有および印刷ボタン、ショッピングカート、コンテキストメニュー、および言語やフォントサイズの切り替えを可能にするツールは、ユーティリティナビゲーションの典型的な例です。.

それらを設計することは、一見するとそれほど容易ではありません、それは どの要素が必要なのか、どこに配置するのか、そしてそれらをどのように表示するのかを見つけるための配慮が必要 私たちの訪問者がすぐにそれらを見つけて、彼らがどのように働くかを理解することができることを確実にするために.

ユーティリティナビゲーションがUXに与える影響

ユーティリティナビゲーションを設計するときには、ユーザーがサイトと対話する方法を決定する必要があります。我々に彼らに提供する必要があります 相互作用構造 それは私達のビジネス目標に合い、顧客の旅を通してユーザーを導き、彼らに分かりやすい選択肢を与え、そして彼らに心地良いユーザー体験を提供します。.

まず第一に, 彼らは彼らが望む行動を迅速に実行することができる必要があります. そうすることで、顧客満足度が高まり、満足しているユーザーはウェブサイトにより多くの時間とお金を費やすようになるでしょう。.

AirBnBのホームページはこのUXの原則に従い、そのトップメニューにはユーティリティツールしか含まれていません。これは通常の解決策ではありませんが、AirBnBの驚くべき成長率を見れば、それは彼らにとって完璧な選択です。.

4つのトップメニュー項目は、通常AirBnBのサイトにアクセスする4つの主要なペルソナをターゲットにしています。“ホストになる”）、サービスを利用している間に発生した問題を解決したい人（“助けて”）、新規ユーザーおよび返品ユーザー（“サインアップ” そして “ログイン”） AirBnBの実用性重視のホームページには、宿泊施設を借りるWebサイト上の重要なツールであるクイック検索バーも含まれています。.

第二に, ユーザーは余分なユーティリティを必要としません。混乱が大きすぎると注意が邪魔され、焦点が絞られるためです。. 私たちのユーティリティナビゲーションに必要なツールは何か、そして私たちのサイトの性質に依存しないものは何ですか。たとえば、ブログやニュースサイトに印刷ビューを含めると便利な場合がありますが、フォーラムボードやソーシャルメディアWebサイトでは同じ機能が不要な注意散漫になることがあります。.

たとえばWashington Postは、ホームページ上とは異なる方法で、1つの投稿ページにユーティリティナビゲーションを表示します。このようにして、ユーザは関連性のあるユーティリティツールにしか会えず、とにかく使いたくないオプションに悩まされることはありません。.

訪問者がサイト全体で使用したいと思うかもしれない3つの実用的なナビゲーション項目があります。これらは固定トップバー（検索ツール）にスマートに含まれています, “サインイン”, そして “申し込む”ただし、ユーザーは次のような単一の投稿に関連するオプションについて考える必要はありません。 “リーディングリスト” ホームページまたはカテゴリページを閲覧しているとき.

第三に, ユーザーは自分たちのサイトで何ができるかを素早く理解する必要があります。. 訪問者は必ずしも彼らが何を望んでいるのかを知っているわけではないので、私たちは常に彼らが持っているオプションについての情報を彼らに提供する必要があります.

下のスクリーンショットを見てみると、The New York Timesが3つの異なるエディションの入手可能性についてユーザーに知らせていることがわかります。 アメリカ人, 国際, そして 中国語, そしてまたそれらを可能にします すぐに3つの間で切り替える. スマートユーティリティナビゲーションのこの優れた例は、目立たない選択肢を、目立たないエレガントな方法で、自分では見つけられないような、あまり目立たないオプションを示しています。.

最高の場所を探す

ユーザが直感的にこれらのツールを探すユーティリティナビゲーションのための典型的な配置は、それが彼らが大部分のウェブサイトで慣れ親しんだものであるようにあります。 Webデザインの慣例を破ることはユーザーエクスペリエンスの悪い慣行と考えられています、そしてそれはユーティリティナビゲーションには特に当てはまります、ほとんどの場合、それは創造性よりもユーザビリティについてのものです.

ユーティリティナビゲーションは、ほとんどのWebサイトでコンテンツベースのナビゲーションに次ぐものであるため、目立たないが目に見える領域に配置されることがよくあります。これは通常、（1）Webサイトの右上隅、および（2）フッターの下部を意味します。それは これらの規約に従うことをお勧めします, として これらは、ほとんどのユーザーが最初にユーティリティツールを探す場所です。.

以下に示すように、Reutersはほとんどのユーティリティツールを、サイトの右上隅とコンテンツベースのナビゲーションの下のフッター下部の2つの典型的な領域に配置しました。ここでのユニークな解決策は、デザイナーが最も重要だと思った2つのユーティリティアイテムを含む固定の追加フッターです。 “ログインまたは登録” そして “私のワイヤーからの最新”.

興味深いユーティリティナビゲーション領域は、ユーザーが通常似たようなツールを探すような種類のフッターにまだ配置されていることに注目するのは興味深いことです。 ある意味クリエイティブ しかし まだ使いやすさを維持するためにWebデザイン規約に従った.

論理構造を構築する

コンバージョン率の高いサイトを構築する場合は、ユーティリティツールを論理構造にグループ化することが重要です。ユーザーに多くの選択肢を提供したくない場合でも、これは困難になる可能性がありますが、Amazonはユーティリティナビゲーションの複雑さを次のレベルに引き上げます。 Amazonは多くのオプションを含む非常に複雑なユーティリティナビゲーションを持っています, しかし、Amazonを定期的に使用しているのであれば、そうは見えません。. これはスマートデザインの魔法です.

彼らは、ユーザがそれを見つけると期待する右上隅にユーティリティナビゲーションを置くだけでなく、それを3つの主要なグループに分けました：（1）検索バー、（2）ユーザ関連情報（検索バーの下） （3）ユーザーがサイトで実行できる操作.

ショッピングカートや検索アイコンなどの視覚的な手がかりのおかげで、顧客はどのグループを使用したいかを瞬く間に判断でき、それ以降は他の2つを無視できるため、スマートです。グループは1つだけです（“貴方のアカウント”, “プライムを試す”, “バスケット”, そして “欲しいものリスト”論理的に構造化されたサブメニューがあり、さまざまなサブメニューグループは目立たないが目に見える区切り文字で区切られています。.

効果的なビジュアルデザインを作成する

効果的なユーティリティナビゲーションのビジュアルデザインは、有名なKISSの原則に従う必要があります（単純にする、愚かな）。アイコンにテキストラベルを付けたり、コントロールをコントロールのように見せたり、最も重要なアクションを視覚的に強調したりすることをお勧めします。やや異なるデザインを使用してユーティリティとコンテンツベースのナビゲーションを区別することもお勧めです。.

効果的なビジュアルデザインの2つの素晴らしい例は、WalmartとEtsyのWebサイトにあります。設計者は両方のサイトの一番上にユーティリティナビゲーションを配置し、ナビゲーションの他の部分とは異なる色で強調表示した。青色の背景色のWalmart、および青色のフォントのEtsy.

両サイト さまざまなビジュアルデザイン要素を使用して最も重要なユーザーアクションを強調する, Walmartは検索ボタンとサインインボタンに黄色を使い、Etsyはサインインボタンに目立たない青い枠線を付け、カートメニューの上に灰色のショッピングカートアイコンを含みます。.

これはEtsyがユーティリティメニューでアイコンを使用する唯一の場所で、Walmartは各項目の横にアイコンを表示しますが、それでもアイコンの横に必要なテキストラベルを含めることを忘れないでください。.