最適なナビゲーションが決まらない！デスクリサーチで決め手を探してみた

こんにちは、UXデザイナーの小野です。情報設計を始めて早くも2年が経ち、お客様と直接やりとりする機会が増えてきました。

皆さんは、複数のデザイン案を用意しても、どのデザインが良いか決まらず困ったことはありませんか？

私も、最近そのような経験をしました。 そこで、デザインの決定に悩んだときに私が行ったリサーチと、その結果から得られた合理的な説明に基づく意思決定の事例を紹介したいと思います。

どんな事例か

今回の事例は、Webサイトのスマホの画面表示においてヘッダーの構成を決めることでした。 主な論点は、ヘッダーに置きたい要素をどの順番でどこに置くかについてです。 要素はサービスロゴ、ハンバーガーメニュー、検索ボタン、会員登録、ログインの5つでした。

並べ方を変えたいくつかの構成パターンを用意して会議に臨みましたが、最適な構成を決めることができませんでした。 なぜなら、ハンバーガーメニューをどちらに配置するのが適切か判断する根拠が不明だったためです。 そこで、そのサービスのユーザーにとって最適な場所を特定する必要があると考え、リサーチを行うことにしました。

どんなリサーチを行ったか

では、ユーザーにとって最適なヘッダーの構成を知るために行ったリサーチの流れをご紹介します。

リサーチの手順

• 1.画面を実際に触って操作し、操作性を評価する。
• 2.ヘッダーのユースケースを洗い出し、行動の優先順位を整理する。
• 3.ハンバーガーメニューの位置をどの軸で決めるかを考える。
• 4.3で決めた軸での最適な位置をリサーチする。
• 5.得られた結論をまとめて最適な構成を提案する。

1.画面を実際に触って操作してみる。

まずはプロトタイプを作成し、画面を触って操作感を確かめました。最終的に、合理的な判断を手助けする要素として実際に触ってみることは重要でした。

🔍分かったこと

右側に配置するのが良さそうですが、他の要素との兼ね合いは考慮できていないと思いました。 そこで、他の要素との兼ね合いを考えるため、ヘッダーのユースケースを洗い出すことにしました。

2. ユースケースの洗い出し、優先度をつける

ユーザーがこのサービスで目的を達成できるような構成にするために、ヘッダーのユースケースを洗い出し、要素の位置を検討しました。

🔍分かったこと

検索ボタンとハンバーガーメニューは、記事を探す目的に使用されるため、同じ目的の要素はまとめても問題ないと気づきました。その結果、ハンバーガーメニューに検索ボタンを組み込む案が出てきました。 ただ、検索ボタンとハンバーガーメニューでは検索方法が異なるため、検索ボタンの使用頻度が高い場合は、まとめない方が良いという考えに至りました。

❓未解決の課題

ハンバーガーメニューを右に置くか左に置くかの最適な位置

3.ハンバーガーメニューの位置をどの軸で決めるかを考える。

要素の関係性は見えましたが、ハンバーガーメニューを右に置くか左に置くかの最適な位置がまだわかっていません。そこで、どの軸で構成の良し悪しを判断するべきかを考えました。

今回は「このサービスのユーザーが慣れている位置」とし、ユーザーが違和感なくメニューを使える適切な配置を把握することを目的にリサーチを行いました。

4.ユーザーが慣れている位置を軸に最適な位置をリサーチする。

主に3つのリサーチを行いました。

• ユーザーが使い慣れているサービスや類似サービスの傾向を調査。
• 推奨されている位置やデバイスのトレンドを調査。
• スマートフォンの持ち方を調査し、ユーザーに最適な位置を見つける。

①ユーザーが使い慣れているサービス・類似サービスの傾向

シミラーウェブで、ユーザーが使い慣れているサービスを調査する

調査した結果、使い慣れているサービスのメニューが左上に多いことが分かりました。しかし、似たようなサービスのメニューは右上に多いことが判明し、どちらを選ぶべきか非常に迷いました。

自分で調査する

そこで、自分でも調査した結果、右側に配置されているものが８割を占めていることを発見しました。 しかし、左上に配置されているものも2割ほどあり、多数が右にあるから右にするという判断も妥当性に欠けると感じました。

🔍分かったこと

右側に配置されているものが８割を占めていることから、右側に配置するのが適切であると考えましたが、この結果だけでは十分な説得力に欠けるのではないかと感じました。

②推奨されている位置とデバイスのトレンド

ユーザーが使い慣れているサービスから選ぶだけでなく、推奨される位置やトレンドに合わせることも大切だと思いました。そこで、今どのようなトレンドがあるのか調査しました。

その結果、以下のようなトレンドがありました。
・マテリアルデザインでは左上にハンバーガーメニューの配置を推奨している
・Safariの検索エンジンが、下に配置された
└理由：現在のスマホデバイスは「画面を大きく、長くする」傾向にあり、上部にあるボタンが押しにくくなっているため

🔍分かったこと

ユーザーの利用デバイスの傾向も最適な位置に影響することがわかりました。

しかし、今回のサービスにおいては、ユーザーの利用デバイスがあまり大きくなく、さらに画面下に重要なコンテンツがあったため、Safariの検索エンジンのような下部へのメニュー配置はしないという判断になりました。 トレンドを把握した上で、そのサービスの利用状況に応じた柔軟な判断をすることが重要だという気づきがありました。

③海外と日本の利き手のバランスの違い(左利き、右利き)

海外と日本の、スマホの持ち手と操作する指の違いについても調査しました。

この調査結果から、スマホの持ち手について、左手持ち優位な国は日本・中国・韓国だけであり、そのほかの国はほとんど右手持ちが主流ということがわかりました。

調査結果によると、日本では最も一般的なスタイルは「左手持ち・右手人さし指操作」であり、全体の25.6％を占めています。しかし、他の10カ国ではこのスタイルが主流の国は一つもないことが判明しています。

また、最も多かったのは「右手持ちで左手親指操作」で、その割合は20.8％でした。次いで、「左手持ちで左手親指操作」が15.5％で、「右手持ちで右手親指操作」が14.0％と、片手で操作できるスタイルが続いていました。

🔍分かったこと

全体的に左手操作が多い中で、日本では右手での操作が多い傾向にあります。そのため、ハンバーガーメニューは右側に配置することが適していると言えそうです。 ただし、年代によって操作する手が変わるため、サービスのユーザーの年齢層に合わせた傾向を参考にしました。

以上、他の要素との兼ね合い、ユーザーの国籍、年代、使用しているデバイスと、調査で分かった傾向を照らし合わせて取捨選択を行なって、位置を決定しました。

最後に

今回は、ヘッダーの最適な構成を決めるために、まずはヘッダーのユースケースを整理しました。その上で年代や国籍、利用デバイスといったサービスのユーザーの傾向やトレンドを考慮して構成を決めていきました。ユースケースを考えたことで、要素の並べ方について新たな発見があり、改めてユースケースを整理する重要性を感じました。

また、当たり前ではあるのですが、国によって利き手の割合が違ったり、年齢によって手の大きさが違うので、どういうユーザーなのかを把握した上で構成を考える大事さを感じました。

• #デザイン
• #UX
• #情報設計（IA）
• #リサーチ
• #デザイナー