الاستفادة من قانون فيتس: مبادئ تصميم واجهة المستخدم للتجارة الإلكترونية

يمكن أن يكون للتحسينات الصغيرة في تدفق الشراء لموقع التجارة الإلكترونية تأثير كبير عند إغراء الزائرين ليصبحوا عملاء يدفعون. من خلال تطبيق قانون Fitts على واجهة موقع التجارة الإلكترونية ، يمكن للمصممين أن يسهلوا على المستخدمين العثور على ما يبحثون عنه بالضبط ، وإضافة عناصر إلى عرباتهم ، وإجراء عمليات شراء في النهاية.

ينص قانون فيتس على أن مقدار الوقت الذي يستغرقه الشخص لتحريك المؤشر إلى الهدف هو دالة للمسافة إلى الهدف مقسومة على حجم الهدف. يعني هذا بشكل أساسي أن الكائنات الأكبر والأقرب يسهل التفاعل معها. تم وضع القانون في الأصل عام 1954 من قبل عالم النفس بول فيتس ، الذي ابتكر نماذج رياضية للسلوك البشري وعمل على تحديد قدرات الجهاز العصبي البشري.

يحدد قانون فيتس مقايضة دقة السرعة: كلما كان تنفيذ المهمة أكثر دقة ، كلما استغرق إكمالها وقتًا أطول. ترجم لتصميم واجهة المستخدم ، فهذا يعني أنه كلما كان الهدف - مثل زر "إضافة إلى عربة التسوق" - بعيدًا عن مؤشر المستخدم أو إصبعه ، يجب أن يكون الهدف أكبر. بهذه الطريقة ، لا تتطلب عملية الوصول إلى الهدف الكثير من الدقة ، ويمكن تنفيذها بسرعة.

قد تبدو أهمية جعل مكون واجهة المستخدم أكبر واضحة ، لكن قانون فيتس لا يتعلق بزيادة حجم التأثير البصري. يتعلق الأمر بتقليل مقدار الوقت الذي يستغرقه المستخدم للوصول إلى أحد المكونات باستخدام المؤشر أو الإصبع. غالبًا ما يعني ذلك جعل مكون واجهة المستخدم أكبر ، ولكن قد يعني أيضًا نشر تقنيات أخرى تسمح للمستخدمين بالتنقل عبر موقع التجارة الإلكترونية بشكل أكثر كفاءة وإجراء عملية شراء في نهاية المطاف.

تحطيم صيغة قانون فيتس

المعادلة الرياضية التي كتبها فيتس هي t = a + b log2 (2 d / w) حيث:

• ر يساوي الوقت.
• تمثل أ و ب معاملات الانحدار المشتقة من مراقبة الاختبارات.
• د هي المسافة بين نقطة البداية والهدف.
• w هو عرض الهدف.
• يشير log2 إلى أن الصيغة لوغاريتمية ، وأن log2 (2 d / w) ينتج عنه مؤشر الصعوبة (ID) ، وهو قياس يحدد مدى صعوبة الحصول على الهدف.

تشير المعادلة اللوغاريتمية إلى العلاقة بين حجم الهدف أو المسافة ووقت رد الفعل: يمكن أن تجعل زيادة الحجم الصغير أو المسافة للأهداف الصغيرة من السهل الحصول عليها ، في حين أن الزيادة الصغيرة في الحجم أو المسافة للأهداف الأكبر لن تجعلها أسهل بكثير تصل.

في ضوء المعادلة ، يجب أن يأخذ مصممو واجهة مستخدم التجارة الإلكترونية شيئين في الاعتبار: حجم واجهة المستخدم المستهدفة بالنسبة للعناصر الأخرى على الموقع والمسافة بين هذا الهدف والمؤشر. يعني تطبيق قانون Fitts على التجارة الإلكترونية تسهيل تحديد الهدف والتفاعل معه حتى يتمكن العملاء من إكمال مهمتهم بسرعة والانتقال إلى الخطوة التالية في عملية الشراء.

قانون فيتس وتصميم واجهة التجارة الإلكترونية: ملاءمة مثالية

