skillup

技術ブログ

UI

ナビゲーション

投稿日:

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

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

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

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

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

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

明快な入口

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

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

例 Googleのトップ画面

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

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

ハブとスポーク

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

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

ピラミッド

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

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

モーダルなパネル

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

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

例 一般的な確認行為全般

シーケンス表示

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

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

パンくず

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

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

注釈付きスクロールバー

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

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

色分けしたセクション

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

例 Apple社のWebサイト

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

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

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

避難口

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

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

-UI

執筆者:


comment

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

関連記事

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

アクションとコマンド

今回はインターフェイスにおける動詞、つまりは「なんらかの行動(新規作成、表示、編集、削除)」についての解説です。 なんらかの行動に関してはほとんどのアプリケーションでボタンで実行されることが多いのでは …

no image

携帯のUIに関して

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

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …