جریان های کاربر: چه هستند و چرا در طراحی UX اهمیت دارند1 min read

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

آن مسیر a نامیده می شود جریان کاربر.

جریان کاربر یک نقشه بصری از مراحلی است که شخص در یک برنامه، وب سایت یا کار خاص انجام می دهد. می‌تواند یک تجربه کامل محصول، مانند ورود به برنامه SaaS، یا جریان کوچک‌تری مانند ثبت‌نام، رزرو نسخه نمایشی، اشتراک در خبرنامه یا تکمیل تسویه حساب را نشان دهد.

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

در این راهنما، ما توضیح خواهیم داد که جریان های کاربر چیست، چگونه آنها را بخوانیم، چه زمانی ایجاد کنیم، و چگونه از طراحی بهتر UX پشتیبانی می کنند.

سعی کنید جریان های کاربر را با هوش مصنوعی طراحی کنید

جریان کاربری را که می خواهید طراحی کنید شرح دهید، سپس اجازه دهید Anima آن را به UX، صفحه نمایش و کد تبدیل کند.

جریان کاربر چیست؟

الف جریان کاربر نموداری است که مسیری را که کاربر برای تکمیل یک هدف در داخل یک محصول طی می کند نشان می دهد. در طراحی UX، آن محصول معمولاً یک برنامه، وب سایت، برنامه وب یا سرویس دیجیتال است.

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

یک جریان کاربر می تواند نشان دهنده موارد زیر باشد:

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

هدف ساده است: قبل از اینکه رابط کاربری را با جزئیات طراحی کنید، مسیر کاربر را روشن کنید.

نمونه ای از ساختار جریان کاربر پایه

جریان کاربر در مقابل جریان رابط کاربر

شرایط جریان کاربر و جریان رابط کاربری از نزدیک مرتبط هستند.

یک جریان کاربر بر مسیر کاربر به سمت یک هدف تمرکز می کند. به سوالاتی مانند:

• کاربر از کجا شروع می کند؟
• آنها در تلاش برای تکمیل چه اقدامی هستند؟
• در این مسیر چه تصمیماتی می گیرند؟
• اگر موفق شوند، شکست بخورند یا مسیر دیگری را انتخاب کنند چه اتفاقی می افتد؟

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

• کدام صفحه بعد از این صفحه می آید؟
• وقتی کاربر روی این دکمه کلیک می کند چه اتفاقی می افتد؟
• این حالت خطا به کجا منتهی می شود؟
• کاربر پس از ارسال فرم چه چیزی را می بیند؟

در عمل، تیم های UX اغلب از هر دو با هم استفاده می کنند. جریان کاربر مسیر را مشخص می کند. جریان رابط کاربری آن مسیر را در داخل محصول UI مشخص می کند.

نحوه خواندن جریان کاربر

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

اکثر نمودارهای جریان کاربر از یک زبان بصری ساده استفاده می کنند:

• دایره ای یا بیضی: نقطه شروع یا پایان
• مستطیل: صفحه، صفحه یا اقدام
• الماس: نقطه تصمیم، مانند بله/نه، موفقیت/شکست، یا انتخاب مسیر
• پیکان: جهت حرکت بین مراحل

اجزای جریان کاربر توضیح داده شده است

به عنوان مثال، یک جریان کاربر ثبت نام ساده ممکن است به شکل زیر باشد:

1. کاربر در صفحه اصلی قرار می گیرد
2. کاربر روی “شروع رایگان” کلیک می کند
3. کاربر ایمیل و رمز عبور را وارد می کند
4. سیستم بررسی می کند که آیا ایمیل معتبر است یا خیر
5. کاربر حساب کاربری را تایید می کند
6. کاربر به صفحه ورود می رسد
7. کاربر راه اندازی را کامل می کند
8. کاربر در داشبورد فرود می آید

این نوع مثال جریان کاربر به تیم کمک می کند تا قبل از طراحی هر صفحه، تجربه را درک کند.

نمونه های جریان کاربر

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

