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

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

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

التصميم الشامل

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

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

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

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

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

الشخصيات

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

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

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

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

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

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

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

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

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

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

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

ألعاب محاكاة العجز

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

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

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

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

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

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

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

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

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

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

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

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

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

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

التعليقات التوضيحية لتحسين إمكانية الاستخدام

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

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

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

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

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

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

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

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