Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wp-statistics domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/orrmanir/l00p.dev/wp-includes/functions.php on line 6114
توجه به کوررنگی و ارتقای تجربه‌ی کاربری - لووپ استودیو
چشم کوررنگی

تاریخ:

۴ فروردین ۱۴۰۳

تعداد بازدید:

۹۶ بازدید

تعداد کامنت:

۰ نظر

دسته بندی:

طراحی UI/UX

آیا میدونید کوررنگی چیه؟ اگر فردی نتونه رنگ‌ها رو بصورتی که اکثر افراد مشاهده میکنن ببینه دچار کوررنگی هست. انواع کوررنگی هم داریم که البته من چون تخصصش رو ندارم وارد جزئیاتش نمیشم و صرفا مطالعاتی که کردم رو با شما به اشتراک میزارم. بعضی از رنگ‌ها رو افراد دچار کوررنگی نمیتونن ببینن. شایع ترینش رنگ سبز، قرمز و آبی هست. پس کسی که طراح UI UX هست باید به این افراد هم توجه کنه که در ادامه میگم چه کارایی میشه کرد. اول دایره‌ی رنگ‌های زیر رو ببینید که افراد دچار کوررنگی‌های مختلف رنگ‌های عادی رو چطور میبینن:

دایره رنگ افراد غیر کوررنگ
رنگ‌های قابل مشاهده دایره رنگ برای افراد عادی
دایره رنگ کوررنگی protanomaly
رنگ‌های قابل مشاهده دایره رنگ برای کوررنگی protanomaly
دایره رنگ کوررنگی protanopia
رنگ‌های قابل مشاهده دایره رنگ برای کوررنگی protanopia
دایره رنگ کوررنگی tritanomaly
رنگ‌های قابل مشاهده دایره رنگ برای کوررنگی tritanomaly
دایره رنگ کوررنگی tritanopia
رنگ‌های قابل مشاهده دایره رنگ برای کوررنگی tritanopia
دایره رنگ کوررنگی deuteranomaly
رنگ‌های قابل مشاهده دایره رنگ برای کوررنگی deuteranomaly
دایره رنگ کوررنگی deuteranopia
رنگ‌های قابل مشاهده دایره رنگ برای کوررنگی deuteranopia
دایره رنگ کوررنگی achromatomaly
رنگ‌های قابل مشاهده دایره رنگ برای کوررنگی achromatomaly
دایره رنگ کوررنگی achromatopsia
رنگ‌های قابل مشاهده دایره رنگ برای کوررنگی achromatopsia

مشکلات افراد کوررنگ موقع استفاده از وب سایت و یا اپلیکیشن‌ها

مرسوم ترین مشکلاتی که این افراد تجربه میکنن رو در لیست زیر آوردم و واقعیتش خیلی موارد مهمی هستن که اگر سرویس آنلاینی ارائه میدید که کاربران زیادی داره به نظرم حتما باید در نظر گرفت این افراد رو. حتی اگر طراح ها و دوولوپرها امکان تغییر تم نسبت به نوع کوررنگی رو روی سایت‌هاشون قرار بدن به نظرم یه فرهنگ‌سازی خیلی خوبی هم میشه. خلاصه بریم مشکلاتشون رو ببینیم:

  • خوندن متن‌ها دشوارمیشه چون کنتراست مناسبی بین بک گراند و متن برقرار نمیشه
  • تصاویر وب سایت تشخیصش سخت میشه بازم هم چون کنتراستش مناسب نیست
  • دکمه‌ها دیده نمیشن
  • دیدن ویدیوها دشوارتر میشه
  • پر کردن فرم‌ها سخت تر و چالش برانگیز تر میشه!

خب حالا ما به عنوان طراح رابط کاربری چه کاری میتونیم انجام بدیم؟ پیشنهادهایی که من برای شما دارم رو مینویسم.

ایجاد تم‌های مختلف برای انواع افراد دچار بیماری کورنگی

تقریبا به نظرم نمیشه از رنگ‌هایی استفاده کرد که همه‌ی افراد دچار کوررنگی بتونن یکسان ببیننش! مگراینکه یه رنگ خیلی خیلی زشت باشه که کیفیت کارمون رو به شدت پایین میاره. پس پیشنهادم اینه که پالت‌های مختلف رو درست کنید و روی بعضی که مخصوص افراد کوررنگی تنظیمشون کردید بنویسید که متوجه بشن براشون ارزش قائلید. راستی توی همه رنگ‌ها سعی کنید کنتراستشون مناسب باشه. برای چک کردن کنتراست هم سایت Color Contrast Checker رو براتون پیشنهاد میکنم.

