وایرفرلو، تسک فلو، یوزر فلو و فلوچارت

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

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

فلوهای وظیفه (Task Flows)، فلوهای کاربری (User Flows) و فلوچارت‌ها—این اصطلاحات همگی به نمودارهایی اشاره می‌کنن که طراحان برای ثبت تعاملات کاربران و نمایش جریان حرکت و تصمیم‌گیری استفاده می‌کنن. تفاوت اصلی بین Task Flow و Flowchart سطح جزئیاته؛ و عبارت «User Flow» معمولاً برای هر دو مورد به‌جای هم به‌کار می‌ره.

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

Task Flow

Task Flow نموداریه که یک دنباله‌ی خطی از مراحل رو نشون می‌ده، مراحلی که یک کاربر برای انجام یک کار مشخص طی می‌کنه؛ مثلاً فلو ورود به سیستم. Task Flowها با زبان ساده و طبیعی نوشته می‌شن و هیچ طراحی UI در اون‌ها وجود نداره. همچنین معمولاً مسیرهای جایگزین یا خطاها—مثل فراموشی رمز عبور—رو نشون نمی‌دن.

Task Flowها برای برنامه‌ریزی بهترین مسیر انجام وظایف بسیار مفیدن. یکی از روش‌های ساخت Task Flow اینه که Task Analysis انجام بدید و ببینید کاربران چطور کارهاشون رو انجام می‌دن و به هدفشون می‌رسن.

Flowchart

Flowchartها شبیه Task Flowها هستن اما با جزئیات بیشتر. علاوه بر مسیر حرکت کاربر در سیستم، تصمیماتی که در طول مسیر می‌گیره (مثل: آیا کاربر وارد شده؟ بله/خیر) و فرآیندهای بک‌اندی که فعال می‌شن (مثل ارسال درخواست به سرور) هم در فلوچارت ثبت می‌شن.

به‌خاطر همین ویژگی، Flowchartها امکان ثبت دقیق‌تر جریان کاربر و سیستم رو فراهم می‌کنن و نقاط انشعاب تصمیمات رو کاملاً مشخص می‌کنن. این نمودارها برای نمایش پیچیدگی محصول عالی هستن، اما همانند Task Flowها یک مشکل دارند: هیچ UIای نمایش نمی‌دهند.

Wireflow

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

Wireflowها تغییرات بصری UI رو هنگام تعامل کاربر با یک اپ یا وب‌سایت نشون می‌دن. همچنین می‌تونن شامل یادداشت‌هایی برای توضیح اتفاقات بک‌اند باشن. به Wireflowها مثل Task Flowها و Flowchartهای مصور نگاه کنید.

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

Simplified Wireflow

وایرفلوهای ساده‌شده (Simplified Wireflows) به شما اجازه می‌دن جریان‌ها رو به‌شکل انتزاعی‌تر نشون بدید؛ با استفاده از نمای کوچک‌شده‌ی صفحات به‌جای وایرفریم‌های کامل. این روش یک مدل ترکیبی بین Task Flow و Wireflow معمولیه. به‌جای اینکه برای هر صفحه وایرفریم اختصاصی بسازید، یک Task Flow دارید که با نمادهایی مربوط به انواع صفحه‌ها تصویرسازی شده.

سازمان‌دهی و کاربرد Wireflow

یکی از کاربردهای رایج Wireflow اینه که مسیر انجام یک وظیفه معمولی در محصول رو ثبت کنه، مثلاً اضافه کردن یک آهنگ به پلی‌لیست.

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

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

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

فرآیند ساخت Wireflow

این مراحل رو با مثال یک اپلیکیشن موبایل بررسی می‌کنیم:

۱. نیاز و مسئله رو داخل یک User Story توضیح بدید. مثلاً ثبت‌نام کاربر—انتخاب نام کاربری، ایمیل و رمز عبور.
۲. صفحه‌های کلیدی رو شناسایی کنید. بهترین راه اینه که نقطه شروع و پایان رو مشخص کنید؛ مثلاً شروع: صفحه لاگین، پایان: نمایش پیام خوش‌آمدگویی.
۳. صفحه‌ها رو با فلش‌ها به ترتیبی که کاربر پیش می‌ره بهم وصل کنید. همچنین می‌تونید نقاط تصمیم‌گیری رو اضافه کنید و نشون بدید در سناریوهای متفاوت چه اتفاقی می‌افته—مثلاً اگر کاربر رمز رو فراموش کنه.