نموذج مسج المحمول. المشاكل التي تمت مواجهتها عند وضع أسماء الحقول على اليسار

مصمم UX من IBM Zoltan Collin.

إلى الإشارات المرجعية

زولتان كولين

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

يستخدم المصممون في أغلب الأحيان القوائم المنسدلة بشكل غير لائق، ولكن في رأي مدير منتج جوجل Luke Wroblewski، يجب استخدام هذا النمط فقط كملاذ أخير.

دعونا نلقي نظرة على بعض القيود:

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

كمية خيارات مرئيةقد تبدو القائمة على نظام التشغيل iOS غير مهمة للغاية

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

تقدير عدد الخيارات

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

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

مثال على استخدام أزرار التحكم المجزأة

يعتمد عدد الخيارات المرئية على عرض الشاشة وطول النص. ومع ذلك، يجب ألا تستخدم أكثر من خمسة خيارات

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

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

بالنسبة للقوائم الكبيرة والمتنوعة، من الأفضل استخدام بيانات المستخدم الموجودة للتأكد من تضمين خيارات الإجابات الشائعة في القائمة. في هذه الحالة، سيتمكن 90% من المستخدمين من تحديد الخيار المطلوب على الفور، وسيقوم الـ 10% المتبقية بالنقر على خيار “أخرى”، وهو ما سيتم توضيحه في السؤال التالي.

وعلى الرغم من أن "أخرى" ليست الحل الأكثر أناقة، إلا أن تحديد الأولويات يمكن أن يحسن تجربة المستخدم لمعظم المستخدمين.

قم بتقييم نموذج الإدخال المفضل لديك

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

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

بشكل عام، لوحة المفاتيح الرقمية هي الأكثر طريقة فعالةأدخل قيمة رقمية.

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

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

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

وهذا مهم بشكل خاص إذا لم يكن ترتيب فرز عناصر القائمة واضحًا تمامًا.

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

وينطبق الشيء نفسه على قائمة البلدان.

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

ل أرقام كسريةأو المتغيرات الموجودة على مقياس، فمن الأفضل استخدام شريط التمرير.

يبحث

وفقا لطلبك نموذج موقع الجوالوجد 2833 نتائج

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

  الامتثال: 7

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

  الامتثال: 7

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

  الامتثال: 7

• هنا سوف تكتشف الحقيقة الكاملة حول المواقع التجارة الإلكترونية: وفقا لأحدث الأبحاث في هذا المجال، وفقا ل على الأقل 59,8% شراة محتملينيرفضون الدفع مقابل ما أضافوه إلى سلة التسوق الخاصة بهم (MarketingSherpa 59.8%، SeeWhen 83% وMarketLive 62.14%). السؤال الرئيسي: لماذا يتخلى العملاء عن الشراء في كثير من الأحيان؟ الحقيقة هي أن هناك بعض الأخطاء الأساسية التي يرتكبها مطورو مواقع التجارة الإلكترونية في كثير من الأحيان. ما إذا كان هناك المبادئ العامةالتي تجعل من الصعب على المستخدمين شراء منتجاتنا؟ وهل هناك أي طريقة مجدية لتحسين أداء مبيعات ما نبيعه؟

  الامتثال: 7

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

  الامتثال: 7

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

  الامتثال: 7

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

  الامتثال: 7

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

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

أنواع المدخلات HTML5

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

• اللون - اختيار اللون
• التاريخ - اختيار التاريخ
• التاريخ والوقت - حدد التاريخ والوقت
• البريد الإلكتروني - التحقق من صحة قناع البريد الإلكتروني
• الرقم - أدخل الرقم
• النطاق - شريط تمرير النطاق
• بحث - حقل البحث
• الهاتف - التحقق من صحة قناع الهاتف
• الوقت - التوقيت
• عنوان URL - التحقق من صحة عنوان URL

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

1. نوع الإدخاللون

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

< input type = "color" / >

مثال على العمل:

يعتمد نمط النافذة المنبثقة على متصفحك. انقر فوق الزر لترى كيف يعمل.

اختر اللون الخاص بك:

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

2. تاريخ نوع الإدخال

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

< input type = "date" / >

مثال على العمل:

اختيار التاريخ:

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

يكتب إدخال HTMLالتاريخ مدعوم من قبل جميع المتصفحات تقريبًا. الاستثناءات هي Opera Mini ومتصفح Android الافتراضي.

3. نوع الإدخال التاريخ والوقت والوقت المحلي

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

< input type = "datetime-local" / >

مثال على العمل:

اختر التاريخ والوقت:

غير معتمدفي آي موبايل وأوبرا ميني. في المتصفحات الشائعة الأخرى (الجوال)، يعمل النوع بشكل صحيح إلى حد ما، ولكن حالات الأخطاء ومواطن الخلل ليست غير شائعة. ضع ذلك في الاعتبار أيضًا، ولا تنسَ احتياطيات JavaScript.

4. نوع الإدخال البريد الإلكتروني

هذا النوع لا يتطلب أي تمثيل. يستخدمه العديد من الأشخاص بالفعل وهو مدعوم من قبل جميع المتصفحات تقريبًا.

< input type = "email" / >

مثال على العمل:

أدخل عنوان بريدك الالكتروني:

قبل الإرسال، يتحقق المتصفح من صحة الحقل المملوء ويبلغ المستخدم إذا كان تنسيق الإدخال غير صالح. يعتمد الحساب على التعبير التالي (النص)@(المجال)

5. رقم نوع الإدخال والهاتف

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

مثال على العمل:

اختار القيمة:

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

< input type = "range" min = "5" max = "50" step = "5" / >

الدعم من الجميع المتصفحات الشعبيةباستثناء أوبرا ميني.

7. التحقق من صحة النموذج

أنها مريحة للغاية لتعيين خاص سمة HTMLالإدخال للتحقق من بيانات الإدخال. على سبيل المثال، نريد إنشاء حقل يجب ملؤه:

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

وتشير بيانات عام 2014 إلى أن 90% من البالغين في الولايات المتحدة وحدها يمتلكون هاتفاً محمولاً، و58% منهم أصحاب هواتف ذكية. 42% من الأمريكيين يمتلكون أجهزة لوحية. وتوقعت شركة eMarketer في تقرير لها أنه بحلول نهاية عام 2014، سيستخدم الناس حوالي 1.75 مليار هاتف ذكي في جميع أنحاء العالم.

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

تحسين النماذج للأجهزة المحمولة

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

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

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

1. قم بتضمين الأكثر فقط تفاصيل مهمةفي النموذج الخاص بك

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

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

2. استخدم محاذاة الارتفاع للتسميات وحقول الإدخال.

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

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

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

3. استخدم القوائم المنسدلة والقوائم المنسدلة

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

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

4. استخدم قوائم كافيةخيار

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

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

5. سهولة إدخال البيانات

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

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

6. تنسيق أزرار النموذج الخاص بك

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

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

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

7. قم بتعيين التكبير/التصغير باستخدام العلامة الوصفية لإطار العرض

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

8. توفير إمكانية حفظ البيانات

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

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

9. ساعد العملاء على تتبع تقدمهم

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

10. قم بتحميل النموذج بسرعة

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

وكما هو الحال دائمًا، اختبر نماذجك على جميع الأنظمة والأجهزة

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