لتصميم موقع صحيح مائة بالمائة عليك مراعاة التوجيه البصري للزائر ( أيها الزائر انظر هنا )

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

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

نصيحة خبير: عين المستخدم تتحرك افتراضياً وفق لغتة الأم، العربية من اليمين الى اليسار، والانجليزية من اليسار الى اليمين
كيف اذا نحول عين المشاهد من هذا المسار الافتراضى لينظر الى اماكن أخرى فى التصميم- اماكن محددة بيعنها نريدة ان يذهب اليها دون غيرها ؟…. إليك القاعدة، عينك تحتاج الى من يأخذ بيدها ويدلها على الطريق الذى تسلكة لتشاهد اى صورة او مشهد بصرى، فهى تقوم بالآتى:-
  1. أولا: العين تبحث عن اسهم او اتجاهات تكون فى الصور الموجودة بواجهة الموقع لتدلها لطريق معين تسلكة.
  2. ثانيـــــاً: ستبحث عن صورة او مشهد به عين اخرى وترى الى اين تنظر ثم تتبعها، مثلاً لو فى رئيسية الموقع وجدت صورة بها انسان ينظر الى اليسار ستتبعة عينك لا اراديا وتتجه لليسار!
  3. ثالثـــــاً: ترتيب النماذج، المقصود بالنماذج هنا مثل نموذج الاتصال بنا فى المواقع، ستجد ان الحقول وعناوينها مرتبة بطريقة معينه، ستتبعها العين لا ارادياً.
  4. رابعــــاً: اتجاه التصميم، وهنا يلعب توزيع عناصر الموقع دوراً هاماً في قيادة عين المستخدم لاتجاه معين.
  5. خامساً: اذا لم تجد العين اى من هؤلاء المساعدين الأربعة السابقين، ستسلك الطريق الافتراضى الذى وضحناه فى النقطة السابقة، عين المستخدم العربى تتجه افتراضياً من اعلى اليمين الى اسفل يسار الشاشة.
لنشرح كل نقطة بالتفصيل …
١- تحكم بالاتجاهات فى الصور الموجودة بالواجهة
الصور الموجودة بالواجهة يمكنها ان تسيطر بسهولة على حركة عين المستخدم عندما يزور الموقع، فلنفترض ان احدى الصور التالية موجودة برئيسية الموقع:-
اعتقد ان عينك تحركت في الصورتين وفق الاتجاهات التالية:-
فى الصورة الأولى عينك ستتحرك من الأسفل الى أعلى يمين الشاشة متتبعة السهم الموجود بالصورة وكذلك فى الصورة الثانيه، لنلقى نظرة على بعض الامثلة الأكثر تعقيداً، ولنرى كيف ستتحرك العين:-
فى الصورتين السابقتية ٤،٣ ستجد ان العين تحركت وفق المخطط التالى:-
٢- اتجاه العين داخل الصور الموجودة بالتصميم
هذة النقطة من أكثر الأخطاء التى يقع بها مصممين ومحررى المواقع، عندما تستخدم صورة فى تصميم الموقع وتحتوى على انسان (سواء كان صورته حقيقية او كرتونية) فإن المكان الذى تنظر الية عينه، تتبعها عين المشاهد ايضاً! فيجب ان تجعل العيون الموجودة داخل صور واجهة الموقع تنظر الى منتصف وداخل التصميم وليس الى الحدود، لنوضح هذة النقطة بمثال:-
في رئيسية صفحة موقع البى بى سى بالعربية، لاحظ الصورتين الموجودتين علي يمين الصفحة، ستجد ان كلاً من صورة الفتاه والرجل ينظران الى خارج الصفحة وليس الي المنتصف، هذا يقود عين المشاهد الى ان تسلك نفس الاتجاه اللذان تنظر فيهما كلا الصورتين اى الى خارج الصفحة بدلا من ان تنظر الى منتصف الصفحة.
ستتحرك العين وفق المخطط التالى:-
  1. وفق الإتجاه الإفتراضى لقراءة موقع باللغة العربية، ستبدأ عينك من أعلى اليمين الى اسفل يسار الموقع.
  2. ستجد انه في طريقها ظهرت صورة بها شخص ينظر الي يمين الشاشة خارج الموقع، ستتبع عينك نفس المسار لخارج الموقع!
  3. ستحاول العين العودة مرة اخرى لتصفح الموقع وصولاً للمحتوى.
  4. ستجد فى طريقها صورة لشخص ينظر أيضا الى يمين الشاشة خارج حدود الموقع، ستتبعه العين!
  5. فى النهاية ستحاول العين معاودة التصفح وصولاً للجزء المحدد بعلامة”؟” لتصل للمحتوى.
شاهد عندما نعكس اتجاه الصورتين في الاخبار ستجد ان عينك لا ارادياً اتجهت للنظر لداخل الموقع بدلا من الخارج.
نصيحة خبير: عندما تستخدم صور فى واجهة الموقع، حاول ان تجعلها تنظر للإتجاه الذى ترغب ان ينظر له زائر الموقع

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

نصيحة خبير: من الافضل وانت تصمم نماذج كصفحة اتصل بنا، الافضل ان ترتب الحقول بشكل طولى لسرعة ملئ الحقول وسرعة مسحها بالعين
٤-اتجاة التصميم 
اتجاه توزيع عناصر واجهة الموقع له تأثير قوى فى رسم المزاج العام للتصميم، يجب ان تتخذ قرارك بإختيار توزيعة مناسبة للعناصر الموجودة فى واجهة الموقع بحرص شديد، لان له الأثر الاكبر على نجاح التصميم فى توجيه عين المشاهد لما تريدة بالضبط. توزيع العناصر بشكل افقى فى واجهة الموقع التالى يرسل رسالة مفادها الهدوء، الإستقرار والثبات.
واجهة منتدى سوالف سوفت، مثال للواجهات ذات التوزيع الافقى الكلاسيكى الثابت.
لنلقى نظرة على الصور الثلاث التالية:-
فى الصورة الأولى للعربة والتى يوجد فيها شد طولى للصورة Vertical Bulr Effect تشعرك الصورة بالترتيب والنظام، الصورة الثانية التى يوجد بها شد عرضى للصورة Horizontal Bulr Effect تشعرك الصورة بالثبات، الإستقرار والهدوء، اما الصورة الثالثة تشعرك ان العربة متحركة ونشطة. على الرغم ان الصورة واحدة إلا ان اتجاه الصور يولد شعور مختلف لكل صورة، كما يوجه بصرك لنقطة تركيز مختلفة عن مثيلاتها من الصور.
الخلاصة
ضع فى اعتبارك دائما ما تريد ان يشعر به جمهورك وهو يشاهد موقعك، يمكنك ان تضبط ايقاع ومزاج زوار موقعك من خلال دقة اختيارك لاتجاه صور وتصميم الواجهة، وعندما يأتى الامر للنصوص والحقول والنماذج، جب ان تفهم كيف تتحرك عين المستخدم وعدد الحركات التى تقوم بها العين، هذا سيساعدك فى تصميم واجهات صديقة للمستخدم واكثر قابلية للإستخدام.
تم ترجمة هذا المقال من موقع WebDesignTut+ مع اضافة وجهة نظر الكاتب وأمثلة اكثر قربا لتوضيح الفكرة، واضافة تلميحات ” نصيحة خبير”، رابط المقال الأصلى هنا.
0/5 (0 Reviews)