skillup

技術ブログ

UI

ナビゲーション

投稿日:

本日はソフトウェアのナビゲーションについて。

要は「いかにユーザーに目的の操作まで少ない経路でたどり着いてもらうか」に関してです。

移動距離は常に短く&クリック回数は少なく

当たり前ですが、目的の操作までは少ない移動コスト、クリック数でいけるのがベスト。

どうやったらコンテクストの切り替えなしでたどり着けるのがベストか常に考えてみましょう。

ナビゲーションの具体的なポイント

明快な入口

インターフェイスの入り口は少なく、できるだけ明快に。

入り口で何をすればいいか、どこにはいればいいかわからないような入り口はやめましょう。

例 Googleのトップ画面

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

大規模なアプリケーションの場合、ユーザーが各コンテンツ同士を行き来したい場合、なおかつ空間的に余裕がある場合、グローバルナビゲーションがあると移動がしやすい。

ハブとスポーク

アプリケーションの各セクションをミニアプリケーションとして独立させる。空間的なスペースに余裕がない携帯端末で多い仕様。空間スペースに余裕がある場合はグローバルナビを使ったほうが良い。

例 携帯端末のトップ画面と各アプリケーションの画面

ピラミッド

一連のページを進む、戻るのリンクでつなげる。各ページから相互リンクされているページと組み合わせてる。

例 書籍の各章やスライドショーなど連続するページ群を含む場合。

モーダルなパネル

ユーザーが課題を解決するまで、ナビゲーションの選択肢を省いた1ページだけを表示する。

その場ですぐ終わるような入力処理、また一時的にユーザーの選択肢を制限するような処理

例 一般的な確認行為全般

シーケンス表示

連続しているページ群にて、現在は個々の表示を含んだページのマップ

例 テキストなどの読み物やウィザード

パンくず

階層構造を含んだページ群。各要素の間にあまり関連性やつながりがない場合によく使われる。

例 一般的なWEBサイトのナビゲーション

注釈付きスクロールバー

スクロールバーにコンテンツマップまたは現在地はここという2種類の役割を持たせる

例 スクロールが必要となるドキュメント中心型のアプリケーション

色分けしたセクション

あるページがアプリケーションやサイトの中でどのセクションに属しているかを色で識別できるようする。セクションごとにブランド戦略が

例 Apple社のWebサイト

アニメーションによる転換

ユーザーを驚かせたり、迷子にさせたりしそうな転換を行う際に、それを自然に感じさせるようなアニメーションを用いて、スムーズに見せる

例 MacOSのアクションイベント

避難口

ナビゲーションや選択肢がせばめられているとき、キャンセルやリセットなど脱出できる選択肢があるか。

例 ディフォルトに戻したり、ウィンドウ自体をキャンセルボタン

-UI

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …

no image

CSSで背景画像の出力 ~透過編~

前回CSSで大きな背景画像のなかにhtmlを置く方法をメモしたんですが、背景画像を透過させたいときなどのメモを書いておきます。 一般的に画像の透過といえばCSSでopacity:0.6とかやれば簡単な …

no image

検索ページの遷移に関して

検索ページの遷移に関してメモ。 基礎だが実際全部完全に網羅できているかというと不安な部分が多い。 Contents1 基本仕様: 以下のようなページ構成を想定2 想定しないといけない遷移状態3 よくあ …

no image

フォームとコントロール

今回はフォームについて Contents1 基本原則となる考え方1.1 寛容な入力形式1.2 構造化された入力形式1.3 穴埋め1.4 入力ヒント1.5 入力プロンプト1.6 オートコンプリート1.7 …

アーカイブ