本日はソフトウェアのナビゲーションについて。
要は「いかにユーザーに目的の操作まで少ない経路でたどり着いてもらうか」に関してです。
Contents
移動距離は常に短く＆クリック回数は少なく
当たり前ですが、目的の操作までは少ない移動コスト、クリック数でいけるのがベスト。
どうやったらコンテクストの切り替えなしでたどり着けるのがベストか常に考えてみましょう。
ナビゲーションの具体的なポイント
明快な入口
インターフェイスの入り口は少なく、できるだけ明快に。
入り口で何をすればいいか、どこにはいればいいかわからないような入り口はやめましょう。
例 Googleのトップ画面
グローバルナビゲーション
大規模なアプリケーションの場合、ユーザーが各コンテンツ同士を行き来したい場合、なおかつ空間的に余裕がある場合、グローバルナビゲーションがあると移動がしやすい。
ハブとスポーク
アプリケーションの各セクションをミニアプリケーションとして独立させる。空間的なスペースに余裕がない携帯端末で多い仕様。空間スペースに余裕がある場合はグローバルナビを使ったほうが良い。
例 携帯端末のトップ画面と各アプリケーションの画面
ピラミッド
一連のページを進む、戻るのリンクでつなげる。各ページから相互リンクされているページと組み合わせてる。
例 書籍の各章やスライドショーなど連続するページ群を含む場合。
モーダルなパネル
ユーザーが課題を解決するまで、ナビゲーションの選択肢を省いた1ページだけを表示する。
その場ですぐ終わるような入力処理、また一時的にユーザーの選択肢を制限するような処理
例 一般的な確認行為全般
シーケンス表示
連続しているページ群にて、現在は個々の表示を含んだページのマップ
例 テキストなどの読み物やウィザード
パンくず
階層構造を含んだページ群。各要素の間にあまり関連性やつながりがない場合によく使われる。
例 一般的なWEBサイトのナビゲーション
注釈付きスクロールバー
スクロールバーにコンテンツマップまたは現在地はここという2種類の役割を持たせる
例 スクロールが必要となるドキュメント中心型のアプリケーション
色分けしたセクション
あるページがアプリケーションやサイトの中でどのセクションに属しているかを色で識別できるようする。セクションごとにブランド戦略が
例 Apple社のWebサイト
アニメーションによる転換
ユーザーを驚かせたり、迷子にさせたりしそうな転換を行う際に、それを自然に感じさせるようなアニメーションを用いて、スムーズに見せる
例 MacOSのアクションイベント
避難口
ナビゲーションや選択肢がせばめられているとき、キャンセルやリセットなど脱出できる選択肢があるか。
例 ディフォルトに戻したり、ウィンドウ自体をキャンセルボタン
