Разработка структуры сайта: инструкция и три готовых шаблона

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

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

 

Структура сайта – это логическое построение всех страниц сайта в виде иерархического дерева. Схема, по которой распределяется путь к разделам, подразделам и страницам сайта.

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

 

Удобные программы для составления иерархической структуры сайта – Xmind и Freemind. Cсылки на них в описании видео.

 

Пошаговый план

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

Используйте userflow персонажей. Userflow (cценарии использования) – идеальный путь пользователя на сайте. Userflow мы составляли в методе персонажа. Перенесите все разделы сайта, которые описаны в ключевом персонаже. Добавьте разделы сайта, важные для второстепенных персонажей. Важно, чтобы они не противоречили userflow ключевого персонажа. Здесь начинает проявляться польза от проведения исследований. Сайт помогает пользователям прийти к эффективным решениям, не изобретая заново уже изобретенное. Если у вас есть несколько решений потребности пользователя, то задайте себе такой вопрос: “Какое из решений позволит прийти к цели пользователя с максимальной эффективностью?”

Если userflow нет, используйте шаблоны информационной архитектуры. Я составила шаблоны структур для нескольких типов сайтов: корпоративный сайт, стартап, лендинг, интернет-магазин. Ссылка на файл с шаблонами под видео.

Добавьте разделы второго уровня – основные разделы сайта. Они же будут пунктами меню. На примере корпоративного сайта – продукция, услуги, о компании, контакты и т.д.

Названия разделов должны быть просты и однозначны. Учитывается паттерны использования сайтов пользователями. Все услуги - в услугах, а не в “лучших решениях”. Исключите креатив. Используйте названия из готовых шаблонов. Не знаете как назвать – посмотрите у пяти конкурентов. Для этого мы ранее собирали данные для разработки.

Названия в одно слово лучше. Чем короче – тем лучше. Услуги, Каталог (а не “Каталог продукции”), Продукция (а не “Наша продукция”, Контакты, Портфолио (а не “Наши решения”).

Лучше сделать не больше пяти пунктов меню. Чем больше пунктов меню, тем сложнее пользователю выбрать. Дольше искать - сложнее найти. Если пунктов меню больше и никак нельзя сократить, выделите пять наиболее важных, остальные разместите под «бургером». Не добавляйте пункт меню «Главная» – на главную пользователи будут переходить по клику на логотип в шапке сайта.

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

 

Лучше всего работают примеры. Кратко пробежимся по трем основным типам сайтов – расскажу как я для них разрабатываю структуру.

 

Корпоративный сайт

Интернет-магазин

Здесь всегда два меню – каталог продукции и основное меню сайта.

Стартап

Итерации – неизбежная сторона проектирования.

 

Как и в какой последовательности пользователь будет поглощать информацию на сайте

 

Что важно

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

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

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

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

Самый распространённый шаблон: каталог – рабочее пространство. В операционных системах, многих программах и приложениях слева расположена панель навигации, справа рабочее пространство. Откройте папку с документами на винде, маке. Откройте телеграмм и ватсап.

Или шаблон в мобильных приложениях – свайп. Короткий свайп вправо — архивация, длинный — удаление, свайп влево — отложить на потом.

Почта, сообщения в телеграмм, работа с любыми списками.

Представьте, что продукт – это человек. Это простой и одновременно эффективный способ представить идеальный опыт взаимодействия пользователя с сайтом. Взаимодействие с сайтом по тональности должно напоминать общение с вежливым и деликатным человеком. При определении разделов и разработке прототипов задавайте себе вопросы: что сделал бы человек, желающий помочь? как сайт может предоставить полезную информацию без назойливости? как может упростить работу пользователя? Пример: я тут буквально пару недель назад оформляла заявление на госуслугах на эти выплаты по карантину, которые объявил наш президент. В заявлении нужно было добавить данные о ребенке - ФИО, дату рождения, ИНН и ещё что-то. После оформления заявки приложение позаботилось обо мне и предложило сохранить эти данные в моем профиле, чтобы каждый раз не вводить их при подаче новых заявлений. Приятно и экономит время.