مبادئ تصميم النموذج: 13 أفضل الممارسات المدعومة تجريبيًا

إذا كنت لا تتبع أفضل ممارسات تصميم النموذج ، فأنت تترك الكثير من المال على الطاولة.

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

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

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

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

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

13 من مبادئ تصميم النموذج وأفضل الممارسات

1. الأقل هو الأكثر (مثل إزالة حقول النموذج).

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

في إحدى دراسات الحالة ، تم استبدال نموذج الاتصال المكون من 11 حقلاً بنسخة مكونة من 4 حقول ، وزادت عمليات إكمال النموذج بنسبة 160٪. (ظلت جودة الطلبات كما هي.)

في اختبار آخر ، تفوق نموذج مكون من 5 حقول على نموذج مكون من 9 حقول بنسبة 34٪. في هذا أيضًا ، لم يكن هناك انخفاض في البيانات أو جودة الرصاص.

معظم النماذج طويلة جدًا. إنها "متلازمة المسوق الجشع" - نعتقد أننا بحاجة إلى جميع البيانات.

وجد معهد Baymard أن متوسط ​​الخروج يحتوي على 14.88 حقلاً نموذجيًا. لكن اختبار قابلية الاستخدام أثناء الخروج أظهر أيضًا أن معظم المواقع يمكنها تحقيق تخفيض بنسبة 20-60٪ في عدد حقول النموذج المعروضة افتراضيًا.

بشكل أساسي ، يعرض متوسط ​​الدفع ضعف عدد حقول النموذج حسب الحاجة.

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

• كم عدد النماذج التي لديك؟
• كم من الناس يختبرونها؟
• ماذا تعني لك زيادة بنسبة 10٪ في كل شكل؟

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

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

مثال من صفحة وكالتنا:

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

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

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

أفضل استمارة تسجيل قصيرة:

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

بشكل عام ، من الآمن اتباع هذا الاستدلال: إزالة حقول النموذج غير المجدية أو الزائدة عن الحاجة.

2. العمود الواحد يتفوق على الأشكال متعددة الأعمدة.

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

في دراسة CXL ، أكمل المشاركون في الاستطلاع النموذج الخطي أحادي العمود (ن = 356) بمعدل 15.4 ثانية أسرع من النموذج متعدد الأعمدة (ن = 346). كان هذا أسرع بشكل ملحوظ عند مستوى ثقة 95٪.

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

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

3. الإبلاغ عن الأخطاء بوضوح.

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

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

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

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

4. استخدم التحقق من صحة حقل النموذج المضمن.

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

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

فيما يلي مثال رائع للتحقق الداخلي:

هناك الكثير من الدعم التجريبي لعملية التحقق المضمنة. في عام 2009 ، اختبر Luke Wroblewski عملية التحقق المضمنة مقابل عنصر تحكم (التحقق من صحة ما بعد الإرسال) ، وعلى الرغم من أن العينة كانت صغيرة ، فقد وجد النتائج التالية مع الإصدار المضمَّن:

• 22٪ زيادة في معدلات النجاح ؛
• 22٪ انخفاض في الأخطاء المرتكبة ؛
• 31٪ زيادة في معدل الرضا.
• 42٪ انخفاض في أوقات الإنجاز ؛
• انخفاض بنسبة 47٪ في عدد عمليات تثبيت العين.

سآخذ هذه النتائج. (لقد رأيت نتائج مماثلة من اختبارات A / B التي يتم تشغيلها على العديد من مواقع التجارة الإلكترونية.)

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

5. ترتيب الحقول من الأسهل إلى الأصعب لملئها.

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

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

لا تفعل هذا:

6. اجعل الكتابة سهلة.

يستمر ظهور المبدأ الشامل لأفضل ممارسات تصميم النموذج: جعل الأمور سهلة للمستخدم (خاصةً للنماذج المحمولة).

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

عند اتخاذ قرار بشأن الملء التلقائي ، إليك بعض الأسئلة الجيدة التي يجب التفكير فيها:

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

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

لذلك لا تفعل هذا:

7. وضح ما إذا كان كل حقل مطلوبًا أم اختياريًا (ما لم تكن جميعها مطلوبة).

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

ركز على المعلومات التي تحتاجها من المستخدمين حتى يتمكنوا من البدء. لا تريد أن يجلس المستخدم في المنزل ويفكر ، "لماذا يحتاجون هذا ؟!"

وضح ما إذا كان كل حقل مطلوبًا أم اختياريًا ، ما لم يكن كل ذلك مطلوبًا.

8. يجب أن يكون حقل الاسم ورقم الهاتف حقلاً واحدًا .

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

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

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

9. عرض أزرار الاختيار بدلاً من المربعات المنسدلة.

جادلت UX Movement أن النماذج ذات القوائم المختارة غالبًا ما يتم التخلي عنها لأنها "تستغرق وقتًا وجهدًا أكبر لإكمالها".

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

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

نتائج؟ كان إكمال النموذج الذي يحتوي على زر اختيار أسرع. أكمل المشاركون في الاستطلاع نموذج زر الاختيار (ن = 354) بمعدل 2.5 ثانية أسرع من النموذج باستخدام أزرار متعددة التحديد (ن = 354). كان هذا أسرع بشكل ملحوظ عند مستوى 95٪.

10. لا تجعل حقول رمز القسيمة بارزة.

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

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

يعد ترك الموقع للبحث عن القسائم سببًا شائعًا لتخلي عربة التسوق.

لذا فهذه ليست فكرة جيدة:

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

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

11. تجنب زر "مسح الحقول".

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

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

أفضل ممارسات تصميم النماذج الخاصة بالجوال

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

لدينا مشاركة كاملة حول هذا الموضوع ، لذا تعمق هناك. ولكن إذا كنت تريد نقطتي بداية ، فاتبع هذه الإرشادات.

12. عرض التركيز الميداني.

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

اجعل حقل الإدخال يتم تحريره بشكل بارز ومركّز.

13. لا تحجب كلمات المرور.

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

كما تم تلخيص NN / g:

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

تحذير: قم بإجراء تجاربك الخاصة.

لا يعني مجرد كون الشيء "أفضل ممارسة" أنه الحل الأمثل دائمًا. في بعض الأحيان ، تفشل أفضل الممارسات.

مواقع الويب سياقية. ما يعمل على موقع ما قد لا يعمل على موقع آخر.

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

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

هذه مبادئ توجيهية وليست ولايات.

استنتاج

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

ولكن إذا كنت تبدأ من الصفر ، فإن أفضل ممارسات تصميم النموذج هذه تعتبر أساسًا جيدًا - مكانًا للبدء ، ولكن ليس حيث ستنتهي.

هل تعمل على شيء متعلق بهذا؟ انشر تعليقًا في مجتمع CXL !