یوزر فلو چیست؟ آموزش رسم جریان کاربر با مثال واقعی

یوزر فلو (User Flow) یا جریان کاربر نموداری است که قدم‌های کاربر را از نقطه‌ی ورود تا انجام یک کار مشخص نشان می‌دهد؛ مثلاً از باز کردن اپ بانک تا دیدن رسید یک انتقال کارت‌به‌کارت. یوزر فلو با چند نماد ساده (شروع، صفحه، تصمیم و فلش) رسم می‌شود و کمک می‌کند قبل از طراحی صفحه‌ها، مسیرهای اصلی، شاخه‌ها و خطاها را ببینید.

در این راهنما تفاوت یوزر فلو با ابزارهای مشابه، نمادهای استاندارد، روش قدم‌به‌قدم رسم و دو مثال کامل را می‌بینید. اگر تازه با UX آشنا شده‌اید، بدانید یوزر فلو معمولاً بعد از شناخت کاربر و قبل از وایرفریم می‌آید.

یوزر فلو چیست و چه فرقی با ابزارهای مشابه دارد؟

یوزر فلو به یک سؤال جواب می‌دهد: «کاربر برای رسیدن به هدفش دقیقاً از کدام صفحه‌ها و تصمیم‌ها عبور می‌کند؟» چند ابزار نزدیک به آن وجود دارد که اغلب با هم قاطی می‌شوند.

تسک فلو (Task Flow)

ساده‌ترین شکل جریان است: یک مسیر خطی برای یک کار، بدون شاخه و بدون توجه به نوع کاربر. برای توضیح سریع یک قابلیت به تیم مناسب است، ولی خطاها و حالت‌های جایگزین را نشان نمی‌دهد.

یوزر فلو (User Flow)

یوزر فلو برای یک کاربر مشخص، مثلاً یک پرسونا، و با نقطه‌های ورود مختلف رسم می‌شود. تصمیم‌ها، شاخه‌ها، خطاها و حالت‌های خاص را هم در بر دارد. اگر هنوز پرسونا ندارید، اول پرسونا در UX را بخوانید؛ جریانی که برای «همه» رسم شود، معمولاً برای هیچ‌کس دقیق نیست.

وایرفلو (Wireflow)

در وایرفلو به‌جای مستطیل‌های ساده، وایرفریم کوچک هر صفحه کشیده می‌شود و فلش‌ها از دکمه‌ی مشخص به صفحه‌ی بعد می‌روند. برای اپ‌های موبایل که تعامل داخل یک صفحه زیاد است، وایرفلو گویاتر است ولی دیرتر ساخته می‌شود.

سفر کاربر و سایت‌مپ

سفر کاربر بازه‌ی زمانی بزرگ‌تری را پوشش می‌دهد، حتی بیرون از محصول، و احساس کاربر را هم ثبت می‌کند؛ برای آشنایی بیشتر سفر کاربر یا User Journey را ببینید. سایت‌مپ هم ساختار سلسله‌مراتبی همه‌ی صفحه‌هاست و ترتیب حرکت کاربر را نشان نمی‌دهد. خلاصه این‌که سایت‌مپ می‌گوید چه صفحه‌هایی داریم و یوزر فلو می‌گوید کاربر چطور بینشان حرکت می‌کند.

نمادهای استاندارد برای رسم جریان کاربر

نمادهای یوزر فلو از فلوچارت‌های کلاسیک آمده‌اند. لازم نیست همه را حفظ کنید؛ همین چند نماد برای بیشتر پروژه‌ها کافی است، به شرط این‌که در کل فایل یکدست به کار بروند:

• بیضی یا مستطیل با گوشه‌ی گرد: نقطه‌ی شروع و پایان جریان، مثل «کاربر نوتیفیکیشن را لمس می‌کند» یا «رسید نمایش داده می‌شود».
• مستطیل: یک صفحه یا یک حالت از صفحه، با اسم کوتاه و ثابت (همان اسمی که در فایل طراحی دارد).
• لوزی: یک تصمیم یا شرط با جواب بله یا نه؛ مثل «کاربر وارد حساب شده است؟».
• فلش: جهت حرکت، همراه با برچسب عملی که کاربر انجام می‌دهد؛ مثل «لمس دکمه‌ی ادامه».
• رنگ یا نماد جدا برای خطا: مسیرهای خطا را با رنگ مشخص (مثلاً قرمز کم‌رنگ) جدا کنید تا با یک نگاه دیده شوند.
• یادداشت کنار نمودار: برای قانون‌های کسب‌وکار، مثل سقف انتقال روزانه یا حداقل مبلغ سفارش.

آموزش رسم یوزر فلو در شش قدم

۱. هدف کاربر و هدف کسب‌وکار را بنویسید

هر یوزر فلو با یک جمله شروع می‌شود: چه کسی، چه کاری را، چرا انجام می‌دهد. مثلاً «مریم می‌خواهد سهم ناهار همکارش را سریع به کارت او بفرستد». کنارش هدف کسب‌وکار را بنویسید، مثلاً کم شدن تماس با پشتیبانی درباره‌ی انتقال‌های ناموفق. این دو جمله معیار سنجش جریان شما هستند.

