Проверка интерфейса

Проверка интерфейса и визуальная приемка для команд

Flomaster.io помогает выстроить проверку интерфейса так, чтобы несколько ролей обсуждали один и тот же экран, а не пересказывали друг другу проблему в чатах. Замечание привязывается к конкретной точке интерфейса, к версии экрана и к треду обсуждения, поэтому контекст не теряется между дизайном, продактом, фронтендом и QA.

Здесь важен не поиск отличий между версиями и не обсуждение макета само по себе, а живая работа нескольких ролей с одним и тем же экраном. Когда всем нужно быстро договориться, что именно менять и почему.

Визуальная приемка интерфейсов для команд

Как это выглядит на практике

Дизайнер

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

Продакт и менеджер

Уточняют, что действительно важно для приемки, а что можно перенести в следующую итерацию.

Frontend и QA

Видят ту же точку на экране и обсуждают проблему без расшифровки чужих слов и скриншотов.

Где обычно ломается обсуждение интерфейса

  • Все говорят про разный экран. Один смотрит макет, другой живой сайт, третий старый скриншот из чата.
  • Смысл теряется между ролями. Замечание клиента или дизайнера доходит до разработчика уже в искаженном виде.
  • Решение не видно рядом с проблемой. Обсуждение уходит в сообщения, а экран остается отдельно.

Обычно в таком обсуждении всплывают три типа вопросов: UI и композиция, текст и смысл, а также поведение после реализации. То есть не только отступы и сетка, но и формулировки, состояния элементов и расхождения между ожидаемым и фактическим результатом.

Этот сценарий полезен, когда проблема не в том, что клиент оставляет правки, и не в том, что нужно сравнить две версии. Он нужен тогда, когда дизайн, продукт, разработка и QA должны обсуждать один и тот же интерфейс в одном визуальном контексте и быстро превращать это обсуждение в понятные замечания. В отличие от визуального тестирования, здесь акцент не на поиске отличий между версиями, а на совместном разборе экрана. А в отличие от согласования дизайна, здесь в центре уже не макет, а реальный интерфейс.

Что посмотреть дальше

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

Запустите визуальную приемку без ручной рутины

Откройте демо и посмотрите, как Flomaster помогает нескольким ролям обсуждать интерфейсы на одном экране и не терять контекст между итерациями.

Частые вопросы о визуальной приемке интерфейсов

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