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

فكِّر في موقعك الإلكتروني أو تطبيقك المفضّل. ما الذي يجعله مفضّلاً لديك؟ الآن، فكِّر في موقع إلكتروني أو تطبيق لا يعجبك. ما الذي لا يعجبك فيه؟ قد تختلف طريقة تفاعل المستخدمين مع تصميمك وتجربتهم على موقعك الإلكتروني وتطبيقك.

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

تصميم شامل

كيف يمكننا تلبية جميع احتياجات المستخدمين المحتملة في آنٍ واحد؟ هنا يأتي دور التصميم الشامل. يستخدم التصميم الشامل نهجًا يركّز على الإنسان ويجمع بين الشمولية وسهولة الاستخدام وإمكانية الوصول في تصميم واحد.

مخطّط فنّ حيث تلتقي سهولة الاستخدام والشمولية وإمكانية الوصول في المنتصف كالتصميم الشامل

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

هناك سبعة مبادئ للتصميم الشامل تركّز على سهولة الاستخدام:

  1. توفير تجربة مماثلة: احرص على أن توفّر واجهتك تجربة مماثلة للجميع، كي يتمكّن المستخدمون من إنجاز المهام بالطريقة التي تناسب احتياجاتهم بدون التأثير سلبًا في جودة المحتوى.
  2. مراعاة الظروف: تأكَّد من أنّ واجهتك تقدّم تجربة قيّمة للمستخدمين، بغض النظر عن ظروفهم.
  3. الحفاظ على الاتساق: استخدِم اصطلاحات مألوفة وطبِّقها بطريقة منطقية.
  4. منح المستخدمين إمكانية التحكّم: تأكَّد من أنّ المستخدمين يمكنهم الوصول إلى المحتوى والتفاعل معه بالطريقة التي يفضّلونها.
  5. توفير خيارات: ننصحك بتوفير طرق مختلفة للمستخدمين لإكمال المهام، خاصةً تلك المعقّدة أو غير العادية.
  6. تحديد أولويات المحتوى: يمكنك مساعدة المستخدمين في التركيز على المهام والميزات والمعلومات الأساسية من خلال ترتيب هذه العناصر حسب الأولوية ضمن المحتوى والتصميم.
  7. إضافة قيمة: فكِّر في الغرض من الميزات وأهميتها وكيفية تحسينها لتجربة المستخدمين المختلفين.

الشخصيات

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

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

تضمين الأشخاص ذوي الإعاقة

قد تكون الإعاقات دائمة أو مؤقتة أو ظرفية. يمكن أن تؤثر هذه الإعاقات في اللمس والرؤية والسمع والكلام.
طيف الشخصيات من مجموعة أدوات Microsoft الشاملة 101

"الناس مختلفون. يمكنني التحدث فقط من خلال تجربتي. عندما تقابل شخصًا أصمًا، تكون قد قابلت شخصًا أصمًا واحدًا، وليس جميعنا".

"ميريل إيفانز" من مؤتمر ID24 تكنولوجيا الصم: رحلة عبر الزمن من الماضي إلى المستقبل

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

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

الشخصية: جين بينيت
اطّلِع على مثال على شخصية افتراضية تتوافق مع حالات استخدام محدّدة.
جين سميث طويلة القامة بشعر طويل داكن، وترتدي قميصًا رماديًا بأكمام طويلة وجينز
  • الاسم: جين بينيت
  • العمر: 57 عامًا
  • الموقع الجغرافي: إسكس، المملكة المتحدة
  • الوظيفة: مهندس تجربة المستخدم
  • الإعاقة: رعشة اليد الناتجة عن مرض باركنسون المبكر (YOPD)
  • الأهداف: استخدِم ميزة "تحويل الصوت إلى نص" لتسهيل إضافة اقتراحات الرموز البرمجية، والعثور على معدات ركوب الدراجات على الإنترنت بأقل عدد من ضغطات المفاتيح.
  • نقاط الإحباط: المواقع الإلكترونية التي لا تتوافق مع الاستخدام من خلال لوحة المفاتيح فقط، والتطبيقات المصمَّمة بمساحات صغيرة للتفاعل باللمس

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

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

