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

ربما تكون قد رأيتهم يظهرون في ملف الأخبار الخاص بك ، والمصممين وغير المصممين يشاركون آرائهم بشكل محموم. لماذا هذا؟

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

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

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

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

لذا ، لنبدأ بالأساسيات. ما سنقوم بتغطيته هو:

• ما هو تصميم واجهة المستخدم وكيف يختلف عن تصميم تجربة المستخدم
• لماذا يعد تصميم واجهة المستخدم مهمًا جدًا
• ما هي العناصر في التصميم التي تشكل الأساس
• كيف تبدأ التصميم بكفاءة باستخدام التفكير التصميمي

ما هو تصميم واجهة المستخدم وتصميم UX؟

قد تربكك المصطلحات UI و UX design: واجهة المستخدم وتجربة المستخدم. لنبدأ بالحصول على هذا الحق. ما هو تصميم واجهة المستخدم وما هو ليس كذلك؟

تخيل وضع ملعب كرة قدم على تل به صخور. قد يبدو الأمر مثيرًا للإعجاب ، لكنه بعيد عن أن يكون عمليًا.

الواجهة هي الأساس الذي يمكنك بناء التجربة عليه.

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

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

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

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

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

لماذا تعتبر واجهة المستخدم الصلبة مهمة؟

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

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

أنت تريد شخصًا ما يشتري أو يحجز أو أي إجراء آخر في أسرع وقت ممكن - قبل أن يفقد انتباهه.

تريد تسهيل هذه التفاعلات ، من خلال تصميم واجهة سريعة الاستجابة ومنطقية وفعالة.

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

إن الإحباط والتجربة السيئة هما ما تريد تجنبه: تنتقل الكلمات بسرعة ، والكلمات السلبية أسرع: سيخبر 44٪ من المتسوقين أصدقائهم عن تجربة سيئة عبر الإنترنت. 88٪ من المتسوقين عبر الإنترنت يقولون إنهم لن يعودوا بعد هذه التجربة.

أهم العناصر في واجهة المستخدم

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

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

1. ضوابط الإدخال

1. مكونات الملاحة
2. مكونات إعلامية
3. حاويات

إليك العناصر التي يمكنك أن تجدها في هذه الفئات الأربع.

ضوابط الإدخال

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

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

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

المكونات الملاحية

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

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

مكونات إعلامية

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

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

حاويات

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

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

راجع أيضًا: تصميم الويب وتطويره - كل ما تحتاج إلى معرفته

كيف تبدأ التصميم: استخدم طريقة التفكير التصميمي

متحمس لبدء التصميم حتى الآن؟ قد تكون قادرًا على تصور تصميم رائع ، لكن لا تعرف من أين تبدأ.

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

التفكير التصميمي هو عملية تصميم تدور حول كيفية فهم المستخدم للتصميم واستخدامه واعتماده والتصرف فيه.

هل سيتعين على الناس تعلم استخدام التصميم الخاص بك؟ أم أنه سيحدث لهم بشكل طبيعي ، مما يؤدي إلى تحويلات أسرع وأكثر؟

يساعدك Design Thinking على إنشاء شيء يلبي احتياجات المستخدمين ، ويمنعك من التركيز كثيرًا على أفكار التصميم الجامحة - سواء كانت لك أو لعميلك.

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

يحدث التفكير التصميمي في خمس مراحل. سنرشدك من خلالها.

الخطوة 1: التعاطف

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

الخطوة 2: التحديد

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

الخطوة 3: افكر

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

الخطوة 4: النموذج الأولي

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

الخطوة 5: الاختبار

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

هل أنت جاهز لإنشاء أول تصميم لواجهة المستخدم الخاصة بك؟

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

اقرأ أكثر:

• Hootsuite vs Buffer - أيهما أفضل لإدارة وسائل التواصل الاجتماعي؟
• نظرة عامة وتقارير هي وحدات ضمن أي منتج من منتجات Hootsuite؟
• كيف تصبح منشئ محتوى على وسائل التواصل الاجتماعي وتحقق إيرادات؟
• كيف يمكنك جذب مستخدمي وسائل التواصل الاجتماعي لمشاركة محتوى الفيديو الخاص بك على الإنترنت؟