الدليل المبسط لإستخدام قائمة الاختيار Select Menu بشكل صحيح‎

3:25 م |

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

متى يجب أن نستخدمها ؟
إضافة إسم لها (Labeling) بالشكل الصحيح.
استخدام الخيار الافتراضي (Default Option) في قائمة الاختيار .
إضافة المجموعات (Groups) لجمع الخيارات المتشابة مع بعضها.
الاستفادة من القائمة للانتقال (Navigation) من صفحة إلى أخرى.

أولاً: متى يجب أن نستخدم قائمة الاختيار

بعض الأحيان نرى قائمة يوجد فيها 20 خيار وأخرى فيها خياران، في كلتا الحالتين الإستخدام خاطىء، عندما يكون لديك أقل من 5 خيارات يجب أن تستخدم Radio Buttons لإن الخيارات تكون واضحة للمستخدم وسوف يقوم باختيار ما يريد بكل سلاسة وسهولة.

مع وجود هذه القائمة سوف يكون هناك 3 خطوات يجب على المستخدم فعلها:

الضغط على القائمة.
التفكير في الخيار الذي يريده.
ومن ثم يضغط مرة أخرى.

بالمقابل عندما تستخدم Radio Buttons سيكون لديك خطوة واحدة فقط، ولا ننسى أن قائمة الإختيار تقوم بإخفاء الخيارات حتى يتم الضغط عليها من قبل المستخدم، وهذا يمكن أن يربك المستخدم ولا يقوم بالتعرف على الخيارات الموجودة.

عندما يكون لديك قائمة فيها 15 خيار مثلا، يفضل أن تقلل من الخيارات أو أن تضع Textfield وتترك الحرية للمستخدم لكي يضع ما يريد داخله من دون البحث في تلك القائمة الطويلة. أنت هنا تختصر على المستخدم خطوة عدم البحث في قائمة طويلة والضياع فيها.

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

ثانيا: تسمية قائمة الاختيار Labeling

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

ثالثاً: متى نستخدم الخيار الافتراضي

عندما تظهر رسالة خطأ للمستخدم بأنه نسى اختيار خيار من القائمة، تكون أهون عليه من اختيار خيار خاطىء من دون قصد (خاصة اذا كان الموقع يقدم خيار الافتراضي للقائمة)، إذاً متى يفضل ان نستخدم الخيار الافتراضي؟

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

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

رابعا: استخدام المجموعات لجمع الخيارات مع بعضها

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

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

خامساً: استخدام قائمة الاختيار للإنتقال من صفحة لأخرى

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

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

الخلاصة:

تعرفنا في هذه المقالة على نقاط مهمة يجب علينا أن نأخذها بعين الاعتبار أثناء تصميم المواقع وهي:

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

المقال مترجم بتصريف من :

http://uxmovement.com/forms/stop-misusing-select-menus/

اذا اعجبتك هذه التدوينة فلا تنسى ان تشاركها وتساعدنا على نشر المدونة ، كما يسعدنا ان تنضم الى قائمة المشاركين في Web-King من خلال (نشرات rss)

التسميات: تصميم تجربة المستخدم

0 التعليقات :

إرسال تعليق

رأيك مهم بالنسبه لنا ، فلا تحرمنا منه

Web-King

هل هذة أول زيارة لك ؟

يمكن أن تبدأ بقراءة :

الاقسام

ارشيف Web-King

جديد المواضيع