التسلسل الهرمي المرئي في UX: كيفية توجيه انتباه المستخدم

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

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

معظم الوقت ، يعمل النظام 2 في وضع "انخفاض استهلاك الطاقة" ولا يتخذ القرارات من تلقاء نفسه بشكل نشط للغاية. في معظم الأحيان ، يتم اتخاذ الاستنتاجات الجاهزة لذلك من قبل النظام 1 ، وهو جشع لـ "التصور".

تتمثل مهمة مصمم UX في دفع النظام 1 إلى الحل الصحيح.

تنظيم صفحة الويب المرئية

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

  • ما الذي يحدث هنا؟
  • كيف هذا مفيد بالنسبة لي؟
  • لماذا أحتاجه؟

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

منظمة بصرية جيدة يحل هذه المشاكل:

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

أنماط المسح الضوئي: ماذا وأين يتوقع المستخدم دون وعي

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

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

بالإضافة إلى ذلك ، هناك العديد من الأنماط الشائعة الأخرى في UX.

أنماط مسح سطح المكتب

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

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

أنماط المسح المحمول

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

يوجد المحتوى على الأجهزة المحمولة عادة بطريقتين: الشبكة والقائمة (عرض الشبكة وعرض القائمة ، على التوالي).

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

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

يتم توزيع انتباه المستخدم بالتساوي على جميع الصور ، ويكون المسح على شكل حرف S (ما لم تكن هناك صور بارزة بين الصور):

وضع اللهجات: التباين ، اللون ، العمق

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

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

تباين

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

عمق

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

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

اللون

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

لكن اللون الأحمر - السعر "السيئ" - يساعد على لفت الانتباه إلى أفضل سعر:

بالمناسبة ، لا تدع مفهوم "عمى الألوان" يصاب بك غير مدركين: جزء صغير من التلاشي لديه رؤية "سوداء وبيضاء" حقيقية ، في حين أن أنواع مختلفة من عمى الألوان (عندما لا تميز العينين أي لون أساسي واحد ، مما يؤثر على حوالي 5 ٪ من السكان عرضة لتصور المجموعة بأكملها ، وإذا كان جمهورك من الذكور - أكثر من ذلك: 8 ٪.

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

الأنماط المرئية: المحاذاة والتجميع

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

إن عقولنا (أي النظام 1 ، الذي نعنيه بشكل أساسي بعبارة "الدماغ" في هذه المقالة) يحب ويعمم. بمجرد أن يبدأ شيء من حولنا في التكرار ، نلاحظ ذلك ومع مرور الوقت ، نولي اهتمامًا أقل وأقل بالعناصر المكررة. يتم تشغيل الانتباه فقط عند كسر النمط الحالي.

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

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

لنلقِ نظرة على مجموعة أخرى:

بعد أن رأيت الصورة ، قمت ، دون أن تدركها ، بإجراء الكثير من الاتصالات ضمن مجموعة البجعات الستة:

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

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

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

راجع: 1 - هذه هي معلومات عامة عن الفندق ، 2 - تصنيف المستخدم ، 3 - بيانات عن الخدمة ، 4 - معلومات عن الغرف و 5 - مخصصة لحجم وموقع (تذكر الكنغر) أسعار الغرف. من خلال استعراض قائمة طويلة ، سوف "تستحوذ" على هذا المنطق دون وعي ، أو بالأحرى ، سيستوعب النظام 1. وسيبحث عن المعلومات الضرورية في الأماكن المعتادة.

أنت تعرف الآن عن أنماط مختلفة. ما التالي؟

ثم يجب عليك كبح جماح نفسك وعدم استخدام جميع الحيل في وقت واحد.

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

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

تم إعداد المادة من قبل دينيس سبرينغ ،
AskUsers مؤلف الخدمة
.

شاهد الفيديو: Space Visual element of Graphic Design Design theory Ep645 Beginners guide to Graphic Design (ديسمبر 2019).

Loading...

ترك تعليقك