ユーザーフレンドリーなナビゲーションバーを作る5つのポイント

シンプルなデザインと利便性の高さが人気の「ナビゲーションバー」は、今ではあらゆるアプリやWebサイトで取り入れられるようになりました。

しかし、ナビゲーションバーのデザインひとつでUX全体を台無しにする可能性も。

今回は、ユーザーフレンドリーなナビゲーションバーをデザインするために気をつけたい5つのポイントをご紹介します。

ポイント1. アクティブなタブを強調する

どのタブを使っているのかを明確にするために、利用中のタブは強調表示しましょう。

強調表示するために有効なのが、色の変化やマイクロインタラクションです。

▲出典：UX Planet

Googleはアイコンの色をグレーから青に変えることで、利用中のタブを強調しています。

▲出典：UX Planet

上の例からもわかるように、強調表示にはさまざまなスタイルがあります。

▲出典：UX Planet

Webベースのアプリでも、利用中のタブをわかりやすく差別化しましょう。

ポイント2. アニメーションをつける

アニメーションを設定して、使用感のいいUIを目指しましょう。

▲出典：UX Planet

シンプルなスライドアニメーションやマイクロインタラクションを取り入れるだけで、ナビゲーションバーがぐっと使いやすくなります。

▲出典：UX Planet

色を変えたり、テキストにアニメーションをつけたりするのもおすすめです。

ポイント3. アニメーションを過度に使わない

アニメーションを用いること自体はおすすめですが、それが過度にならないよう注意しましょう。アニメーションは魅力的な要素ですが、やりすぎるとUXを損なってしまいます。

▲出典：UX Planet

アニメーションが長いと、ページをはやく切り替えたいと考えているユーザーをイライラさせてしまう可能性も。

▲出典：UX Planet

アニメーションは、はじめて見るときは新鮮に感じられても、毎日アプリやWebページを使うユーザーにとってはうっとうしく感じられるかもしれません。

毎日サービスを使うユーザーのことを考慮して、あくまで使いやすさを意識しましょう。

ポイント4. テキストよりもアイコンを使う

テキストは、ナビゲーションバーを煩雑なものに変えてしまいます。

ターゲットがある程度デジタルに関する知識を持っている場合は、テキストではなくアイコンを使うようにしましょう。

もしテキストを使う場合でも、短い単語にとどめるのがおすすめです。

▲出典：UX Planet

テキストとアイコンをどちらも表示したい場合は、上のgifのようにアニメーションを使って切り替えてみましょう。

▲出典：UX Planet

または『Spotify』のように、アイコンの下に短いテキストを表示する方法もあります。

ポイント5. できるだけシンプルに

ナビゲーションバーに載せるのは重要な機能のみに絞り、その他の機能へのアクセスはメニューなどに振り分けましょう。

たとえば『Spotify』はナビゲーションバーのアイコン数を最重要機能のみに絞り、その他の機能はメニューから移動できるようになっています。

アイコン数を絞れば、押し間違いなどユーザーの操作ミスを少なくできるのです。

▲出典：UX Planet

上のGIFのように、特定のアイコンをタップするとメニューアイコンが出てくるというデザインは、一見魅力的です。しかしユーザーの立場から考えると、複雑で使いづらく感じるかもしれません。

シンプルに、使いやすく

今回はユーザーフレンドリーなナビゲーションバーを作るためのポイントを5つご紹介しました。もっとも大切なのは、5つめのポイント。

アプリやWebサイト制作ではさまざまな機能を詰め込みがちですが、本当に必要な機能だけを厳選するのが大切です。

（執筆：UI Blogger　翻訳：Nakajima Asuka　編集：泉知樹　提供元：UX Planet）