ساعد قانون فيتس أيضًا في ظهور مفهوم البكسل الرئيسي - موقع مؤشر المستخدم في أي لحظة. الهدف من مصممي واجهة المستخدم للتجارة الإلكترونية هو تقصير المسافة من البكسل الرئيسي إلى الهدف قدر الإمكان. ولكن نظرًا لأن البكسل الرئيسي متغير (من يعرف بالضبط أين سيضع المستخدم مؤشره عند وصوله إلى الصفحة؟) ، فهناك العديد من التقنيات للتحكم في المكونات الثابتة لصفحة التجارة الإلكترونية من أجل وضعها في مكان قريب مثل ممكن إلى حيث من المحتمل أن تكون البكسل الرئيسي للمستخدم.

تصميم لاكتشاف المنتج بكفاءة

في مواقع التجارة الإلكترونية الناجحة ، من السهل العثور على المنتجات. تتمثل إحدى طرق استخدام قانون Fitts لتحسين اكتشاف المنتج في إضافة وظيفة البحث إلى قسم الأبطال في الصفحة الرئيسية. يميل الأشخاص إلى مسح صفحات الويب بأنماط يمكن التنبؤ بها ، ويرتبط سلوك المسح وحركات المؤشر ارتباطًا وثيقًا.

يمكن أن يؤدي وضع شريط بحث في منطقة تتوقع من الزوار أن ينظروا إليها - وبالتالي وضع مؤشرهم لإنشاء البكسل الرئيسي - إلى تقليل المسافة التي يحتاجون إليها لتحريك المؤشر بشكل كبير من أجل إدخال استعلام بحث. بالإضافة إلى ذلك ، يمكن أن يساعد تنفيذ البحث التنبئي في جذب المستخدمين إلى القوائم المستهدفة بسرعة أكبر.

تحسين قوائم التجارة الإلكترونية

الميزة الحاسمة لأي موقع تجارة إلكترونية ناجح هي القائمة التي تسمح للعملاء بالاستكشاف بكفاءة والعثور على الفئات والمنتجات التي يتسوقون من أجلها. قم بتطبيق قانون فيتس من خلال اعتماد قائمة منسدلة تلقائية تظهر عندما يحوم العميل فوق فئة المحتوى. تجنب وضع عدد كبير جدًا من العناصر في قائمة واحدة حتى لا يضطر المستخدمون إلى تحريك المؤشر بعيدًا لتحديد عنصر. بالإضافة إلى ذلك ، استخدم بنية معلومات جيدة وصور المنتج لتزويد المستخدمين بمناطق مستهدفة أكبر تقصر المسافة التي تحتاج مؤشراتهم لقطعها لإجراء التحديدات.

قم بزيادة المساحة السطحية لأزرار الحث على اتخاذ إجراء

المكان الواضح لتطبيق قانون Fitts هو زر CTA الذي سيؤدي إلى عملية شراء. اجعل الزر كبيرًا بحيث يبرز ويسهل النقر فوقه ؛ يتطلب الحصول على هدف أكبر دقة أقل. بالإضافة إلى ذلك ، اجعل الزر واضحًا من خلال تضمينه في الجزء المرئي من الصفحة ، وتطبيق تباين يمكن الوصول إليه ، ووضعه بعيدًا بما يكفي عن المكونات الأخرى بحيث لا ينقر المستخدمون على العنصر الخطأ. يعمل T0 على زيادة ثقة المستخدمين في اتخاذ القرار ، والتأكد من أن النسخ المصغر على الزر واضح ومفيد.

ضع في اعتبارك أيضًا وضع زر CTA على طول حافة الشاشة لتعظيم استخدام ما يُعرف باسم وحدات البكسل السحرية ، وهي مناطق من الشاشة حيث يمكن للمستخدم التنقل بسرعة وبدقة مع استمرار إصابة الهدف.

اجعل بعض الإجراءات أصعب من غيرها

في معظم الحالات ، يطبق مصممو واجهة مستخدم التجارة الإلكترونية قانون فيتس لتسريع تفاعلات المستخدمين. ومع ذلك ، في بعض الحالات قد يرغبون في إبطائها. على سبيل المثال ، قد يطبق المصممون مربعات اختيار صغيرة لوظائف المنتجات الإضافية البعيدة عن البكسل الرئيسي (والذي من المحتمل في هذه الحالة أن يكون زر "إضافة إلى عربة التسوق"). سيؤدي القيام بذلك إلى إجبار المستخدمين على أن يكونوا أكثر دقة عند اختيار منتجات إضافية ، مما يضمن عدم قيامهم بشراء عناصر غير مرغوب فيها عن غير قصد.