۲. نقطه‌های ورود را فهرست کنید

کاربر همیشه از صفحه‌ی خانه وارد نمی‌شود. لینک پیامکی، نوتیفیکیشن، جستجوی داخل اپ، میانبر صفحه‌ی اصلی گوشی و بازگشت از یک اپ دیگر هر کدام می‌توانند نقطه‌ی شروع باشند. هر نقطه‌ی ورود ممکن است کاربر را با وضعیت متفاوتی (مثلاً واردنشده) به جریان برساند.

۳. مسیر اصلی را رسم کنید

اول مسیر خوش (Happy Path) را بکشید: کوتاه‌ترین مسیری که در آن همه‌چیز درست پیش می‌رود. این مسیر را تا جای ممکن کوتاه نگه دارید و برای هر صفحه بپرسید «اگر این صفحه حذف شود، چه چیزی از دست می‌رود؟».

۴. تصمیم‌ها و شاخه‌ها را اضافه کنید

حالا هر جا سیستم یا کاربر باید انتخاب کند، لوزی بگذارید: کاربر واردشده است یا نه، کارت ذخیره‌شده دارد یا نه، روش پرداخت کدام است. هر لوزی دست‌کم دو خروجی دارد و هر دو باید به جایی برسند؛ شاخه‌ی بی‌سرانجام یعنی کاربری که در محصول گم می‌شود.

۵. خطاها و حالت‌های خاص را جا نیندازید

بیشتر مشکل‌های تجربه کاربری در همین قدم پیدا می‌شوند. برای هر صفحه این چک‌لیست را مرور کنید: قطع شدن اینترنت، ورودی نامعتبر، تمام شدن زمان نشست، خالی بودن داده (Empty State)، بازگشت با دکمه‌ی برگشت گوشی و بسته شدن اپ وسط کار. برای هر کدام مشخص کنید کاربر کجا برمی‌گردد و چه پیامی می‌بیند.

۶. با تیم و کاربر بازبینی کنید

یوزر فلو را با یک برنامه‌نویس و یک نفر از پشتیبانی مرور کنید. برنامه‌نویس محدودیت‌های فنی را می‌بیند و پشتیبانی خطاهایی را می‌شناسد که کاربران واقعاً به آن‌ها برمی‌خورند. بعد از ساخت پروتوتایپ، همین جریان را با چند کاربر تست کنید و ببینید کجا از مسیر پیش‌بینی‌شده خارج می‌شوند.

مثال یوزر فلو: انتقال کارت‌به‌کارت در اپ بانکی

هدف: کاربر واردشده می‌خواهد مبلغی را به کارت یک همکار منتقل کند. نقطه‌ی ورود: دکمه‌ی «کارت‌به‌کارت» در صفحه‌ی خانه. جریان به زبان متن این‌طور است:

• شروع: لمس «کارت‌به‌کارت» در صفحه‌ی خانه.
• صفحه‌ی انتخاب کارت مبدأ؛ تصمیم: کاربر بیش از یک کارت دارد؟ اگر نه، این صفحه رد می‌شود و کارت پیش‌فرض انتخاب می‌شود.
• صفحه‌ی ورود کارت مقصد؛ دو راه: انتخاب از مقصدهای ذخیره‌شده یا وارد کردن ۱۶ رقم. تصمیم: شماره معتبر است؟ اگر نه، پیام خطا زیر همان فیلد و ماندن در صفحه.
• صفحه‌ی مبلغ؛ تصمیم: مبلغ از موجودی یا سقف مجاز بیشتر است؟ اگر بله، پیام خطا با ذکر علت و پیشنهاد مبلغ مجاز.
• صفحه‌ی تأیید: نمایش نام صاحب کارت مقصد، مبلغ و کارمزد. این قدم مهم‌ترین نقطه‌ی جلوگیری از خطاست؛ کاربر باید بتواند به عقب برگردد و مقصد را اصلاح کند.
• ورود رمز دوم پویا؛ تصمیم: رمز درست است؟ اگر نه، پیام خطا و امکان دریافت دوباره‌ی رمز پس از پایان زمان‌سنج.
• حالت در حال پردازش؛ تصمیم: پاسخ بانک رسید؟ اگر زمان تمام شد، صفحه‌ی «وضعیت نامشخص» با راهنمای پیگیری، نه پیام کلی «خطا».
• پایان: رسید با شماره‌ی پیگیری، دکمه‌ی اشتراک‌گذاری و پیشنهاد ذخیره‌ی مقصد.

دقت کنید که بیشتر ارزش این نمودار در شاخه‌های خطاست، نه در مسیر اصلی. مثلاً حالت «وضعیت نامشخص» اگر در یوزر فلو دیده نشود، معمولاً در طراحی هم فراموش می‌شود و کاربر با یک پیام مبهم تنها می‌ماند.

مثال دوم: ثبت سفارش در اپ غذا برای کاربر مهمان

