10 نصائح لتصميم أشكال مثالية

نُشرت هذه المقالة في الأصل على onepixelout.com

النماذج هي البوابة بين المستخدم والنظام ، وغالبًا ما تكون محور صفحة الويب. تسجيل الدخول والتسجيل وتحديث حالتك وإدخال معلومات الدفع وعنوان التسليم - يتم التعامل مع كل هذه باستخدام النماذج. بالنسبة لمواقع التجارة الإلكترونية ، يمكن أن تحدث النماذج المصممة جيدًا الفرق.

في تجربتي ، يمكن أن يؤدي تحسين تصميم نموذج واحد إلى مضاعفة مبيعات متجر عبر الإنترنت.

... وأنا أحب تصميم النماذج.

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

1. ابدأ بالإدخالات

ابدأ بعنصر النموذج الأكثر شيوعًا: حقل إدخال النص. إنه العنصر الأكثر شيوعًا في معظم الأشكال ، لذا احصل عليه بشكل صحيح وأنت بالفعل في منتصف الطريق.

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

تسميات أعلى

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

يجب أن تكون التصنيفات مرئية في جميع الأوقات. لهذا السبب ، تسميات أعلى.

لماذا الجزء العلوي وليس على يسار حقل الإدخال؟

عندما تكون التسمية على يسار الحقل ، سيحتاج هذا إلى تكديس أحدهما فوق الآخر على الجوال. فكر أولاً في الجوّال.

صورة من giphy

قم بإرشاد المستخدم لإدخال المعلومات الصحيحة مع العناصر النائبة واستخدام التسميات للاستخدام المقصود.

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

2. أخطاء الدول والتحذيرات

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

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

كن ذكيا مع رسائل الخطأ.

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

في كل مرة تصمم إدخال النص ، ضع في الاعتبار أيضًا كيف ستظهر رسالة الخطأ قبل وبعد نقر المستخدم على "إرسال".

تضمين التحذيرات

إذا كان حقل معين يتطلب معايير معينة - على سبيل المثال ، يجب أن تحتوي كلمة المرور على عدد معين من الأحرف ودمج كل من الأرقام والحروف ، فأخبر المستخدم بذلك. يمكنك تضمين طرق لإظهار مدى قوة كلمة المرور عند إدخالها. قد يكون من المفيد أيضًا إظهار ما إذا كان البريد الإلكتروني قد تم تسجيله بالفعل ، أو تم بالفعل استخدام اسم مستخدم.

3. المجموعة مع الإعجاب

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

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

4. أزرار الراديو ، القوائم المنسدلة وخانات الاختيار

في بعض الأحيان ، قد يكون هناك ارتباك بشأن الوقت الذي حان فيه وقت استخدام أزرار الاختيار والقوائم المنسدلة وخانات الاختيار.

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

عندما يكون هناك العديد من الإجابات المحتملة ، تكون القائمة المنسدلة أكثر ملاءمة (قاعدتي هي إذا كان هناك أكثر من 5 أو 6). يمكنك تحديد إجابة مسبقًا ، أو ترك العنصر العلوي كـ "الرجاء التحديد" لتوجيه المستخدم إلى الاختيار.

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

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

5. حيثما أمكن ، إزالة الحقول الاختيارية

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

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

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

6. استخدم الإكمال التلقائي للحقول الأطول

قد يستغرق حقل اسم الشارع ، اعتمادًا على اسم الشارع ، وقتًا طويلاً للكتابة - خاصةً على جهاز محمول. قد يكون من الصعب الكتابة بشكل صحيح.

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

7. استخدم المنطق الشرطي

هناك طرق لاستخدام المنطق لإدخال بعض المعلومات نيابة عن المستخدم ، مما يجعل حياتهم أسهل قليلاً.

  • إذا كنت تعرف بلد المستخدمين ، فيمكن للتصميم تحديد الحقول الإضافية التي قد يحتاجونها مسبقًا ("الولاية" إذا كانوا في الولايات المتحدة الأمريكية ، أو "مقاطعة" إذا كانوا في أيرلندا ، إلخ)
  • يمكنك استخدام الرمز البريدي لملء اسم المدينة أو الولاية أو المقاطعة.
  • إذا كان لديك بلدهم بناءً على عنوان IP ، فهل يمكنك ملء رمز البلد في حقل رقم الهاتف؟

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

على سبيل المثال ، يمكنك استخدام Google Maps API للحصول على اسم شارع ألماني. من خلال معرفة اسم الشارع ، يمكنك أيضًا الحصول على رمز المنطقة. ومع ذلك ، فإن بعض الشوارع في ألمانيا كبيرة بما يكفي لتشمل رموز مناطق مختلفة ، لذلك ستكون المعلومات خاطئة لعدد صغير من حالات الحافة. امنح المستخدم دائمًا خيار تعديل البيانات إذا لزم الأمر.

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

8. كن ذكيا مع العناصر النائبة

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

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

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

9. قم بتوصيل الخطوة التالية بوضوح

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

بدلاً من استخدام "التالي" أو "الخروج" ، يمكنك قول "مراجعة الطلب" أو "الدفع الآن باستخدام Paypal". أضف مستوى آخر من التواصل من خلال إخبار المستخدم على وجه التحديد بما سيحدث عندما ينقر عليه. هل سيكمل هذا الزر طلبهم ، أم سيكون لديهم الوقت لمراجعته؟ هل سيتم جلبهم إلى تسجيل الدخول إلى Paypal؟

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

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

10. استمر في البحث عن طرق التحسين

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

فى الختام

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

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