كيف توجه زوار موقعك لأهم المعلومات؟ يوجد 4 أدوات رئيسية تحت تصرفك، “Chris Bank of UXPin”
تحدثنا في مقال سابق عن كيف تقرأ عين الإنسان موقع الويب، وقمنا بشرح أهمية إنشاء تسلسل هرمي بصري في تصميم واجهة المستخدم في الويب، واليوم سنشرح بعض الطرق الأساسية لإنشاء تسلسل هرمي بشكل عملي.
01. التباين (Contrast)
التباين هو بروز عنصرين مختلفين متقاربين، في تصميم واجهة المستخدم للويب، حيث يمكن تعريف العنصر المهم عن طريق اللون أو الشكل أو الحجم أو الاتجاه أو textures .
التناوب (Alternating) بين أحجام الخطوط المختلفة والألوان ينشئ تسلسل هرمي بصري فوري في واجهتك.
علي سبيل المثال في الصورة ادناه لموقع constantcontact، التغيير بين الخلفية الفاتحة إلي الداكنة يفصل الدعوة إلي الفعل الأساسية (جرب مجانا ‘Try it FREE’) عن قائمة التنقل والدعوة إلي الفعل call to action (اتصل بنا ‘Call Us’) .
يستخدم التباين Contrast لإنشاء تسلسل هرمي في الصفحة الرئيسية لموقع Constant Contact
نمط الـ Z للموقع، يوفر تسلسل هرمي بصري واضح يبرز نموذج التقديم في وسط الصفحة.
في هذه المقالة، براندون جونز يبحث في كيفية تأثير استخدام اللون والحجم علي الانطباعات الأولية للعناصر في الواجهة.
استخدم الصورة التالية كمثال علي ذلك، معظم الناس لن يروا الدائرتين في النظرة الأولي – فعلي الأرجح سيروا “دائرة سوداء ودائرة حمرا صغيرة”.
التباين في عناصر الواجهة مهم وقوي جدا لأن التمايز هو استجابة الانسان الافتراضية.
2. اللون (Colour)
باختصار، الألوان الزاهية تبرز وتكون مميزة عن الألوان الهادئة. حيث يمكنك استخدام ذلك للفت انتباه المستخدم حيثما تريد.
بالاضافة إلي ذلك، يمكمن لبعض الألوان أن تساعد في تحديد مزاج الموقع بأكمله (الألوان الزرقاء هادئة، والحمراء عدوانية، إلخ..) وهذا مقال يتحدث عن معاني الألوان بالتفصيل (نظرية اللون للمصممين:1-معاني الألوان)
موقع Fitbit يجمع ما بين استخدام ألوان قوية ونمط Z التقليدي
موقع Fitbit يجمع ما بين استخدام ألوان قوية ونمط Z التقليدي. استخدام اللون الأرجواني الزاهي يضع الدعوة إلي الفعل (calls to action) بالقرب من أعلي التسلسل الهرمي البصري، وتطابق ألوان الأزار يشير لا شعوريا أن المفهومين مرتبطين.
3. الحجم (Size)
الحجم وخاصة حجم النص، فعال جدا لأنه يتحايل علي القواعد التقليدية للقراءة من اليسار إلي اليمين ومن أعلي لأسفل. وهذا يعني أن كلمة أو عبارة كبيرة في اسفل الزاوية اليمني قد تكون أول شئ يتم قرائته.
بالاضافة إلي ذلك يمكن للحجم أن يزيد التركيز علي الرسالة الفعلية أو المحتوي، مما يجعه أكثر أهمية.
في دراسة اجرتها مجلة (Smashing Magazine) للتيبوغرافي علي 50 واجهة موقع مشهور وجدت أن العناوين عادة ما يكون حجمها ما بين 18 و 29 بكسل، وحجم نص ال body يكون ما بين 12 : 14 بكسل.
4. المساحة (Space)
من المهم وجود مساحة في واجهتك، حيث أن تقليل الضجيج البصري “visual noise” يجعلها أقوي.
في دراسة لـ Dmitry Fadeyev أجريت عام 2004 وجد أن المساحة البيضاء تحسن الفهم فعليا بنسبة 20%.
موقع Houzz يستخدم المساحة البيضاء لجعل المحتوي أسهل للقراءة.
بينما التباعد لا يؤثر علي طريقة التعامل في موقع الويب، فهو يؤثر علي رضا وتجربة المستخدم. وفي المثال أعلاه المساحة البيضاء تجعل القراءة أسهل بكثير وتشجع علي التفاعل.
