عند تصميم النماذج الرقمية، هناك خيارات واسعة لأنواع مختلفة من المجالات، يخدم كل منها غرضاً محدداً، بدءاً من أزرار الاختيار إلى القوائم المنسدلة وحتى حقول النصوص. لكن إذا كنت تريد أن تقدّم للمستخدمين مرونة وسهولة في استخدام خدمتك أو تطبيقك بتحديد عنصر واحد أو عدة عناصر أو عدم تحديد أي عنصر من القائمة، فإن مربعات الاختيار هي خيارك المفضل لهذه الخطوة.
ما هي مربعات الاختيار (Checkboxes)؟
مربع الاختيار هو أحد عناصر واجهة المستخدم (UI)، مربع تفاعلي صغير يمكن للمستخدم تبديل وضعه عند لمسه للإشارة إلى خيار “قبول” أو “عدم قبول” أي يسمح للمستخدم بالاختيار بين حالتين: إما محدد (Checked) أو غير محدد (Unchecked). غالباً، عند النقر عليه، تظهر علامة الاختيار (✓) داخل المربع للإشارة إلى الاختيار الإيجابي أو القبول (أي نعم)، وتختفي علامة الاختيار عند النقر عليها مرة أخرى، مما يشير إلى الاختيار السلبي (لا).
باختصار، تُستخدم خانات الاختيار عند الحاجة إلى تحديد خيار أو أكثر أو كوسيلة سهلة لتشغيل الإعداد أو إيقاف تشغيله في البرنامج، وكما قلنا، يؤدي تحديد المربع إلى تمكين هذا الإعداد، كما يؤدي إلغاء تحديده إلى إيقاف تشغيله. يمكنك رؤية مربعات الاختيار في نماذج إدخال HTML ومربعات الحوار وواجهات المستخدم الرسومية للتطبيقات وأنظمة التشغيل.
أنواع مربعات الاختيار
هناك 3 أنواع مختلفة لمربعات الاختيار، ولكل منها تطبيق أو مكان مختلف لتشغَله، وهي: قائمة مربّعات الاختيار (Checkbox List) ومربّع الاختيار المستقل (Standalone Checkbox) ومربّعات الاختيار المتداخلة (Nested Checkboxes).
تبيّن الصورة السابقة أمثلة حول كل من الأنواع الثلاثة تمكّنك من التمييز قليلاً بينها. إليك شرح مختصر عنها قبل أن ندخل في التفاصيل. في مثال مربع الاختيار المستقل، نرى أن هناك بالفعل مربع واحد مستقل، وهذا يعني أنك مُلزم باختيار هذا العنصر أو عدم اختياره، فقط. أما قائمة مربعات الاختيار فتبيّن أن لديك مجموعة متنوّعة من العناصر والخيارات المتاحة، حدّد ما تريده واترك ما لا تريد. وأما خانات الاختيار المتداخلة فتتضمّن خيارات ضمن قائمة منسدلة متعلّقة بخيَار معيّن، فإما أن نضغط على عنوان هذه القائمة فتتحدّد تلقائياً جميع الخيارات، أو أن نختار من ضمن قائمة الخيارات ما نريد، وهي متداخلة لأنها مجموعة خيارات ضمن خيار رئيسي ومن الممكن أن ترى في ذات الصفحة مجموعات مختلفة من هذا النمط.
لنتعرّف على الأنواع الثلاثة بشيء من التفصيل.
مربعات الاختيار المستقلة (Standalone Checkbox)
يظهر هذا النوع من مربعات الاختيار لوحده في الصفحة. لا توجد مربعات اختيار أخرى حوله، وغالباً ما تراه مميزاً بصرياً لأنه الخيار الوحيد ولذا قد تراه محاطاً بإطار مميز يدل على ذلك، وكأنه يقول لك: “أنا خيارك الوحيد في هذه الصفحة، لا يمكنك إيلاء الاهتمام لغيري، اخترني!”.
تُستخدم مربعات الاختيار المستقلة غالباً عندما يتعين على المستخدم الموافقة على شروط وأحكام تطبيق أو موقع معين. في هذه الحالة، يُشار عادةً إلى حقل خانة الاختيار على أنه مطلوب التعبئة إما باستخدام تسمية نصية (أي يُكتب جنبه “مطلوب” أو “Required”) أو ببساطة يميّز بعلامة النجمة الحمراء. لا يستطيع المستخدم المضي قدماً وإكمال العمل دون تحديد الموافقة في هذا المربع.
في المثال أدناه، لاحظ مربع خيار مستقل في أحد تطبيقات توصيل الطعام والذي يحثّ المستخدم على الاشتراك في النسخة التجريبية من خدمته من خلال تقديم الخصومات والعروض الترويجية.
قوائم خانات الاختيار (Checkbox List)
هذا هو الشكل الأكثر شيوعاً لمربعات الاختيار ونراه جميعاً في الكثير من التطبيقات. سيكون لديك قائمة من خانات متعددة، تعمل كل خانة اختيار منها بشكل مستقل عن الأخرى، أي لا يؤثر تحديد مربع اختيار أو إلغاء تحديده على حالة اختيار أي من الخانات الأخرى في القائمة. تتيح قائمة مربعات الاختيار للمستخدمين القدرة على تحديد عنصر واحد أو عدة عناصر أو الكل أو عدم تحديد أي عنصر من القائمة.
تستخدم قائمة خانات الاختيار عندما تريد السماح للمستخدمين بتحديد أي عدد من العناصر من القائمة، وليس هناك سبب يجعلك تعتقد بأن تحديد الكل سيكون لازماً بنسبة كبيرة (كما سنرى في خانات الاختيار المتداخلة). لعلّ أبرز مثال على استخدام قائمة خانات الاختيار هي تطبيقات توصيل الطعام. في الصورة أدناه قائمة مربعات الاختيار من أحد التطبيقات، وتُظهر الخيارات المتاحة للمستخدم فيما يريد إضافته من مكونات على الطبقة العلوية من وجبة البيتزا.
قوائم مربعات الاختيار المتداخلة (Nested Checkboxes)
يمكنك رؤية مربعات الاختيار المتداخلة بشكل مربع اختيار أصلي متبوعاً بقائمة فرعية من مربعات الاختيار الفرعية، وهو ما يوفر للمستخدم خيارات إضافية مختلفة. على سبيل المثال: يمكن للمستخدم تحديد خانة الاختيار الأصلية، وهذا سيؤدي أيضاً إلى تحديد جميع خانات الاختيار الفرعية. وبالمثل إن إلغاء تحديد خانة الاختيار الأصلية سيلغي تحديد جميع خانات الاختيار الفرعية. بالإضافة إلى ذلك، يمكن للمستخدم تحديد أي من خانات الاختيار التابعة (الفرعية) بشكل مستقل، وعند تحديد بعض مربعات الاختيار الفرعية وليس كلها، تظهِر خانة الاختيار الأصلية حالة “غير محددة”، ويشار إليها عادةً بواصلة (-).
إذاً، يمكنك تمييز ثلاث حالات لمربعات الاختيار المتداخلة:
- عند تحديد خانة الاختيار الأصلية وهو ما يؤدي لتحديد جميع الخانات الفرعية.
- عدم تحديد خانة الاختيار الأصلية ما يعني عدم تحديد أي من الخانات الفرعية.
- وأخيراً، تحديد بعض الخانات الفرعية وظهور علامة الواصلة (-) في مربع خانة الاختيار الأصلية.
الفرق بين مربعات الاختيار (Checkboxes) وحقول الاختيار البديلة (Alternative Input Fields)
في التصاميم الرقمية غالباً ما يمكنك اختيار العديد من العناصر من قوائم مربعات الاختيار المهم أن تعرف ماذا تريد وأيها المناسب لاحتياجاتك. وقد عرفنا في السطور السابقة ما هي خانات الاختيار وأنواعها وكيف تستخدم كلّ منها. لكن بالنسبة لحقول الاختيار البديلة فهي مختلفة بعض الشيء. يمكنك تسميتها أزرار الاختيار (Radio buttons)، وتعمل كالتالي: من بين قائمة الأزرار الموجودة، يمكنك الضغط واختيار عنصر واحد فقط لا أكثر. إذا قمت باختيار أحد العناصر، ثم جرّبت اختيار عنصر آخر غيره من نفس القائمة (أي اختيارهما سوياً) فستلاحظ أن ذلك غير ممكن، وسيؤدي إلى إلغاء تحديد العنصر المحدد مسبقاً على الفور. وهذا هو الاختلاف الرئيس بين التصميمين.
إليك مثال يوضح الفرق:
إرشادات لسهولة استخدام مربعات الاختيار
إليك بعض النصائح التي تسهّل عليك تحديد نوع مربع الاختيار الواجب استخدامه والطريقة الأمثل لاستخدامه:
استخدم أشكال التصاميم القياسية المتّفق عليها عند تصميم مربعات الاختيار
يتوقع المستخدمون أن تبدو خانات الاختيار وكأنها مربعات كالتي نعرفها (مع أو بدون زوايا مستديرة) مع علامة اختيار للتحقق من العنصر المحدد. يجب على المصممين الالتزام بهذه الأشكال المرئية لأنها كالقانون بالنسبة للمستخدم وسيتشتّت عند تغيير التصميم وذلك لن يؤدي إلى تجربة جيدة. لا تستخدم الدوائر أبداً كمربعات اختيار فقد يخلط المستخدم ببساطة بين خانات الاختيار وأزرار الاختيار لذا تجنَّبها.
احرص أن تكون تسمية المربع قابلة للتحديد معه أيضاً
لا تصعّب المهمة على المستخدم وتجعله ينقر على المربع الصغير جداً لتحديد خياره. بل الأفضل تضمين محيط (مستطيل مثلاً) حول مربع الاختيار بحيث يشمل التسمية أيضاً واجعل المحيط كاملاً قابل للنقر ليُصبح هدفاً سهلاً لإصبع المستخدم (اجعل الأبعاد لا تقلّ عن 1cm*1cm).
لاحظ في تصميم تطبيق توصيل الطعام أدناه كيف راعى المصمم مساحة واسعة تحيط بالمربعات وتسميتها. واستخدم خطوطاً أفقية للإشارة بصرياً إلى أن التصنيفات ومربعات الاختيار قابلة للتحديد سوياً.
حاول استخدام عناوين وتسميات إيجابية لخانات الاختيار
تأكد من صياغة جميع بيانات التسمية لتظهر بشكل إيجابي. تجبر العبارات ذات الصياغة السلبية المستخدمين على التفكير في بشكل سلبي لاإرادياً مما يؤدي إلى حدوث أخطاء أثناء الاختيار. على سبيل المثال، في الصورة أدناه، عندما يتم إلغاء تحديد العنصر “لا ترسل لي تحديثات تسويقية” فإن المستخدم قد يتشتت لوهلة ما بين أن يحدد الخيار لأنه لا يريد بالفعل التحديثات أم لا يحدد الخيار لأنه لا يريد تحديثات. فإن وقوع المستخدم في التفكير الصعب قد يجعله يفعل ما لا يريده عن غير قصد. لذا تجنّب السلبية المزدوجة في التسميات.
في قوائم الاختيار وخانات الاختيار المتداخلة:
- اعرض العناصر بترتيب منطقي ومتوَقّع لمساعدة المستخدم في سهولة الفهم والاختيار.
- يعلم أغلبية المستخدمين أنه يمكنهم تحديد عدة عناصر من القائمة عندما تكون قائمتك متداخلة. لذا احرص على استخدام مربعات القائمة المتداخلة مع خيار (تحديد الكل) عندما تكون متأكداً بنسبة جيدة أن الأغلبية سيختارونه.
- حدّد بوضوح أي متطلّبات تتعلق بالحد الأدنى أو الأقصى لعدد الخانات المسموح اختيارها. على سبيل المثال: هل يحتاج المستخدمون إلى تحديد عنصر واحد على الأقل من القائمة؟ أو اختيار ما لا يزيد عن 3؟ اذكر بوضوح أي متطلبات في التعليمات وقدم تعليقات مرئية في الوقت الفعلي عند استيفاء المستخدم المتطلبات أو انتهاكها.
- اعرض قائمة الاختيار بشكل عامودي. يعرض بعض المصممين عناصر خانة الاختيار أفقياً لتوفير المساحة الرأسية على الصفحة. لكن يؤدي هذا الأسلوب إلى تقليل إمكانية مسح المعلومات بسرعة بالنظر ويجعل من الصعب أحياناً محاذاة التسميات مع مربع الاختيار المناسب.
في مربعات الاختيار المستقلة:
- اجعل الوضع الافتراضي المرئي للمربع هو “غير محدد” وليس “محدد” كي لا تظهر بمظهر المخادع للمستخدم. مثلاً، في العروض الترويجية، يقوم بعض المصممين بتعيين الحالة الافتراضية لمربع الاختيار مسبقاً على “محدد” ما يجبر المستخدم على اتخاذ إجراء إلغاء تحديد المربع لإلغاء الاشتراك. وهو أمرٌ يثير استياء المستخدمين لأنه يظهر لهم كفَخّ.
- تأكد من أن حالة الاختيار المستقلة بديهية بالفعل ولا تحتاج التفكير لاختيارها. مثل عندما تستخدم مربع اختيار مستقل للموافقة على الشروط والأحكام، فالموافقة هنا أمرٌ بديهيّ.
هناك المزيد لتعرفه بالتأكيد حول مربعات الاختيار وكيفية استخدامها والتصاميم المناسبة لكل منها، ولكن لا يسعنا ذكر كل المعلومات هنا لذا للمزيد احجز مقعدك في دوراتنا التدريبية.
الأسئلة الشائعة
ما هو الحجم المثالي لمربع الاختيار؟
تأتي خانات الاختيار بأربعة أحجام مختلفة: صغيرة ومتوسطة وكبيرة وكبيرة جداً. الحجم المتوسط هو الخيار الافتراضي والأكثر استخداماً. يمكن استخدام الأحجام الأخرى، على سبيل المثال، لإنشاء تسلسل هرمي بحسب أهمية البيانات داخل الصفحة.
ما هو الهدف من استخدام مربعات الاختيار؟
يستخدم مربع الاختيار لتحديد عناصر من القائمة أو إلغاء تحديدها. ويمكن استخدامه لتحديد عنصر واحد أو عدة عناصر يمكن للمستخدم الاختيار من بينها.
