- 2009-09-18 (Fri) 14:01
- ライフハック
いつも素敵なアイデアを連発している37signalsですが、今回はUIデザインに関するノウハウがシェアされていましたよ。シンプルですが、かなり使えそうなのでご紹介。
彼らが問題にしているのは、ユーザー体験をどう設計して、それをどうチームに使えるか、という点。
いままでは画面の遷移図を描いたり、ユーザー体験をストーリー仕立てにしていましたがどちらも一長一短があったそうです。画面を描いてもすぐに変わるし、ストーリーはあとで参照するのが面倒だったりします。
そこで彼らが考えたのは次の図。全部これで表現すればよくね？ということで実践してみたところ、うまくいっているらしいです。
↑ それぞれの画面に対して「何があるか」「何をするか」に分けて記述しています。
↑ たとえばTo Doを追加するときのユーザー体験。
↑ もっと複雑なフロー。これはログイン画面。
たしかにシンプルではありますが、画面だけ羅列するよりは格段にわかりやすいですね。また「ユーザーが何を見るか？」が書いてあればある程度は画面も想像できるので効率的かも。
もちろんTPOや見せる相手にもよりますが、ユーザー体験をシンプルに記述したい場合にはかなり使えるのではないでしょうか。今度自分でも使ってみよう・・・（って一人で作ってたら意味ないかｗ）。
» A shorthand for designing UI flows – (37signals)
こちらもあわせてどうぞ
- Newer: ACTION*PADに関するもろもろ進捗報告・・・
- Older: 百式ジョブボードに『Magme(マグミー)』が参加！
Comments:1
- twk 09-09-19 (Sat) 22:40
-
「ユーザーが見るもの」のところを四角枠線の中に書いて、ユーザーがすること、を次のユーザーが見るものへの矢印の横に書く方がわかりやすいのでは？
四角枠線の中に具体的なUIで置き換えればそのまま画面遷移図にもなるし。
Trackbacks:2
- Trackback URL for this entry
- http://www.ideaxidea.com/archives/2009/09/shorthand_for_ui_flows.html/trackback
- Listed below are links to weblogs that reference
- UIデザインを共有するためのシンプルな記法とは？（37signalsの場合） from IDEA*IDEA ～ 百式管理人のライフハックブログ
- trackback from あとちょっと良いサイト ACS 09-09-19 (Sat) 1:49
-
あとちょっと良いフロアガイドを発想する
きっかけはルミネのWebサイトのフロアガイド「あそこにあったお店って名前も知らないけど、詳しく知りたいなー」と思ってサイトを見てみるとこんなフロアガイドが出てきました。 …
- trackback from 武蔵の日記 09-09-21 (Mon) 22:05
-
[UI][translation] UIのフローをデザインするための簡易記法
「UIデザインを共有するためのシンプルな記法とは？（37signalsの場合） – IDEA*IDEA ? 百式管理人のライフハックブログ」で紹介されていて、気になったので訳してみました。原文はA shorthand …
