لوگوی جشنواره وب و موبایل ایران
ابزارها گرافیک گرافیک رابط کاربری

راهنمای طراحی تجربه کاربری برای افراد مبتلا به کور رنگی – قسمت اول

بر اساس آمار، ۴.۵٪ افراد روی کره زمین، به کور رنگی دچارند. اگر مخاطبان شما مردان باشند، این مقدار به ۸٪ افزایش پیدا می‌کند. طراحی تجربه کاربری برای افراد مبتلا به کور رنگی می‌تواند به سادگی فراموش شود؛ چرا که خیلی از طراحان به کور‏ رنگی مبتلا نیستند. در این مقاله برایتان ۱۳ نکته گردآوری شده تا به بهتر شدن طراحی تجربه کاربری برای افراد مبتلا به کوررنگی نتیجه شود. اغلب این نکات می‌توانند حتی به سود افرادی باشند که کور رنگی ندارند.

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

انواع مختلفی از کور رنگی وجود دارد؛ اما همه آنها باعث می‌شوند که رنگ‌ها بخوبی تشخیص داده نشوند و ناتوانی در مجزا کردن رنگ‌ها یا درک تفاوت بین رنگ‌ها، بوجود آید..

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

تکیه صِرف بر رنگ‌ها برای افزایش خوانایی و کارایی می‌تواند استفاده از سایت را مشکل کند که تاثیر به‌سزایی در بازدید و فروش سایتتان دارد.

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

طراحی تجربه کاربری

۲. خوانایی نوشته‌ها

برای اطمینان از این که آیا نوشته شما خوانایی لازم را دارد یا خیر، باید از آزمون دستورالعمل دسترسی پذیری (WCAG) بر اساسِ رنگِ نوشته، رنگ پس زمینه و اندازه نوشته عبور کند. بدین صورت که:

1001boom-text-overlay-bad-preview-opt

«بر اساس دستورالعمل دسترسی پذیری محتوای وب (WCAG)، نسبت کنتراست برای نوشته‌های معمولی ۴.۵:۱ و برای نوشته‌های بزرگ (با اندازه بزرگتر از ۱۴ pt و بولد یا ۱۸ pt یا بزرگتر) ۳:۱ است.»

چند مثال از حالت‌هایی که نوشته‌ها از آزمون پذیرفته می‌شوند یا نمی‌شوند:

1001boom-text-overlay-good-preview-opt

کاهش شفافیت تصویر پس زمینه یا کمی تیره‌تر کردن (و یا حتی تار کردن) آن می‌تواند این مشکل را حل کند.

۳. فیلترها، انتخاب‌کننده‌ها و نمونه‌های رنگ

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

البته آمازون نام رنگ‌ها را در حالت شناور (هاور / hover – وقتی که نشانگر روی رنگ می‌رود) نشان می‌دهد، ولی ما در تلفن‌های هوشمند و تبلت‌ها چیزی با نام هاور نداریم!

 

1001boom-amazon-preview-opt

فروشگاه آنلاین دیگری با نام Gap توانست این مشکل را حل کند، بدین صورت که کنار هر رنگ، نام رنگ را نیز می‌نویسد.

1001boom-gap-preview-opt

این کار برای همگان سودمند است؛ زیرا برای مثال رنگ‌های سیاه و سرمه‌ای زیاد در صفحه نمایش قابل تشخیص نیستند، ذکر نام رنگ‌ها می‌تواند این مشکل را حل کند.

۴. عکس بدون توضیحات کافی

تصویر پایین کالایی را از سایت SuperDry را نشان می‌دهد که در توضیحات آورده شده رنگ محصول یشمی است، اما اندکی مبهم است، زیرا یشم نام سنگی است که به رنگ‌های قرمز، زرد، قهوه ای، سبز و… نیز وجود دارد.

1001boom-superdry-preview-opt

افراد مبتلا به کور رنگی در دیدن چنین رنگ‌هایی مشکل دارند، پس بهتر است توضیحات اضافی‌تر نوشته شود. برای مثال برای رنگ این محصول می‌توانیم بنویسیم «سبز یشمی تیره».

۵. قابلیت تشخیص لینک‌ها

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

1001boom-gds-screenshot-preview-opt

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

لینک‌هایی که کنارشان آیکون خاصی قرار گرفته خیلی آسان‌تر تشخیص داده می‌شوند، اما برای آن دسته از لینک‌های بدون آیکون، بهترین گزینه افزودن آندرلاین است که سایت خدمات الکترونیکی دولت بریتانیا در ادامه متن این کار را کرده.

1001boom-gds2-preview-opt

۶. ترکیب رنگ‌ها

ما نمی‌توانیم رنگ‌های طبیعت را کنترل کنیم؛ مثلا سیب قرمزی که از روی درخت به روی چمن سبز می‌افتد. اما می‌توانیم رنگ‌هایی را که در طراحیِ سایت‌های خود به کار می‌بریم را کنترل کنیم. بهتر است تا جایی که امکان دارداز به کار بردن رنگ‌های زیر در کنار یکدیگر پرهیز کنیم:

  • سبز / قرمز
  • سبز / قهوه ای
  • آبی / بنفش
  • سبز / آبی
  • سبز روشن / زرد
  • آبی / قهوه ای
  • سبز / خاکستری
  • سبز / سیاه

1001boom-combinations-preview-opt

۷. متغیر (Placeholder) های فرم

استفاده از یک متغیر (Placeholder) بدون تیتر، برچسب یا علامت می‌تواند مشکل ساز باشد، چرا که متن‌های درون این متغیر (Placeholder) ها از کنتراست کافی برخوردار نیستند. اپل نیز این مشکل را در فرم‌های خود دارد، به تصویر زیر دقت کنید:

1001boom-apple-preview-opt

افزایش کنتراست خیلی توصیه نمی‌شود، چرا که ممکن است تشخیص متن پیشفرض متغیر (Placeholder) و متن ورودی قابل تشخیص نباشد. بهتر است از عنوان و برچسب با کنتراست کافی استفاده کنیم، همانطور که سایت made.com از برچسب‌ها استفاده کرده است.

1001boom-label-preview-opt

***

برای خواندن ادامه نکات مربوط به طراحی تجربه کاربری در هزارویک بوم، با ما همراه باشید تا ۶ نکته دیگر و تعدادی ابزار کارآمد را به شما معرفی کنیم.

3

نظر بدهید

مطالب را هر روز در ایمیل خود دریافت کنید.

[انصراف]