Это основные страницы сайта, которые представлены визуально. Ее легко нарисовать на небольшом листке бумаги, и она будет достаточно наглядной. Создать карту сайта можно не только для веб-ресурсов. Эти схемы используют в приложениях и везде, где нужно наглядно представить информацию.
Диаграмма потоков задач – это пути и операции, которые выбирает система или пользователь для работы с программой или сайтом. На первый взгляд она очень похожа на карту сайта. Это не так. Диаграмма потоков задач показывает все те действия, которые может сделать пользователь и пути их направления.
Инструментарий
У новичка в UX-проектировании небольшой выбор помощников:
- Adobe Illustrator
- HTML
- Blueprint CSS
- Open Office Draw
- Adobe InDesign
- Axure RP Pro
Что вам выбрать? У каждого проектировщика есть свой обожаемый инструмент. Вы можете остановиться на бесплатном варианте или купить хороший софт. Но иногда достаточно бумаги или карандаша. В интернете вы найдете шаблоны профессионалов, которые помогут вам в работе.
Элементы карты сайтов и диаграммы задач
Чтоб создать карту сайта, достаточно простого функционала графического редактора. Лучше всего использовать стандартные фигуры, понятные аудитории. Например, визуальную структуру для информационных архитектур, которую создал Гарретт Джесс Джеймс. Карта сайта здесь представлена простейшими картинками. Кажется, что нет ничего сложного, но все же следует пользоваться некоторыми правилами.
Страница сайта у Гарретт Джесс Джеймс – базовая единица взаимодействия. Самый простой способ изобразить ее – нарисовать прямоугольник.
Группа страниц
Это несколько элементов, чей контент схож. Например, обычные страницы блога. Их проектируют один раз, а в дальнейшем используют готовый шаблон.
Точка принятия решения
Этот элемент показывает пути, которые может выбрать пользователь, когда отвечает на определенные вопросы. Хороший пример – процедура заполнения регистрационной формы. Если все сделано правильно, пользователь попадает на домашнюю страницу. Сделана ошибка? Он возвращается в исходную точку.
Стрелки и соединители
Они показывают движение и переходы между группами страниц, условиями и страницами. Соединители используют там, где требуется определенное действие для перехода. Стрелки показывают переход к завершению задачи. Линии с нижней чертой применяют, когда перемещение необратимо. То есть на исходную страницу вернуться нельзя.
Условия
Их обозначают пунктиром. Встречаются на диаграммах потоков задач, на картах сайтов и в некоторых созданных документах. Она обозначает, что переход к странице зависит от события или действия.