09913096959
support@manaid.com
SVG logoSVG logo
  • خدمات طراحی UI و UX
  • خدمات طراحی وب سایت
  • درباره ما
  • تماس با ما

قانون فیتز (Fitts law)

  1. خانه
  2. اصول و قوانین طراحی UX
  3. قانون فیتز (Fitts law)
15شهریور1401
نوشته های دیگر

10 قانون طلایی برای طراحی سایت خلاقانه

کاربرد اثر زیگارنیک در طراحی

کاربرد اثر زیگارنیک در طراحی سایت – Zeigarnik Effect

اصل پارتو

قانون پارتو در طراحی سایت – (Pareto Principle)

میکرواینتراکشن ها در طراحی سایت

میکرواینتراکشن ها در طراحی سایت – جزییاتی کوچک با تأثیری بزرگ

اثر موقعیت ترتیبی در طراحی تجربه کاربری (UX) – (Serial Position Effect )

قانون فیتز در یک جمله میگه : “زمان دست یابی به یک هدف تابعی از فاصله و ابعاد هدف است”

آنچه در این مقاله می‌خوانید

Toggle
  • تاریخچه:
  • چطور از این قانون استفاده کنیم؟
  • جمع بندی
  • منابع

یا به عبارتی اندازه و فاصله شیء در مدت زمان دسترسی و کارآیی آن موثر است.” مقدار زمان لازم برای حرکت یک اشاره گر (به عنوان مثال، مکان نمای ماوس) بر روی یک دگمه، از فاصله‌ی هدف تقسیم بر اندازه هدف است. به این ترتیب، فاصله طولانی تر و اندازه هدف کوچکتر، زمان بیشتری برای دسترس لازم دارد.

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

چند نکته کلیدی:

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

قانون فیتز در یک جمله میگه : “زمان دست یابی به یک هدف تابعی از فاصله و ابعاد هدف است”

تاریخچه:

در سال 1954، روانشناسی به نام پاول فیتس (Paul Fitts)، دربررسی سیستم حرکتی انسان، نشون داد که زمان لازم برای حرکت به سمت هدف، بستگی مستقیم با فاصله آن و رابطه معکوس به اندازه آن دارد. بنا بر این قانون، حرکات سریع و اهداف کوچک مستعد بروز خطای بیشتری بوده و باعث افزایش نرخ خطا می شود.

قانون Fitts قبل از اختراع رابط گرافیکی بوجود اومد که به عنوان  الگوی کاربران برای درک حرکت انسان در دنیای فیزیکی ابداع شد ولی الان میشه  به طور گسترده در طراحی تجربه کاربر(UX)  و رابط کاربری (UI) صفحات وب، اپلیکیشنها و هر گونه اینترفیس دیگه از آن استفاده کرد.

این قانون طراحی دکمه های تعاملی بزرگ (به ویژه در دستگاه های تلفن همراه با انگشت) را توجیه میکنه.

 

قانون فیتز-دگمه های بزرگ
قانون فیتز طراحی دگمه های بزرگ را توجیح میکند

چطور از این قانون استفاده کنیم؟

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

 

توصیه چند کمپانی برای حداقل سایز اهداف لمسی

 

به نظر میرسه طبق تجربه حداق سایز 48 در 48 پیکسل حداق سایز مناسب برای طراحی دگمه ها و لینکها قابل لمس باشه.

جمع بندی

کاربردپذیری یا Usability یکی از شاخص های یه طراحی خوبه , قانون Fitts روی سهولت استفاده بیشتر تاکید داره که به این معنیه که رابط کاربری باید در پیمایش و درک کاربران خیلی راحت باشه .تعاملات در یک صفحه باید در دسترس، سر راست و راحت باشه. برای مثال در یک فرآیند مرحله ای ( مانند ثبت نام کردن یا خرید آنلاین و فرآیندهایی که هر مرحله پس از مرحله بعد می آید) دگمه های پیش فرض یا رفتن به مرحله بعد باید موقعیت یکسانی داشته باشند.

