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

كتبه أحمد مجدي 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 تعليق

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

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