Tbpgr Blog

Employee Experience Engineer tbpgr（てぃーびー） のブログ

UI flows - Railsを作ったDHHが所属する37signals(Basecamp!)が生んだUIツール

UI flows

f:id:tbpg:20160129020500p:plain

37signals(現在はBasecamp!)が生んだUIツール「 UI flows 」についての関連情報をまとめます

前提

この資料は今後自分が業務で行う作業に必要になったためまとめたものです。
実践したうえでの情報ではなく、参考文献をもとに自分の中で理解した内容をまとめ直しただけです。

UI flowsとは？

UIのフローを作る際に、全てのアクションの画面遷移図を作るのは現実的ではありません。
逆にシナリオベースの文章の場合はそのフローを読んで理解にしにくいですし、
その内容をチェックリストにしたりメンテナンスするのも難しいです。

この双方の不足を補うことができるのが UI flows です。

UI flows では画面とアクションをテキストでシンプルに書きます。 画面に属するアクションを実行すると次の画面に遷移します。

テキストベースで作成できることから、デザイナ以外でも簡単に作成できます。 また、アクション単位で作成するため画面名だけで作成した画面遷移図に比べ考慮漏れが発生しにくいです。

詳しくは以下を参照。

signalvnoise.com

UI flows by gviz

gviz gem で UI flows ライクな書き方をしてみました。

f:id:tbpg:20160129020500p:plain

プログラム

require "gviz"

Graph do
  global overlap:false
  nodes fontname:'MS UI GOTHIC'

  node :Login, {label:'{<a>ログイン | <b>正しいIDとパスワードでログインボタンを押す | <c>誤ったIDとパスワードでログインボタンを押す}', shape: :Mrecord}
  node :Top, {label: 'トップページ', shape: :box}
  node :LoginError, {label:'{<a>ログインエラー | <b>メールアドレスを入力し、パスワード再設定ボタンをおす}', shape: :Mrecord}
  node :ReregisterPasswordMail, {label:'{<a>メーラー | <b>パスワード再発行URLへジャンプ}', shape: :Mrecord}
  node :ReregisterPassword, {label:'{<a>パスワード再設定 | <b>新パスワードを入力して再設定ボタンをおす | <c>パスワードを入力せずに再設定ボタンを押す }', shape: :Mrecord}
  node :CompleteReregisterPassword, {label:'{<a>パスワード再設定完了 | <b>ログインへ}', shape: :Mrecord}
  node :ErrorReset, {label: 'パスワード再設定(エラー)', fontname:'MS UI GOTHIC', shape: :box}

  edge "Login:b_Top"
  edge "Login:c_LoginError:a"
  edge "LoginError:b_ReregisterPasswordMail:a"
  edge "ReregisterPasswordMail:b_ReregisterPassword:a"
  edge "ReregisterPassword:b_CompleteReregisterPassword:a"
  edge "CompleteReregisterPassword:b_Login:a"
  edge "ReregisterPassword:c_ErrorReset"
  edge "CompleteReregisterPassword_Login:a"

  save :"ui_flows", :png
end

関連記事