ست قواعد لبناء استمارة تواصل ناجحة في موقعك

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

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

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

1. المحاذاة

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

عمومًا، ستحدث مشاكل في تجربة الاستخدام إن خالفت المنهج الرأسي في ترتيب حقول الاستمارة، فقد نُشرت سلسلة من القواعد العامة بشأن تصميم استمارات الويب سُمِّيَت "واجهات مستخدم بسيطة لكن مهمة في الويب: 20 قاعدة لتصميم استمارات ويب يمكن استخدامها"، وقد اعتمدت جوجل تلك القواعد في 2014 واختبرتها مع دراسة تتبع العين التي ذكرناها.

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

إليك الآن ما يجب أن تفعله كي تطبق قاعدة المحاذاة على استماراتك:

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

2. أدرج كل الحقول التي لها علاقة

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

قال مايكل أجارد، المسؤول عن تحسين معدلات التحويل في Unbounce، في كلمة له في 2015 أنه وفريقه أرادوا أن يعرفوا ما الذي سيحدث لو قصّروا استمارة التواصل التالية:

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

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

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

أقترح عليك أن تبدأ بالحقول الأساسية أثناء تصميم استمارة التواصل، كما فعلت QuickBooks في الصورة التالية:

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

3. تبسيط المُدخَلات

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

الترتيب الآلي

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

أقنعة الإدخال

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

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

أنواع الإدخال

ستساعد أنواع الإدخال في html المستخدمين على أن يروا الخيارات المناسبة في لوحة المفاتيح أثناء كتابتهم على الهواتف، مما يوفر عليهم عناء كتابة كل شيء من الصفر (مثل com. للبريد).

لاحظ كيف تتغير لوحة المفاتيح من استمارة التواصل في Elluminati بناءً على كل حقل.

الإكمال الآلي لجوجل

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

المنطق الظرفي (Conditional Logic)

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

 توفّر أغلب ملحقات إنشاء الاستمارات، مثل Forminator، امتدادات لهذا الغرض.

شريط التقدّم Progress Bar

يشجّع هذا الشريط المستخدم على إتمام عملية التسجيل إذ يريه مكانه من نهاية الاستمارة بالتحديد.

4. أرشد المستخدم إلى تصحيح الخطأ بوضوح

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

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

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

توضح هذه الاستمارة من Hubspot الطريقة الصحيحة لمعالجة أخطاء المستخدم في استمارة التسجيل.

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

5. تجنب النصوص الإرشادية داخل الحقول

تبدو النصوص الإرشادية التي تستخدم داخل الحقول كالتالي:

لا تزال هذه الاستمارة من شركة Target تحتوي مشاكل بالنسبة لمن يحتاجون لأدوات مساعدة في القراءة (قابلية الوصول)، رغم إصلاح مشاكل متعلّقة بالنصوص الإرشادية.

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

وبرغم هذا فإن خبراء تجربة الاستخدام، مثل مجموعة Norman، يقولون إن هذا الأسلوب سيء في تصميم تجربة استخدام للاستمارات، وإليك أسبابًا تبيّن المشاكل التي قد تطرأ من اتّباع ذلك الأسلوب:

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

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

6. انتبه إلى تصميم الأزرار

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

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

وقد وُجد في اختبار أ/ب أسفله من Unbounce، أن النسخة التي بها نص يعرض القيمة التي سيحصل عليها المستخدم من تسجيله كانت أكثر نجاحًا أكثر في معدلات التحويل من النسخة الأولى بنسبة 31%.

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

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

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

خاتمة

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

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

ترجمة - وبتصرف - للمقال 6 Unbreakable Rules for Building the Perfect Contact Form لصاحبته Suzanne Scacca.