7 جوانب رئيسية لنماذج الويب اللافتة للنظر يجب أن تعرفها
يقوم حوالي 86٪ من الأشخاص بملء نموذج ويب واحد على الأقل كل أسبوع. رغم ذلك ، لا يكملها كل مستخدم بالفعل. أحد الأسباب هو ضعف تصميم نماذج الويب. ينتج عن هذا الكثير من الفرص الضائعة للشركات ، وأهمها خسارة الإيرادات وتدهور العلاقة مع العملاء.
إذا قمت بتحليل سلوكك عبر الإنترنت ، فسترى أن معظم تفاعلاتك مع تطبيقات الويب هي نماذج عبر الإنترنت ، سواء كنت تريد الاتصال بالبائع أو شراء تذكرة قطار أو طلب سلع أو حجز فندق وما إلى ذلك. إنه نوع من الحوار بينك وبين الشركة.
في الواقع ، لا يمانع معظم الأشخاص في إكمال النماذج عندما تكون مفهومة ومرتبة ومصممة جيدًا. وهذه هي المشكلة - العديد من النماذج عبر الإنترنت طويلة جدًا ومربكة وحتى عدوانية (وبعضها قد يكون له كل هذه العيوب في وقت واحد). عندما يحير أحد النماذج مستخدمًا أو يطلب أكثر من اللازم ، فهناك خطر أن يرفض المستخدم إكماله.
لهذا السبب سنتحدث عن كيفية تصميم نماذج الويب التي سيتمكن الأشخاص من إكمالها بسرعة ودون ارتباك. على الرغم من أنني أعترف بعدم وجود حل موحد لكل حالة ، إلا أن إرشادات التصميم التالية يمكن أن تفعل المعجزات من أجل سهولة استخدام النموذج وتجربة المستخدم والتحويل!
دعنا نقوم به!
كيفية جعل نماذج الويب الخاصة بك تزيد من معدلات الإكتمال
نصيحة 1: اتبع المنطق عند تنظيم النموذج
الجانب الأول الذي سنركز عليه هو بنية تخطيط النموذج. نموذج الويب هو نوع من المحادثة ويجب أن يتضمن اتصالًا منطقيًا بين المستخدم والواجهة. على سبيل المثال ، من غير المألوف طلب عنوان قبل اسم المستخدم. إليك ما يمكنك القيام به لتحسين نموذج الويب UX:
- ادمج الحقول ذات الصلة في أقسام.
- تجنب الأعمدة المتعددة.
- اسأل فقط ما هو مطلوب لتقليل عدد الحقول.
- قم بتطبيق نموذج متعدد الخطوات عندما يكون طويلاً جدًا.
النصيحة 2: اجعل الملصقات تعرف مكانها
من المحتمل أن يكون وضع الملصقات هو الموضوع الأكثر شيوعًا عندما يتحول الحديث إلى تصميم واجهة المستخدم للنموذج. لا عجب ، حيث توجد مجموعة من الخيارات المختلفة المتاحة. على الرغم من أن جميع المصممين يتفقون على أن الخيار الأفضل هو أن تكون الملصقات مرئية دائمًا ، وتقع فوق أو بجانب الحقل.تعد التسميات الواضحة إحدى أفضل الطرق لجعل تصميم واجهة مستخدم نموذج الويب أكثر سهولة. تخبر المستخدمين الغرض من الحقل ، وتحافظ على الفائدة وتظل مرئية حتى بعد اكتمال الحقل.
حاول وضع نصوص تسميات للسماح بمسح ضوئي فعال وفعال وتقليل الأخطاء أو الحقول المفقودة. بناءً على تجربة تصميم واجهات الويب المختلفة ، أميل إلى الخيارات التالية:
- تسميات متحاذية لأعلى.
كقاعدة ، يتم إكمال النماذج ذات العلامات المحاذاة لأعلى بشكل أفضل مقارنة بالتسميات المحاذية لليسار. تعمل التسميات المحاذية لأعلى بشكل جيد مع النماذج المحمولة.- تسميات بمحاذاة اليسار.
ومع ذلك ، يتم النظر في التسميات المحاذية لليسار لإدخال مجموعات بيانات كبيرة مع اختيارية متغيرة ، فهي دائمًا ما تكون أسهل في المسح ، فهي تقلل الارتفاع وتسمح للمستخدمين بمقارنة الإجابات بالتسميات بنظرة واحدة فقط. انتبه إلى أنها تعمل جيدًا مع طرق عرض سطح المكتب فقط.- تسميات عائمة.
خيار آخر لوضع الملصقات يعمل بشكل رائع حقًا للجوال ، ويوفر المساحة ، ويبدو نظيفًا وواضحًا ، ولا يترك قابلية الاستخدام وراءه. الفكرة بسيطة - عندما يكتب شخص ما في مربع الإدخال ، تظهر التسمية العائمة في شكل نص بجانب الإدخال الذي يمنع المستخدم من فقد السياق. إنه أمر بالغ الأهمية لواجهات الهاتف المحمول ، حيث يرى المستخدمون المجال الذي يعملون فيه وما يكتبونه. في الواقع ، لا يعمل مع مربعات الاختيار أو الراديو أو النص المحدود.- تجميع التسميات مع مدخلاتها.
عادةً ما يبدو التباعد بين التسمية والحقل محيرًا ويجعل من الصعب فهم ما يجب إدخاله.إن تقديم الملصقات والمدخلات بالقرب من بعضها البعض يجعلها تبدو مترابطة ويقلل من الالتباس. يعود مبدأ وضع العناصر ذات الصلة في مكان أقرب إلى علم نفس الجشطالت ، الذي اكتشف كيف ولماذا يدرك الدماغ البشري الشيء ككل بدلاً من مجموع الأجزاء المنفصلة.
- تجنب كل الحروف الكبيرة وكتابة ملصقات واضحة.
لا يعد استخدام الأحرف الاستهلالية ممارسة جيدة في تصميمات نماذج مواقع الويب. يصعب قراءة هذا النص وعقلنا يحتاج إلى مزيد من الوقت لاستيعابه. إذا كان النص مكتوبًا بأحرف كبيرة ، فإن سرعة القراءة تنخفض بنسبة 13 إلى 20 بالمائة. أيضًا ، يمكن لجميع تسميات الأحرف الكبيرة أن تترك انطباعًا بـ "الصراخ" على المستخدمين.حاول أيضًا أن تُظهر للمستخدمين المعلومات المطلوبة في لمحة واحدة. تجنب استخدام جمل كاملة لشرح أسئلة بسيطة ، فكلمة واحدة أو كلمتين كافية بشكل عام.
النصيحة 3: لا تتجاهل تصميم الإدخال
تعد الحقول النصية أهم مكون في نماذج الويب لطلب البيانات من المستخدمين. لهذا السبب يحتاجون إلى إشارات مرئية قوية تحدد ما يجب على المستخدم فعله. يتم تقييم الإشارات المرئية القوية وفقًا لمعاملتين رئيسيتين: قابلية النقر والمساحة الفارغة.
بمعنى آخر ، يجب أن تكون المدخلات فارغة وقابلة للنقر. وإلا فسيحتاج المستخدمون إلى مزيد من الوقت للتفاعل مع الحقول. قد يستغرق الأمر عدة ثوانٍ أخرى ، ولكن إذا تحدثنا عن إكمال نموذج كبير ، فإن كل ثانية مهمة.
يشبه حقل النص المصمت المملوء باللون الرمادي زرًا أكثر من كونه حقل إدخال فارغًا.
يحدث ذلك لأن المستخدمين يجمعون بين المساحات البيضاء والفراغ. وبالتالي ، تُظهر المساحة البيضاء في حقول النص للمستخدمين أن الإدخال مطلوب.
مثال آخر هو حقل نص المخطط التفصيلي مع إشارة قوية للمساحة الفارغة ، ولكن إشارة ضعيفة لإمكانية النقر. تحتوي على مساحة بيضاء ولكن مخطط ضعيف قد يتسبب في فقدها على الخلفية البيضاء.
السطر الأفقي الذي يحدد حقل النص ليس فكرة جيدة أيضًا. يفتقر إلى كل من الإشارات المرئية المهمة ويمكن خلطه بفاصل الأسطر لفصل المحتوى.
تتضمن أفضل طريقة لتصميم الإدخال خلفية داكنة وملء مساحة بيضاء. يسمح الوضوح المرئي لهذا الخيار بالتفاعل مع حقل النص بسرعة ودون تشويش.
عندما تكون متأكدًا من أن حقول الإدخال تحتوي على إشارات مرئية قوية ، فقد حان الوقت للتفكير في شكل وأركان حقل النص.
والمثير للدهشة أنه تم اكتشاف أن الخطوط العريضة الحادة للأشياء المرئية مرتبطة بإحساس بالتهديد وتسبب مواقف سلبية ، في حين أن الخطوط العريضة المنحنية مفضلة أكثر من الخطوط الحادة. بمعنى آخر ، يمكن أن تجعل الزوايا الدائرية لحقل الإدخال الخاص بك أكثر سهولة في الاستخدام.
عند تحديد حقل نصي ، يحتاج المستخدمون إلى إشارة مرئية إضافية للإجراء. تُظهر حالة التحديد للمستخدمين مرة أخرى المكان الذي يكتب فيه مدخلاته وتمنعه من الخلط بين الحقل والإدخالات القريبة.
أظهرت الدراسة أن مجرد تغيير لون المدخلات النشطة لا يكفي لأن هناك خطر إهمال المستخدمين المصابين بعمى الألوان. يؤدي تغيير كل من اللون والشكل إلى تسهيل ملاحظة الإشارة من قبل المستخدمين وبالتالي إكمال المهام بشكل أسرع.
ما عليك سوى إلقاء نظرة على حقل الإدخال هذا من Shopify ، الذي يستخدم حقل نص أبيض وخلفية داكنة وحدد حدود الحالة والزوايا الدائرية في نفس الوقت. هذا ممتاز!
إذا كنت تتعامل مع التحديد المتعدد ، فمن الأفضل عرض جميع الخيارات (فقط إذا كانت أقل من 6). القائمة المنسدلة للمُحدد هنا ليست هي الخيار الأفضل لأنها تحتاج إلى نقرتين على الأقل ، وتخفي الخيارات. يمكنك التقدم بطلب للحصول على محدد الإدخال في حالة وجود أكثر من خمسة خيارات.
حاول أن تكون إلى جانب المستخدم وتوقع المشكلات التي يمكن أن يواجهها في ملء نموذج الويب. على سبيل المثال ، إذا كان الإدخال يحتوي على أكثر من 25 خيارًا ، فساعد المستخدمين على الاختيار منهم. يعد البحث السياقي ضمن القائمة المنسدلة اختيارًا ممتازًا ضمن هذه الشروط.
النصيحة الرابعة: تنمية بصيرتك وساعد المستخدمين على تجنب الأخطاء
البشر يخطئون ، هذا طبيعي. عندما نتحدث عن التفاعل مع واجهات الويب ، هناك نوعان من أخطاء المستخدم: الأخطاء والانزلاقات. تحدث الزلات عندما يقوم المستخدم بتشغيل وضع الطيار الآلي ويقوم بإجراءات خاطئة. على العكس من ذلك ، فإن جذر أخطاء المستخدم هو تفسير خاطئ لما يراه على الشاشة. والتصميم الجيد UX قادر على منع مثل هذا التناقض في توقعات المستخدم وواجهة نماذج الويب. يمكن القيام بذلك عن طريق:
- الاستفادة من العلامات والتلميحات.
عند تصميم نماذج الويب ، حاول أن تكون واضحًا قدر الإمكان. لهذا الغرض ، استخدم رسائل المساعدة القصيرة ، مثل إرشادات إعداد كلمة المرور أو ما شابه ذلك. من الأفضل استخدام الأقنعة بدلاً من العناصر النائبة أو أي تلميحات. على سبيل المثال:
- تجنب العناصر النائبة (للحصول على معلومات مهمة).
عندما تتعامل مع تنسيق مجال الهاتف ، فمن الأفضل استخدام التنسيق التلقائي بما في ذلك محدد البلد وإخفاء الإدخال. بخلاف العناصر النائبة ، التي تكون نصًا ثابتًا بشكل أكبر ، يمكن للأقنعة تنسيق البيانات التي يوفرها المستخدم تلقائيًا.- تأكد من عدم إرباك المستخدمين إذا كنت تستخدم العناصر النائبة بعد كل شيء.
يجب أن يكون هناك تمييز مرئي بين نص العنصر النائب والنص الذي يملأه المستخدمون ، لأن نفس النمط قد يتسبب في تجاهل حقل الإدخال.- التحكم بطول الحقل.
يشير طول الحقل إلى طول الإجابة. استخدمه للحقول التي تحتوي على عدد أحرف محدد مثل أرقام الهواتف والرموز البريدية وما إلى ذلك.- بمناسبة المطلوب مقابل الحقول الاختيارية.
ليس من الواضح دائمًا للمستخدمين ما المقصود بعلامة الحقل *. بدلاً من ذلك ، ضع علامة على الحقول الاختيارية. وفي الحالات التي تكون فيها معظم الحقول اختيارية ، استخدم (*) للحقول المطلوبة.- منع الأخطاء في كلمات المرور.
يجب أن يعمل التصميم الرائع للنموذج على تبسيط عملية كلمة المرور وجعلها سريعة وفعالة ومقاومة للأخطاء قدر الإمكان. لهذا الغرض ، قم بتطبيق خيار إظهار كلمة المرور الذي يتيح للمستخدم التحقق مرة أخرى من الإدخال. يعد عرض متطلبات كلمة المرور قبل ملء الحقل خيارًا رائعًا ، بالإضافة إلى التنبيه بشأن زر caps lock المضغوط أو اللغة المستخدمة.نصيحة 5: التحقق من صحة أمر ضروري
يركز التحقق من صحة نموذج الويب على التأكد من أن المستخدم قد ملأ جميع المعلومات بالتنسيق المناسب اللازم لإكمالها بنجاح. ببساطة ، يجب تجنب الالتباس. يجب أن تذكر رسالة التحقق الجيدة ما يلي:
- الذي حدث خطأ.
يجب إبلاغ المستخدم بوضوح (يفضل استخدام اللون الأحمر) بوجود خطأ في النموذج.- أين الخطأ.
- حدد تلك الحقول التي حدث فيها الخطأ.
- كيفية إصلاح الخطأ.
أبلغ المستخدمين بما يجب القيام به لاجتياز عملية التحقق.خيار رائع هو تطبيق التحقق المضمن بعد أن يملأ المستخدم الحقل. يتحقق من صحة مدخلات المستخدم مباشرة أثناء التقدم من خلال النموذج. يمكنك استخدام التحقق المباشر عندما يكتب المستخدم ، وعندما يتوقف المستخدم مؤقتًا ، عندما يصل إلى متطلبات الشخصية وما إلى ذلك.
- 42٪ انخفاض في أوقات الانتهاء ،
- 22٪ زيادة في معدلات النجاح ،
- 22٪ انخفاض في الأخطاء المرتكبة ، و
- 31٪ زيادة في معدل الرضا.
كل هذا يدل على أن التحقق المضمن هو منتج بلا شك وقادر على تحسين تحويل النموذج الخاص بك.
نصيحة 6: الأزرار مهمة ، تذكر ذلك
يمكن اعتبار الأزرار ميزة غير ملحوظة لنماذج الويب ، ومع ذلك ، يمكن أن تؤثر بشكل كبير على نموذج UX. إذا لم تكن قد فكرت حتى الآن في شكل الأزرار في نماذج الويب الخاصة بك ، فقد حان الوقت للتفكير فيها.
- حدد الأزرار الأساسية والثانوية وصممها وفقًا لذلك.
- فكر في نص الزر.
من الناحية المثالية ، يجب أن ينتهي نص الزر من الجملة "أريد ..." أو تحديد ما يجب أن يحدث بعد ذلك.- امنح المستخدمين ملاحظات مرئية.
لنأخذ ، على سبيل المثال ، زر "إرسال". من الأفضل أن تشير بوضوح إلى أن النموذج قد اكتمل. يوفر ملاحظات للمستخدم ويساعد على تجنب المشاركات المزدوجة.- تأكد من أن العبارات التي تحث المستخدم على اتخاذ إجراءات متناقضة للغاية.
كقاعدة عامة ، فإن التباين هو المهم ، وليس اللون في الواقع.- إظهار زر الخطوة التالية فقط بعد ملء النموذج.
تعمل هذه الحيلة بشكل جيد عند إقرانها بالتحقق المضمن. يساعد في الحفاظ على تركيز المستخدم على المدخلات ويمنع تخطي شيء مهم.النصيحة 7: التحسين للجوال
اليوم ، يصل حوالي 70٪ من مستخدمي الإنترنت إلى موارد الويب من الأجهزة المحمولة. هذا هو السبب في أنه العامل الذي لا يمكن التغاضي عنه. يخلق التصميم الجيد للنموذج المحمول تجربة مستخدم إيجابية. في المقابل ، يضمن ذلك وجود زائر سعيد لتطبيق الويب ومن المرجح أن يتحول إلى عميل أو مستخدم عائد.
- تأكد من أن الحقول والأزرار يبلغ ارتفاعها 48 بكسل على الأقل
- احرص على أن تكون جميع تسميات النماذج وخطوط العناصر النائبة أعلى من 16 بكسل
- حقق أقصى استفادة من الميزات الأصلية للأجهزة المحمولة لتبسيط المهام (مثل الكاميرا ، والموقع الجغرافي ، ومنتقي التاريخ)
- استخدم أنواع إدخال HTML معينة لعرض لوحة المفاتيح الصحيحة
إذا كنت قد أدركت أن نماذج الويب في تطبيقك ليست سهلة الاستخدام بما يكفي الآن ولاحظت انخفاضًا في حركة المرور ، فهذه علامة على أنه يجب عليك تحليل تجربة المستخدم لموقع الويب الخاص بك. آمل أن تعطيك هذه النصائح بعض الإلهام لتصميم النماذج وتساعد في جعل نماذج الويب الخاصة بك سهلة وجذابة ، بالإضافة إلى تحويل المستخدمين إلى عملاء سعداء.