Ошибки и особенности AI в интерфейсах

После генерации страницы я проверяю, как работают поля, списки, прокрутка и состояния. На скриншоте часть ошибок незаметна: они появляются при клике, смене месяца или открытии страницы на телефоне.

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

1. Рамка поля больше зоны ввода

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

2. Выпадающий список выбивается из стиля

Откройте список. Закрытое поле может соответствовать дизайну, а меню — целиком оформляться браузером. Отдельно проверьте отступ стрелки от правого края и расстояние до длинного названия. У списка в стиле сервиса должны работать касание, клавиатура и фокус. Системный выбор на телефоне может быть осознанным решением продукта.

3. Календарь остаётся браузерным

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

4. Выбор времени оформлен отдельно

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

5. Календарь скачет при смене месяца

У месяцев разное число недель. Если высота панели зависит от числа строк, при выравнивании по центру перемещаются заголовок, стрелки и кнопка подтверждения. Переключите в примере месяцы с четырьмя, пятью и шестью неделями и сравните положение кнопок.

6. Иконки набраны символами

Знаки вроде стрелки, крестика или меню могут оказаться текстом из шрифта. Тогда их пропорции и толщина зависят от шрифтового окружения. Сравните их с SVG из одного набора. У кнопки без подписи также должно быть доступное название.

7. Предлог остался в конце строки

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

8. Скроллбар отступает от края окна

Прокрутите содержимое попапа до конца. Если внутренний отступ применён ко всей области прокрутки, полоса уходит от края вместе с текстом. У исправленного варианта текст сохраняет отступы, а скроллбар находится у предусмотренного края панели. В некоторых ОС полоса видна только во время прокрутки.

9. Слайдер обрезается раньше края

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

10. Акцентная полоса выглядит случайно обрезанной

Толстая линия на скруглённой карточке может сужаться или обрываться на углу. Посмотрите на стык при увеличении. Такой приём бывает намеренным; ошибка возникает, когда геометрия не соответствует макету. В примере показан вариант с отдельным маркером.

11. Текст ничего не объясняет

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

12. Выравнивание появляется только при hover

У прозрачной кнопки может быть невидимый внутренний отступ. Текст выглядит сдвинутым относительно соседних элементов, пока при наведении не появится фон. Сравните исходное состояние, hover, focus и active. Во всех состояниях содержимое должно оставаться на своей линии, а размер контрола — сохраняться.

13. Hover мешает на телефоне

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

14. Документ открывается вместо текущей страницы

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

Как пользоваться промптами

Откройте страницу примеров, найдите нужный блок и скопируйте промпт в AI-⁠инструмент с открытым проектом. Кнопка «Скопировать промпт для всех 14 пунктов» собирает задание для проверки всей подборки. Все промпты обращаются к текущему открытому проекту.

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