أنت تفعل كل ما تستطيع إنشاء موقع على شبكة الإنترنت من شأنها أن تقود الزوار إلى التحويل. عندما تدرس التحليلات ، يسعدك أن ترى أن رحلة المستخدم التي أنشأتها مدعومة من قبل زوارها ، مرارًا وتكرارًا. ومع ذلك ، هناك شيء يمنعهم من التحول.
Le نموذج الاتصال جزء أساسي من رحلة زوارك. حتى إذا كان لديك بالفعل كل ما يمكن أن يقدمه موقع ويب تقريبًا ، فإن ملف نموذج الاتصال يمكن أن تدمر التجربة إذا لم يتم استخدامها بشكل صحيح. أزرار "مكسورة"، وحقول مربكة، وخطوات كثيرة جدًا، وواجهة غير منظمة... وحتى موضع ملف نموذج الاتصال يمكن أن يعطل تجربة المستخدم.
هناك أشياء كثيرة يمكن أن تسوء.
قواعد 5 لبناء نموذج الاتصال المثالي
أظهرت دراسة تتبع العين من Google نشرت في عام 2014 أن اتباع إرشادات الاستخدام الأساسية للتصميم أشكال سيحسن تجربة المستخدم بشكل كبير. على وجه التحديد ، عندما يلبي نموذج الاتصال جميع القواعد ، يمكن لـ 78٪ من المستخدمين تعبئتها وإرسالها في محاولة واحدة. عندما ينتهك نموذج الاتصال هذه القواعد ، فإن 42٪ فقط قادرون على القيام بذلك في محاولة واحدة.
فضولي حول ماهية هذه القواعد؟ لذا استمر في القراءة.
القاعدة رقم 1: ركز على المحاذاة
كما سترى في القواعد الأخرى هنا ، غالبًا ما يشعر الناس بالقلق بشأن طول أشكال الاتصال ، مما يؤدي غالبًا إلى خيارات تصميم رديئة. خذ قضية المحاذاة ، على سبيل المثال.
قد ترى نموذجًا كهذا على موقع BrainTraffic الإلكتروني وتفكر: هممم ... لكن أليس هذا وقتًا طويلاً جدًا لإكماله؟
طريقة واحدة للتفكير في حل هذه "المشكلة" هي تحريك الملصقات إلى اليسار ووضع حقول الإجابة على اليمين. ومع ذلك ، سيخبرك خبراء UX أن هذا أمر مهم لأنه يضر بالقدرة على مسح النموذج. الأمر نفسه ينطبق إذا فكرت في وضع الحقول بجانب بعضها البعض أفقيًا.
إذا كنت تريد الخاص بك أشكال تتوافق جهات الاتصال مع معيار المحاذاة، وإليك ما عليك القيام به:
- قم بمحاذاة جميع التصنيفات وحقول النموذج إلى اليسار وزر الحث على اتخاذ إجراء الأساسي.
- أبدا محاذاة الحقول ذات الصلة أفقيا. يمكنك هيكلة النموذج بشكل منطقي ، ولكن يجب تكديس كل سؤال أو حقل عموديًا.
- يجب عرض أي حقل يحتوي على أسئلة متعددة الخيارات (مع أقل من ستة خيارات) في قائمة رأسية من النقاط أو خانات الاختيار ، وليس في قائمة منسدلة.
القاعدة 2: تشمل جميع الحقول ذات الصلة
عندما يتعلق الأمر بتصميم نماذج الاتصال ، فقد تعتقد أنه كلما كان ذلك أقصر كان ذلك أفضل ، أليس كذلك؟ ليس هذا هو الحال دائما. ما يهم أكثر هو تزويد المستخدمين بجميع الحقول الضرورية وذات الصلة.
فعل مايكل أجارد ، كبير مُحسِّن التحويل لـ Unbounce تقديم في عام 2015 والتي تناولت هذه القضية. أراد هو وفريقه معرفة ما سيحدث إذا اختصروا نموذج الاتصال هذا:
كما ترى ، أزالوا ما اعتقدوا أنه حقول غير ضرورية من أجل تبسيط عملية ملء النموذج. ومع ذلك ، عند الانتهاء من الاختبار ، وجدوا انخفاضًا بنسبة 14٪ في التحويلات باستخدام النموذج الأقصر.
القاعدة # 3: تبسيط الحقول
لا يهم إذا كان المستخدمون يتفاعلون مع نموذج الاتصال الخاص بك باستخدام سطح مكتب أو جهاز محمول ، أو إذا كانوا بحاجة إلى تقنية مساعدة لمساعدتهم ، فيجب أن يكون النموذج مجهزًا. لتبسيط عملية الدخول.
إليك بعض التقنيات التي يجب أن تعرفها:
تبويب
بالنسبة لمستخدمي سطح المكتب وأولئك الذين يعانون من مشكلات في إمكانية الوصول ، تأكد من أن نموذج الاتصال الخاص بك به ترتيب علامات تبويب منطقي ممكّنًا.
أقنعة الإدخال
بدلاً من إجبار المستخدمين على تخمين كيفية تنسيق حقول معينة ، يمكنك إضافتها باستخدام أقنعة الإدخال التي تقوم بتنسيقها تلقائيًا.
جوجل الإكمال التلقائي
بدلا من ترميز كل حقل بحيث يكون شكلت تلقائيًا وفقًا للمعايير الواجب احترامها ، قم بتنشيط الملء التلقائي باستخدام مكون Google Addresses Autofill الإضافي. لن يوفر عليك هذا فقط الاضطرار إلى التعامل مع الأخطاء الإملائية والعناوين المملوءة بشكل غير صحيح ، ولكنه سيوفر على زوارك من كتابة معظم هذه المعلومات.
القاعدة # 4: خروج الجميع
بينما أدرك أن هذه القاعدة تتعارض مع المبادئ الأساسية للحد الأدنى ، فهي قاعدة يجب أن تنتبه إليها بشدة لتجنب إحباط زوارك بلا داعٍ.
اسمحوا لي أن أشرح: لديك نموذج اتصال يبدو واضحًا جدًا. يقوم المستخدمون بملئه بناءً على ما تقترحه التسميات وينقرون على زر الإرسال. ثم تلقوا هذه الرسالة الحمراء الرهيبة: "لم تفعل ذلك بالشكل الصحيح! ارجع وصحح النموذج وأرسله مرة أخرى! "
من المحتمل أنك صادفته كمستخدم وأنت تعرف مدى إحباطه ، خاصةً إذا تم حذف بعض المعلومات التي أدخلتها عند إلقاء الخطأ. لذا بدلاً من ترك المستخدمين يخمنون ما الذي يجب إصلاحه وكيف ، لا تدع الأمر يصل إلى هذه النقطة. تهجى كل شيء في الطريق:
- قم بتوفير التركيز في هذا المجال (خاصة على الأجهزة المحمولة) حتى يعرف المستخدمون بالضبط أين يقومون بملء نموذج.
- اكتب جميع متطلبات التنسيق إذا كنت لا تستخدم أقنعة الإدخال لتنسيق الحقول تلقائيًا.
- وضّح بشكل صريح عندما يكون الحقل "اختياريًا" (استخدم الكلمة وليس علامة النجمة الحمراء).
- امنح المستخدمين خيار إظهار أو إخفاء حقل كلمة المرور عند إدخاله.
- عرض رسالة خطأ بمجرد مشاركة المستخدم في أحد الحقول. لا تنتظر حتى النهاية للقيام بذلك.
القاعدة رقم 5: لا تخفي النصيحة
يبدو نص اللوحة في نموذج جهة الاتصال كما يلي:
انظر كيف يضع الهدف التسميات في الميدان؟ في بعض نماذج الاتصال ، تختفي هذه العلامات / المؤشرات ببساطة عندما ينقر المستخدم على أحد الحقول. يعالج الهدف هذا الأمر بشكل مختلف قليلاً وينقل التسمية إلى أعلى مربع الحقل (انظر "عنوان البريد الإلكتروني").
بغض النظر عن كيفية التعامل مع ذلك ، فإن خبراء قابلية الاستخدام مثل المجموعة نيلسن نورمان، سيخبرك أن هذه ممارسة تصميم سيئة للأسباب التالية:
- هذا يمثل مشكلة بالنسبة للمستخدمين الذين يقومون بمهام متعددة أو مشتت الانتباه أو سريع الخطى للغاية في الحقل التالي. عندما يختفي الدليل ، يجب على المستخدمين مغادرة الحقل لإعادة اكتشاف ما يحتاجون إليه.
- كما تمنع النصائح التي تختفي المستخدمين من العودة إلى نموذج للتحقق من عملهم أو تصحيح خطأ دون حذف الاستجابة بشكل كامل لمعرفة ما هو أدناه.
- النص الرمادي الفاتح المستخدم في تلميحات العناصر النائبة ليس مثاليًا لسهولة القراءة.
- يمكن الخلط بين الحقول التي تحتوي على نص تلميح وبين الحقول التي ملأت البيانات بالفعل ، مما يترك المستخدمين لتجاهلها وإرسال النموذج وتلقي رسالة خطأ.
- بعض أدوات قراءة الشاشة غير قادرة على قراءة نص التلميح.
وفقًا لـ NNG ، يجد المستخدمون الحقول الفارغة أكثر جاذبية من تلك التي تحتوي على نص دليل. حتى إذا بدت النماذج الخاصة بك أطول لوضع هذه التسميات أو الواصفات فوق الحقل ، فسيؤدي ذلك إلى تحسين قابلية الاستخدام.
هذا كل شيء بالنسبة لهذه النصائح ، وآمل أن تساعدك في إنشاء نماذج اتصال أفضل.
