インフラジスティックス社の「UX Design Pattern Explorer “Quince”」が興味深い

Quince - UX Pattern Explorer (要Silverlight2.0)

インフラジスティックス社のブログで説明されているが、英語だ。

面白かったので、Silverlightを入れてない人にも内容が分かるように、キャプチャして軽く説明してみる。

トップページ

画面サイズは980x600以上あったほうがいいかも。
「Explore」の下の4つのボタン、マウスホバーすると説明が右側に表示される。

ちなみに、画面遷移するたびにURLが変わっていく。だから途中ブクマもできるぞ。

All Patterns

中央ペインがパターンのリスト（アルファベット毎）。右ペインはキーワード検索またはカテゴリによる絞込み。

試しに「Annoted Scrollbar」を選ぶ。

上は「Annoted Scrollbar」パターンの実例だ。カルーセルになってて、簡単な説明が右側に表示される。
中央は「Annoted Scrollbar」パターンの説明だ。Problem、Solution、Context、Rationale、Implementation、Sources、Tagsが表示される。当然、テキストは選択してコピーできる。右上の「Popup」をクリックすると、パターンの説明をHTMLで見ることが出来る(例：Annotated Scrollbar)。
下はパターンに対するコメント。左下はユーザーの使用例、右下は本文に対する修正などのコメントを残す。両方ともユーザー登録してサインインしないと利用できないようだ。
右上は便利リンク。ソーシャルブックマークサービスへのショートカットや、フィードの表示など。

元の一覧に戻りたければ、右上隅の「CLOSE」ボタンを押すこと。

By User Tasks

左側にユーザータスクのカテゴリが並ぶ。大分類は「検索」「編集」「一覧表示」「データ分析」の4つ、その下に小分類があり、パターンが置かれている。さっきの「Annoted Scrollbar」は、「検索」→「ブラウズ」に置かれている。

By Tag Relations

タグ同士の関連性を視覚化している。タグをクリックすると、「All Patterns」のときの中央ペインと同様のパターン一覧が表示される。

By Wireframe

ちょっと分かりにくいが、画面レイアウトのモデルが中央に表示されている。そして、どのあたりでどのパターンが使われるのかをマップしてある。例えば左上に「Global Navigation」というラベルがあるが、そこにマウスをホバーすると簡単な説明が表示され、クリックすればパターンの詳細説明が表示される。

平々毎々（アーカイブ）

はてなダイアリーのアーカイブです。