این مقاله درباره

یوزر فلو چیست

یوزر فلو چیست؟ نقشه گام‌به‌گام از ورود تا اقدام، با خطا و بازگشت. تفاوت با وایرفریم و نقشه سفر، مثال ثبت‌نام و خرید، تحویل به فنی.

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

نوشته شده توسط محمد اصل زنجانی

بازبینی‌شده توسط روبینش

اولین نظر را بدهید — امتیاز خوانندگان روبینش

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

جست‌وجوهایی مثل «یوزر فلو چیست»، «تفاوت user flow و وایرفریم»، «نقشه سفر کاربر»، «فلو ثبت‌نام»، «فلو خرید» و «تحویل فلو به تیم فنی» از تیمی می‌آید که صفحه دارد اما مسیر ندارد. در این راهنما تعریف، مرز با وایرفریم، تفاوت با نقشهٔ سفر، مثال ثبت‌نام و خرید، و تحویل به توسعه را می‌نویسیم. ساختار صفحه را در راهنمای وایرفریم ببینید، شواهد رفتار را در تحقیق کاربر چیست، و اجرای مسیر را در خدمات UI/UX روبینش.

A journey map is a visualization of the process that a person goes through in order to accomplish a goal.

منبع: Nielsen Norman Group — Journey Mapping 101
نمودار یوزر فلو فارسی روی لپ‌تاپ: ورود، انتخاب، فرم و تأیید — روبینش | Rubinesh
فلو خوب مسیر کار را نشان می‌دهد، نه گالری صفحه‌ها را.

یوزر فلو چیست و چه چیزی نیست؟

یوزر فلو (user flow) توالی قدم‌هایی است که یک نقش مشخص برای تمام‌کردن یک کار برمی‌دارد. نقطهٔ شروع مهم است: تبلیغ، جستجو، ایمیل، یا لینک داخلی. نقطهٔ پایان هم مهم است: رزرو ثبت شد، سفارش پرداخت شد، یا فرم مشاوره ارسال شد. بین این دو، تصمیم‌ها، صفحه‌ها، پیام‌ها و انشعاب‌ها قرار می‌گیرند. اگر فلو را ننویسید، هر صفحه جدا «کامل» به نظر می‌رسد و کاربر وسط مسیر گم می‌شود.

یوزر فلو سایت‌مپ نیست. سایت‌مپ فهرست URLهاست؛ فلو ترتیب انجام کار است. ممکن است سه صفحه در سایت‌مپ باشند و کاربر برای یک کار پنج بار بین آن‌ها رفت‌وبرگشت کند. یوزر فلو همچنین پروتوتایپ نیست. پروتوتایپ فلو را قابل کلیک می‌کند تا رفتار دیده شود؛ خودِ نقشه را جایگزین نمی‌کند. ساخت نمونهٔ قابل تست را در راهنمای پروتوتایپ جدا ببینید تا این صفحه روی مسیر بماند.

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

فلو، وایرفریم و نقشه سفر چه سؤالی را جواب می‌دهند
خروجی سؤال اصلی نمونه
یوزر فلو قدم بعدی چیست؟ ورود → انتخاب → فرم → تأیید
وایرفریم در این صفحه چه هست؟ جای H1، فیلتر، CTA، خطا
نقشه سفر در طول زمان چه حس و کانالی هست؟ جستجو، تماس، مراجعه، پیگیری

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

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

ترتیب درست معمولاً این است: کار اصلی را با تحقیق تنگ کنید، فلو را بکشید، بعد صفحات کلیدی را وایرفریم کنید. پریدن به وایرفریم چون «باید چیزی برای جلسه باشد»، همان هزینهٔ بازکاری است که بعداً در کد گران می‌شود. اگر فلو می‌گوید سه مرحله لازم است، وایرفریم نباید چهار صفحهٔ تزئینی بسازد. برعکس، اگر وایرفریم نشان داد یک صفحه دو کار متعارض دارد، فلو را دوباره ببرید نه اینکه رنگ را عوض کنید.

در عمل، فلو را روی کاغذ یا بورد با جعبه و فلش شروع کنید. هر جعبه یک صفحه یا یک تصمیم است، نه یک کامپوننت. برچسب را با زبان کاربر بنویسید: «میز برای جمعه شب» نه «ماژول occupancy». وقتی مسیر اصلی پایدار شد، همان را به وایرفریم صفحه به صفحه وصل کنید. این اتصال است که به توسعه می‌گوید کدام صفحه اول اسپرینت است.

نقشه سفر کاربر چه فرقی با یوزر فلو دارد؟

نقشه سفر (journey map) معمولاً زمان، کانال و احساس را هم نشان می‌دهد: از شنیدن نام برند تا بعد از خرید. ممکن است شامل تماس تلفنی، واتساپ، مراجعه حضوری و ایمیل پیگیری باشد. یوزر فلو معمولاً روی یک هدف داخل محصول دیجیتال تنگ‌تر است. هر دو مفیدند اگر سؤال جدا داشته باشند. سفر می‌گوید «اعتماد کجا می‌شکند»؛ فلو می‌گوید «کدام کلیک بعدی است».

