Sunday, April 26, 2009

Mega Drop-Down Navigation Menus Work Well メガ・ドロップダウンメニューはいい感じ

以前に書いた検索候補提案機能と関連するドロップダウンメニューに関する記事がJakob Nielsenのサイト(Alertbox)にあったのでご紹介します。

うちの会社では結構昔からグローバルメニューのドロップダウンメニューが悪とされてきました。(ここでいうドロップダウンメニューはナビゲーション利用時です)これはSEOやアクセシビリティ的な考え方に加え、うちの会社の代表がプルダウンは古い、ダサい、使いづらいという意見を持っているという理由があるのですが。
ただ、僕自身はドロップダウンメニューによるメニュー設計はあまり行いませんが、ユーザとしては結構好きです。確かに5年ほど前までは何でもかんでもプルダウンメニューになっているサイトが多く、ブラウザによって崩れが起きたり、ラべリングとサイト設計がいい加減で、結果ドロップダウンを利用することでメニューを隠してしまったりするなど使いづらくなっているケースが多かったのは確かです。実際、5年以上前に構築された公共のサイトやイントラサイトなどのリニューアル依頼を受けるとほとんどがプルダウンをこれでもかと使っているサイトが多いです。ただ、最近はサイトの規模が拡大していることによる必然性と、Javascriptが認められたことなどから利用されるプルダウンメニューも使いやすく、いいものが結構あると思っています。

で、そんな中Jakob NielsenがMega Drop Down Menuは結構イケてるという記事を書いていたのを見つけ、ユーザビリティの観点からもドロップダウンメニューが評価されたようなので、彼のアドバイスを参考にしながら今後のプロジェクトに取り入れたいなと思っています。

まず、前提としてJakob Nielsenはこれまで結構ドロップダウンについて記事を書いていますが、どれも悪い評価としての記事が多かったのが事実です。そのため使う時の注意点とあまり頻繁に使わないようにという警告が多かったと思います。まあそういう経緯もあったので今回の記事はちょっと驚きもあったのですが。

さて、今回彼がMega Drop Down Menuとして定義しているのは以下の要素を含んだドロップダウンメニューです。
  • 大きく、ナビゲーションパネルの中がグループ分けされている
  • レイアウトやタイポグラフィー、アイコンなどを使って構造化されている
  • すべてのメニュー内容が一度で見れる(スクロールしない)
  • トップメニューから水平もしくは垂直表示される。左カラムのメニューの場合はパネルが表示されずページへ移動する(ちょっとここの訳は怪しいです)
参考サイトが2つ掲載されていたので見てみてください。(なお仕様にあたっての注意点などはAlertboxをご覧ください)

Food Network


Action Envelope


彼の定義している内容は検索候補提案メニューの内容とほぼ一致しますね。まあ、あちらもドロップダウンメニューと言えるのでもちろんそうなのでしょうが。ただ、これまで単純なリストとしてしか表現していなかったメニューや検索結果などへ、今後の傾向としてグルーピングやレイアウト、タイポグラフィーなどによる視覚的な設計とデザインが必要になっていくのは必須ですね。ただし、検索候補提案メニューの記事で僕が感じたメニューか広告か分からない?という表現と、やはりAction EnvelopeやAppleのメニューはちょっと回線的に表示に時間がかなりかかってしまうので、そういった点には注意が必要でしょう。

ちなみにドロップダウンメニューに関する基本的な注意点はAlertboxにいくつか記事があるのでご参考まで。

Drop-Down Menus: Use Sparingly

Does User Annoyance Matter?

No response to “Mega Drop-Down Navigation Menus Work Well メガ・ドロップダウンメニューはいい感じ”

 
© 2009 OFF THE WALL. All Rights Reserved | Powered by Blogger
Design by psdvibe | Bloggerized By LawnyDesignz