تعد نماذج الاتصال مكونًا رئيسيًا للعديد من مواقع الويب. على الرغم من أنها بسيطة بشكل عام ، إلا أنك تحتاج إلى التأكد من أنها سهلة الاستخدام إذا كنت ترغب في جمع العملاء المحتملين والبقاء على اتصال مع المستخدمين. لا يمثل هذا عادةً مشكلة في حركة مرور المكتب ، ولكن قد يكون استخدام النماذج صعبًا إذا كنت تستخدم جهازًا محمولاً.
في هذا البرنامج التعليمي ، سنتحدث قليلاً عن أهمية تصميم نماذج متوافقة مع الجوّال. بعد ذلك ، سنوجهك عبر خمس نصائح للتأكد من عمل النماذج بسلاسة على الأجهزة المحمولة.
دعونا نبدأ العمل
لماذا من المهم أن تكون النماذج الخاصة بك صديقة للجوال
تأتي الأشكال بجميع الأشكال والأحجام. في أغلب الأحيان ، سوف تتعامل مع نماذج الاتصال:
تعد نماذج الاشتراك (الاشتراك) شائعة جدًا أيضًا لأنها تتيح لك جمع رسائل البريد الإلكتروني واستهدافها أثناء الحملات:
ومع ذلك ، يمكن استخدام النماذج لجميع أنواع الأغراض الأخرى. على سبيل المثال ، يمكنك جمع المعلومات باستخدام استطلاع عبر الإنترنت أو استبيان ، في هذه الحالة ستحتاج إلى نماذج تسمح للمستخدمين بإدخال الردود.
بمعنى آخر ، النماذج متعددة الاستخدامات وتقريبًا تستخدم جميع المواقع النماذج بطريقة أو بأخرى. لذلك ، من الضروري أن تكون النماذج الخاصة بك سهلة الاستخدام (إلا إذا كنت ترغب في تقديم تجربة محبطة للزائرين).
عادةً ما يكون استخدام النماذج من كمبيوتر سطح المكتب أو الكمبيوتر المحمول أمرًا سهلاً للغاية. لديك ماوس ولوحة مفاتيح كاملتين ، لذا فإن اختيار الحقل الذي تريد استخدامه وإدخال البيانات لن يكون مشكلة. ومع ذلك ، فإن تصفح الويب من هاتفك الذكي أو أي جهاز مضغوط آخر له تعقيدات.
عند العمل بأصابعك على شاشة صغيرة ، قد يكون التفاعل مع النماذج مربكًا في بعض الأحيان بسبب قرارات التصميم السيئة. هذا شيء يجب تجنبه في تصميماتك الخاصة. بعد كل شيء ، إذا لم يتمكن مستخدمو الهاتف المحمول من التفاعل مع النماذج الخاصة بك ، فقد تفقد التحويلات أو العملاء المحتملين أو تزعج الزوار فقط.
من الأهمية بمكان أيضًا أن نفهم أن حركة مرور الهاتف المحمول أصبحت الآن ، إن لم تكن أكثر ، مهمة من مصادر سطح المكتب. في الواقع ، تجاوزت حركة المرور عبر الهاتف المحمول بالفعل الأخير في السنوات الأخيرة. هذا يعني أن تصميم موقع ويب سهل الاستخدام للجوال يجب أن يكون هدفك الرئيسي عند بدء مشروع جديد.
نصائح 5 لتصميم أشكال الهواتف المحمولة سهلة الاستخدام
لحسن الحظ ، فإن تصميم النماذج الملائمة للجوّال ليس بالصعوبة التي قد تتخيلها. في معظم الحالات ، تحتاج فقط إلى وضع بعض الأساسيات في الاعتبار واختبار نماذجك جيدًا قبل استخدامها. دعنا نتحدث عن كيفية القيام بذلك!
1. احذف جميع الأقسام غير الضرورية
كلما زاد عدد الحقول التي يحتوي عليها النموذج ، زادت صعوبة استخدامه على الهاتف المحمول. في الواقع ، يعد استخدام النماذج على الهاتف المحمول أكثر تعقيدًا. من خلال تقليل عدد الحقول أو الأقسام المضمنة في النماذج الخاصة بك ، يمكنك زيادة فرصك في أن يقوم الزوار بملئها.
هنا مثال سريع على ملف نموذج الاتصال مع بعض الحقول الإضافية غير الضرورية على الهاتف المحمول:
في معظم الحالات ، كل ما تحتاجه للحصول على ملف نموذج الاتصال هو الاسم والبريد الإلكتروني ونص الرسالة التي تريد تلقيها. يعتمد كل شيء آخر على نوع موقع الويب الذي تستخدمه وما إذا كنت تحاول جمع العملاء المحتملين.
في النهاية ، كلما قل عدد الحقول التي يحتوي عليها النموذج ، كان من الأسهل على مستخدمي الأجهزة المحمولة استخدامها. بعد كل شيء ، قد يكون اختيار حقل باستخدام شاشة تعمل باللمس أمرًا صعبًا ، بغض النظر عن مدى جودة التصميم ، وذلك لتقليل عدد القفزات التي يتعين على المستخدمين القيام بها.
هدفك في هذه المرحلة هو مراجعة النماذج الموجودة على موقعك. راجع كل قسم من أقسامهم وحدد ما إذا كنت تحتاج حقًا إلى أي حقول إضافية غير تلك المذكورة سابقًا. إذا كان هناك حقل غير ضروري ، فاحذفه فقط.
2. استخدم القوائم المنسدلة إن أمكن
يشعر معظمنا بالراحة في الكتابة على الأجهزة المحمولة واستخدام شاشات اللمس. ومع ذلك, إرسال رسالة نصية إلى صديق وملء ملف نموذج الاتصال هما تجربتان مختلفتان للغاية. مع هذه، هناك احتمال كبير أن تشعر بالإحباط إذا كان عليك كتابة الكثير من المعلومات.
تتمثل إحدى طرق تسهيل الحياة على الزائر المتنقل في تبسيط الخيارات التي يتعين عليهم اتخاذها بشأن عناصر موقعك. لإعطائك فكرة عما نتحدث عنه ، دعنا نستفيد من مثالنا السابق الحجز مطعم:
لصنع الحجز، ربما ستحتاج إلى ترك اسم أو بريد إلكتروني أو هاتف et تشير إلى الوقت، وكذلك عدد الأشخاص الحاضرين. هناك طريقتان يمكنك من خلالهما إنشاء حقل نموذج للتحقق من صحة الوقت من اليوم. الحجز:
- قم بتكوين حقل يقبل الإدخالات الرقمية فقط.
- صمم قائمة منسدلة تتضمن جميع الأوقات المتاحة للحجز.
كما يمكنك أن تتخيل ، فإن الأخير أكثر سهولة في الاستخدام لمستخدمي الهواتف المحمولة. باستخدام هذا الأسلوب ، لا يحتاجون إلى إدخال أرقام ويمكنهم فقط اختيار ما يناسبهم من الخيارات التي تقوم بتضمينها.
فكرة لك لإلقاء نظرة على النماذج الخاصة بك ومعرفة ما إذا كانت تتضمن الحقول التي يمكنك استبدالها بقوائم منسدلة. لن يكون هذا هو الحال دائمًا لأنه لا يمكنك استخدام القوائم المنسدلة لجمع الأسماء أو رسائل البريد الإلكتروني ، ولكن يمكن استخدام خيارات أخرى.
مهما كانت حالة استخدامهم ، فأنت تريد التأكد من أن القوائم المنسدلة تتضمن خيارات يسهل تحديدها من الأجهزة المحمولة. بمعنى آخر ، اجعل القائمة كبيرة بما يكفي بحيث لا يضطر شخص ما إلى النقر لاختيار الخيار الصحيح.
3. تأكد من أن أزرار التقديم سهلة اللمس
هذه النصيحة بسيطة للغاية ، لكن لا يزال يتعين ذكرها. يجب أن يتضمن كل نموذج تقوم بتصميمه طريقة للمستخدمين لتأكيد رغبتهم في إرسال البيانات التي تم إدخالها. في معظم الحالات ، يعني ذلك إنشاء زر إرسال:
عند استخدام جهاز كمبيوتر عادي ، فإن النقر فوق زر الإرسال هو أكثر شيء طبيعي في العالم. ومع ذلك ، فقد صادفنا بعض النماذج على الهاتف المحمول حيث يصعب الضغط على الزر.
إذا لم يتمكن زوار موقعك من تقديم المعلومات التي أدخلوها في النماذج الخاصة بك ، فسيتم إهدار كل جهودك. بالإضافة إلى ذلك ، لا شيء يبدو غير احترافي مثل الزر إرسال هذا لا يعمل كما هو متوقع.
لتصميم أزرار إرسال أفضل للجوال ، إليك ثلاث نصائح يجب مراعاتها:
- تأكد من أنها كبيرة بما يكفي بحيث يمكنك النقر بسهولة على جهاز محمول.
- لا تضع الأزرار بالقرب من العناصر الأخرى بحيث لا يلمسها المستخدمون بشكل صحيح.
- قم بتمييز الأزرار ، على سبيل المثال باستخدام ألوان متباينة أو طباعة إبداعية.
علاوة على كل ذلك ، سترغب أيضًا في اختبار الأزرار الخاصة بك قبل بدء تشغيل موقعك. سوف نتعمق أكثر في كيفية القيام بذلك في غضون دقيقة. لنتحدث الآن عن الأداء.
4. تأكد من تحميل النماذج بسرعة
نتحدث كثيرًا عن أداء موقع الويب في العديد من مقالاتنا وليس لأننا بحاجة إلى السرعة. النقطة المهمة هي أن معظم الناس لا يحبون المواقع البطيئة ، وهذا أمر منطقي تمامًا.
مع سرعة الإنترنت بشكل أسرع ، قد يكون من الصعب انتظار تحميل موقع ويب لفترة طويلة. بالإضافة إلى ذلك ، تميل سرعات الإنترنت عبر الهاتف المحمول إلى التباين أكثر بكثير من اتصالات المنزل العادية. هذا يعني أن موقع الويب الخاص بك سيحتاج إلى تحسين كبير للأجهزة المحمولة إذا كنت ترغب في إبقاء هؤلاء المستخدمين سعداء ، حيث لن يتمكن جميعهم من الوصول إلى الإنترنت (أي بسرعة).
يمكن أن تنطبق هذه النصيحة الخاصة على موقع الويب الخاص بك بالكامل ، ولكنها مهمة أيضًا لصفحات الجوال التي تعرض النماذج الخاصة بك. إذا كانت هذه الأجزاء من موقعك تستغرق وقتًا طويلاً للتحميل ، أنت تفقد التحويلات وفرص للتواصل مع زوار موقعك.
بشكل عام ، يجب ألا يستغرق تحميل موقع الويب أكثر من ثانيتين. بمجرد تجاوز هذا الحد ، تميل معدلات الارتداد إلى الزيادة بشكل كبير وهو أمر سيئ بالنسبة لك ، وبالنظر إلى طبيعة تصفح الأجهزة المحمولة ، فمن الأفضل إبقاء هذا الوقت منخفضًا قدر الإمكان. .
ومع أخذ ذلك في الاعتبار، هناك العديد من الطرق لتحسين الأداء العام لموقعك. على سبيل المثال، يمكنك الترقية إلى خطة أفضلالإقامة، استخدم سمة سريعة الاستجابة مُحسّنة للسرعة و ضغط الصور الخاصة بك. بالطبع ، سيساعد ذلك جميع المستخدمين ، لكنه سيكون مفيدًا بشكل خاص لأولئك الذين يستخدمون أجهزة أصغر.
5. اختبار النماذج الخاصة بك قبل النشر
بالنظر إلى أن النماذج هي جزء أساسي من معظم مواقع الويب ، فمن المنطقي أن تختبرها جيدًا قبل النشر. مع WordPress ، هذه العملية واضحة جدًا. يمكنك المضي قدمًا وتصميم صفحات معينة لعرض النماذج الخاصة بك ، وعدم نشرها حتى تختبرها بالكامل.
بالطبع ، أي مكون إضافي أو موضوع تريد استخدامه متروك لك (طالما أنه يمكن أن يساعد في تطوير مواقع الجوال). ومع ذلك ، عندما يتعلق الأمر بمرحلة الاختبار ، نوصيك بالحفاظ على بساطتها واستخدام أدوات مثل أدوات التنمية الكروم للقيام بالعمل.
دعنا نذهب من خلال مثال سريع. إذا كنت تستخدم Chrome ، فاستمر في معاينة الصفحة بالشكل الذي تريد اختباره. ثم انقر بزر الماوس الأيمن في أي مكان في هذه الصفحة واختر الخيار فحص . سيعرض Chrome مجموعة من الأدوات التي يمكنك استخدامها لمراجعة وتعديل شفرة مصدر الصفحة إلى اليمين وإلى اليسار ، يمكنك مشاهدة معاينة لمظهرها من جهاز محمول:
في الجزء العلوي من الشاشة ، يمكنك استخدام قائمة للتبديل بين درجات الدقة المختلفة. يتضمن Chrome إعدادات للعديد من أجهزة الجوال الشهيرة ، ولكن يمكنك أيضًا إدخال دقة مخصصة.
في هذه المرحلة ، يجب عليك التحقق من مظهر وسلوك نموذج الاتصال الخاص بك على أجهزة متعددة. خذ المثال أدناه - النموذج يعمل بشكل جيد ، لكن يمكنك أن ترى أنه لا يتناسب كما ينبغي. انتبه بشكل خاص للنصوص والأيقونات القريبة جدًا من حافة الشاشة:
تتمثل إحدى طرق منع هذه المشكلة في إبقاء النماذج بسيطة ، كما ذكرنا في النصيحة الأولى. في المثال أدناه ، يستخدم النموذج قوائم منسدلة متعددة ولا يتطلب سوى ثلاثة حقول. هذا يجعله سهل الاستخدام ، والأهم من ذلك ، أن النموذج بسيط للغاية بحيث يجب أن يكون مناسبًا تمامًا لجميع الأجهزة:
إذا كان لديك أي مشاكل مع أي من النماذج الخاصة بك ، فمن الواضح أنك بحاجة إلى حلها على الفور. خلاف ذلك ، فإنك تخاطر بعزل جمهور الهاتف المحمول ، وهو ما نحاول تجنبه أولاً!
وفي الختام
يعد التأكد من توافق موقع الويب الخاص بك مع الأجهزة المحمولة أمرًا أساسيًا للحفاظ على حركة المرور وعدم إحباط الزائرين. على وجه التحديد ، يجب أن تكون النماذج الخاصة بك سهلة الاستخدام على الأجهزة المحمولة إذا كنت لا تريد أن تفوت فرصة تلقي الرسائل أو جمع عملاء محتملين ذوي قيمة.
عندما يتعلق الأمر بتصميم النماذج المتوافقة مع الأجهزة المحمولة ، إليك خمس نصائح لتبسيط حياتك:
- احذف جميع الأقسام غير الضرورية.
- استخدم القوائم المنسدلة إن أمكن.
- تأكد من سهولة الضغط على أزرار التقديم.
- تأكد من تحميل النماذج بسرعة.
- اختبار النماذج الخاصة بك قبل نشرها.
