مرحبا يا هبر! أقدم لكم ترجمة المقال "
10 نصائح لتصميم النماذج المثالية ".
تلعب النماذج دور البوابة الإلكترونية بين المستخدم والنظام ، وغالبًا ما تكون أساس الصفحة. يتم التحكم في التفويض أو التسجيل أو تحديث الحالة أو إدخال بيانات الدفع أو عنوان التسليم عن طريق النماذج. بالنسبة للمتاجر عبر الإنترنت ، تلعب النماذج المصممة جيدًا دورًا مهمًا. من تجربتي الخاصة ، يضاعف التصميم الجيد المبيعات عبر الإنترنت.
نظرًا لأن النماذج تؤدي وظائف مهمة لواجهة المستخدم ، فهناك قواعد لتصميمها.
1. ابدأ بإدخال البيانات
ابدأ بالعنصر الأبسط - حقل نص. هذا هو العنصر الأكثر شيوعًا للعديد من الأشكال ، لذلك إذا قمت بذلك بشكل صحيح ، فأنت في منتصف الطريق.
هناك 3 عناصر رئيسية للنموذج: حقل نص وعنوان ورسالة خطأ. مهما كان التصميم الذي اخترته لإنشائه ، فتأكد من أن المستخدم يعرف ما هي المعلومات المطلوبة ، وإذا كان هناك خطأ ، فكيف يمكنك التخلص منه.
يجب أن تكون العناوين في الأعلى.
الاتجاهات تولد وتموت. الآن أصبح من المألوف وضع العنصر النائب كعنوان. استخدامه ، وإن لم يكن مخطئا ، يثير بعض مشاكل تجربة المستخدم (ملاحظة: "تجربة المستخدم"). والحقيقة أنه عندما يتم ملء الحقل ، لا يرى المستخدم الرأس.
يجب دائمًا رؤية العناوين. لذلك ، يتم وضعها في الأعلى.
لماذا أعلاه وليس على يسار حقل إدخال البيانات؟
عندما يكون العنوان على يسار حقل النص ، ستنتقل العناصر على شاشة الهاتف بالنسبة إلى بعضها البعض. فكر أولاً في كيفية ظهور كل شيء على شاشة الهاتف.
ساعد المستخدم بتحديد مثال في العنصر النائب.
حجة أخرى لصالح وضع العناوين فوق حقل إدخال البيانات هي أن المستخدم يقرأ المعلومات في خط عمودي ، لأنه وفقًا للبحث ، يكون هذا أسرع من نقل العرض من العمود الأيسر إلى اليمين.
2. رسالة خطأ وتحذير
بالنسبة لحقل النص القياسي ، هناك حاجة إلى رسائل خطأ.
إليك 3 نصائح لتصميمها:
حدث الخطأ بسبب كل من العميل والخادم.
من جانب العميل ، يتم اكتشاف المشكلات عندما لا يتم ملء الحقل المطلوب ، أو يتم إدخال عنوان البريد الإلكتروني بشكل غير صحيح:
- يتحقق الخادم من وجود البريد الإلكتروني المحدد ؛
- يتم إعلام المستخدم بخطأ في العميل قبل إرسال النموذج. الأخطاء ضرورية لمنع المستخدم من إرسال معلومات غير صحيحة.
تحقق من وجود رسائل خطأ
قدم معلومات عن المجال الذي يكون فيه الخطأ. لأسباب أمنية ، لا يشير بعض المطورين إلى وجود خطأ في البريد الإلكتروني أو كلمة المرور أثناء التفويض ، وهذا أمر طبيعي تمامًا. ولكن عندما يشترك المستخدم في النشرة الإخبارية أو يدخل عنوانه أثناء الشراء ، وضح له المجال الذي تم ملؤه بشكل غير صحيح ولماذا.
في كل مرة تملأ فيها حقل نص ، تحقق من كيفية ظهور الخطأ قبل النقر على زر الإرسال وبعده.
استخدم التحذيرات
أخبر المستخدم إذا كان الحقل يتطلب معايير معينة ، على سبيل المثال ، إذا كان يجب أن تحتوي كلمة المرور على عدد معين من الأحرف أو تجمع بين الأرقام والحروف.
وضح مدى قوة كلمة المرور ، سواء تم تسجيل البريد الإلكتروني على الموقع ، أو إذا كان تسجيل الدخول مشغولاً.
3. استخدم الأشكال المطابقة
بصريا ، يبدو النموذج أكثر إيجازا إذا تم استخدام تركيبات. ضع في اعتبارك كيف سيستخدم المستخدم النموذج من الهاتف.
إذا كانت جميع الحقول نصية ، فسيتعين على المستخدم فتح لوحة المفاتيح باستمرار.
لإجراء تغيير ، اطلب من المستخدم التبديل من حقل النص إلى القائمة المنسدلة (ملاحظة: "القوائم المنسدلة") أو إلى زر الراديو والعكس بالعكس.
فكّر في كيفية حمل المستخدم للهاتف ، وكيفية التخلص من الإزعاج الناتج عن مجموعة من الحقول نفسها لإدخال البيانات.
4. أزرار الراديو ، القوائم المنسدلة ، وخانات الاختيار
أحيانًا يكون هناك ارتباك عند اختيار الأزرار الراديوية والقائمة المنسدلة وخانة الاختيار.
يعد Radiobutton رائعًا لتوفير عدد قليل من الإجابات الممكنة. اختر إجابة محتملة مسبقًا أو تخطى هذا الحقل.
Radiobutton هو الحل الأفضل عندما يمكنك اختيار خيار واحد فقط.
عند الحاجة إلى المزيد من العناصر ، ستكون القائمة المنسدلة خيارًا أكثر ملاءمة (في الممارسة - أكثر من 5-6 إجابات). يمكنك أيضًا تحديد العنصر الافتراضي أو تعيين العنصر النائب "تحديد عنصر".
خانة الاختيار هي الخيار الأفضل عندما تحتاج إلى ملء حقل واحد فقط (على سبيل المثال ، الشروط والأحكام) ، أو يتم توفير أكثر من إجابة واحدة. إذا كنت ترغب في اختيار الرسائل الإعلانية لإرسالها إلى المستخدم ، فسوف تسمح لك خانة الاختيار بإجراء أكثر من اختيار واحد.
لا يجب أن يقيدك استخدام مربع الاختيار بدلاً من زر الراديو في قرارات تصميم واجهة المستخدم.
كمصمم ، لديك حرية كافية في اختيار كيفية عرض عناصر واجهة المستخدم (ملاحظة: "واجهة المستخدم") على الشاشة. حتى إذا كنت ترغب في تغيير مربع الاختيار بطريقة أو بأخرى بحيث تكون أكثر إثارة للاهتمام ، فلا ينبغي أن يؤثر ذلك على إدراك المستخدم.
بدلاً من كتابة نص أمام دوائر صغيرة ، يمكنك إنشاء صور أو رموز للتحديد.
5. قم باستبعاد الحقول الاختيارية إن أمكن
إذا كان هدف الشركة هو بيع منتج ، فإن هدفك كمصمم هو التخلص من أكبر قدر ممكن من المضايقات بين المستخدم والنظام.
ستسمح إزالة الحقول غير الضرورية للمستخدم ببذل جهد أقل.
عند التقديم ، من المهم معرفة أنواع مختلفة من طرق الدفع والتسليم.
إذا أراد قسم المبيعات معرفة تفضيلات العملاء ، يمكنك القيام بذلك عن طريق البريد الإلكتروني للتأكيد.
ابحث دائمًا عن طرق لاستخدام الحد الأدنى من الحقول المرئية.
إذا كنت ترغب في تحسين متجرك عبر الإنترنت ، قلل عدد الحقول لعنوان التسليم والخروج.
إذا كنت تقوم بإنشاء واجهة لحجز تذاكر الطيران ، فأظهر للمستخدم أصغر عدد من الحقول المطلوبة لعرض الرحلات المتاحة.
ثم يمكنك تقديم المزيد من الشروط: عدد الأكياس ، إلخ.
6. استخدم الإكمال التلقائي للأشكال الكبيرة
اعتمادًا على اسم الشارع ، قد يستغرق ملء شريط العنوان الكثير من الوقت ، خاصة من الهاتف. قد تكون كتابة العنوان بشكل صحيح أكثر صعوبة.
ضع في اعتبارك استخدام GoogleMapsAPI بحيث تتم تعبئة أسماء الشوارع تلقائيًا. هذا يعني أن المستخدم يحتاج فقط لإدخال عدد قليل من الأحرف واختيار الشارع المطلوب من القائمة المقترحة. يمكنك أيضًا ملء الرمز البريدي تلقائيًا استنادًا إلى اسم الشارع ، ولكننا سنناقش ذلك لاحقًا.
7. استخدم المنطق الشرطي
استخدم المنطق لتقديم بعض المعلومات للمستخدم لتسهيل حياته.
- إذا كان بلد المستخدم معروفًا ، فقد يحتوي التصميم على حقول إضافية ("الولاية" إذا كنت في الولايات المتحدة الأمريكية ، أو "مقاطعة" في أيرلندا ، إلخ.)
- استخدم الرمز البريدي لإدخال اسم مدينة أو ولاية أو مقاطعة
- إذا كنت تقوم بحساب بلد المستخدم حسب عنوان IP ، فهل من الممكن إدخال رمز البلد في حقل إدخال الهاتف؟
إذا كنت ترغب في ملء بعض الحقول للمستخدم ، فامنحه دائمًا الفرصة لإدخال المعلومات بنفسه. هناك احتمال أنك مخطئ في شيء ما.
على سبيل المثال ، تستخدم GoogleMapsAPI للعثور على شارع في ألمانيا. معرفة اسم الشارع ، يمكنك الحصول على رمز المنطقة. ومع ذلك ، فإن بعض الشوارع في ألمانيا كبيرة جدًا ، لذلك فهي تغطي رموزًا مختلفة ، لذلك قد تكون المعلومات غير صحيحة في حالة الشوارع الحدودية. امنح المستخدم دائمًا إمكانية إدخال البيانات إذا لزم الأمر.
يتطلب استخدام المنطق الشرطي لجميع دول العالم الكثير من العمل ، لذلك عليك أن تكون على دراية بمعنى جهودك. تصفح البلدان التي تأتي منها الطلبات ، وابدأ أولاً في تحسينها. إذا أدى ذلك إلى ارتفاع الدخل ، افعل الشيء نفسه مع بقية البلدان.
8. استخدم العنصر النائب بشكل صحيح
ناقشنا سابقًا أن العنصر النائب لا يستخدم دائمًا ، لأنه يختفي عند إدخال المعلومات. لكننا لم نفكر في طرق أخرى لاستخدامها يمكن أن تساعد المستخدم.
العنصر النائب هو فرصة رائعة لتظهر للمستخدم كيفية إدخال المعلومات. مثال جيد هو إدخال الهاتف. هل يحتاج المستخدم لإدخال رمز البلد؟ أو رمز المدينة؟
عندما تحتاج إلى رقم هاتف أو بطاقة بتنسيق معين ، أخبر المستخدم بذلك عن طريق تقديم مثال لملء العنصر النائب. هذه طريقة رائعة لإصلاح الأخطاء من خلال الإشارة ببساطة إلى المعلومات المطلوبة: رمز البلد ، وما إلى ذلك.
9. أبلغ عن الخطوات التالية.
إذا بعد ملء نموذج آخر للإدخال ، أبلغ المستخدم.
بدلاً من "التالي" أو "الدفع" ، يمكنك كتابة "طلب شيك" أو "دفع باي بال".
أضف رسائل تشير إلى الخطوات التالية بعد النقر فوق الزر. هل ستكتمل عملية الطلب أم سيكون لدى المستخدم الوقت لفحص كل شيء؟ هل سيذهب للدفع؟
ابحث دائمًا عن طرق لتوفير الراحة للمستخدم ، خاصة إذا كان مرتبطًا بحسابه المصرفي.
أشعر بالانزعاج في كل مرة أشتري فيها من أمازون لأنني لا أحصل على جميع المعلومات ، بما في ذلك تكاليف الشحن ، حتى الخطوة الأخيرة. كن صادقًا مع المستخدم. اكسب المصداقية من خلال توفير المعلومات اللازمة في كل خطوة من خطوات التعبئة ، واشرح بوضوح ما يمكن توقعه مع الاستخدام المستقبلي.
10. الاستمرار في البحث عن طرق لتحسينها
بمجرد إطلاق نموذج جديد مشرق ، استمر في تحليله. إذا وجدت أن العديد من المستخدمين يغادرون الموقع ، فاعرف السبب. أجرِ استطلاعًا لمعرفة سبب عدم ارتياح المستخدمين ، ثم العمل على حل هذا الإزعاج. بالنسبة للمصمم ، لا ينتهي العمل أبدًا "تمامًا".
الخلاصة
في بعض الأحيان ، لا يكون تصميم النماذج مثيرًا للاهتمام ، ولكن إذا تم تنفيذها بشكل جيد ، فيمكنها تغيير تصور الموقع أو التطبيق من قبل المستخدم. صمم النماذج بعناية لتسهيلها على المستخدم. امنح مزيدًا من التوجيهات بوضوح ، ووفر تلميحات بتنبيهات وعناصر نائبة ، واقترح إكمال تلقائي حتى لا يكتب المستخدمون كثيرًا.