skillup

技術ブログ

UI

ナビゲーション

投稿日:

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

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

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

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

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

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

明快な入口

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

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

例 Googleのトップ画面

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

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

ハブとスポーク

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

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

ピラミッド

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

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

モーダルなパネル

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

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

例 一般的な確認行為全般

シーケンス表示

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

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

パンくず

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

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

注釈付きスクロールバー

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

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

色分けしたセクション

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

例 Apple社のWebサイト

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

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

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

避難口

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

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

-UI

執筆者:


comment

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

関連記事

no image

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

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

no image

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …

no image

フォームとコントロール

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

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

cakePHPのSSL設定+jQueryのError Loading Page

cakeで作ったアプリの認証画面でhttps環境だとError Loading Pageというエラーメッセージがでてしまい、ログインできないという事象が発生。 最初はSSLが原因かとおもっていたんです …