kazminaviktoriya1
Перейти в профиль
Выйти из профиля
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42"><rect fill-opacity="0"/></svg>)
Добавить аккаунт
Карта сайта
В этом уроке вы продолжите изучать организацию пользовательского интерфейса (UI). Вы узнаете, что такое карта сайта, как её составлять и чем она отличается от диаграммы структуры интерфейса, которую вы рассмотрели в предыдущем уроке.
Что такое карта сайта
Открывая вкладки в браузере, вы наверняка замечали на веб-страницах раздел под названием «Карта сайта». Обычно там располагается иерархический список страниц, размещённых на этом ресурсе. Такая структура помогает пользователям сориентироваться и найти нужную информацию — недаром она зовётся картой!
Другими словами, карта сайта (site map) — это структурная диаграмма, графическое представление того, как организована информация в пользовательском интерфейсе. Несмотря на то что диаграмма называется картой сайта, она относится к любому пользовательскому интерфейсу и используется для выстраивания его информационной архитектуры.
Кто составляет карту
Карта сайта появляется на этапе проектирования ПО — после построения диаграммы потоков данных (DFD) и диаграммы структуры интерфейса (ISD). Карту составляют системные аналитики и дизайнеры интерфейсов и в дальнейшем используют её для создания прототипов ПО. А заинтересованным лицам карта помогает понять, какая информация будет отображаться в UI и как она будет организована.
Системный аналитик изучает DFD и ISD, продумывает, какие экраны и с какой информацией должны показываться пользователю в интерфейсе, и обсуждает это с командой разработки. Вместе они перебирают сценарии использования ПО и выстраивают оптимальный порядок экранов: представляют себя на месте разных групп пользователей, чтобы максимально упросить для каждой из них поиск нужной информации.
Как выглядит карта
Итак, карта сайта — это диаграмма. Но общепринятой нотации для оформления карты нет, каждая команда выбирает удобный для неё формат.
Карту сайта составляют в виде:
- иерархического списка,
- диаграммы связи (или mind map — ментальной карты),
- диаграммы иерархии.
Как построить карту сайта
Разберём на примере веб-приложения для заказа такси создание карты в виде диаграммы связей, или mind map. Построить карту можно за три шага.
Шаг 1. Определить домашний экран
Сначала нужно установить точку старта — место, откуда пользователь будет перемещаться в другие разделы веб-приложения. Поэтому в центре карты всегда находится домашняя страница — по-другому её называют «главная» или «стартовая».
Как системный аналитик вы должны убедиться, что с домашней страницей связаны все основные экраны сайта, куда пользователь захочет перейти. Что конкретно будет на домашней странице, дизайнер решит позже.
Шаг 2. Определить основные экраны
После этого нужно, собственно, выделить основные экраны сайта, на которые пользователь сможет перейти с домашней страницы.
Лучше сгруппировать похожие по смыслу элементы в более крупные категории — это и будут экраны. Так проще организовать информацию в ПО и выстроить понятную для пользователя навигацию: с какой страницы он перешёл, где сейчас находится и куда сможет перейти дальше.
Чтобы организовать информацию в веб-приложении такси, выделим в качестве основных экранов те пункты меню, которые были в диаграмме структуры интерфейса:
- Данные пассажира.
- Поездки.
- Запрос на поездку.
В диаграмме структуры интерфейса выделялась ещё страница «Отчёты пассажира». Но на карте сайта не будем делать её основным экраном, а оставим переход на неё с экрана «Поездки»: пользователю проще сначала посмотреть информацию о поездке, а потом сформировать о ней отчёт. В диаграмме структуры интерфейса эти блоки тоже соединены.
В качестве основных экранов стоит выделить и те, к которым пользователю важно иметь быстрый доступ. В веб-приложении такси такими экранами будут:
- Служба поддержки.
- Информация.
Шаг 3. Определить подкатегории
Наконец, нужно выделить экраны для подкатегорий, которые раскрывают информацию каждого основного экрана.
Добавим на карту веб-приложения такси следующие экраны:
- В категории «Запрос на поездку» — экраны для заказа такси по двум тарифам: «Эконом» и «Бизнес», где пассажиру можно предложить больше опций.
- В категории «Информация» — экраны для просмотра тарифов и сведений о компании.
- В категории «Служба поддержки» — экраны для звонка и письменного обращения в службу поддержки.
- В категории «Поездки» — экраны для отчёта о поездке и просмотре информации о водителе.
В категории «Данные пассажира» не будем выделять подкатегорий. Можно не раскрывать основной экран, если этого не требуется.
Чем карта сайта отличается от диаграммы структуры интерфейса
Теперь вы умеете строить диаграммы структуры интерфейса и карты сайта. На первый взгляд, между ними нет разницы, но это не так. У них разное назначение:
- Диаграмма структуры интерфейса отображает процессы внутри ПО. Она показывает, из каких экранов состоит интерфейс для определённого процесса и какие действия будут доступны пользователю на каждом экране.
- Карта сайта отображает структуру информации и упрощает навигацию пользователя по приложению. Она показывает, как именно страницы связаны между собой и как пользователь может переходить с одной на другую.
При этом карта сайта и диаграмма структуры интерфейса отображают одни и те же структурные единицы приложения. Те пункты меню, которые вы добавляете в диаграмму структуры интерфейса, нужно отобразить и на карте сайта. Каждый из этих пунктов — основной экран, который надо соединить с домашней страницей.
Допустим, вам нужно объяснить заинтересованным лицам, в чём разница между диаграммой структуры интерфейса и картой сайта. Определите, какие утверждения описывают карту сайта, а какие — диаграмму структуры интерфейса.
Отображает связь экранов пользовательского интерфейса с процессами
Диаграмма структуры интерфейса
Экраны и способы взаимодействия пользователя с интерфейсом отображаются в диаграмме структуры интерфейса.
Помогает организовать контент
Карта сайта
На карте сайта отображается структура будущего пользовательского интерфейса, что помогает в организации контента.
Содержит номера процессов из диаграммы потоков данных
Диаграмма структуры интерфейса
Диаграмма потоков данных лежит в основе диаграммы структуры интерфейса, в которой отображаются номера процессов.
Начинается с домашней страницы
Карта сайта
Домашняя страница располагается в центре карты сайта — с неё пользователи переходят на другие экраны.
Состоит из экранов, таких как меню и формы, а также связей между ними
Диаграмма структуры интерфейса
Диаграмма структуры интерфейса содержит экраны, которые изображаются в виде прямоугольников, и связи между ними.
Состоит из экранов и подкатегорий, связанных между собой
Карта сайта
Карта сайта состоит из основных экранов и их подкатегорий, которые помогают организовать информацию в пользовательском интерфейсе.
Подведём итоги
Карта сайта — это структурная диаграмма, которая используется для графического представления того, как организована информация в пользовательском интерфейсе.
Карту сайта можно составить в виде иерархического списка, диаграммы иерархий или диаграммы связей (mind map).
В центре карты находится домашняя страница, она соединена с основными экранами — категориями, которые в свою очередь делятся на подкатегории с дополнительной информацией.
Карта сайта отличается от диаграммы структуры интерфейса назначением: она позволяет организовать информацию и облегчить навигацию пользователя по страницам. На следующих этапах разработки ПО карта сайта помогает создать прототипы пользовательского интерфейса.
