Карта навигации
Часто начинающие дизайнеры вместо того чтобы рассматривать страницы сайта, или экраны мобильного приложения, в одной связке, как целостный сценарий, рисуют набор картинок и потом кидают его клиенту и разработчикам. Это приводит к двум основным проблемам:
- Плохо видна связь между экранами и можно упустить много важных деталей.
- Приходится потом тратить много времени на объяснения клиенту и разработчикам как это все работает.
В таких случаях помогает инструмент который я называю Карта навигации (по-буржуйски User flow). Конечно, можно запилить крутой интерактивный прототип который можно протестировать сразу на устройстве, но он не позволяет увидеть сразу общую логику работы и пройтись по основным сценариям. Прийдется долго-долго клацать, особенно если это мобильное приложение, а потом все равно нужно рисовать схему…
Карта навигации составляется когда уже есть четкое понимание общей логики, проработаны все основные экраны в виде прототипа. Я делаю карты двух видов, в зависимости от ситуации: общая карта и карта по сценариям. Их так же можно комбинировать, все зависит от сложности проекта.
Общая карта
Такая карта показывает как общую логику так связи всех экранов, используется когда проект не сильно большой и можно уместить все на одном условном листе.
Повторюсь, показываются все экраны и все связи чтобы любому члену команды была понятна логика работы и связи всех экранов, чтобы потом не доставали вопросами.
Карта по сценариям
Такая карта используется когда проект большой и сложный, в нем много-много-много экранов и много-много-много сценариев. В основном это характерно для мобильных приложений у которых нет четкой структуры а одни и те же экраны могут встречаться в разных сценариях.
Инструменты
Сначала я использовал Adobe Illustrator в котором создавал детализированный прототип основных экранов, потом сохранял все экраны в отдельные джипеги и собирал карту в отдельном документы. Это очень удобно потому, что когда вносишь изменения в в прототипе и потом сохраняешь этот экран Illustrator автоматически обновляет файлы в карте.
Сейчас я использую Sketch и на момент написания статьи я думал, что в нем нельзя апдейтить растровую графику. Ниже в комментарии указан плагин с помощью которого можно обойти это ограничение. И еще, для тех кто еще не знаком с этим инструментом вот тут много всего по Sketch.
Еще можно использовать Axure RP по такой же схеме как с Иллюстратором, только прийдется делать руками скриншоты страниц и собирать в отдельном доке, в том же Illustrator или Sketch. В общем, для создания карты навигации лучше использовать тот же инструмент что и для разработки прототипа.
Советы
1. Используй хорошо проработанный прототип, подписывай все экраны и добавляй комментарии которые помогут лучше понять логику всем участникам команды (менеджерам и программистам).
2. Если сценариев много, и они сложные, лучше их объединять в отдельные блоки, или размещать на отдельных листах (если потом документ со сценариями будет сохраняться как PDF).
3. Карту можно делать комбинированной (все экраны плюс основной сценарий) и отдельно показывать экраны с более детальным описанием взаимодействия.
4. Карту лучше составлять параллельно с разработкой прототипа, то есть сразу выкладывать экраны в сценарии, тогда сразу видны все косяки и недоработки. В этом отношении лучше использовать софт в котором можно отрисованные экраны составлять вместе и объединять в сценарии (в Illustrator и Sketch для этого есть артборды) или использовать другой инструмент, например InVision (совсем недавно я делал прототип в Sketch и создавал параллельно интерактивный прототип в InVision, что позволяло мне тестировать его и вносить правки).
Профиль автора на LinkedIn
Сайт проекта ux-clan.org
UPD. Важный коммент от Leonid Nazarov:
Растровые картинки в скетче можно обновлять через несколько плагинов, например https://github.com/frankko/Place-Linked-Bitmap. Если не менять название файла, то при изменении, он будет обновляться автоматически. На днях вышло большое обновление плагина UserFlows и теперь он стал (или претендует на это) удобным инструментом для создания карт без дополнительных плясок https://abynim.github.io/UserFlows/
Фундаментальный онлайн-курс по UX Design и Product Design, который помогает освоить ключевые методы и инструменты проектирования сайтов, веб-сервисов и мобильных приложений
Приходи на онлайн-курс, который помогает изучить методику и прямо во время обучения сделать проект для портфолио. Зписывайся на курс по ссылке 👉 https://hyperschool-digital-product-design.webflow.io/
