هفت اصل فعال‌کننده‌های دستی در ریز‌تعامل‌ها / Microinteractions Manual Triggers

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

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

Triggers که از این به بعد ‘فعال‌کننده’ نام میبرمش-جایگزین بهتری اگر دارید خوشحال می‌شم پیشنهاد بدین-، و از اسمش هم پیداست اولین بخش از یک ریز‌تعامل است. فعال‌کننده‌ها از یک دیدگاه مهمترین بخش ریزتعامل‌ها نیز هستند زیرا شروع کننده و دلیل اتفاق افتادن آن‌ها هستند.

فعال‌کننده‌ها میتوانند به دو صورت دستی(Manual Triggers) مانند دکمه‌ای که کاربر روی آن کلیک می‌کند یا به صورت سیستمی و اتوماتیک(System Triggers) باشند مانند یک پیغام خطا که ناگهان و بر اساس یک‌سری شرایط خاص روی صفحه نمایش داده می‌شود.

هفت اصل فعال‌کننده‌های دستی

۱. قابل تشخیص باشند

طراحی صفحه اول کارت مترو در نیویورک
طراحی صفحه اول دستگاه کارت مترو در نیویورک

فعال‌کننده‌ها باید طوری طراحی شوند که کاربر در محیط مورد نظر به راحتی بتواند تشخیص بدهد این یک فعال‌کننده است!

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

کاربر هرجای صفحه را که لمس کند وارد مرحله بعدی می‌شود اما با یک اشاره و انیمیش دستی که حرکت میکند و آن نوشته Touch Start به کاربری که هیچوقت با چنین دستگاهی(حتی صفحه نمایش لمسی در آن زمان) کار نکرده داره یاد میده که روی دکمه بزند. و نتیجه مثبت هم گرفتند و کاربران خیلی بیشتری از این دستگاه استفاده کردند.

۲. مدل ذهنی بسازد

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

۳. اطلاعات را رو قرار بدین

Screen Shot ۱۳۹۴-۰۳-۲۰ at ۱۱.۵۰.۳۱

این از اصول کلی ریزتعامل‌ها هم هست که در مطلب قبل تحت عنوان Bring data forward گفتم و یک مثال از کروم هم مطرح کردم.

این کاربه کاربر کمک میکنه که زودتر و راحت‌تر به اطلاعات دسترسی پیدا کنه و حتی مانند عکس بالا باعث میشه کاربر دچار اشتباه نشه و مطمئن‌تر روی فعال‌کننده کلیک کنه. در نقشه گوگل دو حالت Earth  و Map وجود دارد(تصویر بالا در حالت Earth است) و در اینجا فعال‌کننده‌ی ریزتعامل تغییر این دو حالت بسیار خوب درست شده و ما بدون اینکه معانی این کلمات را هم بدونیم داریم پیش‌نمایشی از حالت بعدی و اتفاقی که با کلیک کردن ما می‌افتاد را میبینیم. خیلی جاها میتونیم کار کاربر را راحت کنیم و اطلاعات کاربردی بیشتری در اختیارش قرار بدیم.

۴. ظاهر فعال‌کننده را خراب نکنید

triggers-visual-affordance

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

۵. اولویت و اهمین ریز‌تعامل‌ها را در نظر بگیرید

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

۶. مدل ذهنی کاربر را خراب نکنید

microinteractions-triggers-switch

 

وقتی که کاربر یک المان آشنا مانند یک دکمه می‌بیند انتظار دارد که بتونه روی آن کلیک کنه و تصور دیگه‌ای نمیتونه ازش داشته باشه. بهتره تا جای ممکن از کنترل‌های استاندارد استفاده کنیم چیزی که کار باهاش را بتونند حدس بزنند.(یک روز یک اپلیکیشن دیدم که عنوان بخش‌هاش را شکل دکمه درست کرده بود! این اصل برای همین جور ماجرا هاست…)

این تصویر هم از یک اپلیکیشن ایرانی هست که برای اضافه کردن یک لغت به برنامه بجای چک باکس یا یک دکمه Add از سویچ استفاده کرده، کنترلی که کاربر در تنظیمات برنامه برای فعال/غیرفعال کردن یک امکان دربرنامه دیده. استفاده نادرست از کنترل‌ها و المان‌ها میتونه زمان کاربر را بگیره و باعث اشتباه آن‌ها بشود.

۷. استفاده از Labels برای فعال‌کننده‌ها دلیل دارد

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

 

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

 

منتشرشده توسط

پرهام خوشبخت

طراح تعاملی رابط کاربری

1 دیدگاه برای «هفت اصل فعال‌کننده‌های دستی در ریز‌تعامل‌ها / Microinteractions Manual Triggers»

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *