usability: استخدام الألوان في تصميم المواقع

ColorTheoryMixture

من حسن حظي أن تم تخصيص شبه محاضرة كاملة في مادة Human Computer Interaction عن استخدام الألوان الصحيح ودورها في عملية التفاعل بين الإنسان والحاسب. كانت الأستاذة تحدثنا بشكل مختصر عن استخدام الألوان في الواجهات الرسومية بشكل عام وتأثيرها على المتلقي والدراسات النفسية في هذا المجال، والاستخدامات المشهورة للألوان. فمثلا الأحمر عرف للتنبيه بسبب انجذاب العين له لاشعورياً وهكذا. استهواني الموضوع أكثر وبشكل عام استهواني موضوع الـ usability بكل ما يحويه إذ أنه بوجود واجهة ممتازة تضمن الوصول لبرنامج أو موقعك للمستخدم مباشرة. سأقوم بوضع سلسلة متصلة في هذا المجال وسأتناول في كل تدوينة موضوع مهم إن شاء الله. سأتحدث اليوم عن الألوان واستخدامها في تصميم المواقع وأسس اختيارها وعلاقتها بالمتلقي وتأثيرها الإيجابي والسلبي على القارئ. فبسم الله

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

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

التباين:

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

هنا نلاحظ وضوح النص وعدم تعارضه مع الخلفية البيضاء.

http://www.nawal-saad.com/labs/ex1.jpg

وهنا أيضا لون النص يختلف تماما عن لون الخلفية الداكن، مما يضمن لنا وضوح القراءة:

http://www.nawal-saad.com/labs/ex6.jpg

http://www.nawal-saad.com/labs/ex2.jpg

ستلاحظ عدم ارتياح عينك للأمثلة القادمة بسبب قرب التباين بين لون النص والخلفية:

http://www.nawal-saad.com/labs/ex3.jpg

http://www.nawal-saad.com/labs/ex4.jpg

http://www.nawal-saad.com/labs/ex5.jpg

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

طبعا حين تقوم بعمل موقع حدد درجة التباين، فالأبيض على خلفية سوداء أو العكس هو 100% تباين وذلك بسبب التناقض الواضح بين اللونين. مع الأخذ بعين الاعتبار أن الخلفية السوداء قد لا تكون الأسهل في القراءة للأغلب، فالخلفية ذات لون خفيف ونص غامق تفي بالغرض وبامتياز.

السطوع:

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

عمى الألوان:

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

ألوان الويب الآمنة:

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

http://www.nawal-saad.com/labs/safecolor.jpg

أعتقد الآن مع تطور الشاشات، لن تصبح هذه النقطة مشكلة بعد الآن. لكن الحذر والاحترافية واجبة 🙂

ألوان الروابط:

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

الدلالة للأهمية:

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

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

موقع سيساعدك في اختيار الألوان والتوفيق بين الدرجات:

http://www.colourlovers.com