قانون فيتس للأجهزة المحمولة

عند تطبيق قانون Fitts على تصميم واجهة المستخدم للتجارة الإلكترونية للأجهزة المحمولة ، يجب على المصممين مراعاة بعض القيود.

الأصابع هي المؤشرات

على الأجهزة المحمولة ، لا توجد مؤشرات. يعتمد المستخدمون على أصابعهم للتفاعل مع الواجهة. ومع ذلك ، فإن الأصابع أكثر سمكًا وبالتالي فهي أقل دقة من المؤشرات. يجب أن تكون أهداف اللمس أكبر لتطبيقات الأجهزة المحمولة مما هي عليه لمواقع الويب. ضع في اعتبارك زر CTA الذي يمتد عبر عرض الشاشة ، ويزيد مساحة الحشو لجعله أكثر قابلية للنقر.

غالبًا ما يتم استخدام الهاتف بيد واحدة

في كثير من الأحيان ، يمسك المستخدمون أجهزتهم المحمولة بيد واحدة ويقومون بتشغيلها بإبهامهم. يؤدي هذا عمومًا إلى تقييد المستخدمين على التفاعل مع الجزء السفلي من الشاشة ما لم يستخدموا يدين لتمكين لمس الجزء العلوي. عند التفكير في تصميم واجهة المستخدم للتجارة الإلكترونية عبر الأجهزة المحمولة ، يجب على المصممين وضع أهدافهم المرجوة ضمن نطاق الوصول الطبيعي للإبهام.

ضع في اعتبارك التحذيرات

عند تطبيق قانون فيتس ، يجدر التفكير في سؤالين رئيسيين: ما هو الهدف الأساسي الذي يريد المستخدمون تحقيقه عندما يصلون إلى هذه الصفحة؟ و: كيف يمكنني تسهيل تحقيق هذا الهدف على المستخدمين؟

قانون فيتس ليس حلا سحريا. ستكون هناك حالات يكون فيها من المنطقي تطبيقه وأوقات تكون فيها المفاهيم الأخرى أكثر ملاءمة. في حالة التجارة الإلكترونية ، من الجدير أيضًا التفكير فيما إذا كان التركيز على جانب آخر من الموقع - على سبيل المثال ، كيف يتحدث المحتوى جيدًا للجمهور - يمكن أن يؤدي إلى نتائج أفضل.

هناك أيضًا خطر استخدام قانون فيتس كنمط مظلم ، كما يحدث أحيانًا مع الإعلانات التي تظهر على صفحات محرك البحث. عادةً ما يتم عرض هذه الإعلانات في أعلى الصفحة كما لو كانت نتائج بحث بحد ذاتها. هذا مثال على قانون فيتس ، حيث أن المسافة بين الإعلان والمكوِّن الذي تم التفاعل معه مؤخرًا قريبة من بعضهما البعض. في حين أن هناك العديد من حالات الاستخدام الجيدة لعرض إعلان الشركة بجوار نتيجة البحث ذات الصلة ، غالبًا ما يتم اختطاف قرار التصميم هذا من قبل المنافسين الذين يريدون تضليل المستخدمين.

اتبع قانون فيتس من أجل نجاح التجارة الإلكترونية

على الرغم من أن قانون فيتس قد تم تطويره قبل عقود من ظهور الإنترنت ، إلا أنه مبدأ قيم في تصميم المنتجات الرقمية. اليوم ، يمكن للمصممين استخدام قانون Fitts لزيادة الإيرادات من خلال تسهيل تنقل عملاء التجارة الإلكترونية في الموقع والعثور على المنتجات وإجراء عمليات الشراء.

مزيد من القراءة على مدونة Toptal:

• تمهيد الطريق للشراء - أفضل ممارسات التجارة الإلكترونية UX
• أفضل ممارسات الصفحة المقصودة (باستخدام مخطط المعلومات الرسومي)
• كيفية تصميم الصفحات المقصودة التي يتم تحويلها
• بناء وتوسيع نطاق نظام التصميم في Figma: دراسة حالة