این مثال نشان می‌دهد نقطه‌ی ورود و وضعیت کاربر چطور جریان را عوض می‌کند. کاربری که حساب ندارد از لینک یک کد تخفیف وارد صفحه‌ی رستوران می‌شود:

• شروع: باز شدن لینک کد تخفیف و نمایش صفحه‌ی رستوران.
• تصمیم: آدرس کاربر مشخص است؟ اگر نه، قبل از هر کاری آدرس یا موقعیت گرفته می‌شود، چون محدوده‌ی ارسال به آن بستگی دارد.
• تصمیم: رستوران به این آدرس ارسال دارد؟ اگر نه، پیام روشن و پیشنهاد رستوران‌های مشابه، نه یک صفحه‌ی خالی.
• افزودن غذا به سبد و رفتن به سبد خرید؛ تصمیم: به حداقل سفارش رسیده؟ اگر نه، نمایش مبلغ باقی‌مانده.
• ورود با شماره‌ی موبایل و کد یک‌بارمصرف، دقیقاً در لحظه‌ای که لازم است، نه در ابتدای جریان.
• اعمال خودکار کد تخفیف لینک و نمایش مبلغ نهایی؛ پرداخت و پایان با صفحه‌ی پیگیری سفارش.

تصمیم طراحی مهم این جریان، عقب انداختن ثبت‌نام تا قدم پرداخت است. این تصمیم وقتی روی نمودار دیده می‌شود، راحت‌تر از یک بحث شفاهی با تیم به توافق می‌رسد.

ابزارهای رسم یوزر فلو

ابزار مهم‌تر از فکر نیست؛ اولین نسخه را می‌شود روی کاغذ کشید. برای نسخه‌ی قابل اشتراک، فیگ‌جم (FigJam) انتخاب رایجی است چون شکل‌ها و فلش‌های متصل دارد و در کنار فایل فیگما می‌ماند. برای وایرفلو، رسم مستقیم در فیگما کنار فریم‌های طراحی بهتر است تا با تغییر طراحی، نمودار هم به‌روز بماند. اگر روی تحلیل یک فرایند کاری بزرگ‌تر کار می‌کنید، ساده‌ترین روش تجزیه و تحلیل جریان کار هم به کارتان می‌آید.

اشتباه‌های رایج در رسم جریان کاربر

• رسم فقط مسیر خوش و جا انداختن خطاها، حالت خالی و قطع اینترنت.
• یک نمودار غول‌پیکر برای کل محصول؛ هر یوزر فلو باید یک هدف داشته باشد.
• اسم‌گذاری ناهماهنگ صفحه‌ها بین یوزر فلو و فایل طراحی، که پیدا کردن صفحه‌ها را برای برنامه‌نویس سخت می‌کند.
• لوزی‌هایی که فقط یک خروجی دارند یا شاخه‌هایی که به جایی نمی‌رسند.
• رسم جریان از دید سیستم (درخواست به سرور، پاسخ دیتابیس) به‌جای دید کاربر؛ این کار نمودار فنی است، نه یوزر فلو.

سوالات متداول

یوزر فلو را قبل از وایرفریم بکشیم یا بعد از آن؟

معمولاً قبل از آن. یوزر فلو تعیین می‌کند چه صفحه‌هایی لازم است و وایرفریم شکل هر صفحه را مشخص می‌کند. بعد از ساخت وایرفریم‌ها می‌توانید یوزر فلو را به وایرفلو تبدیل کنید.

هر یوزر فلو باید چند قدم داشته باشد؟

عدد ثابتی ندارد؛ مهم این است که فقط یک هدف را پوشش دهد. اگر نمودار آن‌قدر بزرگ شد که در یک صفحه دیده نمی‌شود، احتمالاً باید آن را به چند جریان کوچک‌تر تقسیم کنید.

تفاوت یوزر فلو و یوزر استوری چیست؟

یوزر استوری یک جمله درباره‌ی نیاز کاربر است و یوزر فلو مسیر برآورده شدن آن نیاز را نشان می‌دهد. معمولاً هر یوزر استوری مهم یک یوزر فلو دارد؛ برای آشنایی با اولی داستان کاربری یا User Story را بخوانید.

از نمودار تا طراحی: جریان را اول روی کاغذ درست کنید

یوزر فلوی خوب ارزان‌ترین جای پیدا کردن مشکل است؛ جابه‌جا کردن یک لوزی چند ثانیه وقت می‌گیرد، ولی تغییر یک جریان برنامه‌نویسی‌شده چند روز. با هدف روشن شروع کنید، نقطه‌های ورود را بشمارید، مسیر خوش را کوتاه کنید و بعد سراغ خطاها بروید.

در دوره‌ی تجربه کاربری آکادمی طراحی دایره رسم یوزر فلو بخشی از پروژه‌ی اصلی دوره است و آن را کنار پرسونا، وایرفریم و تست کاربردپذیری تمرین می‌کنید. اگر می‌خواهید ابزار رسم را هم دقیق یاد بگیرید، آموزش فیگ‌جم هم گزینه‌ی مناسبی است.