Составляющие информационной архитектуры

Сравнение «современных» сайтов групп и «современных» информационных сайтов

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

«Современный» сайт группы — это место, где группа людей может совместно работать, сотрудничать и обмениваться документами и сообщениями. Каждый «современный» сайт группы имеет группу поддержки Microsoft 365 для улучшения опыта сотрудничества. На самом деле, благодаря группе Microsoft 365 участники группы могут получить воспользоваться такими службами, как Планировщик, общий календарь, общее хранилище OneDrive для бизнеса и пользовательские соединители Office 365. На «современном» сайте группы участники могут работать с содержимым (чтение и запись). Кроме того, группа Microsoft 365, поддерживающая «современный» сайт группы, может быть как частным, так и общим, и по умолчанию он является общим.

«Современный» информационный сайт — это место, где можно обмениваться новостями, показывать историю или обмениваться сообщениями. Идея информационного сайта состоит в том, чтобы иметь немного редакторов, которые создают и сопровождают контент, и широкую аудиторию, которая его потребляет. Однако информационный сайт не имеет группу поддержки Microsoft 365. Пользователи могут получить доступ к целевому информационному сайту с хорошо известным набором разрешений любого другого сайта SharePoint. По умолчанию все информационные сайты являются частными.

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

Фасетная навигация

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

Решение есть: поощрять поисковых ботов индексировать уникальные страницы с высоким трафиком, при этом максимально ограничивая обход низкоуровневых URL-адресов.

На примере Zappos: если Google проиндексирует страницу Girls Sandals Size 00, он сочтет ее неуникальной. А для страницы Girls Sandals такого не произойдет.

Когда определитесь, какие адреса требуют индексации, а какие — нет, в вашем наборе появляются следующие инструменты управления фасетной навигацией:

• Мета-тег robots, запрещающий или разрешающий индексацию страницы.
• Файл Robots.txt, который дает рекомендации ботов, какие страницы следует индексировать.
• Rel=Canonical, использующийся для консолидации ссылок.
• Инструмент «Параметры URL», чтобы добавить параметры для отображения.
• Nofollow.
• Схема JavaScript.

Как же построить свою архитектуру

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

Маєте важливу новину про українське ІТ? Розкажіть спільноті. Це анонімно.І підписуйтеся на Telegram-канал редакції DOU

Урок 5. Внешний вид

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

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

На этом блоге у меня стоит шаблон, дизайн которого я делал сам.

Пагинация, View All и бесконечные экраны прокрутки

Для страниц категорий, в которых 100, 1000 элементов, есть три метода сглаживания архитектуры:

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

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

Часто оптимизаторы используют простое разбиение на страницы — это удобнее и для роботов, и для людей.

Второй метод — «показать все» — также сглаживает архитектуру портала. Некоторые оптимизаторы считают, что так Google лучше считывает содержимое сайта, ведь все объекты связаны с одной страницей. Метод хорошо работает, когда у вас много продуктов или записей. Минус в том, что когда у вас 100 или 1000 записей/товаров на странице, она долго загружается. А как мы помним, скорость загрузки сайта — наше все.

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

Как настроить пагинацию

При использовании разделения на странице легко упустить детали, которые критичны для SEO:

• используйте правильную разметку, включая rel=»next» и rel=»prev» для ссылок или заголовков;
• не пренебрегайте ссылками на конкретные страницы в футере сайте, поскольку они посылают более сильный сигнал поисковым системам;
• не забывайте, что ссылки пагинации — это обычные ссылки, а значит, ПС также индексируют их.

Модели для организации контента

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

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

2. Плоская структура. Плоская структура чаще всего применяется на сайтах менее, чем на 10 страниц. Цепочка навигации сквозная, не имеет ответвлений. Такую структуру часто можно видеть в портфолио агентств, на простых бизнес-сайтах или маленьких площадках e-commercre.

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

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

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

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

Последовательные структуры

Последовательные структуры упорядочивают контент поэтапно. Как вы попадаете из пункта A в пункт B? Вы начинаете из одной точки и просматриваете весь путь, созданный веб-разработчиком. Прежде чем приступить к созданию этой структуры, веб-разработчик должен исследовать предмет и сформировать наиболее логичные этапы. Пример того, как выглядит последовательная структура — это то, что вы видите, когда пытаетесь что-то купить. Вы выбираете элемент, нажимаете на кнопку «Оформить заказ«, вводите свои данные, платежную информацию и затем подтверждаете заказ. Логичная пошаговая схема приводит к конечному результату — покупке.

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

Что именно и как ищут?

Идеальная рыбаЛовушки для омаровНеразборчивый отлов

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

О том и о сём

В битве за хорошую архитектуру и правильное проектирование сломано немало копий. Каждый (или почти каждый) фанатик разработчик рано или поздно начинает задумываться над вечными философскими вопросами. Разделен ли мир код на дух и материю на классы и интерфейсы, а если да, то что такое дух и что такое материя хорошо ли и правильно ли разделен? Что первично: дух или материя абстракция или детали? И что такое архитектура и зачем она нужна (кому нужна и вообще нужна ли)? А может и нет ее, этой правильной uber-архитектуры? Как с зелеными человечками: вроде и попадаются люди, которые утверждают, что видели её и даже прикасались к ней, но все-таки чаще встречаются разработчики, которые (в разной мере) не удовлетворены кодом, с которым они работают или который пишут.

Собственно, попробуем поразмыслить над этими и некоторыми другими вопросами. В данной статье не будет громких поучений и заявлений о том, как правильно (“Я Д’Артаньян!”), или критики (“А они – невежественные гвардейцы кардинала!”). Просто несколько мыслей о разном по теме объектно-ориентированного дизайна, которые кому-нибудь, возможно, покажутся очевидными и  прописными истинами, известными с детского сада, а кому-нибудь чем-то да и помогут.

Об архитектуре, которая приносит пользу, в теории и на практике

Этапы разработки сайта:

1. Предпроектная подготовка

1.1. Предпроектные исследования
Ознакомление с проектом, уточнение целей и задач. Изучение бизнеса клиента, определение и анализ целевой аудитории. Анализ конкурентов. Составление календарного плана работ. Формирование бюджета и рабочей группы.

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

2. Разработка и согласование дизайна

2.1. Дизайн-концепция сайта (креативный дизайн)
Креативная идея, разработка основной графической концепции дизайна сайта на примере главной страницы. Адаптация элементов фирменного стиля клиента для сайта.

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

2.2. Технический дизайн
Создание графических шаблонов типовых страниц сайта на основе утвержденной концепции дизайна.

4. Программная часть проекта

4.1. Интеграция сайта с системой управления
Сейчас уже ни один современный сайт не обходится без системы управления, т. к. важна не только красивая внешняя оболочка этого сайта, но и возможность удобной работы с ним. Это особенно актуально для сайтов с разветвленной структурой и большим объемом данных. В этот этап входит: интеграция с системой управления, программирование, настройка сервера, обеспечение безопасности проекта. Контроль качества.

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

5. Информационное наполнение сайта

Информационное наполнение сайта необходимыми фотографиями и контентом

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

6. Тестирование сайта в Интернете

Тестирование работоспособности сайта на наличие ошибок, тестирование html-страниц на корректность работы в различных браузерах (Internet Explorer, Netscape, Opera, Safari).

7. Сдача сайта в эксплуатацию

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

8. Продвижение сайта

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

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

Роль информационной архитектуры в дизайне

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

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

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

Сервер баз данных

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

Здесь стоит упомянуть SQL и NoSQL.

SQL расшифровывается как «Structured Query Language» (язык структурированных запросов). Он был изобретён в 1970-х годах, чтобы создать стандартный способ запросов к реляционным наборам данных, доступных широкой аудитории. SQL-базы данных хранят данные в таблицах, которые связаны между собой общими ключами. Такие ключи обычно представлены целыми числами.

Рассмотрим типичный пример хранения информации об истории адресов пользователей. Получатся две таблицы — user и user_addresses, — связанные друг с другом идентификатором пользователя (id в таблице user). Их можно увидеть на изображении ниже. Таблицы связаны, потому что столбец user_id в user_addresses является «внешним ключом» в столбце id в таблице users.

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

NoSQL расшифровывается как «не-SQL» и представляет собой более новый набор технологий баз данных. Он был разработан для обработки очень больших объёмов информации, которые могут генерироваться крупномасштабными веб-приложениями. Большинство вариантов SQL плохо масштабируются горизонтально, а масштабироваться вертикально могут только до определённого момента. Если вы ничего не знаете о NoSQL, рекомендуем начать знакомство со следующих статей:

• https://www.w3resource.com/mongodb/nosql.php
• http://www.kdnuggets.com/2016/07/seven-steps-understanding-nosql-databases.html
• https://resources.mongodb.com/getting-started-with-mongodb/back-to-basics-1-introduction-to-nosql

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

Концепция информационного раздела

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

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

Структура сайта как неотъемлемая часть продвижения

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

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

18 889

Анастасия Осипенко

Анастасия — контент-маркетолог и редактор в SE Ranking, пишет про SEO, маркетинг и цифровые технологии. Кроме текстов для блога SE Ranking, Анастасия пишет музыку, а также любит старые фильмы и свою собаку.

Обучение на архитектора ПО

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

В качестве вузовской специализации можно выбрать одно из IT-направлений. Например, “Информатика и вычислительная техника”, “Информационные системы и технологии”, “Бизнес-информатика” и т. д.

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

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

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

Говоря о курсах для архитекторов ПО, стоит упомянуть некоторые из них:

• Профессия Архитектор ПО – Skillbox
• Архитектор информационных систем – GeekBrains
• Микросервисная архитектура – Otus

Но и этого мало для становления архитектором ПО.

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

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

