هل هذة أول زيارة لك ؟
هــذة المدونــة تتحــدث عـــن فلسفيــات الويب ، السبب وراء نجاح المواقـع الكبـري وعن قابلية إستخـدام المواقـع. كما تتناول بعـض الموضوعـات عـن تصميم وتطوير محتوي المواقع علي الويب.
يمكن أن تبدأ بقراءة :
الاقسام
- البنوك الالكترونية ( 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:41 م
|
تعديل الرسالة
مصطلح “التسلسل الهرمى” بشكل عام يعنى ترتيب مجموعه من العناصر( اسماء ، قيم ، تصنيفات …الخ) من أعلى لأسفل وفق معيار محدد ( الحجم، الأهمية، الشكل … الخ). اكثر مثال بصرى يوضح هذا المصطلح هو الهرم.
“التسلسل الهرمى البصرى” هو احد اهم المبادئ وراء نجاح واجهات المواقع الكبرى، هذا المقال سوف يختبر الأثر الذى يتركة تطوير واجهات المواقع وفق هذا المفهوم، النظرية التى تقف وراء هذا المفهوم ، وكيف يمكنك تطبيق هذا المفهوم بشكل عملى على تصميم المواقع؟
التصميم الجرافيكى = التواصل مع المستخدم/المشاهد
التصميم الالكتروني اوالجرافيك ديزاين Graphic Design هو فى جوهرة طريقة للتواصل مع الناس، فالتخصص الحقيقى للمصمم هو الاتصال البصرى Visual Communication. لكى تكون مصمم ناجح يجب ان تكون قادراً على توصيل فكرتك للناس فى صورة بصرية ناجحة. العصر الذى نعيش فيه هو عصر تغلب علية الصورة اكثر من اى شئ آخر، اذا قدمت لمستخدم الويب كتلة نصية هائلة من المعلومات فان ٩٩ شخص من كل ١٠٠ لن يقرأها … لماذا؟لان الكثير من المستخدمين يفكرون بطريقة بصرية Visual Thinkers.
كيف ننظر للأشياء؟
لنتأكد من هذة المعلومة يجب أولاً ان نعرف كيف ننظر نحن البشر للأشياء؟ الناس لا يمكن ان نسميهم “مشاهدين متكافئين الفرص” اى انهم لا يعدلون في مشاهدتهم للاشياء، فنحن لا نحكم علي الاشياء بالمنطق! …. كيف؟
المستخدمين يقسمون الاشياء التي يشاهدونها وفق مبدأ “ العلاقات البصرية Visual Relationships ” فكل مجموعة من العناصر يجمعها الدماغ فى تصنيف واحد وفق معيار محدد ( اللون ، الحجم … الخ )
فلنشاهد الصورة التالية :-
ماذا يخبرك عقلك عند مشاهدة هذة الصورة ؟ سيقول لك “ هذة الصورة ليست عبارة عن دائرتين وانما دائرة سوداء كبيرة واخرى حمراء صغيرة! ”
السبب بسيط: عندما تقدم لك تلك الصورة التى تحتوى على دائرتين، عقلك لن يراهم دائرتين ولكن سيحاول ايجاد طريقة تساعدة على التفريق بين هاتين الدائرتين! احداهما قد تكون كبيرة او لونها مختلف. هذة الاختلافات التى يحاول عقلنا توليدها هى التى تمنحنا فرصة للتفريق بين الآشياء بل واعطائها معانى خاصة بها.
فلنشاهد صورة اكثر تعقيداً:
التعقيد فى الصور والمرئيات يجبرنا لا اراديا على محاولة “تصنيف” الآشياء التى نراها، عقلك لن يحاول معرفة عدد الدوائر او المربعات الموجودة فى الصورة ولكن سيري اشياء باللون الاسود وأخرى بألوان مختلفة. فأوجة الشبة والإختلاف بين العناصر اصبحت الإطار الذى نرى منة الاشكال …
- الاختلاف في الحجم: يخبرنا أن عنصر واحد “المربع الاسود الكبير” هو أقرب إلينا من العناصر الآخرى “الدوائر الاخري” أو أن كائن واحد هو أكثر هيمنة من العناصر الأخرى.
- الاختلاف في اللون: يخبرنا ان عنصر واحد يحمل مميزات فريدة عن غيرة من العناصر الموجودة فى محيطة.
الشكل واللون والحجم يمكن استخدامهم لإيصال رسائل بصرية محددة للمستخدمين تغنى عن المئات من الكلمات
ما علاقة هذا بالويب؟!
التصميم للويب هو جزء من التصميم الجرافيكى، وبالتالى فان البشر ينظرون للمواقع وفق المبادئ نفسها التى ينظرون بها لاى تصميم جرافيكى آخر مع اختلافات بسيطة تتعلق بالوسيط وهو جهاز الكمبيوتر وطبيعة عرض النصوص والصور للويب.
تصميم المواقع يجب ان يضع مبدأ العلاقات البصرية فى اولويات التصميم حتى يستطيع ان يوصل الفكرة و المعلومة بصورة بصرية ناجحة. فلا يكفى وضع كتل نصية صماء فى المواقع وواجهاتها، مهمة مصممين المواقع ان يكسروا ذلك الملل ويحولون تلك النصوص الى قطع لذيذة من المعلومات في شكل صور مرئية والتى من السهل على المستخدمين ترجمتها وفهمها وفق تفكيرهم البصرى Visual Think.
التسلسل الهرمى البصرى
هناك العديد من الأمثلة التى توضح مفهوم العلاقات البصرية للأشياء، اذا كنت من الباحثين فى علم الانثروبولوجيا وهو علم دراسة الانسان فبالتأكيد ستخلص الى ان ادراك الانسان البدائى لمفهوم العلاقات البصرية بصورة فطرية هى مهارة اكتبسها لكى يبقي نفسة على قيد الحياة.
التسلسل الهرمى البصرى ببساطة هى الطريقة التى تستخدمها ادمغتنا لتصنيف المعلومات والعناصر والاشياء التى نشاهدها كل يوم، ولأن نجاح اى موقع مرهون بقابلية استخدامة عند زوار الموقع فيجب ان يكون متوافق مع طبيعة رؤيتهم للأشياء. فإيجاد روابط بين الأشياء وخلق علاقات بينها هو من طبيعة البشر تماماً مثل الاكل والشرب، ومهما كانت المعلومات المقدمة بسيطة او موجزة، فبتنظيمها وفق مبدأ التسلسل الهرمى سيحولها الى معلومات اكثر فاعليه من غيرها.
مثال لتوضيح مفهوم التسلسل الهرمى البصرى على النصوص :-
في الصورة السابقة نرى ابسط تطبيق لمفهوم التسلسل الهرمى البصرى على النصوص، فى كلتا الفقرتين المعلومات المكتوبة واحدة، المثال الثانى تم كسر الجمود الموجود فى المثال الأول فتغيرت الطريقة التى ينظر بها المستخدم الى النص، عندما نتحدث عن تطبيق مفهوم التسلسل الهرمى البصرى للنصوص فاننا نعنى ( المسافات بين النصوص، التشابة فى تنسيق النص بين العناوين التى تتبع تصنيف محدد، اختلاف الالوان، اختلاف الخطوط Fonts المستخدمة …. الخ) التسلسل الهرمى يعطى اولوية القراءة للعناوين المميزة عن الفقرة المكتوبة بحجم اقل. العناوين تخطف البصر قبل الفقرة.
عندما تلون عدة عناوين باللون الاحمر وتلون مجموعة اخرى من العناوين باللون الازرق، فدماغياً العقل يترجم تلك العلاقة البصرية، فيفهم ان كل لون يعنى تصنيف مختلف حتى لو لم تذكر ذلك بشكل مباشر.
كل ماسبق عبارة عن مبادئ اساسية لمفاهيم التسلسل الهرمى البصرى، الاتصال البصرى ومفهوم بناء العلاقات البصرية بين العناصر. سننتقل الي امثلة وتقنيات اكثر عملية وعمقاً لتطبيق تلك المفاهيم بشكل عملى على تصميماتنا الحديثة للويب …
أدوات تطبيق مفهوم التسلسل الهرمى البصرى
الادوات التى نستخدمها لتطبيق هذا المفهوم ليست ابتكارات جديدة ولكن تقنيات واساليب بسيطة كل مصمم مواقع يستخدمها يوميا، الأدوات التى يستخدمها كل النجارين فى صناعتهم واحدة ( الشاكوش، الكماشه، المسامير … الخ ) ولكن الطريقة التى يستخدمون بها الأدوات؟ وما ينتجونه بها هو ما يحدث الفرق بين النجار المبدع والآخر العادى …
الحجم
العناصر ذات الحجم الأكبر فى التصميم يعطيها الدماغ الأولوية قبل غيرها فى النظر والإهتمام، استخدام الحجم لتطبيق مفهوم التسلسل الهرمى البصرى لهو طريقة فعالة لكى تقود عين المستخدم من العناصر الأكثر اهمية فى واجهة الموقع الى العناصر الأقل أهمية، تقنية ” الحجم ” من اكثر الأدوات المستخدمة فى تنظيم المعلومات وعرضها بصور بصرية ناجحة.
تعليمات هامة عند تطبيق هذة الأداة: يجب ان يكون العنصر الاكبر فى الحجم هو العنصر الاكثر أهمية مثل اسم الموقع او قائمة الموقع الرئيسية … الخ
اللون
الألوان ستظل دائما ملكة على ادوات تنظيم المعلومات وعرضها بصرياً، إستخدامك للألوان بطريقة صحيحة سيسهل كثيرا على المستخدم فى التنقل بين المعلومات التى تعرضها على موقعك، يجب ان تستخدم الألوان بشكل صحيح فمثلاً يجب الا تظهر رسالة خطأ فى التسجيل باللون الازرق! يجب ان تكون باللون الاحمر لانه اصطلح على هذا اللون انه لون رسائل الخطأ.
الألوان لها تأثيرات نفسية مختلفة على المستخدم مثلاً غالبية المطاعم تستخدم اللون الاحمر فى لون علامتها التجارية، لماذا؟ اللون الأحمر يملك تأثيرات مختلفة على غدد الجسم، وبالتالى فهو ينشط خلايا الجسم ويرفع من طاقتها مما يدفعك للأكل والجوع وهو ما تحتاجة المطاعم تحديداً لكى تبتاع منها!
التباين
التباين اللونى او الحجمى يبين العناصر الاكثر قرباً والتى تتقارب في مستوى الأهمية البصرية، التحولات الهائلة فى احجام النصوص او درجات الألوان كآن تنتقل من لون الى لون مختلف تماما فى نفس التصميم، هذا التكنيك يخبر المشاهد انه هناك شيئاً مختلفاً قادم ويتطلب منه الإهتمام.
تعليمات هامة عند تطبيق هذة الأداة: التحولات الهائلة الخطأ في درجات الألوان لواجهات الموقع قد ترسل رسائل مفادها الفوضاوية في الموقع، يجب ان تجعل تلك التحولات اللونية الهائلة بين الاقسام الرئيسية للواجهة مثل الهيدر والفوتر مثلا.
المحاذاة والتقارب
قرب او بعد عناصر واجهة الموقع من بعضها البعض، يرسل رسالة ضمنية للزائر الموقع مفادها ان العناصر القريبة من بعضها تندرج تحت تصنيف واحد والبعيدة عن بعضها تندرج تحت تصنيف آخر مختلف …. وهكذا. المحاذاة ايضاً تعنى وضع كل عنصر من عناصر التصميم فى مكانة الصحيح فمثلاً زائر الموقع يتوقع انه فى اعلى الهيدر سيجد ( تسجيل الدخول، رابط للوحة التحكم، عربة التسوق … الخ ) فلا تجعل ظن المستخدم فى الموقع يخيب!
كذلك يمكن استخدام المحاذاة بطرق ابداعية مختلفة لخلق خبرة جديدة للمستخدم فى تصفحة للموقع، مثل الصورة التالية:-
التكرار
المقصود بالتكرار هو تكرار تنسيق Format، لون او استخدام خط Font … لعنصرين مختلفين فى واجهة الموقع. المثال التالى يوضح مفهوم التكرار …
في الصورة السابقة تجد فقرتين بنفس اللون والتنسيق (نفس خط المستخدم ونفس اللون) وبينهم عنوان نصى بلون وتنسيق مختلف، الرسالة التى سيفهمها العقل هى ان الفقرتين اللتان بنفس اللون هما عنصر واحد والسطر المكتوب باللون الاحمر هو عنصر آخر مختلف.
كثافة العناصر و المساحات البيضاء فى التصميم
لا تزحم واجهة الموقع بكثرة الصور والأيقونات، ايضا لا تحاول تشتيت نظر المستخدم باستخدام درجات لونية حادة وبعيدة عن مثيلاتها فى دائرة الألوان . “الصخب اللونى” يعادى الهدف الرئيسى للموقع وهو سهولة استخدامة.
لتوضيح اهمية استخدام المساحات البيضاء … نحتاج الى موضوع منفصل يبين مدى اهمية تلك المساحات وأثرها على تجربة المستخدم، لكن ايجازا المساحات البيضاء تساعد على راحة العين وتحسن من انقرائية النص، وتساعد على التركيز على المحتوى ولا تشتت المستخدم ….
التطبيق الخاطئ لمفهوم التسلسل الهرمى البصرى
التسلسل الهرمى البصرى الناجح لايعنى تطبيق اكثر تأثيرات برنامج الفوتوشوب احترافية ولكن يعنى بتنظيم المعلومات بطريقة قابلة للإستخدام ، قابلة للوصول وان تعرض تلك المعلومات بطريقة منطقية يفهمها كل زائر للموقع.
من المهم ان ندرك ان استخدام التسلسل الهرمى البصرى داخل تصميم واجهات المواقع لهو سلاح ذو حدين، الآن افكر فى اعلانات الفلاش المزعجة، النوافذ المنبثقة والإعلانات المتحرك ذات الخلفية السوداء والتى ابتلى بها الويب على مر السنين، قد تنجح تلك الاعلانات فى جذب انتباه الزائر ولكنها تفشل فى ترك خبرة جيدة لدية عند تصفح الموقع .
لماذا يعتبر مفهوم “التسلسل الهرمى البصرى” هام لمصممين المواقع؟
مع فهمنا للطبيعة التى تعالج بها ادمغتنا للمعلومات البصرية التي تعرض علينا يوميا، ومع ذلك التسونامى من العناصر البصرية التى نشاهدها كل يوم اصبحنا نمتلك حساسية تجاة تلك الواجهات التى تفتقر للتسلسل الهرمى الصحيح، لايمكن ان تتوقع من مستخدم الانترنت الحالى ان يغفر لك غفواتك فى تنظيم المعلومات فى واجهة الموقع، فقد اثبتت الدراسات ان مستخدمين الانترنت تعودوا على ” المسح البصري او Visual Scan ” بل واكتسبوا الخبرة فى التفريق بصريا بين المعلومات المهمة والغير مهمة.
بسبب تلك الحقائق يجب ان تحترف وتتقن ترتيب عناصر واجهة الموقع الذى تقوم بتصميمة فهذا لم يعد خياراً بعد الآن لقد اصبح اجباراً، فبعد ظهور الوسائط المختلفة لتصفح الانترنت من الموبايل ثم الأجهزة اللوحية وأخيراً القارئ الالكترونى، اصبح واجب عليك ان تضع ذلك المفهوم ضمن اولويات وادوات العمل لديك.
تم ترجمة هذا المقال من موقع WebDesignTut+ مع اضافة وجهة نظر الكاتب وأمثلة اكثر قربا لتوضيح الفكرة، رابط المقال الأصلى هنا، ربما تكون ايضا مهتم بالإطلاع على مقال ” مصممين المواقع يخربون الإنترنت ” فهو يحتوى على معلومات مفيدة لحقائق جديدة عن واجهات الاستخدام للمواقع.
اذا اعجبتك هذه التدوينة فلا تنسى ان تشاركها وتساعدنا على نشر المدونة ، كما يسعدنا ان تنضم الى قائمة المشاركين في Web-King من خلال (نشرات rss)
التسميات:
نظرية التصميم للويب
0 التعليقات :
إرسال تعليق
رأيك مهم بالنسبه لنا ، فلا تحرمنا منه