عن أهمية عامل الوقت في تصميم التصفح

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

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

واحد من أنماط التصفح الشائعة هو قائمة من ثلاث مستويات. نجد هذه القائمة غالباً في لوحات المعلومات Dashboards وتطبيقات سطح المكتب. و أسهل طريقة لزيادة سرعة التصفح لهذه القوائم هو صف العناصر Layout Design السليم.

لحسن الحظ، تلقي دراسة تحمل عنوان: مقارنة بين أساليب صف العناصر لقوائم من ثلاث مستويات على الويب A comparison of three-level menu navigation structgures for web design الضوء على أفضل طريقة صف للعناصر و أسرعها للمستخدم.

كبداية، هناك عدة طرق لصف مستويات هذه القوائم. هناك top-top-top و top-left-left و top-top-left و top-left-top و left-left-left و left-top-top و left-left-top و left-top-left. تمثل الأرقام التسلسل الهرمي لما يمكن أن تحويه هذه المستويات من عناصر (1 للرئيسي و 2 للثانوي و 3 لما بعد الثانوي). قامت الدراسة بأخذ العناصر التالية بعين الاعتبار: وقت التصفح navigation time و مستوى تردد المستخدم user hesitation و حركة مؤشر الماوس cursor movement و أخطاء الاختيار selection errors و ما يفضّله المستخدم user prefrence.

وقت التصفح Navigation Time

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

أما الأبطئ فكانت top-top-top و top-top-left.

مستوى تردد المستخدم User Hesitation

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

حركة مؤشر الماوس Cursor Movement

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

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

أخطاء الاختيار Selection Errors

يُعبّر عن هذا المعيار بكم النقرات المتتابعة التي يقوم بها المستخدم و التي تعبر عن خطأ في عملية الاختيار. كانت معدل الخطأ منخفضاً عندما كانت المستوى الرئيسي على اليسار (يختلف هذا بالنسبة للعربية). كان وجود القائمة الرئيسية على اليسار كفيلاً بخفض خطأ الاختيار بـ 80 بالمئة مقارنة بالأعلى.

حصل عدد جديد من أخطاء الاختيار عندما كانت المستويات الرئيسية و الثانوية بجانب بعضها في الأعلى. كانت الأخطاء عالية في top-top-top و top-top-left. حصل عدد أقل من الأخطاء عندما كانت المستويات الثانوية و مابعدها مفصولة عن المستوى الرئيسي. كان أداء left-top-left و left-left-left الأفضل.

ما يفضّله المستخدم User Prefrence

فضّل أغلب المستخدمين التعامل مع قائمة رئيسية على اليسار (الأمر مختلف بالنسبة للعربية) من القوائم العلوية. كانت الأنماط left-top-top و left-left-left الأكثر تفضيلاً. كان هناك تفضيل أيضاً لدمج المستويات الرئيسية و الثانوية أو الثانوية و مابعدها.

كانت الأنماط top-left-top و left-top-left الأقل تفضيلاً.

قد يعني هذا أن المستخدمون لايفضلون التنقل بين المستويات المختلفة كثيراً.

الأفضل مقارنة بالأسوء

تم إعطاء درجة إجمالية بناء على الأداء لجميع المعايير معاً. أفضل درجات تصاميم التصفح كانت لـ left-top-top متبوعة بـ left-left-left. أسوء التصاميم كانت top-top-left و top-left-top.

من بين الأفضل كان left-top-top أسرع من left-left-left بحوالي 17 ثانية. يعود هذا التأخر لحاجة التمرير scrolling بين عناصر القائمة عندما تكون جميعها على اليسار. يزداد مستوى التمرير المطلوب كلما تفرعت عناصر القائمة و أصبحت غير واضحة على الشاشة.

فائدة النمط left-left-left تأتي بأن المستخدم قادراً على استهلاك محتوى أكثر. يقضي المستخدم وقتاً أقل على تصفح عناصر المحتوى و لكنها مقايضة مع قضاء وقت أكثر على تصفح القائمة.

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

دروس مفيدة عند تصميم القوائم

بغض النظر عما سنختار. يبقى left-left-left و left-top-top أفضل الخيارات. هناك الكثير من المقايضات بين التمرير و المحتوى بناء على ماهو مهم للمشروع نفسه.

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

من الممكن أيضاً طبعاً الوصول لحل وسط عبر استخدام left-top-top و إخفاء المستوى العلوي عندما يقوم المستخدم بالتمرير للأسفل لزيادة معدل المحتوى المعروض. يتم عرض القائمة من جديد عندما يمرر المستخدم للأعلى.

من الدروس المهمة أيضاً هي ربط مستويات القوائم الثانوية وما بعدها مع بعض كونها تعطي إشارة واضحة للمستخدم بالفرق بينها و بين القائمة الرئيسية و توضح العلاقة بشكل كبير بين ما هو رئيسي و ما هو غير رئيسي.

خلاصة

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

من UX Movement

شاركنا بتعليقك