ثبت نام جریان کاربر

یک جریان کاربر ثبت نام نشان می دهد که چگونه یک بازدیدکننده جدید به یک کاربر ثبت نام شده تبدیل می شود.

1. از صفحه فرود دیدن کنید
2. روی signup CTA کلیک کنید
3. روش ثبت نام را انتخاب کنید
4. جزئیات حساب را وارد کنید
5. تایید ایمیل
6. ورود کامل
7. دسترسی به داشبورد محصول

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

بررسی جریان کاربر

جریان کاربر تسویه حساب نحوه حرکت کاربر از علاقه محصول به خرید را ترسیم می کند.

1. مشاهده محصول یا صفحه قیمت
2. مورد اضافه کنید یا طرح را انتخاب کنید
3. جزئیات سبد خرید یا طرح را بررسی کنید
4. اطلاعات پرداخت را وارد کنید
5. خرید را تایید کنید
6. رسیدن به صفحه موفقیت یا رسید

این جریان به ویژه برای تجارت الکترونیک، SaaS و محصولات اشتراک مهم است زیرا هر مرحله اضافی می تواند بر تبدیل تأثیر بگذارد.

ورود و رمز عبور بازنشانی جریان کاربر

یک جریان ورود به سیستم نحوه دسترسی کاربران بازگشتی به حساب خود، از جمله موارد لبه را نشان می دهد.

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

نمونه ای از جریان کاربر برای یک فرآیند ورود به سیستم (جریان وظیفه)

ورود به جریان کاربر

یک جریان کاربر در حال ورود، نحوه رسیدن کاربران جدید به اولین لحظه موفق محصول خود را ترسیم می کند.

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

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

زمان ایجاد یک جریان کاربر

در مراحل اولیه طراحی، به طور ایده آل پس از تحقیقات اولیه کاربر و قبل از طراحی UI با وفاداری بالا، جریان های کاربری ایجاد کنید.

در این مرحله، یک جریان کاربر به شما کمک می کند:

• تصمیم بگیرید که کدام صفحه نمایش باید وجود داشته باشد
• مراحل غیر ضروری را حذف کنید
• نقاط تصمیم گیج کننده را شناسایی کنید
• تیم را در اطراف ساختار محصول هماهنگ کنید
• برنامه ریزی کنید نمونه های اولیه سریعتر
• از طراحی صفحه های صیقلی برای مسیر شکسته خودداری کنید

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

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

نقش جریان های کاربر در طراحی UX

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

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

1. یک رابط بصری تر ایجاد کنید

یک جریان کاربر واضح، درک رابط نهایی را آسان‌تر می‌کند.

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

اگر جریان گیج کننده باشد، احتمالاً رابط نیز گیج کننده خواهد بود.

2. یک رابط موجود را ارزیابی کنید

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

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

3. استراتژی خود را به اعضای تیم و ذینفعان انتقال دهید

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

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

جریان‌های کاربر همچنین می‌توانند به توسعه‌دهندگان در درک کلیت کمک کنند ساختار پشت نمونه نهایی شما، که باعث می شود تحویل دادن کارآمدتر

سفر کاربر در مقابل جریان کاربر

سفرهای کاربر و جریان کاربر اغلب اشتباه گرفته می شوند، اما آنها یکسان نیستند.

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

الف جریان کاربر روی مسیری که کاربر در داخل محصول طی می کند تا یک هدف خاص را تکمیل کند، تمرکز می کند.

تفاوت های کلیدی

هر دو مفید هستند. سفر به شما کمک می کند تا زمینه کاربر را درک کنید. جریان به شما کمک می کند مسیر واقعی را از طریق رابط طراحی کنید.

نحوه ایجاد یک جریان کاربر

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

1. هدف کاربر را تعریف کنید

با اقدامی که کاربر می خواهد انجام دهد شروع کنید.

• یک حساب کاربری ایجاد کنید
• یک محصول بخرید
• دمو را رزرو کنید
• یک وب سایت منتشر کنید
• یک هم تیمی را دعوت کنید
• صادرات یک طرح به کد

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

