سلسلة عناصر تصميم واجهة المستخدم : حقول الإدخال / النماذج
عند ما تطلب مجموعة من أكواب القهوة الملونة من تطبيق نون لابد لك من تعبئة نموذج إكمال الطلب لإتمام عملية الشراء، وفي نهاية كل عام دراسي يبدأ تسجيل الجامعات لخريجي الثانوية العامة لابد لهم من المرور بخطوة تعبئة نموذج تسجيل الالتحاق بالجامعة، وعند رغبتك بمراسلة مدونتك المفضلة لابد لك من تعبئة نموذج الاتصال، أحد أكثر عناصر تصميم واجهة المستخدم شيوعاً هي حقول الادخال النصية والنماذج التي تسمح بدورها للمستخدمين بإدخال النصوص لأجل أداء مهمه محددة ، ليس له شكل محدد ، بل لها عدة أشكال ومربعات حوار مختلفة على حسب الهدف المطلوب
تركيبة حقل النص
هنالك بعض القواعد البسيطة عند تصميم نماذج الإدخال النصي التي سوف تساهم بشكل إيجابي على المستخدمين في إكمال عملية خطوات التعبئة بكل يسر وسهولة وذلك من خلال إتباع بعض الإرشادات في تحسين عملية إدخال البيانات من قبل المستخدمين ، مبدئياً دعنا نتعرف على العناصر الأساسية عند بناء نماذج إدخال النصوص بشكل عام
هناك سبعة عناصر أساسية لبناء حقول النصوص :
١ . الحاوية – Container :
هو عباره عن مربع إدخال النص قابل للتفاعل أثناء تعبئة المستخدم
- يجب أن يتناسب حجم الحاوية مع مدخلات المستخدم المتوقعة إذا كان مربع النص يحتوي على سطر واحد فيجب أنه عندما يصل المؤشر إلى حافة الحقل من جهة اليمين أن يتم تمرير النص الأطول من سطر الإدخال تلقائيًا إلى اليسار (والعكس على حسب لغة الادخال Ar -En)
- كلما كان النص مخفيًا عن أعين المستخدم، أصبح من الصعب التحقق من صحة الإدخال
يفضل أن يرى المستخدم كل مدخلاته دون الحاجة إلى التمرير في حقل الإدخال
- تحديد عرض الحقل بناء على مقدار المدخلات المطلوبة لاتزيد ولاتنقص !
- إذا كان لديك حقل إدخال لـ ZIP في النموذج والمتعارف عليه أن ZIP يجب أن يحتوي على 5 أرقام، فمن الأفضل عدم عرض الحقل أكثر من اللازم ، وبالإضافة إلى ذلك عدم قبول أكثر من 5 أرقام
- انتبه من تصميم الحقول النصية والازرار بشكل متشابه
- حدد نمطًا واحد لحاويتك هل سوف تختار زوايا دائرية أو مربعة … أيا كان اختيارك يرجع بناء على ما تفضله ويتناسب مع تصميمك، لكن اختار نمط واحداً
- يجب أن يكون حقل النص سهل الاكتشاف من خلال ابراز الحقل النصي النشط عن غيره
٢ . إدخال النص – Input text :
كتابة النص داخل مربع النص من قبل المستخدم
٣ . نص التسمية – Label Text :
يتم استخدام نص التسمية لتوضيح للمستخدمين بالمعلومات المطلوبة مثلا: الاسم، الرقم السري، رقم الجوال…الخ، هناك عدة نقاط يجب الانتباه لها عند تسمية الحقول :
- وضوح التسمية من أجل مساعدة المستخدمين على فهم المعلومات المطلوبة سريعاً
- عدد الكلمات استخدم تسمية موجزه قصيره كلمة أو كلمتين
- ان يكون النص مرئي إما بأن تكون التسميه أعلى مربع النص أو داخل النص
- لا ينبغي اختصار نص التسمية بل أكتبه بشكل كامل ، ليس للمستخدم وقت لتخمين !
٤ . النص البديل – Placeholder text :
النص الذي يراه المستخدمين داخل الحقل النصي الغرض منه توضيح المطلوب
- مهم جداً تحديد النص المناسب فإذا طلبت من مستخدم كتابة مدينته، فلا تستخدم كلمه المدينة داخل النص، بل أكتب أسم مدينه معينه أسهل على المستخدم مثلاً مدينة الرياض وهو بذلك يدرك سريعاً أن المطلوب هو كتابة مدينته
كن حذرًا مع لون النص بأن يكون لون مختلف ومتباين عن النص الأساسي
٥ . النص المساعد أو نص الخطأ – Helper text / Error text (اختياري) :
يعمل النص المساعد كعنصر مساعد من خلال توفير معلومات إضافية حول حقل الإدخال مثل:
- كيف سيتم استخدام المعلومات التي يوفرها المستخدم
- متطلبات المعلومات (أي إرشادات إعداد كلمة المرور)
في بعض الحالات، يمكن تبديل النص المساعد بنص الخطأ الذي سيرشد المستخدمين مثلاً: رسالة الخطأ التي يراها المستخدم عندما يقوم بإدخال غير صحيح مثلاً يكون نص توضيح الخطاء كما يلي: (يجب عليك ادخال مفتاح مدينتك قبل ادخال رقم الهاتف )
- يمكن أن يكون نص المساعد متعدد الأسطر
٦ . رمز المسافة البادئة – Leading icon (اختياري) :
على الرغم من أن رمز المسافة البادئة عنصر اختياري في بعض الحالات ، فمن الممكن إنشاء تجربة مستخدم أفضل من خلال تقديم رمز ذي صلة بجوار مربع الإدخال. تساعد الأيقونة المحددة بشكل صحيح المستخدمين على فهم معنى الحقل سريعاً لن يحتاج المستخدمون إلى قراءة تسمية الحقل
٧ . الايقونة لاحقة – Trailing icon (اختياري) :
تساعد الأيقونة المحددة بشكل صحيح المستخدمين على فهم معنى الحقل سريعاً من دون أن يحتاج المستخدم إلى قراءة النص مثلا ايقونه شخص أو مفتاح وهكذا
- أيقونات “Cross” أو “Check”
عندما يقدم المستخدم معلومات غير صحيحة يمكنك إعلامه بذلك من خلال إظهار رسالة الخطأ ،ويفضل عرض رسالة الخطأ أسفل مربع الادخال و أن تكون مرئية و واضحه لمستخدم
لا يجب أن تذكر رسالة أن هناك خطأ فقط !! بل يجب أن توفر إرشادات حول كيفية إصلاح المشكلة
- رمز العين
بالنسبة لحقل كلمة المرور يمكنك إظهار رمز ” العين ” للسماح للمستخدمين برؤية ما تمت كتابته
- رمز الإدخال الصوتي :
تشير أيقونة الميكروفون إلى أنه يمكن للمستخدمين إدخال الصوت
أنواع الحقول النصية :
تختلف نماذج حقول الادخال باختلاف المتطلبات والاهداف ، فنماذج الحقول النصية لطلبات الشراء عبر المتاجر الالكترونية مختلف تماما عن نماذج تسجيل الحضور لدورة تعليمية لدى مؤسسة أكاديمية ، هناك بعض الارشادات التي سوف تساعدك عند بناء نماذج إدخال النصوص ، مايلي بعض الارشادات الهامة التي سوف تساهم في تحسين نماذجك في الموقع/التطبيق :
- استخدم نوع الإدخال المناسب :
اختيار نوع حقل الادخال الصحيح للبيانات المطلوبة يجنبك الأخطاء مما يجعل عملية الادخال سهلة وفعالة، مثلاً في النموذج ادناه حقل النصي لإدخال بطاقة الائتمان بشكل تلقائي أفضل من إدخال مربع نصي لارقام يسهل على المستخدم التأكد من مراجعته لرقم بلمحة سريعه نظراً لتقسيم الارقام أربع خانات بدلاً من خانه واحدة وبالاضافة إلى رقم الهاتف اختيار الحقل المخصص له يغني المستخدم عن كتابة مفتاح الدولة
- تفاعل الحقول النصية بناء على مدخلات المستخدم :
يفضل تغير حاله حقل النص بناء على مدخلات المستخدم مثلا: نشط في حالة الادخال الان ، معطل ، التحقق من الصحة ، إدخال خاطئ
- اختيار أفضل نمط حقل نصي :
بالأغلب سيكون لديك ثلاثة خيارات رئيسية لتحديد تسمية الحقل إما :
- محاذاة لأعلى
- محاذاة اليمين
- محاذاة اليسار
سيعتمد أفضل أسلوب بالنسبة لك على حسب الهدف والأحجام الرئيسية للشكل ومكتبة المكونات والنظام الأساسي الذي تصممه من أجله، وبالمناسبة لكل منهم مزايا وعيوب
- تسميات محاذاة إلى اليسار :
اختيار جيد عندما تكون البيانات المطلوبة غير مألوفة للمستخدمين
- المزايا: تسميات قابلة للتطوير بسهولة ، واستخدام جيد للمساحة الرأسية
- العيوب: المسافة الزائدة والمتغيرة بين التسميات والمدخلات المقابلة تزيد من وقت إنهاء المهمة
- تسميات محاذاة إلى اليمين :
يعتبر أفضل في إكمال النموذج بشكل أسرع مرتين تقريبًا مقابل التسميات المحاذاة إلى اليسار
- المزايا: يتم وضع تسميات الحقول النصية والمدخلات بشكل وثيق مما يحد من عدد حركات العين مما يؤدي إلى وقت إكمال سريع
- العيوب: من الصعب مسح النموذج ضوئيًا بسرعة وفهم جميع المعلومات المطلوبة
- تسميات محاذاة لأعلى :
أسرع وقت للإنجاز وأفضل خيار لغالبية الحالات تعمل بشكل جيد على الهاتف المحمول لأنها لا تتطلب الكثير من المساحة الأفقية
- المزايا: السماح للمستخدمين بالتقاط تسمية الإدخال وإدخال النص بحركة عين واحدة ، أسرع وقت للإكمال
- العيوب: تتطلب مساحة عمودية أكبر
- تناسب طول حقل الادخال النصي مع المدخلات :
سيؤدي استخدام طول إدخال متطابق لجميع الحقول النصية في النماذج إلى جعلها ممتعة بصريًا ولكن سيكون من الصعب إكمالها!!
- النص البديل – Placeholder :
أحد عيوب الاكتفاء بالنص البديل في حقول الادخال النصي اختفائه عند ادخال المستخدم مما يسبب ذلك إلى إجهاد ذاكرة المستخدمين قصيرة المدى بمحاولة تذكر هذا الحقل هل هو المطلوب منه الاسم الاول أو الاخير أو الرقم السري !!
يمكن أن يؤدي أحيانا النص البديل إلى إرباك المستخدمين،ومن الأفضل استخدام تسمية الحقل بالاضافة إلى نص البديل داخل مربع النص
- مساعدة المستخدمين في ملء النماذج من خلال الاكمال التلقائي / الاقتراحات :
- ساعد المستخدم باستخدام الإكمال التلقائي بناء على حفظ مسبق مثلاً : البريد الالكتروني ، رقم الهاتف ، المدنيه ..الخ
- ساعد المستخدم باختيار الكلمات الرئيسية والعبارات ذات الصلة باستخدام الاقتراح التلقائي تظهر الاقتراحات كقائمة منسدلة، مثلاً: قام بكتابة ( جامعة سـ..) أقترح عليه (جامعه سعود ،جامعة سطام…الخ)
- املأ الحقول مسبقًا بواسطة الإعدادات الافتراضية غالبًا ما يمكنك بسهولة اكتشاف بلد المستخدم والمدينة عن طريق IP أو الموقع الجغرافي
- استخدام التحقق من صحة المدخلات :
عندما يقوم المستخدم بإدخال خاطئ في النموذج يجب تنبيه بذلك بالشكل الصحيح حتى لا يتسبب ذلك بالتشتت و الارتباك أو رفضه إكمال تعبئة النموذج :
- اعرض رسائل التحقق بالقرب من مربع الإدخال الخاطئ
- لا تصرخ على المستخدمين!! يجب أن تخبر رسائل الخطأ المستخدمين بكيفية إصلاح المشكلة بدلاً من الاكتفاء بالتوضيح أنه هناك خطأ
- تجنب التحقق المبكر من الصحة عندما يتم وضع علامة على الحقل على أنه غير صالح قبل أن ينتهي المستخدم من الكتابة
- ضع في اعتبارك استخدام التحقق الصحيح بعلامة صح ذلك يساعد المستخدم أن يضيف له إحساسًا بالتقدم
- قلل عدد حقول الادخال النصي :
حاول ان تطلب من المستخدم عدد أقل بناءً على تحقيق الهدف المطلوب مثلاً عند تطبيقات التوصيل لاتحتاج من المستخدم تفاصيل حياته ! فقط الأسم والرقم السري و رقم الهاتف ليتم التواصل به لأن لا أحد سوف يطلب وجبه طعام وينتظر اشعار وصول الطلب عبر البريد الالكتروني !! اجعل العملية أسهل وأسرع
- اخفاء الحقول غير ذات صلة :
لاتظهر كافه حقول الادخال النصية مره واحده! فإذا كان هناك سؤال يحتاج ان نفصل به مثلاً خيارات الدفع لاتفتح خيار تعبئة نموذج بطاقة الائتمان والمستخدم يرغب بالدفع عند الاستلام اجعلها مخفيه إلى حين اختيارها
- استخدام المنطق :
يسمح المنطق بإظهار الحقول أو إخفاؤها تلقائيًا وتخطي الصفحات في نموذج ، بناءً على إجابات المستخدم هذا الامر لن يساعد في تقليل عدد الحقول ، بل سيسهل عملية التعبئة ويجعلها شبية بالمحادثات الواقعية
- تقسيم المدخلات كمجموعات :
لتبسيط النماذج الطويلة والتي تتطلب معلومات تفصيلية هي البدء في تجميع الحقول ذات الصلة، في علم نفس الجشطالت هناك عدة مبادئ للتجميع تساعد العناصر على الشعور بالارتباط منها: القرب والتشابه والاستمرارية والإغلاق والترابط سيؤدي ذلك لتجميع العديد من الحقول غير المهيكلة في مجموعات قليلة يمكن التحكم فيها بشكل كبير مثل: المعلومات الشخصية، التوصيل،الدفع …. وهكذا
- تقسم الاشكال المعقدة الى بضع خطوات بسيطة :
في بعض الأحيان ، حتى بعد تقليل الخطوات غير ضروريه لايزال النموذج طويل! لذلك يفضل تقسيم إلى سلسلة من الخطوات إلى المهام الصغيرة أسهل بكثير ويحفزهم على إكمال تعبئة النموذج حتى النهاية.
- توضيح مستوى التقدم عند تخطي الخطوه الاولى وضح للمستخدم أين هو في سلسلة تعبئة النموذج وكم المتبقى له لإنهائه هذا يعطي المزيد من الرضا ويحفز للمضي قدمًا
- لا تقم بصقل النموذج بالعديد من الخطوات ذلك يتسبب بازعاج المستخدمين
- اعرض ملخص للمعلومات الأساسية في النهاية قبل الارسال
- قلل من مصادر التشتت :
إذا كان النموذج طويلاًا بما يكفي لتقسيمه إلى خطوات متعددة ، فيفضل أنيكون في مساحة منفصلة بشكل واضح بدون عرض التنقل العام أو أي روابط من شأنها أن تسبب ارتباك وتشتت لدى المستخدم
- اعرض نوع لوحة المفاتيح :
يوفر Android أو iOS عدة أنواع مختلفة من لوحة المفاتيح ، كل منها مصمم لتسهيل نوع مختلف من الإدخال. لتبسيط إدخال البيانات ، يجب أن تكون لوحة المفاتيح المعروضة عند تحرير حقل نصي مناسبة لنوع المحتوى في الحقل
- اسمح للمستخدمين بإلغاء إخفاء كلمة المرور الخاصة بهم بدلاً من مطالبتهم بإدخالها مرتين وستعمل أيضًا بشكل أفضل مع تطبيقات إنشاء كلمات المرور
- عرض متطلبات كلمة المرور طوال الوقت والإشارة إلى تقدم المستخدمين نحو تلبية جميع المعايير حاول تبسيط المتطلبات للمستخدم.
- يشجع استخدام مقاييس القوة المستخدمين على إنشاء كلمات مرور أقوى
المقالتين مترجمه بتصرف من مدونة UX Collective للكاتب Taras Bakusevych & مدونة uxplanet للكاتب Nick Babich
شارِك… ودَع النقاش السلوكي يمتد 💬
سلسلة عناصر تصميم واجهة المستخدم : حقول الإدخال / النماذج
عند ما تطلب مجموعة من أكواب القهوة الملونة من تطبيق نون لابد لك من تعبئة نموذج إكمال الطلب لإتمام عملية الشراء، وفي نهاية كل عام دراسي يبدأ تسجيل الجامعات لخريجي الثانوية العامة لابد لهم من المرور بخطوة تعبئة نموذج تسجيل الالتحاق بالجامعة، وعند رغبتك بمراسلة مدونتك المفضلة لابد لك من تعبئة نموذج الاتصال، أحد أكثر عناصر تصميم واجهة المستخدم شيوعاً هي حقول الادخال النصية والنماذج التي تسمح بدورها للمستخدمين بإدخال النصوص لأجل أداء مهمه محددة ، ليس له شكل محدد ، بل لها عدة أشكال ومربعات حوار مختلفة على حسب الهدف المطلوب
تركيبة حقل النص
هنالك بعض القواعد البسيطة عند تصميم نماذج الإدخال النصي التي سوف تساهم بشكل إيجابي على المستخدمين في إكمال عملية خطوات التعبئة بكل يسر وسهولة وذلك من خلال إتباع بعض الإرشادات في تحسين عملية إدخال البيانات من قبل المستخدمين ، مبدئياً دعنا نتعرف على العناصر الأساسية عند بناء نماذج إدخال النصوص بشكل عام
هناك سبعة عناصر أساسية لبناء حقول النصوص :
١ . الحاوية – Container :
هو عباره عن مربع إدخال النص قابل للتفاعل أثناء تعبئة المستخدم
- يجب أن يتناسب حجم الحاوية مع مدخلات المستخدم المتوقعة إذا كان مربع النص يحتوي على سطر واحد فيجب أنه عندما يصل المؤشر إلى حافة الحقل من جهة اليمين أن يتم تمرير النص الأطول من سطر الإدخال تلقائيًا إلى اليسار (والعكس على حسب لغة الادخال Ar -En)
- كلما كان النص مخفيًا عن أعين المستخدم، أصبح من الصعب التحقق من صحة الإدخال
يفضل أن يرى المستخدم كل مدخلاته دون الحاجة إلى التمرير في حقل الإدخال
- تحديد عرض الحقل بناء على مقدار المدخلات المطلوبة لاتزيد ولاتنقص !
- إذا كان لديك حقل إدخال لـ ZIP في النموذج والمتعارف عليه أن ZIP يجب أن يحتوي على 5 أرقام، فمن الأفضل عدم عرض الحقل أكثر من اللازم ، وبالإضافة إلى ذلك عدم قبول أكثر من 5 أرقام
- انتبه من تصميم الحقول النصية والازرار بشكل متشابه
- حدد نمطًا واحد لحاويتك هل سوف تختار زوايا دائرية أو مربعة … أيا كان اختيارك يرجع بناء على ما تفضله ويتناسب مع تصميمك، لكن اختار نمط واحداً
- يجب أن يكون حقل النص سهل الاكتشاف من خلال ابراز الحقل النصي النشط عن غيره
٢ . إدخال النص – Input text :
كتابة النص داخل مربع النص من قبل المستخدم
٣ . نص التسمية – Label Text :
يتم استخدام نص التسمية لتوضيح للمستخدمين بالمعلومات المطلوبة مثلا: الاسم، الرقم السري، رقم الجوال…الخ، هناك عدة نقاط يجب الانتباه لها عند تسمية الحقول :
- وضوح التسمية من أجل مساعدة المستخدمين على فهم المعلومات المطلوبة سريعاً
- عدد الكلمات استخدم تسمية موجزه قصيره كلمة أو كلمتين
- ان يكون النص مرئي إما بأن تكون التسميه أعلى مربع النص أو داخل النص
- لا ينبغي اختصار نص التسمية بل أكتبه بشكل كامل ، ليس للمستخدم وقت لتخمين !
٤ . النص البديل – Placeholder text :
النص الذي يراه المستخدمين داخل الحقل النصي الغرض منه توضيح المطلوب
- مهم جداً تحديد النص المناسب فإذا طلبت من مستخدم كتابة مدينته، فلا تستخدم كلمه المدينة داخل النص، بل أكتب أسم مدينه معينه أسهل على المستخدم مثلاً مدينة الرياض وهو بذلك يدرك سريعاً أن المطلوب هو كتابة مدينته
كن حذرًا مع لون النص بأن يكون لون مختلف ومتباين عن النص الأساسي
٥ . النص المساعد أو نص الخطأ – Helper text / Error text (اختياري) :
يعمل النص المساعد كعنصر مساعد من خلال توفير معلومات إضافية حول حقل الإدخال مثل:
- كيف سيتم استخدام المعلومات التي يوفرها المستخدم
- متطلبات المعلومات (أي إرشادات إعداد كلمة المرور)
في بعض الحالات، يمكن تبديل النص المساعد بنص الخطأ الذي سيرشد المستخدمين مثلاً: رسالة الخطأ التي يراها المستخدم عندما يقوم بإدخال غير صحيح مثلاً يكون نص توضيح الخطاء كما يلي: (يجب عليك ادخال مفتاح مدينتك قبل ادخال رقم الهاتف )
- يمكن أن يكون نص المساعد متعدد الأسطر
٦ . رمز المسافة البادئة – Leading icon (اختياري) :
على الرغم من أن رمز المسافة البادئة عنصر اختياري في بعض الحالات ، فمن الممكن إنشاء تجربة مستخدم أفضل من خلال تقديم رمز ذي صلة بجوار مربع الإدخال. تساعد الأيقونة المحددة بشكل صحيح المستخدمين على فهم معنى الحقل سريعاً لن يحتاج المستخدمون إلى قراءة تسمية الحقل
٧ . الايقونة لاحقة – Trailing icon (اختياري) :
تساعد الأيقونة المحددة بشكل صحيح المستخدمين على فهم معنى الحقل سريعاً من دون أن يحتاج المستخدم إلى قراءة النص مثلا ايقونه شخص أو مفتاح وهكذا
- أيقونات “Cross” أو “Check”
عندما يقدم المستخدم معلومات غير صحيحة يمكنك إعلامه بذلك من خلال إظهار رسالة الخطأ ،ويفضل عرض رسالة الخطأ أسفل مربع الادخال و أن تكون مرئية و واضحه لمستخدم
لا يجب أن تذكر رسالة أن هناك خطأ فقط !! بل يجب أن توفر إرشادات حول كيفية إصلاح المشكلة
- رمز العين
بالنسبة لحقل كلمة المرور يمكنك إظهار رمز ” العين ” للسماح للمستخدمين برؤية ما تمت كتابته
- رمز الإدخال الصوتي :
تشير أيقونة الميكروفون إلى أنه يمكن للمستخدمين إدخال الصوت
أنواع الحقول النصية :
تختلف نماذج حقول الادخال باختلاف المتطلبات والاهداف ، فنماذج الحقول النصية لطلبات الشراء عبر المتاجر الالكترونية مختلف تماما عن نماذج تسجيل الحضور لدورة تعليمية لدى مؤسسة أكاديمية ، هناك بعض الارشادات التي سوف تساعدك عند بناء نماذج إدخال النصوص ، مايلي بعض الارشادات الهامة التي سوف تساهم في تحسين نماذجك في الموقع/التطبيق :
- استخدم نوع الإدخال المناسب :
اختيار نوع حقل الادخال الصحيح للبيانات المطلوبة يجنبك الأخطاء مما يجعل عملية الادخال سهلة وفعالة، مثلاً في النموذج ادناه حقل النصي لإدخال بطاقة الائتمان بشكل تلقائي أفضل من إدخال مربع نصي لارقام يسهل على المستخدم التأكد من مراجعته لرقم بلمحة سريعه نظراً لتقسيم الارقام أربع خانات بدلاً من خانه واحدة وبالاضافة إلى رقم الهاتف اختيار الحقل المخصص له يغني المستخدم عن كتابة مفتاح الدولة
- تفاعل الحقول النصية بناء على مدخلات المستخدم :
يفضل تغير حاله حقل النص بناء على مدخلات المستخدم مثلا: نشط في حالة الادخال الان ، معطل ، التحقق من الصحة ، إدخال خاطئ
- اختيار أفضل نمط حقل نصي :
بالأغلب سيكون لديك ثلاثة خيارات رئيسية لتحديد تسمية الحقل إما :
- محاذاة لأعلى
- محاذاة اليمين
- محاذاة اليسار
سيعتمد أفضل أسلوب بالنسبة لك على حسب الهدف والأحجام الرئيسية للشكل ومكتبة المكونات والنظام الأساسي الذي تصممه من أجله، وبالمناسبة لكل منهم مزايا وعيوب
- تسميات محاذاة إلى اليسار :
اختيار جيد عندما تكون البيانات المطلوبة غير مألوفة للمستخدمين
- المزايا: تسميات قابلة للتطوير بسهولة ، واستخدام جيد للمساحة الرأسية
- العيوب: المسافة الزائدة والمتغيرة بين التسميات والمدخلات المقابلة تزيد من وقت إنهاء المهمة
- تسميات محاذاة إلى اليمين :
يعتبر أفضل في إكمال النموذج بشكل أسرع مرتين تقريبًا مقابل التسميات المحاذاة إلى اليسار
- المزايا: يتم وضع تسميات الحقول النصية والمدخلات بشكل وثيق مما يحد من عدد حركات العين مما يؤدي إلى وقت إكمال سريع
- العيوب: من الصعب مسح النموذج ضوئيًا بسرعة وفهم جميع المعلومات المطلوبة
- تسميات محاذاة لأعلى :
أسرع وقت للإنجاز وأفضل خيار لغالبية الحالات تعمل بشكل جيد على الهاتف المحمول لأنها لا تتطلب الكثير من المساحة الأفقية
- المزايا: السماح للمستخدمين بالتقاط تسمية الإدخال وإدخال النص بحركة عين واحدة ، أسرع وقت للإكمال
- العيوب: تتطلب مساحة عمودية أكبر
- تناسب طول حقل الادخال النصي مع المدخلات :
سيؤدي استخدام طول إدخال متطابق لجميع الحقول النصية في النماذج إلى جعلها ممتعة بصريًا ولكن سيكون من الصعب إكمالها!!
- النص البديل – Placeholder :
أحد عيوب الاكتفاء بالنص البديل في حقول الادخال النصي اختفائه عند ادخال المستخدم مما يسبب ذلك إلى إجهاد ذاكرة المستخدمين قصيرة المدى بمحاولة تذكر هذا الحقل هل هو المطلوب منه الاسم الاول أو الاخير أو الرقم السري !!
يمكن أن يؤدي أحيانا النص البديل إلى إرباك المستخدمين،ومن الأفضل استخدام تسمية الحقل بالاضافة إلى نص البديل داخل مربع النص
- مساعدة المستخدمين في ملء النماذج من خلال الاكمال التلقائي / الاقتراحات :
- ساعد المستخدم باستخدام الإكمال التلقائي بناء على حفظ مسبق مثلاً : البريد الالكتروني ، رقم الهاتف ، المدنيه ..الخ
- ساعد المستخدم باختيار الكلمات الرئيسية والعبارات ذات الصلة باستخدام الاقتراح التلقائي تظهر الاقتراحات كقائمة منسدلة، مثلاً: قام بكتابة ( جامعة سـ..) أقترح عليه (جامعه سعود ،جامعة سطام…الخ)
- املأ الحقول مسبقًا بواسطة الإعدادات الافتراضية غالبًا ما يمكنك بسهولة اكتشاف بلد المستخدم والمدينة عن طريق IP أو الموقع الجغرافي
- استخدام التحقق من صحة المدخلات :
عندما يقوم المستخدم بإدخال خاطئ في النموذج يجب تنبيه بذلك بالشكل الصحيح حتى لا يتسبب ذلك بالتشتت و الارتباك أو رفضه إكمال تعبئة النموذج :
- اعرض رسائل التحقق بالقرب من مربع الإدخال الخاطئ
- لا تصرخ على المستخدمين!! يجب أن تخبر رسائل الخطأ المستخدمين بكيفية إصلاح المشكلة بدلاً من الاكتفاء بالتوضيح أنه هناك خطأ
- تجنب التحقق المبكر من الصحة عندما يتم وضع علامة على الحقل على أنه غير صالح قبل أن ينتهي المستخدم من الكتابة
- ضع في اعتبارك استخدام التحقق الصحيح بعلامة صح ذلك يساعد المستخدم أن يضيف له إحساسًا بالتقدم
- قلل عدد حقول الادخال النصي :
حاول ان تطلب من المستخدم عدد أقل بناءً على تحقيق الهدف المطلوب مثلاً عند تطبيقات التوصيل لاتحتاج من المستخدم تفاصيل حياته ! فقط الأسم والرقم السري و رقم الهاتف ليتم التواصل به لأن لا أحد سوف يطلب وجبه طعام وينتظر اشعار وصول الطلب عبر البريد الالكتروني !! اجعل العملية أسهل وأسرع
- اخفاء الحقول غير ذات صلة :
لاتظهر كافه حقول الادخال النصية مره واحده! فإذا كان هناك سؤال يحتاج ان نفصل به مثلاً خيارات الدفع لاتفتح خيار تعبئة نموذج بطاقة الائتمان والمستخدم يرغب بالدفع عند الاستلام اجعلها مخفيه إلى حين اختيارها
- استخدام المنطق :
يسمح المنطق بإظهار الحقول أو إخفاؤها تلقائيًا وتخطي الصفحات في نموذج ، بناءً على إجابات المستخدم هذا الامر لن يساعد في تقليل عدد الحقول ، بل سيسهل عملية التعبئة ويجعلها شبية بالمحادثات الواقعية
- تقسيم المدخلات كمجموعات :
لتبسيط النماذج الطويلة والتي تتطلب معلومات تفصيلية هي البدء في تجميع الحقول ذات الصلة، في علم نفس الجشطالت هناك عدة مبادئ للتجميع تساعد العناصر على الشعور بالارتباط منها: القرب والتشابه والاستمرارية والإغلاق والترابط سيؤدي ذلك لتجميع العديد من الحقول غير المهيكلة في مجموعات قليلة يمكن التحكم فيها بشكل كبير مثل: المعلومات الشخصية، التوصيل،الدفع …. وهكذا
- تقسم الاشكال المعقدة الى بضع خطوات بسيطة :
في بعض الأحيان ، حتى بعد تقليل الخطوات غير ضروريه لايزال النموذج طويل! لذلك يفضل تقسيم إلى سلسلة من الخطوات إلى المهام الصغيرة أسهل بكثير ويحفزهم على إكمال تعبئة النموذج حتى النهاية.
- توضيح مستوى التقدم عند تخطي الخطوه الاولى وضح للمستخدم أين هو في سلسلة تعبئة النموذج وكم المتبقى له لإنهائه هذا يعطي المزيد من الرضا ويحفز للمضي قدمًا
- لا تقم بصقل النموذج بالعديد من الخطوات ذلك يتسبب بازعاج المستخدمين
- اعرض ملخص للمعلومات الأساسية في النهاية قبل الارسال
- قلل من مصادر التشتت :
إذا كان النموذج طويلاًا بما يكفي لتقسيمه إلى خطوات متعددة ، فيفضل أنيكون في مساحة منفصلة بشكل واضح بدون عرض التنقل العام أو أي روابط من شأنها أن تسبب ارتباك وتشتت لدى المستخدم
- اعرض نوع لوحة المفاتيح :
يوفر Android أو iOS عدة أنواع مختلفة من لوحة المفاتيح ، كل منها مصمم لتسهيل نوع مختلف من الإدخال. لتبسيط إدخال البيانات ، يجب أن تكون لوحة المفاتيح المعروضة عند تحرير حقل نصي مناسبة لنوع المحتوى في الحقل
- اسمح للمستخدمين بإلغاء إخفاء كلمة المرور الخاصة بهم بدلاً من مطالبتهم بإدخالها مرتين وستعمل أيضًا بشكل أفضل مع تطبيقات إنشاء كلمات المرور
- عرض متطلبات كلمة المرور طوال الوقت والإشارة إلى تقدم المستخدمين نحو تلبية جميع المعايير حاول تبسيط المتطلبات للمستخدم.
- يشجع استخدام مقاييس القوة المستخدمين على إنشاء كلمات مرور أقوى
المقالتين مترجمه بتصرف من مدونة UX Collective للكاتب Taras Bakusevych & مدونة uxplanet للكاتب Nick Babich