Уточните цель до загрузки макета
В исходном брифе для карточки настольной лампы сказано, что человек должен понять, зачем ему два режима света, и открыть характеристики. Внутри страницы уже есть раздел с размерами и фото. Известно, что над карточкой будут другие элементы каталога, а на телефоне посетитель увидит её после первого скролла. Передайте эти ограничения модели. Если сказать только «сделай красивее», ответ легко уйдёт в подбор новых цветов или в общие слова про визуальную иерархию.
Попросите вернуть три группы вопросов: что известно из брифа, каких данных не хватает и что можно проверить по изображению. К примеру, наличие заголовка и кнопки видно на скриншоте. Процент людей, которые поймут назначение лампы, по одному скриншоту оценить нельзя. Уточните у заказчика, какое действие главное, какие характеристики можно назвать в тексте и есть ли ограничения на цвет и фото. Уберите из файлов имена клиентов, неопубликованные цены и внутренние комментарии, если передача данных не согласована.
Сравните версии по наблюдаемым признакам
Экспортируйте два макета при одинаковом масштабе и назовите их A и B. Дайте модели отдельно скопированный текст и список обязательных элементов. Запрос может звучать так. «Проверь, что на каждом варианте есть название, два режима и ссылка на характеристики. Для каждого замечания укажи версию, место и видимый признак. Отдельно перечисли то, что не можешь определить». Чем конкретнее критерий, тем легче вносить правки по одному пункту.
В учебном макете А кнопка называлась «Подробнее», а в Б — «Смотреть характеристики». Второй вариант точнее описывает результат перехода, если ссылка действительно ведёт в раздел характеристик. Для обычного текста мы сравнили два цвета на белом фоне. У #777777 получилось отношение контраста около 4,48:1, у #595959 — около 7,00:1. Для обычного текста минимум WCAG AA составляет 4,5:1, поэтому округлённое до одного знака 4,5 недостаточно для принятия первого значения. Расчёт сделан по исходным цветам, взятым из макета. Порог и метод расчёта W3C.
Проверьте правки в редакторе и на устройстве
Откройте макет в редакторе и сверяйте текст по слоям. Снимок экрана подходит для первого взгляда, но не даёт точного значения токена, размера шрифта или области нажатия. Модель может пропустить мелкую надпись, неправильно определить координату или спутать близкие цвета. Если она указала на низкий контраст, возьмите цвета из редактора и пересчитайте их. Если она нашла неверную формулировку, сверьте текст с исходным брифом и страницей, на которую ведёт карточка. Ограничения анализа изображений в ChatGPT.
В журнале правок держите по одной строке на наблюдение. Для нашего примера это «в А кнопка не называет назначение» и «в А цвет текста ниже порога». После правок проверьте, что новый текст помещается в мобильную версию и ссылку можно активировать с клавиатуры. Если замечание нельзя подтвердить, превратите его в вопрос для проверки с коллегой или пользователем. Такой подход помогает превратить размытый отзыв о макете в перечень действий с понятной приёмкой.