ナビゲーションデザインについて
即離脱は避けたい
みなさんはスマホ閲覧の際、操作が分かりにくく、あきらめてしまったことはありますか。使い勝手の良さはサイトの評価基準のひとつで、そのためのナビゲーションデザインです。そこで弊社がどのように操作性向上を目指しているか、ナビゲーションツールを例にご説明します。
そもそも、なぜ閲覧をあきらめてしまったのか?
主な要因として考えられるのは、
1、全体像が把握しにくい⇒発信側の情報意図が伝わっていない
2、ネーミングがイメージしにくい⇒タップに躊躇
3、位置関係が分かりずらい⇒迷路状態
シンプルに迷うことなく、情報を行き来できるナビゲートがベスト。なんて言葉で書くのは簡単だけど、整理しながら進めないと堂々巡りなんす
工夫
ユーザーを迷わせない、独自のチェック項目を設けます。
(もう迷わない)
小難しくないネーミング
toC toBにもよりますが、業界用語はなるべく使わない。
タップできることが一目で分かる
文字の大きさ、リンク色でメリハリをつける
タップした後の状態がイメージ通り
ネーミングとリンク先タイトルを一致させる
コンテンツをひとまとまりにする
関係のない情報を入れない、近づけない
リスト型・ヘッダー・フッターメニューの設置
位置を分かりやすくする
アイコン・キャッチマークを添える
ユーザーがサイトのどこにいるか明確にする
パンくず・ナビゲーションバーの設置
サイトボリュームの調整
アコーディオン
(視覚要素も加味しながら)
カラー、ボタン、キャッチマーク、アイコン、タイポグラフィー、罫線、形態、地紋、イラスト・写真、画面分割
ナビゲーションと視覚要素が組み合わさってはじめて、フォーマットが確定します。
まずは3クリック、1分滞在を目指して
もしスマホ操作で流れが悪いとお感じなら、顧客や身近な人に感想を聞いてみてはいかがでしょうか。
アプリやサイトは使い込まないと、良し悪しは分からないです。デザイナーの意見も大切ですが、よく使うサイトを参考に、デザイナーに提案するのも一考です。根底にあるUIデザインは、ユーザについて探究することが重要で日進月歩です。弊社の場合、高度な技術は提供できないので、シンプルに迷うことのない
Mobile User Interface を目指します。
最後に弊社が使っているナビゲーションツールをご紹介します。
1、グローバルナビゲーション
サイトの一番上にあるメニューのこと。主な種別は、情報、機能、対象者、状況別等。ユーザーはこの塊を起点に目的を達成します。
2、ローカルナビゲーション
グローバルナビゲーションの下、またはサイドに設置。ローカルナビゲーション内(下層)の移動が可能になります。
3、補足ナビゲーション
別視点から関連するページへのリンク群。
4、リスト型メニュー
スマホサイトでよく見かけます。右上や左上のボタンから展開するメニュー。コンテンツをひとまとめにします。
5、スライダー
サイトにアクセスすると、ファーストビューが目に留まります。複数画像が切り替わり、情報が網羅できます。
6、フッターメニュー
サイトの最下部領域。利用頻度は少ないので、大切なコンテンツ群を再度アピールしてもよろしいかと。
7、パンくずリスト
下層ページで使用。利用者が辿った足跡が表記されます。これはユーザーが今サイトのどの位置にいるかを把握できるもの。ページ数が多いサイトで重宝します。
8、アコーディオン
スマホサイトでスペースを節約できます。表示・非表示の切り替えが自由で、見たい人だけが、表示にして見ることができます。
9、プルダウンメニュー
ボックスをクリックすると各項目が表示され、選択できるメニュー。タップしないと認知されないので、情報が網羅されない点は留意が必要です。
実際制作する際は、サイトとコンテンツの関係性を考えチョイス。必ず使うわけではなく、補助ツールとお考えください。それではまた!
VISUAL
ビジュアル
─