التدوينة في مدونتي

  • مقالة رائعة ويحتاجها مصمموا الويب أكثر من غيرهم ,,
    شكرًا نوال 🙂

  • اضافة جميلة وانا اعتمد علي الالوان بشكل كلي

    وانا اقوم بتنسيق الالوان ودمجها مع بعض بمساعدة موقع ادوب

    http://kuler.adobe.com/

    ومعروف ان للالوان تاثير نفسي علي المشاهد ..

    ساشارككم بمعلوماتي عنها اذكر علي سبيل المثال ان
    الالوان تمثل الاشخاص او الاشياء و تصفهم لذلك تعطي معاني :

    اللون الاخضر :
    لون عاطفي هادئ متفائل جدا نشيط متفاعل

    اللون الاصفر :
    ذكي مرح نشيط جدا متعطش للتجديد

    اللون الابيض :
    نقي نظيف امن قوي الملاحظة

    اللون النيلي:
    عظيم فخم قوي صعب الفهم دايما مختلف عن الاخرين

    اللون البرتقالي :
    ودود مسالم كريم ولكن اللون الباهت منه يدل علي الحزن والخوف والضعف

    اللون الازرق :
    حساس صادق صريح فلسفي بارد الاعصاب لون معظم القادة

    اللون الاحمر :
    حازم حيوي شجاع جرئ طائش حماس زائد(العرب يصفون المراة الجميلة حمراء اللون)

    وهكذا عن اختيارك للون ما فانت قمت بوصف عملك او شخصية تصميمك
    حتي لو اختلف المضمون عن ذلك فاللون هو الاساس ..

    دمتم بود ، اجمل تحية 🙂

  • أختي نوال أشكرك على المقال اللي فادني بصراحه

    وأحب أشاركم بهالمقال عن الألوان .. حصلته بأحد المنتديات المتخصصه بالتصميم
    http://www.swalf-d.com/fm/showthread.php?t=173

  • شكرا لكم على المشاركة 🙂
    وجزاكم الله خير

  • خالد

    أصفر و أحمر أستخدام خاطيء !!!!!!
    نوال هل انتي ضد الشيوعية مقالتك تقول ان العلم الصيني و الاتحاد السوفيتي السابق خاطيء .

    • اعذرني علي المداخلة ولكنها لم تقصد ذلك ،،

      القصد ان استخدامهم مع بعض خاطئ ،،

      يعني اذا استخدمتهم مع غيرهم يكون ذلك صحيح
      (كل لون يتناسق مع مجموعته . تتناسق الألوان الدافئة مع الألوان الدافئة الاخرى ، وتتناسق الألوان الباردة مع الألوان الباردة الاخرى . كما يمكنك وبكل بساطة ، اختيار اي لون من عجلة الألوان ، ثم استعمل اللون الموجود بجانبه ، سوف تلاحظ أنهم متناسقين . فالازرق يتناسق تناسق جميل مع الاخضر )

      للمزيد قم بزيارة الرابط اللي وضعه عبد العزيز الجفن جزاه الله خيرا

      • خالد

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

      • ولكن اعتقد ان اخر صورة في الامثلة هي باللون البرتقالي والاصفر
        وليس احمر واصفر ؟؟؟

    • اهلا خالد. شكرا على المادخلة وانا مالي علاقة بالشيوعية :p
      بس ممكن تقرا العنوان ع الأقل ؟ انا قلت استخدام الألوان في تصميم المواقع والأشياء اللي يقرأها اليوزر
      ما قلت استخدام الألوان في أعلام الدولة.
      فيه فرق ترا إنك تقرا نص كامل بلونين ساطعين او لونين مافي بينهم تباين كبير وفرق إنك تشوف علم دولة : )

  • السلام عليكم

    أفهم من كلامك ان لون شعار نادي النصر غير متباين وهو خاطئ من الاسأس. عجبي فاحساسي يقول دائما ان هناك امر خاطئ في نادي النصر فالازرق والاصفر لايجتمعان.

    بعيدا عن التعصب 🙂 موضوع جميل جدا واشكرك جدا على هذا التنويه .. فالبعض لديه غربلة في الاولوان فاي لون تقع عينه عليه سيقوم بمزجه بغض النظر عن امكانية تجانسة ام لا.

    شكرا لكِ على هذا الدرس المفيد

    يزيد

    • وعليكم السلام.
      اشكر لك رأيك كثير . بس ممكن أفهم انا وين تكلمت عن الألوان برا تصميم المواقع :”(؟
      شكيت بنفسي والله! انا تكلمت عن استخدامها في المواقع واللي فيها نصوص يحتاج القارء انه يقرأها
      ويركز عليها. وللأسفر والأزرق درجات طبعا! اسطعهم ما يتناسبون مع بعض والعين تتعب وتحهد ! وأخفهم مع أسطعهم راح يكونون توافق جيد

      شكرا مره ثانية على ردك .

    • خالد

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

      • ههههههههههههههههههههههههههههه يعني ننقل من بيتنا والا وش نسوي مثلا !
        خالد الله يعافيك ممكن تفهم كلامي شوي ؟ انا مابي اضيع وقتي و وقتك بالأخذ و الرد والموضوع الأساسي أصلا مب نفس اللي تتكلم عنه.

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

  • عوفيتِ على ما كتبتهِ 🙂

    فعلاً ما ذكرتهِ من أمر تنفير الزائر لبعض المدونات القيّمة بسبب الألوان

  • ما شاء الله تبارك الله مقالة اكثر من رائعة واعجبتني كثيراً 🙂

    بارك الله فيك أختي نوال ونفع بك الإسلام والمسلمين

  • مقال مميز يا نوال ^_^
    شمل النقاط المهمة كلها

    نقطة واحدة فقط أحب أن اذكرها في مسألة دلالة الألوان..
    من ثقافة إلى أخرى رمزية/دلالة اللون قد تختلف, يفضل مراعاة هذا الامر في التصميم
    مثلا اللون الأبيض دلالة على النقاء, ولون للفرح في ثقافتنا
    في الثقافة الصينية هو لون للحزن
    😀 يعني لو بتصمم موقع صيني تجنب الأبيض

  • معلومات رائعه ومهمة ومفيده

    شكرا لكـ

  • مقال مفيد استاذة يا ريت تزودني بروابط لمثل هذه النوعية من المقالات حول usability وجزاكم الله كل خير

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

  • شكرا على هذه التدوينة
    نحن فعلا بحاجة لتعلم تنسيق للألوان اكثر
    تحياتى

  • شكراً لك اخت نوال على هذه التدوينة. لدي بعض الملاحظات حول بعض النقاط:

    – عمى الالوان هو اقرب لقابلية الوصول (accessibility) من لقابلية الاستخدام (usability).

    – الوان الويب الآمنه فكرة قديمه يمكن للجميع تجاهلها دون خوف.

    – الدلالة للأهمية: لا يوجد هناك قواعد ثابته معيّنة تطبق على كل المواقع من هذه الناحية، فالدلالة على الأهميّة يمكن ان تتم باستخدام الاحجام المختلفة أو الخطوط المختلفة و ما الى ذلك (مثال: زر الدخول الى خدمة Google Analytics لوّن باللون الازرق، و مع ذلك فهو العنصر الأهم و الابرز http://www.google.com/analytics/).

    تحديد الأهميّة يتم حسب السياق في كل موقع.

  • سماسم

    تدوينة ممتعة ومفيدة بالفعل كلامك صح 99%مع1%
    ههههههه
    الف شكر لك اخت نوال

  • مقال رائع … شكرا على المعلومات القيمة وارجو تقييم موقعي واختيار الالوان http://www.moatazworld.com/
    كما أرجو تقييم اخر اعمالي http://www.moatazworld.com/projects/pos_new/

تعليقات عبر الفيسبوك