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

دکمه اصلی سمت راست باشه یا چپ؟

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

درخواست ثبت‌نام اپلیکیشن پف‌فیلم
درخواست ثبت‌نام اپلیکیشن پف‌فیلم


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


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


البته دو نکته مهم این وسط هست.

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

خودپرداز بانک سامان
خودپرداز بانک سامان


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

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


البته همینطور که در مقاله‌ی راست و چپ در تصاویر و نحوه‌ی برخورد آدم‌ها در موردش صحبت شده؛ فرهنگ می‌تونه روی این Mental Model تاثیر بزاره. مثلا تجربه شخصی من نشون می‌ده اونهایی که زبان موبایلشون فارسیه احتمال بیشتری وجود داره که دکمه‌ی مثبت رو سمت چپ اپلیکیشن دنبال بگردن.


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


دسترسی به نوتیفیکیشن در کروم
دسترسی به نوتیفیکیشن در کروم

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


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

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


مثلا این تصویر رو که از وبسایت نجوا گرفتم ببینین. برای اینکه کاربر اشتباهی روی Block نزنه اومده و با نوشته و فلش کاربر رو راهنمایی کرده که برای دریافت مطالب باید Allow رو بزنه.

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


تنظیمات نام در فیسبوک
تنظیمات نام در فیسبوک

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


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

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


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




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

https://uxplanet.org/primary-secondary-action-buttons-c16df9b36150


mental modelطراجی تجربه کاربریطراحی رابط کاربریراست به چپbutton
راوی تجربه کاربری در #ویرگول و مدرس در #یوتیوب https://www.youtube.com/c/AmirTaqiabadi
شاید از این پست‌ها خوشتان بیاید