💫 🖖🏽 ⌚️ أنماط تصميم النموذج. مراجعة الكتاب 🎢 🎏 ❕

مقدمة من قبل مؤلف المراجعة

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

الجزء الأول. حول الحقول

1. الملصق الموجود في الأعلى أفضل من الملصق الموجود على اليسار.

السبب: أصبحت الأطروحة كلاسيكية من هذا النوع. تمت كتابة العديد من المقالات حول هذا الموضوع ، على سبيل المثال ، هذا واحد ومئات المقالات المماثلة. أيضًا ، بوضع الملصق على القمة نحصل على مساحة أكبر إذا كان الملصق طويلًا. قد يبدو الأمر واضحًا ، لكن العديد من المصممين يضعون العنيد على الملصقات على اليسار.

2. عدم وصف العناصر النائبة لقواعد التعبئة

السبب: تختفي العناصر النائبة عند النقر + اقتصاص في الحقل.

3. لا تطلب كلمة مرور مرة أخرى

السبب: يغضب للدخول مرتين.

4. نص خطأ للكتابة بين الملصق والحقل

السبب: لن يتم إغلاقها عن طريق الإكمال التلقائي أو لوحة المفاتيح على الهاتف المحمول.

الرأي: يبدو أن الأطروحة مفهومة ، لكنها تبدو غير عادية حقًا. طوال الوقت لتصميم واجهات (9+ سنوات) ، التقيت بذلك مرة واحدة فقط في تخطيطات مصمم واحد. ولكن ربما يجدر أخذ هذا النمط في الخدمة.

5. من الأفضل عدم استخدام التحديدات

السبب: إخفاء الخيارات ، عدم تكبير بعض الأجهزة ، نقرة إضافية ، شخص يحاول الكتابة إليهم.

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

6. عندما لا تحتاج إلى تقويم للإشارة إلى التواريخ

التقويم غير مطلوب من أجل:

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

7. إنشاء "عبارة مرور"

السبب: هناك رأي بأن العبارة أسهل في التذكر.
الرأي: ¯ \ _ (ツ) _ / ¯

8. استخدم "- / +" بدلاً من التحديد

القاعدة: استخدم الجمع والطرح إذا لم تكن الأرقام كبيرة. مثال جيد هو اختيار عدد الركاب لكل رحلة. يقول الكتاب أنه كانت هناك اختبارات على هذا الموضوع وأظهر زائد / ناقص أنفسهم أفضل.

9. يجب أن يكون حجم الحقل تحت المحتوى

لماذا: نعم ، لأنه منطقي! ولا يهم أن هذه الطريقة ليست حتى بهذه الطريقة. ولكن في نصف ثانية يتضح نوع المحتوى الذي يجب أن يكون هناك.

10. تحدث أين الخطأ

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

الجزء الثاني. حول الأزرار

1. محاذاة الأزرار إلى اليسار

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

2. لا تقم بتعطيل الزر

السبب: لن يكون من الممكن الانتقال إليه بالضغط على Tab ، ولن يتم قراءته من قبل بعض قارئي الشاشة وهو غير مرئي بشكل سيئ بسبب البهتان.

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

3. اكتب على الأزرار فعل

السبب: من الواضح أكثر ما سيحدث.

4. لا تضع الرابط "لا أتذكر كلمة المرور" أمام الزر

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

5. مع شكل طويل ، لا تخجل من وضع زر في الأعلى

الرأي: نوع من الهراء. من الأفضل إصلاح الزر من الأسفل بحيث يكون مرئيًا دائمًا عند التمرير. ولكن ، على سبيل المثال ، تضع Yandex.Mail زرًا في الأعلى.

الجزء الثالث. المتصفحات والأتمتة

لا تقم بإجراء انتقالات تلقائية من حقل إلى آخر عند إدخال العدد المطلوب من الأحرف. يمكن أن يربك المستخدمين
تحتوي المستعرضات التي تدعم HTML5 على أدوات التحقق من النماذج المضمنة ولكل متصفح منطقه الخاص. من المنطقي تعطيل التحقق الافتراضي
من الضروري تعطيل التصحيح التلقائي للأخطاء وزيادة الحرف الأول تلقائيًا. وإلا ، يبدو للمستخدمين أن هذا كان خطأ ولن يتم قبول البيانات
وفقًا للإحصاءات ، يتم استخدام الإكمال التلقائي في Chrome 9 مليار مرة في الشهر. هذا ، في المتوسط ، يوفر للمستخدم 12 ثانية ، مما يمنح 1،250،000 يومًا في الشهر. حقيقة ممتعة
لا تقم بالتصفية دون النقر فوق الزر "تصفية". هناك حاجة إلى زر ، على سبيل المثال ، إذا لم يكن هناك راديو ومربعات اختيار فقط ، ولكن أيضًا حقول الإدخال (التكلفة ، بعض الفواصل الزمنية ، إلخ). لكنهم أنفسهم يواصلون الكتابة عن الاختبارات ، حيث يعتقد المستخدمون أن الفلتر لا يعمل دون أن يدركوا أنك تحتاج إلى النقر على زر "الفلتر". ¯ \ _ (ツ) _ / ¯

الجزء الرابع. حول كل شيء

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

1. إن نشر حقلي تسجيل الدخول وكلمة المرور على صفحات مختلفة ليس عارًا

على موقع GOV.UK ، في شكل تفويض ، قاموا بتسجيل الدخول على صفحة واحدة ، وكلمة المرور على صفحة أخرى (الآن ليس كذلك) ولم يلاحظ المستخدمون أي شيء غريب.

رأي: ألاحظ الآن هذا النهج بشكل متزايد. من Google إلى خدمات متنوعة مثل الخلاصة.

2. عرض الخطوات أمر اختياري

ليس هناك جدوى من إظهار أشرطة التقدم بخطوات. تشغل مساحة كبيرة. قامت الحكومة البريطانية بإزالة الشريط ولم يتغير التحويل.

3. لم يعد موضوع حفظ عناصر 7 ± 2 ملائمًا

السبب: لأنه لا أحد يتذكر أي شيء على المواقع. يمكنك ببساطة التمرير لأعلى إذا نسيت شيئًا.

4. ضع حقول العنوان بالترتيب المقبول في منطقة معينة

هذا ليس من الكتاب ، ولكن من مقالتي. وضعت الرابطة الدولية للبريد قواعد مكتوبة. على سبيل المثال ، في روسيا ، تم اعتماد الإجراء التالي:

إيفانوف إيفان
ش. ليسنايا ، منزل 5 ، شقة. أحد عشر
موسكو
روسيا
الرمز البريدي

أنماط تصميم النموذج. مراجعة الكتاب