نقشه های کور رنگی | نیروی فروش

ما با استفاده از شبیه ساز کوررنگی برای بررسی دسترسی ما (a11y) جعبه رنگ نقاشی. در میان انواع مختلف کوررنگی، پالت اولیه ما به تعداد زیادی تکراری منجر شد. بنابراین، ما به آزمایش ادامه دادیم. ما می‌خواستیم تعادلی ایجاد کنیم که به کاربران بزرگ‌ترین مجموعه رنگ ممکن را بدهد که می‌توان آن را با همه انواع کوررنگی تشخیص داد. ما در نهایت به مجموعه ای از 12 رنگ از پالت a11y رسیدیم، آنها را بهینه سازی کردیم تا تمایز را به حدا،ر برس،م و سیاه و سفید را اضافه کردیم.

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

مقایسه کنار هم از دو پالت رنگ.  دومی کاهش انتخاب رنگ ها را نشان می دهد.
نمودار سمت چپ پالت رنگ قابل دسترس Salesforce را نشان می دهد. در سمت راست یک پالت ساده برای کوررنگی وجود دارد. [Jon Jordan/Salesforce]

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

ما می‌دانستیم که دو کار برای بهبود دسترسی به نقشه‌ها وجود دارد:

  • یک پالت رنگی من، برای کوررنگ ایجاد کنید که هر ،ی – به ویژه افرادی که کور رنگی دارند – می توانند آن را تنظیم کنند.
  • برای دید بهتر، نشانگرهایی ایجاد کنید که شرایط کنتراست را برآورده کنند.

کوررنگی چیست؟

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

با نشانگرهای نقشه شروع کنید

بنابراین CVD چقدر رایج است؟ در باره 350 میلیون نفر در سراسر جهان آن را تجربه کنند، یا 4 درصد از کل جمعیت. این بیماری حتی در مردان شایع تر است، جایی که در حدود 1 از 12 مرد (حدود 8 درصد) رخ می دهد. این بدان م،است که احتمالاً بخش بزرگی از کاربران فعلی Salesforce ما به کوررنگی مبتلا هستند. اگر تغییراتی ایجاد نکنیم، این خطر را داریم که کاربران جدید را از پذیرش برنامه نقشه‌هایمان منصرف کنیم.

گرافیکی که چهار نسخه از یک تصویر آب نبات را نشان می دهد که هر کدام نشان دهنده نوعی کوررنگی است.
شبیه سازی اینکه چگونه انواع مختلف کوررنگی بر درک رنگ افراد تاثیر می گذارد. [Jon Jordan/Salesforce]

به دلیل نام، این تصور غلط وجود دارد که افراد مبتلا به کوررنگی فقط سیاه و سفید را می بینند. کوررنگی یا کمبود دید رنگی (CVD) در واقع به این م،است که توانایی فرد در تشخیص رنگ ها در مقایسه با فردی با دید معمولی رنگ کاهش یافته است.

اما، چند تغییر در طراحی نقشه به منظور سازگاری با کور رنگی می تواند تفاوت را ایجاد کند.

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

نوآوری را با اصول طراحی فراگیر تقویت کنید. این ماژول در مورد طراحی فراگیر به شما کمک می کند تا نحوه تشخیص طرد و راه هایی برای تغییر تفکر و عملکرد خود را شروع کنید.


ما دوباره شبیه سازی را اجرا کردیم و نتیجه این شد:

یک گرافیک به ربع ت،یم می شود که هر کدام 14 نشانگر نقشه را روی نقشه ها نشان می دهد.  نشانگرها پالت دوست کور رنگ را منع، می کنند.
پالت نهایی نشانگرهای نقشه و نحوه نمایش آنها برای انواع مختلف کوررنگی. [Jon Jordan/Salesforce]

