التوجية البصري في المواقع: أيها الزائر أنظر هنا!

كتبه أحمد مجدي 14 أبريل 2012

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

كيف تتحرك العين عند زيارة موقع ما؟

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

الإتجاة الإفتراضى لحركة عين المستخدم العربى
الإتجاة الإفتراضى لحركة عين المستخدم العربى

هل هذا يعني أن ما هو موجود دون النقطتين (١) و (٢)  لا يشاهده المستخدم؟ بالطبع لا ولكن هذه هي الحركة الافتراضية للعين التي لو لم تجد ما يجبرها على سلوك طريق آخر فإنها افتراضياً ستتحرك من النقطة (١) إلى النقطة (٢).

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

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

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

لنشرح كل نقطة بالتفصيل …

1- تحكم بالإتجاهات في الصور الموجودة بالواجهة

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

العين تتبع دوماً اتجاه الاسهم
العين تتبع دوماً اتجاه الاسهم
أعتقد أن عينك تحركت في الصورتين وفق الاتجاهات التالية:-

العين تتبع دوماً اتجاه الاسهم

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

حتى لو كانت تلك الاسهم بطريقة غير مباشرة تتبعها العين ايضاً

حتى لو كانت تلك الاسهم بطريقة غير مباشرة تتبعها العين ايضاً
في الصورتين السابقتية ٤،٣ ستجد أن العين تحركت وفق المخطط التالي:-

اتجاهات الاسهم في الصور السابقة

2- اتجاه العين داخل الصور الموجودة بالتصميم

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

الى اين تنظر عين الشخصية في الصورة ؟

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

اتجاهات نظر الشخصيات في الصورة

ستتحرك العين وفق المخطط التالي:-

مسار تحرك العين
  1. وفق الإتجاة الإفتراضي لقراءة موقع باللغة العربية، ستبدأ عينك من أعلى اليمين إلى أسفل يسار الموقع.
  2. ستجد انه في طريقها ظهرت صورة بها شخص ينظر إلى يمين الشاشة خارج الموقع، ستتبع عينك نفس المسار لخارج الموقع!
  3. ستحاول العين العودة مرة أخرى لتصفح الموقع وصولاً للمحتوى.
  4. ستجد في طريقها صورة لشخص ينظر أيضاً إلى يمين الشاشة خارج حدود الموقع، ستتبعه العين!
  5. في النهاية ستحاول العين معاودة التصفح وصولاً للجزء المحدد بعلامة”؟” لتصل للمحتوى.
الطريقة الصحيح لوضع الصور فى الويب

شاهد عندما نعكس اتجاة الصورتين في الاخبار ستجد أن عينك لا إرادياً اتجهت للنظر لداخل الموقع بدلاً من الخارج.

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

3- ترتيب حقول النماذج Forms

 

كيف ترتب الحقول فى النماذج

في الصورة السابقة ستجد شكلين لترتيب حقول نموذجاً ما، والدوائر تمثل حركة العين في قراءة حقول كلاً من الشكلين، من الواضح أن:-

  • الشكـل الاول الذي يوجد على يمين الصورة، هو الأكثر قابلية وسرعة للمسح من العين، لماذا؟ لانه يتطلب عدد أقل من الحركات التي ستتحركها العين لتقرأ وتملأ المحتوى – ٥ حركات فقط.
  • الشكل الثانى على يسار الصورة ستجد انه يتطلب ١٠ حركات أي ضعف عدد حركات الشكل الأول، ففيه تتحرك العين في اتجاهين يسار .. يمين والعكس لتنه قراءة ومليء كل الحقول، وهذا مجهود على العين اذا ما قارناه بالشكل الأول.
نصيحة خبير: من الافضل وانت تصمم نماذج كصفحة اتصل بنا، الافضل ان ترتب الحقول بشكل طولى لسرعة ملئ الحقول وسرعة مسحها بالعين
من الافضل وانت تصمم نماذج كصفحة اتصل بنا، الافضل ان ترتب الحقول بشكل طولى لسرعة ملئ الحقول وسرعة مسحها بالعين

4-اتجاة التصميم 

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

