أساسيات التصميم

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

إنشاء واجهات سهلة الاستخدام

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

التصنيفات

هل تتذكر الغرض من استخدام عنصر <label>؟ يصف التصنيف عنصر تحكّم في النموذج. يساعد التصنيف المرئي والمكتوب جيدًا المستخدم على فهم الغرض من عنصر تحكُّم النموذج.

استخدام تصنيف لكل عنصر تحكّم في النموذج

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

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

صياغة التصنيف

لنفترض أنك تريد وصف حقل بريد إلكتروني. يمكنك إجراء ذلك على النحو التالي:

<label for="email">Enter your email address</label>

أو يمكنك وصفها على النحو التالي:

<label for="email">Email address</label>

ما هو الوصف الذي تختاره؟

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

موضع التصنيف

باستخدام CSS، يمكنك وضع تصنيف في أعلى عنصر تحكّم في النموذج وفي أسفله ويساره ويمينه. أين تضعه؟

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

تصميم النماذج

يمكن أن يؤدي تصميم النموذج الجيد إلى تقليل معدلات التراجع بشكل كبير. ساعِد المستخدمين على إدخال البيانات باستخدام العنصر المناسب ونوع الإدخال المناسب. تتوفّر العديد من عناصر النموذج وأنواع الإدخال التي يمكنك الاختيار من بينها. لتقديم أفضل تجربة مستخدم، استخدم العنصر ونوع الإدخال الأكثر ملاءمة لحالة الاستخدام الخاصة بك. إذا كان على المستخدم ملء سطور متعددة من النص، استخدِم العنصر <textarea>. عند الحاجة إلى قبول الأحكام والشروط الخاصة بموقعك الإلكتروني، استخدِم <input type="checkbox">.

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

مساعدة المستخدمين على التنقّل في النماذج

قد يكون التخطيط المذهل ممتعًا، ولكن قد يعيق إكمال نموذج.

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

مساعدة المستخدمين على التفاعل مع النماذج

لتجنب النقرات والنقرات غير المقصودة، ومساعدة المستخدمين على التفاعل مع النموذج، اجعل الأزرار كبيرة بما يكفي. يبلغ حجم هدف النقر المقترَح للزر 48 بكسل على الأقلّ. عليك أيضًا إضافة مسافات كافية بين عناصر التحكّم في النماذج باستخدام السمة margin في CSS لتجنُّب التفاعلات غير المقصودة.

الحجم التلقائي لعناصر التحكم في النموذج صغير جدًا لدرجة أنه يتعذّر استخدامه فعلاً. يجب زيادة المقاس باستخدام padding وتغيير font-size التلقائي.

يمكنك تحديد أحجام مختلفة لأجهزة التأشير المختلفة، مثل الماوس، باستخدام ميزة وسائط pointer في CSS.

// pointer device, for example, a mouse
@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }
}

تعرَّف على مزيد من المعلومات حول ميزة pointer لصفحات الأنماط المتتالية (CSS).

عرض الأخطاء وقت حدوثها

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

وضّح للمستخدمين البيانات التي يجب إدخالها

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

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>

وضِّح للمستخدمين الحقول المطلوبة.

<label for="name">Name (required)</label>
<input name="name" id="name" required>

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

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

التحقّق من استيعابك

اختبر معلوماتك حول تصميم النماذج

المراجِع

• إنشاء نماذج رائعة
• أفضل الممارسات لتصميم نماذج الأجهزة الجوّالة
• معهد Baymard: أبحاث تجربة المستخدم للتجارة الإلكترونية
• لا تجعلني أفكر