نقشه سفر کاربر فارسی کنار فلو ثبت‌نام روی دو مانیتور — روبینش | Rubinesh
سفر زمینه می‌دهد؛ فلو قدم داخل محصول را مشخص می‌کند.

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

نقشه سفر را با پرسونای ساختگی پر نکنید. احساسات را از نقل‌قول و مشاهده بگیرید، نه از جلسهٔ طوفان فکری. فلو را هم با analytics دروغین تزئین نکنید. درصد رها شدن وقتی معنا دارد که قیف واقعی دارید؛ در محصول جدید، فرضیه و تست جایگزین عدد ساختگی است. تست روی همان مسیر را در تست کاربردپذیری چیست جدا اجرا کنید.

مثال ثبت‌نام، خرید و چند مسیر عمودی

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

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

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

تحویل یوزر فلو به تیم فنی

توسعه‌دهنده از فلو باید بفهمد کدام صفحه در اسکوپ است، کدام حالت خطا API دارد، و کدام دکمه آگاهانه کار نمی‌کند. فایل فیگما بدون این قرارداد، حدس می‌سازد. نام صفحات را با URL یا شناسهٔ پایدار یکی کنید. برای هر انشعاب بنویسید منبع حقیقت کجاست: موجودی، ظرفیت میز، وضعیت احراز. ابزار بوم را در فیگما چیست جدا ببینید؛ اینجا قرارداد مسیر است.

پروتوتایپ چندمرحله‌ای تسویه با شماره قدم روی لپ‌تاپ — روبینش | Rubinesh
تحویل خوب قدم، خطا و اسکوپ را می‌نویسد، نه فقط اسکرین‌شات.

فلو را در بورد پروژه به تیکت وصل کنید: «مرحله ۳ — خطای درگاه». اگر طراحی عوض شد، نسخهٔ فلو را هم عوض کنید وگرنه فرانت صفحهٔ قدیمی را می‌سازد. جلسهٔ هندآف را با اجرای مسیر شروع کنید، نه با تور لایه‌ها. ذی‌نفع باید ببیند کاربر از کجا به تأیید می‌رسد. جزئیات فاصله، توکن و حالت را در دیزاین هندآف چیست به فرانت بدهید؛ اول مسیر باید یکی باشد.

نسخهٔ موبایل فلو جدا نیست اما اولویت قدم ممکن است عوض شود. چیزی که در دسکتاپ سایدبار است شاید در موبایل باید قبل از فرم بیاید. این را در فلو با یک شاخه یا یادداشت «موبایل: تأیید قبل از جزئیات» ثبت کنید، نه بعد از اسپرینت. مرز نقش رابط و تجربه را در تفاوت UI و UX بخوانید اگر تیم هنوز روی رنگ گیر کرده و مسیر را ندیده است.

اشتباهات رایج در یوزر فلو

  • کشیدن فقط مسیر موفق و فراموش کردن خطا و انصراف
  • یکی کردن سایت‌مپ با فلو
  • افزودن مرحله برای راحتی سیستم داخلی
  • برچسب فنی به‌جای زبان کاربر
  • یک فلو برای همهٔ نقش‌ها
  • عدم وصل به وایرفریم و تیکت توسعه
  • شروع از UI چون «باید چیزی برای جلسه باشد»

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

چک‌لیست قبل از تحویل یوزر فلو

  1. نقش و کار اصلی در یک جمله نوشته شده است.
  2. نقطهٔ ورود و نقطهٔ موفقیت معلوم است.
  3. خطا، بازگشت و انصراف شاخه دارند.
  4. هر جعبه به یک صفحه یا تصمیم واقعی وصل است.
  5. مرحلهٔ بدون ارزش برای کاربر حذف یا توجیه شده است.
  6. نسخهٔ موبایل اولویت قدم را خراب نمی‌کند.
  7. تیم فنی منبع حقیقت هر انشعاب را می‌داند.
  8. فلو به وایرفریم یا پروتوتایپ همان مسیر وصل است.

جمع‌بندی: مسیر قبل از صفحه

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

اگر می‌خواهید مسیر را روی سایت خودتان بگذارید، از صفحه UI/UX روبینش و فرم مشاوره شروع کنید. این مقاله تعرفه نمی‌سازد و رتبه تضمین نمی‌کند. یک فلو مکتوب برای کار اصلی این هفته، از ده صفحهٔ زیبا بدون مسیر برای اسپرینت بعد مفیدتر است.

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

یوزر فلو همان سایت‌مپ است؟

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

اول فلو بکشیم یا وایرفریم؟

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

نقشه سفر کاربر جای یوزر فلو را می‌گیرد؟

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

برای هر نقش یک فلو لازم است؟

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

طراحی مسیر را از کدام صفحه سفارش دهیم؟

مسیر اجرا در صفحه UI/UX روبینش است. این مقاله خودِ نقشه قدم‌ها را می‌گوید نه تعرفه را.