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

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

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

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

التصنيفات

هل تتذكر الغرض من العنصر <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 Institute: E-Commerce UX Research
• عدم جعلني أفكر