سلام دوستای عزیز سکان آکادمی، طبق قرارمون، بریم سراغ دومین قانون تجربه کاربری از کتاب
"Laws of UX" آقای Jon Yablonski با عنوان قانون Fitts یا Fitts’s Law.
روانشناس آمریکایی Paul Fitts این قانون رو در سال 1954 ارائه کرد! قانون Fitts مدلی از حرکت انسان رو ارائه می ده، این طوری که می تونه مدت زمان لازم برای حرکت و انتخاب یه هدف رو دقیقاً پیش بینی کنه. کافیه این قانون رو سرچ کنید تا فرمولای توسعه داده شدش رو ببینید.
به زبان ساده قانون Fitts چی رو به ما می گه؟
"زمان دستیابی به هدف تابعی از فاصله و اندازه هدف است."
توی این فرمول D فاصله تا مرکز هدف که مثل یه سیگناله، W عرض هدف و شبیه نویزه! و درنهایت ID معیار شاخص دشواری Fitts هست.
بیاید چند مثال توی دنیای فیزیکیمون بررسی کنیم:
دفعه بعدی که سوار اتومبیلتون شدید، پدال های گاز و ترمز رو از نزدیک ببینید. ممکنه متوجه چیزی بشید که قبلاً هرگز بهش توجه نکردید: پدال ترمز نسبت به پدال گاز بزرگتر و نزدیکتر به صندلی راننده ست.
منطقی به نظر میاد، درسته؟ پدال ترمز بزرگ تر و نزدیک تر به صندلی راننده، باعث توقف سریعتر و آسون تر و درنتیجه رانندگی ایمن تر توی جاده می شه. اگر اندازه و نزدیک بودن پدال ها برعکس بود، ما دائماً شاهد صحنه تصادفات رانندگی بودیم! طراحی پدال های اتومبیل هم بر اساس مدل پیش بینی کننده حرکت انسان و قانون Fitts هست.
کلید فاصله (Space) بزرگ ترین کلید صفحه کلید شماست چون مهم ترین و پرکاربردترین کلیده. دکمه ای که ماشین های سنگین رو خاموش می کنه بزرگ تر از دکمه ایه که اونو روشن می کنه چون مهندسین طراح نمی خوان مردم تصادفاً ماشین های سنگین رو روشن کنن اما براشون مهمه خاموش کردن اون رو برای مردم آسون کنن. بزرگ ترین دکمه مایکروویو دکمه درش هست چون باز شدن در مایکروویو مهم ترین اقدامه!
درسته که Paul Fitts این قانون رو با توجه به حرکت در جهان فیزیکی ارائه کرد در حالی که حتی اون زمان رابط کاربری گرافیکی در کار نبود، اما این قانون در Navigation دنیای مجازی هم قدرتمنده و به عنوان یکی از قوانین کاربردی در تعامل انسان و کامپیوتر به حساب میاد. قانون Fitts معمولاً برای حرکت از طریق رابط کاربری گرافیکی با استفاده از نشانگر یا نوع دیگری از اشاره گر استفاده می شه!
این قانون در دنیای فیزیکی خیلی ساده به نظر می رسه و در تعامل انسان و کامپیوتر هم به همین سادگیه!
این قانون در رابط کاربری می گه مدت زمانی که یه شخص برای انتخاب یه شیء (مثلاً CTA) صرف می کنه بستگی به فاصله شخص (مکان نما) با شیء و اندازه اون شیء داره. شیء های کوچیکی که از موقعیت آغازین شما فاصله دارن یا شیء های مربوط به اون ها که از هم دیگه دور هستن، بیش ترین زمان رو برای انتخاب نیاز دارن! در مقابل شیء های بزرگی که نزدیک به موقعیت شروع شما هستن یا اشیای مرتبط به هم که نزدیک هم هستن، برای انتخاب، کم ترین زمان رو به خودشون اختصاص می دن.
سه نکته اساسی که می تونیم از قانون Fitts به دست بیاریم اینه که:
اول، شیء های تعاملی باید به اندازه کافی بزرگ باشن تا کاربرا بتونن اون ها رو به راحتی تشخیص بدن و دقیق انتخاب کنن.
همون طور که ممکنه واضح به نظر برسه، اندازه گیری هدف لمسی (Touch target) از اهمیت حیاتی برخورداره: وقتی اهداف لمسی خیلی کوچیک باشن، درگیر کردن اون ها با کاربرا بیش تر طول می کشه.
اندازه توصیه شده متفاوته (جدول 1)، اما همه توصیه ها حاکی از اهمیت اندازه گذاریه!
جدول (1): حداقل سایزهای پیشنهادی برای اهداف لمسی (Touch Targets)
مهمه که به خاطر داشته باشین، این توصیه ها، حداقل ها هستن. طراحا باید هدف خودشون رو بیش تر از حداقل اندازه ها قرار بدن و تا جایی که ممکنه نیاز به دقت رو کاهش بدن. اندازه متناسب اهداف لمسی نه تنها تضمین می کنه که عناصر تعاملی به راحتی قابل کلیک و انتخاب هستن حتی می تونه درک کاربرا رو در استفاده آسون از رابط، تقویت کنه.
این قانون رو می تونیم با عنوان ایجاد اهداف بزرگ تر هم بررسی کنیم، بیاید یه مثال بزنیم!
بعضی از وب سایت ها فضای قابل کلیک یه دکمه رو افزایش نمی دن به بیان بهتر کل فضای دکمه قابل کلیک نیست. در نتیجه، برای انتقال مکان نما به فضای قابل کلیک، دقت بیش تری لازمه که باعث کندتر شدن زمان پیمایش می شه. قانون Fitts پیشنهاد می کنه که از هر پیکسل موجود برای بزرگ کردن منطقه قابل کلیک، استفاده کنیم و هدف بزرگ تری برای کلیک بسازیم. (شکل 2)
افزایش اندازه مطلق یا نسبی یه دکمه برای سهولت کلیک هم یکی از روش های محبوب بین طراحا برای برقراری ارتباط اولویت هاست و هم روشیه که کاربرا رو برای انجام کار خاصی ترغیب می کنه و بهشون فراخوان می ده.
هرچند زمان طراحی دکمه CTA ملاحظات بیش تری باید در نظر گرفته بشه، ولی قانون Fitts یکی از برجسته ترین مبانی نظری اون رو ارائه می ده.
شکل (2): مثال چپ: Firefox، مثال راست: Apple))
دوم، باید فضای کافی بین شیء های تعاملی وجود داشته باشه
نکته دیگه ای که بر قابلیت استفاده از عناصر تعاملی تأثیر می ذاره، فاصله بین اون هاست. وقتی فضای بین عناصر خیلی کم باشه، احتمال خطا در انتخاب بالا می ره.
آزمایشگاه MIT Touch Lab) MIT) مطالعه ای انجام داده که نشون می ده متوسط اثر انگشت انسان بالغ 10 تا 14 میلی متر و متوسط نوک انگشت 8-10 میلی متره. این موضوع اجتناب ناپذیره که کاربر حداقل بعضی از اوقات اهداف و شیء های اشتباهی رو لمس کنه. بنابراین اگه شیء های تعاملی و اهداف لمسی خیلی به هم نزدیک باشن و تصادفا انتخاب بشن باعث ناامیدی و کاهش درک کاربر از قابلیت استفاده از رابط کاربری می شه!
برای رفع این مشکل Google Material Design دستورالعمل هایی رو توصیه می کنه:
"اهداف لمسی (Touch targets) باید با تراکم 8 پیکسل (پیکسل مستقل از تراکم یا همون dp یا dpi خودمون) فضا یا بیش تر جدا بشن تا از تراکم اطلاعات و قابلیت استفاده متعادل اطمینان حاصل بشه."
پس فاصله بین عناصر تعاملی یه نکته مهمه!
یه مثال رو بررسی کنیم، صفحه تأیید درخواست connection رو در برنامه LinkedIn (مخصوصا نسخه IOS) در نظر بگیرین (شکل3)، اقدامات "قبول" و "رد" رو در سمت راست گفتگو قرار دادن. این اقدامات به هم نزدیک هستن طوری که کاربرا باید تلاش زیادی بکنن تا بدون انتخاب تصادفی يه مورد دیگه، روی انتخاب عملی که می خوان انجام بدن تمرکز کنن. در حقیقت، هر بار که این صفحه رو می بینم، می دونم به این معنیه که باید از دو دستم استفاده کنم تا از انتخاب اشتباه "قبول" با انگشت شستم جلوگیری کنم!
شکل (3): سایز اقدامات "قبول" و "رد" در اپلیکیشن لینکداین مناسب نیستند و باعث زحمت کاربر برای انتخاب گزینه مناسب می شن
گوشيهای هوشمند، لپ تاپ ها و کامپیوترها تنها رابط هایی نیستن که روزانه باهاشون سروکار داریم. براي مثال، سیستم های اطلاعات و سرگرمی خودورها رو که هر روز هم استفاده می کنیم در نظر بگیرید. تسلا مدل 3، یه نمایشگر 15 اینچی داره که مستقیماً روی داشبورد نصب شده. بیش تر کنترل های وسیله نقلیه توی این صفحه قرار داره و نیازه تا راننده برای دسترسی به این کنترل ها توجه خودش رو از جاده به صفحه معطوف کنه، بنابراین در اینجا قانون Fitts اهمیت حیاتی داره. مدل 3 تسلا از قانون Fitts پیروی می -کنه، فضای کافی رو بین موارد موجود در نوار Navigation پایین فراهم کرده (شکل 4) که این اقدام خطر انتخاب تصادفی اقدامات مجاور رو کاهش می ده.
شکل(4): وجود فاصله های مناسب بین شیء های نوار Navigation پایین صفحه نمایش تسلا مدل 3 به انتخاب سریع کاربر کمک می کنه و انتخاب تصادفی رو کاهش می ده
سوم، شیء های تعاملی باید در فضاهایی از یه رابط قرار بگیره که به کاربرا امکان دستیابی راحت رو بده.
حرکت مکان نما و یا انگشت رو به حداقل برسونید!
علاوه بر اندازه و فاصله، موقعیت اهداف لمسی و شیء های تعاملی در انتخاب آسون اون ها مهمه. قرار دادن شیء های تعاملی در مناطقی از صفحه که دستیابی بهش سخت تره، انتخاب رو سخت تر می کنه.
چیزی که باید بدونیم اینه که نواحی سخت صفحه برای دسترسی کجاهاست چون بسته به زمینه کاربر، دستگاه مورد استفاده و... تغییر می کنه.
برای مثال گوشي هاي هوشمند رو در نظر بگیرین که فاکتورهای مختلفی دارن و بسته به وظیفه و در دسترس بودن هر دو دست، افراد اون ها رو به روش های مختلفی استفاده می کنن. ممکنه زمان نگه داشتن دستگاه توی یه دست و استفاده از انگشت شست دسترسی به بعضی از قسمت های صفحه برای انتخاب شیء ها سخت باشه، در حالی که اگه تلفن رو توی یه دست نگه دارین و شیء ها رو با دست دیگه انتخاب کنین، سختی خیلی کم می شه. حتی در استفاده تنها از یه دست، دقت به صورت خطی از پایین راست به سمت چپ بالای صفحه افزایش پیدا نمی کنه. طبق تحقیقات Steven Hooberمردم ترجیح می دن مرکز صفحه نمایش گوشي هاي هوشمند رو مشاهده و لمس کنن (شکل 5) و این ناحیه ایه که بالاترین دقت رو داره. در مقابل کاربرا موقع استفاده از کامپیوترها معمولا صفحه رو از بالا سمت چپ به سمت پایین راست رصد می کنن که با نحوه استفاده از گوشي هاي هوشمند کاملا مغایره.
(تصویری براساس تحقیق Steven Hoober)
با ورود گوشي هاي هوشمند با صفحه بزرگ تر مثل Apple iPhone 6 و Apple iPhone 6 Plus ، شرکت اپل ویژگی ای رو ارائه کرد که هدفش کاهش دشواری استفاده با یک دست بود.
این ویژگی که دسترسی پذیری (Reachability) نامیده می شه، به کاربر این امکان رو می ده تا با یک حرکت ساده به سرعت آیتم -های بالای صفحه رو به نیمه پایین صفحه پایین بکشن. این ویژگی به راحتی امکان دسترسی آسون به قسمت هایی از صفحه رو فراهم می کنه که زمان کار با یک دست دشوارن! (شکل 6)
(منبع:Apple 2019)
یه نمونه دیگه از قانون Fitts در عمل، نوار لمسی در MacBook Pro اپل هست. این نوار در اصل یه صفحه لمسی بالای صفحه کلیده که به تجربه کاربران در زمان استفاده از Google، نشان کردن یه صفحه، تغییر روشنایی صفحه و موارد دیگه سرعت میده این گزینه ها بسته به اینکه در لپ تاپ خود در چه صفحه ای هستین تغییر می کنن (خدا قسمت کنه همه یه دونه آخرین مدلش رو بخریم:دی).
این نوار لمسی فقط یک حیله فانتزی نیست. اپل با قرار دادن بسیاری از تنظیمات داخل یک مکان جمع و جور، از این مورد برای ساده کردن تجربه کاربراش استفاده کرده. همونطور که قانون Fitts پیشنهاد می کنه، هرچی شیء و دکمه کاربر دورتر و کوچک تر باشه، کلیک روی اون دشوارتره، پس نوار لمسی یه روش هوشمندانه برای بهبود کاربردپذیری و درک شهودی کاربره.(شکل 7)
شکل(7): نوار لمسی در MacBook Pro اپل که آیتم هاش با توجه به صفحه ای که هستین تغییر می کنه!
یه مثال دیگه از جانمایی شیء ها اینه که خیلی از فرمان های اساسی مثل "خروج"، "شروع" و "خاموش" در گوشه های صفحه کامپیوتر شما قرار دارن. قرار دادن دکمه ها در گوشه ها انتخابشون رو برای کاربر آسون تر می کنه چون دکمه ها توسط دو طرف صفحه نمایش محدود می شن، مکان نما درهرطرف متوقف می شه و درنهایت دسترسی آسون تر می شه. این یعنی وقتی در طراحی شیئی تعاملی رو در گوشه و یا لبه های صفحه نمایش قرار می دیم کاربر دقت و زحمت کم تری رو برای رسیدن بهش باید به خودش بده! (شکل8) خب یکی از شیء هایی که خیلی توی سایت های مختلف می بینیم که گوشه قرار داره چیه؟ مثلا دکمه ورود و عضویت توی سایت ها که اغلب بالا سمت راست (در سایت های انگلیسی و در کل غیر فارسی) و بالا سمت چپ (در سایت های فارسی و عربی زبان) قرار داره (البته می شه توی این مورد به قانون جیکوب که توی این مقاله بهش پرداختیم هم اشاره کرد). اما در مقابل قرار دادن دکمه ها در گوشه ها و لبه برای گوشی های هوشمند مناسب نیست چون کاربر باید انگشتش رو دراز کنه و یا دستاش رو فقط برای رسیدن به اونها حرکت بده.
شکل(8): حرکت و نشانگر ماوس توسط لبه ها محدود می شه
یه راه دیگه برای بهبود دسترسی کاربرا به شیء های تعاملی اینه که طراح باید فواصل بین اشیایی که کاربر به ترتیب منطقی استفاده می کنه رو کاهش بده. برای مثال، دکمه ورود به سیستم همیشه کنار نام کاربری و قسمت های فرم رمز عبوره!
شما به عنوان طراح باید وقتی گزینه ها با هم مرتبط هستند، اون ها رو جوری سازماندهی کنید که به راحتی به خاطر سپرده و پیدا بشن. گروه بندی دکمه های مشابه، یه نقشه ذهنی آشنا توی وب سایت ایجاد می کنه که کاربرا می تونن خیلی خوب اون رو بخاطر بسپارن.
اما قرار دادن دکمه های قابل مقایسه کنار هم دیگه می تونه صفحه رو بهم ریخته نشون بده و باعث بشه کاربر اشتباهای زیادی رو مرتکب بشه، مخصوصاً اگه یه دکمه با ریسک بالا مثل دکمه حذف ایمیل، درست کنار یک دکمه که اغلب استفاده می شه، مثل ارسال ایمیل قرار بگیره.
برای کاهش این اقدامات تصادفی، باید یه روش دو مرحله ای برای تأیید عملکرد وجود داشته باشه (مثال شکل9)، یه گزینه برگشت با فضای کافی بین دکمه ها.
شکل(9): قرار دادن عناصر رابط می تونه باعث ایجاد اشتباه بشه یا ازش جلوگیری کنه!
نتیجه گیری:
کاربردپذیری یکی از جنبه های اصلی طراحی خوبه! یعنی، رابط کاربری باید درک و پیمایش کاربر رو آسون کنه. تعامل باید بدون زحمت و سرراست باشه و به حداقل تلاش نیاز داشته باشه. مدت زمانی که کاربر برای جابه جایی و درگیر شدن با یه شیء تعاملی صرف می کنه یک معیار مهمه.
مسئولیت اصلی ما به عنوان طراح اینه که اندازه و موقعیت مناسبی رو برای شیء های تعاملی تعیین کنیم و مطمئن بشیم که شیء های تعاملی به راحتی قابل انتخاب هستن و انتظارای کاربر رو با توجه به منطقه قابل انتخاب برآورده می کنن - چالشی که با انواع مختلف کار کاربر با سیستم (موس، انگشت و غیره) باهاش مواجهیم -برای کاربر تجربیات خوب بیشتری خلق کنیم و با طراحی خوب حواس پرتیش رو به کمترین مقدار ممکن برسونیم
به دلیل محدود بودن فضای صفحه نمایش، رابط های گوشی های هوشمند به صورت ویژه به قانون Fitts حساس هستن. ما باید مطمئن بشیم عناصر تعاملی با سایز مناسب و درجای مناسب که دسترسی بهشون راحته قرار گرفتن یا نه. تا به راحتی قابل تشخیص و قابل انتخاب باشن و فضای کافی بین شیء های تعاملی قرار بدیم تا از انتخاب تصادفی گزینه های مجاورشون جلوگیری کنیم.
و نکته آخر: درسته که قانون Fitts یه اصل مهم رو بیان می کنه، اما یادمون باشه رعایت قانون Fitts و ایجاد تعادل و زیبایی مهم ترین نکته ایه که به عنوان یه طراح باید بهش توجه کنیم.
