اگر دکمه خرید را از آبی به قرمز تغییر بدهیم، فروش بیشتر می‌شود؟ از روی رنگ به‌تنهایی نمی‌توان چنین نتیجه‌ای گرفت. همان قرمزی که در یک صفحه توجه را جلب می‌کند، در صفحه‌ای دیگر با پیام خطا اشتباه گرفته می‌شود. برای انتخاب رنگ در طراحی وب، باید هم برداشت مخاطب را بررسی کنیم و هم خوانایی و کارکرد واقعی رابط را.
روان‌شناسی رنگ نقطه شروعی برای پرسیدن سؤال است: این ترکیب در کنار متن، تصویر و هویت برند چه برداشتی ایجاد می‌کند؟ پاسخ را باید در زمینه همان محصول پیدا کرد. رنگ آبی به‌خودی‌خود اعتماد نمی‌سازد و یک دکمه نارنجی هم خرید را تضمین نمی‌کند. قیمت روشن، توضیح درست، مسیر ساده و عملکرد قابل پیش‌بینی صفحه در تصمیم کاربر دخیل‌اند.
معنای رنگ را از زمینه جدا نکنیم
در گفتگوهای طراحی معمولاً آبی را به اعتماد، سبز را به طبیعت و قرمز را به هیجان نسبت می‌دهند. این تداعی‌ها برای شروع بحث مفیدند، اما برای تصمیم نهایی کافی نیستند. قرمز در یک فروشگاه ممکن است رنگ برند باشد و در یک فرم نشانه خطا. سبز هم بسته به متن کنار آن، تأیید پرداخت یا معرفی یک محصول طبیعی را نشان می‌دهد. معنایی که کاربر می‌گیرد، از مجموع نشانه‌ها می‌آید.
قبل از ساخت پالت، چند صفحه واقعی را کنار هم بگذارید: صفحه محصول، ثبت‌نام، پرداخت و پیگیری سفارش. مشخص کنید در هر صفحه کاربر دنبال چه چیزی است و کجا باید توقف کند. اگر برای همه این موقعیت‌ها یک رنگ تأکیدی یکسان انتخاب می‌کنید، از خودتان بپرسید آیا رنگ هنوز نقش مشخصی دارد یا صرفاً ظاهر همه عناصر را شبیه هم کرده است.
مخاطب و زمینه استفاده را هم در بریف بنویسید. یک پنل حسابداری که کاربر ساعت‌ها با آن کار می‌کند، مسئله‌ای متفاوت از صفحه معرفی یک رویداد دارد. در اولی، خواندن جدول و تشخیص وضعیت اهمیت بیشتری دارد؛ در دومی، تصویر و عنوان اصلی فضای بیشتری می‌گیرند. لازم نیست درباره احساس همه مردم حکم بدهیم؛ کافی است نیاز همین صفحه و همین گروه کاربر را دقیق‌تر تعریف کنیم.
پالت را بر اساس نقش‌های رابط بسازیم
به‌جای شروع با فهرستی از رنگ‌های دلخواه، نقش‌ها را بنویسید. زمینه اصلی، سطح کارت، متن اصلی، متن توضیحی، مرز ورودی، اقدام اصلی، لینک و وضعیت‌های موفقیت یا خطا به تصمیم جدا نیاز دارند. یک رنگ ممکن است برای پس‌زمینه خوب باشد و برای متن مناسب نباشد. نام‌گذاری بر اساس نقش، توضیح تصمیم را برای طراح و توسعه‌دهنده ساده‌تر می‌کند.
برای نمونه آموزشی، تصور کنید یک سایت رزرو کلاس داریم. زمینه روشن است، متن با رنگ تیره خوانده می‌شود و یک رنگ تأکیدی برای رزرو در نظر گرفته‌ایم. موفقیت رزرو با پیام مشخص و آیکون تأیید نمایش داده می‌شود. خطا هم متن دارد و فقط با تغییر رنگ کادر اعلام نمی‌شود. این مثال یک نسخه آماده برای همه سایت‌ها نیست؛ نشان می‌دهد هر انتخاب باید به یک وظیفه در رابط وصل باشد.
بهتر است ابتدا همین نقش‌ها را روی یک صفحه واقعی پیاده کنید، نه روی مجموعه‌ای از مربع‌های رنگی. مربع‌ها نشان نمی‌دهند متن ریز چگونه خوانده می‌شود یا دکمه در کنار عکس محصول چه وضعی دارد. پالت را روی محتوا، جدول، فرم و نوار اعلان امتحان کنید. اگر برای هر صفحه مجبور به افزودن رنگ تازه می‌شوید، احتمالاً نقش‌ها هنوز خوب تعریف نشده‌اند.
قاعده ۶۰–۳۰–۱۰ را به‌عنوان پیشنهاد ببینیم
قاعده ۶۰–۳۰–۱۰ پیشنهاد می‌کند یک رنگ یا خانواده رنگ غالب، یک رنگ همراه و مقدار محدودتری رنگ تأکیدی داشته باشید. از این پیشنهاد می‌توان برای کنترل شلوغی کمک گرفت، اما لازم نیست مساحت دقیق هر صفحه را اندازه بگیرید. صفحه‌ای که عکس بزرگی دارد با یک فرم کوتاه یکسان نیست. عکس محصول هم رنگ‌هایی وارد ترکیب می‌کند که در فایل پالت شما تعریف نشده‌اند.
معیار کاربردی‌تر این است که اقدام اصلی در ازدحام رنگ گم نشود. اگر دکمه خرید، برچسب تخفیف، عنوان بخش، آیکون پشتیبانی و همه لینک‌ها یک رنگ پررنگ داشته باشند، رقابت بصری ایجاد می‌شود. یک تصویر سیاه‌وسفید از صفحه بگیرید و ببینید ترتیب توجه هنوز قابل فهم است یا نه. این بررسی جای آزمون کنتراست را نمی‌گیرد، اما برای دیدن شلوغی و وزن عناصر مفید است.
خوانایی را اندازه بگیریم
برای متن معمولی، معیار WCAG 2.2 در سطح AA نسبت کنتراست حداقل ۴٫۵ به ۱ را تعیین می‌کند؛ برای متن بزرگ، حداقل ۳ به ۱ است. تعریف «متن بزرگ» هم به اندازه و ضخامت وابسته است، نه صرفاً اینکه متن عنوان باشد. توضیح رسمی W3C درباره کنتراست متن
رنگ واقعی متن و پس‌زمینه را بررسی کنید. شفافیت، تصویر زیر متن و حالت‌های مختلف دکمه روی نتیجه اثر می‌گذارند. یک جفت رنگ که در نمونه ساده مناسب است، ممکن است روی تصویر یا نوار نیمه‌شفاف خوانایی لازم را نداشته باشد. حالت hover، فوکوس، خطا و انتخاب‌شده را هم در فایل طراحی بیاورید؛ بررسی فقط حالت عادی، بخشی از مسئله را پوشش می‌دهد.
برای اجزای رابط و نشانه‌های گرافیکی ضروری، معیار جداگانه کنتراست غیرمتنی وجود دارد. آن را به همه تزئینات تعمیم ندهید، اما مرز ورودی، نشانه انتخاب و اطلاعات نمودار را هم از قلم نیندازید. هدف این است که کاربر بتواند عنصر و وضعیتش را تشخیص دهد. توضیح رسمی W3C درباره کنتراست غیرمتنی
رنگ تنها حامل پیام نباشد
اگر دو منحنی نمودار فقط با قرمز و سبز از هم جدا شوند، همه کاربران لزوماً تفاوت را تشخیص نمی‌دهند. برچسب مستقیم، شکل متفاوت یا الگوی خط به فهم کمک می‌کند. در فرم هم جمله «ایمیل را کامل وارد کنید» روشن‌تر از کادر قرمز بدون توضیح است. WCAG تأکید می‌کند رنگ تنها وسیله انتقال اطلاعات نباشد. توضیح رسمی W3C درباره استفاده از رنگ
در یک جدول سفارش، وضعیت‌ها را با متن‌هایی مثل «در انتظار پرداخت»، «ارسال‌شده» و «لغوشده» نمایش دهید. رنگ می‌تواند پیدا کردن آن‌ها را سریع‌تر کند، اما حذف رنگ نباید معنی را حذف کند. همین منطق برای موجودی محصول، تقویم رزرو و فیلتر انتخاب‌شده هم کاربرد دارد. برای نمودارهای پیچیده‌تر، مقاله طراحی اینفوگرافیک و داده‌های بصری ادامه مرتبطی است.
آزمون دکمه را درست طراحی کنیم
اگر می‌خواهید تأثیر رنگ دکمه را بررسی کنید، ابتدا مشکل را مشخص کنید. آیا کاربران دکمه را نمی‌بینند، متن آن مبهم است یا بعد از کلیک با خطا روبه‌رو می‌شوند؟ این سه مشکل به راه‌حل‌های متفاوت نیاز دارند. تغییر هم‌زمان رنگ، اندازه، متن و جای دکمه، فهم علت نتیجه را دشوار می‌کند. برای بررسی یک فرض، تا حد امکان تغییرها را محدود و ثبت کنید.
در یک آزمایش فرضی، دو نسخه از همان صفحه محصول داریم که فقط رنگ اقدام اصلی متفاوت است. قبل از شروع، معیار را تعیین می‌کنیم: کلیک، تکمیل خرید یا مرحله دیگری از مسیر. افزایش کلیک به معنی افزایش خرید نیست. اندازه نمونه و مدت آزمایش باید متناسب با ترافیک و روش تحلیل باشد؛ از چند کلیک پراکنده نمی‌توان نتیجه قابل اتکا گرفت. این مثال روش فکر کردن را توضیح می‌دهد و گزارش یک آزمایش انجام‌شده نیست.
حالت تاریک را جدا بررسی کنیم
برای ساخت حالت تاریک، معکوس کردن همه رنگ‌ها معمولاً کافی نیست. باید دوباره نقش‌ها را بررسی کنید: سطح کارت از زمینه قابل تشخیص است؟ متن توضیحی محو نشده است؟ رنگ خطا هنوز خوانده می‌شود؟ سایه‌ای که روی زمینه روشن عمق ایجاد می‌کرد، روی زمینه تیره ممکن است اثر کمی داشته باشد. تغییر روشنایی و شدت رنگ را بر اساس نتیجه همان صفحه انجام دهید.
تصویر، لوگو و نمودار هم به نسخه تاریک نیاز به بررسی دارند. یک لوگوی تیره روی زمینه تیره دیده نمی‌شود، حتی اگر متن‌های صفحه مناسب باشند. نسخه مناسب دارایی‌ها و رفتار انتخاب تم را مشخص کنید. برای جزئیات اجرایی، به مقاله اصول طراحی و پیاده‌سازی Dark Mode بروید و تصمیم رنگ را کنار موضوعات فنی آن بررسی کنید.
تحویل پالت به تیم توسعه
پالت نهایی باید نام نقش، کد رنگ و محل مصرف داشته باشد. کنار رنگ اقدام اصلی، نمونه دکمه واقعی را بگذارید و کنار رنگ خطا، نمونه پیام فرم را. برای حالت تاریک و وضعیت‌های تعاملی هم تصمیم ثبت کنید. در CSS، متغیرهای نقش‌محور مثل رنگ متن و سطح کارت خواناتر از نام‌هایی هستند که فقط ظاهر یک کد خاص را توصیف می‌کنند.
اگر چند نفر روی محصول کار می‌کنند، توضیح دهید چه زمانی می‌توان رنگ تازه افزود. بدون این قاعده، هر قابلیت جدید پالت جدا می‌سازد و کاربران برای تشخیص وضعیت‌ها مجبور به یادگیری دوباره می‌شوند. ثبت یک تصمیم کوتاه درباره دلیل انتخاب رنگ، به نگهداری بعدی کمک می‌کند. نیازی به سند بلند نیست؛ مثال درست و مورد استفاده مشخص، معمولاً از فهرست صفت‌های کلی مفیدتر است.
یک مرور قبل از انتشار
صفحه را در موبایل و دسکتاپ با محتوای واقعی ببینید. متن بلند، عنوان چندخطی، جدول شلوغ و تصویر روشن یا تیره را امتحان کنید. ترتیب توجه، خوانایی و تشخیص وضعیت را جدا بررسی کنید. اگر متن ضعیف است، فقط شدت رنگ را زیاد نکنید؛ اندازه، فاصله و جای عنصر را هم ببینید. مقاله فضای خالی در طراحی برای همین بخش به درد می‌خورد.
خروجی این بررسی باید چند تصمیم قابل اجرا باشد: کدام نقش رنگش تغییر می‌کند، کدام پیام به متن نیاز دارد و کدام حالت باید دوباره آزمایش شود. پالت خوب را با تعداد رنگ‌هایش تعریف نکنید؛ ببینید آیا تیم آن را درست استفاده می‌کند و کاربر بدون حدس‌زدن با صفحه کار می‌کند. بعد از انتشار هم بازخوردهای مشخص را ثبت کنید تا تغییر بعدی بر اساس مسئله واقعی انجام شود.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!