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

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

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

اشترك في قناتنا على اليوتيوب

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

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

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

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

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

2. كن متسقًا

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

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

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

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

3. كن واضحا

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

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

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

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

4. إبداء الرأي

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

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

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

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

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

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

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

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

مصدر الصورة John Picklap ، بإذن من MarieClaire.com

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

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

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

7. اتبع معايير التصميم

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

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

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

8. مسائل التسلسل الهرمي للعناصر

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

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

القاعدة الأساسية هي أنك تريد إبقاء الأشياء تتدفق من اليسار إلى اليمين ومن أعلى إلى أسفل.

9. حافظ على الأشياء بسيطة

انظر إلى نموذج الاتصال هذا:

انظر الآن إلى هذا:

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

10. حافظ على المستخدمين لديك أحرارًا وخاضعين للتحكم

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

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

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

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

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

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

هل لديك أي قواعد لتصميم واجهة مستخدم جيدة تتبعها دائمًا؟

المادة مميزة صورة بواسطة emojoez / shutterstock.com