قد تواجه نافذة إعلان مزعجة فتحاول أن تضغط على علامة الإغلاق الصغيرة، فتفتح الإعلان الموجود بجانبها بدل إغلاق النافذة. تحاول مرة ثانية بدقة أكبر، مع أنك تعرف تمامًا ما تريد فعله، ولكن المشكلة هنا ليست في فهم الوظيفة؛ وإنما المساحة التي يجب أن تضغط عليها صغيرة، والعناصر المحيطة بها قريبة.
هذا النوع من المشكلات هو ما يُساعدنا قانون فيتس (Fitts’s Law) على فهمه. فالوصول إلى عنصر والضغط عليه يتأثران بحجم المنطقة القابلة للتفاعل والمسافة إليها. لذلك، عند تصميم زرّ أو حَقْل إدخال، نحتاج إلى التفكير في كيفية تفاعل المستخدم مع العنصر وليس الشكل الذي سيراه فقط.
ما هو قانون فيتس؟
قدَّم عالم النفس بول فيتس القانون عام 1954 لدراسة الحركات المُوجَّهة نحو أهداف مُحدَّدة. وفكرته الأساسية أن الوصول إلى هدف أصغر أو أبعد يستغرق عادةً وقتًا أطول، عند مقارنة ظروف متشابهة. ويُطبَّق هذا المبدأ في تصميم التفاعل مع الفأرة وشاشات اللمس وغيرها، كما يُوضِّح شرح القانون لدى Nielsen Norman Group.
المقصود بالهدف هنا هو المساحة التي يمكن التفاعل معها. قد تكون زرّ «تأكيد الحجز»، أو مُربَّع اختيار، أو مِقبضًا نَسحَبه لتغيير قيمة. وفي حالة الفأرة، نَقيس المسافة من موضع المُؤشِّر إلى الهدف، لا من عين الشخص إلى الشاشة.
لا يعني القانون أن كل زرّ كبير مناسب، أو أن وضع جميع الأزرار بجانب بعضها هو الحل. فقد تكسب سرعة الوصول وتخسر الدقة إذا ازدحمت الإجراءات، خصوصًا عندما يكون بينها إجراء يَصعُب التراجع عنه. نَستخدِم القانون لفهم جانب من التفاعل، ثم نراجع بقية التجربة.
ماذا تعني معادلة القانون؟
تُظهِر الصورة التالية الصيغة الأصلية لمُؤشِّر الصعوبة: ID = log₂(2D/W). يُمثِّل D مسافة الحركة، ويُمثِّل W عَرْض الهدف في اتجاهها. وكلما زادت المسافة مقارنة بالعَرْض، ارتفع مُؤشِّر الصعوبة.
مُؤشِّر الصعوبة لا يساوي مدة الضغط بالثواني. لتقدير زمن الحركة، نحتاج إلى نَمُوذج يتضمَّن ثوابت تُستخرَج من القياس. وهناك صيغ مُطوَّرة، منها صيغة شانون ID = log₂(1 + D/W)، يشرحها الباحث سكوت ماكنزي في مرجعه عن قانون فيتس.
طبعًا لا تحتاج إلى حساب المعادلة لكل زرّ في مشروعك. ولكن فائدة القانون هي أنه يجعلك تنتبه إلى أهمية أحجام العناصر وترتيبها ومكانها ضمن التصميم، ويعطيك فكرة منطقية عن كيفية تفكير الإنسان عند التعامل مع العناصر البعيدة والقريبة منه.
حجم الأيقونة ليس مساحة الضغط
قد تكون أيقونة التقويم صغيرة بصريًا، لكن المساحة المحيطة بها تَستجيب للضغط أيضًا. عندها تكون منطقة التفاعل أكبر مما توحي به الأيقونة وحدها. أما إذا اسْتَجابَت الخطوط الدقيقة داخل الرسم فقط، فسيحتاج الشخص إلى إصابتها بدقة لا داعي لها.
لنفترض أنك تُصمِّم صفحة حجز موعد. يوجد بجانب التاريخ رمز لفتح التقويم. يمكنك إبقاء الرمز بحجم متوازن مع النص، مع توفير مساحة واضحة حوله تَستجيب للمس. لا تحتاج إلى تكبير الرسم حتى يُنافس عنوان الصفحة في حجمه.
راجِع هذا الأمر في التنفيذ، لأن تكبير الإطار داخل مِلَف التصميم لا يضمن أن المساحة كلها أصبحت قابلة للضغط. اضْغَط قرب أطراف الزرّ أو الأيقونة، وتحقَّق من استجابتها ومن عدم تداخل منطقتها مع عنصر آخر.
وينطبق الأمر على مُربَّعات الاختيار: إتاحة الضغط على التسمية المرتبطة بالمُربَّع قد تجعل التفاعل أسهل. لكن احْرِص على أن تكون العلاقة واضحة، خصوصًا إذا تضمَّن السطر رابطًا لوظيفة مختلفة، مثل قراءة الشروط.
ما الحجم المناسب للأهداف؟
يعتمد ذلك على نوع الجهاز وطريقة الإدخال والمهمة. وتوجد معايير تُساعدك على المراجعة بدل اختيار الأحجام بالانطباع وحده. بالنسبة إلى الويب، يطلب معيار WCAG 2.2، البَنْد 2.5.8، مستوى AA أن تكون مساحة الهدف 24 × 24 بكسل CSS على الأقل، أو أن يستوفي أحد الاستثناءات المُحدَّدة.
من هذه الاستثناءات وجود تباعد كافٍ للأهداف الصغيرة وفق طريقة القياس التي يشرحها المعيار، وكذلك الروابط داخل الأسطر النصية بشروطها. لذلك، لا تعني القاعدة وجوب تحويل كل رابط في فقرة إلى مُربَّع، ولا تعني أن أي مساحة فارغة بسيطة تُحقِّق الشرط تلقائيًا.
أما البَنْد 2.5.5، مستوى AAA، فيضع معيارًا أعلى هو 44 × 44 بكسل CSS، مع استثناءاته أيضًا. هذه أبعاد لمنطقة التفاعل، وليست مقاسًا لازمًا لرسم الأيقونة داخلها.
اعتبر هذه الأرقام مرجعًا للمراجعة، ثم اختبر المهمة. قد يحتاج زرّ مُتكرِّر الاستخدام إلى مساحة أكبر، وقد تُؤثِّر طريقة الإمساك بالجهاز في سهولة الضغط. اجتياز شرط الحجم لا يضمن وحده وضوح الزرّ أو ملاءمة مكانه.
المسافات بين العناصر مهمة أيضًا
في شاشة تعديل حجز، قد تَعرِض «حِفْظ التغييرات» و«إلغاء الحجز». إذا كان الزرّان صغيرين ومتلاصقين، فمن الممكن أن تُؤدِّي محاولة الحِفْظ إلى إلغاء غير مقصود. تكبيرهما دون مراجعة الفاصل بينهما قد يُبقِي المشكلة.
ابدأ بتمييز الإجراءين في النص والشكل، ثم وفِّر مساحة مناسبة بينهما. ويمكن أن يكون إلغاء الحجز في موضع مستقل داخل تفاصيل الحجز، بدل وضعه في المسار المباشر للحفظ. القرار هنا يعتمد على أهمية الإجراء وتكراره وما يحتاجه الشخص في تلك اللحظة.
عندما يكون الإجراء مؤثرًا ويصعب التراجع عنه، راجِع أيضًا طريقة التأكيد أو التراجع. هذه حماية مُكمِّلة لتصميم مساحة الضغط؛ فالهدف الأكبر لا يمنع جميع الأخطاء، كما أن رسالة التأكيد لا تُصلح وحدها زرّين يَصعُب التمييز بينهما.
يوصي شرح قانون فيتس في Laws of UX بالاهتمام بحجم الأهداف وتباعدها وسهولة الوصول إليها. وفي التطبيق، راجِع هذه العوامل معًا، لأن تحسين عامل واحد قد لا يُزيل سبب التعثُّر.
أين نضع العناصر على الهاتف؟
قد تُساعدك خرائط وصول الإبهام على ملاحظة أن بعض مناطق الشاشة أصعب وصولًا عند الإمساك بالهاتف بيد واحدة. لكنها لا تُحدِّد مكانًا مثاليًا واحدًا لجميع الأشخاص والأجهزة.
الصورة تُقدِّم تصورًا مُبسَّطًا، وليست قياسًا لجمهور مُنتَجك. شخص يَستخدِم يده الأخرى للمس الشاشة سيتعامل معها بطريقة مختلفة عن شخص يمسك الجهاز ويضغط بالإبهام نفسه. لذلك، لا تستنتج من الرسم أن منتصف الشاشة هو المكان الأفضل دائمًا.
في نَمُوذج الحجز، جرِّب موضع زرّ المتابعة أثناء ظهور لوحة المفاتيح، وبعد اختيار التاريخ، ومع التمرير. الزرّ القريب من آخر حَقْل قد يكون مناسبًا في حالة، لكنه قد يختفي خلف لوحة المفاتيح في حالة أخرى. وإذا ثبَّتَّه أسفل الشاشة، فتأكَّد من أنه لا يحجب المعلومات أو يُعيق عناصر النظام.
واختبر النسخة العربية كما سيَستخدِمها جمهورك. اتجاه النص لا يُخبرك وحده باليد التي يحمل بها الشخص هاتفه، ولا بطريقة تنقّله داخل النَّمُوذج.
مثال: مراجعة شاشة تسجيل الدخول
تُظهِر الصورة حقولًا للبريد الإلكتروني وكلمة المرور وزرًّا لتسجيل الدخول قريبًا منها. يمكن أن نَستخدِمها لمناقشة أحجام العناصر وتسلسل الوصول، لكن الصورة وحدها لا تكشف مساحة الضغط الفِعليّة بعد التنفيذ.
ابدأ من البريد، ثم انتقل إلى كلمة المرور، ثم إلى تسجيل الدخول. اسأل: هل يَستجيب كل حَقْل بسهولة؟ هل زرّ إظهار كلمة المرور قابل للضغط دون لمس شيء آخر؟ وهل يمكن فتح رابط استعادة كلمة المرور باللمس دون محاولات متكررة؟
ولا تكتفِ بالزرّ الأساسي الكبير. فقد تكون أكثر نقطة إرباك هي رابط صغير يحتاجه الشخص عندما يتعذَّر عليه الدخول. إذا نجحت المهمة الأساسية وفشلت استعادة الحساب، فالتجربة ما زالت تحتاج إلى عمل.
يمكنك كذلك التحقُّق من ترتيب التنقُّل بلوحة المفاتيح ووضوح العنصر الذي يَحمِل التركيز. هذه مراجعة مُكمِّلة لقانون فيتس، لأن الوصول إلى الواجهة لا يقتصر على الفأرة واللمس.
كيف تَختَبِر التحسين؟
اخْتَر مهمة واحدة داخل نَمُوذج يعمل على جهاز فعلي، ثم جرِّبها مع أشخاص من جمهورك. راقِب مواضع الضغط والمحاولات الخاطئة والحاجة إلى تغيير قبضة اليد. لا تطلب منهم الإسراع لمجرد إثبات أن النسخة الجديدة أسرع.
يمكن تنظيم المراجعة بهذه الخطوات:
حَدِّد موضع التعثُّر. هل المشكلة في إصابة الهدف، أم في فهم وظيفته، أم في العثور عليه؟
راجِع المساحة الفِعليّة. افْحَص حدود المنطقة التي تَستجيب للضغط، لا أبعاد الرسم وحدها.
عَدِّل السبب الأقرب للمشكلة. وسِّع الهدف أو حسِّن التباعد أو انْقُل الإجراء إلى موضع أنسب.
قارِن المحاولات. راقِب الأخطاء والوقت في ظروف متقاربة، مع الانتباه إلى أثر تعلُّم المهمة.
اختبر الحالات الأخرى. جرِّب لوحة المفاتيح والتمرير والنصوص الطويلة وأحجام الشاشات المختلفة.
لا تُفسِّر انخفاض الوقت وحده على أنه نجاح إذا زادت الأخطاء. وقد يكون التغيير الجيد هو الذي يجعل الشخص يُنجِز المهمة بثقة ومحاولات أقل، حتى لو لم يَظهَر فرق كبير في الزمن.
قانون فيتس يجعلنا نراجع ما يتطلَّبه الضغط من دقة وحركة. اخْتَر عنصرًا صغيرًا في مشروعك، وافْحَص المساحة التي تَستجيب له وموقعه والعناصر القريبة منه. وإذا كانت المشكلة في توقُّع وظيفة العنصر، فستفيدك أيضًا مراجعة قانون جاكوب، لأنه يتناول ما يتعلَّمه الناس من تجاربهم السابقة.
المصادر
Nielsen Norman Group — Fitts’s Law: تعريف القانون وتطبيقه على التفاعل.
I. Scott MacKenzie — Fitts’ Law: الصيغة الأصلية وصيغة شانون والعلاقة بزمن الحركة.
W3C — Target Size (Minimum): معيار 24 × 24 بكسل CSS واستثناءاته.
W3C — Target Size (Enhanced): معيار 44 × 44 بكسل CSS واستثناءاته.
Laws of UX — Fitts’s Law: حجم الأهداف وتباعدها وسهولة الوصول إليها.
تاريخ النشر
14 سبتمبر 2026
آخر تعديل
3 أكتوبر 2026
