Как мы запускали поддержку увеличенных шрифтов в приложениях Детского мира

Как выглядит процесс работы, когда инклюзивность не просто громкое слово в корпоративной презентации, а реальная задача? Продакт Валера Попов рассказал про этот профессиональный челлендж: как мы переделывали приложение, которым пользуются миллионы человек, чтобы оно стало удобным для людей с плохим зрением.

Для кого эта статья

Мы в Детмир Тех впервые занялись доступностью в цифровых продуктах. Никто из нас, — ни разработчики, ни дизайнеры, ни продакты, — раньше не работали над такими задачами. И мы решили поделиться опытом, как справлялись и что получилось.

Надеемся, что статья будет полезна всем IT-специалистам: менеджерам, дизайнерам, разработчикам, продактам. А если останутся вопросы — пишите в комментариях :)

Контекст, в котором мы начали работу

По общим оценкам, в мире примерно 15-20% пользователей телефонов с увеличенными шрифтами — например, люди с плохим зрением выставляют такие настройки в своём смартфоне. Это большая часть аудитории, которую нельзя игнорировать. В Детском мире есть слоган: «Счастливое детство доступно каждому». Поэтому особенно важно, чтобы цифровыми продуктами компании могли пользоваться все: ведь ими пользуются родители и бабушки с дедушками, для которых доступность критична. Приложение, которое не учитывает потребности таких пользователей, теряет доверие и лояльность, что негативно сказывается на бизнесе.

Ситуация на рынке

Сегодня инклюзивность становится всё более важной. Это гуманно и правильно. Мы как IT-профессионалы должны учитывать это в нашей работе. В будущем инклюзивность станет стандартом, и важно, чтобы мы были к этому готовы.

К сожалению, проработка доступности в IT-продуктах — всё ещё редкость. Даже крупные маркетплейсы, такие как Яндекс Маркет и Озон, не полностью адаптированы для увеличенных шрифтов. Мы надеемся, что наш пример вдохновит другие компании заняться этим вопросом. Инклюзивность — это не только про удобство, но и про уважение к пользователю.

Исходная проблема

В Android-приложении Детского мира шрифты увеличивались, но интерфейсы не были к этому готовы. Тексты не помещались в блоки, обрезались, интерфейс ломался. В iOS шрифты вообще не увеличивались, несмотря на настройки в ОС. Никто не учитывал это ни на этапе дизайна, ни в разработке, ни в тестировании. В результате пользователи с увеличенными шрифтами в ОС сталкивались с неудобствами и иногда не могли использовать приложение полноценно. Это создавало негативный опыт и снижало удовлетворённость наших клиентов.

Вот как выглядело наше приложение на смартфонах с увеличенными шрифтами:

У нас был план и мы его придерживались

Мы решили не переделывать всё сразу, а сосредоточились на самых важных экранах. А также сразу договорились добавлять поддержку увеличенных шрифтов во все новые фичи. Чтобы починив 10 экранов, не появилось ещё 20 новых, где снова нужно всё исправлять.

Если описать по пунктам, то наш план был таким:

1. Чиним самые важные экраны. Выделили ключевые сценарии использования приложения и так определили, какие экраны требуют первоочередного внимания. Например, листинг, корзина и оплата.
2. Сразу внедряем новые подходы в новых фичах. Разработали гайдлайны для дизайнеров и разработчиков, чтобы они знали, как учитывать увеличенные шрифты в своей работе.
3. Регулярно синхронизируемся с дизайном, разработкой и тестированием. Встречи и обсуждения помогали нам убедиться, что все команды находятся на одной волне и понимают важность задачи.

Работа с компонентами

Мы уделили особое внимание компонентам (то есть повторно используемым блокам: кнопкам, полям ввода, карточкам товара и т.д.) Если компонент поддерживает увеличенные шрифты, это начинает работать на всех экранах, где он используется. Так мы внесли полезные изменения сравнительно быстро и надолго.

Общие подходы к дизайну

Мы не просто чинили сломанные блоки, а создавали общие подходы к дизайну типичных блоков. Так появился гайд для дизайнеров, чтобы им было проще применять эти подходы в работе, не задумываясь о каждом отдельном случае. Это позволило переиспользовать эти подходы в разных местах и новых фичах.

