راهنماهای تعاملی (Coach Marks)

فرض کنید یه اپلیکیشن جدید رو باز کردید. صفحه پر از دکمه‌ها و آیکون‌های مختلفه و واقعا نمی‌دونید باید از کجا شروع کنید. شاید خودتون رو در حال لمس کردن گزینه‌های مختلف ببینید، به این امید که بالاخره یه چیزی کار کنه. تو همچین موقعیتی، یه راهنماهای تعاملی (Coach Marks) ظاهر می‌شه؛ با یه جمله‌ کوتاه و یه فلش کوچیک، دقیقا همون چیزی رو نشون می‌ده که باید بدونید. همین راهنمای ظاهرا ساده می‌تونه تجربه کاربری رو کاملاً متحول کنه. وقتی طراحی تجربه کاربری با فکر و هوشمندانه انجام شده باشه، این راهنماهای تعاملی به کاربر کمک می‌کنن خیلی سریع‌تر ویژگی‌های جدید رو پیدا کنه و احساس سردرگمی نداشته باشه.

راهنماهای تعاملی چیست؟

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

چه زمانی باید از راهنماهای تعاملی استفاده کنیم؟

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

• معرفی ویژگی‌های جدید

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

• جریان‌های پیچیده یا حرکات خاص

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

• کاربران تازه‌وارد

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

• راهنمایی در لحظه نیاز

بعضی وقت‌ها کاربر وسط انجام یه کار گیر می‌کنه و دقیقا همون لحظه به یه راهنمایی نیاز داره. راهنمای تعاملی می‌تونه همون‌جا ظاهر بشه و کمک لازم رو ارائه بده.

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

کاربردها و اهمیت راهنماهای تعاملی

• کاهش منحنی یادگیری

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

• افزایش پذیرش قابلیت‌ها

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

• بهبود تجربه‌ کاربر

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

• کاهش نیاز به مستندات طولانی

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

• پشتیبانی از کشف تدریجی

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

روش‌های استفاده از راهنماهای تعاملی

• تمرکز روی یک تعامل

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

• امکان رد کردن یا بسته‌شدن راهنما

همیشه گزینه‌ای برای «بستن» یا «رد کردن راهنما» در نظر بگیر. می‌تونی راهنمای تعاملی رو از دو بخش بسازی: یک بخش توضیح و یک دکمه‌ بستن که کاربر بتونه اونو کنار بزنه. بعضی طراحی‌ها پیشنهاد می‌دن دکمه‌ «Skip» یه دکمه‌ ثانویه‌ ساده باشه و در مرحله‌ آخر راهنما حذف بشه.

• استفاده از تصاویر و نشانه‌ها

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

• ساده‌نویسی متن

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

• اجتناب از زنجیره‌ طولانی

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

• تمایز با طراحی اصلی

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

• تنظیم محل نمایش راهنما

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

• هماهنگی و رعایت استانداردها

همه‌ی راهنماهای یک تور باید ظاهر و اندازه‌ی یکسانی داشته باشن. در طراحی دکمه‌ها هم هماهنگی رو رعایت کن؛ مثلاً از «Next» برای مراحل میانی و «Finish» برای پایان استفاده کن تا تجربه‌ی یکنواختی بسازی. اگه در هر مرحله از راهنما یه اسم متفاوت برای دکمه‌ اصلی بذاری، مثل «شروع»، «بزن بریم»، «باشه»، یا «تمام شد»، کاربر گیج می‌شه و حس انسجام از بین می‌ره.

• عدم اجبار کاربر به انجام کار در راهنما

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

• تطبیق با زبان و جهت متن

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

• آزمایش و تصمیم‌گیری داده‌محور

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

چالش‌ها و اشتباهات رایج در استفاده از راهنماهای تعاملی

• نشون دادن اطلاعات خارج از زمان و زمینه

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

• نادیده گرفتن راهنماها توسط کاربر

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

• نمایان کردن ضعف‌های طراحی

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

• نداشتن گزینه‌ بستن یا رد کردن

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

• پوشاندن عناصر مهم طراحی

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

• طولانی بودن متن یا زنجیره‌های پشت سر هم

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

• ناهماهنگی ظاهری

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

نتیجه‌گیری

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

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

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

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

منابع

• Flowmapp
• NNgroup
• LiveFront
• UX-Stackexchange
• Spectrum.adobe