TrelloのDescription欄だけでUIを超えた手触りが良すぎて学びしかない

TrelloのDescriptionが良くできすぎている

TrelloのUI（UX）が素晴らしすぎます。UIと言っても表面上のデザインだけでなくて、基本的な要素の手触りが良すぎます。

とくに上の写真にあるDescriptionがすごい。ここだけで作り込みがすごすぎてビックリする。これはカード（Todoリストでいうタスク）の説明欄です。入力はtextareaででき、URLなどが入力されると表示される際はリンクになります。ただそれだけの要素ですよ。

ただそういう次元じゃないんですよね。たとえば以下の機能があります。

Descriptionが空のときは「Add a more detailled description...」を表示する
Descriptionが空のときはマウスホバーで背景色を濃くしてクリックを促す
Description内に描画する内容があるときは、 cursor: pointer にするだけで背景色は変わらない
Descriptionのクリックで編集に入る
でもDescriptionで描画されたaタグをクリックしても編集には入らない
さらにDescriptionで描画された内容をマウスドラッグ（選択）しても編集には入らない
編集中に入力欄の外をクリックすれば編集から脱出する
編集中にEscキーをタイプすれば編集から脱出する
入力欄の外部クリック、Escキータイプで脱出したときのみ、入力に変更があれば編集を保持する
編集途中の入力があれば、Descriptionの下部に入力中があると表示する
編集中の状態を削除（Discard）できる
編集中の下部にあるキャンセルボタンをクリックしたときは編集の保持をしない

知ってるものもあると思いますが、細かい所の制御まで完璧に気持ちよくできてるんですよ（Escとボタンクリックの違いなど）。

こんなtextareaと描画したHTMLを表示するだけの画面要素にこんなに作り込みをできるってすごすぎる。 aタグのクリックやドラッグのイベントを回避したり、Esc・欄外クリックと「キャンセル」ボタンクリックで動作を分けるとか、異常としか言いようのない作り込みです。Apple製品やiPhoneの通知欄などのUIを取り上げて「すげー！」って言っている人はたまにいますが、Webサービスという観点でTrelloは教材の宝庫です。

Descriptionクリック時の制御は、たとえばaタグにはblankを付けておけば回避できそうです。ドラッグされてるかどうかは window.getSelection().isCollapse が true のときのみ編集に入るようにしてそうです。

無駄なこだわりと一蹴されそうではありますが、そうではないです。このDescriptionを触る機会は、他の雑多な機能を使うよりも圧倒的に多いはずです。だからこだわる価値が十分にあると言えます。 Trelloが成功したのはボードを表示する見た目によるものじゃないんですね。こういう当たり前に使う見えないところに心血を注いでるからこそ、使う人は「何かすごい便利だぞ」と感じられるわけです。

こういった「手触り」って何ていうんですかね？UIで議論されている領域を超えたものを感じますし、UXというにはボンヤリしすぎています。もちろんすごい人はこれをUI/UXの一環として取り扱うものと思いますが、僕はこの分野に名前がほしいです。UserTouchでUTとか、何でもいいですが、とにかく「ここの手触りにこだわろうよ！」というときの言葉が欲しいですね（あればぜひ教えてください）。

本当にTrelloは学びしかないです。みなさんもWebサービスに携わる人間であれば、ぜひTrelloを観察的な眼で見てみてください。どの要素を取り上げても学びしかないですよ。