先日、25日にデザイニング・ウェブナビゲーションが発売されました。
 |
デザイニング・ウェブナビゲーション ―最適なユーザーエクスペリエンスの設計 長谷川 敦士 (監訳) 浅野 紀予 (監訳) 児島 修 オライリージャパン 2009-05-25 |
この本は、タイトルの通り、ウェブナビゲーションについてメカニズムと表現の両面から取り扱っており、以前からある白熊本とあわせて読むと情報アーキテクチャについて網羅できるとのことです。
私はまだ手に取れていませんが、興味があるので紹介してみました。
デザイニング系で「デザイニング・インターフェース」も是非。
少し前に、棚橋さんのブログで、長谷川さんが紹介していたというsite-it!について書かれていたのを見て、自分でもsite-it!を作ってみましたのでご報告。
site-it!はウェブサイトの典型的なページを付箋のような小さな紙に印刷したもので、サイトの構成を検討する際などに使えるツールとなっています。
以前、画面遷移図について「画面遷移図の書き方」で、画面名だけ書いた箱ではイメージしづらいということを書きましたが、site-it!はまさにそ問題を解決するツールです。
上部に画面名を書き込んで並べれば画面遷移図・サイトマップになりますし、模造紙を下に敷いて、線をつなげても良いと思います。もちろん紙なので並べ替えや移動も簡単です。
また、紙ベースであるため、打ち合わせの場でクライアントを巻き込んで検討するのに便利ですし、典型的なページから選ぶというやり方をすることによって、おおまかなサイト構成を検討する段階で、各画面内の細かい部分に話が及んで議論が発散することを防げます。
※最初は、中身が空のバージョンも作っておいて、好きに書けるようにしようと思ったのですが、あくまで「選ぶ」ことに意義があるということで止めました。
また、ご紹介している写真のsite-it!は画面名を書くエリアの左下に、T(トップページテンプレート)やF(フォームテンプレート)などのIDを付けて、呼びやすくしたり、画面遷移図として資料に清書する際に、「問い合わせフォーム(F)」と書くことによって、どのパターンなのかの紐付けができるようにしてみました。
都道府県の選択や、もっと複雑なところでは海外サイトの国名選択など、セレクトボックスから目的のものを探す際になかなか見つからずにイライラしてしまった経験はありませんか？
都道府県選択であれば、北海道から沖縄までの地域順、国名選択であればアルファベット順など、ルールに従ってソートされていることがほとんどですので、そのルールさえ分かっていれば、ある程度簡単に探すことができます。また、optgroupタグを利用するなど、標準の仕組みでできる改善策もあります。
とはいえ、いくら分かりやすくなるような工夫をしても、セレクトボックス自体がそもそも一覧性が低いため、ユーザビリティの改善にも限度があります。
そんなとき、セレクトボックスを分かりやすいパネル表示に拡張してくれる、selectable.jsはいかがでしょうか？
このスクリプトを適用すると、通常のセレクトボックスの見た目が変わり、一覧性の高いパネル表示に変更されます。仕組み自体はセレクトボックスを利用して、見た目だけ変えるしくみですので、サーバーサイトのプログラムの変更は不要で、導入も比較的容易です。