در مثال زیر، نقشه سمت چپ یک نشانگر صورتی در میان یک سری نشانگر آبی نشان می دهد. نقشه سمت راست تقلید می کند که چگونه فردی که کوررنگی دارد ممکن است همان نقشه را ببیند: همه یک رنگ. می تو،د تصور کنید که چقدر ممکن است ناامید کننده باشد.

گرافیک مقایسه دو نسخه از یک نقشه.  نشانگرهای نقشه در دو رنگ در سمت چپ و یک رنگ در سمت راست ظاهر می شوند.
سمت چپ: نقشه برای فردی با دید معمولی چگونه به نظر می رسد. درست: همان نقشه ممکن است برای ،ی که کوررنگی دارد به نظر برسد. [Jon Jordan/Salesforce]

یک جامعه بزرگ از افراد کور رنگی وجود دارد که فعالانه از طریق ارتباط برقرار می کنند r/گروه کوررنگ در Reddit ما پالت خود را به اشتراک گذاشتیم و درخواست بازخورد کردیم. پاسخ باورن،ی بود. مردم به ما گفتند که چه چیزی مؤثر است و چه چیزی مؤثر نیست، و پیشنهادهایی برای تغییرات آینده ارائه ،د. هیچ ، هرگز به فکر طراحی برای CVD نیست. در بهترین حالت، ممکن است یک گزینه جابه‌جایی با مجموعه‌ای از رنگ‌های کوچک‌تر در دسترس باشد.»

طراحی فراگیر را تمرین کنید

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

هیچ ، هرگز به طراحی برای CVD فکر نمی کند. در بهترین حالت، ممکن است یک گزینه جابه‌جایی با مجموعه کوچک‌تری از رنگ‌ها در دسترس باشد.

عضو انجمن

r/گروه کوررنگ، Reddit

تست پالت سازگار با کور رنگ

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

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

گرافیک دو نشانگر نقشه را در دایره های آبی نشان می دهد، با نسبت کنتراست در ستون های زیر نشانگرها.
نشانگرهای نقشه اصلاح شده و مقایسه نسبت کنتراست. [Jon Jordan/Salesforce]

توسعه پالت رنگ

WCAG (دستورالعمل های دسترسی به محتوای وب) حداقل به نسبت 3.5:1 بین دو ،صر نیاز دارد. از آنجایی که نشانگرهای نقشه ممکن است رنگی باشند که به رنگ نقشه پشت آن بسیار نزدیک باشد، تصمیم گرفتیم که این یک منطقه فرصت باشد. ما از استانداردهای صنعتی برای نشانگرها خارج شدیم و یک حاشیه دوتایی با طرح کلی سفید ثابت اضافه کردیم. با این طراحی، نشانگر همیشه حداقل نسبت کنتراست 11:1 بدون توجه به پس زمینه دارد.

آ،ین دور آزمایش ما شامل 90 نفر بود و 100 درصد موفقیت داشت. برای در نظر گرفتن این پروژه، 16،777،216 رنگ مختلف در چرخه رنگ RGB وجود دارد و ما مجبور شدیم 14 مورد از آنها را پیدا کنیم که کار کنند. این شانس‌ها چالش برانگیز هستند، اما تلاش برای دسترسی و گنجاندن در محصولات و ویژگی‌هایی که می‌سازیم همیشه باید در سرلوحه کار قرار گیرد.


منبع: https://www.salesforce.com/blog/،w-we-designed-salesforce-maps-to-be-color-blind-friendly/

دو دور بعدی بازخورد و تکرار مفید بودند، اما پالت‌های جدید همچنان برای مردم گیج‌کننده بودند. همیشه چند رنگ وجود داشت که به صورت تکراری ظاهر می شدند. سپس یکی از کاربران Reddit گفت: “ما تمایل داریم چیزهایی را که فقط با رنگ متفاوت هستند نادیده بگیریم. برای مثال، هنگام بازی Ticket to Ride، من فقط از ال،ای کوچک روی کارت‌ها استفاده می‌کنم و رنگ‌ها را نادیده می‌گیرم.»