مقالة مقدمة من wulin.com (www.vevb.com): مناقشة موجزة حول تصميم النماذج في تصميم الويب اليومي.
يجب تقسيم مربع الإدخال (الإدخال) إلى مجموعات بحيث يمكن للدماغ التعامل مع العلاقة بين المساحات الكبيرة بشكل جيد. - "دليل HTML موثوق"
تستخدم تطبيقات الويب دائمًا النماذج لمعالجة إدخال البيانات وتكوينها ، ولكن ليس كل النماذج متسقة. ستؤثر محاذاة منطقة الإدخال والعلامات المعنية وطرق التشغيل والعناصر المرئية المحيطة بشكل أو بآخر على سلوك المستخدم.
تصميم الشكل
بالنظر إلى أنه يجب على المستخدم إكمال النموذج بأقصى قدر ممكن ، ويمكن القول أن البيانات التي تم جمعها مألوفة للمستخدم (مثل الاسم ، والعنوان ، والمعلومات المدفوعة ، وما إلى ذلك) ، والعلامات المحاذاة رأسياً وصناديق الإدخال هي الأفضل. يتم محاذاة كل زوج من العلامات وصناديق الإدخال رأسياً لإعطاء شعور بأنه قريب من كليهما ، وتقلل المحاذاة اليسرى المتسقة من حركة العين ووقت المعالجة. يحتاج المستخدم فقط إلى التحرك في اتجاه واحد: لأسفل.
في هذا التصميم ، ينصح الملصقات الجريئة ، والتي يمكن أن تزيد من وزنها البصري وتزيد من أهمية. إن لم يكن جريئًا ، من وجهة نظر المستخدم ، سيكون نص العلامة ومربع الإدخال هو نفسه تقريبًا.
إذا كانت البيانات الموجودة على النموذج غير مألوفة أو مجمعة منطقياً (مثل مكونات متعددة للعنوان) ، فيمكن أن تقرأ العلامات المحاذاة اليسرى معلومات النموذج بسهولة. يحتاج المستخدمون فقط إلى البحث لأعلى ولأسفل في الملصق في العمود الأيسر دون مقاطعة تفكيرهم بواسطة مربع الإدخال. ولكن وبهذه الطريقة ، عادة ما يتم إطالة المسافة بين الملصق ومربع الإدخال المقابل بواسطة ملصق أطول ، مما قد يؤثر على الوقت لملء النموذج. يجب على المستخدم القفز ذهابًا وإيابًا للعثور على العلامات المقابلة وصناديق الإدخال.
هذا ينشئ حلًا بديلاً ، تخطيطًا محاذاة يميني للعلامات ، مما يجعل الاتصال بين العلامات وصناديق الإدخال أقرب. ومع ذلك ، فإن النتيجة هي أن الفراغات والعلامات غير المتكافئة على اليسار تجعل من الصعب على المستخدمين استرداد ما يجب ملؤه بسرعة.
بمساعدة العناصر المرئية
نظرًا لمزايا التصميم اليساري المحاذاة للتسمية (يسهل استردادها وتقليل الارتفاع العمودي) ، فمن المغري تصحيح عيوبه الرئيسية (فصل الملصق ومربع الإدخال).
حل واحد هو إضافة ألوان الخلفية وخطوط تقسيم. تنتج ألوان الخلفية المختلفة عمودًا من الملصقات الرأسية وعمود من مربعات الإدخال الرأسية. يتم فصل كل مجموعة من الملصقات وصناديق الإدخال بخطوط أفقية واضحة. على الرغم من أن هذا يبدو جيدًا ، إلا أنه لا تزال هناك مشاكل.
بمقارنة النموذج السابق (التمييز البصري الشخصي للمستخدم) ، يضيف هذا 15 عنصرًا بصريًا: الخطوط الوسطى ، الخلايا ذات اللون الخلفي ، والخطوط الأفقية. تقوم هذه العناصر بتحويل انتباه المستخدم وتجعل من الصعب على المستخدم التركيز على العناصر المهمة ، مثل العلامات وصناديق الإدخال. كما أشار إدوارد توفت: هناك اختلافات في المعلومات نفسها ، والتي تؤدي حتما إلى الاختلافات الحسية. وبعبارة أخرى ، فإن أي عنصر بصري غير مجدي للتخطيط سوف يعطل التصميم باستمرار. عندما تحاول تصفح العلامات الموجودة على اليسار ، ستجد أن مشهدك قد انقطع دائمًا ، توقف للتفكير في تلك الخطوط الأفقية والخلايا وألوان الخلفية.
بالطبع هذا لا يعني التخلي عن ألوان وخطوط الخلفية. لا تزال فعالة للغاية في تقسيم معلومات المنطقة ذات الصلة. على سبيل المثال ، يمكن دمج خط أفقي رقيق أو لون خلفية الضوء بصريًا مع البيانات ذات الصلة. تعتبر ألوان وخطوط الخلفية فعالة بشكل خاص لأزرار التشغيل الرئيسية التي تميز النموذج.
العمليات الأولية والثانوية
يتطلب التشغيل الرئيسي للنموذج (عادةً تقديم أو توفير) وزنًا بصريًا قويًا نسبيًا (في المثال أعلاه ، النغمات المشرقة ، الخطوط الجريئة ، ألوان الخلفية ، إلخ). هذا يعادل إعطاء المستخدم موجهًا: لديك/أنت على وشك إكمال النموذج.
عندما يكون للنموذج عمليات متعددة ، مثل الاستمرار والعودة ، من الضروري تقليل الوزن البصري للعمليات الثانوية. هذا يقلل من خطر الأخطاء التشغيلية المحتملة للمستخدمين.
على الرغم من أن المحتوى أعلاه يمكن أن يسمح لك بشكل أفضل بتصميم النماذج ، فإن الجمع بين التصميم والعناصر المرئية والمحتوى لا يزال يتطلب اختبار المستخدم وتحليل البيانات (تقييم الإكمال ، الإبلاغ عن الأخطاء ، إلخ).