Проектирование методом дерева

24 февраля 2010 года, 14:33

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

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

Суть метода

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

Метод дерева применяется на самых ранних этапах воплощения сайта или набора страниц. Это, пожалуй, самое начало проектирования интерфейса. К тому же, он является очень простым: для него не нужно никаких специальных утилит (однако они могут быть полезны для ещё большей степени визуализации дерева): достаточно обычной бумаги, блокнота или, например, одной Writeboard в вашем Basecamp.

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

  • Корень
    • Элемент
    • Элемент
      • Элемент

Каждое дерево имеет один корень, а все остальные элементы (узлы) уже являются его потомками, прямыми или косвенными. Если элементы находятся на одном уровне относительно своего родительского узла, говорят, что они обладают одним и тем же уровнем (подразумевается уровень вложенности, уровень удалённости от родительского элемента). В примере выше два выделенных курсивом элемента находятся на одном уровне; они равноправны между собой в смысле иерархии.

Иерархия и связи между страницами

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

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

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

Составление дерева страниц

Рассмотрим составление карты усреднённого блога. В начале наше дерево будет состоять лишь из корня:

  • Некоторый блог

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

  • Некоторый блог
    • Список публикаций
    • Отдельная публикация
    • Архив публикаций
    • Информация об авторе
    • Поиск

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

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

  • Некоторый блог
    • Список публикаций
    • Отдельная публикация
      • Режим для чтения
      • Режим для печати
    • Информация об авторе
    • Поиск

Можно обходиться и без виртуальных страниц, указывая в скобках к существующим всю необходимую информацию.

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

  • Некоторый блог
    • Список публикаций
      • По датам
      • По страницам
    • Отдельная публикация
      • Режим для чтения
      • Режим для печати
    • Информация об авторе
    • Поиск

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

  • Некоторый блог
    • Список публикаций
      • По датам
        • По годам
        • По месяцам
      • По страницам
    • Отдельная публикация
      • Режим для чтения
      • Режим для печати
    • Информация об авторе
    • Поиск

Теперь можно заметить, что список публикаций, по сути, является своего рода ориентиром по всем публикациям в блоге. Функция поиска также является ориентиром: она помогает искать по тексту оставленных записей, поэтому стоит её объединить со всем списком.

  • Некоторый блог
    • Список публикаций
      • По датам
        • По годам
        • По месяцам
      • По страницам
      • Поиск
    • Отдельная публикация
      • Режим для чтения
      • Режим для печати
    • Информация об авторе

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

  • Некоторый блог
    • Список публикаций
      • По датам
        • По годам
        • По месяцам
      • По страницам
      • Поиск
    • Отдельная публикация
      • Режим для чтения
      • Режим для печати
    • Информация об авторе
    • Административный центр *

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

  • Административный центр
    • Добавление публикации
    • Управление существующими публикациями
      • Редактирование публикации
      • Удаление публикации

У подобных текстовых карт существует одно досадное упущение: на них трудно проследить связи между разнесёнными на несколько уровней страницами или иные неявные связи. Для восполнения этого недостатка следует воспользоваться более мощными инструментами, нежели простыми текстовыми записями. Вот так, например, может выглядеть дерево страниц для данного блога:

Данные карты рисуются уже в свободном режиме и правила текстовых деревьев страниц на них уже не распространяются.

Представление отдельных страниц деревом

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

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

  • Главная страница
    • Заголовок (шапка страницы)
    • Содержимое
    • Субсодержимое (подвал)

Обычно именно такие блоки присутствуют на большинстве сайтов. Теперь добавим логотип и навигацию к шапке страницы, продублируем навигацию в подвале, добавив туда информацию о защите прав:

  • Главная страница
    • Заголовок (шапка страницы)
      • Логотип
      • Навигация (блог ссылок)
    • Содержимое
    • Субсодержимое (подвал)
      • Навигация (блог ссылок)
      • Информация и правообладателе

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

  • Главная страница
    • Заголовок (шапка страницы)
      • Логотип
      • Навигация (блог ссылок)
    • Содержимое
      • Список публикаций
        • Публикация *
      • Постраничная навигация
    • Субсодержимое (подвал)
      • Навигация (блог ссылок)
      • Информация и правообладателе

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

  • Публикация
    • Время публикования
    • Заголовок (ссылкой)
    • Текст
    • Метки

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

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

Практическая реализация карт

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

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

  1. Страница обязательно должна содержать ссылки на своих потомков первого уровня;
  2. Страницы первого уровня относительно корня дерева составляют костяк навигации, поэтому к ним должен быть обеспечен повсеместный доступ со всех страниц на сайте. Исключениями могут являться служебные страницы (страницы ошибок и иных системных сообщений);
  3. Страницы одного уровня следует связать либо с помощью сквозной навигации (это страницы первого уровня относительно родительской страницы), либо с помощью неявных ссылок.

При соблюдении этих простых правил, у пользователя будет много меньше шансов потеряться.

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

Мнения (9)

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

  • Ярослав Бирзул

    25 февраля 2010 г.01:22

    А насколько времязатратен этот процесс, скажем, на основе этого блога? К примеру, в той же Axure RP набросать предварительный прототип можно за часок-другой. Это учитывая все связи между страницами и элементы.

  • Дин автор

    25 февраля 2010 г.01:28

    Ярослав, это просто совершенно разные вещи. Это самый начальный этап, первичные наброски, которые могут быть сделаны, например, тогда, когда под рукой и компьютера нет. Всё дело именно в примитивности.

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

  • Ярослав Бирзул

    25 февраля 2010 г.01:44

    Для меня твой способ по-умолчанию включен в мой. Потому и спрашиваю. Для примитивности достаточно зарисовать предварительные наброски на листочке, карандашом. По старинке, в общем. Весьма быстро.

  • Максим Покровский

    28 февраля 2010 г.20:40

    Вообще то такой метод проектирования является де-факто, еще с уроков информатики по построению логических схем. Честно говоря я о других ноу-хау и не слышал даже.

  • Дин автор

    02 марта 2010 г.14:49

    Максим, для меня данный материал тоже не является новым, но это не значит, что о нём не следует писать или говорить вслух. Далеко не каждый человек осведомлён об этом. Тем более, поискав в интернете записи на подобную тему, я вообще не нашёл применения текстовых деревьев где-либо ещё.

  • kodji

    20 мая 2010 г.00:11

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

  • Тормоз

    28 июня 2010 г.22:11

    Привет. У тебя классный блог, но почему забросил его?

  • Тормоз

    13 ноября 2010 г.06:08

    Ох, деревья. Это всегда слишком сильное усложнение какое-то.

  • Денис

    13 июля 2011 г.19:37

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

Я тоже знаю!

Для обращения к человеку используйте символ @, после которого следует имя того, к кому обращаетесь (пробелы заменяются на знак подчёркивания). Если вам интересно, можете подписаться на комментарии по RSS или по эл. почте. Ведите себя достойно, вы же не роботы, правда?

Вы можете использовать следующие XHTML-элементы в разметке комментария: strong, em, span[class=crossline], a[href=uri], code[type=язык], blockquote, ul и ol. В качестве языка кода может быть указан, например, javascript или css.