أفضل الممارسات لإنشاء النماذج الإلكترونية

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

• التحقق المباشر من صحة المعلومة المدخلة ومدى توافقها مع الشروط المطلوبة وظهور رسالة توضح الخطأ بجانب خانة الإدخال وهذه العملية تُسهِّل على مستخدم الموقع تعديل الخطأ مباشرة.
• استخدام مسميات واضحة بجانب خانات المدخلات وعدم تشتيت مستخدم الموقع ولضمان عدم تعطيل وقته في التفكير في المقصود منها، وكذلك التأكد من وضع مسمى ما بجانب كل خانة مدخل، وقد لا يحدث هذا ولكن يتم التأكيد على هذه النصيحة لكي لا يغفل عنها مبرمج النموذج الإلكتروني.
• مناسبة طول خانة المدخل مع الطول المتوقع للمعلومة المتوقع إدخالها من قبل مستخدم الموقع، وإلا فمن غير المعقول أن تكون خانة الاسم الأول مكونة من سطرين أو أن تكون خانة العنوان مكونة من نصف سطر ومن المناسب أيضاً أن يتم إضافة عدَّاد للأحرف لمعرفة كم يتبقى ليصل المدخل إلى الحد الأقصى المسموح به وذلك في النصوص الطويلة.
• يجب أن يراعي المبرمج المرونة في عدم وضع شروط صعبة على المدخلات مثل أن تكون خانة رقم الجوال تتطلب أن يدخل مفتاح الدولة ثم وضع شرطة معينة ثم ثلاثة أرقام، ثم شرطة ثم بقية الأرقام، وهذا متعب لمستخدم الموقع وكذلك يحتمل الخطأ ويتطلب أيضًا توضيح بجانب الخانة، فلو كان مرناً من البداية وطلب إدخال الرقم بدون شرطات مع تحديد حد أعلى للأرقام بطريقة ذكية أو يتيح له اختيار مفتاح الدولة وبعدها يقوم المستخدم بإدخال رقمه مباشرة بدون شرطات، أما إذا كان هناك شروط ملزمة لا يمكن أن يكون المبرمج مرناً فيها؛ فعليه أن يضع جملة توضيحية ومثال بجانب الخانة.
• الحرص على أن تكون الأزرار الثانوية أصغر من الأزرار الرئيسية على سبيل المثال لا يجعل الزر “دخول” بنفس حجم “إلغاء”، والأفضل هو أن يكون زر “دخول” – بما أنه هو الرئيسي – أطول من زر الإلغاء.
• التناسق في جميع خواص النموذج لكي يتحرك المستخدم بنفس الآلية في جميع جزئيات النموذج على سبيل المثال إذا استخدم القائمة المنسدلة لاختيار معلومات معينة؛ فإنه من الأفضل أن يتم تطبيق القائمة المنسدلة في جميع الجزئيات التي تتطلب الاختيار من مجموعة بيانات.
• توزيع المعلومات المدخلة حسب فئاتها على شكل مجموعات بحيث تكون المعلومات الشخصية بجانب بعضها ومعلومات العمل ومعلومات الدفع وهذا يخدم المستخدم ويُسهِّل عليه عملية إدخال المعلومات.
• ترتيب المعلومات حسب الفئة أو حسب الترتيب الأبجدي وهذا يطبق في القوائم المنسدلة التي تحتوي على معلومات طويلة مثل اختيار الدولة أو اختيار الوظيفة وهذا يسهل على المستخدم الوصول إلى المعلومة التي تخصه واختيارها بشكل أسرع وكذلك إضافة ميزة الوصول للكلمة المطلوبة من القائمة عند الضغط على الحرف الأول منها مباشرة، وفي بعض الأحيان يفضل أن يكون النموذج أكثر ذكاء بحيث يتم وضع المؤشر على المعلومة المتوقع إدخالها وعلى سبيل المثال عند الدخول من السعودية يكون الاختيار الافتراضي هو السعودية.
• إضافة ميزة التنقل المتسلسل بين خانات النموذج عن طريق مفتاح “Tab” من خلال لوحة المفاتيح وبدون استخدام الفأرة.
• التعبئة التلقائية لبعض المعلومات المرتبطة بالمدخلات السابقة أو المتكررة وأحيانا يتم إضافة ميزة القراءة التلقائية لبعض المعلومات التي تم تخزينها في الكمبيوتر أثناء تعبئة المستخدم لنماذج أخرى في نفس الموقع أو في مواقع أخرى، وهناك طريقة أخرى في حال طلب معلومات موجودة مسبقاً كما في بعض المواقع عندما يطلب منك معلومات الدفع ويظهر لك معلومات لبطاقتك الفيزا التي دفعت بها سابقاً في نفس الموقع مع إعطائه الخيار بتغييرها.
• تقسيم النموذج في حالة النماذج الطويلة والتي تتطلب أكثر من خطوة بحيث يعرف المستخدم أنه في الخطوة الثانية وأنه قد تبقى لانتهائه من إكمال تعبئة النموذج خطوة أخيرة أو أكثر من خطوة ويحبذ تسمية الخطوة على سبيل المثال المعلومات الشخصية ثم معلومات الدفع ثم طريقة التسليم مع الحرص على تخزين كل خطوة ليتم العودة لها لاحقاً في حال عدم إكمال جميع الخطوات.
• وضيح مكان الخطأ وتغيير لونه ووضع رسالة واضحة للمستخدم لكي يقوم بتعديله مباشرة وبسهولة مع الحرص على حفظ المعلومات المدخلة بشكل صحيح وعدم إجبار المستخدم بإدخال كامل المعلومات مره أخرى في حال أخطأ في إدخال معلومة واحدة أو أكثر .
• استخدام الألوان الصحيحة والمتعارف عليها عالمياً ليسهل فهمها من جميع المستخدمين وخصوصاً فئات المعوقين أو كبار السن، على سبيل المثال اللون الأحمر لتوضيح أن هناك خطأ والأخضر يعني صحة المدخلات ومراعاة الذين عندهم مشاكل في رؤية بعض الألوان.
• مراعاة الجمهور المستهدف في الموقع واستخدم الكلمات السهلة والواضحة لهم؛ فإذا كان الجمهور هم الأشخاص العاديون البعيدون نوعاً ما عن التقنية فلا يتم استتخدام كلمات تقنيه غير واضحة لهم وإذا كان لا بد من ذلك فيتم وضع بجانبها علامة استفهام لتوضيح المطلوب بالتفصيل وبلغة سهله مع الأمثلة.
• الاختصار أكثر ما يمكن في كل ما يكتب بجانب الخانات لأن مستخدمي الإنترنت لا يقرؤون الجمل الطويلة غير الضرورية.
• توضيح المعلومات المطلوب إدخال بشكل إجباري والمعلومات الاختيارية وعدم إضافة متطلبات لا تحتاجها.

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

http://www.alriyadh.com/2011/06/20/article643430.html

مصدر الصورة