Структурируй то, структурируй это

Вы, вероятно, заметили, что некоторое время не было никаких новых заметок — всё свободное от работы время занимался структурой организации страниц для нового сайта.

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


Что такое структура?

Если кратко — это иерархическая схема связей между страницами на сайте. В больших проектах она, обычно, выглядит как объемное дерево с ветвями-разделами и конечными страницами-листками.

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

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

Люди по-разному создают структуру. Кто-то берёт блочную разметку для каждой страницы и красиво расставляет всё в большой картинке.

Пример так называемого storyboard-а от Sobox Studio.

Это замечательно выглядит на дрибббле, но в реальной жизни не очень разумно по нескольким причинам:

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

Потому рекомендую остановиться на ментальных картах (Mind Maps), которые делаю в MindNode Pro (MacOS и iOS)


С теорией закончили, перейдём к практике.
Первым делом нужно зайти на сайт ВР и тщательно занести все уникальные страницы в структуру.

У меня получилось так:

Структура текущего сайта ВР. Рассмотреть в большом размере можно здесь.

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

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

Структура новой версии сайта ВР. Оригинал можно рассмотреть здесь.

Как удалось так радикально всё упростить:

  1. Перенёс поиск по законопроектам внутрь списка.
  2. Фильтры вместо разных страниц поместил внутрь страницы списка законопроектов.
  3. Все вкладки с информацией о законопроекте объединил в одну страницу с хронологией событий, которые можно фильтровать, которая также содержит три блока с информацией, связанными и альтернативными законопроектами.
  4. Все планы, расписания сессии, пленарные заседания, слушания и так далее решил объединить в один расширенный календарь, в котором будут видны планы на будущее и отчёты о прошедших событиях.
  5. Поиск по законам перенёс в список законов.
  6. Все фильтры и сортировки законов перенёс прямо в список, вместо отдельных страниц.
  7. Всю справочную информацию перенёс в под-раздел «Справка» раздела «Информация».
    Превратил её в пару небольших страниц, вместо отдельного сайта.
    Убрал из справочных материалов устаревшую информацию о RSS и «кнопках для сайтов».
  8. Все под-страницы по отдельному закону объединил в одну сводную, поскольку информации на них было совсем немного.
  9. Второстепенные страницы (например, «История парламентаризма в Украине») перенёс в раздел «Информация».
  10. Объединил всю информацию о сотрудниках аппарате ВР в одну страницу и перенёс её в раздел «Информация».
  11. Все фильтры и сортировки по депутатам вынес в их список.
  12. Всю информацию по каждому депутату объединил в одну страницу-хронологию с фильтрами.
  13. Схему размещения депутатов в зале перенёс из отдельной страницы в список депутатов.
  14. Вынес всю необходимую информацию для журналистов и граждан в отдельный раздел «Пресс-центр».
  15. Всю ленту Новостей перенёс в «Пресс-центр».
    Объединил несколько категорий новостей в одну страницу, снабдив её фильтрами.
  16. Объединил «Фото», «Видео» и «Аудио» разделы в раздел «Медиа», который переместил в «Пресс-центр».
  17. Удалил раздел «Парламентские вести» поскольку по логике он дублирует «Новости».
  18. Убрал из раздела «Информация» несколько страниц, которые дублируют друг-друга.
  19. Все формы запроса на получения публичной информации перенёс в «Контакты» раздела «Пресс-центр».
  20. Внутри раздела «Информация» создал несколько подразделов по типам — «Отчёты и планы», «Документы», «Административно-территориальное деление».
  21. Содержимое раздела «Ресурсы» перенёс в раздел «Информация», распределив его содержимое по новым категориям, а также удалив некоторые дублирующие и устаревшие страницы.
  22. Раздел «Международная деятельность» перенёс в качестве под-раздела «Информации».
    Сам раздел при этом оптимизировал — развернув локику задом-наперёд, объединив информацию по странам, а не по разным типам. Это сэкономило два уровня иерархии.
  23. Убрал «Архив» (дублирует новости) и «Карту сайта» (показывает, на самом деле, всего маленький кусок сайта).
  24. Немного переработал логику раздела «Административно-территориальное устройство Украины», убрав промежуточные страницы и переместив контактную информацию местного руководства внутрь этого раздела.
    Удалил из этого раздела страницы с законами, заменив их простыми ссылками на страницы законов.
  25. Убрал информацию о прошедших выборах в раздел «Документы».
  26. В разделе «Планы и отчёты» убрал разбивку на страницы по годам, поскольку в году, чаще всего, от 1 до 4 отчётов.
  27. Отчёты «СМИ о парламенте» и «упоминания в региональных СМИ» перенёс из пресс-центра в «Отчёты и планы» раздела «Информация».
  28. PROFIT!

Надеюсь, всё понятно описал.


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

https://vimeo.com/98805916

PS: Буду рад вашим дополнениям и уточнениям в комментариях. Если видите, что где-то ошибся, не стесняйтесь об этом сказать, конструктивная критика — это отлично.


Интерфейс Medium часто меняется, потому не обещаю, что подписка останется именно здесь ☺

PS: обязательно подписывайтесь на обновления коллекции в правом верхнем углу браузера или по RSS.