デザイニング・ウェブインターフェース ―リッチなウェブアプリケーションを実現する原則とパターン 浅野 紀予(監訳) オライリージャパン 2009-12-28 by G-Tools

めちゃくちゃおもしろかった。
かつて米Yahoo!でAjaxエヴァンジェリスト、いまNetflixのUIディレクタをしている、その筋では有名なBill ScottとTheresa Neil(この人は、知らない・・)によって書かれた現代のWeb UI開発指南。
サブタイトル”リッチなウェブアプリケーションを実現する原則とパターン”のほうが内容をうまく反映している。
かつてDynamic HTMLと呼ばれた技術が夢見たインタフェース・パターンが今どんどん実現されていて、Webのインタラクションデザインがデスクトップアプリのそれに非常に近づいていっている。パターンはあふれてもそれを、いつ、どう、どこに気をつけて使ったらいいのかわからなくなってしまう。ともすると間違った使い方でかえってユーザの体験を損なってしまう。(あぁ、暗い思い出が。)
ということが、多くの場面で防げる様になる、と思う。
この本をゆっくり読めば。
Yahoo! bookmarkやFlickrをはじめとするYahoo!やgoogleのいろいろなサービスをはじめamazon,netflixなどのサイトのUIをケーススタディとしてふんだんに使っていて非常にわかりやすく説得力がある。
ユーザが目の前の作業に没頭し、時間を忘れ、ものすごい生産性を発揮している状態を本書では「フロー状態」と呼んでいる。
ユーザをフロー状態に導くには、ユーザの直感を裏切らず、どこまでもスムーズに作業することを支援できるツールでなければいけない。読後には直感を裏切らないためのJavascript、スムーズな作業のためのインタラクションをかけるようになる気がする。
具体的には、(目次からおおざっぱに抜き出すと)

• ページ内編集
• ドラッグアンドドロップ
• リストの項目選択(メールソフトで削除したり移動したりするメールを選ぶとか)
• コンテキスト連動型ツール(選んだ項目に対して何を行うか指定するなど)
• 軽量オーバレイ、インレイ(lightboxのようなモーダル・非モーダルダイアログ)
• プロセスフロー
• インビテーション
• トランジョン
• フィードバック表現

などの正しい使い方が解説されている。
同じインタフェース(ドラッグアンドドロップなど)でもサイトによって細かい挙動が異なってい足りするところも非常に細かく分析してあって、どういう場合にどちらの方が良いのかというところまで書かれている。
さらに望むなら、それぞれのUIの実現方法が解説されていると良かった。
これらの多くはjQuery+プラグインで実現できそうだ。(いかにもjQueryが好きそうな分野だし)
さて、何か作ってみたくなるな。

Read More