حسین شرفی
حسین شرفی
خواندن ۲ دقیقه·۲ ماه پیش

طراحی رابط کاربری برای افراد کوررنگ (دسترسی پذیری)

کوررنگی و راهکارهای طراحی رابط کاربری برای آن
کوررنگی و راهکارهای طراحی رابط کاربری برای آن

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

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

مدلهای گوناگون کوررنگی
مدلهای گوناگون کوررنگی

وظیفه طراح تعامل چیه؟ اینکه تعامل کاربر کوررنگ با سیستم رو برقرار کنه. اما چگونه؟

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

رابط کاربری بهینه شده برای کوررنگی
رابط کاربری بهینه شده برای کوررنگی


توجه کنید که ما از رنگها در طراحی استفاده میکنیم. بالاخره ۹۲ درصد کاربرانمون سالم هستند. اما برای انتقال مفاهیم و اطلاعات به کاربر، تنها متکی به رنگ نیستیم. مثلا در راهنمای کنترل تلویزیون، نباید بنویسه برای فلان کار، دکمه قرمز را فشار دهید. باید بگه: "دکمه B (قرمز) را فشار دهید"

یک عکس از دیدگاه فردی که دچار کوررنگی است
یک عکس از دیدگاه فردی که دچار کوررنگی است

بازی Diamond.Diaries.Saga برای دسترس_پذیری این بازی برای افراد کوررنگ، توپ‌های بازی را علاوه بر رنگ، با یک آیکون از هم متمایز کرده است تا افرادی که رنگها را تشخیص نمیدهند هم بتوانند از انجام این بازی لذت ببرند:

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

نکته بعدی: کنتراست رو بالا نگه دارید بالا بودن کنتراست هم به افراد کوررنگ و هم به افرادی که چشم ضعیف دارند کمک میکنه.

دیزاینتون را بصورت سیاه وسفید در بیارید. یعنی دیزاین نهایی رو با فتوشاپ سیاه و سفید کنید. نه اینکه کلا از اول بصورت سیاه و سفید طراحیش کنید. (افزونه های فیگما هم برای اینکار هست) تا مطمئن بشید که بدون داشتن رنگ، همچنان interaction بین کاربر و سیتم حفظ میشه و مفاهیم منتقل میشن:

طرحی که سیاه و سفید شده
طرحی که سیاه و سفید شده

از سایتهای تست UI برای کوررنگی استفاده کنید: کافیه طرحتون را بصورت عکس بدید به این سایت تا بهتون نشان بده که هر فرد کوررنگ اون رو چگونه می بینه و چه مشکلاتی ممکنه برای افراد ایجاد کنه.

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



رابط کاربریکوررنگیطراحی محصولطراحی تجربه کاربری
مهندس نرم افزار، طراح محصول و استراتژیست تجربه کاربری
شاید از این پست‌ها خوشتان بیاید