Make組ブログ

Python、Webアプリや製品・サービス開発についてhirokikyが書きます。

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().isCollapsetrue のときのみ編集に入るようにしてそうです。

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

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

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

いただいた反応

いまさら?

たしかに今さら感MAXです!

Descriptionって意外と書かない人もいるしアフォーダンスの改善は要りそう

たしかに。こういうタスクツールの説明ってどうしても書かないときありますよね(私も含めて)。 タスクの説明欄ってただの入力でしかないですが、うまい質問を出してあげて気持ちよく書けるなど工夫はできそうです。

GUIでの書式入力がないのが良くない

非エンジニアの人が多い環境ですとその課題もありますね。私はGUIツールバーがないほうがスッキリしていて好きですが、やはり求められるものです。 TrelloのDescriptionにも必要そうです。

WebHookがすぐ実行されるのが良くない

それはありますね。グラフィカルに動いたり、勝手に保存されるUIの場合はどのタイミングでHookが起こるかが分かりにくい問題はあります。 TrelloはとくにWebHookのタイミングが多くて、うるさくなりがちですね。

通知やWebHookも非常に重要なUI/UX部分だと私も思いますので、同意です。

UIや画面要素の研究をして

こういったようにWebサービスのUIや画面要素、手触りの研究をして、自身のサービスに活かしていきたいと思います。 Shodoでも調べたりした成果を反映して作っていますので、(まだまだ至らぬとこはたくさんですが)ぜひ興味ある人は見てみてください。

shodo.ink

この記事はShodo (https://shodo.ink) で執筆されました。