4 نصائح تصميم UX نموذج يجب أن تعرفه (مع أمثلة)

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

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

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

توقع احتياجات المستخدم

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

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

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

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

مثال: عمليات تسجيل الدخول الاجتماعية التي تستهدف احتياجات المستخدم

يحتوي نموذج تسجيل الدخول في Codepen على ثلاثة عمليات تسجيل دخول اجتماعية مع Github في الأعلى. سيكون هذا الخيار غير معقول بالنسبة لمعظم المواقع.

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

فكر في موبايل أولاً

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

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

مثال: عناصر التحكم Tappable

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

يتكيف نموذج الاشتراك في النشرة الإخبارية لمؤتمر تصميم الويب An Event Apart مع طريقة وصول مستخدمي الهاتف المحمول إلى الشاشة - حيث يحتوي على حقلي إدخال سهل الاستخدام و زر بحجم الإصبع.

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

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

مثال: مدخلات مستهلكة

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

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

عندما ينقر المستخدم خارج الحقل ، يتقلص ، وتختفي المعلومات الإضافية.

مثال: زر التحويل

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

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

تسهيل إدخال الإدخال

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

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

تستخدم العديد من مواقع التجارة الإلكترونية (مثل Amazon) هذا الحل من أجل تقليل معدلات التخلي عن العربة.

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

مثال: منتقي المدخلات الشخصي

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

تطبيق قائمة Todoist يعطي تلميحات شخصية داخل منتقي التاريخ عندما يحوم المستخدم على مدار الأيام.

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

مثال: السحب والإفلات المدخلات

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

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

يوفر WordPress.com واجهة إدخال المستخدم سهلة السحب وبديهية في نموذج محرر النشر الخاص بها. ال الصور المصغرة قليلا و ال التمثيل المرئي للملفات التي تم تحميلها بالفعل مزيد من مساعدة المستخدمين بسرعة تنفيذ التحميل.

مثال: تراكب لإزالة الانحرافات

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

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

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

تقديم ملاحظات للمستخدمين

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

في تصميم النموذج ، هناك نوعين من التقيمات المستخدم:

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

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

مثال: تقدم التقدم

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

يُظهر تطبيق الويب الخاص بمنشئ الاستطلاع SnapSurveys تعقبًا بسيطًا للتقدم أعلى أزرار الإرسال مباشرة بحيث يمكن للمستخدمين التقاط مشهد طبيعي منه.

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

مثال: التحقق في الوقت الحقيقي

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

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

مثال: تلميحات الأدوات التعبيرية

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

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

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

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