ナビゲーションデザインについて


即離脱は避けたい

 
みなさんはスマホ閲覧の際、操作が分かりにくく、あきらめてしまったことはありますか。使い勝手の良さはサイトの評価基準のひとつで、そのためのナビゲーションデザインです。そこで弊社がどのように操作性向上を目指しているか、ナビゲーションツールを例にご説明します。
 

そもそも、なぜ閲覧をあきらめてしまったのか?

 
主な要因として考えられるのは、
 
1、全体像が把握しにくい⇒発信側の情報意図が伝わっていない
2、ネーミングがイメージしにくい⇒タップに躊躇
3、位置関係が分かりずらい⇒迷路状態
 
シンプルに迷うことなく、情報を行き来できるナビゲートがベスト。なんて言葉で書くのは簡単だけど、整理しながら進めないと堂々巡りなんす
 
 工夫 
ユーザーを迷わせない、独自のチェック項目を設けます。
 
(もう迷わない)

小難しくないネーミング
toC toBにもよりますが、業界用語はなるべく使わない。
 
タップできることが一目で分かる
文字の大きさ、リンク色でメリハリをつける
 
タップした後の状態がイメージ通り
ネーミングとリンク先タイトルを一致させる
 
コンテンツをひとまとまりにする
関係のない情報を入れない、近づけない
リスト型・ヘッダー・フッターメニューの設置
 
位置を分かりやすくする
アイコン・キャッチマークを添える
 
ユーザーがサイトのどこにいるか明確にする
パンくず・ナビゲーションバーの設置
 
サイトボリュームの調整
アコーディオン

 
(視覚要素も加味しながら)
カラー、ボタン、キャッチマーク、アイコン、タイポグラフィー、罫線、形態、地紋、イラスト・写真、画面分割
 
ナビゲーションと視覚要素が組み合わさってはじめて、フォーマットが確定します。

まずは3クリック、1分滞在を目指して


もしスマホ操作で流れが悪いとお感じなら、顧客や身近な人に感想を聞いてみてはいかがでしょうか。
 
アプリやサイトは使い込まないと、良し悪しは分からないです。デザイナーの意見も大切ですが、よく使うサイトを参考に、デザイナーに提案するのも一考です。根底にあるUIデザインは、ユーザについて探究することが重要で日進月歩です。弊社の場合、高度な技術は提供できないので、シンプルに迷うことのない  Mobile User Interface を目指します。
最後に弊社が使っているナビゲーションツールをご紹介します。
 

1、グローバルナビゲーション

サイトの一番上にあるメニューのこと。主な種別は、情報、機能、対象者、状況別等。ユーザーはこの塊を起点に目的を達成します。
 

2、ローカルナビゲーション

グローバルナビゲーションの下、またはサイドに設置。ローカルナビゲーション内(下層)の移動が可能になります。
 

3、補足ナビゲーション

別視点から関連するページへのリンク群。
 

4、リスト型メニュー

スマホサイトでよく見かけます。右上や左上のボタンから展開するメニュー。コンテンツをひとまとめにします。
 

5、スライダー

サイトにアクセスすると、ファーストビューが目に留まります。複数画像が切り替わり、情報が網羅できます。
 

6、フッターメニュー

サイトの最下部領域。利用頻度は少ないので、大切なコンテンツ群を再度アピールしてもよろしいかと。
 

7、パンくずリスト

下層ページで使用。利用者が辿った足跡が表記されます。これはユーザーが今サイトのどの位置にいるかを把握できるもの。ページ数が多いサイトで重宝します。
 

8、アコーディオン

スマホサイトでスペースを節約できます。表示・非表示の切り替えが自由で、見たい人だけが、表示にして見ることができます。
 

9、プルダウンメニュー

ボックスをクリックすると各項目が表示され、選択できるメニュー。タップしないと認知されないので、情報が網羅されない点は留意が必要です。
 

実際制作する際は、サイトとコンテンツの関係性を考えチョイス。必ず使うわけではなく、補助ツールとお考えください。それではまた!


サイト制作のご用命喜んで!

 
© 2010 kosakatakeshi shoten inc
東京都大田区西馬込2-21-1
芹沢ビル1F

VISUAL

ビジュアル