تصميم واجهة مستخدم يُلهم ويُحفّز

التصميم المتمركز على المستخدم

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

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

من تصميم افتراضي إلى تجربة حقيقية

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

التقنيات المساعدة لتصميم واجهة مستخدم يُلهم ويُحفّز

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

لنبدأ. أولاً

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

أولًا، دعونا نتناول تقنية تعديل الألوان.

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

تقنية تعديل الألوان تساعد أيضًا أي شخص قد يعاني من توتر العين عند عرض الشاشات في الظلام أو في وقت النهار عندما يكون الشمس تخلق توهجًا مكثفًا.

الآن دعونا نتحدث عن التحكم بالصوت وأجهزة التبديل.

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

الآن، دعونا نتحدث عن قراء الشاشة.

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

النص البديل مفيد للحصول على سياق عندما يفشل عرض صورة في التحميل.

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

دعوني أريكم.

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

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

التفكير في المستخدمين الجدد للتكنولوجيا

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

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

كيف يمكننا جعل واجهات متعددة اللغات؟

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

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

يمكنكم التواصل مع أكاديمية على نجار للتصميم التفاعلى وبناء السيناريو التعليمى

ويمكنكم متابعة السلسلة من خلال الرابط للانتقال الى الدرس التالى

أهم الكلمات المفتاحية

1. تصميم واجهة مستخدم:

• • تصميم UX

• • تجربة المستخدم

• • تصميم تفاعلي

• • واجهة المستخدم

• • UI/UX

2. تصميم مُركز على المستخدم:

• • تصميم مُوجه نحو المستخدم

• • تصميم يركز على الإنسان

• • تصميم مُركّز على الاحتياجات

• • تصميم مُبتكر

3. تصميم شامل:

• • تصميم مُتاح للجميع

• • تصميم شامل للجميع

• • تصميم مُتكافئ

• • تصميم عادل

4. إمكانية الوصول:

• • تقنيات مساعدة

• • تقنية تعديل الألوان

• • تحكم بالصوت

• • قراءة الشاشة

• • نص بديل

5. أمثلة:

• • دراسات حالة

• • أفضل الممارسات

• • إرشادات

• • مبادئ توجيهية

6. أدوات:

• • برامج

• • تطبيقات

• • مكتبات

• • إضافات

7. مجالات ذات صلة:

• • تصميم مُدمج

• • تصميم مُوجه نحو العدالة

• • تصميم مُستدام

8. مصطلحات:

• • إمكانية

• • تصميم شامل

• • تصميم مُتكافئ

9. شخصيات:

• • لاري بيج

• • Google

10. مواضيع ذات صلة:

• • التكنولوجيا

• • الإنترنت

• • المجتمع الرقمي

• • التنمية المستدامة

• • تصميم مُبتكر

• • تصميم مُستدام

• • تصميم مُركّز على البيانات

• • تصميم مُركّز على القصة

• • تصميم مُركّز على العلامة التجارية

1. تصميم واجهة مستخدم مُركز على احتياجات محددة:

• • تصميم واجهة مستخدم لمتجر إلكتروني لبيع الملابس

• • تصميم واجهة مستخدم لتطبيق هاتف ذكي لطلب الطعام

• • تصميم واجهة مستخدم لموقع ويب تعليمي

• • تصميم واجهة مستخدم لمنصة تواصل اجتماعي

• • تصميم واجهة مستخدم لحجز رحلات جوية

2. حلول تصميم واجهة مستخدم لمشاكل محددة:

• • تصميم واجهة مستخدم سهلة الاستخدام لكبار السن

• • تصميم واجهة مستخدم مُتاحة للأشخاص ذوي الإعاقة

• • تصميم واجهة مستخدم لزيادة معدلات التحويل

• • تصميم واجهة مستخدم لتحسين تجربة المستخدم

• • تصميم واجهة مستخدم لتقليل وقت تحميل الصفحة

3. تقنيات تصميم واجهة مستخدم محددة:

• • استخدام تقنيات التصميم المسطح في تصميم واجهة المستخدم

• • استخدام مبادئ تصميم لغة المواد في تصميم واجهة المستخدم

• • استخدام تقنيات التصميم المُستجيب في تصميم واجهة المستخدم

• • استخدام تقنيات التصميم المُتكافئ في تصميم واجهة المستخدم

• • استخدام تقنيات التصميم المُركز على المحتوى في تصميم واجهة المستخدم

4. أدوات تصميم واجهة مستخدم محددة:

