UX في نماذج الاتصال: أساسيات لتحويل العملاء المحتملين إلى تحويلات

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

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

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

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

هل من المقبول وضع نموذج في عمودين؟

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

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

أين يجب وضع الملصقات؟

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

وضع الملصقات فوق الحقول

هذا هو موضع الملصق الأكثر شيوعًا ، وكما تم التحقق من صحته بواسطة بحث Google UX ، لسبب وجيه. يتكيف بشكل أفضل مع أحجام الهواتف الذكية ، وهو أمر ضروري للترميز سريع الاستجابة.

ضبط تسميات اليسار

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

وضع تسميات داخل الحقول (تسميات أعلى محاذاة في الحقل)

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

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

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

هل يمكننا استخدام نص العنصر النائب بدلاً من التسمية؟

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

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

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

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

كيف تقلل العبء المعرفي للنموذج؟

مشاهدة التباعد

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

التركيز التلقائي حقل الإدخال الأول

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

لا تستخدم القبعات أبدًا

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

هل تعتبر الأزرار جزءًا من تجربة المستخدم الخاصة بالنموذج؟

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

يجب أن يشرح الزر الإجراء الواجب اتخاذه

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

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

فصل الإجراءات الأولية عن الإجراءات الثانوية

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

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

التأكيد على الأزرار

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

هل من الممكن تسهيل عملية تعبئة النموذج؟

إضافة الملء التلقائي

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

لا تنسى المدخلات المقنعة

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

كن مبتكرًا

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

تجنب التحديدات المنسدلة بخيارين أو ثلاثة فقط

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

التحقق من صحة النماذج

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

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

أضف وسائل الراحة لمنع الأخطاء الشائعة في حقل كلمة المرور

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

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

اسمح للمستخدمين بالتصريح عبر وسائل التواصل الاجتماعي

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

هل يؤثر موقع المستخدم على تجربة المستخدم للنموذج؟

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

إليك بعض الأشياء التي يجب الانتباه إليها:

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

خاتمة

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