フローチャートとUIフローの違い

UI デザインにおける多くの概念は言葉で言えば似ているように見えるかもしれませんが、実際には大きく異なります。長い間投稿していなかった台湾のデザイナー@Akane_Leeさんが、この機会を利用してフローチャートとUIフローの概念を分析し、機能について詳しく解説してくれました〜

ほぼ 1 か月間、何も投稿していませんでした。ビジネス プランの作成、プロトタイプの作成、ラボ レポートの実行で忙しかったのです。最近、UI Flow を整理しなければならないことがたくさんあり、整理すればするほど頭が混乱してしまいます。 UI フローとフロー チャートについて説明します。 Flow は「プロセス」を意味し、UI Flow はページフロー、Flow Chart はフローチャートです。この 2 つはまったく異なるチャートです。

UI デザイナーは UI フローには精通していますが、フロー チャートには精通していない場合があります。ソフトウェア開発において、フローチャートは通常、SA によって記述され、「判断」に重点が置かれます... それほど難しいことではなく、雑誌の心理テストのように考えてください。右に行くには「はい」を選択し、左に行くには「いいえ」を選択します。

RD の場合、プログラムを書く前に、まずさまざまな「判断」で構成される動作フレームワークである「ロジック」を知っておく必要があります。 UI はロジックも非常に重要です。そうでなければ、操作後にユーザーにどのようなレスポンスを返すべきでしょうか?

最もシンプルなメンバーログイン

「会員ログイン」を例に挙げると、ユーザーがアカウントとパスワードを正しく入力すると、自動的に会員情報ページにジャンプします。入力が間違っていると、エラーメッセージが表示されます...

機能マップからUIフローを描こうとすると、「ユーザーが操作ミスをしたらどうするか」という部分が抜け落ちてしまいがちです。最後の最後になってUIに足りないものが見つかり、急いで足りないページを追加しなければならなくなります。RDは機能を詰め込まなければならず、エレガントではありません。エラープロンプトは、後から取っておいたり、追加したりできるものではありません。ページやプログラムは、口で書いたり描いたりできるものではありません...

ランダムに入力すると認証コードが送られます

簡単そうに見えますよね？でも、そんなに簡単ではありません。実際に描いてみると、UI Flow では見落とされやすく、考慮されていない点がたくさんあることに気付くでしょう。 (そして、何も機能を追加せずに、どうしてこのようなことが可能なのでしょうか?)

ユーザーが間違った情報を入力し続ける場合、誰かがそのアカウントを盗もうとしていると考えるのが妥当です。一般的なブロック方法は、複数の誤った情報を入力したユーザーに、追加の確認コード フィールドに入力するよう求めることです。フローチャートは次のようになります。

上の図は、単純なフローのデモンストレーションです。「認証コード機能の追加を手伝ってください」と気軽に言えば、フロー チャートが突然大きくなります。実際のメンバーログイン認証には、3 回間違ったログイン試行後に「パスワードを忘れた場合」のプロンプトを表示するなど、より多くのトリックとセキュリティ上の考慮事項があり、さらに冷酷なものとして、アカウントが直接ロックされ、ユーザーにカスタマー サービスに苦情を申し立てるよう求められます。

フロー チャートと UI フローは互いに補完し合い、フロー チャートは UI フローよりも先に来ます。フローチャートなしで UI フローを作成し、処理する必要がある判断の数がわからない場合、計画不足により機能が欠落する可能性が非常に高くなります。

UI Flow だけあって Flow Chart がない場合、RD は画面を見て Flow Chart や判定式をどのように設定するかをほとんど想像できませんが、システムが大きくなるほどバグが発生する可能性が高くなり、バグが発生する確率は RD の経験によって決まります。しかし、UI Flow さえなければ、数枚のワイヤーフレームやモックアップだけに頼るのは、盲人が象に触れるようなものです。 RD は、1 枚の静止画像を見てページをつなぎ合わせる方法がわかりません。想像力だけに頼ってうまくできるとしたら、それは奇妙なことです。

何も与えず、プロトタイプを RD に渡して、それをコピーして同一のものを作るように依頼すれば、簡単ですよね? RD は、機能の接続方法を理解する前に、すべての画面のすべてのボタンを突っついて押し、さまざまなエラーを試す必要があります。 RD が彼にこんなことをしたことをどれだけ憎んでいますか...

参考文献:

フローチャート – MBAシンクタンク百科事典

フローチャートの説明

UI デザイナーの観点から見ると、フロー チャートは「このシナリオでユーザーがタスクを完了するためにどのように操作し、ソフトウェアがどのように応答するか」と見なすことができ、UI フローは「ユーザーがこのように操作し、これらの機能と情報を提示するため、ページはこのように接続されます」と拡張できます。

UI デザイナーは必ずしもフロー チャートを描画できる必要はありませんが、フロー チャートを理解できる必要があります。一般的なフローチャートのシンボルは固定されています。見た目が悪いという理由だけで新しいスタイルを設計しないでください。RD は間違いなく状況を一変させます。

「結婚前に脳に入った水は、結婚後に流す涙である」という有名な格言があります。これをソフトウェア開発に当てはめると、「仕事前に十分な時間を費やさない脳は、仕事後に傷む肝臓である」ということになります。後期段階では予想されていなかった作業時間と同じくらい、初期段階では考えられなかった機能も数多くあります...