Магазин согласует серое на большом мониторе: всё влезает, кнопка видна. Студия смотрит тот же файл на ноутбуке и ставит «ок».
Что именно проверить
Если у вас магазин, боится возиться с телефоном: «на большом же видно все блоки». Если у вас студия или услуги, стыдится смотреть серое в метро и открывает файл на ноутбуке в офисе. На столе кнопка «оплатить» рядом с ценой.
На пальце она под клавиатурой, когда гость вводит телефон. На планшете фильтр открывается и перекрывает список. «Ок» с одного экрана — «ок» чужой ширины.
В магазине оплаты или заявки на пальце — дотянуть до оплаты одной рукой. В студии — попасть в слот и отправить имя, не закрывая поле клавиатурой. Если серое смотрели только за столом, в бою магазин потеряет заказ в очереди, студия — заявку в такси.
Дизайнер не обязан придумывать, куда уехала кнопка: это пробел проекта.
Как это выглядит на практике
Палец: 320–390 точек, путь магазина 8–12 экранов, студии 5–8. Планшет: те же экраны, но фильтр и календарь ведут себя иначе — ещё 1–2 состояния. Стол: шапка и колонки не должны врать, что «на пальце и так ясно».
Три прохода — 40–70 минут, не «глянул на мониторе». Срок круга с тремя ширинами — 3–5 дней. Круг с одним столом — те же дни, плюс неделя после запуска на «кнопка уехала».
Починить оплаты или заявки на пальце после вёрстки — часто 25–60 тысяч: перенос кнопки, иное меню, иное поле под клавиатурой. На 40 карточках магазина фильтр на столе выглядит коротко, на пальце — простыня. На 8 услугах студии календарь на ноутбуке кликабелен, на пальце слот мелкий.
В прототипе кладут три пометки ширины на каждый спорный экран: шапка, фильтр, оформление, форма. «Адаптив» без этих пометок — слово в смете, не проверка гостя.
- Палец — главный проход. Стол не отменяет его.
- Планшет проверяют, если им реально пользуются, не «на всякий».
- Магазин: кнопка оплаты видна, когда открыта клавиатура.
- Студия: слот и отправка не прячутся под полем имени.
На чём считать результат
Не ставьте «ок» с одного окна браузера. Откройте ту же ссылку на телефоне, на планшете, если он в деле, и за столом. Где оплаты или заявки ломается — пробел ширины, не «дизайн потом сожмёт».
- Выпишите три ширины: палец, планшет, стол. Если планшета в системе заказов или оплат нет — так и напишите, не рисуйте третий «для красоты».
- Пройдите путь на пальце до письма. Запишите экраны, где кнопка уехала или поле закрыто клавиатурой.
- Повторите на столе. Если на столе путь короче на два экрана — в файле два разных маршрута, это спор.
- Запретите принимать прототип (схема экранов без красивых картинок) только со скрина монитора.
- В протокол «ок»: «пройдено на пальце и за столом», не «смотрели в офисе».
Что сделать дальше
Фраза магазина: «Серое принято на пальце и за столом, кнопка оплаты видна с клавиатурой». Фраза студии: «Серое принято на пальце, слот не под полем». Положите фразу рядом со ссылкой на клик.
Если партнёр ставит «ок» только с ноутбука, ширины снова не приняты. Остановитесь, когда тестовый гость на пальце доходит до письма без поворота телефона «чтобы увидеть кнопку». Не обещайте «адаптив в макете» вместо прохода.
Пока прохода на пальце нет, круг не закрыт.
- Выпишите три ширины: палец, планшет, стол. Если планшета в системе заказов или оплат нет — так и напишите, не рисуйте третий «для красоты».
- Пройдите путь на пальце до письма. Запишите экраны, где кнопка уехала или поле закрыто клавиатурой.
- Повторите на столе. Если на столе путь короче на два экрана — в файле два разных маршрута, это спор.
- Запретите принимать прототип только со скрина монитора.
- В протокол «ок»: «пройдено на пальце и за столом», не «смотрели в офисе».
Назад в раздел
