کوتاه در مورد طراحی User Flow

اگر از قبل با User Flow آشنایی دارید بخش اول این مقاله رو لازم نیست بخونید، تکراریه براتون و وقتتون بیشتر از خوندن چیزهای تکراری ارزش داره.

اگر ایده‌آل گرا هستید و دوست دارید کامل بخونید جلوتونو نمی‌گیرم اما مطمئن باشید چیزی رو از دست نمی‌دین.



بخش اول: User Flow چیست؟

برای آشنایی با User Flow بهتره اول با مفهوم Flow Chart آشنا بشیم. اگر با این مفهوم آنشا نیستین ویدئوی زیر رو ببینید. سعی کردم به زبان ساده توضیحش بدم.

https://www.aparat.com/v/czU1K/%D8%A2%D9%85%D9%88%D8%B2%D8%B4_%DA%A9%D8%A7%D8%AA%D9%84%DB%8C%D9%86_-_%D8%A7%D9%84%DA%AF%D9%88%D8%B1%DB%8C%D8%AA%D9%85_%D9%88_%D9%81%D9%84%D9%88%DA%86%D8%A7%D8%B1%D8%AA

حالا که با مفهوم فلوچارت آشنا بودین/شدین بهتره بریم سراغ User Flow.

به زبان ساده User Flow مسیریه که داخل سایت/اپلیکیشن برای کاربر در نظر می‌گیریم که کاربر با طی کردن اون مسیر به هدف نهایش/نهاییمون برسه. این مسیر هر چقدر ساده‌تر و مطابق با Mental Model کاربر باشه، کاربر با Cognitive Load کمتری به هدفش/هدفهمون می‌رسه و تجربه بهتری هم ادراک می‌کنه.

برای آشنایی با بار شناختی (Cognitive Load ) به مقاله‌ی ۹ اثر روانشناسی تاثیرگذار بر طراحی Walkthrough رجوع کنید.


بخش دوم: شروع طراحی User Flow

خوب یه راست بپریم داخل موضوع.

مثلا فرض کنید می‌خواهیم برای یک سایت چاپ کارهای چاپی مثل کارت ویزیت، پوستر، بنر، سالنامه و ... مسیر کاربر رو مشخص کنیم.

هدف کاربر تو این سایت اینه که سفارش چاپ کار چاپیشو ثبت کنه.


۱. برای طراحی از Task Flow شروع کنید

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

به مرور شروع می‌کنیم بست دادن User Flow. مثلا اولین مستطیل (کاربر وارد می‌شود) را در نظر بگیرید. اگر کاربر قبلا از سایت استفاده کرده باشه و لاگین باشه دیگه نیازی نیست که این مرحله رو رد کنه برای همین اینجا مثل تصویر زیر یک شرط اضافه می‌شه که آیا کاربر در سیستم لاگین است یا نه که اگر لاگین باشه به صورت سیستمی به مرحله‌ی دوم می‌ره و اگر نباشه وارد صفحه‌ی لاگین می‌شه.

و دوباره اینجا سوال می‌شه که آیا کاربر قبلا توی سایت/اپلیکیشن حساب کاربری داره یا نه که اگر نداره باید مثل تصویر زیر وارد صفحه‌ی ثبت‌نام بشه و اگر داره وارد صفحه‌ی Log-in بشه.

یا به فراخور بیزینس شاید بتونیم مثل تصویر زیر این دو صفحه رو برای سادگی بیشتر یکی کنیم و با گرفتن شماره موبایل و ارسال کد تایید کاربر رو لاگین کنیم.

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

هر کدوم از این تفکرات و سوالات رو باید برای موارد مختلف در نظر بگیریم. مثلا در مرحله‌ی "کاربر خدمت مورد نظر خود را انتخاب می‌کند" اینکه کاربر با جستجو، فیلتر کردن، navigation یا حتی نمایش خدمات محبوب در صفحه‌ی اصلی به خدمت مورد نظر می‌رسه یا نه باعث شاخه‌دارتر شدن این User Flow می‌شود.


