7 أسرار لتصميم أشكال عظيمة
تقريبا كل تصميم الموقع يتضمن نوعا من النموذج. من مجموعة عناوين البريد الإلكتروني البسيطة للاشتراك في نشرة إخبارية أو إشعار إلى نماذج جمع الدفع الكاملة ، من الضروري أن تقوم بتصميم نموذج سهل الاستخدام والفهم.
معايير تصميم الشكل تتطور كذلك. بينما تستخدم العديد من النماذج لتضمين أعمدة متعددة وتطلب الكثير من المعلومات ، إلا أن معظم الممارسات الأفضل تقترح الآن إبقاء النماذج بسيطة قدر الإمكان. وهناك الكثير للتصميم كذلك. إن الشكل الجيد قابل للمسح ، ولا يتطلب الكثير من الكتابة ويشتمل على وضع العلامات الذكية والتنسيق لمساعدة المستخدمين على ملء النماذج بشكل صحيح في المرة الأولى.
إليك بعض الأسرار لضمان تصميم نموذج يملؤه المستخدمون فعليًا.
1. تجعل من السهل مسح والقراءة
أنت تعلم أن المستخدمين يقومون بمسح مواقع الويب لجمع المعلومات وتحديد الإجراءات التي سيتخذونها أو ما إذا كان المحتوى والتصميم يراودهم أم لا. وينطبق الشيء نفسه على النماذج. يجب أن يكون المستخدم قادرًا على معرفة المعلومات المطلوبة في لمحة وتقديم تفسير واضح لماهية النموذج وكيفية إرساله.
يتضمن نموذج قابل للنقش بشكل كبير ما يلي:
- التباين: يجب أن يكون النص قصيرًا وسهل القراءة. تجنب الكثير من الألوان والالتزام بمجموعات الألوان التقليدية في الظلام على خلفية النص.
- التجميع والمساحة: معلومات المجموعة المتشابهة في النماذج الأطول. عند جمع معلومات الدفع على سبيل المثال ، معلومات العملاء الجماعية ومعلومات الدفع ومعلومات الشحن. ثلاث كتل أقصر هي أسهل للهضم من واحدة طويلة. يتم استخدام المسافات الذكية إلى تلك التسميات المرتبطة بالحقل الذي يشرحه ، بدلاً من التباعد المتساوي بين العناصر النصية والعناصر الحقلية.
- إنهاء واضح / دعوة إلى العمل : اجعل الزر كبيرًا وسهل الرؤية. يجب أن تخبر microcopy الموجودة داخل الزر المستخدمين بما سيحدث ، مثل "إرسال" أو "ادفع الآن" أو "تابع إلى الخطوة التالية". تذكر إغلاق حلقة التعليقات وتتيح للمستخدمين معرفة متى يتم إرسال النموذج بشكل صحيح.
2. النظر في العلامات العائمة
كان هناك الكثير من الجدل حول استخدام نص التلميح داخل حقول النموذج أم لا. تكمن المشكلة الرئيسية في أن هذا النص لا ينتهي في الغالب بنقرة ، ويجب على المستخدمين حذفه بشكل نشط لبدء الكتابة. هذا محرج.
علاوة على ذلك ، فإن تم العثور على Nielsen Norman Group أن الحقول الفارغة يمكنها جذب العين ومساعدة المستخدمين على إدخال المعلومات بشكل أكثر وضوحًا.
إذا كنت تشعر بالحاجة إلى استخدام التلميحات ، ففكر في حل تفاعلي - التسميات العائمة. قم بتضمين معلومات التسمية الخاصة بك داخل حقول النموذج بحيث تبدو مثل نص العنصر النائب ، ولكن اسمح للنص أن يتحرك وتحول إلى الموضع العلوي الأيسر بمجرد تحريك المستخدم فوق أو النقر فوق هذا الحقل. التسمية أو التلميح لا يذهب بعيدا ولا يحصل في طريق المستخدم في محاولة لملء النموذج. (بالإضافة إلى أن الرسوم المتحركة الصغيرة تعد مفاجأة ممتعة للمستخدمين.)
3. استخدم أقنعة الحقل
يمكن أن توفر الأقنعة الميدانية بعض القرائن والتشكيلات نفسها ولكن دون أن تعيق استخدامها. يظهر قناع المجال فقط عندما يقوم المستخدم بتنشيط حقل ما ويقدم فكرة إضافية حول ما هي المعلومات المطلوبة. يمكن للقناع مساعدة المستخدم بشكل أكبر عن طريق تنسيق المعلومات تلقائيًا في محاولة لتجنب الأخطاء التي ستؤدي إلى استبعاد النموذج عند الإرسال.
مثال جيد لقناع المجال في العمل مع أرقام الهواتف. خذ بعين الاعتبار خيارات التنسيق المتعددة:
- (000) 000-0000
- 000-000-0000
- 0000000000
كيف يعرف المستخدم أي واحد سيعمل؟ سيقوم حقل النموذج بتحديد وضبط التنسيق كأحد أنواع المستخدمين ، لذا فهو لا يفكر في ذلك ، ويتعين عليه فقط إدخال الأرقام. (هذا أيضًا يحفظ متاعب الاضطرار إلى التبديل بين لوحات المفاتيح على جهاز محمول.)
4. جعل أشكال لوحة المفاتيح ودية
ليس لديك أي طريقة لمعرفة نوع الجهاز الذي سيصادف المستخدم على النموذج الخاص بك ، ولكن يجب أن يكون من السهل ملء ذلك على أي حال. فكر في جميع أنواع لوحات المفاتيح المختلفة التي يمكنها إرسال المعلومات إلى النموذج وتعديل الحقول لاكتشاف الخيار المناسب واستخدامه.
على أجهزة سطح المكتب ، يجب أن يتمكن المستخدمون من إدخال نموذج وملء كل حقل دون الحاجة إلى النقر فوق الماوس. تقدم تلقائيًا من حقل إلى آخر عند الانتهاء من علامات التبويب أو استخدمها أو أدخلها للتنقل. يحتوي W3.org على مجموعة متينة من توصيات لوحة المفاتيح عليك أن تتبع.
على الأجهزة المحمولة ، قم بمطابقة نوع لوحة المفاتيح بالبيانات المطلوبة. إذا كان الإدخال مخصصًا للحروف ، فقم بإظهار لوحة مفاتيح ألفا. للحصول على الأرقام ، قم بإظهار الخيار الرقمي. من Google: "يقدِّر مستخدمو التطبيق التطبيقات التي توفر لوحة مفاتيح مناسبة لإدخال النص. تأكد من أن هذا يتم تنفيذه باستمرار عبر التطبيق بدلاً من المهام المحددة فقط ولكن ليس للآخرين ".
5. اختيار الشكل العمودي
تكون النماذج الرأسية أسهل للمستخدمين من تنسيقات الأعمدة المتعددة. لقاعدة أفضل الممارسات هي التأكد من أن جميع الحقول يمكن وضعها على الشاشة دون التمرير بتنسيق من الأعلى إلى الأسفل.
الاستثناء الوحيد هو للنماذج فائقة القصور حيث يحتاج المستخدم فقط إلى إدخال عنوان بريد إلكتروني أو اسم وعنوان بريد إلكتروني. يمكن أن يعمل عمودان متجاوبان متبوعًا بزر استدعاء الإجراء بشكل جيد في هذا الموقف طالما أن صندوق البريد الإلكتروني طويل بما فيه الكفاية ليتمكن المستخدمون من رؤية جميع أحرف عناوينهم.
تذكر أن تطلب العناصر منطقيًا في نموذج رأسي أيضًا. إذا كنت تقوم بتجميع الاسم الأول واسم العائلة وعنوان البريد الإلكتروني وتسلسل لون الشعر لهم بهذه الطريقة.
6. الحد من الكتابة
استخدم أكبر عدد ممكن من الحلول المسبقة قدر الإمكان مع النماذج. ليس هناك ما هو أكثر سعادة ثم إضافة عنوان وبعد النقط القليلة الأولى ، تبدأ Google API في خيارات العنوان وتقترحها.
هذا يفعل ثلاثة أشياء:
- فهي تسهّل على المستخدمين ، لا سيما على الجوّال.
- يساعد على الحد من عدد الحقول اللازمة.
- يمكن أن يساعد في إزالة بعض أخطاء المستخدم ، مثل الخطأ في الكتابة.
ضع في اعتبارك نفس الشيء مع عناوين البريد الإلكتروني ، بحيث يتم منح المستخدمين نطاقات بريد إلكتروني شهيرة بعد الرمز @. عندما يكتب مستخدم في [email protected] …. الحقل يقترح تلقائيا [البريد الإلكتروني محمي] .
7. يبقيه قصيرة وحلوة
ستجذب أن تطلب من المستخدمين الحصول على الكثير من المعلومات في النماذج. قاوم الرغبة!
اسأل فقط عن المعلومات الحيوية في النماذج. هناك احتمالية أقوى بأن يملأ المستخدمون النماذج التي تتطلب التزامًا أقل. إذا كنت بحاجة إلى مزيد من المعلومات لاحقًا ، فيمكنك بعد ذلك إرسالها بالبريد الإلكتروني من قائمتك عند طلب تفاصيل إضافية. (باعتبارك شخصًا اختار بالفعل الدخول ، من المرجح أن يتفاعل المستخدم معك لمزيد من المعلومات في الوقت الحالي).
تجنب الحقول الاختيارية. لا تسأل عن معلومات زائدة عن الحاجة. لا تستخدم حقول متعددة حيث يمكنك استخدام واحد (أرقام الهواتف على سبيل المثال).
استنتاج
امنح المستخدمين شيئًا في مقابل ملء نموذج. اجعله ممتعًا أو ممتعًا. شكرا للمستخدم.
سيؤدي إنشاء نموذج سهل القراءة وسهل الاستخدام إلى زيادة فرصك في تجميع البيانات وتحويل زائر موقع ويب إلى مستخدم متكرر.