كيف يؤثر مسح العين على التسلسل الهرمي المرئي في تصميم UX
في حين أن آلاف السنين من الفن ، من المزهريات اليونانية إلى المصليات الإيطالية ، قد شكلت تفهمنا لما هو الجمال ، فإن التكنولوجيا الحديثة نسبياً وراء تتبع العين تضيف ديناميكية جديدة إلى كيفية رؤيتنا للعالم. والأهم من ذلك ، أن هذا العلم الجديد المثير يساعدنا على فهم أفضل - وتصميم أفضل - للمواقع الإلكترونية الفعالة والجمالية على حد سواء.
يتبع تصميم الويب (كفنان مرئي) العديد من القواعد نفسها مثل أشكال الفن التقليدية. في هذه المقالة سنوضح بإيجاز أهمية التنظيم المرئي ، ثم نوضح كيف يمكن أن تؤدي نتائج تتبع العين إلى تحسين تخطيط واجهات الويب.
خلق منظمة بصرية
ليس من المستغرب أن يؤثر موقع الويب على نجاحه ، ولكن من المهم تحديد أسباب ذلك. في ورقته التواصل مع التسلسل الهرمي المرئي ويوضح لوقا واروبلوسكي ، مؤلف وكبير مديري تصميم المنتجات في Yahoo! ، أن العرض المرئي لواجهة ويب أمر ضروري من أجل:
توجيه
يمكن للواجهة المصممة بشكل جيد توجيه المستخدمين من إجراء إلى آخر دون الشعور بالقدرة على الاستقراء. بغض النظر عن رأيك في ممارساتهم التجارية ، لا شك في ذلك اوبر هو مثال على موقع على شبكة الإنترنت بشكل سلس بشكل لا يصدق. توجد عروض القيمة في الجزء العلوي من التمرير ، يتبعها شريط تمرير ممتع للتعرف على خيارات السيارة المختلفة ، والانتهاء من الخطوة المنطقية التالية للعثور على رحلات في مدينتك.
الاتصالات
من خلال التوفيق بين أجزاء من المعلومات بخلاف ذلك ، يمكن لواجهة المستخدم إنشاء روابط في ذهن المستخدم ، وتوصيل الرسائل دون ذكر أي شيء. انظر إلى موقع التصميم الشهير Abduzeedo : الفئات العامة في الجزء العلوي والمحتوى المميز في المنتصف وفئات تفصيلية في التذييل.
خلق تأثير عاطفي
لا ترتكب خطأ الاعتقاد بأن موقع الويب الخاص بك هو مجرد أداة ميكانيكية. مواقع الويب لديها القدرة على إجراء اتصالات عاطفية ، وإذا لم يكن لديك ، إرادة منافسيك. في الواقع ، قد يكون الناس في الواقع أكثر قابلية للتغاضي عن أوجه القصور في واجهتك إذا كنت تنتج نتيجة إيجابية استجابة عاطفية . ميل تشيمب هو مثال مثالي على موقع يحتوي على واجهة قابلة للاستخدام ومتحمسًا وممتعًا حقًا.
العين البشرية التي يمكن التنبؤ بها
في بعض الأحيان ، يبدو أن عينيك لديها عقول خاصة بها. لقد أعطتنا سنوات التطور غرائزنا لتحديد الأشياء والحركات التي نراها مهمة ، سواء كانت نزهة لشخص مثير عبر الشارع ، أو دب كارتون محبوب يعلن عن العسل. في حين أن الوزن النسبي الذي نضعه على ما هو مهم قد يختلف من شخص لآخر ، فإن الثابت الوحيد هو الآليات التي يتصرفون بها. على نطاق واسع ، يتبع غالبية الأشخاص نفس الاتجاهات عند عرض صفحة ويب.
من بين هذه الاتجاهات ، هناك نوعان سوف نناقشهما بالتفصيل. في المادة على المبادئ البصرية يوضح أليكس بيجمان ، مصمم التصميم في 99Designs كيف أن هذين النمطين ، بالنسبة للثقافات التي تقرأ من اليسار إلى اليمين ، هما الأكثر شيوعًا - والأكثر إفادة - عند تصميم تصميم موقع ويب.
يستخدم النمط الأول ، النمط F ، في الغالب للنص (ولكن يمكن تعديله لأغراض أخرى). يمكن استخدام النمط الثاني Z-Pattern لأي تخطيط مرئي. سنشرح الإيجابيات والسلبيات المختلفة لكل منها أدناه.
F-نمط
نمط F-Pattern هو اتجاه الرؤية الذي يظهر على الصفحات المحملة بشكل كبير بالنص ، وعادةً ما يتم نشر المدونات ، ومصادر الأخبار ، والمقالات ، وما إلى ذلك.
عند مواجهة مجموعة من الكلمات ، يقوم معظم القراء أولاً بفحص خط عمودي أسفل الجانب الأيسر من النص ، وعادةً ما يبحثون عن كلمات رئيسية أو نقاط اهتمام في الجمل الأولية للفقرة. في نهاية المطاف يجد القارئ شيئًا يحبه ، ويبدأ في القراءة بشكل طبيعي ، ويشكل خطوطًا أفقية. والنتيجة النهائية هي شيء يشبه الأحرف F أو E.
أجرى جاكوب نيلسون من مجموعة نيلسون نورمان دراسة حول إمكانية القراءة استنادًا إلى 232 مستخدمًا لمسح الآلاف من مواقع الويب. من بحثه ، سجل ما يعتقد الآثار العملية من F- نمط:
- نادرًا ما يقرأ المستخدمون كل كلمة من نصك.
- الفقرتان الأوليتان هما الأكثر أهمية ويجب أن تحتوي على خطافك.
- ابدأ الفقرات ، العناوين الفرعية ، والنقاط باستخدام كلمات رئيسية جذابة.
وكما هو الحال دائمًا ، فإن الزاوية العلوية اليسرى هي الأهم ، حيث تبدأ جميع ثقافات القراءة من اليسار إلى اليمين. عادةً ما يقرأ المستخدم أفقيًا عبر الرأس ، لذا إليك مكانًا جيدًا لشريط التنقل و / أو عبارة تحث المستخدم على اتخاذ إجراء. بعد ذلك ، يمسح المستخدم عموديًا إلى الجانب الأيسر ، حتى يصادفهم محتوى يهمهم. أخيرًا ، ينتهي المستخدم على الجانب الأيسر من الصفحة ، وهو مكان رائع يحتوي على عبارة تحث المستخدم على اتخاذ إجراء أو الإعلان. لا تدع الشريط الجانبي يطغى على المحتوى.
لكن F-Pattern ليس نموذجًا - فهو في الواقع ليس ممارسة دقيقة ، بل أكثر من دليل فضفاض تم جمعه من اتجاهات غالبية المستخدمين. تضع ذلك في الاعتبار لأن F- نمط يفقد فعاليته بعد الصفوف العليا من F.
تستخدم Kickstarter تخطيطًا للورقة لعرض المشروعات المميزة ، ولا تصبح مملاً بصريًا بعد أول 500 بيكسل.
من ناحية أخرى، iZettle يأخذ نهجًا أكثر تقليدية لنمط F على صفحته الرئيسية. ومع ذلك ، فقد تمكنوا من تجنب مظهر templated من خلال تراكب النسخة الأساسية ("Grow your business with iZettle") والعبارة التي تحث المستخدم على اتخاذ إجراء على صورة خلفية كبيرة. سننظر في هذا الحد الأدنى لتكييف نمط القراءة هذا مع تخطيط الواجهة لديك.
Z-نمط
بالإضافة إلى ذلك ، فإن نمط Z هو النمط الأبسط والأكثر شمولًا ، ويستخدم بشكل شائع في أي صفحة ويب تعتمد على النص. يمسح القارئ أولاً أفقيًا عبر الجزء العلوي ، ويهبط لأسفل ثم يعود إلى الجانب الأيسر ، ثم يمسح أفقيًا مرة أخرى عبر الجزء السفلي.
من المهم أن تفهم نمط Z متعدد الاستخدامات ، نظرًا لأنه يتناول متطلبات موقع الويب الأساسي ، مثل التسلسل الهرمي والعلامة التجارية وعبارات الحث على اتخاذ إجراء. جمالها في بساطته ، وتخطيط مثالي للمواقع التي تركز على الدعوة إلى العمل. ومع ذلك ، بالنسبة إلى المحتوى الأكثر تعقيدًا أو إفراطًا ، قد يكون نمط Z بسيطًا جدًا .
هل تعتقد أن Z-Pattern مناسب لصفحتك؟ إليك بعض أفضل الممارسات لتحسين الفوائد:
- الخلفية - احتفظ بالخلفية حيث تنتمي: في الخلفية. أنت لا تريد تشتيت القارئ.
- Point # 1 - كنقطة انطلاق ، هذا هو المكان الذي تريد وضع شعارك فيه بشكل عام.
- النقطة رقم 2 - على الرغم من أن العبارة الرئيسية التي تحث المستخدم على اتخاذ إجراء يجب أن تأتي لاحقًا ، فإليك مكانًا جيدًا للعبارة الفرعية التي تحث المستخدم على اتخاذ إجراء ، مع وضع علامة على شريط تنقل أفقي. (سيساعدك شريط الرسم أو شريط الصور الجميل على فصل الجزء العلوي والسفلي من الصفحة ، مما يشجع القارئ على البقاء على المسار القابل للتنبؤ للنمط Z.)
- النقطة رقم 3 - هذا مكان جميل لجذب الانتباه للروابط الأخرى ، أو بدلاً من ذلك لقيادة مرمى المستخدم إلى الهدف النهائي: النقطة رقم 4.
- النقطة رقم 4 - بصفتها "خط النهاية" ، فهذا هو المكان المثالي للعبارة الرئيسية التي تحث المستخدم على اتخاذ إجراء.
أول شيء تريد القيام به هو تحديد أولويات العناصر على صفحتك لنفسك حتى تعرف أكثرها وأقلها أهمية. من هناك ، الأمر مجرد مسألة تخصيصها إلى "النقاط الساخنة" المناسبة.
علاوة على ذلك ، يمكن تكرار نمط Z وتوسيعه في جميع أنحاء الصفحة. مجرد إلقاء نظرة على كيفية ذلك إيفرنوت التعرج لأسفل من خلال يدعو إلى العمل ونقاط البيع.
بصندوق الإسقاط يأخذ طريقة أبسط بصريا لهذا النمط متعرج عن طريق التخلص من أي صور الخلفية. وبدلاً من ذلك ، يتم تضمين المزيد من الوظائف في التخطيط نظرًا لأن عبارة "مزيد من المعلومات" التي تحث المستخدم على اتخاذ إجراء تساعد على توصيل كل قسم من نمط التعرّف بينما تشق عينيك الصفحة. يساعد هذا أيضًا القراء المدررين على النقر على الصفحة التالية ذات الصلة دون الحاجة إلى قراءة جميع النسخ أولاً.
البصر في البصيرة
يجب أن يكون تصميم الواجهة العظيمة مثل يد غير مرئية توجه القراء في سرعة التفكير. والميزة المهمة من اتجاهات نمط F-Pattern و Z- هي أنه يمكنك وضع المحتوى الأكثر أهمية حيث "سوف يتعثر" القارئ بشكل طبيعي ، بدلاً من محاولة إجباره على النظر إليها.
الدقة هي ميزة رائعة لأي تخطيط للصفحة ، ويمكن لهذه الأنماط أن تُحدث الفرق بين اقتراح شيء ما لقارئك مقابل دفعه إلى أسفل حلقه.
صورة مميزة ، الاستخدامات صورة العين البشرية عبر Shutterstock.