Может ли каждый пользоваться вашим приложением, созданным с помощью ИИ? Простое руководство по доступности

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

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

Почему макет моего приложения ломается, когда кто-то увеличивает масштаб?

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

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

Это самая распространённая поломка доступности в приложениях, созданных ИИ, и она незаметна, пока кто-то не увеличит масштаб. Попросите свой билдер: «Убедись, что макет по-прежнему работает при увеличении текста до 200%. Ничего не должно наезжать друг на друга или обрезаться». Потом проверьте сами: на телефоне поставьте самый крупный системный размер шрифта и откройте приложение. Если оно разваливается — вот вам первое, что нужно исправить.

Почему в приложении нельзя показывать статус только цветом?

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

Фрилансер сделал трекер счетов, где статус показывался исключительно цветом — зелёная точка, красная точка. Один из его клиентов, у которого как раз была красно-зелёная дальтония, продолжал оплачивать уже оплаченные счета, потому что две точки выглядели для него одинаково. Информация была на месте. Просто не для него.

Решение — это привычка, а не функция: никогда не полагайтесь на цвет как единственный способ что-то сообщить. Добавляйте рядом слово, иконку или форму. «Просрочено» рядом с красным. Галочка рядом с зелёным. Звёздочка и слово «обязательно», а не просто красная обводка. Цвет может остаться — просто он не должен нести сообщение в одиночку.

Почему программы чтения с экрана просто говорят «кнопка» вместо названия?

Потому что у кнопки-иконки без подписи — мусорной корзины, карандаша, лупы без слов — нет текста, который может озвучить программа чтения с экрана (это ПО, которым пользуются незрячие и слабовидящие люди, чтобы экран читался вслух), и она произносит буквально «кнопка». Не «удалить». Не «редактировать». Просто «кнопка».

Билдеры на базе ИИ любят аккуратные кнопки-иконки — они выглядят современно. Но представьте, что пользуетесь приложением, где каждый элемент управления называется «кнопка» и вам приходится гадать. Вам не нужно добавлять видимый текст к каждой иконке — нужно, чтобы у каждого элемента управления было название под капотом, пусть даже невидимое, которое сможет озвучить программа чтения с экрана. Попросите свой билдер: «Дай каждой кнопке-иконке доступное название — иконка корзины должна озвучиваться как “Удалить”, иконка карандаша — как “Редактировать”». Это небольшое изменение, но именно оно определяет, сможет ли незрячий пользователь ориентироваться в приложении или наткнётся на стену из безымянных кнопок.

Какого размера должны быть зоны нажатия в мобильном приложении?

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

Понаблюдайте, как кто-то пользуется вашим приложением одной рукой в автобусе. Большие пальцы широкие и неточные, автобус трясёт, а ваш крестик закрытия — это 16-пиксельная точка в углу. Человек промахивается дважды, один раз попадает по тому, что находится под ней, и сдаётся. Маленькие, тесно расположенные зоны нажатия — это проблема доступности, а не просто неудобство: тяжелее всего приходится людям с тремором, крупными пальцами или в движущейся среде. Попросите свой билдер: «Сделай зоны нажатия минимум 44 пикселя и добавь между ними отступы, чтобы люди не попадали не туда». Потом проверьте сами: откройте приложение на телефоне и попробуйте выполнить основное действие одной рукой на ходу. Если вы промахиваетесь — промахнутся и все остальные.

Как проверить доступность приложения за пять минут?

Большую часть проблем можно найти самостоятельно, без всяких инструментов, с помощью трёх быстрых проверок на экране, которым пользуются чаще всего:

1. Увеличьте масштаб. Поставьте самый крупный размер текста на телефоне или в браузере и откройте главный экран. Что-нибудь наезжает друг на друга, пропадает или обрезается?
2. Уберите цвет. Посмотрите на все места в приложении, где цвет что-то означает — статус, ошибки, обязательные поля. Если представить всё это в оттенках серого, понятно ли по-прежнему, что происходит? Если нет — добавьте слово или иконку.
3. Включите программу чтения с экрана на две минуты. И на iPhone (VoiceOver), и на Android (TalkBack) она встроена. Включите её, закройте глаза и попробуйте сделать то, ради чего создано ваше приложение. Вы сразу услышите, у каких кнопок нет названия.

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

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