netswitch!

Web UI デザインパターン

Posted by nanki Sat, 22 Apr 2006 07:20:00 GMT

AJAXだとかなんだとかでJavascriptを使ってもいい雰囲気になり、ライブラリも整備され、かなり高度なユーザインターフェースを作ることが可能になっている。

しかし、何の指針もなしに作っていたのでは、使用感に統一性の無いものがあふれかえってしまう。
そんなわけで、Railsで使えるものを中心に、使いどころ、使わないどころ、雑感を。

AutoComplete

• 正規化が必要になるような用途(会社名、住所とか)に。
• 数が少なくて固定の場合はセレクトボックスを使った方がいい場合も。
• 日本語との相性は要改善。

Drag&Drop

• 一見使いやすくなるようで、ユーザに強いるコストが結構高いので、積極的に使うべきではない。
• 特にDrop対象が一つだけなら絶対使わない方がいい。
  • Drag元とDrop元の座標を指定した上
  • その間指押しっぱなし
  • さらに連続でD&Dする時はまたDrag元まで戻らねば。

SortableList

• リストが一画面に収まる程度なら使うべき。
• 複数ページにまたがるような並べ替えはまだ画期的な方法がない。
• Non-Linear Zoomingを駆使したようなのを誰かが作ってくれる(に違いない)。

InPlaceEditor

• 使いどころは絞ったほうが効果的。
• 頻繁に変更されるところとか、気軽に変更して欲しいところとか。
• 値が空になると編集できない。
  • このパッチでいけそう。

ブラウザ内ウィンドウ

• 設定画面、追加画面など、一画面挟んだ後リストに戻るような場合に。
• 基本的には、更新とともに。閲覧のみで使う場合は、前/次 みたいなのをつけるべき。
• できるだけ「閉じる」動作を意識させない。(要らなくなったら勝手に閉じる)

などなど。書き出してみると結構当たり前のことばかりか。
他にどんなのがありますかねぇ。

キー操作を扱える標準的なライブラリとかも欲しいかなぁ。

追記

2006.04.27 Ajax Pattern Screencasts