skillup

技術ブログ

UI

ナビゲーション

投稿日:

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

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

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

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

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

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

明快な入口

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

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

例 Googleのトップ画面

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

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

ハブとスポーク

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

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

ピラミッド

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

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

モーダルなパネル

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

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

例 一般的な確認行為全般

シーケンス表示

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

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

パンくず

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

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

注釈付きスクロールバー

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

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

色分けしたセクション

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

例 Apple社のWebサイト

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

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

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

避難口

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

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

-UI

執筆者:


comment

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

関連記事

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …

no image

オートコンプリートのプラグイン

最近だとフォームの入力画面で最初の数文字を入力すると候補を予測して表示してくれる機能(=オートコンプリート)があることが一般的ですね。 いろいろなプラグインがありますが、今回お勧めしたいのはBoots …

no image

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

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

no image

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …