قواعد تصميم الواجهات هي القواعد والأسس التي يمكنك اتباعها لتصميم واجهة المستخدم (UI)، تتعلق عملية تصميم واجهات المستخدم حول توقع ما قد يحتاج المستخدمون إلى القيام به والتأكد من أن الواجهة تحتوي على عناصر يسهل الوصول إليها وفهمها واستخدامها لتسهيل هذه الإجراءات. تجمع واجهة المستخدم بين المفاهيم من تصميم التفاعل والتصميم المرئي وهندسة المعلومات.
أصبح المستخدمون على دراية بعناصر الواجهة التي تعمل بطريقة معينة ، لذا حاول أن تكون متسقًا وقابلًا للتنبؤ في اختياراتك وتخطيطها. سيساعد القيام بذلك في إكمال المهمة والكفاءة وتحقيق الرضا.
ماذا يعني تصميم واجهة المستخدم؟
تصميم واجهة المستخدم (UI) هي العملية التي يستخدمها المصممون لبناء واجهات في البرامج أو الأجهزة المحوسبة ، مع التركيز على الشكل أو الأسلوب. يهدف المصممون إلى تصميم الواجهات التي يجدها المستخدمون سهلة الاستخدام وممتعة. يشير تصميم واجهة المستخدم إلى واجهات المستخدم الرسومية والأشكال الأخرى – على سبيل المثال ، واجهات التحكم الصوتي.
تشمل عناصر الواجهة على سبيل المثال لا الحصر:
- عناصر التحكم في الإدخال: الأزرار ، الحقول النصية ، مربعات الاختيار ، أزرار الاختيار ، القوائم المنسدلة ، مربعات القوائم ، التبديلات ، حقل التاريخ
- مكونات التنقل: شريط التنقل ، شريط التمرير ، حقل البحث ، ترقيم الصفحات ، شريط التمرير ، العلامات ، الرموز
- المكونات المعلوماتية: تلميحات الأدوات ، الرموز ، شريط التقدم ، الإخطارات ، مربعات الرسائل ، النوافذ المشروطة
- الحاويات: أكورديون، مثلا.
ما الفرق بين تصميم واجهات المستخدم وتجربة المستخدم ؟
تجربة المستخدم UX وواجهة المستخدم هما مصطلحان مترابطان. بينما تتعامل واجهة المستخدم عمومًا مع التفاعل بين المستخدمين وأنظمة الكمبيوتر والبرامج والتطبيقات ، تتعامل تجربة المستخدم UX بشكل عام مع تجربة المستخدم الإجمالية مع علامة تجارية أو منتج أو خدمة.
أنظر أيضاً: ما هي CTA ؟
أساسيات تصميم واجهات المستخدم
عند البدء في تصميم الواجهات، تأكد من تذكر الأساسيات التالية:
1.تعرف على المستخدم الخاص بك
“الاستحواذ على العملاء: عندما يتم منحك الاختيار بين الاستحواذ على المنافسين أو العملاء ، يجب دائمًا الاستحواذ على العملاء. ابدأ بالعملاء واعمل بالعكس “. – جيف بيزوس
أهداف المستخدم الخاص بك هي أهدافك ، لذا تعلمها. أعد صياغتها ، كررها. بعد ذلك ، تعرف على مهارات المستخدم وخبراته وما يحتاج إليه. اكتشف الواجهات التي يحبها المستخدمون واجلس وشاهد كيف يستخدمونها.
لا تنجرف في محاولة مواكبة المنافسة من خلال محاكاة أنماط التصميم العصرية أو إضافة ميزات جديدة. من خلال التركيز على المستخدم الخاص بك أولاً ، ستتمكن من إنشاء واجهة تتيح له تحقيق أهدافه.
2.انتبه إلى الأنماط
يقضي المستخدمون معظم وقتهم على واجهات غير واجهاتك (Facebook ، و MySpace ، و Blogger ، و تطبيق البنك الخاص بهم ، والمدرسة / الجامعة ، والمواقع الإخبارية ، وما إلى ذلك). ليست هناك حاجة إلى إعادة اختراع. قد تحل هذه الواجهات بعض المشكلات نفسها التي يدركها المستخدمون داخل تلك التي تقوم بإنشائها. باستخدام أنماط واجهة المستخدم المألوفة ، ستساعد المستخدمين على الشعور بأنهم في المنزل.
3.ابق متسقًا
كلما حققت توقعات المستخدمين من الواجهة، زاد شعورهم بالسيطرة على النظام وزاد إعجابهم به.
يحتاج المستخدمون لديك إلى الاتساق. يجب أن يعرفوا أنه بمجرد أن يتعلموا القيام بشيء ما ، سيتمكنون من القيام به مرة أخرى.
اللغة والتخطيط والتصميم ليست سوى عدد قليل من عناصر الواجهة التي تحتاج إلى الاتساق. تتيح الواجهة المتسقة للمستخدمين الحصول على فهم أفضل لكيفية عمل الأشياء ، وزيادة كفاءتها.
أنظر أيضاً: عناصر التصميم
4.استخدم التسلسل الهرمي المرئي
يمكن للمصممين خلق حالة طبيعية من الفوضى ؛ يمكنهم توصيل الأفكار بوضوح من خلال تنظيم الكلمات والصور والتلاعب بها .
يجب تصميم الواجهات بطريقة تسمح للمستخدم بالتركيز على ما هو أكثر أهمية. يعمل حجم كل عنصر ولونه وموضعه معًا ، مما يخلق مسارًا واضحًا لفهم واجهتك. سيذهب التسلسل الهرمي الواضح إلى أبعد الحدود في تقليل ظهور التعقيد (حتى عندما تكون الإجراءات نفسها معقدة).
5.تقديم التغذية الراجعة
يجب أن تتحدث واجهتك في جميع الأوقات مع المستخدم الخاص بك ، عندما تكون أفعاله صحيحة وخاطئة أو يساء فهمها. أبلغ المستخدمين دائمًا بالإجراءات والتغييرات في الحالة والأخطاء أو الاستثناءات التي تحدث. يمكن أن تُظهر الإشارات المرئية أو الرسائل البسيطة للمستخدم ما إذا كانت أفعاله قد أدت إلى النتيجة المتوقعة.
6.كونوا متسامحين
بغض النظر عن مدى وضوح تصميمك ، سيرتكب الناس أخطاء. يجب أن تسمح واجهة المستخدم الخاصة بك بخطأ المستخدم وتتسامح معه. صمم طرقًا للمستخدمين للتراجع عن الإجراءات ، والتسامح مع المدخلات المتنوعة (لا أحد يحب البدء من جديد لأنه وضع تنسيق تاريخ ميلاد خاطئ).
أيضًا ، إذا تسبب المستخدم في حدوث خطأ ، فاستخدم رسائلك كموقف قابل للتعليم من خلال إظهار الإجراء الذي كان خاطئًا ، وتأكد من أنه يعرف كيفية منع حدوث الخطأ مرة أخرى.
7.دعم تجربة المستخدم
بمجرد أن يصبح المستخدم متمرسًا في واجهتك ، كافئها وأزل عجلات التدريب. سيصبح تقسيم المهام المعقدة إلى خطوات بسيطة أمرًا مرهقًا ومشتتًا للانتباه. إن توفير المزيد من الطرق المجردة ، مثل اختصارات لوحة المفاتيح ، لإنجاز المهام سيسمح لتصميمك بالخروج من الطريق.
8.تحدث لغتهم
تتطلب جميع الواجهات مستوى معينًا من كتابة الإعلانات. اجعل الأمور محادثة وليست مثيرة. قدم تسميات واضحة وموجزة للإجراءات واجعل رسائلك بسيطة. سيقدر المستخدمون ذلك ، لأنهم لن يسمعوك – سوف يسمعون أنفسهم و/أو أقرانهم.
9.اجعلها بسيطة
التناقض الحديث هو أنه من الأسهل تصميم واجهات معقدة لأن تبسيطها أمر معقد للغاية.
أفضل تصميمات الواجهة غير مرئية. لا تحتوي على عناصر UI-bling أو غير ضرورية. بدلاً من ذلك ، تكون العناصر الضرورية موجزة ومعقولة.
عندما تفكر في إضافة ميزة أو عنصر جديد إلى واجهتك ، اطرح السؤال ، “هل يحتاج المستخدم حقًا إلى هذا؟” أو “لماذا يريد المستخدم هذه الصورة المتحركة الرائعة جدًا؟” هل تضيف أشياء لأنك تحبها أو تريدها؟ لا تدع غرور واجهة المستخدم الخاصة بك تسرق العرض أبدًا.
10.استمر في التحسين
إذا استسلمت في كل مرة تفشل فيها ، فلن تخترع شيئ!
Meet the Robinsons هو واحد من أفلامي المفضلة على الإطلاق. طوال الفيلم ، لويس ، بطل الرواية ، يواجه تحدي “الاستمرار في المضي قدمًا”. هذا هو المبدأ الأساسي في تصميم واجهة المستخدم.
غالبًا ما يقال عند تطوير الواجهات أنك بحاجة إلى الفشل بسرعة ، والتكرار كثيرًا. عند إنشاء واجهة مستخدم ، سوف ترتكب أخطاء. فقط استمر في المضي قدمًا ، وتذكر إبقاء واجهة المستخدم بعيدة عن الطريق.
10 إرشادات لتصميم واجهة المستخدم جذابة
يتطلب تصميم واجهة مستخدم ناجحة تطبيق مجموعة من إرشادات ومبادئ التصميم. هناك العديد من المبادئ المعروفة التي يجب وضعها في الاعتبار ، مثل القواعد الذهبية الثمانية لتصميم واجهة المستخدم من Ben Shneiderman.
- وضوح حالة النظام: يجب أن تقدم الأنظمة التغذية الراجعة المناسبة في غضون فترة زمنية معقولة. على سبيل المثال: عندما ينقر المستخدم على زر ، فإنه يغير لون الخلفية وكذلك الخط.
- المطابقة بين النظام والعالم الحقيقي: استخدم لغة مألوفة يمكن أن يفهمها جمهورك المستهدف. صمم واجهة المستخدم الخاصة بك باستخدام الرموز والعناصر التي تتعلق بالعالم الحقيقي. على سبيل المثال: أضف رمز عدسة مكبرة إلى شريط البحث.
- تحكم وحرية المستخدم: امنح المستخدمين مساحة للعودة والتراجع عن الإجراءات السابقة أو إعادتها.
- الاتساق والمعايير: قم بتوحيد كل عنصر من عناصر واجهة المستخدم لضمان الاتساق في جميع أنحاء نظامك.
- منع الأخطاء: قلل أي أخطاء محتملة في نظامك ، وقم بالإبلاغ عنها عند حدوثها حتى يتمكن المستخدم من إصلاح المشكلة على الفور.
- الاعتراف بدلاً من الاسترجاع: قلل كمية المعلومات التي يحتاج المستخدم إلى تذكرها من خلال تقديم المساعدة ضمن السياق المحدد الذي يتواجد فيه المستخدم. تجنب إعطائهم دروسًا تعليمية طويلة مقدمًا.
- مرونة وكفاءة الاستخدام: اسمح للمستخدمين بتخصيص واجهتهم أو تخصيصها لتناسب احتياجاتهم بحيث يمكن تحقيق الإجراءات المتكررة من خلال الاختصارات وإيماءات اللمس.
- التصميم الجمالي والبسيط: حافظ على بساطة المحتوى والتصميم المرئي. لا ينبغي أن يشتت انتباه المستخدم أو يرتبك بسبب العناصر غير الضرورية التي تعترض طريقه.
- ساعد المستخدمين في التعرف على الأخطاء وتشخيصها والتعافي منها: قم بتمييز رسائل الخطأ واستخدم لغة بسيطة تقدم حلولاً محددة لمشاكل المستخدم.
- المساعدة والتوثيق: تأكد من سهولة العثور على وثائقك وفهمها. قدم الوثائق في السياق المناسب في اللحظة التي يطلبها المستخدم واجعلها قابلة للتنفيذ.
نظرة حول عملية تصميم واجهة المستخدم
تحدث عملية تصميم واجهة المستخدم خلال المراحل اللاحقة من عملية تطوير المنتج بعد أن يقوم فريق من المصممين والمطورين ومدير المنتج بإجراء بحث شامل للمستخدم. بهذا المعنى ، تعتمد عملية تصميم واجهة المستخدم على ما حددته عملية تصميم تجربة المستخدم UX ، مضيفة الأنماط والتفاعلات الصحيحة لإنشاء تجربة مستخدم مثالية.
على الرغم من أننا سنقدم الخطوات التالية بشكل خطي ، يجب أن تدرك أن هذه العملية ليست كذلك بالضرورة ؛ قد تتغير بعض هذه الخطوات مع تغير التصميم بعد جولات من الاختبار ويتطلب التكرار بين كل خطوة.
افهم المشكلة التي تحاول حلها
تبدأ عملية تصميم واجهة المستخدم بتحديد المشكلة التي يحتاج فريقك إلى تحقيقها. لذلك ، تستخدم فرق التصميم ملخصات التصميم ، والتي توفر فهمًا عامًا لما يدور حوله مشروع التصميم.
يساعد موجز التصميم مصممي واجهة المستخدم على فهم سياق عملهم لأن وظيفتهم تأتي بعد تحديد تجربة المستخدم وتطويرها. كما أنه يسهل تحديد المسؤوليات والمواعيد النهائية ومناقشة المشروع ككل.
داخل الموجز ، سترى ما يدور حوله المشروع ، بما في ذلك:
- الخلفية: ما السبب وراء المشروع؟ عن ماذا يتكلم؟ ماذا يترتب عليه؟
- الأهداف: ما الذي تحاول الحصول عليه من هذا المشروع؟ كيف يفيد المستخدم؟ كيف تفيد الشركة؟
- معايير النجاح: ما المقاييس ومؤشرات الأداء الرئيسية و OKRs التي تستخدمها لتحديد نجاح المشروع؟
- الجمهور المستهدف: من يستهدف هذا المشروع؟
- هيكل الفريق: من يشارك في هذا المشروع؟ ما هي مسؤوليات كل عضو؟ من هم أصحاب المصلحة المعنيين؟
- النطاق: ما هو الفريق المطلوب عمله لإكمال المشروع؟
- الموعد النهائي: متى سيتم تسليم هذا المشروع؟
تنفيذ معايير المنافسين
في بداية العملية ، تريد البحث عن مصدر إلهام يمكن لفريقك استخدامه كمرجع بمجرد بدء تصميم واجهة المستخدم.
تريد معرفة مكونات واجهة المستخدم التي تستخدمها المنتجات الأخرى لتقديم شاشة أو تفاعل أو تدفق مستخدم. عادةً ما تبحث عن شركات في مجالك لإنشاء معايير تصميم. تعد مواقع مثل Dribbble أو Behance مثالية أيضًا لهذه الوظيفة.
دع كل فرد في فريقك يختار أي عنصر يحبه. الهدف من هذا التمرين هو معرفة الاتجاه الذي يود كل عضو اتخاذه.
بمجرد أن يجمع فريقك بعض الأفكار ، يمكنك إنشاء قائمة جرد للواجهة. مخزون الواجهة هو دليل يحدد جميع عناصر واجهة المستخدم التي يمكنك استخدامها ، بما في ذلك الملفات من أداة تصميم مثل Figma أو لقطات شاشة مأخوذة من مواقع مختلفة ، بما في ذلك منافسيك.
في مخزون الواجهة ، تريد تصنيف كل عنصر من عناصر واجهة المستخدم في مجموعات كبيرة مثل:
- الرسوم المتحركة
- اللون
- هياكل هندسة المعلومات
- مكونات الإدخال (على سبيل المثال ، الأزرار والمفاتيح التبديل وما إلى ذلك)
- المكونات المعلوماتية (مثل تلميحات الأدوات ومربعات الرسائل وما إلى ذلك)
- الطباعة
تحديد الشاشات وسلوكيات المستخدم
يجب أن يشير موجز التصميم إلى الشاشات التي سيصمم فريقك واجهة المستخدم الخاصة بك لها ؛ إذا لم يكن الأمر واضحًا ، فناقشه مع مصممي تجربة المستخدم. هدفك هو تصور كل شيء يحتاج فريقك للعمل عليه وكيف يجب أن تتفاعل الشاشات التي تشكل رحلة المستخدم وفقًا لسلوكيات المستخدمين.
لاحظ أننا نتحدث عن الشاشات وليس الصفحات. من الأفضل التفكير فيها بهذه الطريقة لأن الصفحات مرتبطة بمتصفح الويب ، بينما تنطبق الشاشة على أجهزة الجوال والتطبيقات والمتصفحات. كما يؤكد أيضًا على التغييرات في الدقة والتخطيطات التي ستحصل عليها كل شاشة بمجرد أن تتكيف مع الأجهزة المختلفة.
بعد ذلك ، ستحتاج إلى تصميم تدفق المستخدم ، والذي يوضح العملية التي يقوم بها المستخدم لإكمال مهمة معينة. سيساعد تدفق المستخدم فريقك على تحليل التفاعلات بين كل شاشة وكيف يتقدم المستخدم في رحلته.
في حين أن هذا هو محور تركيز تصميم تجربة المستخدم UX ، وهو منفصل عن العملية الموضحة في هذا الدليل ، فإنك كمصمم واجهة مستخدم تحتاج إلى فهم تدفق المستخدم.
بدلاً من ذلك ، يمكنك العمل مع فريق UX لتحديده بوضوح قبل المضي قدمًا في الخطوات التالية. سيسمح لك القيام بذلك بأن تكون على دراية بجميع الحالات في الرحلة وتصميم الشاشات اللازمة.
تطوير الرسومات التخطيطية والإطارات الشبكية
مع تحديد الشاشات ، يمكن لفريقك البدء في إنشاء رسومات تخطيطية توضح تخطيطات الشاشة المحتملة. الهدف هو الحصول على فكرة عالية المستوى للطرق المختلفة التي يمكن للواجهة من خلالها تلبية احتياجات المستخدم.
يجب أن يناقش كل عضو في فريق التصميم الأفكار مع أصحاب المصلحة المعنيين ويخرجوا بها للعثور على المجموعة الصحيحة التي تجعل المستخدمين يكملون كل مهمة بكفاءة ، وبمجرد تحديد المخطط الصحيح لكل شاشة ، يمكنك البدء في العمل على الإطارات الشبكية. هذه نماذج أولية منخفضة الدقة تحدد التسلسل الهرمي المرئي والإرشادات الهيكلية لكل شاشة.
ناقش الأطر الشبكية الخاصة بك مع أصحاب المصلحة المعنيين للحصول على فكرة أفضل عن الإطار الزمني لتطوير المشروع والطريقة التي سيبدو بها المشروع النهائي.
يمكنك أيضًا اختبار الإطارات الشبكية الخاصة بك مع المستخدم النهائي للعثور على أفضل التخطيطات واكتشاف أي مشاكل حرجة في قابلية الاستخدام قبل بدء التطوير لإنشاء نماذج أولية للعمل لكل إطار سلكي.
إنشاء وصيانة نظام التصميم
قبل أن تنتقل إلى نماذج أولية عالية الدقة ، فأنت تريد تحديد مكونات واجهة المستخدم الدقيقة التي ستستخدمها فيها بمساعدة أنظمة التصميم.
يجمع نظام التصميم كل عنصر من عناصر واجهة المستخدم التي ستسمح لفريق التصميم بتصميم منتج وتطويره. سوف تتطور باستمرار مع المنتج والأدوات والتقنيات الجديدة المتاحة. وبهذا المعنى ، فإن نظام التصميم يشبه مكتبة من العناصر القابلة لإعادة الاستخدام التي تمنح الفريق الوضوح والاتساق خلال عملية تصميم واجهة المستخدم.
من بين العناصر العديدة التي يتكون منها نظام التصميم ، يمكنك أن تجد:
- الألوان التي تمثل العلامة التجارية
- الطباعة
- الصور
فائدة أخرى لنظام التصميم هي أنه يمنح المطورين مدخلات أكثر دقة حول ما يفترض أن يرمزوا إليه ، وأصحاب المصلحة فكرة أوضح عن مدى تعقيد النماذج الأولية التي سينشئها المطورون.
تطوير نماذج أولية عالية الدقة
أخيرًا ، يمكنك البدء في إنشاء نماذجك الأولية عالية الدقة ، والتي تتضمن كل عنصر من عناصر واجهة المستخدم التي حددتها مسبقًا.
على الرغم من أن النموذج الأولي عالي الدقة لن يبدو تمامًا مثل المنتج النهائي ، فإن الهدف هو تقديم تدفق المستخدم لكل من المساهمين والمستخدمين بحيث يمكنك مناقشته واختباره.
يتمثل الاختلاف الرئيسي بين النموذج الأولي عالي الدقة والإطار السلكي في أن النموذج الأول تفاعلي — فهو يتضمن مكونات مثل تمرير الصفحة والأكورديون ومربعات الاختيار وما إلى ذلك. يوفر أيضًا عناصر مثل النسخة والعناصر الرسومية وتدفق المستخدم الذي ترغب في استخدامه بمجرد بدء مشروعك في الإنتاج.
نظرًا لأن النماذج الأولية عالية الدقة تشبه المنتج النهائي تقريبًا ، يمكنك استخدامها في جلسات اختبار المستخدم والحصول على التعليقات قبل إنفاق أي موارد أخرى في التسويق والتطوير.
على الرغم من أن مصممي UX مسؤولون عن نشر هذه المهمة ، يمكن لمصممي واجهة المستخدم المساهمة مع السابق للرد على ملاحظات المستخدم بسرعة وإنشاء تكرارات جديدة للنموذج الأولي حتى يكون لديهم نسخة نهائية.
التسليم
بمجرد الانتهاء من إنشاء نماذجك الأولية عالية الدقة ، حان وقت التسليم. في هذه الخطوة الأخيرة ، تقدم المنتج النهائي إلى المساهمين وتناقش التغييرات التي تم إجراؤها.
قبل تنفيذ التسليم ، قم بتوثيق التغييرات المحددة التي تم إجراؤها على المنتج ، والتي يمكنك القيام بها بمساعدة أي من أدوات التصميم الرئيسية مثل Figma و Sketch و Zeplin و InVision. يمكنك أيضًا تسجيل مقطع فيديو سريع يوضح التفاعلات.
في هذه المرحلة ، قد تتلقى ملاحظات تتطلب منك الرجوع إلى المراحل السابقة. ومع ذلك ، إذا تلقيت ملاحظات خلال عملية التصميم بأكملها ، فلا يجب أن تتوقع رؤية أي تغييرات كبيرة.
خلاصة ختامية
تكمل عملية تصميم واجهة المستخدم عملية UX ، حيث تأخذ الأطر السلكية المبكرة الخاصة بك إلى نماذج أولية للعمل تهدف إلى إسعاد المستخدمين وإلهامهم للاستمتاع بمنتجك.
قبل الختام ، نريد مشاركة بعض النصائح النهائية:
- قم بإشراك أصحاب المصلحة في كل خطوة على طول عملية تصميم الواجهات. تأكد من وجود علاقة ثنائية الاتجاه بين فريق التصميم وأصحاب المصلحة بحيث يمكن لكليهما مناقشة الاتجاه والتغييرات المطلوبة. تنفيذ الملاحظات الواردة لتجنب أي مشاكل في المراحل اللاحقة من عملية التصميم والتطوير.
- احصل على جلسات ملاحظات مع مصممين آخرين و/أو أعضاء في شركتك ، حتى إذا كانت ملاحظاتهم لا تحمل نفس الأهمية مثل أصحاب المصلحة في مشروعك.
- اختبر تصميماتك ، مثل الإطارات والنماذج الأولية لتجنب أي مشكلات تتعلق بقابلية الاستخدام أو إمكانية الوصول.