Как разработать структуру сайта с помощью Sitemapping

  1. Притворись, что ты домостроитель на мгновение. Вы бы открыли новый дом, в котором не было утвержденных...
  2. Как спланировать и создать структуру сайта с картой сайта
  3. Шаг № 1 - подготовка к работе с картами сайта
  4. Вам может понравиться это видео
  5. Шаг № 2 - Мозговой штурм типов контента
  6. Шаг № 3 - Определить первичную навигацию
  7. Шаг № 4 - Уточнение структуры и содержания второго / третьего уровня
  8. Шаг № 5 - Не забывайте про служебные страницы
  9. Шаг № 6 - Создание заметок и высокоуровневых спецификаций для каждой страницы
  10. Шаг № 7 - Определите тип шаблона оформления
  11. Последний шаг - итерация. Итерация. Итерация.
  12. Инструменты Sitemapping
  13. Помните, что активность над инструментом
  14. Вам также может понравиться

Притворись, что ты домостроитель на мгновение.

Вы бы открыли новый дом, в котором не было утвержденных планов? Ты в порядке с импровизацией в течение следующих нескольких месяцев? Будет ли ваша команда подрядчиков уверена в конечном результате?

(Если вы сказали «да», пожалуйста, придерживайтесь своей дневной работы!)

Аналогично тому, как планы этажей отражают структуру дома , карта сайта отображает структуру сайта.

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

Что такое карта сайта и зачем она нужна?

Карта сайта - это визуальный процесс определения структуры сайта, функциональности высокого уровня и схемы навигации. Конечный результат может быть эскизом, изображением, PDF или представленным в виде инструмента SlickPlan (мой полный список инструментов картирования сайта внизу).

Карта сайта должна быть определена на ранней стадии процесса планирования сайта. Этому шагу должен предшествовать лишь небольшой набор действий (например, бизнес-задачи, исследование пользователей).

Пример карты сайта ProtoFuse.com. Цвета используются для представления различных уровней навигации (например, синий = основная навигация)

Карта сайта является критически важной фазой в структуре веб-сайта, поскольку она представляет собой важный результат информационной архитектуры (IA) - основы для пять компетенций дизайна пользовательского опыта ,

Насколько критично? Ну плохая информационная архитектура вызывает большинство сбоев пользователей ,

Ну плохая информационная архитектура   вызывает большинство сбоев пользователей   ,

Карта сайта - это информационная архитектура.

Как спланировать и создать структуру сайта с картой сайта

Вот обзор:

  1. Подготовьтесь к деятельности по созданию сайтов
  2. Мозговой штурм типы контента
  3. Определить первичную навигацию
  4. Раскройте структуру и содержание второго и третьего уровней
  5. Не забывайте про служебные страницы
  6. Создавайте заметки и спецификации высокого уровня для каждой страницы
  7. Назначьте тип шаблона оформления
  8. Итерация. Итерация. Итерация.

Теперь давайте разберем каждый шаг.

Шаг № 1 - подготовка к работе с картами сайта

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

  1. Время - Сильная карта сайта не разработана за 20 минут. Есть ли у вашей организации необходимое время для совместной работы?
  2. Люди - ключевые заинтересованные стороны должны внести свой вклад в дизайн карты сайта. Кто эти люди? Они правильные люди?
  3. Исследования - Каковы цели сайта? Кто наши пользователи? Какая информация им нужна? Что говорит нам наша аналитика?

ПОЛЕЗНЫЙ СОВЕТ: не думайте, что отдел маркетинга и продаж знает все - задействуйте различные отделы. Разнообразие знаний о компании, отрасли, сфере услуг и продукции будет полезным.

Вам может понравиться это видео

Основатель Slickplan - Видеоинтервью с Яном Лоусоном

Мы взяли интервью у Иана Лоусона, основателя и менеджера по продукту Slickplan, супер-интуитивно понятного инструмента для создания карт сайтов для планирования сайтов.

Шаг № 2 - Мозговой штурм типов контента

Прежде чем вы начнете определять элементы навигации (Шаг № 3), вам нужно обсудить содержание вашего сайта. Какие услуги / продукты мы продаем? Сколько информации о компании будет представлено? У нас есть отзывы? Какие полезные ресурсы мы можем предоставить?

Пока не сосредотачивайтесь на том, куда этот контент попадает в карту сайта (Шаг № 4). Дайте себе свободу мыслить открыто - даже дико! Плохие идеи контента со временем, естественно, сработают.

