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