FLOW CHARTとUI FLOWの違いについて

 　　UIデザインには、文字通りあまり変わらないように見えて、実は大きく異なるコンセプトがたくさんあります。久しぶりの投稿となった台湾人デザイナー@Akane_Leeが、この機会にコンセプトを分析し、Flow ChartとUI Flowの機能を詳しく解説してくれました。

　　ほぼ1ヶ月間、何も投稿していません。プロジェクトを書いたり、Prototypeをやったり、研究室のレポートを走らせたりと忙しかったからです。最近はUI Flowの整理をすることが多く、整理すればするほど頭がペースト状になっています。UI FlowとFlow Chartについてですが、Flowは「流れ」、UI Flowはページの流れ、Flow Chartは流れ図で、両者は全く別の図になります。 /この2つは全く違うものです。 {UI Flowはページの流れ、Flow Chartはチャートの流れです。 　　UIデザイナーはUI Flowには慣れているが、Flow Chartには慣れていないかもしれない。ソフトウェア開発では、Flow ChartはSAが書くことが多く、「判断」が重視される...。そんなに難しいことではなく、雑誌に付いている心理テストと思えばいいんです。

　　RDの場合、プログラムを書く前に「論理」、つまり様々な「判断」からなる演算構造を知っておくことが重要です。ロジックはUIにも重要で、そうでなければ操作後にユーザーにどんな反応をさせたいのか？

　　最も男らしいメンバーログイン

　　会員ログイン」を例にとると、ユーザーは自分のアカウントのパスワードを入力し、正しく入力すれば自動的に会員情報のページに移動し、間違って入力すればエラーが表示される...という仕組みになっています。

　　機能マップからのUIフローだけでは「ユーザーエラーをどうするか」が無視されがちで、土壇場になってUI緊急＋描画で見落としたページが不足していることが判明したり、RDが詰め込み機能の不備に悩まされたり、エラーを促すのは舞台を置くものでも時間があるときに補うものでもなく、ページやプログラムは口先で描いたり書いたりはしない...などなど。

　　間違った情報を入力すると、認証コードが表示されます

　　簡単そうでしょう？それだけではありません。実際に描いてみると、UI Flowには見落としがちな点や考慮されていない点がたくさんあることがわかります。(しかも、これだけで機能を追加しないなんて......)

　　ユーザーが間違った入力を続けることがあり、誰かがアカウントを盗もうとしていると考えるのが妥当でしょう。これをブロックする一般的な方法は、何度も間違えるユーザーには、キャプチャのための追加フィールドを記入させることです。つまり、フローチャートは次のようになります。

　　上の図は、あくまで簡単なデモンストレーションです。もう一回「おい、captcha機能追加してくれよ」と言われるだけで、Flow Chartは急に太くなります。実際の会員ログイン認証では、3回ログインを間違えると「パスワードを忘れた」と催促したり、さらに非情にもアカウントをロックしてカスタマーサービスに訴えるよう求めたりと、もっと仕掛けがあり、セキュリティに配慮している。

　　フローチャートとUIフローは互いに補完し合っており、UIフローがある前にフローチャートがあるくらいである。Flow ChartなしでUI Flowを制作し、どれだけの判定を処理すればいいのかわからない場合、しっかり計画を立てないとページ内の機能が欠落する可能性がとてもとても高くなります。

{フローチャートがないUIフローだけの場合、ページ上の機能が欠落する可能性が非常に高い。 　　UI FlowだけでFlow Chartがない場合、RDはFlow Chartと画面からの判断方法をほとんど想像できないが、システムが大きくなればなるほどバグの可能性は高くなり、バグの可能性はRDの経験値で決定される。しかし、UI Flowはともかく、数枚のWireframeやMockupは、単に盲人が象を感じるようなもので、1枚の静止図を見ても、RDはページをどう紐づけるか分からない、純粋にブレインストーミングで良いのです。

　　何も出さないなら、プロトタイプをRDに投げて、「まったく同じものを作るのは簡単だろう」とコピーしてもらえばいいのです。RDはどれだけ憎まれ口を叩けば、国民全体が．

　　参考にしてください。

　　フローチャート - MBAインテリジェンス百科事典

　　フローチャートの説明

　　UIデザイナーの視点から見ると、フローチャートは「ユーザーがどのような作業を行い、その中でソフトウェアがどのように反応するか」と考え、UIフローは「ユーザーがこのような作業を行い、このような機能や情報を提示するから、ページがつながっている」と拡張することができる。

{UIデザイナーはFlowの描き方を知らなくてもいい。 　　UIデザイナーはFlow Chartを描ける必要はないが、Flow Chartを読む能力は必要だ。醜いからと言って新しいスタイルをデザインしてはいけない、RDは間違いなくテーブルをひっくり返すだろう。

　　結婚前の頭の水は結婚後の涙」という有名な言葉がありますが、ソフトウェア開発に当てはめると「仕事を始める前に頭を使わない分、仕事を始めてから肝臓を痛める」ことになります。初期段階でどれだけの機能を想定していなかったか、後でどれだけの作業時間を想定していなかったか・・・。