اکیدا پیشنهاد می‌کنم این مقاله را هم بخونید.
https://virgool.io/@r.kakavand70/%D8%A7%D8%B1%D8%AA%D8%A8%D8%A7%D8%B7-%D8%A8%DB%8C%D9%86-navigation-%D9%88-in-site-search-xz1wf8bihxxh


یا همینطور که در مقاله‌ی کوتاه در مورد Mental Design گفتم ممکنه گاهی محدودیدت‌های بیزینسی ما رو مجبور کنه در اولین گام آدرس رو بگیریم و بعد خدمات مرتبط رو نمایش بدیم که این باعث جابه‌جایی مراحل می‌شه.

مثلا User Flow تصویر بالا تنها با دو مستطیل ثبت‌نام و خرید اشتراک شروع شد و شرایط مختلف رو که به مرور براش در نظر گرفتیم به این گستردگی که می‌بینین رسیده.


۲. به تفاوت User Flow اولین بار استفاده توجه کنید

بدیهیه که اولین باری که کاربر وارد سایت/اپلیکیشن می‌شه با استفاده‌های بعدی تفاوت‌هایی داره. مثلا در اولین بار استفاده از اپلیکیشن کاربر لاگین می‌کنه و در نتیجه در استفاده‌های بعدی نیازی به لاگین کردن نیست در نتیجه User Flow اولین استفاده احتمالا متفاوت با User Flow استفاده‌های بعدیه.

موارد زیر چیزهاییه که باید برای اولین استفاده‌ی کاربر مدنظر قرار بدین.

  • نمایش User On-boarding
  • ثبت‌نام/ورود کاربر
  • نمایش Guided tour
  • درخواست دسترسی‌های حساس نظیر دسترسی به دوربین (در صورت تاثیر در کارکرد اصلی)
  • ثبت آدرس یا اطلاعات کاربری نظیر عکس پروفایل، نام، شماره شبا و ... (در صورت تاثیر در کارکرد اصلی)
  • نسخه‌ی Demo یا Free Try
شما هم اگر به موردی برخوردید که بهتر است در این لیست اضافه بشه لطفا در کامنت‌ها اعلام کنین.


۳. استفاده از اشکال استاندارد در طراحی User Flow

چون این User Flow برای پیاده‌سازی معماری سایت/اپلیکیشن تحویل تیم فنی می‌شه بهتره که از اشکال استاندار Flow Chart برای طراحی User Flow استفاده کنین.

این موارد بالا اشکال استاندارد طراحی User Flow هستند. اگر برای نمایش نظر یا توضیحات بیشتر نیاز به چیزی داشتین دستتون بازه که از چیزهای دیگه هم انتخاب کنید فقط مهمه که Consistency رو رعایت کنین. این توضیحات تکمیلی به خودتون هم برای طراحی Wire Flow کمک می‌کنه که چیزی رو از قلم نندازین.


۴. صفحات را نام‌گذاری کنید

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




بخش سه: معرفی ابزار

فارغ از قلم و کاغذ، ابزارهای آنلاین خوبی رو می‌تونید با کلیدواژه‌ی User Flow Maker در گوگل جستجو و استفاده کنید.

من خودم معمولا برای شروع از قلم و کاغذ استفاده می‌کنم و به مرور که یه مقدار شاکلش در اومد می‌برمش توی Flowmapp.

من چند تایی رو امتحان کردم مثل Timblee ،Wireflow ،Whimsical و حتی Miro که عشقمه اما برای طراحی User Flow و حتی Site Map پیشنهادم به شما Flowmapp که آخرین تصویر این مقاله رو به کمک اون زدم.

در انتها نظرتون با یک وبینار پروژه محور طراحی User Flow چیه؟
اگر موافقین توی کامنت اعلام کنین و یک راه دسترسی معرفی کنین که زمانشو بهتون اطلاع‌رسانی کنم.


الوعدا وفا

لینک وبینار طراحی User Flow که قولشو داده بودم.



از این دست کوتاه مقاله‌ها: