هل هذة أول زيارة لك ؟
هــذة المدونــة تتحــدث عـــن فلسفيــات الويب ، السبب وراء نجاح المواقـع الكبـري وعن قابلية إستخـدام المواقـع. كما تتناول بعـض الموضوعـات عـن تصميم وتطوير محتوي المواقع علي الويب.
يمكن أن تبدأ بقراءة :
الاقسام
- البنوك الالكترونية ( 1 )
- الربح من الانترنت ( 2 )
- الشبكات الاجتماعية ( 5 )
- تحليلات جوجل ( 6 )
- تصميم تجربة المستخدم ( 10 )
- تطوير محتوى المواقع ( 15 )
- تفاصيل صغيرة كبيرة !! ( 3 )
- تلميحات سريعة ( 7 )
- جديد التقنية ( 6 )
- قوانين استخدام شبكة الانترنت ( 1 )
- معتقدات خاطئة عن تجربة المستخدم ( 5 )
- نصائح ( 1 )
- نظرية التصميم للويب ( 16 )
ارشيف Web-King
-
▼
2013
(
57
)
-
▼
أغسطس
(
57
)
- ثورة الفيس بوك على الموبايل
- الشبكات الاجتماعية و محركات البحث … في ويب المستقبل
- ليس كل ما تراه عينك يفهمه عقلك !
- تلميحات سريعة(٤): كيف تخبر زائر الموقع ان هناك محت...
- الدليل المبسط لإستخدام قائمة الاختيار Select Menu ...
- عشر حقائق مثيرة عن جوجل
- بعد إيقاف تطبيق فايبر، هنا مجموعة من البدائل
- عشرة أخطاء قد تكلفك مليارات الدولارات
- ما يجب معرفته عن الطباعة ثلاثية الأبعاد
- مصادر لتعلم برمجة تطبيقات الأندرويد
- قوقل تدخل عالم التلفاز بـ 35 دولارا فقط
- ما هي المواد التي يحاكم على أساسها قراصنة المعلوما...
- جوجل : سياسة الاستغباء و حقيقة التجسس و انتهاك خصو...
- ٣ مجموعات من المهارات لتصميم جيّد لخبرة المستخدم
- 5 أنماط تصاميم لمواقع إلكترونيّة تشجّع المستخدمين ...
- خمس نصائح لتبرع في كتابة طلب لوظيفة
- خمس نصائح لتزيد معدل الضغط على إعلانات موقعك
- كيف ترصد تقدم موقعك عبر تحليلات جوجل
- عشر نصائح مهنية تتمنى لو كنت تعلمها عندما كنت في س...
- عشرة أمور يقوم بها الرياديون البارعون
- ۩۞۩ البنوك المغربية و باي بال ۩۞۩
- إعداد وضبط منصة WAMP للتطوير
- HTML 5 الثورة القادمة في عالم الويب
- (javascript server-side (node.js - هل تستعملها؟ ولما؟
- طريقة جديدة تمكنك من الربح عن طريق الإنترنت
- برمجة وتصميم مواقع الانترنت
- عشرة نصائح لجعل شيفرتك البرمجية أفضل أداءاً
- بعض القواعد لاختيار اسم النطاق
- هل تصميم المواقع بلغة HTML5 هي الحل؟
- برمجة المواقع العامل الخفى لنجاح موقعك
- علامتك التجارية هي ما تميزك عن الاخرين.
- أهم 10 مشاريع للربح من الانترنت
- لا تبالغ في تصميم موقعك
- LTE تعرف علي تقنية
- معتقد خاطئ (٢): المستخدم يجب ان يصل لأى صفحة بالمو...
- ملخص فيديو : ما يجب ان تعلمة عن الكلمات المفتاحية ...
- مبدأ ” التوازن Balance ” في تصميم المواقع
- مفهوم ” التسلسل الهرمى البصرى” لتصميم المواقع، الن...
- التوجية البصرى فى المواقع: أيها الزائر أنظر هنا!
- مقدمة فى انقرائية النصوص على الويب
- معتقدات خاطئة عن تجربة المستخدم (١): الزائر يقرأ م...
- معتقد خاطئ (٢): المستخدم يجب ان يصل لأى صفحة بالمو...
- تلميحات سريعة(٢): بريد الجميل Gmail وتطبيقة لمفهوم...
- تلميحات سريعة(٣): لا تغفل النسخ الإحتياطى الدورى ل...
- تلميحات سريعة(٤): كيف تخبر زائر الموقع ان هناك محت...
- تلميحات سريعة(٥): الطريقة الصحيحة لإدارة عملية تصم...
- افكار ابداعية تعزز من تجربة المستخدم وسهولة تصفح ا...
- كيف تعد سياسة خصوصية لموقعك يقرأها كل المستخدمين؟
- ٨ خطوات سريعة تجعل مدونتك تسقط في الهاوية !
- [دليل عملى] كيف تصنع محتوي افضل لموقع شركتك علي ال...
- الدليل المبسط لإستخدام قائمة الاختيار Select Menu ...
- مازال مستخدمى الويب ينقرون نقراً مزدوجاً علي الروا...
- رئيسية موقع صديقة للمستخدم
- كيف تخبر زائر الموقع من أين يبدأ؟
- ٤٠ مقولة موجزة فى قابلية الإستخدام يجب ان تعرفها ج...
- قابلية الإستخدام للمدونات: أكثر ٢٠ خطأ شائع
- [دليــل شامــل] ١٥ خطوة ضرورية قبل إطلاق موقعك!
-
▼
أغسطس
(
57
)
يتم التشغيل بواسطة Blogger.
جديد المواضيع
-
مفهوم التسلسل الهرمى مصطلح “التسلسل الهرمى” بشكل عام يعنى ترتيب مجموعه من العناصر( اسماء ، قيم ، تصنيفات …الخ) من أعلى لأسفل وفق معيار...
-
يصعب عليك التنافس في سوق العمل عندما تكون في أول مسيرتك المهنية. والحقيقة أن المسيرة لن تكون سهلة وقد تضطر إلى العمل في وظيفة لا تحبها، ...
-
هذا المقال سيعرض بعض الخطوات الهامة والضرورية قبل افتتاح أى موقع بصورة رسمية للجمهور، هذة الخطوات غالباً ما يتم اهمالها او تجاهلها من قبل ...
-
من خلال عملي كمرشدة للشركات الناشئة، ألتقي بالكثير من مؤسسي هذه الشركات في المنطقة العربية وفي كل أنحاء العالم. استمعت لعدد من التسجي...
-
نحن نصمم المواقع من اجل ان ندفع المستخدمين والزوار الي القيام بشئ محدد… كأن ندفعهم لشراء شيء ما، الاستمرار في قراءة المزيد من محتوي الموقع...
-
السلام عليكم. كما لا يخفى على متابعي توجهات الويب أن javascript بدأت تنتشر بشكل كبير لكل من جهة المستخدم (client-side) ومن جهة الخاد...
-
قبل بضعةِ أيَّامٍ مَضَت، جاءتنا الأخبار حول فريق من العلماء استخدمته شركة فيس بوك لأداء تجربة على مُستخدمي شبكتها الاجتماعية، تَهْدُفُ إ...
-
انقرائية النصوص واحدة من أهم العوامل التى تدعم قابلية استخدام المواقع، المحتوى النصى اذا لم يكن مكتوب ومنسق بطريق تدعم قراءته فإنه سيؤثر ع...
-
بعيداً عن متاهات التسويق الشبكى التى وصلت إلى حد "النصب" فى الفترة الأخيرة، هناك طريقة جديدة تمكنك من الربح عن طريق الإنترنت...
-
لازال عدد كبير لا يؤمن بأهمية الانترنت في حياتنا. فالانترنت يمكن أن يكون بالفعل بيئة للمشروعات وماكينة در المال فعلًا، ولكن هناك الكثي...
3:39 م
|
تعديل الرسالة
التوجية البصرى لعين المشاهد المقصود به إجبار عين المستخدم بطريقة غير مباشرة لكى ينظر لمنطقة بعينها فى التصميم، ويعتبر هذا المفهوم أحد أهم اسرار نجاح أى تصميم سواء كان تصميماً للويب او للطباعة؛ غالباً ما يتم تجاهل هذا المبدأ من أكثر المصممين خبرة وإحترافيه، فى هذا المقال سنلقى نظرة أعمق على كيفية توجية عين المستخدم لمناطق معينة فى تصميم الموقع و سنتعرف على طرق السيطرة على حركة عين المشاهد.
كيف تتحرك العين عند زيارة موقع ما؟
عندما يدخل المستخدم الى موقع فإن عينة تتخذ مساراً افتراضياً للحركة وفقاً للغة التى يقرأ بها الموقع فتتحرك العين وفقاً لهذا المسار، فمثلاً زائر الموقع الذى يستخدم اللغة العربية فى القراءة، تتحرك عينة من أعلى اليمين الى اسفل يسار الشاشة كما توضحة الصورة التالية:-
هل هذا يعني ان ما هو موجود دون النقطتين (١) و (٢) لا يشاهدة المستخدم؟ بالطبع لا ولكن هذة هى الحركة الافتراضية للعين التى لو لم تجد ما يجبرها على سلوك طريق آخر فإنها افتراضياً ستتحرك من النقطة (١) الى النقطة (٢).
كيف اذا نحول عين المشاهد من هذا المسار الافتراضى لينظر الى اماكن أخرى فى التصميم- اماكن محددة بيعنها نريدة ان يذهب اليها دون غيرها ؟…. إليك القاعدة، عينك تحتاج الى من يأخذ بيدها ويدلها على الطريق الذى تسلكة لتشاهد اى صورة او مشهد بصرى، فهى تقوم بالآتى:-
- أولا: العين تبحث عن اسهم او اتجاهات تكون فى الصور الموجودة بواجهة الموقع لتدلها لطريق معين تسلكة.
- ثانيـــــاً: ستبحث عن صورة او مشهد به عين اخرى وترى الى اين تنظر ثم تتبعها، مثلاً لو فى رئيسية الموقع وجدت صورة بها انسان ينظر الى اليسار ستتبعة عينك لا اراديا وتتجه لليسار!
- ثالثـــــاً: ترتيب النماذج، المقصود بالنماذج هنا مثل نموذج الاتصال بنا فى المواقع، ستجد ان الحقول وعناوينها مرتبة بطريقة معينه، ستتبعها العين لا ارادياً.
- رابعــــاً: اتجاه التصميم، وهنا يلعب توزيع عناصر الموقع دوراً هاماً في قيادة عين المستخدم لاتجاه معين.
- خامساً: اذا لم تجد العين اى من هؤلاء المساعدين الأربعة السابقين، ستسلك الطريق الافتراضى الذى وضحناه فى النقطة السابقة، عين المستخدم العربى تتجه افتراضياً من اعلى اليمين الى اسفل يسار الشاشة.
لنشرح كل نقطة بالتفصيل …
١- تحكم بالاتجاهات فى الصور الموجودة بالواجهة
الصور الموجودة بالواجهة يمكنها ان تسيطر بسهولة على حركة عين المستخدم عندما يزور الموقع، فلنفترض ان احدى الصور التالية موجودة برئيسية الموقع:-
اعتقد ان عينك تحركت في الصورتين وفق الاتجاهات التالية:-
فى الصورة الأولى عينك ستتحرك من الأسفل الى أعلى يمين الشاشة متتبعة السهم الموجود بالصورة وكذلك فى الصورة الثانيه، لنلقى نظرة على بعض الامثلة الأكثر تعقيداً، ولنرى كيف ستتحرك العين:-
فى الصورتين السابقتية ٤،٣ ستجد ان العين تحركت وفق المخطط التالى:-
٢- اتجاه العين داخل الصور الموجودة بالتصميم
هذة النقطة من أكثر الأخطاء التى يقع بها مصممين ومحررى المواقع، عندما تستخدم صورة فى تصميم الموقع وتحتوى على انسان (سواء كان صورته حقيقية او كرتونية) فإن المكان الذى تنظر الية عينه، تتبعها عين المشاهد ايضاً! فيجب ان تجعل العيون الموجودة داخل صور واجهة الموقع تنظر الى منتصف وداخل التصميم وليس الى الحدود، لنوضح هذة النقطة بمثال:-
في رئيسية صفحة موقع البى بى سى بالعربية، لاحظ الصورتين الموجودتين علي يمين الصفحة، ستجد ان كلاً من صورة الفتاه والرجل ينظران الى خارج الصفحة وليس الي المنتصف، هذا يقود عين المشاهد الى ان تسلك نفس الاتجاه اللذان تنظر فيهما كلا الصورتين اى الى خارج الصفحة بدلا من ان تنظر الى منتصف الصفحة.
ستتحرك العين وفق المخطط التالى:-
- وفق الإتجاه الإفتراضى لقراءة موقع باللغة العربية، ستبدأ عينك من أعلى اليمين الى اسفل يسار الموقع.
- ستجد انه في طريقها ظهرت صورة بها شخص ينظر الي يمين الشاشة خارج الموقع، ستتبع عينك نفس المسار لخارج الموقع!
- ستحاول العين العودة مرة اخرى لتصفح الموقع وصولاً للمحتوى.
- ستجد فى طريقها صورة لشخص ينظر أيضا الى يمين الشاشة خارج حدود الموقع، ستتبعه العين!
- فى النهاية ستحاول العين معاودة التصفح وصولاً للجزء المحدد بعلامة”؟” لتصل للمحتوى.
شاهد عندما نعكس اتجاه الصورتين في الاخبار ستجد ان عينك لا ارادياً اتجهت للنظر لداخل الموقع بدلا من الخارج.
٣- ترتيب حقول النماذج Forms
فى الصورة السابقة ستجد شكلين لترتيب حقول نموذجا ما، والدوائر تمثل حركة العين فى قراءة حقول كلاً من الشكلين، من الواضح ان:-
- الشكـل الاول الذى يوجد على يمين الصورة، هو الأكثر قابلية وسرعة للمسح من العين، لماذا؟ لانه يتطلب عدد أقل من الحركات التى ستتحركها العين لتقرأ وتملأ المحتوى – ٥ حركات فقط.
- الشكل الثانى على يسار الصورة ستجد انه يتطلب ١٠ حركات أي ضعف عدد حركات الشكل الأول، ففيه تتحرك العين في اتجاهين يسار .. يمين والعكس لتنه قراءة وملئ كل الحقول، وهذا مجهود على العين اذا ما قارناه بالشكل الأول.
٤-اتجاة التصميم
اتجاه توزيع عناصر واجهة الموقع له تأثير قوى فى رسم المزاج العام للتصميم، يجب ان تتخذ قرارك بإختيار توزيعة مناسبة للعناصر الموجودة فى واجهة الموقع بحرص شديد، لان له الأثر الاكبر على نجاح التصميم فى توجيه عين المشاهد لما تريدة بالضبط. توزيع العناصر بشكل افقى فى واجهة الموقع التالى يرسل رسالة مفادها الهدوء، الإستقرار والثبات.
لنلقى نظرة على الصور الثلاث التالية:-
فى الصورة الأولى للعربة والتى يوجد فيها شد طولى للصورة Vertical Bulr Effect تشعرك الصورة بالترتيب والنظام، الصورة الثانية التى يوجد بها شد عرضى للصورة Horizontal Bulr Effect تشعرك الصورة بالثبات، الإستقرار والهدوء، اما الصورة الثالثة تشعرك ان العربة متحركة ونشطة. على الرغم ان الصورة واحدة إلا ان اتجاه الصور يولد شعور مختلف لكل صورة، كما يوجه بصرك لنقطة تركيز مختلفة عن مثيلاتها من الصور.
الخلاصة
ضع فى اعتبارك دائما ما تريد ان يشعر به جمهورك وهو يشاهد موقعك، يمكنك ان تضبط ايقاع ومزاج زوار موقعك من خلال دقة اختيارك لاتجاه صور وتصميم الواجهة، وعندما يأتى الامر للنصوص والحقول والنماذج، جب ان تفهم كيف تتحرك عين المستخدم وعدد الحركات التى تقوم بها العين، هذا سيساعدك فى تصميم واجهات صديقة للمستخدم واكثر قابلية للإستخدام.
تم ترجمة هذا المقال من موقع WebDesignTut+ مع اضافة وجهة نظر الكاتب وأمثلة اكثر قربا لتوضيح الفكرة، واضافة تلميحات ” نصيحة خبير”، رابط المقال الأصلى هنا.
اذا اعجبتك هذه التدوينة فلا تنسى ان تشاركها وتساعدنا على نشر المدونة ، كما يسعدنا ان تنضم الى قائمة المشاركين في Web-King من خلال (نشرات rss)
التسميات:
نظرية التصميم للويب
0 التعليقات :
إرسال تعليق
رأيك مهم بالنسبه لنا ، فلا تحرمنا منه