ألعاب محاكاة الإعاقة

يجب توخّي الحذر الشديد عند استخدام برامج محاكاة الإعاقة من أجل محاكاة شخصياتك أو استكمالها.

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

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

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

مارك ريكوبونو، رئيس الاتحاد الوطني للمكفوفين

الإعدادات الإرشادية لتسهيل الاستخدام

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

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

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

  1. طُرق التفاعل وأساليبه: يمكن للمستخدمين التفاعل بكفاءة مع النظام باستخدام طريقة الإدخال التي يختارونها (مثل الماوس أو لوحة المفاتيح أو اللمس أو غير ذلك).
  2. التنقّل وتحديد الاتجاه: يمكن للمستخدمين التنقّل والعثور على المحتوى وتحديد موقعهم الجغرافي في أي وقت داخل النظام.
  3. البنية والدلالات: يمكن للمستخدمين فهم بنية المحتوى على كل صفحة ومعرفة كيفية التفاعل مع النظام.
  4. منع الأخطاء والحالات: تحتوي عناصر التحكّم التفاعلية على تعليمات دائمة وواضحة للمساعدة في منع حدوث الأخطاء، وتزويد المستخدمين بحالات أخطاء واضحة تشير إلى المشاكل وكيفية حلّها عند حدوثها.
  5. التباين وسهولة القراءة: يمكن للمستخدمين التمييز بين النص والمعلومات الأخرى المهمة وقراءتها بسهولة.
  6. اللغة والمقروئية: يمكن للمستخدمين قراءة المحتوى وفهمه بسهولة.
  7. إمكانية التوقّع والاتساق: يمكن للمستخدمين توقّع الغرض من كل عنصر. من الواضح كيف يرتبط كل عنصر بالنظام ككل.
  8. التوقيت والحفظ: يُمنح المستخدمون وقتًا كافيًا لإكمال مهامهم ولا يفقدون المعلومات إذا انتهى الوقت المخصّص لهم (أي الجلسة).
  9. الحركة والوميض: يمكن للمستخدمين إيقاف العناصر المتحركة أو الوامضة أو التي تتضمّن رسومات متحرّكة على الصفحة. ويجب ألا تتسبّب هذه العناصر في تشتيت انتباه المستخدمين أو إلحاق أي ضرر بهم.
  10. بدائل مرئية وسمعية: يمكن للمستخدمين الوصول إلى بدائل مستندة إلى نص لأي محتوى مرئي أو سمعي ينقل معلومات.

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

في ما يلي مثال على مراجعة إرشادية بشأن سهولة الاستخدام لنقطة التحقّق الخاصة بالتنقّل وتحديد الاتجاهات:

نقاط التحقّق للتنقّل والاستدلال ممتاز (+نقطتان) اجتياز (+1 نقطة) حالات الفشل (-1 نقطة) غير متوفّر (0 نقطة)
هل تم ضبط مؤشر واضح ومرئي على جميع العناصر النشطة عند التركيز عليها؟
هل تحتوي الصفحة على نص عنوان ذي مغزى يتضمّن معلومات خاصة بالصفحة أولاً؟
هل عنصر عنوان الصفحة وعلامة H1 متطابقان أو متشابهان؟
هل هناك عناوين ذات صلة بكل قسم رئيسي؟
هل يتم تحديد الغرض من الروابط من نص الرابط وحده أو من سياقه المباشر؟
هل يتم توفير رابط تخطٍّ في أعلى الصفحة ويتم عرضه عند التركيز عليه؟
هل يسهّل تنظيم عناصر التنقّل عملية تحديد الاتجاه؟

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

التعليقات التوضيحية حول تسهيل الاستخدام

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

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

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

أمثلة توضيحية للتصميم من مجموعة تعليقات توضيحية حول تسهيل الاستخدام من Indeed.com في Figma.

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

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

في ما يلي بعض المجالات التي يجب مراعاتها عند إضافة تعليقات توضيحية لتسهيل الاستخدام:

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