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

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

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

تصميم شامل

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

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

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

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

الشخصيات

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

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

دمج ذوي الاحتياجات الخاصة

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

"ميريل إيفانز" من فعالية ID24 الحوارية بعنوان Deaf Tech: Travel Through Time من الماضي إلى المستقبل.

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

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

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

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

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

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

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

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

الإرشادات الإرشادية لإمكانية الوصول

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

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

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

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

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

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

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

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

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

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

الأمثلة التوضيحية التالية للتصميم مأخوذة من مجموعة التعليقات التوضيحية لإمكانية الوصول من Indeed.com لـ Figma.

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

تتضمن بعض المجالات التي يجب مراعاتها للتعليقات التوضيحية لإمكانية الوصول ما يلي:

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