نمیدونم عمدی بود یا شانسی ولی قسمت تنظیمات پروفایل وردپرس که تم‌های مختلف قرار دادن رو تست کردم دیدم که اکثر پالت‌های رنگی رو میتونن این افراد ببینن مثل افراد عادی. اگه میخواید ببینید چطور مثل من میتونید این رنگ‌ها رو تست کنید این مطلب رو تا آخرش بخونید.

تست کوررنگی گرفتن از کاربران

خب شاید یکم مسخره به نظر برسه و مسخره هم هست البته 😂 ولی اگه سادیسم دارید و میخواید کاربراتون رو اذیت کنید اول از اینکه وارد سایتتون بشن میتونین یه تست طراحی کنید و نسبت به نتیجه‌ی تست تم سایت رو اتوماتیک خودتون ست کنید، ولی کاربراتونو از دست دادید به من ربطی نداره! 😔😁

انواع تست‌ها هستن که یک فرد میتونه بفهمه دچار کوررنگی هست یا نه، فعلا تا جایی که من مطالعه کردم و فهمیدم api خاصی وجود نداره که اینو اتوماتیک خودمون بفهمیم، راستش نمیدونم افراد کوررنگ تا چه حدی اذیت میشن ولی اگه زیاد اذیت بشن اصولا در آینده باید مثلا سیستم عاملمون یا مرورگر موقع ستاپ یه تست ساده ازمون بگیره و بفهمه که این کاربر کوررنگی داره یا نه و اونو تحت یه api در اختیار دوولوپرها قرار بده. اگه اطلاعات خوبی دارین کامنت کنید بی زحمت.

استفاده از ترندهای طراحی با کنتراست بالا

کلا هر چقدر کنتراست بالا باشه ناخودآگاه و چشم کاربر بهتر محتوا رو درک میکنه! البته اگه هدفمون از محتوا مثلا خوندن متن و جلب توجه و اینجور چیزا باشه. به نظر میاد اگه از دیزاین استایل‌هایی مثل Brutalism یا Neubrutalism استفاده کنید شانس اینکه کنتراست رنگ‌هاتون برای افراد کوررنگ هم مناسب باشه بیشتره.

سبک طراحی Neubrutalism با 
Sepideh Yazdi
نمونه‌ای از سبک Brutalism

استفاده از شبیه‌سازهای کوررنگی

برای اینکه تست کنید رنگ‌های انتخابی شما در چشم افراد کوررنگ چطور دیده میشه نیازه که از شبیه سازها استفاده کنید. بعضی از شبیه سازا آنلاین هستن، بعضی بصورت اپلیکیشن در دسترسن و بعضی هم اکستنشن کروم.

وقتی که این مطلب رو میخواستم بنویسم روز سوم عید بود، حوصلم سررفته بود و خواستم یه ابزاری هم خودم درست کنم، چند سایت دیگه هم معرفی میکنم ولی از ابزار من استفاده کنید که خوشحال بشم 🙂

ابزار شبیه ساز کوررنگی که پایین گذاشتم و خودم درستش کردم به نظرم خیلی ساده و کارآمده، شما رنگ‌هایی که دارین رو بصورت مربع مثلا کنار هم قرار بدید و بعد خروجی svg بگیرید و کد svg رو اگه وارد کنید بهتون نشون میده که انواع کوررنگی‌ها تقریبا چطور میبیننشون. ستاره دادن توی گیتهاب رو هم فراموش نکنیددد.

(یکی از منابعم مقاله‌ی The Colour Blind Test and Tools to Improve Website Design بود.)
مرسی که خوندید، نظر و تجربتون رو هم بنویسید، بای بای

دیدگاه کاربران

تا کنون دیدگاهی ثبت نشده است.

اولین نفری باشید که دیدگاه خود را ثبت میکند!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پیشنهادهای خواندنی...

فریمورک NativePHP
اخبار برنامه نویسی
NativePHP و توسعه‌ی اپلیکیشن دسکتاپ با PHP

معرفی فریمورک جدید NativePHP برای توسعه‌ی اپلیکیشن‌های دسکتاپ تحت زبان برنامه نویسی PHP

افزونه VS Code Pets
برنامه نویسی
پت مخصوص برنامه نویس‌ها!

این مقاله یکی از اکستنشن‌های تفریحی رو معرفی میکنیم که میتونید باهاش حیوانات پیکسلی که دوست دارید رو به محیط VS Code بیارید تا حین کدنویسی شما اونجا یه گوشه بازی کنن.

لوگوی PhpStorm
اخبار برنامه نویسی
ظاهر جدید PhpStom با New UI

این مطلب در مورد قابلیت جدید PhpStorm هست که با استفاده از اون میتونین ظاهر اونو مدرن و مینیمال کنید!

?>
رفتن به بالای سایت