ПОЛЕЗНЫЙ СОВЕТ: Следуйте 80/20 правило содержания (80% ценного контента / 20% продвижения)

Шаг № 3 - Определить первичную навигацию

Основная навигация SafePlumbing.org включает в себя 8 лаконичных элементов в диапазоне от одного до четырех слов.

Также называемые «1-й уровень», «Основной», «Верхний уровень» или «Глобальный», основная навигация обычно находится в верхней части веб-сайта в горизонтальном дизайне. Хотя есть дело против вертикальной навигации некоторые сайты по-прежнему используют этот подход (например, Amazon).

Основная навигация по вашей карте сайта должна ...

  1. Будьте краткими - каждый элемент должен быть нацелен от 1 до 5 слов («О нас», «Свяжитесь с нами»), а не на полные предложения
  2. Используйте общий язык - избегайте именования навигации, которые имеют смысл только внутри. Используйте принцип ПОЦЕЛУЯ (Keep It Simple Stupid)
  3. Сообщите иерархию сверху вниз - может ли кто-нибудь легко просмотреть или найти информацию?
  4. Позвольте сайту расти - ваша первичная навигация не должна пересматриваться каждый раз, когда вы добавляете новый контент или функции

ПОЛЕЗНЫЙ СОВЕТ: Нет магического числа для того, сколько элементов живет в вашей основной навигации. Даже если 7 предметов или меньше - миф о UX все еще важно практиковать краткость. Если ваш дизайн карты сайта содержит более 10 элементов, возможно, есть возможность объединиться.

Шаг № 4 - Уточнение структуры и содержания второго / третьего уровня

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

Для большинства веб-сайтов объемом менее 50 страниц достаточно второго уровня структуры. Для более крупных сайтов, как правило, необходим третий уровень, чтобы поддерживать четкую иерархию. Я даже видел, как некоторые сайты углубляются на четыре уровня (это довольно типично для академических сайтов, где есть куча контента).

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

ПОЛЕЗНЫЙ СОВЕТ: По мере того, как вы расширяете страницу за страницей, ваша главная первичная навигация будет проверена. Не бойтесь подстраиваться, так как структура вашего сайта становится видимой.

Шаг № 5 - Не забывайте про служебные страницы

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

ПОЛЕЗНЫЙ СОВЕТ: Свяжитесь с вашим юридическим отделом раньше, чем позже.

Шаг № 6 - Создание заметок и высокоуровневых спецификаций для каждой страницы

«У нас будет просто базовый контент для этой страницы».

Нет нет. НЕТ!

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

Поставьте контент первым, потому что это сердце каждого сайта ,

ПОЛЕЗНЫЙ СОВЕТ: Если вам нужна хорошая отправная точка, приведите количество слов. Короткий и сладкий (до 100 слов) или богатый и сердечный (500+ слов)?

Короткий и сладкий (до 100 слов) или богатый и сердечный (500+ слов)

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

Шаг № 7 - Определите тип шаблона оформления

Указание типа дизайна страницы нагревает движок для дизайна пользовательского интерфейса (пользовательского интерфейса)

Является ли эта страница фотогалереей? Форма конвертации? Оглавление? PDF?

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

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

ПОЛЕЗНЫЙ СОВЕТ: Определите шаблон каждой страницы. Если вы еще этого не знаете, пометьте его как "TBD" и сгладьте, как вы повторяете.

Последний шаг - итерация. Итерация. Итерация.

Выберите инструмент картирования сайта с контролем версий

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

Мне нравится создавать новые версии для разных дней мозгового штурма. Новый день = новая версия.

ПОЛЕЗНЫЙ СОВЕТ: Стреляйте с точностью ~ 85% в соответствии со структурой вашего сайта макетирования или каркасные.

Инструменты Sitemapping

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

Вот почему мы перестали использовать Mindjet MindManager, никогда бы не порекомендовал раздутый софт, как Иллюстратор и влюбился в SlickPlan ( попробуйте 30-дневную бесплатную пробную версию Slickplan ).

Другие инструменты Sitemap, которые помогут вам спланировать структуру сайта:

Помните, что активность над инструментом

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

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

Какие шаги и инструменты для создания карты сайта вы используете для разработки структуры сайта? Я хотел бы услышать в комментариях ниже!

Вам также может понравиться

Как улучшить ваш сайт за 12 практических способов

Ищете простые для понимания, полезные советы по улучшению вашего сайта? Эти 12 практических способов детализируют больше, чем типичные общие советы, которые вы слышите.

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