2. نقطه ورود را انتخاب کنید

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

نقاط ورودی مختلف می توانند جریان های مختلفی ایجاد کنند. یک کاربر بازگشته و یک بازدید کننده برای اولین بار ممکن است به مسیر یکسانی نیاز نداشته باشند.

3. مسیر شاد را ترسیم کنید

مسیر شاد ساده ترین مسیر موفق از آغاز تا پایان است.

1. کاربر صفحه قیمت گذاری را باز می کند
2. کاربر طرح را انتخاب می کند
3. کاربر حساب کاربری ایجاد می کند
4. کاربر جزئیات پرداخت را وارد می کند
5. کاربر خرید را تایید می کند
6. کاربر در صفحه موفقیت فرود می آید

این به شما تجربه پایه را می دهد.

4. تصمیمات و موارد لبه را اضافه کنید

کاربران واقعی همیشه مسیر عالی را دنبال نمی کنند. نکات تصمیم گیری مانند:

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

این شاخه ها همان چیزی هستند که یک مسیر ساده را به یک جریان کاربری واقعی طراحی UX تبدیل می کنند.

5. جریان را ساده کنید

هنگامی که جریان نقشه برداری شد، به دنبال اصطکاک باشید.

• آیا می توانیم یک مرحله برداریم؟
• آیا می توانیم صفحه نمایش ها را با هم ترکیب کنیم؟
• آیا ما خیلی زود اطلاعات می خواهیم؟
• آیا اقدام بعدی مشخص است؟
• آیا بن بست وجود دارد؟
• آیا حالت های خطا مشخص است؟
• آیا کاربر همیشه می داند چه اتفاقی افتاده است؟

بهترین جریان های کاربری واضح است زیرا پیچیدگی قبلاً در پشت صحنه حل شده است.

کاربر به طور خلاصه جریان می یابد

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

یک جریان کاربر قوی:

• با یک هدف کاربر واضح شروع می شود
• نقطه ورود کاربر را نشان می دهد
• مراحل، صفحه‌ها و تصمیم‌های موجود در مسیر را نقشه‌برداری می‌کند
• شامل موارد لبه مهم است
• به تیم ها کمک می کند تا قبل از طراحی دقیق UI، اصطکاک را شناسایی کنند
• انتقال را برای طراحان، توسعه دهندگان، PM ها و سهامداران آسان تر می کند

برای تیم های UX، جریان های کاربر یکی از کاربردی ترین ابزارها برای تبدیل تحقیقات کاربر به ساختار رابط هستند. آنها به شما کمک می کنند به جای حدس زدن صفحه به صفحه، با قصد طراحی کنید.

پرسش‌های متداول: جریان‌های کاربر

جریان های کاربر چیست؟

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

جریان کاربر در طراحی UX چیست؟

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

تفاوت بین جریان کاربر و سفر کاربر چیست؟

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

جریان رابط کاربری چیست؟

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

چه زمانی باید یک جریان کاربری ایجاد کنید؟

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

نمونه هایی از جریان کاربر چیست؟

نمونه‌های رایج جریان کاربر شامل جریان‌های ثبت‌نام، جریان‌های پرداخت، جریان‌های ورود به سیستم، جریان‌های ورود به سیستم، جریان‌های بازنشانی گذرواژه، جریان‌های رزرو، جریان‌های ارتقا، و جریان‌های دعوت از هم تیمی هستند.

چرا جریان کاربر مهم است؟

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

چگونه یک کاربر را جریان می دهید؟

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

Anima Playground را برای جریان کاربر و طراحی UX امتحان کنید

Anima Playground به شما امکان می دهد از ایده محصول به جریان، طراحی و کد کار در مرورگر UX بروید. تجربه ای را که می خواهید بسازید توصیف کنید، آن را با هوش مصنوعی اصلاح کنید و نتیجه را به یک محصول تعاملی واقعی تبدیل کنید.

طراحی را با Anima Playground شروع کنید.