UIデザインを共有するためのシンプルな記法とは?(37signalsの場合)

SPONSORED LINK

Pocket

ui_top

いつも素敵なアイデアを連発している37signalsですが、今回はUIデザインに関するノウハウがシェアされていましたよ。シンプルですが、かなり使えそうなのでご紹介。

彼らが問題にしているのは、ユーザー体験をどう設計して、それをどうチームに使えるか、という点。

いままでは画面の遷移図を描いたり、ユーザー体験をストーリー仕立てにしていましたがどちらも一長一短があったそうです。画面を描いてもすぐに変わるし、ストーリーはあとで参照するのが面倒だったりします。

そこで彼らが考えたのは次の図。全部これで表現すればよくね?ということで実践してみたところ、うまくいっているらしいです。

ui

↑ それぞれの画面に対して「何があるか」「何をするか」に分けて記述しています。

324-todo-flow

↑ たとえばTo Doを追加するときのユーザー体験。

325-login-flow

↑ もっと複雑なフロー。これはログイン画面。

たしかにシンプルではありますが、画面だけ羅列するよりは格段にわかりやすいですね。また「ユーザーが何を見るか?」が書いてあればある程度は画面も想像できるので効率的かも。

もちろんTPOや見せる相手にもよりますが、ユーザー体験をシンプルに記述したい場合にはかなり使えるのではないでしょうか。今度自分でも使ってみよう・・・(って一人で作ってたら意味ないかw)。

» A shorthand for designing UI flows – (37signals)

ツイッターもやっています!

SPONSORED LINK

    • twk
    • September 19th, 2009

    「ユーザーが見るもの」のところを四角枠線の中に書いて、ユーザーがすること、を次のユーザーが見るものへの矢印の横に書く方がわかりやすいのでは?
    四角枠線の中に具体的なUIで置き換えればそのまま画面遷移図にもなるし。

  1. September 19th, 2009
  2. September 21st, 2009
    Trackback from : 武蔵の日記