قبل از اینکه وارد موضوع روانشناسی رنگها در طراحی سایت شوم، اجازه دهید به آزمایشی که در سایت hubspot منتشر شده است اشاره کوتاهی کنم. آنها دو رنگ سبز و قرمز را برای دکمه “عضویت در سایت” در نظر گرفتند و همه چیز این دو صفحه مشابه هم بود. در نهایت، نتیجه تست این شد که 21% افراد بیشتر روی دکمه قرمز کلیک کرده‌اند.
اصلا بیایید به رفتار خودمان نگاه کنیم؛ چرا فضای بعضی از سایت‌ها، به‌نظرمان خسته کننده و برخی دیگر جذاب و دلنشین است؛ بطوری که دلمان می‌خواهد، همینطور در سایت چرخ بزنیم؟! خب، می‌خواهیم ببینیم دلیل این اختلاف چه بوده و چطور باید با کمک این ریزه کاری‌ها، نرخ تبدیل و مخاطب بیشتری برای سایت‌مان بگیریم. موضوع این مطلب از وبلاگ، روانشناسی رنگها در طراحی سایت است. موضوعی که با رعایت درست و به‌جای آن، بر زیبایی و تجربه کاربری (UI) سایت‌تان افزوده شده و بالطبع فروش‌تان را هم بالا می‌برد.
منظور از روانشناسی رنگ ها چیست؟
رنگ ها روی احساسات ما انسانها تأثیر مستقیم دارند. چشم ما بعد از مشاهده رنگ ها، با ناحیه‌ای در مغز به نام “هیپوتالاموس” ارتباط برقرار می‌کند. این بخش از مغز سیگنال‌هایی را به غده‌های “هیپوفیز” و بعد از آن “تیروئید” ارسال می‌کنند. در نهایت ارسال این سیگنال‌ها، باعث ترشح هورمون‌هایی می‌شود، که روی احساسات ما تأثیر می‌گذارند. بنابراین، هر رنگ می‌تواند یک حس خاص را در ما ایجاد کند.
روانشناسی رنگ ها علمی است که چگونگی تأثیر رنگ ها روی رفتار انسان را بررسی می‌کند. روانشناسی رنگها در کسب و کارهای مختلفی از جمله آشپزی، معماری، باغبانی و مخصوصا در صنعت بسته بندی استفاده می‌شود. در این مقاله می‌خواهیم نقش روانشناسی رنگها در طراحی سایت را بررسی کنیم.
در مقالۀ دیگری با عنوان «با روانشناسی مشتری به قلب و ذهن او نفود کنید» دربارۀ تاثیر روانشناسی مشتری در افزایش فروش صحبت کرده‌ایم که آن هم مقالۀ جذاب و مفیدی برای شماست.
منظور از روانشناسی رنگ در طراحی سایت، استفاده از رنگ‌های مناسب در قسمت‌های مختلف، ترکیب رنگ صحیح، انتخاب درست غلظت رنگ و… در سایت؛ بطوری که بتوان علاوه بر افزایش حس رضایت در مخاطب، کلیک، فروش و نرخ تبدیل را هم بالا برد.
روانشناسی رنگها در طراحی سایت چه اهمیتی دارد؟
به تازگی یک تحقیق در سایت‌های خارجی برای بررسی ارزش رنگ ها انجام شده، طبق این تحقیق؛ فقط تغییر و تصحیح استفاده از رنگ ها در یک سایت توانست تا 24 درصد نرخ تبدیل را افزایش دهد. به قول جرمی اسمیت (مشاور نرخ تبدیل): «از رنگ های مناسب استفاده کنید تا برنده شوید!»
شاید برای شما هم جالب باشد که فروشگاه‌های اینترنتی بزرگی مثل آمازون و دیجی کالا، دائما در حال بهینه سازی نحوه استفاده از رنگ ها در سایت، برای تأثیرگذاری بیشتر بر ذهن مشتری هستند.
مثلا شاید خودتان هم با مراجعه به این سایت‌ها متوجه شده باشید، که دکمه “افزودن به سبد خرید” با رنگ غلیظ‌تری نسبت به دفعه قبل نمایش داده می‌شود یا آیکون “تماس با ما” تغییر رنگ داده شده است. حتی ممکن است ببینید رنگ تمامی بخش‌های یک صفحه محصول نسبت به بازدید دفعه قبل‌‌تان تغییر کرده است. تمامی این تغییرات برای ایجاد هماهنگی بیشتر با روانشناسی رنگها و جهت رسیدن به UI (تجربه کاربری) و نرخ تبدیل بیشتر در سایت است.
نکات روانشناسی رنگ ها در طراحی سایت
به‌طور کلی برای بهره بردن از تأثیر مثبت روانشناسی رنگها، باید آنها را در:
- در جای درست
- در زمان درست
- برای مخاطبان درست
- و با هدفی درست
استفاده کنید.
قبل از استفاده از هر رنگ در طراحی سایت‌تان، مخصوصا سایت فروشگاهی باید 2 نکته زیر را بدانید و طبق آن تصمیم گیری کنید.
1. استفاده از رنگها بر اساس مخاطب هدفتان
اولین نکته‌ای که قبل از شروع طراحی سایت و انتخاب رنگ باید به آن توجه کنید، مخاطب عمده سایت است! اینکه از چه رنگ هایی در سایت استفاده کنید، بر اساس مخاطبان و ویژگی‌های آنها انتخاب می‌شود. مثلا اگر قصد راه‌اندازی یک فروشگاه اینترنتی برای کودکان را دارید، انتخاب رنگ های تیره و غمگین، حتی در بهترین حالت و ترکیب هم کار اشتباهی است. در واقع برای انتخاب رنگ؛ به سن، رفتار، شخصیت، علایق و مخصوصا جنسیت مخاطبان توجه کنید.
جالب اینجاست که انتخاب رنگ بر اساس جنسیت مخاطب هدفتان متفاوت است. در ادامه قصد داریم بیشتر دربارۀ آن صحبت کنیم. البته قبل از آن، بد نیست نگاهی به اینفوگرافی زیر (در سایت convert) بیندازید:
روانشناسی رنگ ها در طراحی سایت برای خانم‌ها
اگر مخاطب محصولات، خدمات و حتی مقالات سایت شما، خانم‌ها هستند، باید روانشناسی رنگ ها را با دقت زیادی به کار ببرید و مطمئن شوید که رنگ های انتخابی، همان‌هایی هستند که آنها را به اهداف شما نزدیک می‌کنند.
در یکی از نظرسنجی‌های اخیر (با توجه به مقاله نیل پتل)، از خانم‌ها در مورد علاقه‌شان به رنگ های مختلف، معلوم شد که:
- 34 درصد از خانم‌ها به رنگ آبی
- 23 درصد آنها بنفش
- و 14 درصد به رنگ سبز راعلاقه داشتند!
در ادامه این نظرسنجی مشخص شد که:
- رنگ نارنجی با 33 درصد
- رنگ قهوه‌ای با 33 درصد
- و رنگ خاکستری با 17 درصد
غیر جذاب ترین رنگ ها برای خانم‌ها هستند. در نهایت، طبق نتایج این تحقیق معروف و همینطور تجربه‌های دیگر، پیشنهاد می‌کنیم برای طراحی سایت‌هایی با مخاطبانِ هدف خانم، تا جایی که امکان دارد از رنگ های نارنجی، قهوه‌ای و خاکستری استفاده نکنید. جالب این است که بر خلاف تصور، رنگ صورتی در لیست رنگ‌های مورد علاقه اکثریت خانم‌ها دیده نمی‌شود؛ در حالیکه بعضی از سایت‌های داخلی در زمینه آرایشی بهداشتی عمدتا به رنگ صورتی هستند.
روانشناسی رنگ ها در طراحی سایت برای آقایان
اگر قصد دارید سایتی طراحی کنید که مشتریان آن را بیشتر آقایان تشکیل می‌دهند، مثل سایت‌های ابزارآلات و صنعتی بهتر است از رنگ های مورد علاقه آنها استفاده کنید. طبق همان نظرسنجی که در بالا به نتایج‌اش برای خانم‌ها اشاره کردیم:
آقایان به رنگ های:
- آبی
- سبز
- و سیاه
علاقه مندند. همینطور آنها علاقه کمی به رنگ های:
- بنفش
- نارنجی
- و حتی قهوه ای
دارند. در نهایت برای اینکه یک بار دیگر رنگ های مورد علاقه آقایان و خانم‌ها و همینطور رنگ های غیر جذاب برای آنها را مرور کنیم، بهتر است نگاهی به این تصویر بیندازید:
2. انتخاب رنگ با توجه به محصول یا خدمت‌تان
حتی اگر مخاطب هدفمان هم کاملا مشخص باشد، باز نمی‌توانیم بگوییم، استفاده از چه رنگی بهتر است. چون به همان اندازه، نوع محصولتان هم، تعیین کننده رنگ سایت‌تان است. مثلا اینکه خیلی فرق می‌کند، سایت فروش محصولات آرایشی/بهداشتی داشته باشید، قطعات صنعتی ارائه دهید یا اینکه محصولات غذایی بفروشید.
شاید برای قطعات صنعتی رنگ آبی گزینه مناسبی باشد و برای محصولات غذایی، رنگ سبز تاثیر بهتری داشته باشد. یا اینکه اگر محصولی لاکچری دارید، رنگ مشکی و طلایی، ماهیت محصول شما را به‌خوبی انتقال می‌دهد.
هارمونی رنگ ها در طراحی سایت
تا اینجا، دید خوبی نسبت به روانشناسی رنگ ها در طراحی سایت، به‌دست آورده‌اید. در ادامه قصد داریم به صورت تخصصی به بررسی بعضی از رنگها در طراحی سایت بپردازم:
روانشناسی رنگ سفید!
در بیشتر مقالاتی که در مورد روانشناسی رنگ در طراحی سایت نوشته شده، خبری از اشاره به رنگ سفید نیست. اما سفید رنگی است که به هیچ عنوان نمی‌شود از اهمیت بالای آن در افزایش زیبایی، آنهم در فضای وب غافل شد. باید بدانید که استفاده گسترده از رنگ سفید، یکی از ویژگی‌های طراحی قدرتمند است.
به عنوان نمونه استفاده از این رنگ، بهتر است نگاهی به بزرگترین و مهم‌ترین سایت جهان، گوگل داشته باشیم. از صفحه جستجو تا تمامی صفحات ابزارهای گوگل، از رنگ سفید به خوبی استفاده شده. طراحان سایت پرتال هم سعی کرده‌اند با به وجود آوردن فضای سفید کافی، زیبایی سایت را در کنار رنگ های شاد دیگر حفظ کنند.
روانشناسی رنگ آبی
در بخش بالا دیدید که رنگ آبی، هم از رنگ های مورد علاقه خانم‌ها بود و هم آقایان. این محبوبیت، دست ما را برای استفاده از آن در طراحی سایت‌های مختلف باز می‌گذارد. آبی، رنگ اعتماد، نظم، آرامش و وفاداری است.
یک نمونۀ معروف آن شبکه اجتماعی فیسبوک است؛ که به عنوان ارزش‌های اصلی خود، به اعتماد و شفافیت اشاره می‌کند. به نظر شما انتخاب این رنگ و این ارزش‌ها در کنار یکدیگر، اتفاقی است؟
یک نکته: به دلیل اینکه رنگ آبی در ذهن بسیاری از انسانها مرتبط به “مواد سمی” ثبت شده، برخی از منابع معروف توصیه می‌کنند، که برای فروش مواد غذایی و خوراکی از این رنگ استفاده نکنید. حتی بعضی از رژیم‌های غذایی برای ایجاد حس بی میلی به خوراکی‌ها، از رنگ آبی استفاده می‌کنند!
روانشناسی رنگ زرد
چراغ سر چهار راه، تابلوهای راهنمایی و رانندگی، نوارهای پلاستیکی هشدار دهنده و… تمامی چیزهایی هستند که ما را یاد اخطار و هشدار می‌اندازند. اما جالب است که، استفاده به‌جا از رنگ زرد در صفحات سایت، چنین حسی را به مخاطب القا نمی‌کند.
اتفاقا برعکس معناهایی که در ذهن ما برای این رنگ ثبت شده، استفاده از آن در طراحی سایت جلوۀ زیبایی به سایت می‌دهد. پیامی که این رنگ می‌دهد معمولا صمیمت و جذابیت است. به‌علاوه اینکه معمولا تجربه‌هایی که با این رنگ داشته‌ایم در خاطرمان می‌ماند. به عنوان یک نمونه، می‌توانید سایت ایرانی “ایرانسل” و سایت معروف “مک دونالد” را مشاهده کنید.
یک نکته: جرمی اسمیت، در قسمتی از مقاله خود در مورد روانشناسی رنگ ها در طراحی سایت می‌گوید: «رنگ زرد می‌تواند باعث فعال شدن اضطراب در ذهن شود.» در نهایت هم پیشنهاد می‌کند که به جای استفاده از آن به عنوان یک رنگ سازمانی، قسمت‌هایی از سایت خود مثل دکمه تماس با ما (برای ایجاد حالت اضطراب و برقراری تماس) را با رنگ زرد نشان دهید.
رنگ سبز در طراحی سایت
رنگ سبز نماد طبیعت است. نتایج بعضی از تحقیقات در مورد رنگ ها نشان می‌دهد که رنگ سبز حتی می‌تواند باعث افزایش خلاقیت شود.
انتخاب رنگ سبز، برای سایت‌هایی پیشنهاد می‌شود که خدمات و محصولات آنها با محیط زیست و دیگر موارد مرتبط، رابطه داشته باشد: مثلا سایت فروش محصولات گیاهی اورگانیک.
یک نکته: به پیشنهاد طراحان سایت، رنگ سبز یک گزینه مناسب برای دکمه‌های اقدام به عمل (call to action) است. همین موضوع باعث شده که بیشتر دکمه‌های “افزودن به سبد خرید” را با رنگ سبز در فروشگاه‌های بزرگ ببینیم.
روانشناسی رنگ نارنجی
رنگ نارنجی، احساس عجله و اضطراب را به مخاطب القاء کند. به‌همین دلیل استفاده از رنگ نارنجی برای دکمه “پیشنهاد ویژه” یا مثلا آخرین مهلت خرید، پیشنهاد خوبی است.
بعضی از روانشناسان می‌گویند، که این رنگِ پرتقالی می‌تواند به افزایش تحرک بدنی، اعتماد به نفس و رقابت کمک کند. به همین دلیل، بیشتر سایت‌های بزرگ ورزشیِ خارجی در سایت‌شان از رنگ نارنجی استفاده می‌کنند.
روانشناسی رنگ قرمز
رنگ قرمز معمولا پیام اهمیت و هشدار برای خطر را انتقال می‌دهد. از این رنگ در بخش‌هایی از سایت استفاده کنید که می‌خواهید کاربر توجه خاصی به آن داشته باشد. اگر سایت محصولات غذایی یا رستوران دارید، استفاده از رنگ قرمز در طراحی سایت، گزینۀ خوبی است؛ چون رنگ قرمز باعث سرعت در غذا خوردن می‌شود.
روانشناسی رنگ مشکی در طراحی سایت
بر خلاف اینکه بیشتر افراد تصور می‌کنند رنگ سیاه باعث افسردگی و نگرانی می‌شود، این رنگ می‌تواند در طراحی سایت باعث به وجود آوردن حس تفاوت و خاص بودن، تجملات و زرق و برق شود. استفاده از رنگ مشکی بیشتر برای سایت‌هایی توصیه می‌شود که بخواهند محصولات لاکچری و گران‌قیمتی را بفروشند.
دو نمونه از معروف‌ترین برندهای محبوبی که محصولات گران‌قیمتی دارند از رنگ مشکی در سایت‌شان استفاده کرده‌اند، کمپانی”لامبورگینی” و “لوئیز ویتون” است.
خب حالا می‌دانید، هر رنگ چه پیامی را منتقل می‌کند. اما این را یادتان باشد که قرار نیست در طراحی سایت‌تان تنها از یک رنگ استفاده کنید؛ بلکه باید بتوانید:
- ترکیب مناسبی از رنگها ایجاد کنید
- و از رنگ در جای مناسبی از سایت استفاده کنید.
ابزارهای ترکیب رنگ در طراحی سایت
خوشبختانه، در کنار اطلاعاتی که خودتان دربارۀ استفاده از رنگها دارید، ابزارهایی مخصوص این کار هم وجود دارد. ازجمله سایت Materialpallete است که با انتخاب دو رنگی که مدنظرتان است، بقیه رنگ‌های مکمل و مناسب آن را در اختیارتان قرار می‌دهد.
همچنین سایت sessions.edu ابزاری است که در حرفه‌ای‌ترین شکل ممکن، به شما می‌گوید که کدام رنگ را با کدام رنگ ها ترکیب کنید، تا چرخه رنگی را بهم نزنید و زیبایی سایت را از بین نبرید.
کلام آخر
با همۀ اطلاعاتی که الان دربارۀ رنگها و تاثیرات آن روی مخاطب می‌دانید، قبل از تصمیم‌گیری، به این 3 مورد توجه کنید:
- رنگی که انتخاب می‌کنید، با برند و هویت آن هماهنگ باشد.
- رنگی که انتخاب می‌کنید، می‌خواهید چه چیزی را انعکاس دهد؟
- نتیجه رنگ‌هایی که انتخاب کرده‌اید را روی سایت تست کنید.