شایان مهردوست
شایان مهردوست
خواندن ۴ دقیقه·۴ سال پیش

تعیین جهت در طراحی رابط کاربر

در این یادداشت ایمان نتیجه گرفته نوشتار و اجزای رابط کاربر باید هم‌جهت باشن. یعنی چون فارسی رو از راست به چپ می‌نویسیم، باید راست‌به‌چپ هم اسکرول کنیم. گرچه این نتیجه‌گیری درسته، اما محصولِ مفهومِ جامع‌ترِ ارتباط (communication) در طراحیه.

رسالتِ دیزاین ارتباط درسته. ارتباط یعنی «رسوندنِ مقصودِ یک‌طرف به طرفِ دیگه به‌واسطه‌ی نشانه‌ها و قوانینی که هر دو طرف درک مشترکی از اون‌ها دارن.» طراح این مقصود رو به‌واسطه‌ی رابط کاربر (UI) به کاربر منتقل می‌کنه.

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

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

این اصل در دیزاینِ اجزا و اینترکشن‌ها هم صادقه: یا جهتِ Scroll و Swipe رو به کاربر می‌گیم، یا به‌صورت ضمنی بهش اشاره می‌کنیم. راه‌های اشاره‌ی ضمنی متعدده و signifierها یکی اون‌هاست. برای مثال، کامپوننت ImageCarousel دیوار رو در حالتی که viewport مانعِ نمایش کاملِ عکسِ سوم شده ببینید.

بدونِ این‌که بگیم جهتِ اسکرول به سمتِ چپه، می‌تونیم انتظار داشته باشیم کاربر به سمتِ چپ اسکرول کنه تا عکسِ کامل رو ببینه، چون طبقِ اصلِ تداوم (continuity) بقیه‌ی عکس‌ها در سمت چپِ تصویره. [۱]

اما اگه اندازه‌ی عکس‌ها ثابت و عرض صفحه طوری بود که عکس سوم کامل دیده می‌شد، کاربر چطور اسکرول می‌کرد؟ به بیانِ دیگه، اگه به‌صورت صریح یا ضمنی به جهتِ اسکرول اشاره نمی‌کردیم، کاربر چطور می‌فهمید در چه جهتی اسکرول کنه؟

تصویری که کاربر از سیستم دریافت می‌کنه (system image) موقع حدس‌زدن بهش کمک می‌کنه. پس ما باید تصویری ازین‌که سیستم چطوری کار می‌کنه بسازیم. اصلِ یکپارچی (consistency) در دیزاین، در ساختِ این تصویر بهمون کمک می‌کنه. ما با تکرارِ یک رفتارِ مشخص در شرایط متفاوت در رابط کاربر، به انتظارِ کاربر شکل می‌دیم: «تا حالا جهت اسکرول و سوایپ در همه‌جا از راست به چپ بوده. پس این‌‌جا هم باید به سمتِ چپ اسکرول بشه.» واضحه که هر کاربر پیش از هر اینترکشن این جمله رو توی ذهنش مرور نمی‌کنه و این اتفاق در کسری از ثانیه رخ می‌ده. بعلاوه، سیستم فقط محدود به یک ابزار و محصول نیست؛ کاربران پیش از یاد گرفتنِ کار با محصولِ ما، یاد گرفتن چطوری با سیستم‌عامل و شاید محصولاتِ دیگه‌ کار کنن. آموخته‌های اون‌ها از چگونگیِ کارکردِ سیستم، روی انتظاری که از دیزاینِ ما دارن اثر می‌ذاره.

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

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

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




[۱] حتا اگه بالای عکس متنی چپ‌به‌راست نوشته بودیم، فرض منطقی اینه که کاربر عکس‌ها رو به‌سمتِ چپ — خلاف جهت نوشته — اسکرول کنه؛ احتمالن چون پیامی که به‌شکل بصری و مستقیم، به‌واسطه‌ی نشانه‌ها در ImageCarousel منتقل می‌شه، مفهوم رو ساده‌تر منتقل می‌کنه نسبت به این‌که کاربر از روی جهتِ متنِ بالای عکس، جهتِ اسکرول عکس‌ها رو حدس بزنه.

رابط کاربرتجربه کاربردیزاین
دایرکتور سابق تجربهٔ کاربر در دیوار
شاید از این پست‌ها خوشتان بیاید