أفضل الممارسات لـ 6 عناصر واجهة المستخدم الشائعة
إن المظهر وسهولة الاستخدام لعناصر ووظائف واجهة معينة أمر حاسم لنجاح أي مواقع في السوق اليوم.
وقد أثبتت الدراسات أنه حتى التأخر بمقدار ثانية واحدة في التفكير في جزء المستخدم سيضعف من إدراكهم واهتمامهم بموقع ويب ويخفض في نهاية المطاف معدل التحويل لموقع الويب.
في بعض المنافذ والصناعات ، قد يكون وجود عناصر واجهة المستخدم غير الواضحة في استخدامها مقبولًا تمامًا. صناعة التدوين وتطوير الويب هي أمثلة مثالية.
ولكن عندما نقوم بتصميم واجهات المستخدم الخاصة بالجمهور غير المتخصص بالتكنولوجيا - وهو ما يحدث عادةً مع عمل العميل - علينا التأكد من أن عناصر معينة في واجهة المستخدم لا تبتعد كثيراً عما اعتاد عليه المستخدمون.
تناقش هذه المقالة بعض أفضل الممارسات وميزات قابلية الاستخدام لعناصر واجهة المستخدم الستة والاتفاقيات لكل منها ، بحيث يمكن للمطورين إنشاء تجارب مستخدم جميلة وبسيطة.
1. مظهر مربع البحث
على مواقع الويب الكبيرة الغنية بالمعلومات أو المنتجات الثقيلة ، البحث هو الملك. يتنازل المستخدمون هنا بشكل عام عن أشرطة التنقل التقليدية لصالح مربع البحث.
سيكون لمربع البحث غير المرئي على الفور أحد التأثيرين التاليين: 1) يفترض المستخدم عدم توفر وظائف البحث ، أو 2) سيعثر المستخدم على وظيفة البحث بعد فترة متأخرة وربما مزعجة.
تأكد من سهولة رؤية مربع البحث على موقع الويب الخاص بك. ستعاني الخلفيات المظلمة والرسومات الرائعة من قابلية الاستخدام ، لذا من الأفضل الاحتفاظ بها باللون الأبيض أو الرمادي الفاتح. تأكد أيضًا من أن مربع البحث كبير بما فيه الكفاية بالنسبة إلى العناصر المهمة الأخرى على الصفحة ، وبالتالي الحفاظ على موضعه في التسلسل الهرمي المرئي.
مربع البحث على المجال عن طريق IP يناسب الموضوع المرئي للموقع بشكل جيد ، كونه برتقالي ومتوافق بيانياً مع محيطه. ولكن إذا تم إعطاء هذا البحث على موقع ويب أكثر انشغالًا ، فمن المحتمل أن يكون من الصعب اكتشافه.
لا يمثل التصميم عائقًا على Domain by IP نظرًا لأن موقع الويب يحتوي على وظيفة واحدة وهي: البحث ، الذي يقع في منتصف الصفحة مباشرةً. بالإضافة إلى كونها في مجال التكنولوجيا ، فإن مطوريها لديهم حافز أقل للالتزام بالاتفاقية. ولكن يجب تجنب هذه الدرجة من الإبداع في مواقع الويب الكبيرة ، والتي قد لا يكون جمهورها المستهدف دقيقًا من الناحية التقنية.
وقت المغامرة في هذه الأثناء ، يحتفظ بمربع البحث الأبيض ، بحجم مناسب ويسهل العثور عليه في الصفحة:
على الرغم من كونه بلغة أجنبية ، فإن Adventure Time لديه مربع بحث واضح للغاية ، حتى بالنسبة للمستخدمين المتحدثين باللغة الإنجليزية. يتم استكمال حجم ولون العلبة بواسطة رسم العدسة المكبرة ، والذي أصبح الرمز العالمي للبحث عبر الإنترنت. لن يكون لدى المستخدم الذي يبحث عن هذه الوظيفة مشكلة هنا.
يجب اتباع هذا النمط في جميع المشاريع التي تستهدف قاعدة مستخدمين متنوعة.
قراءة متعمقة:
2. واضح محتوى قابل للطي / قابلة للتوسعة
تستفيد مواقع الويب من اللوحات القابلة للطي والقوائم المنسدلة لأنها تجعل التخطيط أكثر نظافة وأقل تشوشًا. ومع ذلك ، يمكن أن يؤدي المحتوى المخفي في عناصر الواجهة هذه إلى إضعاف قابلية استخدام موقع الويب إذا لم يتم الإشارة إلى وجودها بوضوح.
عندما ينقر المستخدم على رابط أو زر مكشوف ، فإنه يتوقع أن ينتقل إلى صفحة جديدة. ولكن عندما يقوم المستخدم بالنقر فوق ارتباط أو زر يحتوي على مؤشر محتوى مخفي ، فإنه يتوقع عرض المحتوى الجديد على الفور (عبر JavaScript أو AJAX) ويكون لديك خيار لإخفائه لاحقًا. وبالتالي ، يجب أن يفرق موقع الويب بشكل حاد بين الروابط والروابط العادية التي تكشف عن محتوى جديد عبر JavaScript .
يمكن الإشارة إلى المحتوى القابل للطي ، مثل الألواح الجانبية وأشجار القائمة ، بمؤشر زائد أو ناقص يشبه Windows Explorer. اللوحة التي شاهدها المستخدمون الذين سجلوا الدخول المغلق Globe يشير بوضوح إلى أنه قابل للطي:
يوجد أدناه نفس الصفحة بعد توسيع اللوحة لتكشف عن مجموعة من الوظائف:
مع توسيع المحتوى الموجود في اللوحة الآن ، يتم تدوير السهم بمقدار 90 درجة ، مما يشير إلى أنه يمكن الآن إخفاء المحتوى نفسه أو تصغيره. يمكن تطبيق هذا المبدأ نفسه على القوائم المنسدلة أو الطيارة ، على الرغم من أن هذه المبادئ لا تتطلب وجود سهم دوار. من المدهش أن هذه الميزة غالبًا ما يتم حذفها حتى على مواقع الويب المصممة بطريقة احترافية.
قراءة متعمقة:
3. AJAX مؤشر التحميل
عندما تقوم بتحسين تجربة المستخدم من خلال تحميل المحتوى من خلال الطلبات غير المتزامنة ، تأكد من إعلام المستخدم بأن طلب AJAX قيد المعالجة. بدون هذا المؤشر ، قد يتخلى المستخدم عن الانتظار أو يتساءل لماذا لم يحدث شيء استجابة لنقرته.
يمكنك تحقيق ذلك بعدة طرق ؛ تتمثل إحدى الطرق في إبراز رسالة "جارٍ التحميل" أو رسالة مشابهة في الموقع الذي سيحدث فيه الإجراء أو بالقرب منه ، كما يفعل قارئ RSS من Google:
في الجزء العلوي من لقطة الشاشة ، يظهر النص المميز باللون الأصفر ، والذي يظهر عند النقر على الزر "وضع علامة كقراءة" ، مع إخبار المستخدم بأن هناك شيئًا ما يحدث.
هناك طريقة أخرى للإشارة إلى هذا مع الرسوم المتحركة أو زجاج الساعة الدائرية ، والتي ستكون مألوفة لمستخدمي Windows. يستخدم مؤشر متحرك على العديد من المواقع ، بما في ذلك تغريد ، حيث ينقر المستخدمون على زر "المزيد" لعرض التغريدات القديمة:
بمجرد النقر فوق الزر ، وبناءً على سرعة اتصال العميل بالخادم ، يظهر رسم تحريك مألوف مألوف ، يخبر المستخدم بأنه تتم معالجة الطلب الخاص به.
تتوفر رسوم تحميل AJAX مجانًا من عدد من مواقع الويب المختلفة ، والتي يتيح لك العديد منها تخصيص الرسومات بالحجم واللون والخيارات الأخرى.
هذا النوع من المؤشرات المرئية مهم للطلبات غير المتزامنة التي لا تقدم أدلة من جانب العميل حول ما هو النشاط الذي يتم تحميله.
يمكن أيضًا استخدام مؤشر يشبه AJAX لتعزيز وظيفة غير AJAX التي تتصرف مثل AJAX وتستغرق وقتًا لتحميلها. قد يتضمن ذلك معرض صور يقوم بتحميل صورة أكبر عند النقر فوق الصورة المصغرة.
لا تعمل الرسومات تحميل AJAX والمؤشرات الأخرى على زيادة سرعة الصفحة ، ولكنها تعمل على تحسين وقت التحميل "المدرك" ، والذي غالبًا ما يكون ذا قيمة مثل تحسين وقت التحميل الفعلي .
قراءة متعمقة:
4. موقع عربة التسوق و تسجيل الدخول ووظائف التسجيل
عندما يقوم المستخدمون بمسح إحدى الصفحات بحثًا عن زر "عربة التسوق" أو رابط "التسجيل الآن" ، فإن أول مكان يشاهدونه هو الزاوية العلوية اليمنى من الصفحة. ما لم يكن لديك سبب مقنع للقيام بذلك ، احتفظ بهذه الوظيفة في موقعها المألوف ، وإلا فإنك تخاطر بالتباطؤ وتعطيل تجربة المستخدم.
تشمل الخيارات والوظائف التي تندرج تحت هذه الفئة "عرض سلة التسوق" ، "تسجيل الخروج" ، "تسجيل الدخول" ، "تسجيل الخروج" ، "التسجيل" ، "إرسال الرابط" ، "نسيت كلمة المرور؟" وحتى "اتصل بنا. "عادة ما يكون هذا العنصر الأخير هو الأخير في شريط التنقل الأفقي.
TasteBook يتضمن أربعة روابط من هذا القبيل في الزاوية العلوية اليمنى من تخطيطه:
مجوهرات ماوي الغواصين مثال جيد آخر ويتضمن أيضًا رسم حقيبة تسوق:
5. تاريخ انتهاء الصلاحية على نماذج بطاقة الائتمان
عندما يطلب النموذج تاريخ انتهاء صلاحية بطاقتك الائتمانية ، يكون التنسيق دائمًا هو نفسه: الشهر ، الذي يمثله رقمين ، متبوعًا بالسنة ، ممثلة برقمين أو أربعة أرقام (مثل 03/11 أو 03/2011). التنسيق المكون من أربعة أرقام هو كيفية ظهور تاريخ انتهاء الصلاحية على بطاقة الائتمان نفسها.
أفضل طريقة ، إذاً ، لجمع هذه المعلومات وتعزيز تجربة المستخدم هي استخدام صندوقين مختارين ، أحدهما للشهر والآخر للسنة. لا تجعل المستخدم يدخل تاريخ انتهاء الصلاحية في مربع نص واحد ، حتى لو قمت بتوفير الإرشادات.
هنا مثال جيد من صفحة الدفع من مجوهرات الغواصين ماوي:
وهنا مثال على حقل تاريخ انتهاء صلاحية مصمم بشكل سيئ:
علاوة على ذلك ، لا يجب على محدد الشهر عرض أسماء الأشهر ، بل يجب أن يدرج الأرقام من 01 إلى 12. وليس هناك سبب لإبطاء المستخدمين من خلال جعلهم يكتشفون أن "08" تعني "أغسطس".
6. روابط سهلة التحديد
هذا لا ينبغي أبدا أن يكون مشكلة ، ولكن للأسف بعض المواقع لا تزال لا تميز بوضوح بين الروابط والنص المعتاد في الجسم الرئيسي.
في معظم الحالات ، أفضل طريقة للإشارة إلى هذا الاختلاف هي عن طريق جعل الروابط لونًا مختلفًا وتأكيدها. في بعض الحالات ، يكفي لون متباين قوي وحده. ولكن التأكيد على اللون أو تغييره قليلًا نادرًا ما يكفي ، وسيؤدي في كثير من الأحيان إلى إعاقة الوصول.
Cameron.io يجعل هذا التمييز جيدا:
لن تكون هذه الارتباطات مرئية إذا تم تسطيرها فقط ولكن لم تتغير بالألوان. لن تصمم زرًا لا يبدو مثل زر ، فلماذا تمزج الروابط النصية مع الجسم الرئيسي؟ نظرًا لأن معظم المستخدمين يقومون بمسح النص على الإنترنت ، يجب على المصممين التأكد من أن جميع الارتباطات قابلة للتحديد قبل مرور وقت طويل على الماوس.
قراءة متعمقة:
استنتاج
تعتبر جميع عناصر ووظائف واجهة المستخدم التي نوقشت في هذه المقالة حاسمة الأهمية لاستخدام موقع الويب ولعب أدوار مهمة في إدراك المستخدم لعلامتك التجارية.
يمكن أن تؤدي العديد من التحسينات الصغيرة إلى إحداث فرق كبير في السرعة المدركة ويمكن أن تجعل المستخدمين يشعرون بالإحباط أو عدم الارتياح.
اجعل عناصر واجهة المستخدم الخاصة بك بسيطة ومبسطة ، واتبع الاتفاقيات حيثما أمكن ذلك. سترى معدلات أقل للارتداد وتحويلات أفضل وتدفقًا ثابتًا لحركة الزيارات المرتجعة.
كتب حصريا ل WDD من قبل لويس لازاريس ، كاتب مستقل ومطور على شبكة الإنترنت. يدير لويس شبكة رائعة حيث ينشر مقالات ودروسًا حول تصميم الويب.
كيف يمكن تحسين بعض عناصر واجهة المستخدم أو عناصر واجهة المستخدم الأخرى؟ يرجى مشاركة أفكارك في التعليقات أدناه.