التفاعل والمدخلات

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

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

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

ويتم توحيد هذه العناصر بنظام التصميم لضمان تحقيق التناسق على مختلف أقسام الموقع أو التطبيق أو المنصة.

الأزرار

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

على الأزرار أن تكون

• ذات تصميم مميز
• ذات وظيفة واضحة
• في المكان والوقت الصحيحين

يختلف نوع الزر وفقًا لوظيفته، والتي يجب الالتزام بها لوضع الزر الصحيح في السياق الصحيح. وفيما يلي الأنواع المختلفة للأزرار الموجودة هنا بنظام التصميم

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

استخدام الأزرار

الأزرار ذات الأيقونات

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

محتوى الأزرار

تستخدم نصوص الأزرار الأفعال التي تساعد المستخدم على اتخاذ إجراء أو فعل، مع الحرص على وضوح وظيفة الزر للمستخدم.

• على المستخدم أن يتعرَّف على الفعل أو الخطوة المرتبطة بالزر أو الرابط بشكلٍ مسبق.
• على نص الزر أن يعكس وظيفته بما لا يزيد على أربع كلمات.
• التزم بالمصطلحات المتعارف عليها بنصوص الأزرار لضمان إلمام المستخدم بها.

الأزرار كاملة العرض

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

الأزرار العائمة FAB

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

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

جوانب للوضع في الاعتبار

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

تحديات تحقيق إمكانية الوصول

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

خطوات مقترحة

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

وينصح بوضع الأزرار العائمة بالجانب الأيمن السفلي من الصفحات الإنجليزية والجانب الأيسر السفلي بالصفحات العربية.

الروابط

تستخدَم الروابط بشكل خاص لتوجيه المستخدم بين الصفحات الداخلية والخارجية للموقع أو التطبيق ولا تُعطِ للمستخدم الملاحظات بعد اتخاذ أي فعل أو إجراء.

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

الروابط النصية

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

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

عناصر الإدخال والنماذج

تتكون النماذج من عناصر الإدخال والاختيار التي تختص بجمع المعلومات باختلاف أنواعها.

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

اختر العنصر الصحيح

زر الاختيار

إذا كان أمام المستخدم خمسة اختيارات أو أقل، فإنه ينصَح باستخدام زر الاختيار

مربع الاختيار

ينصَح باستخدام <select> في حالة وجود أكثر من خمسة اختيارات

مربع الاختيار

اجعل الأفضلية دائمًا لمربعات الاختيار قبل حقول الخيارات المتعددة التي ينصَح بتجنب استخدامها. أما إذا زاد عدد الخيارات على 10، فعليك إضافة خاصية «اختيار الكل».

طبيعة المُدخَلات

على نوع المدخل أن يناسب نوع المحتوى المطلوب، فإذا أردت أن تطلب من المستخدم إدخال رقم هاتفه، فعلى نوع المدخل أن يكون ` type="tel" `، وإذا أردت منه أن يدخل بريده الإلكتروني، فعلى نوع المدخل أن يكون ` type="email" `.

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

زر التبديل

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

المدخلات الإلزامية

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

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

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

تقليل محتوى النموذج

قد يؤدي طلب الكثير من البيانات من المستخدم إلى إزعاجه أو تركه النموذج إذا كان طويلًا أو معقدًا.

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

ولكن يجب الحرص على تصميم هذه الخطوات بدقة شديدة.

• تجنب زيادة عدد الخطوات على 3، فإذا تطلَّب النموذج أكثر من ذلك، فاحرص على توزيع الحقول بين صفحات النموذج، حتى وإن زادت الحقول على ثمانية.
• على المستخدم التعرّف من البداية على كل البيانات المطلوبة لتجنب حدوث أي أخطاء في التحقق بالخطوة الثانية أو الثالثة، مما قد يتسبب في إعادة ملء المستخدم للبيانات من البداية.

تطبيق الهوية الرقمية

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

يحث «وعد حكومة دولة الإمارات لخدمات المستقبل» كافة الجهات الحكومية الاتحادية على تطبيق الهوية الرقمية كوسيلة موحدة لتسجيل الدخول للتحقق من هوية المستخدم الراغب في الاستفادة من الخدمات الرقمية التي توفرها حكومة الإمارات العربية المتحدة.

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

الانتقال إلى موقع الهوية الرقمية