TouchLab مطالعه‌ای را انجام داد که نشان داد متوسط سطح لمس انگشت انسان در بزرگسالان 10-14 میلی متر و متوسط نوک انگشت 8-10 میلی متر است. همچنین طراحی متریال گوگل یا  Goole Material Design توصیه می کنه که ” تارگت های لمسی را باید با 8dp ازهم جدا کنید تا مطمئن شید که تداخل لمس تارگت به حداقل برسه.

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

قرار دادن اهداف لمسی در مناطقی از صفحه اصلی که دستیابی به آنها دشوارتر هست ، به نوبه خودش انتخاب اونارو دشوارتر می کند.  این قضیه به ویژه برای کاربران موبایل بسیار مهم است. با بررسی ها صورت گرفته مشخص شده بیشتر کابران به یکی از اشکال زیر با تلفن همراه خود کار می کنند.

 

تصویر زیر، یک راهنمای سریع برای طراحی متناسب با صفحه موبایل است

راهنمای طراحی برای موبایل بر اساس قانون فیتس
راهنمای طراحی برای موبایل بر اساس قانون فیتس

 

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

 

راهنمای دسترسی به نقاط مختلف صفحه موبایل در کاربران راست دست یا چپ دست

 

نکته آخر اینکه فاصله بین عناصر تعاملی مثل دکمه ها خیلی مهمه .

به مثال اپلیکیشن Linkedin توجه کنید . وقتی کسی به شما درخواست میده با دوتا دکمه میتونید تایید و یا ریجکت کنید و این دوتا دکمه خیلی بهم نزدیک هستند و گاهی اوقات پیش میاد که شما میخواید تایید کنید ولی لغو رو اشتباهی لمس میکنید و یا برعکس .

پس دفعه بعد موقع طراحی یادتون باشه نه خیلی دور نه خیلی نزدیک!

منابع

Laws of UX | Nielsen Norman Group

نوشتهٔ پیشین
کاربرد قانون آستانه دوهرتی در طراحی سایت – Doherty Threshold
نوشتهٔ بعدی
اثر شیب هدف (Goal gradient effect)
عباس عباس زاده
من عباس هستم عاشق حوزه طراحی UI, UX فیلم های فانتزی و البته قهوه مراکشی . اینجا هستم تا آموخته هایم را با شما به اشتراک بگذارم و یاد بگیرم.

دیدگاهتان را بنویسید لغو پاسخ

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

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.
شما برای ادامه باید با شرایط موافقت کنید

کاربرد قانون آستانه دوهرتی در طراحی سایت – Doherty Threshold
اثر شیب هدف (Goal gradient effect)
تصویر پس زمینه، طرحی است از کاشی‌های سقف و زیر گنبد عظیمِ یکی از شاهکارهای معماری اصفهان، مسجد شاه اصفهان که به دست استاد به نام خطاطی و مینیاتور  رضا عباسی در دوره شاه عباس صفوی آفریده شده است.

نوشته‌های تازه

  • راهنمای اصول طراحی فرم تماس با ما 4 خرداد 1404
  • اصول طراحی UX و UI برای سالمندان 15 اردیبهشت 1404
  • چک لیست طراحی فرم های احراز هویت : 6 مرحله مهم در طراحی فرآیند احراز هویت 25 فروردین 1404
  • 10 قانون طلایی برای طراحی سایت خلاقانه 29 بهمن 1403

اطلاعات تماس

manager@manaid.com
09132247398
شهر گنبدهای فیروزه ای، اصفهان، خانه اصفهان، میدان نگهبانی، کوی 20 پلاک 12 واحد 1

© 2023تمام تصاویر، مطالب و ایده های استفاده شده برای آژانس خلاقیت مانایید محفوظ است

ما برای آسایش شما از کوکی ها استفاده میکنیم تا بتوانیم بهتر به شما خدمات رسانی کنیم. این کار برای شما هیچ دردسری ایجاد نمیکند