مقالات تجربه کاربری - رنگهای گیجکننده
رنگهای گیجکننده
رنگهای گیجکننده 
رنگهای گیجکننده (Confusing Colors) چیست؟
💡 این متن «بازنویسی آزاد» است: ایدهها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثالهای تازه بازگو شدهاند و ترجمهٔ کلمهبهکلمه نیست. بخشهای افزودهٔ مترجم در جعبهٔ منبع مشخص شدهاند.
رنگ سریعترین کانال رابط شماست. همین سرعت، پرهزینهترین جای اشتباه هم هست.
تعریف
رنگ گیجکننده رنگی است که بهجای رساندن معنا، آن را میپوشاند.
این پوشاندن دو صورت دارد. یا کاربر تفاوت دو رنگ را نمیبیند، یا میبیند و نمیداند آن تفاوت چه میگوید.
هر دو صورت یک نتیجه دارند. کاربر اطلاعاتی را از دست میدهد که شما فکر میکردید تحویلش دادهاید.
مثال آشنایش متن خاکستری روی زمینهٔ خاکستری روشنتر است. متن آنجا هست و خوانده نمیشود.
مثال دوم پیوندی است که رنگ و زیرخطِ متعارف را ندارد. پیوند آنجا هست و کلیک نمیشود.
نکتهٔ مهم این است که رنگ در ادراک، یک «ویژگی پیشتوجهی» است. مغز پیش از آنکه آگاهانه نگاه کنید، تفاوت رنگ را ثبت میکند.
به همین دلیل رنگ ابزار قدرتمندی برای هدایت توجه است. ویژگیهای پیشتوجهی صفحهٔ جداگانهٔ خودشان را دارند.
اما هر ابزارِ هدایت توجه، ابزار انحراف توجه هم هست. طراحی که میداند چطور چیزی را برجسته کند، میداند چطور چیزی را گم کند.
سه گیجکنندگی زیر یک نام
این بخش افزودهٔ من است، چون «رنگ گیجکننده» معمولاً یک مسئلهٔ واحد گرفته میشود.
در عمل سه چیز مستقل زیر این نام جمع شدهاند. نشانه و آزمون و درمان هر سه با هم فرق دارد.
- - ۱. رنگِ تنها نشانه: یک کانال حاملِ کل معنا شده است. بخشی از کاربران چیزی نمیبینند، پس تصویر را خاکستری کنید و یک نشانهٔ دوم اضافه کنید.
- - ۲. جفتِ تفکیکناپذیر: دو رنگ که چشم از هم جدایشان نمیکند. میبینید ولی نمیخوانید، پس کنتراست روشنایی را بسنجید و یک پلهٔ روشنایی بگذارید.
- - ۳. پنهانکاریِ عمدی: یک تصمیم تجاری است، نه خطای ادراکی. اصلاً پیدایش نمیکنید، پس بپرسید نفعش مالِ کیست و سلسلهمراتب را صادق کنید.
تفکیک این سه، وقت تیم را نجات میدهد. دو مورد اول با ابزار سنجش حل میشوند و مورد سوم با گفتوگو دربارهٔ هدف.
اشتباه رایج، بردن مسئلهٔ سوم به جلسهٔ فنی است. هیچ سنجشی به شما نمیگوید که آن دکمهٔ لغو اشتراک باید دیده شود.
چرا چشم دو فام همروشنایی را جدا نمیکند
شبکیهٔ چشم دو نوع اطلاعات را با دقت یکسان منتقل نمیکند. کانال روشنایی تیزبین است و کانال رنگ نیست.
یعنی مرزِ میان روشن و تیره را با جزئیات میبینید. مرزِ میان دو فام با روشنایی برابر را تقریباً محو میبینید.
نتیجهٔ عملیاش یک قاعدهٔ ساده است. لبه از اختلاف روشنایی ساخته میشود، نه از اختلاف رنگ.
پس دو رنگ میتوانند در چرخهٔ رنگ کاملاً دور از هم باشند و روی صفحه یک لکهٔ واحد به نظر برسند.
سبز روی قرمز بهترین نمونه است. این دو در رنگهای مکمل روبهروی هم مینشینند و در روشنایی میتوانند تقریباً یکی باشند.
سنجهٔ استاندارد این اختلاف، نسبت کنتراست است. عددش از روشنایی نسبی دو رنگ حساب میشود و به فام کاری ندارد.
همین بیاعتنایی به فام، چیزی است که خیلی از تیمها را غافلگیر میکند. پالتی که رنگارنگ به نظر میرسد میتواند در سنجش یکنواخت باشد.
آزمونش هم ارزان است. تصویر رابط را خاکستری کنید و ببینید چه چیزی از هم قابل تشخیص میماند.
هرچه پس از خاکستریکردن ناپدید شود، برای بخشی از کاربران از اول ناپدید بوده است. کوررنگی فقط یکی از دلایل این ناپدیدی است.
نمایشگر ارزان، نور مستقیم آفتاب و حالت صرفهجویی باتری هم همان اثر را دارند. کاربر بی هیچ اختلال بینایی، جفت همروشنایی شما را از هم جدا نمیکند.
پنج جفتی که در عمل دردسر میسازند
فهرست زیر از پالتهای واقعی محصول بیرون آمده است، نه از کتاب درسی.
- - ۱. سبز روی قرمز: نسبت کنتراست حدود ۱٫۱ به ۱. متن سبز روی دکمهٔ قرمز به یک لکه تبدیل میشود و هیچ لبهای نمیماند.
- - ۲. سبز روی فیروزهای همسایه: باز هم حدود ۱٫۱ به ۱. دو فام متفاوت با یک روشنایی، که در نمودار و برچسب کنار هم مرتب اتفاق میافتد.
- - ۳. خاکستری روی زمینهٔ روشن: حدود ۱٫۹ به ۱. در نور دفتر خوانا است و در آفتاب یا روی نمایشگر ارزان تمام میشود.
- - ۴. آبی اشباع روی مشکی: حدود ۲٫۷ به ۱. عددش بهتر است و اثر دیگری دارد؛ سطر نازک روی این زمینه میلرزد و از سطح جدا میشود.
- - ۵. سرمهٔ تیره روی کرم: حدود ۹ به ۱. این یکی سالم است و همان جفتی است که باید نگهش دارید.
چهار جفت اول یک چیز مشترک دارند. هیچکدام به آستانهٔ متن عادی نمیرسند.
دو جفت اول بدترین حالت این فهرستاند. در فام از هم دورند و در روشنایی تقریباً یکیاند.
مورد چهارم مسئلهٔ جداگانهای هم دارد که اسم خودش را دارد. آن لرزش و جدا شدن سطر در کروموستریوپسیا توضیح داده شده است.
حد پایین قابل قبول برای متن عادی، ۴٫۵ به ۱ است. برای متن درشت یا پرُوزن، ۳ به ۱ کافی میشود.
این اعداد سلیقه نیستند. آستانهٔ خواناییِ سنجیدهشدهاند و در دسترسپذیری مبنای پذیرشاند.
وقتی رنگ تنها نشانه است
مسئلهٔ دوم از جنس دیگری است. اینجا دو رنگ کاملاً از هم قابل تشخیصاند و مشکل جای دیگری است.
مشکل این است که معنا تنها روی رنگ سوار شده. کاربری که آن رنگ را نمیبیند، معنا را هم ندارد.
نمونههای آشنایش زیاد است. فیلدِ نامعتبر که فقط قاب قرمز میگیرد، وضعیت سرور که فقط یک نقطهٔ رنگی است، و نمودار خطی که راهنمایش فقط رنگ خط است.
درمان این حالت اضافهکردن کنتراست نیست. درمانش اضافهکردن یک کانال دوم است.
کانال دوم میتواند متن باشد، یا علامت، یا موقعیت، یا شکل، یا الگوی خطچین. مهم این است که بی رنگ هم بخواند.
- - خطای فرم: قاب قرمز بماند و یک جملهٔ کوتاه زیر فیلد بنشیند که میگوید چه چیزی اشتباه است.
- - وضعیت: کنار نقطهٔ رنگی یک برچسب یا علامت بگذارید؛ تیک و علامت تعجب و ضربدر سه شکل متمایزند.
- - نمودار: برچسب را روی خودِ خط بنویسید و به راهنمای کنار نمودار تکیه نکنید؛ مصورسازی داده همین را مفصلتر باز میکند.
- - جدول: ردیفِ برجسته را با وزن قلم یا یک نشانهٔ ابتدای سطر هم متمایز کنید.
یک صرفهجویی هم در این کار هست. نشانهٔ دوم برای کاربر بیمشکل هم سرعت خواندن را بالا میبرد.
کسی که برچسب را روی خط میبیند، لازم نیست نگاهش را به راهنما و برگشت ببرد. سلسلهمراتب بصری از همین صرفهجوییها ساخته میشود.
پنهانکاری با کنتراست: جایی که گیجکردن تصمیم است
تا اینجا فرض بر خطا بود. اما بخشی از رنگهای گیجکننده خطا نیستند.
کنتراست پایین، ارزانترین راه دفنکردن یک گزینه است. گزینه سر جایش میماند، پس ادعای حذفش را کسی نمیتواند بکند.
سه جای ثابت این کار را نشان میدهد. دکمهٔ لغو اشتراک در پای ایمیل، پیوند شرایط استفاده در فرم ثبتنام، و تیکِ انصراف از تبلیغات.
الگوی چهارم در صفحهٔ قیمتگذاری دیده میشود. پلن ارزانتر خاکستری و بیرنگ میشود و پلن گران با رنگ برند و یک نشان «پیشنهاد ما» میآید.
هیچکدام از اینها دروغ نیست. هر چهار مورد، توزیع توجه را به نفع فروشنده جابهجا میکنند.
آزمون تشخیصش یک پرسش است. بپرسید این کمرنگی به نفع فهم کاربر است یا به نفع نرخ تبدیل شما.
اگر پاسخ دومی بود، نامش طراحی نیست. الگوی تاریک است و هزینهاش را اعتماد میپردازد.
مرزش هم آنقدرها مبهم نیست. کمرنگکردن اطلاعات کماهمیت درست است و کمرنگکردن راهِ خروج نیست.
یک قاعدهٔ عملی از همینجا بیرون میآید. هر عنصری که تصمیم کاربر را عوض میکند، باید در حدِ همان تصمیم دیده شود.
در بافت فارسی: قرمز و سبزی که سه چیز میگویند
این بخش هم افزودهٔ من است، چون عادتهای رنگی بازار ما با فرضهای متعارف این بحث یکی نیست.
یک: یک جفت رنگ، سه معنا در یک اپ. در صفحهٔ پرتفوی سبز یعنی رشد قیمت. در صورتحساب سبز یعنی واریز به حساب.
در گزارش دفترداری قرمز یعنی بدهکار، که خودش نه خوب است و نه بد. سه معنای متفاوت روی یک جفت رنگ سوار شدهاند.
درمانش پاککردن رنگ نیست. توکن رنگ را به نقش نامگذاری کنید و یک جدول واحد از معنای هر نقش نگه دارید.
دو: کاربر ایرانی دو نقشهٔ رنگی متضاد را با خود میآورد. در تابلوی بورس تهران و اپهای سهام، سبز رشد است و قرمز افت.
در بازارهای شرق آسیا این قرارداد وارونه است و قرمز رنگ صعود شمرده میشود. همان کاربر در اپهای ارز دیجیتال با نمودارهایی روبهرو میشود که از آن قرارداد پیروی میکنند.
پس فرض «همه میدانند سبز چیست» اینجا نمیایستد. علامت جهت را کنار رنگ بگذارید و درصد را با علامت مثبت و منفی بنویسید.
سه: سبز در فارسی رنگ خنثایی نیست. بار فرهنگی و آیینی دارد و در بستهبندی و نشانهها معناهای دیگری را حمل میکند.
نتیجهاش این است که همان سبز در نقش «موفق» بیطرف خوانده نمیشود. نمادگرایی رنگ این لایه را جداگانه باز میکند.
چهار: خاکستری جانشین وزنِ قلم شده است. قلمهای فارسی وب اغلب دو وزن کاربردی دارند، نه شش وزن.
پس طراح برای پایینآوردن اهمیت یک متن، رنگش را کم میکند. سلسلهمراتب از جیب کنتراست خرج میشود و متن ثانویه به مرز ناخوانایی میرسد.
راه ارزانش استفاده از اندازه و فاصله و چیدمان بهجای رنگ است. یک پلهٔ اندازه، همان کار را بی هزینهٔ خوانایی انجام میدهد.
در حالت تاریک هر چهار مورد بدتر میشوند. رنگهای اشباع روی زمینهٔ تیره روشنایی کمی دارند و همان جفتهای همروشنایی تازه ساخته میشوند.
پس در رابط فارسی رنگ بار بیشتری میبرد و ابهامش گرانتر تمام میشود. نظریهٔ رنگ ابزار ساختن پالت را میدهد و این بخش میگوید کجا آن ابزار کم میآورد.
جمعبندی
- - رنگ گیجکننده: رنگی که معنا را میپوشاند · یا کاربر تفاوت را نمیبیند · یا میبیند و نمیداند چه میگوید
- - رنگ یک ویژگی پیشتوجهی است · هدایت توجه با آن ارزان است · انحراف توجه هم همانقدر ارزان است
- - سه چیز زیر یک نام: رنگِ تنها نشانه · جفتِ تفکیکناپذیر · پنهانکاریِ عمدی
- - دو مورد اول با سنجش حل میشوند · مورد سوم با گفتوگو دربارهٔ هدف · بردنش به جلسهٔ فنی وقت تلفکردن است
- - لبه از اختلاف روشنایی ساخته میشود · نه از اختلاف فام · پس دو رنگ دور از هم میتوانند یک لکه شوند
- - آزمون ارزان: تصویر را خاکستری کنید · هرچه ناپدید شد از اول برای بخشی از کاربران ناپدید بود
- - جفتهای پرخطر: سبز روی قرمز · سبز روی فیروزهای همسایه · خاکستری روی زمینهٔ روشن · آبی اشباع روی مشکی
- - حد قابل قبول: ۴٫۵ به ۱ برای متن عادی · ۳ به ۱ برای متن درشت یا پرُوزن
- - رنگ تنها نشانه نباشد · کانال دوم اضافه کنید: متن · علامت · شکل · موقعیت · الگوی خطچین
- - نشانهٔ دوم برای کاربر بیمشکل هم سود دارد · نگاه را به راهنما و برگشت نمیبرد
- - کنتراست پایین ارزانترین راه دفن یک گزینه است · لغو اشتراک · شرایط استفاده · انصراف از تبلیغات · پلن ارزان
- - آزمونش یک پرسش است: این کمرنگی به نفع فهم کاربر است یا به نفع نرخ تبدیل
- - در فارسی: یک جفت با سه معنا · دو نقشهٔ متضاد در ذهن کاربر · سبز غیرخنثی · خاکستری جانشین وزن قلم
- - توکن را به نقش نامگذاری کنید · علامت جهت را کنار رنگ بگذارید · سلسلهمراتب را با اندازه بسازید نه با کمرنگی
منبع
این نوشته «بازنویسی آزاد» است از مطلب Confusing Colors در وبسایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF) و مقالهٔ آزادِ همان صفحه، Use Color to Prevent Confusion and Help Your Users. مفاهیم پایه — صورتبندی رنگ گیجکننده بهعنوان دستکاری کنتراست و انتخاب رنگ برای پوشاندن اطلاعات یا هدایت رفتار کاربر به سمت نفع شرکت؛ دو سازوکار اصلی این پوشاندن یعنی متن خاکستری روی زمینهٔ خاکستری روشنتر که خوانده نمیشود و پیوند درونمتنی که رنگ و زیرخط متعارف را ندارد و کلیکشدنی به نظر نمیرسد؛ جایگاه رنگ بهعنوان یک ویژگی پیشتوجهی که پیش از نگاه آگاهانه ثبت میشود و همین آن را به ابزار قدرتمند هدایت توجه تبدیل میکند؛ استدلال اینکه دانش طراح دربارهٔ ادراک بینایی به همان اندازه که برای نمایانکردن به کار میآید برای پنهانکردن هم به کار میآید؛ نمونههای پنهانکاری یعنی دکمهٔ لغو اشتراک با کنتراست ناکافی در پای ایمیل، پیوند شرایط استفاده که کلیکشدنی به نظر نمیرسد، تیک انصراف از تبلیغات، و صفحهٔ قیمتگذاری که پلن ارزانتر را با خاکستریکردن کماهمیت نشان میدهد؛ و توصیهٔ پایانی به تعادل میان هدایت توجه و دسترسپذیری و پرسیدن «چه چیزی را میخواهم نشان دهم و چرا» پیش از انتخاب رنگ — از این منبع گرفته شده. متن فارسی، ساختار بخشها و همهٔ تحلیلها کاملاً مستقل نوشته شدهاند.
متن مطلب اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمهبهکلمه ارائه نشده و متن کامل انگلیسی (بههمراه همهٔ منابع مرتبط) در لینک زیر در دسترس است.
بخشهای افزودهٔ مترجم: بند آغازین دربارهٔ اینکه سرعت رنگ همان جایی است که اشتباه در آن گران تمام میشود؛ کل بخش «سه گیجکنندگی زیر یک نام» شامل تفکیک رنگِ تنها نشانه از جفتِ تفکیکناپذیر و از پنهانکاری عمدی، ریشه و نشانه و آزمون و درمان جداگانهٔ هر سه، و این نتیجه که دو مورد اول با ابزار سنجش حل میشوند و مورد سوم فقط با گفتوگو دربارهٔ هدف؛ کل بخش «چرا چشم دو فام همروشنایی را جدا نمیکند» شامل تفاوت دقت کانال روشنایی و کانال رنگ، قاعدهٔ ساختهشدن لبه از اختلاف روشنایی و نه اختلاف فام، بیاعتنایی نسبت کنتراست به فام و غافلگیری تیمها از پالت رنگارنگِ یکنواخت، آزمون خاکستریکردن رابط، و فهرست دلایل غیرِ کوررنگیِ ناپدیدشدن یعنی نمایشگر ارزان و نور مستقیم آفتاب و حالت صرفهجویی باتری؛ کل بخش «پنج جفتی که در عمل دردسر میسازند» شامل پنج جفت و نسبت کنتراست هرکدام و حکم عملی هریک، مشاهدهٔ اینکه چهار جفت اول در فام دور و در روشنایی نزدیکاند، تشخیص لرزش سطر نازک روی زمینهٔ تیره بهعنوان مسئلهای جدا، و آستانههای ۴٫۵ و ۳؛ کل بخش «وقتی رنگ تنها نشانه است» شامل جدا کردن این مسئله از مسئلهٔ کنتراست، ایدهٔ کانال دوم و پنج شکلش، چهار نمونهٔ عملی در فرم و وضعیت و نمودار و جدول، و استدلال صرفهٔ نشانهٔ دوم برای کاربر بیمشکل؛ در بخش پنهانکاری، صورتبندی «کنتراست پایین ارزانترین راه دفن یک گزینه است چون گزینه سر جایش میماند»، آزمون تشخیصی «به نفع فهم کاربر یا به نفع نرخ تبدیل»، و قاعدهٔ دیدهشدن هر عنصر در حدِ تصمیمی که عوض میکند؛ و کل بخش بافت فارسی شامل سه معنای همزمان جفت قرمز و سبز در پرتفوی و صورتحساب و دفترداری، دو نقشهٔ رنگی متضادی که کاربر ایرانی از تابلوی بورس تهران و از اپهای ارز دیجیتال با خود میآورد، غیرخنثی بودن سبز در بافت فرهنگی فارسی، جانشینشدن خاکستری بهجای وزنِ قلم بهدلیل کمبودن وزنهای کاربردی در قلمهای فارسی وب و راهحل اندازه و فاصله، بدتر شدن هر چهار مورد در حالت تاریک، و توصیههای نامگذاری توکن بر پایهٔ نقش و گذاشتن علامت جهت کنار رنگ
تصاویر: تصویرهای مطلب اصلی نمونههای تصویری از رابط چند محصول تجاریاند و لایسنس بازی ندارند؛ هیچکدام اینجا بازتولید نشده است. هر سه نمودار این صفحه طراحی مستقل مترجم است.
مشاهدهٔ مطلب اصلی
مترجم: سپنتا پویا
طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی به فارسی برمیگردانم.
دربارهٔ من