動きのあるナビゲーション(2)

ウェブページではナビゲーションを中心に縦方向に増える情報量を抑えるための動的効果を使うことが可能。代表的な効果とデザイン上のポイント。

ディレクトリ

メニューの展開機能と各項目へのジャンプの機能を1つにまとめたナビゲーション。
メニューの展開ボタンを親リストの左側に配置する。
展開ボタンにはプラス記号を付ける。展開後はプラスをマイナスの表記に入れ替える。
リストメニュー側をクリックするとウェブページの切り替えなどアクションを発生させる。

アコーディオン

見出しの一覧をクリックして関連する段落を表示させる仕掛けなどに使う。
必要な段落だけ展開出来るため、見出しの一覧性が向上する。
そのままでは展開可能な部品であることがわかりにくいので、リンクテキストに下線を付けてリンクの存在を強調する、下向き三角や矢印などの展開を意味する記号を付けて操作を促すといった工夫をする。

ソート

表組の先頭の行のデザインに工夫してソート機能の存在を主張する。
展開を示す下向き三角をつけて行頭をクリックするとアクションが起こることを示す。