تصميم واجهة المستخدم – القواعد الأساسيّة

Nadine Kahaleh , May 02 2017

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

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

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

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

وجهة نظر نيلسن وموليش حول المبادئ التوجيهيّة لواجهة المستخدم

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

في ما يلي بعض الأدبيات المتعمّقة حول هذه الركائز الثلاثة، قبل الانتقال إلى القواعد الفعليّة:

تنعكس قابلية الاستخدام في ألفة التصميم وفعاليته - هل المنتج مصمّم بشكلٍ جيّد؟ هل يسمح للمستخدم بتحقيق المهمّة التي كان يستهدفها؟ هل سيذكر المستخدم مظهر المنتج وعمله؟

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

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

من GIPHY

بعد شرح هذا الأمر بالتفصيل، إليكم القواعد العشرة التي قام كلّ من نيلسن وموليش بتطويرها في التسعينات والتي لا تزال صالحة اليوم:

  • رؤية حالة النظام - يحتاج المستخدمون إلى استيعاب ما تؤدّي إليه أعمالهم على نظامك؛ وينبغي دائمًا أن يكونوا على علم بعمليات النظام.

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

  • تحكّم المستخدم وحرّيته – يجب منح مستخدميك مساحة خاصّة على الواجهة؛ وقد يكون ذلك في زرّ التراجع عن الوظيفة مثلاً.

  • التناسق والمعايير - تأكّد من الحفاظ على عناصر الرسم والمصطلحات في الواجهة. ويجب على التسمية المعيّنة في شريط القوائم ترجمة المفهوم نفسه في كلّ مكان على الموقع.

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

  • التقدير بدلاً من التذكّر - الكلمات الرئيسية هنا هي الحمل المعرفي والذاكرة على المدى القصير. يجب أن تتّجه استراتيجيّتك نحو تقليل العناصر على الواجهة (الحمل المعرفي)، والحدّ منها إلى أولئك الذين يتّجهون نحو المهام. يمكن صرف انتباه الإنسان بسهولة، ولا يمكن للذاكرة البشرية تسجيل أكثر من 5 عناصر في وقتٍ واحد.

  • المرونة وكفاءة الاستخدام - إمنَح عملائك القدرة على تخصيص واجهتك بالطريقة التي تناسبهم.

  • التصميم الجمالي والحدّ الأدنى من التصميم – ألقِ نظرة على تصميم جوجل. ماذا تلاحظ؟ البساطة. كلّما كان التصميم أبسط، كان أقلّ فوضى وكانت المعلومات ذات صلة أكثر.

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

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

    banners5

رؤية شنايدرمان لتصميم واجهة المستخدم

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

  • التماسك - حافِظ على قابلية توقّع واجهتك؛ ينظر البشر إلى ما يتوقّعونه.

  • الاختصارات – خفِّف من الذاكرة واجعَل بعض الوظائف مؤتمتة وسريعة. هذا ما يظهر في ملفات تعريف الارتباط التي تحفظ المعلومات الشخصية في كلّ حالة.

  • الحوار – قُم بإبلاغ المستخدم عن حالة التطبيق؛ وتُعتبر رسائل التحقّق من الصحّة مثالاً جيّدًا في هذا المجال.

  • التحكّم – إسمَح للمستخدمين بتعديل إجراءاتهم على نظامك.

  • القرب – قُم بتحديد أولويات معلوماتك وفقًا لأهمية وظائفها؛ قُم بإدارة عناصرك وتحديد موقعها بطريقة ذكية.

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

  • البساطة – إنّ الواجهات المعقّدة المشبعة بالعناصر تُنفِر المستخدم. حافِظ على بساطة الوظائف ووضوحها!

  • الجاذبية – تحلَّ بالسحر والجذابية، واستخدِم الألوان الباردة والدافئة.

    56cc0dfcc85ec

المعلومات منقولة عن "Interaction Design Foundation"

مبادئ علم نفس واجهة المستخدم

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

  • مدّة اهتمامنا محدودة وذاكرتنا ليست كاملة – وظيفة واحدة لكلّ صفحة.

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

  • نفكّر في مهامنا، وليس أدواتنا - المعلومات الموجّهَة من المهام؛ لا يريد البشر التفكير، بل يريدون تحقيق أهدافهم من دون المزيد من الاستكشاف.

  • نرى المعلومات المنظّمة بطريقة أسهل ونتابع التسلسل الهرمي البصري للوصول إلى هدفنا - يجب توضيح الوظائف الأساسيّة.

  • نؤيّد التفكير الاستقرائي بدلاً من الحسابيّ - تحديد البيانات المطلوبة مسبقًا للانتقال إلى الإجراء التالي.

قائمة التحقّق لكلّ مصمّم لواجهات المستخدم

إذًا، كمصمّم لواجهات المستخدم، إليك الأسس التي يجب اتّباعها للحصول على تجربة مستخدم ناجحة:

من GIPHY

  • حافِظ على تصاميم معقولة - يجب على المستخدم تصوّر الغرض من عناصرك وفهمها.

  • لا تخَف من التصاميم المفرطة - تحدَّث بلغة العالم الحقيقي واجعَل عناصرك مشابهة للحياة الواقعية.

  • تجنّب الإلهاء وقُم بتطوير عناصر موجّهة نحو المهمّة - أرفُض ميزة المتطلّبات، ولا تشبِع واجهتك بالمعلومات غير ذات الصلة.

  • فكِّر في المستخدمين الجدد وذوي الخبرة.

  • خذ دائمًا قصّة المستخدم بعين الاعتبار – قُم بإرضاء الدورة العقلية للمستخدم.

  • تواصَل مع المستخدمين وامنحهم الملاحظات عن أعمالهم.

  • كن واضحًا ومتّسقًا.

  • إمنَح إمكانيّة التحكّم للمستخدم - لا تقم بتصميم واجهات محدَّدة المعالم، واضمَن التحلّي بالمرونة.

  • حدّد أولویات العناصر وخفِّفها – قُم بالتمييز بین الإجراءات الأولیة والثانویة.

  • قُم بتصميم غير مرئي – ليس من الضروري للتصميم الناجح أن يظهر في وجه المستخدم. يمكنه أن يكون غير مرئيّ، ولكن يفي بالغرض.

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

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

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

من GIPHY

الاختبار هو الحلّ

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

حظًّا موفّقًا!

Comments   

Catch up on what you've missed