تصميم واجهة مستخدم جيدة من بين اهم العمليات التي يقوم بها مصممو الويب المحترفين لانشاء موقع ويب بمعايير ممتازة.

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

6 قواعد لتصميم واجهة مستخدم جيدة يجب اتباعها لكل مشروع تصميم ويب

1-اجعل كل ما يحتاجه المستخدم سهل الوصول إليه:

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

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

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

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

2-كن متسقا

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

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

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

3-كن واضحا

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

الوضوح هو السبب في أن تصميم واجهة الويب البسيط (والوحشي إلى حد ما) شائع جدا. لا يشعر الأشخاص بالارتباك بشأن الغرض من الموقع أو الصفحة نظرا لوجود القليل من الفوضى (أو عدم وجودها). تريد تقديم تجربة معاكسة لتجربة Ling’s Cars.

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

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

4-إبداء رأيك

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

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

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

5-استخدم التعرف ، وليس التذكر

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

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

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

6-اختر كيف سيتفاعل الناس أولا

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

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

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