ナビゲーションバーは、サイトでもっとも大切な要素の１つです。ユーザーは必要なコンテンツを探し出すとき、ナビゲーションバーを頼ります。ナビゲーションバーのボタンを正しくデザインしなければ、ユーザーに無駄な作業をさせてしまうかもしれません。
間違ったデザインだと、ユーザーがナビゲーションフローのどこにいるのかわからなくなり、困惑してしまうことがあります。また、ラベルやクリックボタンが読み取れないような間違いもあるでしょう。
これからナビゲーションバーのボタンのデザインで犯しがちな間違いを５つ紹介します。これらの間違いを犯している場合は、ナビゲーションバーをすぐに修正しましょう。
１. 選択したボタンが強調されない
多くのデザイナーは、ナビゲーションバーで選択したボタンを強調するようにデザインするのを忘れています。ユーザーはボタンをクリックする際に、選択したアクションに対して視覚的なフィードバックが必要です。
この機能がなければ、ユーザーはタスクフローのどこにいるのかがわからなくなってしまいます。似たような別のページを開いていることに気付かないこともあるでしょう。
選択したボタンを強調する際には、形と色の両方のコントラストを使いましょう。色のコントラストだけでは、視覚障害を抱えるユーザーにとって識別しにくくなってしまいます。
形を使って強調する一般的な方法として、ラベルの下部に目立つように下線を引いたり、ラベルの周りに輪郭の線をつけたりして目立たせることが挙げられれます。このとき、ナビゲーションバーにあるCTAボタンと間違われないようにしてください。
ボタンのラベルは、メインページの見出しとしても機能します。しかし、ナビゲーションバーで強調して目立たせることで、混同を避けることができるでしょう。
２. 選択されたボタンのコントラストが弱い
多くのサイトは、選択したボタンを区別するために設定している色のコントラストが不十分です。そのため、ユーザーがサイト内の階層のどこにいるのか把握しにくくなっています。
色のコントラストがわかりにくいと、ボタンのラベルが読みにくいので、ユーザーは自分がどのボタンをクリックしたのか記憶しなければなりません。ユーザーが選択したボタンを視覚的に認識できるように設定されていれば、そのプロセスをはるかに速く処理できます。
選択されたボタンは、すべてのボタンの中でもっとも目立つように色のコントラストを設定してください。このように設定することで、ユーザーがアクティブなボタンを一目で認識できるようになります。
ボタンのラベルと背景のコントラストの比率を確認するためにコントラストチェッカーを使用しましょう。
３. アクティブではないボタンのコントラストがわかりにくい
アクティブではないボタンの色のコントラストは、選択されたボタンのコントラストより目立たないようにしてください。しかし、ラベルが読みにくくなるほど目立たなくしてはいけません。ラベルが暗すぎると、ユーザーがボタンを見失ったり、ボタンが無効になっていると勘違いしたりします。
４. ラベルの周囲までクリックできるように設定されていない
ナビゲーションバーのボタンとボタンの間にはスペースがあります。この周囲のスペースもクリックができるように設定してください。こうすることで、ボタンのクリックターゲットが大きくなるので、ユーザーはより素早く移動ができます。
５. ボタンにホバー効果が設定されていない
ナビゲーションボタンにホバー効果を設定すると、ユーザーはクリックしやすくなります。ホバー効果を設定すると、ユーザーはマウスのカーソルがクリック可能な領域にあるかどうかを判断できるようになります。ホバー効果がなければ、ユーザーはボタンラベル上に常にカーソルを当てなければならないと推測して、クリックしなければなりません。結果的にクリックターゲットが小さくなり、ユーザーに正確なクリックを要求することになります。
すべてのユーザーがマウスを使用するわけではありません。キーボードを使用してスクリーンリーダーで操作するユーザーには、選択肢を移動するときにフォーカス効果が必要です。フォーカス効果は、あらゆる種類のクリック可能な要素につけるアクセシビリティとして優れています。
ナビゲーションバーのボタンを正しく設定しましょう
ユーザーはサイトを閲覧するために、訪問して最初にナビゲーションバーをクリックすることが多いです。ユーザーは、今自分がサイトのどこにいるのか、どこに行くことができるのかを知るために、ボタンをクリックしたアクションに対して、視覚的な手がかりを必要とします。
紹介してきたような典型的な間違いを避けて、直観的に使用できるボタンを心掛けましょう。ナビゲーションバーに視覚的な手掛かりがないと、ユーザーのエンゲージメントが低下してしまいます。ユーザーは、暗闇の中を探索しなければなりません。
