قائمة مراجعة تصميم UX

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

يرجى ملاحظة أنه لا تنطبق جميع هذه النقاط على جميع المنتجات ، ولكن بشكل عام ، هذه هي الأكثر صلة بالموضوع.

تصميم تفاعلي

01 - الأفعال المتكررة أو الأنشطة المتكررة تشعر بأنها سهلة

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

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

02 - يمكن للمستخدمين التعافي من الأخطاء بسهولة

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

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

03 - يتم دعم المستخدمين بشكل كافٍ وفقًا لمستوى خبرتهم

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

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

04 - الوصول إلى المساعدة لا يعيق تقدم المستخدم

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

كيفية اختباره: قم بإنشاء سيناريوهات اختبار حيث سيطلب المستخدمون المساعدة ومعرفة ما إذا كان سير العمل والتقدم قد توقف أم لا.

التصميم المرئي

05 - لا يزيد عن ثلاثة ألوان أساسية

سبب الأهمية: هذه ليست قاعدة ثابتة - وفي بعض الأحيان ، في حالات محددة ، يمكن استخدام أكثر من ثلاثة ألوان أساسية. ومع ذلك ، ضع في اعتبارك أن الجمع بين ثلاثة ألوان أمر صعب بالفعل ، لذلك في معظم الحالات ، يجب تجنب أكثر من ذلك.

كيفية اختباره: تأكد من أن لوحة الألوان التي استخدمتها عند تصميم المنتج لا تحتوي على أكثر من ثلاثة ألوان أساسية.

06 - لا يُستخدم اللون وحده للتعبير عن التسلسل الهرمي أو المحتوى أو الوظيفة

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

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

07 - التسلسل الهرمي المرئي يوجه المستخدم إلى الإجراء المطلوب

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

كيفية اختباره: افهم كيف تعمل التدفقات داخل منتجك وما إذا كانت إجراءاته الرئيسية يتم تحفيزها من خلال التسلسل الهرمي المرئي.

08 - العناصر الموجودة أعلى التسلسل الهرمي المرئي هي الأكثر أهمية

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

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

09 - الإجراء الأساسي يختلف بصريًا عن الإجراءات الثانوية

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

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

10 - لا يتم تلخيص العناصر التفاعلية

سبب الأهمية: عند استخدام منتج جديد ، يأتي المستخدمون بمجموعة من التوقعات المبنية من الخبرة السابقة باستخدام المنتجات الرقمية الأخرى - على سبيل المثال ، ما هي الأزرار التي يجب أن تبدو وكيف ينبغي أن تعمل. تحقيق هذه التوقعات يعني أنك لا تخلق احتكاكات غير ضرورية.

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

11- تأكيد تقديم الاستمارة بشكل مميز بصرياً

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

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

12 - رسائل التنبيه متسقة

التعريف : رسائل التنبيه لها نفس النمط المرئي وتظهر في نفس الموقع بنفس الطريقة.

سبب الأهمية: وجود رسائل تنبيه متسقة يعني أن المستخدم سيتفهم دائمًا ما يستحق الاهتمام على الفور. عدم الاتساق مع التنبيهات يعني عبئًا عقليًا إضافيًا في كل مرة ينبثق فيها تنبيه جديد.

كيفية اختباره: تأكد من أن رسائل التنبيه لها نفس النمط المرئي وأن مواضعها متشابهة أو متطابقة.

13 - رسائل التنبيه مميزة بصريًا

سبب الأهمية: من خلال التأكد من تمييز رسائل التنبيه بوضوح عن عناصر الشاشة الأخرى ، يمكن للمستخدم أن يلاحظها و / أو يتصرف بناءً عليها.

كيفية اختباره: بعد التحقق من التمايز المرئي بنفسك ، شاهد كيف يتفاعل المستخدمون مع رسائل التنبيه في اختبار قابلية الاستخدام.

هندسة المعلومات

14- التنقل متناسق

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

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

15 - مجال للنمو

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

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

الطباعة

16 - لا يتم استخدام أكثر من عائلتين متميزتين

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

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

17 - حجم الخطوط المستخدمة لمحتوى النص 12 بكسل على الأقل

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

كيفية اختباره: تحقق من كل المحتوى الخاص بك وتأكد من أن حجم الخطوط المستخدمة لها لا يقل عن 12 بكسل.

18 - احتفظ بالكلمات الكبيرة للتسميات أو الرؤوس أو الاختصارات

سبب الأهمية: من المعروف أن الحد من استخدام الكلمات الكبيرة يسهل الفهم - فهي أقل ثقلًا بصريًا ويسهل على المستخدم استيعابها. يجب استخدامه خصيصًا للتأكيد أو للحالات المحدودة للغاية - على سبيل المثال الاختصارات.

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

19 - يتم استخدام أنماط أو مجموعات خطوط مختلفة لفصل المحتوى عن عناصر التحكم

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

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

20 - يميز حجم / وزن الخط بين أنواع المحتويات

لماذا يهم: إنه يؤثر بشكل كبير على قابلية القراءة والفهم. يؤدي التمييز الواضح بين العناوين والعناوين الفرعية والفقرات إلى تقليل الحمل العقلي الزائد في هضم هذا المحتوى. كما أن لها فوائد بصرية - فهي تبدو أفضل وتشعر بأنها أفضل.

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

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

21- القرب والمحاذاة

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

كيفية اختباره: ابحث عن العناصر المتشابهة في الوظائف وتحقق مما إذا كانت مجمعة معًا (عند الإمكان).

22 - مؤشر التقدم لسير العمل متعدد الخطوات

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

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

23 - عناصر المقدمة (مثل المحتوى وعناصر التحكم) يسهل تمييزها عن الخلفية

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

كيفية اختباره: التقط شاشة لمنتجك وطمس Gaussian blur الذي لقطة الشاشة بنصف قطر يتراوح من حوالي 3 بكسل إلى 5 بكسل. عند النظر إلى النتيجة ، هل يمكنك بسهولة معرفة ما يوجد في المقدمة وما يوجد في الخلفية؟

تهانينا على تصفح القائمة! ومع ذلك ، هذه ليست النهاية.

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