В отличие от макетов с выверенной вёрсткой, пониманием расположения элементов, контента эскизы позволяют ускорить реализацию за счёт принятия небольших решений:
- Что должно быть на экране: какие данные важны для пользователя
- В зависимости от сложности манипуляций выбрать формат: отдельный экран, шторка, модальное окно или другой (особенно важно для мобильных устройств)
- Разместить базовые элементы: примерный контент, кнопки и др.
Быстро накиданный эскиз позволяет разработке приступить к работе раньше и реализовать основную функциональность, навигацию и другие важные элементы. Однозначный плюс, особенно для тех, кто знаком с проблемой
«макеты не готовы, разрабатывать не могу».
В дополнение к эскизу-наброску одного экрана мы создаём карту состояний. Это схематичное представление взаимодействия с конкретным экраном. В карте состояний учитываются следующие важные моменты, которые можно упустить при простой отрисовке макетов:
- Пустое состояние экрана: что показать и какие предоставить возможности для пользователя
- Состояние с малым количеством информации
- Состояние с большим количеством информации: как её умещать на экране, что скрывать и как сохранять внимание пользователя на важных вещах
- Обработка действий пользователя (нажатие на элемент, прокрутка экрана, жесты и прочие): позволяет увидеть движение между разными состояниями экрана, навигацию и в целом понять путь пользователя при работе с приложением.
Для создания эскизов и карты состояний как раз хорошо подходит маркерная доска. Но мы дополнительно используем приложение Mockup (для устройств Apple) — в нём есть и готовые подборки стандартных элементов устройств, и оптимальная свобода для рисования от руки.