グローバルナビゲーションは最後に作れ

イラスト:Mai Kosoba

よくあるグローバルナビゲーションの作り方の落とし穴

受託案件の中に「検索結果ページだけ」「詳細ページだけ」の依頼をされることがあります。
UX DAYS TOKYOの運営母体のWDEでは受託をメインに行っていないので基本はお断りするのですが、知り合いの制作会社から受けることがあります。

UXが注目されている時代に、なぜ、グローバルナビゲーションが先にあり、あとからコンテンツページをバラバラに発注するのか理解ができません。こんなやり方では、ユーザー導線を考慮したデザインになることはありません。ユーザーが見たい・知りたいコンテンツを整理していないのに、グローバルナビゲーションを作ることなどできません。

当然使いにくい、どこにいるのかわからない、リンクだらけ、ボタンだらけのサイトが実装されてしまい、一見綺麗なサイトのように見えてもユーザーにとっては、情報が見つけづらい・使いにくいサイトとなってしまうのです。

設計されていないナビゲーションで見られる問題

情報設計を行わずにグローバルナビゲーションを作成しているサイトに共通している問題として、トップページからリンクしているページにしか回遊しないという現象がおきます。

アクセス解析を見ると、どのページで離脱しているかはわかりますが、なぜ離脱したのかを知ることはできません。ヒートマップを見て予測する、ユーザーを呼んでインタビューする他ありません。

ユーザーの行動はアクセス解析を見なければわからないこともありますが、何も設計せず、ユーザーが使わないナビゲーションが羅列しているサイトのアクセス解析結果だけを見ても具体的な改善案はでてきません。

大企業のサイトや検索サイトこそ、情報設計&UXデザインが必要

グローバルナビゲーションの役割は単なるナビゲーションだけではなく、ユーザーがwebサイトの概要を素早く把握してどのような情報が含まれているのかを予測することもできます。

例えばグローバルナビゲーションに「ネットストア」「店舗情報」とあった場合は顧客向けのものであると予測し、「プレスリリース」「投資家情報」とあった場合は法人向けのものであると予測します。

項目数が多くなる大企業サイトや検索サイトは、適切に情報設計を行わないとユーザーが迷い離脱する原因になります。
大規模な企業サイトは特に、ページごとに担当者が異なることも多いので、グローバルメニューと分離されてしまうことがあります。

ユーザー視点のグローバルナビゲーションの作り方

グローバルナビゲーションは、webサイトに訪れるユーザーが利用しやすく、主要なコンテンツに導ける項目にする必要があります。

サイトストラクチャ(webサイト全体の構造)の最上位階層をもとに構成することもあれば、機能別や対象者別にすることもあります。目的に応じて構成や並び順を考えましょう。

ユーザーにとって情報が見つけやすく使いやすいグローバルナビゲーションを作るためには、ユーザーがどのような情報を知りたいのか、情報をどのようなグループ・カテゴリで捉えているのかをまず調べる必要があります。その上で情報設計を行い、一番最後にグローバルナビゲーションを作成します。

ナビゲーション作成のために役立つ、情報を分類する手法には以下があります。

  • カードソーティング
  • メンタルモデルダイアグラム

カードソーティング

情報をカード状にして並べ、分類や分析を行なう手法です。
カードソーティングは以下の手順で行います。

  1. 棚卸しした情報をカードに書き起こす
  2. カードを並べ替え・グループ化する
  3. カードのグループに名前をつける

一連のカードソーティングの作業は、複数の関係者やユーザーと共同で行なうことで、よりユーザー視点での情報の整理ができます。
簡易的であれば1人でもカードソーティングを実施することができます。
ページコンテンツで伝える情報をカードとして分類し、グループにつけた名前とグループ内の情報コンテンツをそのままグローバルナビゲーション表記とサイト構造に活用すれば、ユーザーにとってわかりやすいナビゲーションになります。

(参考: ノンデザイナーでもわかる UX+理論で作るWebデザイン

メンタルモデルダイアグラム

メンタルモデルとは心理学用語で「個々人が持つ対象のイメージモデル、実世界を認識するための自分なりの枠組み」という意味です。
(詳細解説:メンタルモデル

サービス提供者とユーザーとでシステムに対する理解が異なっていることが多いため、情報設計の際にはこの認識のずれを意識する必要があります。

メンタルモデルダイアグラムは、ユーザーのメンタルモデルを可視化する手法です。
ユーザーへのインタビューやワークショップを通じて得られたユーザーの発言や反応、思考を抽出し(ボックス)、親和性のあるものをまとめ(タワー)、そのタワーで親和性のあるものをまとめメンタルスペースとして図で構造を表現します。

一般的に、メンタルモデルダイアグラムにはこのような特徴があります。

  • システム・ツールではなく人間に焦点を当てる
  • 個人的な意見や好みを反映しない
  • インタビューやワークショップを実施してからダイアグラムを作成し分析するため時間がかかる
  • 一度作成すれば何年も利用できる

メンタルモデルダイアグラムのアプローチで情報を整理すると、ユーザーが思い描いているメンタルモデルに合致し、ユーザーが実際に発言した言葉が反映された「カテゴリー化された情報」が得られます。
そのカテゴリー化された情報に基づいてナビゲーションをデザインすれば、使い勝手が良く、何年も利用できるナビゲーションになるでしょう。
(参考:マッピングエクスペリエンス ―カスタマージャーニー、サービスブループリント、その他ダイアグラムから価値を創る

関連記事

UXにおけるIAの重要性 | UX DAYS TOKYO

この記事を書いた人:Mai Kosoba

北海道出身、大阪在住のデザイナーです。よく東京の勉強会にも参加しています。
UXについてまだまだ勉強中ですが、学んだことをシェアしたり関西圏での勉強会を開催していきたいと考えています。
読書・着物・旅行・美術鑑賞・ゲームが好きです。