ابزارها گرافیک گرافیک رابط کاربری

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

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

۸. دکمه‌های اصلی

اغلب اوقات برای نشان دادن کلیدهای اصلی (مانند تایید ثبت نام، پرداخت و …) از رنگ‌ها استفاده می‌کنیم. درست مثل سایت Argos (شکل پایین) که برای مشخص کردن دکمه ورود به سایت، از رنگ استفاده کرده.

1001boom-argos-preview-opt

به جای این کار، بهتر است از سایز، بولد کردن نوشته‌ها، آیکون، کنتراست و هر چیز دیگری که در چارچوب دستورالعمل برند شما قرار دارد و به شما کمک می‌کند استفاده کنید. مثلا سایت Kidly از سایز و رنگ و آیکون برای این کار استفاده کرده است.

1001boom-kidly-preview-opt

۹. پیام هشدار

پیغام خطا، هشدار و موفقیت اغلب به ترتیب با رنگ‌های قرمز، زرد و سبز نشان داده می‌شوند. بهتر است از متن‏‌هایی مانند «موفقیت» و «خطا» یا از آیکون‏‌های مرتبط برای انتقال پیام (در کنار استفاده از رنگ) استفاده کنیم.

1001boom-messaging-preview-opt

۱۰. فیلدهای ضروری فرم‌ها

اشاره به فیلد‏های ضروری با رنگ‌‏ها می‌تواند برای افراد مبتلا به کور رنگی مشکل ایجاد کند، چرا که امکان دارد بعضی از آنها تفاوت بین رنگ‌ها را متوجه نشوند. به مورد زیر دقت کنید:

1001boom-required-preview-opt

به جای استفاده (نادرست) از رنگ، می‌توانید از روش‎های زیر استفاده کنید:

  • نشاندار کردن فیلد‎ها با یک ستاره (*)
  • نوشتن «ضروری» در کنار برچسبِ فیلد
  • حذف کردن اطلاعات غیرضروری، البته تا جایی که ممکن است

۱۱. نمودارها

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

1001boom-graphs_achrom-preview-opt

1001boom-graphs_normal-preview-opt

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

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

۱۲. بزرگنمایی

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

متاسفانه قابلیت بزرگنمایی می‌تواند با استفاده از متاتگ Viewport غیر فعال شود که بسیار مشکل ساز است. برای مثال سایز نوشته می‌تواند (به نسبت کنتراست رنگ) خیلی کم باشد، اما بزرگنمایی، سایز نوشته را افزایش می‌دهد که باعث بهتر شدن خوانایی می‌شود. بنابراین قابلیت بزرگنمایی سایتتان را غیر فعال نکنید.

۱۳. سایز مناسب نوشته‌ها

مشابه نکته قبلی، مرورگر‌ها برای افزایش خوانایی صفحه امکان افزایش سایز نوشته‌ها را (به جای افزایش سایز کل صفحه) فراهم می‌کنند. به هر حال مرورگر‌ها وقتی که برای سایز نوشته از واحد‌هایی مثل px استفاده می‌کنیم، این قابلیت را غیر فعال می‌کنند. استفاده از واحدهایی مانند EM می‌تواند این مشکل را حل کند و از غیرفعال شدن این قابلیت برای مرورگر‌ها جلوگیری کند.

معرفی چند ابزار

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

۱. Check My Colours‌: اگر شما هم‌اکنون یک وبسایت دارید، لینک آن را در این سایت وارد کنید و متناسب با بازخوردی که به شما می‌دهد، تجربه کاربری سایتتان را اصلاح کنید.

۲. WebAim’s color contrast checker‌: دو رنگ انتخاب کنید و ببینید که آیا آن‌ها از دستور العمل دسترسی پذیری پیروی می‌کنند یا خیر.

۳. I Want to see like color blind‌: به شما کمک می‌کند تا سایتتان را از دید یک فرد مبتلا به کور رنگی مشاهده کنید!

۴. Color Oracle‌: یک شبیه ساز کور رنگی برای ویندوز، لینوکس و مک که به شما نشان می‌دهد افراد مبتلا به کور رنگی چگونه می‌بینند.

نتیجه گیری

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

 

3

نظر بدهید

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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

[انصراف]