Проектирование при создании сайта,

Чем структура отличается от прототипа

Структура и прототип описывают разные уровни проекта. Их нельзя заменять одним документом, поскольку каждый решает собственную задачу. Основные различия:

• Структура показывает состав разделов и их иерархию.
• Карта сайта фиксирует связи между страницами.
• Пользовательский сценарий описывает последовательность действий посетителя.
• Прототип показывает расположение блоков на конкретной странице.
• Функциональная схема объясняет работу форм, фильтров и интеграций.
• Контентная модель определяет, какие данные хранятся и где выводятся.
• Дизайн-макет добавляет визуальное оформление к согласованной логике.

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

Как формируется структура сайта

Структура должна отражать логику выбора пользователя, а не внутреннее устройство компании. Посетителю редко важно, как распределены обязанности между отделами: он ищет конкретную услугу, товар, информацию или способ связаться.

Работа со структурой включает:

• сбор всех предполагаемых страниц;
• группировку материалов по темам;
• выделение основных разделов;
• определение уровней вложенности;
• устранение дублирующих страниц;
• проектирование меню;
• создание внутренних связей;
• проверку путей к целевым действиям.

Для небольшого корпоративного сайта может быть достаточно нескольких разделов. Интернет-магазину, порталу или сервису потребуется более сложная иерархия с категориями, фильтрами и связанными страницами.

Хорошая структура позволяет пользователю:

• понять содержание раздела по названию;
• найти нужную информацию за несколько переходов;
• вернуться на предыдущий уровень;
• перейти к связанным материалам;
• увидеть доступное целевое действие;
• не сталкиваться с одинаковыми страницами в разных разделах.

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

Какие пользовательские сценарии нужно продумать

Один сайт может обслуживать несколько аудиторий и задач. Например, новый посетитель изучает услуги, постоянный клиент входит в личный кабинет, а соискатель ищет вакансии.

На этапе проектирования рассматривают:

• первый визит из поисковой системы;
• переход из рекламного объявления;
• поиск конкретной услуги;
• сравнение нескольких предложений;
• просмотр цены;
• изучение кейсов;
• отправку заявки;
• повторное обращение;
• поиск контактов;
• использование мобильной версии.

Для каждого сценария устанавливают:

• точку входа;
• нужную пользователю информацию;
• возможные сомнения;
• последовательность страниц;
• целевое действие;
• запасной путь при отказе;
• подтверждение результата.

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

Как создаются прототипы страниц

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

Обычно прототипируют:

• главную страницу;
• страницу услуги;
• каталог;
• карточку товара;
• страницу специалиста;
• статью;
• контакты;
• формы;
• личный кабинет;
• нестандартные функциональные разделы.

В прототипе фиксируют:

• заголовки и подзаголовки;
• смысловые блоки;
• кнопки;
• формы;
• изображения;
• списки;
• карточки;
• элементы навигации;
• подсказки;
• состояния интерфейса.

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

Как проектировать функциональность

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

Для функций описывают:

• доступные действия;
• обязательные поля;
• правила проверки данных;
• возможные ошибки;
• сообщения пользователю;
• передачу информации;
• роли сотрудников;
• интеграции;
• уведомления;
• ограничения доступа.

Например, для формы заявки необходимо определить:

• какие данные вводит пользователь;
• какие поля обязательны;
• куда отправляется обращение;
• создаётся ли сделка в CRM;
• кто получает уведомление;
• что видит пользователь после отправки;
• как фиксируется источник заявки.

Такое описание защищает проект от разного понимания задачи заказчиком, дизайнером и разработчиком.

Что учитывать в мобильной версии

Мобильный прототип нельзя получать простым уменьшением настольного макета. На небольшом экране меняются последовательность блоков, расположение навигации и удобный размер интерактивных элементов. При адаптации проверяют:

• порядок отображения контента;
• работу меню;
• размер кнопок;
• длину форм;
• читаемость текста;
• отображение таблиц;
• работу фильтров;
• расположение фиксированных элементов;
• скорость загрузки;
• удобство целевого действия.

Часть второстепенной информации можно свернуть или перенести ниже, но важные сведения не должны исчезать. Пользователь мобильного устройства должен получать тот же результат, что и посетитель полной версии.

Отдельно прототипируют сложные элементы:

• таблицы;
• калькуляторы;
• многоэтапные формы;
• личный кабинет;
• фильтры;
• интерактивные карты;
• сравнительные блоки.

Какие состояния интерфейса нужно показать

Страница существует не только в заполненном и исправном состоянии. Пользователь может допустить ошибку, не найти результатов или открыть раздел во время загрузки данных. В прототипах предусматривают:

• загрузку;
• пустой результат;
• ошибку;
• успешную отправку;
• неверно заполненное поле;
• недоступную функцию;
• отсутствие товара;
• закрытую запись;
• подтверждение действия;
• восстановление доступа.

Эти состояния особенно важны для:

• интернет-магазинов;
• онлайн-записи;
• личных кабинетов;
• каталогов с фильтрами;
• платёжных страниц;
• форм загрузки файлов;
• сервисов с авторизацией.

Если состояния не спроектированы заранее, они оформляются разработчиком самостоятельно и могут отличаться от общей логики интерфейса. Прототипирование превращает разработку сайта из последовательности субъективных решений в управляемый процесс. Карта разделов, пользовательские сценарии и схемы страниц позволяют согласовать логику до дизайна, точнее оценить объём работ и сократить количество переделок. Качественное проектирование создаёт основу, на которой можно развивать сайт без постоянной перестройки его структуры.