Вот немного скриншотов из гайда:

Вовлечение лидов дизайна и разработки

Когда у нас с дизайнерами появились общие подходы, мы привлекли лидов разработки. Они помогли донести до своих команд гайды по поддержке увеличенных шрифтов в вёрстке. Лиды дизайна и разработки играли ключевую роль в обучении своих команд и в контроле за соблюдением новых стандартов. Их поддержка и участие сделали процесс перехода более плавным и эффективным.

Челленджи, с которыми мы столкнулись

Изменение рабочих процессов

Раньше в компании никто не задумывался о поддержке увеличенных шрифтов. Теперь все, — дизайн, разработка, тестирование, — знают, что это нужное дело. Люди боятся больших изменений, поэтому нужно было объяснить, что это важно и не так сложно, как кажется. Мы проводили встречи и воркшопы, чтобы подробно рассказать о новом подходе и показать, как его легко включить в повседневную работу. Постепенное внедрение новых стандартов позволило избежать сопротивления.

Сроки и компромиссы

Даже с фокусом на самых важных экранах, проект занял месяцы работы. Нужно было трезво оценивать, что именно улучшать, а что нет. Слишком легко увлечься и начать делать всё сразу. Но важно было помнить, что каждое улучшение — это уже большой шаг вперёд. Мы часто обсуждали приоритеты и решали, что именно стоит исправить в первую очередь, а что можно отложить. Это помогло нам придерживаться сроков и не перегружать команды.

Раннее согласование и стандартизация

Прежде, чем приступить к поддержке увеличенных шрифтов, мы получили принципиальное согласие команд дизайна и разработки, что будем реализовывать этот проект. И что впредь хотим, чтобы это стало нашим стандартом. Раннее согласование сделало процесс более предсказуемым и управляемым. А созданные базовые гайды мы дорабатывали по мере того, как копили опыт и получали обратную связь от коллег.

Поддержание фокуса и мотивации

Важно было каждые пару недель напоминать команде о проекте и показывать результаты — это помогало поддерживать мотивацию всех участников. Плюс это позволило всем понять, что поддержка увеличенных шрифтов — новая реальность, а не просто проект, который закончится и можно будет про него забыть.

По итогам нам важно было убедиться, что все получили гайды и знают, как учитывать увеличенные шрифты в своей работе. Мы также организовывали встречи для обсуждения возникших трудностей и поиска лучших решений.

Достижения

Вся работа заняла меньше года — и это в команде с всего двумя разработчиками (iOS и Android).

Мы не поругались с дизайнерами и разработкой, несмотря на то, что де-факто предложили им усложнить свою работу.

Мы придумали подход, который позволяет поддерживать увеличенные шрифты без необходимости создавать отдельные «увеличенные» макеты для каждой новой фичи. Это экономит время и делает процесс разработки проще.

Статистика

После релиза мы начали отслеживать использование увеличенных шрифтов. И увидели, что на Android более 25% запусков приложения происходят с ними. Приятно видеть подтверждение тому, что наша работа была важной и нужной.

Слева — как на смартфонах с увеличенными шрифтами пользователи видели наше приложение «до», а справа — как стали видеть «после»:

Короткое резюме

Мы поддержали увеличенные шрифты на самых важных экранах аппов Детского мира.

Нам помогли: чёткий план, слаженная работа команд, фокус на компонентах, раннее согласование и постоянная коммуникация.

Мы столкнулись с множеством челленджей, включая: изменение рабочих процессов, управление сроками и приоритетами, раннюю стандартизацию и необходимость поддерживать мотивацию команды. Но всё смогли преодолеть.

Признаемся, что несмотря на всю проделанную работу с гайдлайнами и изменением процессов, у нас всё ещё периодически релизятся фичи и экраны с недоработанной поддержкой увеличенных шрифтов. Это подтверждает масштабность и сложность задачи. Даже с таким тщательным подходом не всё проходит идеально.

Надеемся, что наш опыт вдохновит другие команды на внедрение таких же практик в своих продуктах. Делать мир доступнее — это важно.