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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الخلاصة

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