• • استخدام Figma لتصميم واجهة مستخدم

• • استخدام Sketch لتصميم واجهة مستخدم

• • استخدام Adobe XD لتصميم واجهة مستخدم

• • استخدام InVision لتصميم واجهة مستخدم

• • استخدام Proto.io لتصميم واجهة مستخدم

5. أمثلة محددة لتصميم واجهة مستخدم:

• • دراسة حالة لتصميم واجهة مستخدم لتطبيق هاتف ذكي ناجح

• • أفضل الممارسات لتصميم واجهة مستخدم لموقع ويب للتجارة الإلكترونية

• • إرشادات لتصميم واجهة مستخدم سهلة الاستخدام

• • مبادئ توجيهية لتصميم واجهة مستخدم مُتاحة

• • أمثلة على واجهات مستخدم مُصممة بشكل جميل

أهم الأسئلة المتعلقة بتصميم واجهة المستخدم المُركز على احتياجات المستخدم:

أسئلة عامة:

• • ما هو تصميم واجهة المستخدم المُركز على احتياجات المستخدم؟

• • لماذا يعدّ تصميم واجهة المستخدم المُركز على احتياجات المستخدم مهمًا؟

• • ما هي خطوات تصميم واجهة مستخدم مُركز على احتياجات المستخدم؟

• • ما هي بعض أفضل الممارسات لتصميم واجهة مستخدم مُركز على احتياجات المستخدم؟

• • كيف يمكنني اختبار تصميم واجهة مستخدم مُركز على احتياجات المستخدم؟

أسئلة حول عملية التصميم:

• • كيف يمكنني تحديد احتياجات المستخدمين؟

• • ما هي بعض طرق جمع بيانات المستخدم؟

• • كيف يمكنني تحليل بيانات المستخدم؟

• • كيف يمكنني إنشاء شخصيات مستخدم؟

• • كيف يمكنني تصميم واجهة مستخدم تلبي احتياجات جميع المستخدمين؟

أسئلة حول تقنيات التصميم:

• • ما هي تقنيات التصميم المسطح؟

• • ما هي مبادئ تصميم لغة المواد؟

• • ما هي تقنيات التصميم المُستجيب؟

• • ما هي تقنيات التصميم المُتكافئ؟

• • ما هي تقنيات التصميم المُركز على المحتوى؟

أسئلة حول الإمكانية:

• • ما هي الإمكانية؟

• • ما هو تصميم واجهة المستخدم المُتاح للجميع؟

• • ما هي بعض المبادئ التوجيهية لتصميم واجهة مستخدم مُتاح للجميع؟

• • كيف يمكنني جعل تصميم واجهة مستخدم مُتاحًا للأشخاص ذوي الإعاقة؟

• • ما هي بعض التقنيات المساعدة التي يمكن استخدامها لجعل تصميم واجهة مستخدم مُتاحًا للجميع؟

أسئلة حول الأدوات:

• • ما هي بعض أدوات تصميم واجهة المستخدم؟

• • ما هي أفضل أداة لتصميم واجهة مستخدم؟

• • كيف يمكنني استخدام Figma لتصميم واجهة مستخدم؟

• • كيف يمكنني استخدام Sketch لتصميم واجهة مستخدم؟

• • كيف يمكنني استخدام Adobe XD لتصميم واجهة مستخدم؟

أسئلة حول الأمثلة:

• • أين يمكنني العثور على أمثلة لتصميم واجهة مستخدم مُركز على احتياجات المستخدم؟

• • ما هي بعض أفضل الأمثلة لتصميم واجهة مستخدم مُركز على احتياجات المستخدم؟

• • كيف يمكنني تحليل تصميم واجهة مستخدم مُركز على احتياجات المستخدم؟

• • ما هي العوامل التي تجعل تصميم واجهة مستخدم مُركز على احتياجات المستخدم ناجحًا؟

• • ما هي الاتجاهات الحديثة في تصميم واجهة مستخدم مُركز على احتياجات المستخدم؟

• • ما هي التحديات التي تواجهها عند تصميم واجهة مستخدم مُركز على احتياجات المستخدم؟

• • كيف يمكنني قياس نجاح تصميم واجهة مستخدم مُركز على احتياجات المستخدم؟

• • ما هي أخلاقيات تصميم واجهة مستخدم مُركز على احتياجات المستخدم؟

• • كيف يمكنني استخدام تصميم واجهة مستخدم مُركز على احتياجات المستخدم لخلق تأثير إيجابي على العالم؟