چطور از قرمز بهعنوان رنگ برند استفاده کنیم، بدون اینکه کاربر اذیت بشه؟
قرمز یکی از قویترین و تأثیرگذارترین رنگها در طراحی رابط کاربری است. رنگی جسور، احساسی و پرانرژی که خیلی از برندها از آن برای نشان دادن فوریت، هیجان یا قدرت استفاده میکنند.اما واقعیت این است که اگر قرمز بدون فکر و دقت بهعنوان رنگ اصلی رابط کاربری استفاده شود، خیلی راحت میتواند چالشهای جدی در UI و UX ایجاد کند.
در این مقاله میخواهم بر اساس تحقیقات، تئوری رنگ و نمونههای واقعی، مهمترین نکات، محدودیتها و بهترین روشها برای استفاده از قرمز در UI رو با هم مرور کنیم.
قرمز ذاتاً حس فوریت ایجاد میکند؛ انگار کاربر همیشه عجله دارد یا زمانش رو به اتمام است و یا چیزی فوری در حال اتفاق افتادن است. این ویژگی برای هشدارها، خطاها یا اکشنهای حساس عالی است، اما وقتی کل صفحه قرمز باشد:
سطح استرس کاربر بالا میرود
تمرکز کم میشود و حس راحتی را کاهش میدهد
کاربر عجولانه تصمیم میگیرد
بعد از مدتی چشم خسته میشود
همهی اینها در بلندمدت باعث میشود کاربر از کار با محصول لذت نبرد و حتی زودتر از آن خارج شود.
وقتی همه عناصر قرمز هستند، دکمهها با متن رقابت میکنند، لینکها با هشدارها قاطی میشوند و آیکنها بیش از حد به چشم میآیند. این موضوع بار شناختی (Cognitive Load) را بالا میبرد، چون کاربر باید بیشتر فکر کند تا بفهمد کجا را نگاه کند و قدم بعدی چیست.
طراحی خوب باید تصمیمگیری را ساده کند، نه سختتر. استفاده بیشازحد از قرمز دقیقاً برعکس عمل میکند.
در رابطهایی که قرمز رنگ غالب برند است، UX Writing و متنها نقش خیلی مهمی پیدا میکنند. قرمز بهاندازه کافی جلب توجه میکند، پس متن نباید با آن رقابت کند؛ بلکه باید کاربر را آرام کند و مسیر را نشانش دهد.متن خوب باید:
واضح باشد
راهنمایی کند
فشار و استرس رنگ قرمز را کمتر کند
مثلاً:
یک دکمه قرمز با متن «ارسال» (Submit) میتواند ناگهانی و استرسزا باشد، اما «ذخیره و ادامه» دقیقاً توضیح میدهد چه اتفاقی میافتد.
پیام خطای قرمز «ورودی نامعتبر» حس بدی میدهد، ولی «ایمیل وارد نشده؛ لطفاً برای ادامه آن را اضافه کنید» فوریت را به درک تبدیل میکند.
دکمه قرمز با متن «حذف» ترسناک است، اما «حذف دائمی حساب کاربری» ابهام را از بین میبرد و به کاربر کمک میکند با اطمینان تصمیم بگیرد.
در رابطهای قرمزمحور، متن جای رنگ را در ایجاد اعتماد و سلسلهمراتب میگیرد؛ نیت را توضیح میدهد، فشار را کم میکند و باعث میشود توجه کاربر به تصمیم درست هدایت شود، نه صرفاً تصمیم سریع.
اگر همه عناصر رابط کاربری قرمز باشند، عملاً همه در یک سطح از اهمیت قرار میگیرند. این باعث میشود کاربر نتواند سریع صفحه را اسکن کند.
کاربر دیگر نمیداند:
اقدام اصلی کدام است؟
کدام اقدام فرعی است؟
کدام بخش فقط برای اطلاعرسانی است؟
دلیل اصلی این اتفاق، نبود رنگ تأکیدی (Accent Color) است.
وقتی همهچیز قرمز است، در واقع هیچچیز برجسته نیست. ایده رنگ تأکیدی از معماری و طراحی داخلی آمده و بعد وارد دنیای UI شده است. رنگهای تأکیدی کمک میکنند چشم کاربر هدایت شود و رابط کاربری شفافتر شود. راهنمای رنگ متریال گوگل (Material Design) هم بهوضوح میگوید:
انتخاب رنگها را محدود کنید: سه رنگ از پالت اصلی و یک رنگ تأکیدی از پالت ثانویه.
مثلاً اگر همه دکمهها یک استایل دارند و همگی قرمز هستند، خیلی زود مشکلساز میشود. وقتی اپی همهچیز را قرمز میکند و از رنگ تأکیدی استفاده نمیکند، همه عناصر در یک سطح دیده میشوند.
انتخاب رنگ مکمل قرمز (رنگی که دقیقاً روبهروی آن در چرخه رنگ قرار دارد) به عنوان رنگ تاکیدی، ممکن است در نگاه اول جذاب باشد، اما معمولاً باعث تنش بصری میشود چون رنگهای مکمل شدیداً برای جلب توجه با هم رقابت میکنند.
انتخاب بهتر، رنگهای مشابه (Analogous) هستند؛ رنگهایی که کنار قرمز در چرخه رنگ قرار دارند. این ترکیبها:
طبیعیتر به نظر میرسند
رقابت کمتری ایجاد میکنند
حس آرامش و راحتی بیشتری میدهند
تئوری رنگ به ما یادآوری میکند که سفید و مشکی، چون خنثی هستند، ابزارهای فوقالعادهای برای ایجاد تعادلاند.
استفاده از فضای خالی، متن مشکی و پسزمینههای خنثی باعث میشود قرمز بهتر دیده شود، بدون اینکه چشم را خسته کند یا فضا را شلوغ کند. در این حالت قرمز خاص و معنادار باقی میماند، نه خستهکننده.
حتی اگر رنگ برند شما قرمز است، قرار نیست همهجای صفحه قرمز باشد.برای هر صفحه از خودتان بپرسید:
مهمترین کاری که میخواهم کاربر انجام دهد چیست؟
مثلا اگر قرار است دکمه CTA قرمز باشد، فقط یکی از آنها باید قرمز باشد؛ مهمترینش.
معمولاً برای نمایش لینکها از رنگ اصلی برند استفاده میکنند. اما وقتی رنگ اصلی قرمز است، این قانون نیاز به بازنگری دارد.
راهحلهای بهتر:
استفاده از رنگ ثانویه یا رنگ تأکیدی برای لینکها
استفاده از رنگ مشکی به همراه الگوی آشنا: زیرخط (Underline)
میتوانید از قرمز برای حالت Hover لینکها استفاده کنید، به شرطی که بدون شلوغی، وضوح ایجاد کند.
طراحی پیام خطا در رابطهایی که قرمز رنگ غالب است، حساستر از همیشه است. در یک رابط خنثی، قرمز سریعاً مشکل را نشان میدهد؛ اما در یک رابط قرمز، این سیگنال ضعیف یا حتی گیجکننده میشود. چون قرمز از قبل بخش زیادی از «بودجه توجه» کاربر را مصرف کرده و قرمز بودن پیام خطا دیگر هشدار محسوب نمیشود. کاربر ممکن است متوجه نشود:
مشکل چیست
مشکل کجاست
چطور باید آن را حل کند
به همین دلیل پیام خطا باید بیشتر به وضوح تکیه کند تا رنگ. از قانون مجاورت استفاده کنید: پیام خطا را نزدیک فیلد یا عملی که باعث خطا شده قرار دهید، از زبان ساده و انسانی استفاده کنید و راهحل را واضح بگویید.
مثلاً بهجای «خطایی رخ داد»، بنویسید:«رمز عبور باید حداقل ۸ کاراکتر باشد». همچنین آیکنها، فاصلهگذاری یا خطوط ظریف میتوانند پیام را تقویت کنند، بدون اینکه قرمز بیشتری اضافه شود.
طراحی با رنگ قرمز به معنی حذف آن نیست؛ بلکه به معنی استفاده درست از قدرت آن است.قرمز اگر به درستی استفاده شود، میتواند هویت برند را تقویت کند، اقدامات مهم را برجسته کند و تمرکز کاربر را هدایت کند. اما اگر در استفاده از آن زیادهروی شود، نتیجهاش استرس، سردرگمی و فشار ذهنی کاربر است.
کلید اصلی، تعادل است:
استفاده هوشمندانه از رنگ تأکیدی (Accent Color)
استفاده قرمز تنها برای اقدامات اولویتدار
همراه کردن رنگ قرمز با متن مناسب، سلسلهمراتب درست و فاصلهگذاری مناسب
به این شکل، قرمز به یک مزیت UX تبدیل میشود، نه یک محدودیت.
منابع:
https://ux.stackexchange.com/questions/85214/branding-and-red-color
https://uxdesign.cc/branding-your-app-with-red-a7df0b6b0e54?gi=38667b3cd9f8
https://medium.com/@lodestar-design/design-study-using-a-red-theme-color-in-applications-47c167d7a85
