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

مصمم UX من IBM Zoltan Collin.

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

زولتان كولين

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

في هذه المقالة، سنلقي نظرة على بعض تحسينات النموذج الجديدة في 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الإدخال للتحقق من بيانات الإدخال. على سبيل المثال، نريد إنشاء حقل يجب ملؤه:

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

هيكل نموذج JQuery Mobile

JQuery Mobile لاستخدام CSS لتصميم العناصر نموذج HTMLلجعلها أكثر جاذبية وأسهل في الاستخدام.

في JQuery Mobile، يمكنك استخدام عناصر النموذج التالية:

  • حقل إدخال النص
  • البحث عن حقل الإدخال
  • زر الراديو
  • خانة الاختيار
  • اختر قائمة
  • المنزلق
  • الوجه تبديل التبديل

في باستخدام مسج نموذج المحمول، يجب أن تعرف:

  • <Форма>يجب أن يكون للعنصر طريقة وسمة إجراء
  • يجب أن يكون لكل عنصر نموذج سمة "معرف" فريدة. يجب أن يكون المعرف فريدًا في جميع الصفحات في جميع أنحاء الموقع. يحدث هذا بسبب مسج موبايليتم تقديم آلية التنقل المكونة من صفحة واحدة بطريقة تجعل الكثيرين صفحات مختلفةمعًا
  • يجب أن يكون لكل عنصر نموذج تسمية. علامة تبويب الإعدادات لخصائص لتتناسب مع معرف العنصر

أمثلة

طريقة = "نشر" الإجراء = "demoform.html" >




جربها "

لإخفاء تسمية، استخدم فئة UI-hidden-accessible. يُستخدم هذا غالبًا عندما تقوم بإحالة عنصر كعلامة نائب:

أمثلة






جربها "

نصيحة:يمكننا استخدام سمة data-net-BTN = "true" لإضافة زر لمسح محتويات حقل الإدخال (رمز X على يمين حقل الإدخال):

أمثلة

<Ярлык = "имя_файла">اسم:
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">


جربها "

أيقونة نماذج الجوال jQuery

نموذج رمز الزر HTML القياسي <вход>العنصر (زر، إعادة تعيين، إرسال). سيقومون تلقائيًا بعرض الأنماط، وتكييف الأجهزة المحمولة تلقائيًا مع سطح المكتب:

أمثلة


<Тип входного = "Сброс" значение = "кнопка сброса">


جربها "

إذا كنت بحاجة إلى إضافة أنماط إضافية إلى<вход>الزر، يمكنك استخدام جدول البيانات * السمات التالي:

زر لإضافة أيقونة:


<Тип входного = "Сброс" значение = "кнопка сброса">


جربها "

مجال الحاويات

لجعل التسميات وعناصر النموذج تبدو أكثر ملاءمة للشاشات العريضة، من فضلك أو

يتم استخدام العنصر المحيط بعنصر التسمية/النموذج مع فئة "حقول واجهة المستخدم التي تحتوي على".
:

أمثلة










جربها "

نصيحة:لمنع jQuery Mobile من إضافة التصميم تلقائيًا العناصر التفاعليةاستخدام بيانات الدور = السمة "لا".

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

اتبع هذه القواعد السبعة لإنشاء نماذج بسيطة وواضحة:

القاعدة رقم 1: يجب أن تكون النماذج متوافقة مع الطريقة التي يُدخل بها المستخدم بياناته

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

القاعدة رقم 2: قلل عدد حقول الإدخال وحاجة المستخدم إلى الكتابة

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

اجعل النموذج بسيطًا وقصيرًا قدر الإمكان

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

لذلك، حاول تقليل الحاجة إلى الكتابة وأخطاء المستخدم.

الإعدادات الافتراضية الذكية

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

الكشف التلقائيسيوفر الموقع وقت المستخدم في البحث عن غرفة فندق

أزرار الاختيار لاختيارات مماثلة ولكنها حصرية بشكل متبادل

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

أشرطة التمرير للسعر الأدنى/الأقصى أو نطاق الميزانية

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

شريط تمرير AirBnB لتحديد السعر

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

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

لماذا لا يجب عليك أبدًا استخدام عناوين النص داخل الحقل

الرؤوس الموجودة في الحقل (أو العناصر النائبة) هي نص موجود داخل حقل النموذج ويختفي بمجرد أن يبدأ المستخدم في إدخال بياناته.

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

النص الموجود داخل الحقل ليس هو الأكثر أفضل بديلرأس مرئي

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

لماذا تعد محاذاة رؤوس الحقول إلى اليسار أمرًا سيئًا للأجهزة المحمولة

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

من الصعب جدًا ملاحظة الخطأ إذا لم تكن البيانات مرئية بالكامل

رأس علوي أو رأس مستجيب

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

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

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

القاعدة رقم 4: يجب أن يتم التحقق من صحة حقل النموذج في الوقت الفعلي

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

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

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

القاعدة رقم 5: عرض تخطيط لوحة المفاتيح وفقًا لبيانات الإدخال

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

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

القاعدة رقم 6: تقديم معلومات مفيدة في السياق

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

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

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

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

القاعدة رقم 7: استخدم تنسيقًا مرنًا

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

لا تستخدم تنسيقًا ثابتًا لإدخال البيانات

خاتمة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. استخدم قوائم الاختيار المناسبة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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