• Р. Мартин “Чистая архитектура. Искусство разработки программного обеспечения”
• М. Фаулер “Шаблоны корпоративных приложений”
• Д. Черемнов “Профессиональные компетенции разработки программного обеспечения”
• М. Фаулер “UML. Основы”
• Б. Кент “Рефакторинг. Улучшение проекта существующего кода”

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

Создание контентных воронок

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

SILO — это иерархическая организация контента по темам. Концентратор — это агрегированный контент по темам, Silo — его иерархическое представление.

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

Воронка обычно предусматривает:

• навигацию, хлебные крошки;
• контекстные ссылки;
• структуру URL.

Эти элементы — основа группировки для SILO.

Суть предыдущих двух пунктов: вначале вы группируете контент по темам, а затем выстраиваете групы в иерархическом порядке.

Обзор методологии

1. Собираем требования

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

При этом важно конкретизировать, что имеет в виду клиент. Например, не просто «безотказная работа сайта», а «допустимый период простоя – 30 минут в месяц».

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

• ценность для бизнеса;
• степень влияния на архитектуру.

Уровни важности оцениваем по шкале HML (high, medium, low — высокий, средний, низкий). Таким образом, каждое требование будет иметь двухбуквенное сочетание

Архитектурно значимые пункты имеют обозначения HH, HM, HL, MH, MM. Стоит отметить, что большое число требований HH означает высокие риски на проекте.

2. Проектируем архитектуру

Мы проектируем архитектуру ПО, исходя из наиболее значимых атрибутов качества.

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

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

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

Цифровые инструменты

Эти инструменты набирают популярность, потому что все больше команд работает удаленно.

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

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

• Awwapp.
• Twiddla.
• Scribblar.com.

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

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

• Coggle.
• XMind 6.
• Bubbl.us.

Инструменты для прототипирования — ключевые в наборе информационного архитектора.

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

• Justinmind Prototyper.
• MockFlow.
• Mockingbird.

UML – Что это?

Проще говоря, если посмотреть картинки в поисковых системах, то станет понятно, что UML – это что-то про схемы, стрелочки и квадратики.

Есть несколько диаграмм, которые мы можем создать с помощью UML, и мы можем разделить их на две категории:

Поведенческая UML-диаграмма

• Activity Diagram
• Use Case Diagram
• Interaction Overview Diagram
• Timing Diagram
• State Machine Diagram
• Communication Diagram
• Sequence Diagram

Структурная диаграмма UML

• Class Diagram
• Object Diagram
• Component Diagram
• Composite Structure Diagram
• Deployment Diagram
• Package Diagram
• Profile Diagram

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

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

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

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

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

Однако приведенный ниже пример не очень полезен … Он очень большой, поэтому становится запутанным и трудным для понимания. Более того, на его создание уйдет так много времени, что когда мы закончим, он, вероятно, уже устареет, потому что кто-то в это время внес изменения в код.

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

Но тогда остается вопрос: как нам оформить полную картину ?!

Шаблон информационной архитектуры

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

Комплект информационной архитектуры UI8

Этот комплект, созданный веб-компанией UI8, содержит 250 шаблонов и более 500 элементов, которые помогут вам приступить к созданию информационной архитектуры для приложения. Помимо совместимости с Adobe Creative Suite и Sketch, все ресурсы в этом наборе являются векторными и полностью масштабируемыми. Вы можете использовать этот набор, чтобы показать основные функции и последовательность работы приложения, прежде чем приступить к созданию каркаса.

Архитектура ключевой информации и шаблон карты сайта

Этот файл, созданный дизайнером Алексом Гилевым, содержит простой в использовании шаблон IA и документ Google, описывающий структуру контента реального проекта, который он создал. Шаблон содержит простые блоки для демонстрации работы вашего приложения или веб-сайта. Для редактирования этого шаблона не требуется стороннее программное обеспечение – вы можете использовать приложение для презентаций Keynote.

Отображение информационной архитектуры

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

Draw.io

Draw.io – это бесплатный инструмент для создания пользовательских потоков, информационной архитектуры и блок-схем. Он автоматически подключается к Google Drive, поэтому несколько человек могут совместно работать над одной и той же картой сайта в режиме реального времени. Вы также можете сохранить окончательную визуальную карту сайта на One Drive или Dropbox, если хотите. Вот пример карты сайта, созданной с помощью Draw.io.

OmniGraffle

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

FlowMapp

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

Microsoft Visio

Microsoft Visio – это инструмент премиум-класса, который предлагает десятки готовых шаблонов, начальных схем и наборов элементов, которые помогут вам приступить к построению схем вашего IA. Последняя версия Visio поставляется с еще большим количеством функций, которые помогут вам создавать профессиональные карты сайта, включая одноэтапное подключение к данным Excel и новым фигурам для создания диаграмм. Члены группы также могут просматривать, комментировать и обмениваться схемами Visio друг с другом для улучшения совместной работы.