اتجاه توزيع عناصر واجهة الموقع له تأثير قوي في رسم المزاج العام للتصميم
اتجاه توزيع عناصر واجهة الموقع له تأثير قوي في رسم المزاج العام للتصميم
اتجاه توزيع عناصر واجهة الموقع له تأثير قوي في رسم المزاج العام للتصميم

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

الخلاصة

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

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

عن كاتب المقال

أحمد مجدي
مهندس تجربة الاستخدام، متخصص في تصميم واجهات مواقع، تطبيقات الويب والموبايل منذ عام 2006، ورئيس تحرير معمل ألوان. تويتر: @ahmedmagdi


كل مقالات الكاتب

اترك تعليقك على المقال 22 تعليق

  • تحليل منطقي و منظم .. شكراً لك

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

  • بالنسبة لدراسة مسار العين و الاهتمام براحة الزوار و المستخدمين فهو شيء نادر في المواقع العربية

    يجدر بالمصممين أن يتبعوا مثل هذه الأشياء و ألا يكون التصميم عشوائي

    و جزاك الله خيرا على التدوين 🙂

  • السلام عليكم
    أوافقك الرأي تماما أخي الكريم التوجيه البصري يلعب دور كبير جدا
    و التوجيه البصري الذي أبهر العالم كله هو عندما أرادت الدعاية لخدمة +Google
    حيث عند الدخول للصفحة الرئيسية يظهر لك سهم كبير أزرق متحرك نحو زر الخدمة
    و هذه صورة السهم http://cdn-static.cnet.co.uk/i/c/blg/cat/software/google-plus-blue-arrow.jpg
    تأتير بصري رائع من جوجل أعجبني كثييرا
    و أيضا الأزرار و الروابط إذا كانت في اليمين تكون أفضل للزائر لأن أغلب الزوار يستخدمون اليد اليمنى و إذا و ضعت الروابط و الأزرار في اليمين يسيهل عليهم تصفح المواقع
    تحياتي لك

    • نعم اخي الكريم، هذة ملاحظة رائعه، فلقد استخدمت جوجل اول نوع من أنواع التوجية البصرى، وهو التوجية بالسهم المباشر، من الامثلة الرائعه أيضا على هذا النوع من التوجية موقع WebDesign Weekly
      http://web-design-weekly.com/
      ستجد السهم يقودك مباشرة لمكان التسجيل بالنشرة.

  • بارك الله فيك على هذه التدوينة المتميزة .

  • جميل استاذي
    واتمنى لهذه المدونة التطور
    لاننا نحتاج لمثل هذه المواضيع

  • بارك الله فيك , حقاً أستفدت من المدونة ومن هذه التدوينة

  • لقد أضعت الكثير من حياتي حين لم أصادف من قبل مدونتك أخي الكريم ، تدوينات على أعلى مستوى واصل !

  • مقالة رائعة …

  • مشكووور أخي الكريم على المعلومات القيمة 🙂 وااصل

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

    • وجهة نظرة جديرة بالإهتمام، ولكن انا لم اقل لك ان تقلب الصورة، ولكن اجلب صور بالأساس تنظر لداخل الموقع ! كما ان الوكالات الإخبارية بالتأكيد سيتوفر لها مواد مرئية تتفق ومع هذا المبدأ قدر الإمكان،

  • شكرا على الموضوع الاكثر من رائع لقد استفدت منه
    بارك الله فيك

  • Ahmed Elsayed

    مقاله رائعة حقاً
    مفيدة جدا بالاخص في المواقع ذو المحتويات الكثيرة في الصفحة الواحدة 🙂
    شكراً لك

  • محمود سعيد

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

    • علي العكس تماماً …
      فالشخصية في الصور الموضوعه بالمقال عدا الاخيرة … عيناه تنظر للمشاهد مباشرة. اما الصورة الاخيرة فعين الشخصية تنظر للحاسوب.

  • محمد عيساني

    بارك الله فيك وفي مجهودك انت متميز واعجبني المامك بالتفاصيل .
    مزيد من المقالات المتميزة ان شاء الله

  • رائع بل اكثر من رائع .. امور بحثت عنها طويلا لم اجدها الا في هذا المقال
    اشكرك من كل قلبي
    ويعطيك الف الف عافية ^^

  • كمال

    رائع…فقد استفدت منه كثيرا