5 نصائح لتصميم النماذج الملائمة للجوّال

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

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

هيا بنا إلى العمل!

لماذا من المهم أن تكون النماذج الخاصة بك متوافقة مع الأجهزة المحمولة

تأتي الأشكال بجميع الأشكال والأحجام. الأكثر شيوعًا ، أنك ستتعامل مع نماذج الاتصال:

تحظى نماذج الاشتراك (أو الاشتراكات) بشعبية ملحوظة أيضًا لأنها تتيح لك جمع رسائل البريد الإلكتروني واستهدافها أثناء الحملات:

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

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

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

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

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

5 نصائح لتصميم نماذج ملائمة للجوال

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

1. قم بإزالة أي أقسام غير ضرورية

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

فيما يلي مثال سريع على نموذج الاتصال مع بعض الحقول الإضافية التي يمكنه الاستغناء عنها:

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

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

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

2. استخدم القوائم المنسدلة عندما يكون ذلك ممكنًا

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

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

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

1. قم بإعداد حقل لا يقبل سوى المدخلات العددية.
2. صمم قائمة منسدلة تتضمن جميع الأوقات المتاحة للحجز.

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

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

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

3. تأكد من سهولة لمس أزرار الإرسال

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

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

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

لتصميم أزرار إرسال أفضل للجوال ، إليك ثلاث نصائح سريعة يجب أن تضعها في اعتبارك:

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

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

4. تأكد من تحميل النماذج الخاصة بك بسرعة

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

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

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

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

5. اختبر النماذج الخاصة بك قبل أن تنشرها

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

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

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

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

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

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

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

استنتاج

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

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

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

هل لديك أي أسئلة حول كيفية إنشاء نماذج متوافقة مع الأجهزة المحمولة باستخدام Divi؟ اسأل بعيدا في قسم التعليقات أدناه!

الصورة المصغرة للمادة إيرينا أداموفيتش / shutterstock.com.