طراحی دیوار برای همه

در سال گذشته، ما در تیم طراحی و توسعه‌ی دیوار اصولِ طراحیِ مقیاس‌پذیر (scalable) و دسترس‌پذیر (accessible) را به‌کار گرفتیم. در این یادداشت، از روندی نوشتم که برای بهبود طراحی و دسترس‌پذیری برنامه‌ی اندرویدِ دیوار (نسخه‌ی ۱۱) طی کرده‌ایم.

طراحی و دسترس‌پذیری

طراحان همیشه سعی می‌کنند هزینه و فایده‌ی فرصت‌های مختلف را بسنجند و تصمیمی آگاهانه بگیرند. اما گاهی سوگیری‌ها جلوی تشخیص مسئله و تصمیمِ درست را می‌گیرد؛ ممکن است دانشِ آدم‌ها را اشتباه تخمین بزنند یا برای توانایی دیگران، حد نُرمال یا متوسطی فرض کرده و شروع به حل مسئله با پیش‌فرض‌های نادرستی کنند. اما در دنیای واقعی «توانایی متوسط» وجود ندارد. در اینتراکشن انسان–کامپیوتر (HCI)، کم‌توانی فقط محصولِ محدودیت‌های فردی نیست، بلکه ناشی از محدودیت‌هایی است که کامپیوتر به انسان تحمیل می‌کند.

کم‌توانی انواع و گستره‌ی متفاوتی دارد. بیش از یک میلیارد نفر گونه‌ای از کم‌توانی دارند. ۹ درصد از جامعه، به اختلالات بینایی (رنگ‌بینی، کم‌بینی و نابینایی) مبتلا هستند. در ایران دست‌کم ۶۰۰ هزار کم‌بینا و ۱۵۰ هزار نابینا زندگی می‌کنند.

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

طراحی مقیاس‌پذیر

بیش از ۱۹ میلیون نفر از دیوار استفاده می‌کنند که نیازها و توانایی‌های متنوعی دارند. برای آن‌که گوناگونی‌ها را بهتر بشناسیم و دید بهتری نسبت به محدودیت‌های فردی داشته باشیم، ابتدا به پژوهش و مصاحبه پرداختیم؛ اما پیش از شروع طراحی و برای ایجاد تغییرات گسترده ولی کم‌هزینه در محصولی همچون دیوار، به زیرساختی مقیاس‌پذیر و زبانی مشترک میانِ تیم طراحی و مهندسی نیاز داشتیم. به‌این ترتیب می‌توانستیم به‌جای تغییرات مقطعی و کوتاه‌مدت، از دسترس‌پذیری تمامِ اجزای سیستم مطمئن باشیم.

بنابراین، سال گذشته شروع به ساختِ سیستمِ مقیاس‌پذیری برای طراحی و توسعه‌ی دیوار کردیم. نام دیزاین‌سیستمِ دیوار را «سنّت» گذاشتیم. سنّت، مجموعه‌ای از اصول طراحی و پیاده‌سازی، و زبانِ مشترکِ اعضای تیم است. ما برنامه‌ی اندروید دیوار را به اجزای سازنده‌اش – مشخصه‌ها، عناصر و کامپوننت‌ها – تجزیه کردیم و هر جزء را طبق اصول و راهنمای طراحی اینتراکشن (مانند Material و HIG) و با رویکردی شبیه به طراحی اتمی، بازبینی و بازطراحی کردیم. سپس اجزای طراحی‌شده را در کتابخانه‌ای توسعه دادیم.

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

بهبودِ دسترس‌پذیری

با مطالعه و رعایتِ اصولِ دسترس‌پذیری در طراحی و توسعه‌ی دیزاین‌سیستمِ دیوار، سعی کردیم قدم کوچکی برداریم و استفاده از برنامه‌ی دیوار را برای جامعه‌ی بزرگتری – فارغ از حدودِ توانایی‌هایشان – فراهم کنیم. مهم‌ترین کارهایی که انجام دادیم:

• با هدف افزایش قابلیت دستیابی (reachability)، اجزای اینتراکتیو (interactive) اصلی مانند دکمه‌ها را طوری جایگذاری کردیم که استفاده از گوشی با یک دست راحت‌تر باشد.
• اندازه‌ی اجزای اینتراکتیو را به‌حدی تعیین کردیم که لمس و انتخابِ آن‌ها برای افرادی که لرزشِ دست دارند، آسان‌تر باشد.
• با رعایت اصول نویسه‌نگاری و صفحه‌آرایی، از فونتِ مقیاس‌پذیر استفاده کردیم تا افراد بتوانند متن را در ابعادی متناسب با اندازه‌ی فونتِ گوشی‌شان بخوانند.
• با بازبینی همه‌ی نماهای دیوار، مطمئن شدیم طیف گسترده‌ای از افراد مبتلا به رنگ‌بینی در استفاده از برنامه مشکلی نداشته باشند. از Stark برای این کار کمک گرفتیم.
• تباین (contrast) رنگِ نوشته‌های دیوار را مطابق با استاندارد سطح AA تغییر دادیم. چون ابزارهای موجود امکان مقایسه‌ی همزمان چند رنگ یا امکانِ تعریف رنگ با شفافیت را نداشتند، خودمان ابزاری را توسعه دادیم.
• اجزای اینتراکتیو و اطلاعاتی (informational) دیوار برچسب‌گذاری و با ابزارهای تبدیل متن به گفتار (Talkback + eSpeak) هماهنگ کردیم تا نابینایان بتوانند از دیوار استفاده کنند.
• برای کاربران حساس به نور، پروژه‌ی «شامگاه» را طراحی و پیاده‌سازی کردیم که در ادامه توضیح خواهم داد.

از این منابع کمک زیادی گرفتیم:

• Mismatch: How Inclusion Shapes Design, Kate Holmes (لینک)
• Inclusive Design Toolkit, Microsoft (لینک)
• Accessibility - Material Design, Google (لینک)
• Web Content Accessibility Guidelines (لینک)
• مقاله‌ها: اثر سن بر طراحی راه‌بری، اندازه‌ی قلم، اجزای اینتراکتیو و آیکون

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

شامگاه

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

برای کاهش این اثرات، در هکاتونِ اسفندماه ۹۷ کافه‌بازار تصمیم گرفتیم حالت شب (night mode) – با نام پروژه‌ی شامگاه – را به دیوار اضافه کنیم. همزمان با استاندارد کردنِ تباین رنگ‌ها در اجزای دیزاین‌سیستم، باید رنگ، شکل و جلوه‌ها را برای هر دو حالتِ تیره و روشن توسعه می‌دادیم. همچنین سیستمی برای نگاشت (mapping) رنگ‌ها نیاز داشتیم تا امکان تغییر کُدِ هر رنگ بسته به کاربرد یا محیط آن وجود داشته باشد.

علاوه بر مشکلات بینایی، مصرف بهینه‌ی باتری، کاهش عوارض نور آبیِ صفحه‌ی نمایش و ترجیح جمعی از مردم، حالت شب را به‌راحتی توجیه می‌کند. حدس می‌زنیم برای کاربران دیوار که در ساعاتِ شب بهره‌ی بیشتری از آن می‌برند، این ویژگی حتا مهم‌تر باشد.

اگر این‌جور مسائل برای شما هم جذاب است و می‌تونید به تیم ما کمک کنید، سری به این‌جا بزنید. اگر هم پیشنهادی برای بهبودِ دیزاینِ دیوار دارید به ux@divar.ir ایمیل بفرستید.