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

في القسم الأول، تعلّمت كيفية إنشاء نموذج أساسي. يتناول هذا القسم أفضل الممارسات. في هذه الوحدة، ستتعرّف على تجربة المستخدم (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>

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

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

التحقّق من فهمك

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

الموارد

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