اختيار الألوان المناسبة لواجهة المستخدم

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

غالبًا ما يكون المخطط اللوني لموقع الويب مشتقًا من العلامة التجارية للشركة والقيم التي تجسدها.

الألوان والعلامة التجارية

يساعد المخطط اللوني لموقع الويب على أخذ فكرة عامة عن المنتجات أو الخدمات التي يقدمها. ووفقًا لدراسة أجراها معهد الأبحاث اللونية CCICOLOR، فإن الناس يحكمون على المنتجات على الإنترنت خلال أول 90 ثانية من رؤيتهم لها، ويعتمد حكمهم عليها بنسبة 62% إلى 90% على المخطط اللوني، وقد توصلت الدراسة إلى أن اللون يمكن أن يعكس شخصية العلامة التجارية:

يعكس اللون الأحمر القوة والعاطفة والطاقة، ويمكن استخدامه ضمن التصميم أو العلامة التجارية لتنبيه المستخدم أو جذب انتباهه، وهو مستخدَم في مواقع مثل CNN وماكدونالدز وKFC ويوتيوب وأدوبي.
يشير اللون البرتقالي إلى معانٍ مثل الصداقة والاتحاد والشباب، وهو مستخدَم في علامات تجارية مثل فانتا Fanta، إذ أن اللون البرتقالي منسجم تمامًا مع صميم هذه العلامة التجارية للمشروبات الغازية (فقد كانت فانتا تنتج حصرًا مشروبات بطعم البرتقال في بداياتها، لكنها توسعت في السنوات الأخيرة وأصبحت تقدم أنواعًا كثيرة مختلفة).
اللون الأصفر يعكس السعادة والحماس، ولا عجب في ذلك، فهو مرتبط في أذهاننا مباشرةً بلون الشمس ولون إنارة المصابيح، ومن الأمثلة على استخدامه شركة الشحن الدولية DHL.
يعكس اللون الأخضر النمو والجوانب البيئية، وهو مستخدَم في موقع إنهابيتيت Inhabitate للتنمية المستدامة، بما ينسجم مع الدلالات البيئية للون.
اللون الأزرق يعكس الهدوء والأمان والموثوقية، وهو خيار صائب في كثير من الأحيان، إذ يُشعِر المستخدمين بالاطمئنان والراحة. يستخدَم اللون الأزرق في قطاعات واسعة، ومن الأمثلة على المواقع والعلامات التجارية التي تستخدمه: AOL وفيسبوك و HP وباي بال وألعاب إلكترونيك آرتس EA Games وديل DELL، وغيرها الكثير.

الألوان وتجربة المستخدم

تؤدي الألوان دورًا مهمًا بلا شك في تحسين تجربة المستخدم في مواقع الويب، إذ أن اختيار اللون المناسب يضمن قابلية الاستخدام، بالإضافة إلى وضوح (قابلية قراءة) المعلومات المعروضة على الشاشة.

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

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

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

كيف تكمل الألوان بعضها البعض

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

الصبغات والظلال والدرجات

يمكنك الحصول على العديد من التدرجات من كل لون على عجلة الألوان، فالصبغات تنتج عن إضافة الأبيض للون، والظلال تنتج عن إضافة الأسود له، والدرجات تنتج عن إضافة الرمادي له.

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

التباين

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

الحيوية

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

الألوان الجمعية والألوان الطرحية

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

CMYK هو نظام لوني طرحي، وبغياب الألوان الأربعة المكونة له، تكون النتيجة لونًا أبيض. تحسَب الألوان في هذا النظام (بما فيها الأسود) كنسبة مئوية من كلٍّ من الألوان الأربعة، ويستخدم هذا النظام اللوني عادةً في الطباعة.

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

من الجدير بالملاحظة أن العين البشرية لا تجد فرقًا كبيرًا بين لوحتي الألوان لهذين النظامين. ربما يمكن لأعيننا تمييز الـ 10 ملايين لونًا التي يقدمها نظام CMYK، لكن الفروقات اللونية في الـ 16 مليون لون لنظام RGB ضئيلة جدًا ومن الصعب أن تميزها العين البشرية. لا يمكن القول بأن إحدى هاتين اللوحتين أفضل من الأخرى من منظور بصري؛ أما من منظور تصميمي؛ فالفرق بين هذين النظامين مهم لأنهما يستخدمان لإنتاج مخرجات مختلفة، الطباعة والشاشة. قد يكون التحويل بين هذين النظامين غير دقيق ويعطي نتائج مختلِفة عند العرض.

تطبيقات المخططات اللونية على الإنترنت

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

Adobe Colors.
Paletton.
Color Hunter.
Check my Color.
Color Sphere (امتداد جوجل كروم).
تطبيق The Color (تطبيق آيباد).

لا تنسَ أن تطلب آراء مستخدميك حول المخططات اللونية قبل المضي قدمًا بها.

الخلاصة

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

يمكن أن يحسّن المصمم تجربة المستخدم من خلال اختيار الألوان المناسبة، وهذا يساعد على ضمان:

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

تتطلب الاستفادة من الألوان أن تعرف مكوناتها، ومن خلال النظر إلى عجلة الألوان (التي يمكن اشتقاق أي لون منها) نلاحظ وجود:

الصبغات: التي تنتج عن إضافة الأبيض إلى الصباغ اللوني.
الظلال: التي تنتج عن إضافة الأسود إلى الصباغ اللوني.
الدرجات: التي تنتج عن إضافة الرمادي إلى الصباغ اللوني.

من أبسط الطرق لتحقيق التوازن في اختيار الصبغات والظلال والدرجات، استخدام المخطط أحادي اللون.

كما تجب مراعاة النقاط التالية عند اختيار مخطط لوني:

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

اختر المخطط اللوني وفقًا لغرض التصميم الذي تعمل عليه، للشاشة أم للطباعة. نظام CMYK (السماوي والأرجواني والأصفر والأسود اللون المفتاحي) هو نظام لوني طرحي يُستخدَم للطباعة، قابل لإعطاء 10 ملايين مزيج لوني؛ أما نظام RGB، فهو نظام لوني جمعي يستخدم للشاشات، ويسمح بأكثر من 16 مليون مزيج لوني.

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

ترجمة -وبتصرّف- للمقال Dressing Up Your UI with Colors That Fit لصاحبه Mads Soegaard.