User Flow یا یوزرفلو، مسیر معمول یا ایده‌آلی از تعامل‌هاست که کاربر برای انجام یک هدف مشخص در محصول طی می‌کند؛ مثلا ثبت‌نام، خرید محصول، رزرو وقت یا تغییر رمز عبور. یوزرفلو کمک می‌کند قبل از طراحی جزئیات UI ببینیم کاربر از کجا وارد مسیر می‌شود، چه تصمیم‌هایی می‌گیرد و در نهایت چگونه به هدف می‌رسد.
نسخه قبلی این آموزش تعریف پایه، تحقیق کاربر، مقایسه رقبا، Use Case، مسیر اصلی، سناریوها و ترسیم دیاگرام را پوشش می‌داد. همه این بخش‌ها حفظ شده‌اند و در نسخه جدید با تفاوت User Flow و User Journey، Task Flow، Sitemap، علائم رایج، مثال عملی و روش ارزیابی Flow کامل‌تر شده‌اند.
در این آموزش چه چیزهایی یاد می‌گیرید؟
- User Flow دقیقا چیست و چه مسئله‌ای را حل می‌کند
- تفاوت User Flow با User Journey، Task Flow و Sitemap
- چه زمانی باید User Flow طراحی کنیم
- قبل از ترسیم Flow چه تحقیق و اطلاعاتی لازم است
- Entry Point، Action، Decision و Outcome چیست
- چطور Happy Path و Edge Caseها را طراحی کنیم
- چطور Flow ثبت‌نام یا خرید را قدم‌به‌قدم ترسیم کنیم
- چطور User Flow را ارزیابی و ساده‌تر کنیم
- چه زمانی Flowchart کافی است و چه زمانی Wireflow بهتر است
ویدیوی آموزش User Flow در UX
نسخه منطبق این آموزش در آپارات پیدا نشد؛ بنابراین ویدیوی اصلی YouTube را حفظ کرده‌ایم. متن مقاله ساختار و مثال‌های ویدیو را کامل‌تر کرده است.
User Flow چیست؟
User Flow مجموعه‌ای از Interactionها و گام‌های مشخصی است که یک کاربر برای انجام یک Task رایج در یک محصول طی می‌کند. تمرکز Flow روی یک هدف مشخص داخل محصول است، نه تمام تجربه زندگی کاربر با برند.
مثلا «خرید یک کفش» می‌تواند شامل ورود از صفحه محصول، انتخاب سایز، افزودن به سبد، ورود یا ادامه مهمان، انتخاب آدرس، پرداخت و نمایش Confirmation باشد. در Flow علاوه بر Screenها، تصمیم‌ها و پاسخ سیستم هم مهم‌اند.
User Flow چه کمکی به طراحی UX می‌کند؟
- شفاف‌کردن مسیر کاربر: تیم می‌بیند کاربر برای رسیدن به هدف چند مرحله طی می‌کند.
- پیداکردن اصطکاک: Step اضافی، Loop، Dead End و تصمیم‌های غیرضروری سریع‌تر دیده می‌شوند.
- هم‌راستایی تیم: Designer، Product Manager و Developer روی رفتار مورد انتظار توافق می‌کنند.
- کمک به Wireframe: مشخص می‌شود برای هر Flow به چه Screenها و Stateهایی نیاز داریم.
- پشتیبانی از تست: می‌توان Scenario و Task تست کاربردپذیری را از روی Flow تعریف کرد.
تفاوت User Flow و User Journey چیست؟
این دو ابزار نزدیک‌اند اما Scope متفاوتی دارند. User Flow روی مجموعه تعامل‌های مشخص داخل یک Product برای رسیدن به یک هدف کوتاه‌مدت تمرکز می‌کند. User Journey تجربه وسیع‌تر کاربر را در طول زمان و گاهی بین چند Channel بررسی می‌کند و می‌تواند Thought، Emotion و Pain Pointها را هم ثبت کند.
- User Flow: «چطور در اپلیکیشن رزرو انجام می‌دهم؟»
- User Journey: «از زمانی که نیاز به سفر پیدا می‌کنم تا بعد از پایان سفر چه تجربه‌ای دارم؟»
User Flow و Task Flow چه تفاوتی دارند؟
Task Flow معمولا یک مسیر ساده و نسبتا خطی برای انجام یک Task را نشان می‌دهد. User Flow می‌تواند Branch و Decision بیشتری داشته باشد و مسیرهای مختلف کاربران را در نظر بگیرد. در تیم‌های مختلف این اصطلاح‌ها گاهی به‌جای هم استفاده می‌شوند؛ مهم‌تر از اسم، مشخص‌بودن Scope و هدف Diagram است.
User Flow و Sitemap چه تفاوتی دارند؟
Sitemap ساختار و Hierarchy محتوا و Pageهای یک Site یا Product را نشان می‌دهد؛ User Flow نشان می‌دهد کاربر برای انجام یک هدف چگونه بین Screenها و Stateها حرکت می‌کند. Sitemap جواب می‌دهد «چه چیزهایی کجا قرار دارند؟» و User Flow جواب می‌دهد «کاربر برای انجام این کار از چه مسیری می‌رود؟».
قبل از ترسیم User Flow چه اطلاعاتی لازم داریم؟
۱. شناخت کاربر و هدف
Flow را از Structure سیستم شروع نکنید؛ از Goal کاربر شروع کنید. Research، Interview، Analytics، Support ticket و Usability Test می‌توانند نشان دهند کاربر واقعا چه می‌خواهد و کجا مشکل دارد.
۲. بررسی رقبا و Patternهای آشنا
Competitive Analysis کمک می‌کند Patternهای رایج را ببینید؛ اما Flow رقیب را کورکورانه کپی نکنید. Context، Business Rule، Audience و محدودیت‌های محصول شما ممکن است متفاوت باشد.
۳. تعریف Use Case و Scenario
به‌جای «Flow خرید»، Scenario را دقیق کنید: «کاربر مهمان می‌خواهد یک محصول موجود را با کارت بانکی بخرد.» این تعریف Entry Point، شرط‌ها و End State را روشن‌تر می‌کند.
اجزای اصلی یک User Flow
- Entry Point: جایی که Flow شروع می‌شود؛ مثل Search Result، Notification یا Home.
- Action: کاری که کاربر انجام می‌دهد؛ مثل انتخاب محصول یا Submit فرم.
- Screen/State: صفحه یا وضعیت رابط که کاربر می‌بیند.
- Decision: نقطه‌ای که Flow بر اساس شرط به چند مسیر تقسیم می‌شود.
- System Response: پاسخ سیستم؛ Success، Error، Validation یا Loading.
- End State: نتیجه قابل‌تشخیص؛ مثل خرید موفق یا توقف فرآیند.
علائم رایج در Flowchart
استاندارد واحد اجباری برای همه تیم‌های UX وجود ندارد، اما بهتر است Legend ساده و ثابت داشته باشید. Pattern رایج:
- Oval یا Rounded shape: Start / End
- Rectangle: Action، Process یا Screen
- Diamond: Decision / Condition
- Arrow: Direction و Transition
اگر Team convention دیگری دارد، همان را استفاده کنید؛ Consistency مهم‌تر از انتخاب یک Shape خاص است.
مراحل طراحی User Flow
مرحله ۱: یک Goal مشخص انتخاب کنید
هر Flow بهتر است یک Goal اصلی داشته باشد. اگر Diagram همزمان Sign-up، Purchase، Support و Profile را پوشش می‌دهد، احتمالا بیش از حد بزرگ شده است.
مرحله ۲: Entry Point را مشخص کنید
کاربر از کجا وارد Flow می‌شود؟ Landing page، Deep Link، Push Notification، Search، Home یا Screen قبلی؟ Entry Point روی مسیر و Context کاربر اثر دارد.
مرحله ۳: Happy Path را ترسیم کنید
اول مسیر اصلی و موفق را بدون Edge Case بکشید. این کار Skeleton Flow را روشن می‌کند و جلوی شلوغ‌شدن زودهنگام Diagram را می‌گیرد.
مرحله ۴: Decisionها و Branchها را اضافه کنید
حالا شرط‌ها را اضافه کنید: کاربر Login است؟ محصول موجود است؟ پرداخت موفق شد؟ Permission داده شده؟ هر Branch باید به Outcome مشخص برسد یا به مسیر مناسب برگردد.
مرحله ۵: Error و Edge Case را اضافه کنید
Flow خوب فقط Happy Path نیست. Empty state، Validation error، Network failure، Cancel، Back و Permission denied می‌توانند Experience واقعی را تغییر دهند.
مرحله ۶: Flow را با تیم Review کنید
Product، Development و Research باید بتوانند Diagram را بدون توضیح شفاهی طولانی بفهمند. اگر Flow پر از Arrowهای متقاطع و Labelهای مبهم است، آن را Split یا ساده کنید.
مثال User Flow: خرید محصول
- Entry: Product page
- انتخاب Variant/Size
- Add to cart
- Cart review
- Decision: Login است؟
- Login / Continue as guest
- Address
- Shipping method
- Payment
- Decision: پرداخت موفق؟
- Success → Order confirmation
- Failure → Error message → Retry / Change payment method
این Flow ساده است اما دو Decision مهم را نشان می‌دهد. در محصول واقعی می‌توان حالت Out of stock، Coupon، Address validation و Back navigation را هم اضافه کرد.
Flowchart یا Wireflow؟
در مرحله اولیه، Flowchart ساده برای تصمیم‌گیری سریع کافی است. وقتی Screen structure هم مهم می‌شود، Wireflow مفیدتر است؛ یعنی Wireframeهای ساده را با Arrow و Interaction به هم وصل می‌کنید تا هم مسیر و هم Interface context دیده شود.
چطور یک User Flow خوب را ارزیابی کنیم؟
- آیا Goal کاربر واضح است؟
- آیا Step غیرضروری داریم؟
- آیا Decisionها Label واضح دارند؟
- آیا Error/Cancel/Back در نظر گرفته شده است؟
- آیا هیچ Dead End ناخواسته‌ای وجود ندارد؟
- آیا System response بعد از Actionهای مهم مشخص است؟
- آیا تیم بدون توضیح طراح می‌تواند Diagram را بخواند؟
- آیا Flow با Research یا داده واقعی سازگار است؟
اشتباهات رایج در طراحی User Flow
- شروع از Screenها به‌جای Goal: Flow تبدیل به Sitemap می‌شود.
- فقط Happy Path: تجربه واقعی Error و Branch دارد.
- Diagram بسیار بزرگ: چند Goal مستقل را در یک Flow نریزید.
- Arrowهای بدون Label: Decision branch باید قابل‌فهم باشد.
- کپی Flow رقبا: Pattern را یاد بگیرید، Context محصول خودتان را طراحی کنید.
- ساخت Flow بعد از UI: Flow بهتر است قبل یا همزمان با Wireframe شکل بگیرد تا Architecture را هدایت کند.
User Flow را با چه ابزاری بسازیم؟
ابزار ثانویه است. می‌توانید روی کاغذ، Whiteboard، FigJam، Figma یا ابزار Diagram این کار را انجام دهید. برای Team collaboration، ابزار باید Comment، Editing مشترک و Link sharing مناسبی داشته باشد. مهم این است که Flow سریع قابل‌ویرایش باشد و Documentation آن به Product نزدیک بماند.
جمع‌بندی
User Flow به تیم کمک می‌کند مسیر مشخصی را که کاربر برای انجام یک Task در محصول طی می‌کند، قبل از پیاده‌سازی ببینند و بهینه کنند. از Goal و Entry Point شروع کنید، Happy Path را بسازید، Decision و Edge Case را اضافه کنید و سپس Flow را با Research، Wireframe و Prototype اعتبارسنجی کنید.
