<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
><channel><title>UX/UI | Павел Шерер</title><atom:link href="https://sherer.pro/blog/category/ux-ui/feed/" rel="self" type="application/rss+xml" /><link>https://sherer.pro/blog/category/ux-ui/</link><description>Продюсер, аналитик, продуктовый дизайнер IT-решений</description><lastBuildDate>Wed, 10 Dec 2025 13:39:50 +0000</lastBuildDate><language>ru-RU</language><sy:updatePeriod>hourly</sy:updatePeriod><sy:updateFrequency>1</sy:updateFrequency><generator>https://wordpress.org/?v=6.9.4</generator><image><url>https://sherer.pro/content/uploads/2018/01/cropped-favicon-60x60.jpg</url><title>UX/UI | Павел Шерер</title><link>https://sherer.pro/blog/category/ux-ui/</link><width>32</width><height>32</height></image> <item><title>Информационная архитектура: сущности (практика, vol.2)</title><link>https://sherer.pro/blog/informacionnaya-arhitektura-sushchnosti-vol-3/</link><dc:creator><![CDATA[Павел Шерер]]></dc:creator><pubDate>Thu, 30 Oct 2025 12:35:32 +0000</pubDate><category><![CDATA[UX/UI]]></category><category><![CDATA[Аналитика]]></category><category><![CDATA[Технический дизайн]]></category><category><![CDATA[аналитика]]></category><category><![CDATA[гайд]]></category><category><![CDATA[информационная архитектура]]></category><guid isPermaLink="false">https://sherer.pro/?p=4735</guid><description><![CDATA[<p>Третья часть про сущности в ИА: фиксация свойств, паттерны их моделирования и схематизация итогового результата.</p><p>Запись <a href="https://sherer.pro/blog/informacionnaya-arhitektura-sushchnosti-vol-3/">Информационная архитектура: сущности (практика, vol.2)</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></description><content:encoded><![CDATA[<p>В прошлой статье мы разобрали первые пять этапов проработки информационных сущностей. Теперь давайте поговорим об оставшихся двух: фиксации свойств и итоговой схематизации.</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Если эта первая статья, с которой вы знакомитесь с информационной архитектурой, примите мои соболезнования: вам может быть непонятно. Рекомендую идти в начало цикла.</p></blockquote><p>В одной из предыдущих статей у нас был простенький <a href="https://sherer.pro/blog/informacionnaya-arhitektura-sushchnosti-vol-1/#3-2-primer-opisaniya-svoystv">пример</a> фиксации свойств. Теперь мы его расширим. Но сначала давайте выясним, каким образом вообще моделируются свойства информационных сущностей.</p><h2 class="wp-block-heading">Паттерны моделирования свойств</h2><p>Как мы уже знаем, все свойства можно поделить на несколько типов: базовые, ссылочные, составные, вычисляемые, технические и ограничительные. И если с базовыми всё плюс-минус понятно, то что делать с остальными — отнюдь не всегда ясно. </p><p>Да и с базовыми, если честно, порой могут возникнуть проблемы. Например, у нас есть свойство «Цвет». Оно простое: ни на кого не ссылается, это не таксономия — это, скорее, словарь, сквозное свойство. Как с ним быть? Или с полем «Описание» — оно тоже простое, но активно участвует в индексации и поиске, об этом тоже нужно подумать.</p><p>Давайте разбираться.</p><h3 class="wp-block-heading">Нормализованные словари</h3><p>Их ещё называют «справочниками», а разработчики — ENUM, перечислением. Мы их уже касались вскользь. Поля такого типа могут принимать только значения из конкретного, определённого перечня.</p><p><strong>Правила</strong>:</p><ul class="wp-block-list"><li>Значения — всегда конечные и контролируемые, добавление новых происходит только по процессу ревью.</li><li>Поддерживают алиасы/синонимы для поиска, но в БД хранится нормализованное значение (ключ).</li><li>Если значения словаря локализуются (переводятся на другие языки), то внутренний ключ остаётся неизменным.</li></ul><p><strong>Пример</strong>:</p><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p>У товара есть поле <code>brand</code>, которое ссылается на запись из справочника брендов. В справочнике брендов есть конечный перечень записей обо всех брендах, представленных в системе.</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b98aa5e&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b98aa5e" class="wp-block-image aligncenter size-full wp-lightbox-container"><img fetchpriority="high" decoding="async" width="1446" height="560" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2025/11/ia-entities-7.png" alt="" class="wp-image-4833" style="object-fit:cover" srcset="https://sherer.pro/content/uploads/2025/11/ia-entities-7.png 1446w, https://sherer.pro/content/uploads/2025/11/ia-entities-7-1048x406.png 1048w, https://sherer.pro/content/uploads/2025/11/ia-entities-7-768x297.png 768w" sizes="(max-width: 1446px) 100vw, 1446px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure></div><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p>Фильтр «Бренд» в каталоге работает по полю <code>brand</code> товара. В текстовом поиске же мы учитываем не только прямое название бренда, но и алиасы/синонимы. </p><p>Например, при вводе в поле поиска «Nike», «nike» и «Найк» система понимает, что это одно и то же — и выдаёт одинаковый результат.</p><p>Справочник брендов:</p><figure class="wp-block-table"><table><thead><tr><th>Ключ</th><th>Алиасы (в нижнем регистре)</th></tr></thead><tbody><tr><td>adidas</td><td>adidas, адидас, addidas, adiddas, adidac, adibas</td></tr><tr><td>nike</td><td>nike, найк, наик, nake, niks, nikee</td></tr><tr><td>reebok</td><td>reebok, рибок, reeboc, reebokk, rebok, ribok</td></tr></tbody></table></figure></div><p><strong>Риски</strong>:</p><ul class="wp-block-list"><li>Избыточная детализация (когда в словаре много синонимов или значений) может привести к «шуму» в фасетах. Например, когда в словаре «Цвет» появляются сотни почти одинаковых значений: алый, бордо, вишнёвый, винный и тп.</li><li>Из-за отсутствия владельца, ответственного за словарь, повышается риск появления дублей и рассинхронизации.</li><li>Использование ENUM в БД для часто меняющихся списков почти всегда усложняет разработку и деплой.</li></ul><h3 class="wp-block-heading">Ссылочные поля</h3><p>Поля, указывающие на другие сущности через внешние ключи. Главное их отличие от <strong>нормализованных словарей</strong> в том, что <strong>ссылочные поля</strong> связывают сущности между собой и с другими объектами (например, с терминами таксономий). Тогда как значения ENUM из предыдущего примера не являются отдельными объектами, они просто строчка в фиксированном списке.</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Ссылочные поля — это «мостики» между сущностями: товар связан с категорией, тегами, продавцом, заказами. Благодаря им карточка не живёт в вакууме, а встраивается в общую систему.</p></blockquote><p><strong>Правила</strong>:</p><ul class="wp-block-list"><li>Для «один‑ко‑многим» 1:N (категория → товары) у товара хранится ссылка на свою категорию. </li><li>Для «многие‑ко‑многим» M:N (товар ↔ тег) связи хранятся отдельно. </li><li>Важно продумать, что происходит при удалениях: кого переносим, кого архивируем, а где просто убираем связь.</li></ul><p><strong>Пример</strong>:</p><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p>У товара есть одна «Категория», но множество «Тегов». </p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b98b02d&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b98b02d" class="wp-block-image aligncenter size-full wp-lightbox-container"><img decoding="async" width="1446" height="1310" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2025/11/ia-entities-8.png" alt="" class="wp-image-4841" srcset="https://sherer.pro/content/uploads/2025/11/ia-entities-8.png 1446w, https://sherer.pro/content/uploads/2025/11/ia-entities-8-1048x949.png 1048w, https://sherer.pro/content/uploads/2025/11/ia-entities-8-768x696.png 768w" sizes="(max-width: 1446px) 100vw, 1446px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p>Если удалить тег — товар останется. Если удалить категорию — нужно заранее решить, куда товар переедет.</p></div><p><strong>Риски</strong>:</p><ul class="wp-block-list"><li>Непродуманные правила удаления ведут к потере данных или поломке логики. Я видел случаи, когда при удалении рубрики в CMS, из базы данных удалялись десятки статьей и сотни комментариев. </li><li>Когда связи между сущностями организованы неэффективно, системе приходится делать много лишних запросов, фильтровать данные или пересчитывать агрегаты на лету. Это замедляет скорость работы продукта.</li><li>Если связи построены небрежно, при массовых обновлениях могут случиться зависания или сбои. Например, любое изменение категории или продавца может вызвать ошибки в отображении связанных с ними карточках.</li></ul><h3 class="wp-block-heading">Вычисляемые поля</h3><p>Это свойства, которые не вводятся вручную, а считаются системой на основе других данных: средний рейтинг, количество просмотров, популярность, конверсия. Они помогают понять, насколько «живой» или успешный объект, не требуя ручного обновления.</p><p>Вычисляться такие поля могут «на лету», либо храниться в БД или кэше. </p><p><strong>Правила</strong>:</p><ul class="wp-block-list"><li>Нужно договориться, откуда берутся исходные данные и как часто обновляется результат — в реальном времени или каждый час, день, неделю. </li><li>Исходные данные и вычисленные результаты хранятся отдельно, чтобы не потерять возможность пересчёта. </li><li>Важно фиксировать формулы расчётов и их владельца — того, кто отвечает, если метрика «поплыла». </li><li>Полезно также указывать время последнего обновления, чтобы понимать, насколько данные свежие.</li></ul><p><strong>Пример</strong>:</p><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p>В карточке показываем «4.6 из 5» и «124 отзыва». Эти значения не вводятся вручную — они считаются из всех отзывов с округлением до одной десятичной. Популярность товара рассчитывается как комбинация просмотров и добавлений в корзину за последние 7 дней.</p></div><p><strong>Риски</strong>:</p><ul class="wp-block-list"><li>«Расползание» цифр: в карточке одно, в отчёте другое. На момент написания статьи такое можно увидеть на Хабре, там два разных счётчика просмотров: один доступный всем, другой — только авторам.</li><li>Неочевидные формулы, спрятанные в глубинах кода. Показатели меняются, команда не понимает причин.</li><li>Слишком частые пересчёты. Система вычисляет показатели слишком часто, нагружая серверы без нужды. Или наоборот — слишком редкие обновления, из‑за которых пользователи видят устаревшие данные.</li></ul><h3 class="wp-block-heading">Диапазоны и интервальные фасеты</h3><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Кто-то считает <strong>интервальные фасеты</strong> лишь подмножеством <strong>вычисляемых полей</strong>, но я решил выделить их отдельно. Они чаще всего встречаются и имеют несколько специфичных свойств.</p></blockquote><p>Фильтры по числам и датам помогают пользователю быстрее находить подходящие товары. Мы редко ищем вещь за точно 2&nbsp;570 рублей — обычно хотим что-то «в районе двух‑трёх тысяч». Поэтому интерфейс должен позволять задавать диапазон значений: цену «от-до», вес или рейтинг. Пользователь мыслит не конкретными числами, а удобными «вилками» — например, «до 1000 рублей» или «от 4 звёзд и выше».</p><p><strong>Правила</strong>:</p><ul class="wp-block-list"><li>В системе хранится точное значение, а пользователю показываются готовые «умные» интервалы (например, на основе реального распределения цен). Если меняем цену, то принадлежность к интервальным полям изменяется автоматически.</li><li>Правила границ (включительно/исключительно) и округления задаются явно. Чтобы не было непонятно, входит «1000» в «до 1000» или в «1000-5&nbsp;000».</li><li>Должны быть продуманы правила обработки пустых/нулевых значений. Например, «цена не указана» — это отдельная группа, она не попадает в интервалы.</li></ul><p><strong>Пример</strong>:</p><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p>Фильтр «Цена» может выглядеть так: готовые варианты «до 999&nbsp;рублей», «1000–4999&nbsp;рублей», «5000+», плюс ручной ввод. </p><p>Для сортировки и страниц используется точная цена из карточки. При этом явно указано, что «до 999&nbsp;рублей» — верхняя граница включительно, «1000–4999&nbsp;рублей» — обе границы включительно, а товары без цены попадают в отдельный блок «цена не указана».</p></div><p><strong>Риски</strong>:</p><ul class="wp-block-list"><li>Для денег и размеров нужно быть аккуратными с единицами и валютами. Если смешать сумму и валюту, это может плохо кончиться: фильтр по цене может стать бесполезен. </li><li>Непродуманные интервалы дают пустые результаты и раздражают пользователей. </li></ul><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Важный момент: некоторые фреймворки и базы данных умеют совершать очень быстрые арифметические операции, включая поиск по диапазону. Поэтому зачастую диапазоны и интервальные фасеты могут оказаться излишними. Уточняйте у разработчиков и архитекторов.</p></blockquote><h3 class="wp-block-heading">Составные и полуструктурированные поля</h3><p>Когда у сущности много разнородных характеристик (например, у товара есть изображения, материалы, дополнительные свойства) — удобнее собрать их в «пакеты». То есть не разбивать свойство на десятки отдельных полей, а объединить в один структурированный набор. Это помогает избежать перегруженности данных и сделать архитектуру более гибкой.</p><p>Во <a href="https://sherer.pro/blog/informacionnaya-arxitektura-primer-i-tipizaciya/">второй статье</a> цикла я писал о <em>сильной и слабой типизации</em>. Так вот составные поля — отличных пример признака слабой типизации.</p><p><strong>Правила</strong>:</p><ul class="wp-block-list"><li>Те свойства, которые часто используются для фильтрации, сравнения или сортировки (ширина, вес, цена), лучше выделить в отдельные простые поля. Остальное можно хранить в составе набора.</li><li>Важно сразу договориться о едином формате (например, JSON или таблица), чтобы не получилось сотни уникальных схем в разных объектах.</li><li>Также стоит помнить об ограничении глубины вложенности — чем проще структура, тем меньше ошибок при обновлениях.</li></ul><p><strong>Пример</strong>:</p><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p>Для товара может быть важно хранить габариты в отдельных свойствах, так как по ним может осуществляться фильтрация. А вот данные изображения можно хранить в <strong>составном свойстве</strong>, потому что по отдельности их запрашивать не станут.</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b98b8f3&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b98b8f3" class="wp-block-image aligncenter size-full wp-lightbox-container"><img decoding="async" width="1446" height="982" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2025/11/ia-entities-9.png" alt="" class="wp-image-4855" srcset="https://sherer.pro/content/uploads/2025/11/ia-entities-9.png 1446w, https://sherer.pro/content/uploads/2025/11/ia-entities-9-1048x712.png 1048w, https://sherer.pro/content/uploads/2025/11/ia-entities-9-768x522.png 768w" sizes="(max-width: 1446px) 100vw, 1446px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p>Таким образом, мы не делаем отдельные поля для тех свойств, которые используются только вместе.</p></div><p><strong>Риски</strong>:</p><ul class="wp-block-list"><li>Перестарались с «пакетами» — становится проблематично искать или менять параметры. </li><li>Если структура слишком сложная или неоднородная, новые данные перестают помещаться в общую логику, а интерфейс не справляется с отображением. </li><li>Есть риск дублирования свойств: если одно и то же поле хранится и внутри набора, и отдельно, это будет сбивать аналитику и создаст противоречия.</li></ul><h3 class="wp-block-heading">Поисковые поля</h3><p>Это поля, которые напрямую влияют на то, как пользователи находят нужный элемент через поиск. Именно они определяют качество и релевантность результатов. Обычно сюда входят: название, краткое описание, артикул и так далее. </p><p><strong>Правила</strong>:</p><ul class="wp-block-list"><li>Поиск должен «думать как человек»: учитывать разные формы слов («купить» и «покупка»), синонимы («ноутбук» и «laptop») и популярные опечатки. Именно поисковые поля должны лучше всего индексироваться.</li><li>Полезно задавать разный «вес» полям — название важнее описания, а описание важнее технических характеристик. </li><li>Важно поддерживать актуальный словарь синонимов и опечаток: он должен пополняться на основе статистики реальных поисковых запросов.</li></ul><p><strong>Пример</strong>:</p><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p>Покупатель вводит «кеды», и поиск показывает ему как «кеды», так и «sneakers», даже если запрашиваемое слово вообще на другом языке.</p><p>Название и категория влияют сильнее, чем описание, поэтому карточки с точным совпадением появляются первыми. </p><p>Словарь запросов обновляется по статистике — если пользователи всё чаще ищут «скайшуз» или «кроссовки на платформе», система быстро учится понимать эти слова.</p></div><p><strong>Риски</strong>:</p><ul class="wp-block-list"><li>Сложные запросы без ограничений по размеру выдачи запросто могут «положить» поиск, перегрузив систему. </li><li>Если переусердствовать с синонимами, поиск начинает показывать нерелевантные результаты, будет слишком много «шума». </li><li>Несвоевременно обновляемый словарь приводит к тому, что люди начнут искать новые термины, которых в базе нет — и, не получив результатов, посчитают, что товара нет вовсе.</li></ul><h3 class="wp-block-heading">Технические поля</h3><p>Это служебные поля, которые фиксируют то, что пользователям знать не обязательно. Например: когда и кем запись создана/изменена, какой у неё статус, флаги индексации. Такие данные помогают поддерживать порядок, находить ошибки и понимать, как объект живёт во времени. Без них часто невозможно разобраться, кто и что сделал, особенно если с системой работает большая команда.</p><p>Очень часто при проработке информационной архитектуры про служебные поля забывают. Это приводит к тому, что в процессе реализации появляются самые разнообразные костыли, которые сильно мешают развитию системы.</p><p><strong>Правила</strong>:</p><ul class="wp-block-list"><li>Типовые значения указываются в едином формате: например, время — только в UTC+0. Это позволяет потом не путаться при реализации и анализе.</li><li>Важно заранее договориться о понятных статусах сущностей и допустимых переходах между ними, фиксировать автора, источник и причину изменений. </li><li>Желательно хранить историю правок хотя бы ключевых сущностей, чтобы при спорных ситуациях можно было восстановить ход событий. </li></ul><p><strong>Пример</strong>:</p><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p>У сущности «Товар» есть поле «Статус» в виде нормализованного словаря, ENUM: «черновик → на проверке → опубликован → в архиве». </p><p>Система показывает, кто и когда вносил правки, а также из какой системы пришли изменения. Например, если товар был обновлён автоматически из ERP, это видно в истории. А комментарий «обновлены фотографии по новому каталогу» помогает понять контекст изменения.</p></div><p><strong>Риски</strong>:</p><ul class="wp-block-list"><li>«Прыгающие» даты из‑за разных часовых поясов, непонятные или дублирующие статусы, невозможность определить автора изменений. </li><li>Потеря истории при импорте или миграции: если данные перезаписать без сохранения временных меток, аналитика и отчёты станут недостоверными. </li></ul><h3 class="wp-block-heading">Ограничительные поля</h3><p>Это поля, которые определяют рамки доступности сущности: кто может её видеть, с ней взаимодействовать, где и при каких условиях. Они регулируют поведение системы и помогают избегать нарушений — например, продаж алкоголя несовершеннолетним или показ товаров, запрещённых к экспорту в конкретной стране. Также <strong>ограничительные поля</strong> фиксируют бизнес‑ограничения и ролевую модель вроде «только для админов» или «данные предоставляются по запросу».</p><p><strong>Правила</strong>:</p><ul class="wp-block-list"><li>Разделяйте «бизнес‑ограничения» (что показываем и кому) и «технические» (что разрешает система). Должно быть прозрачно, почему сущность или операция скрыта или недоступна. </li><li>Желательно сопровождать такие поля пояснениями — что именно ограничивает доступ и где отображается уведомление пользователю. </li><li>Все ограничения должны иметь понятные статусы (например, «активно», «ожидает проверки», «временно снято с продажи») и быть управляемыми, а не жёстко зашитыми в код.</li></ul><p><strong>Пример</strong>:</p><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p>В e-com для разных товаров могут быть установлены разные ограничения: «показывать только B2B», «не продавать в определённых странах», «ограничение по возрасту 18+».</p><p>В CRM доступ ко всем сделкам может быть доступен только пользователям с отмеченным полем «Полный доступ».</p></div><p><strong>Риски</strong>:</p><ul class="wp-block-list"><li>Скрытые ограничения ломают пользовательский опыт. Если это не предусмотрено специально, всегда сообщайте об ограничениях тем, кого они касаются. </li><li>Разные правила на фронте и бэкенде почти всегда приводят к несоответствиям. Лучше делать основную логику на сервере, а клиенту (браузеру или приложению) доверять только визуальное отображение.</li><li>При массовых изменениях может возникнуть путаница. Например, когда правила блокировок не синхронизированы между странами или каналами продаж.</li></ul><h2 class="wp-block-heading">Собственно, фиксация</h2><p>Теперь, когда с паттернами стало немного понятнее, давайте попробуем всё это зафиксировать. </p><p>Для каждого свойства сущности я советую создавать структурированный паспорт, чтобы команда чётко и однозначно понимала его назначение, формат и роль в продукте. Такой подход помогает избежать путаницы, ускоряет разработку и облегчает коммуникацию между дизайнерами, аналитиками и разработчиками.</p><p>Ниже я буду рассказывать про каждый аспект фиксации свойств и приводить пример в виде таблицы. Но так как формат блога не способствует созданию больших (и читаемых) таблиц, то я буду приводить только тот фрагмент, который относится к разделу. В конце статьи вы найдёте полные примеры в виде файлов.</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Местами кое-что может показаться вам избыточным — и, скорее всего, так оно и есть. То, что может быть полезным в крупных продуктах с множеством ролей и подсистем, в небольших проектах порой только разводит бюрократию.</p><p></p></blockquote><h3 class="wp-block-heading">Основная информация</h3><p>Опишите, как поле называется в системе (код), какой у него тип данных (текст, число, дата и тп), обязательно ли оно для заполнения, приведите примеры. Добавьте пояснение, зачем это поле нужно, какую задачу решает.</p><p>Пример основной информации о сущности «Товар»:</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Название</th><th>Код</th><th>Тип данных</th><th>Обяз.</th><th>Пример</th><th>Описание</th></tr></thead><tbody><tr><td>ID</td><td><code>id</code></td><td><code>int</code></td><td>Да</td><td>10245</td><td>Уникальный идентификатор записи, обязательное поле, помогает системе отличать товары друг от друга</td></tr><tr><td>Название</td><td><code>title</code></td><td><code>text</code></td><td>Да</td><td>Кроссовки Nike Air Zoom</td><td>Отображает название товара в каталоге, поиске и карточке товара</td></tr><tr><td>Цена</td><td><code>price</code></td><td><code>float</code></td><td>Да</td><td>1499</td><td>Хранит цену товара для отображения, сортировки и операций</td></tr><tr><td>Категория</td><td><code>category</code></td><td><code>ref</code></td><td>Да</td><td>Обувь</td><td>Определяет, к какому разделу относится товар</td></tr><tr><td>Цвет</td><td><code>color</code></td><td><code>enum</code></td><td>Нет</td><td>чёрный</td><td>Хранит название цвета, используется для фильтрации и отображения вариаций</td></tr></tbody></table></figure></div><p>Обратите внимание на тип данных: в различных системах типы данных могут обозначаться по-разному, при работе с IA желательно придерживаться какого-то единого, понятного всем, формата. Конкретно здесь:</p><ul class="wp-block-list"><li><code>int</code> — простое целое число;</li><li><code>text</code> — текст без явных ограничений в типе данных (не <a href="https://en.wikipedia.org/wiki/Varchar">varchar</a>, например);</li><li><code>float</code> — число с плавающей точкой (3.23);</li><li><code>ref</code> — ссылка на другую сущность, reference;</li><li><code>enum</code> — его вы уже знаете, нормализованный словарь.</li></ul><h3 class="wp-block-heading">Источник и валидация</h3><p>Откуда берётся значение и как проверяется. Укажите, поступает ли значение от пользователя, из импорта, внешней системы или вычисляется автоматически. Опишите правила проверки (валидации): допустимые диапазоны, форматы, обязательные символы. Также стоит указать, что происходит, если значение не проходит проверку (ошибка, предупреждение, автозамена).</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Название</th><th>Источник</th><th>Валидация</th></tr></thead><tbody><tr><td>ID</td><td>Генерируется автоматически системой</td><td>Проверяется на уникальность</td></tr><tr><td>Название</td><td>Вводится контент-менеджером</td><td>Проверяется на длину (не более 120 символов) и отсутствие запрещённых слов</td></tr><tr><td>Цена</td><td>Берётся из каталога поставщика</td><td>Проверяется на диапазон 1-999999, если меньше или больше — система выдаёт ошибку</td></tr><tr><td>Категория</td><td>Выбирается из справочника категорий</td><td>Если категория не найдена, выводится предупреждение, товар не заводится в систему</td></tr><tr><td>Цвет</td><td>Выбирается из списка доступных цветов</td><td>Проверяется по справочнику цветов и допустимым синонимам</td></tr></tbody></table></figure></div><h3 class="wp-block-heading">Индексация и поиск</h3><p>Как используется в поиске, фильтрах и аналитике. Опишите, участвует ли поле в поиске или фасетах, влияет ли оно на фильтрацию, сортировку и аналитику. Укажите, какие сценарии зависят от него (поиск по названию, сортировка по цене, фильтр по цвету). Добавьте, нужна ли регулярная переиндексация и как часто.</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Название</th><th>Индексация и поиск</th></tr></thead><tbody><tr><td>ID</td><td>Не участвует в поиске, используется для связи записей и аналитики</td></tr><tr><td>Название</td><td>Основное поисковое поле, влияет на релевантность результатов</td></tr><tr><td>Цена</td><td>Фасетное поле, используется для сортировки и фильтров «от‑до»</td></tr><tr><td>Категория</td><td>Участвует в навигации и фасетах; влияет на группировку и хлебные крошки</td></tr><tr><td>Цвет</td><td>Фасетное поле, помогает пользователям фильтровать товары по цвету</td></tr></tbody></table></figure></div><h3 class="wp-block-heading">Владение и контекст</h3><p>Кто отвечает за поле и где оно используется. Назначьте владельца поля — человека или роль, которая следит за его актуальностью (категорийный менеджер, контент-редактор, разработчик). Опишите, в каких интерфейсах поле отображается и кто взаимодействует с ним.</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Название</th><th>Ответственный</th><th>Где используется</th></tr></thead><tbody><tr><td>ID</td><td>Ответственность разработки</td><td>Используется системой, не отображается пользователям</td></tr><tr><td>Название</td><td>Контент-редактор</td><td>Отображается в каталоге, на карточке товара и в результатах поиска</td></tr><tr><td>Цена</td><td>Категорийный менеджер</td><td>Отображается в каталоге, корзине, аналитических отчётах</td></tr><tr><td>Категория</td><td>Маркетолог или контент-менеджер</td><td>Влияет на навигацию и структуру сайта, отображается в каталоге и карточке товара</td></tr><tr><td>Цвет</td><td>Контент-менеджер</td><td>Отображается в фильтрах и карточках товаров</td></tr></tbody></table></figure></div><h3 class="wp-block-heading">Жизненный цикл и обновление</h3><p>Как часто меняется поле. Разделите поля по типу обновления: редактируемые пользователем, автоматически пересчитываемые системой, импортируемые из внешних источников. Укажите частоту проверки актуальности и правила пересмотра.</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Название</th><th>Кем и как часто обновляется</th></tr></thead><tbody><tr><td>ID</td><td>Не меняется после создания</td></tr><tr><td>Название</td><td>Может редактироваться контент-редактором при обновлении ассортимента</td></tr><tr><td>Цена</td><td>Обновляется автоматически при изменении прайса, раз в сутки</td></tr><tr><td>Категория</td><td>Изменяется редко, при реструктуризации каталога</td></tr><tr><td>Цвет</td><td>Обновляется при появлении новых вариаций</td></tr></tbody></table></figure></div><h3 class="wp-block-heading">Нормализация и перевод значений</h3><p>Как поддерживается единообразие. Опишите, как поле очищается и приводится к общему формату: регистр, язык, синонимы, стандарты записи. Если данные многоязычные — уточните правила перевода. Добавьте примеры типичных ошибок и корректного вида.</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Название</th><th>Форматирование</th></tr></thead><tbody><tr><td>ID</td><td>Форматируется как число без ведущих нулей</td></tr><tr><td>Название</td><td>Очищается от лишних пробелов и специальных символов</td></tr><tr><td>Цена</td><td>Хранится как число в одной валюте (например, в рублях)</td></tr><tr><td>Категория</td><td>Нормализуется по справочнику категорий</td></tr><tr><td>Цвет</td><td>Приводится к единому значению («чёрный» = «black» = «черный»)</td></tr></tbody></table></figure></div><h3 class="wp-block-heading">Таблица свойств (Entity Attribute Matrix)</h3><p>В итоге для каждой сущности у вас появится единая таблица, где перечислены все поля с их типом, источником, обязательностью, правилами и владельцем. Она должна стать единым источником правды для всей проектной команды: от дизайнеров с аналитиками до разработчиков с архитекторами. Такая таблица поможет поддерживать актуальность архитектуры данных и синхронизировать работу API, интерфейсов и аналитики.</p><p>Обязательно ведите версионирование: когда и кем изменялась таблица, что именно было изменено. Это позволит, при необходимости, провести трассировку изменений (например, при расхождении информационной архитектуры с программной реализацией). </p><p>Ну и напоследок, как и обещал, полная таблица свойств из этой статьи:</p><div class="wp-block-file"><a id="wp-block-file--media-0fe6a47b-97b1-48ce-92ce-d15ae38b29d1" href="https://sherer.pro/content/uploads/2025/11/Primer-opisaniya-informacionnoy-sushchnosti-Tovar.xlsx">Пример описания информационной сущности Товар</a><a href="https://sherer.pro/content/uploads/2025/11/Primer-opisaniya-informacionnoy-sushchnosti-Tovar.xlsx" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-0fe6a47b-97b1-48ce-92ce-d15ae38b29d1">Скачать</a></div><p>Не переключайтесь, в цикле будет ещё как минимум две статьи.</p><p>Запись <a href="https://sherer.pro/blog/informacionnaya-arhitektura-sushchnosti-vol-3/">Информационная архитектура: сущности (практика, vol.2)</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></content:encoded></item><item><title>Информационная архитектура: сущности (практика, vol.1)</title><link>https://sherer.pro/blog/informacionnaya-arhitektura-sushchnosti-vol-2/</link><dc:creator><![CDATA[Павел Шерер]]></dc:creator><pubDate>Tue, 28 Oct 2025 14:18:44 +0000</pubDate><category><![CDATA[UX/UI]]></category><category><![CDATA[Аналитика]]></category><category><![CDATA[Технический дизайн]]></category><category><![CDATA[аналитика]]></category><category><![CDATA[гайд]]></category><category><![CDATA[информационная архитектура]]></category><guid isPermaLink="false">https://sherer.pro/?p=4601</guid><description><![CDATA[<p>Вторая часть про сущности в ИА, теперь с упором на практику: от сбора данных до выявления связей и таксономий.</p><p>Запись <a href="https://sherer.pro/blog/informacionnaya-arhitektura-sushchnosti-vol-2/">Информационная архитектура: сущности (практика, vol.1)</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></description><content:encoded><![CDATA[<p>В предыдущей <a href="https://sherer.pro/blog/informacionnaya-arhitektura-sushchnosti-vol-1/">статье</a> цикла мы разобрались, что такое информационные сущности, какие бывают типы свойств и базовые связи, прошлись по таксономиям и классификациям. Теперь давайте приступим к более практической части. </p><h2 class="wp-block-heading">Небольшое вступление</h2><p>На самом деле, работу над информационной архитектурой не всегда можно унифицировать, загнать в стандарты и фиксированные этапы. Иногда вы будете что-то упускать и потом возвращаться, это нормально. А часто, напротив, какие-то ответы уже есть в проектной документации — и тогда нужно просто собрать всё в одном месте и раскрасить оставшиеся «белые пятна».</p><p>Рассматривайте шаги, описанные ниже, исключительно как советы опытного архитектора, и ни в коем случае не как чёткие инструкции, которым надо слепо следовать. Более того, в реальных продуктах я сам не всегда всё это делаю — просто потому что не всегда в этом есть необходимость.</p><h2 class="wp-block-heading">Подготовка: контекст и границы</h2><p>Многие советы из этого раздела так или иначе перекликаются с обычной работой над продуктом (формирование границ, фиксация метрик и прочее). Если у вас уже есть эти данные, прекрасно, переиспользуйте их. Если же нет, то это может стать неплохим поводом подсветить слабые места продуктового подхода.</p><h3 class="wp-block-heading">Цель продукта</h3><p>Начните с формулировки основной пользовательской ценности и трёх–пяти задач, ради которых продукт вообще существует. Например: «заказать доставку еды за 3 клика», «найти нужную деталь по артикулу», «сравнить тарифы по параметрам».</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>В сложных продуктах может быть сильно больше 3-5 ключевых задач. В этом случае рекомендую декомпозировать его на логические или функциональные компоненты — и в каждом из них уже выводить свои цели и задачи.</p></blockquote><p>Для каждой задачи задайте измеримые KPI: «среднее время до результата (time‑to‑task)», «конверсия в целевое действие», «доля успешных сценариев» и подобные.</p><h3 class="wp-block-heading">Границы домена</h3><p>Составьте карту предметной области: какие объекты и операции в неё входят, а какие находятся за её пределами. Например, для маркетплейса внутрь попадают товары, продавцы, категории и заказы, а расчёт комиссий или логистика могут быть вынесены в соседние сервисы. Это защитит команду от размывания фокуса и неконтролируемого расширения требований.</p><h3 class="wp-block-heading">Источник истины</h3><p>Определите, где хранятся все артефакты ИА: таблицы сущностей, словари терминов, фасеты, схемы связей и тд. Лучше всего, если это будет ваша внутренняя вики, типа <a href="https://www.atlassian.com/software/confluence" target="_blank" rel="noreferrer noopener nofollow">Confluence</a>. Для диаграмм и визуальных схем можете использовать <a href="https://www.drawio.com" target="_blank" rel="noreferrer noopener nofollow">draw.io</a> (благо, он встраивается почти куда угодно) или <a href="https://www.figma.com/figjam/" target="_blank" rel="noreferrer noopener nofollow">FigJam</a>.</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Важно, чтобы был один актуальный источник, а не десяток несвязанных и противоречивых документов.</p></blockquote><p>Назначьте владельцев этих артефактов и регламент обновления: кто, как часто и по какому триггеру правит данные, кому сообщается об изменениях. </p><h3 class="wp-block-heading">Согласование терминологии</h3><p>Создайте единый глоссарий терминов, где каждое понятие имеет согласованное определение. Например: в интерфейсе, в аналитике и в БД термин «пользователь» должен значить одно и то же, а не три разных понятия: аккаунт, клиент и автор. Я встречал системы, где одна и та же информационная сущность в одном месте называлась «пользователь», в другом «клиент», а в третьем «посетитель». Не надо так.</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Хорошо организованный глоссарий устраняет двусмысленности и предотвращает непонимание между аналитиками, дизайнерами и разработчиками. </p></blockquote><h2 class="wp-block-heading">Декомпозиция: перечень сущностей</h2><p>После того как определены контекст и границы продукта, наступает этап декомпозиции — разбиения системы на отдельные сущности. На этом шаге мы превращаем абстрактные понятия («контент», «пользователи», «данные») в конкретные элементы модели, с которыми можно работать, описывать их свойства и связи. </p><p>Цель здесь простая: увидеть полную картину того, из чего состоит продукт и как эти части взаимодействуют между собой.</p><h3 class="wp-block-heading">Определение типов</h3><p>Пройдитесь по всем сценариям вашего продукта и выпишите <strong>устойчивые типы информации</strong>: «товар», «категория», «метка/тег», «пользователь», «заказ», «корзина», «страница» и тп. Добавьте сюда <strong>вспомогательные</strong> и <strong>производные </strong>сущности, которые не видны пользователю напрямую, но обеспечивают работу системы — например, «транзакция», «сессия», «ревизия».</p><p>Скорее всего, на этом этапе вы упустите какие-то объекты, ничего страшного. Как я уже говорил, работа над IA — не всегда строго последовательный процесс. Вернётесь, как найдёте ошибку.</p><h3 class="wp-block-heading">Описание сущности</h3><p>Для каждой сущности кратко опишите: </p><ul class="wp-block-list"><li><strong>роль</strong> (что делает эта сущность, зачем она нужна);</li><li><strong>жизненный цикл</strong> (от создания до удаления или архивации);</li><li><strong>точки появления в интерфейсе</strong> (можно прям названия экранов);</li><li><strong>обязательные операции</strong> (создать/редактировать/найти/связать). </li></ul><p>Тут важно не уходить в дебри и не погружаться в детальное проектирование. Вот вам пара простых примеров: </p><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p><strong>Товар</strong></p><p><strong>Роль:</strong> бизнес-сущность, описывает продаваемую единицу ассортимента и используется в каталоге, карточке товара и отчётности.</p><p><strong>Жизненный цикл:</strong> создаётся продавцом или контент-менеджером, редактируется при обновлении данных, архивируется при снятии с продажи.</p><p><strong>Точки появления:</strong> каталог, результаты поиска, карточка товара, блоки рекомендаций.</p><p><strong>Операции:</strong> создать, редактировать, связать с категорией и тегами, добавить в акцию или архивировать.</p></div><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p><strong>Пользователь</strong></p><p><strong>Роль:</strong> системная сущность, представляет зарегистрированного клиента или участника системы.</p><p><strong>Жизненный цикл:</strong> создаётся автоматически при регистрации или импорте из CRM, обновляется при изменении профиля, может быть деактивирован или удалён.</p><p><strong>Точки появления:</strong> личный кабинет, заказы, отзывы, админ-панель.</p><p><strong>Операции:</strong> регистрация, авторизация, редактирование профиля, привязка к заказам или организациям.</p></div><h3 class="wp-block-heading">Проверка на дубликаты</h3><p>Проверьте, нет ли <strong>дублирующих или пересекающихся сущностей</strong>: если у вас есть и «автор», и «пользователь», возможно, это одно и то же с разными контекстами. Тогда их лучше объединить в одну сущность и добавить поле «роль» или «тип».</p><h3 class="wp-block-heading">Закрепление ответственных</h3><p>Для сложных систем составьте <strong>матрицу принадлежности</strong>: кто владелец данных по каждой сущности (продукт, контент, аналитика), где они хранятся и как обновляются. Опять же, не уходите в детали, здесь важно оставаться на высоком уровне абстракции.</p><p>Вот простенький пример такой матрицы для e-com:</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Сущность</th><th>Владелец</th><th>Хранилище</th><th>Канал обновления</th><th>Комментарий</th></tr></thead><tbody><tr><td>Товар</td><td>Продакт-менеджер,<br>Контент-отдел</td><td>CMS</td><td>Импорт из ERP, ручное редактирование</td><td>Данные синхронизируются ежедневно</td></tr><tr><td>Категория</td><td>Контент-отдел</td><td>CMS</td><td>Ручное обновление, ревью раз в квартал</td><td>Согласование с SEO и маркетингом</td></tr><tr><td>Пользователь</td><td>Аналитика</td><td>CRM</td><td>Регистрация, API</td><td>Обновление при каждом входе</td></tr><tr><td>Заказ</td><td>Финансы</td><td>ERP</td><td>Автоматическая синхронизация</td><td>Источник для отчётности</td></tr><tr><td>Тег</td><td>Контент-отдел</td><td>CMS</td><td>Ручное добавление, периодическая чистка</td><td>Проверка дубликатов перед публикацией</td></tr></tbody></table></figure></div><p>Такая таблица помогает выстроить процессы и избежать ситуаций, когда разные отделы изменяют одни и те же сущности без синхронизации.</p><h3 class="wp-block-heading">Выработка метрик</h3><p>Дополнительно укажите <strong>метрики для каждой сущности</strong> — показатели того, что она используется и актуальна. Вот несколько примеров:</p><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p><strong>Доля заполненных полей</strong> — процент карточек, где заполнены все обязательные атрибуты (например, описание, фото, цена, категория).</p><p><strong>Частота обращений</strong> — сколько раз сущность запрашивается пользователями или системами в сутки/неделю (например, просмотры карточек товаров или загрузка профилей).</p><p><strong>Связность</strong> — среднее количество связей с другими сущностями (например, число тегов на статью, товаров в категории).</p><p><strong>Актуальность данных</strong> — доля сущностей, обновлённых за последние N дней.</p><p><strong>Ошибки и дубли</strong> — количество некорректных или дублирующих записей в системе.</p><p><strong>Использование в сценариях</strong> — сколько продуктовых сценариев или отчётов опираются на эту сущность.</p></div><p>Эти показатели помогут оценивать зрелость и здоровье информационной архитектуры, выявлять запущенные участки и планировать развитие модели данных.</p><h2 class="wp-block-heading">Классификация: таксономии, уровни и операции</h2><p>После того как сущности выделены и описаны, важно понять, как они группируются и взаимодействуют в структуре продукта. Этот этап превращает «список объектов» в осмысленную систему: мы определяем, какие сущности являются базовыми разделами, какие служат фильтрами или связками, и как пользователь перемещается между ними. </p><p>Классификация помогает превратить набор данных в удобную навигацию, а архитектуру — в понятную карту продукта.</p><h3 class="wp-block-heading">Типы таксономий</h3><p>Разведите <strong>иерархические</strong> (категории, разделы, рубрики) и <strong>плоские</strong> (теги, темы, ключевые слова) таксономии. Определите, какие сущности формируют структуру навигации, а какие служат только для связей или фильтрации. </p><p>Пример, по традиции, из e-com:</p><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p>Категории формируют иерархическое дерево меню, которое задаёт маршрутизацию и навигацию: «Одежда» → «Женская» → «Блузки».</p><p>Теги «скидка», «новинка», «распродажа» или «эксклюзив» применяются как плоские фильтры — независимые признаки, не влияющие на структуру меню, но позволяющие пользователю собирать нужные срезы данных.</p><p>В результате одна и та же карточка товара может одновременно находиться в нескольких категориях и иметь множество тегов, отражающих её свойства или состояние.</p></div><h3 class="wp-block-heading">Уровни сущностей</h3><p>Назначьте <strong>уровень сущности</strong> — высокий, средний или низкий:</p><ul class="wp-block-list"><li>Высокие уровни — это корневые разделы и хабы, которые формируют скелет навигации и точку входа в систему. </li><li>Средние уровни — это страницы‑коллекции, объединяющие однотипные объекты. </li><li>Низкие уровни — карточки конкретных объектов, где реализуются операции и принимаются решения. </li></ul><p>Пример распределения сущностей по уровням:</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Уровень</th><th>Сущность</th><th>Тип задач пользователя</th><th>Тип контента</th></tr></thead><tbody><tr><td>Высокий</td><td>Каталог, Блог, Документация</td><td>Обзор, переход к разделу</td><td>Навигационный</td></tr><tr><td>Средний</td><td>Категория, Раздел, Проект</td><td>Сравнение, поиск</td><td>Коллекционный</td></tr><tr><td>Низкий</td><td>Товар, Статья, Пользователь</td><td>Изучение, действие, покупка</td><td>Объектный</td></tr></tbody></table></figure></div><p>Такое разделение помогает проектировать маршрут от главной страницы к объекту и обратно, управлять глубиной дерева и оптимизировать путь пользователя.</p><h3 class="wp-block-heading">Группы, фасеты и фильтры</h3><p>Сформируйте <strong>операционные группы</strong>, в которых будет понятно, где живёт каждая сущность (в каком разделе, хабе или подсистеме), какие фасеты с фильтрами к ней применимы и какие действия доступны. Это создаёт связь между информационной архитектурой и интерфейсом.</p><p>Пример разницы между статьёй и товаром:</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Сущность</th><th>Раздел</th><th>Фасеты и фильтры</th><th>Основные операции</th></tr></thead><tbody><tr><td>Товар</td><td>Каталог</td><td>Бренд, Цена, Размер, Цвет</td><td>Купить, Сравнить, Добавить в избранное</td></tr><tr><td>Статья</td><td>Медиа</td><td>Рубрика, Теги, Дата</td><td>Читать, Поделиться, Добавить в подборку</td></tr></tbody></table></figure></div><h3 class="wp-block-heading">Приоритеты и наследование</h3><p>Добавьте <strong>описание приоритетов и наследования таксономий</strong>: что отображается в интерфейсе, что используется для аналитики и SEO, а что служит внутренней классификацией. </p><p>Например:</p><div class="wp-block-group highlighted is-layout-constrained wp-block-group-is-layout-constrained"><p>Для корпоративного портала «Тип документа» может быть фасетом (для фильтрации и аналитики), а «Отдел» — иерархической категорией (для навигации и прав доступа).</p><p>В коммерции «Категория» и «Подкатегория» определяют URL и хлебные крошки, но не отображаются в фасетах, где остаются только фильтры «Бренд», «Цена», «Материал».</p></div><p>Обязательно фиксируйте ещё и правила наследования: категория → подкатегория → объект. В интерфейсе это проявляется как автоматическое применение фильтров при переходе на нижний уровень.</p><h3 class="wp-block-heading">Управление обновлениями</h3><p>Зафиксируйте <strong>методы актуализации</strong> таксономий: кто отвечает за создание новых терминов, их перевод, синхронизацию и архивирование. Опишите процессы ревизии, чтобы не допустить появления дубликатов или устаревших меток. </p><p>Например, контент‑отдел добавляет новые категории раз в квартал, SEO‑отдел проводит сверку алиасов, а аналитика проверяет наличие связанных данных. </p><p>Для крупных продуктов полезно ввести аудит изменений с фиксированием автора, даты пересмотра и краткого описания причины (например, «слияние категорий», «переименование фасета»).</p><h2 class="wp-block-heading">Выявление связей: кардинальности и контексты</h2><p>В теоретической части цикла мы <a href="https://sherer.pro/blog/informacionnaya-arhitektura-sushchnosti-vol-1/#4-svyazi-mezhdu-sushchnostyami">говорили</a> о кардинальностях, хранении, сценариях и индексах. Теперь давайте взглянем на то, как к этом прийти. </p><h3 class="wp-block-heading">Кардинальности</h3><p>Определение кардинальности было в прошлой статье, подробно на термине останавливаться не стану. Добавлю только, что для каждой связи крайне желательно описать:</p><ul class="wp-block-list"><li>с чем осуществляется связь,</li><li>тип связи, </li><li>глубину вложенности и </li><li>пример (при необходимости).</li></ul><p>Вот как это может выглядеть для сущности «товар»:</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Связан с</th><th>Кардин.</th><th>Глубина вложенности</th><th>Описание связи и кардинальности</th></tr></thead><tbody><tr><td>Категория</td><td>1:N</td><td>2-3 уровня</td><td>Иерархическая таксономия. Один товар принадлежит одной конечной категории, но категория содержит множество товаров. В родительской категории находятся все товары дочерних.</td></tr><tr><td>Тег</td><td>M:N</td><td>1 уровень</td><td>Плоская таксономия. Один товар может иметь несколько тегов, каждый тег применяется к нескольким товарам.</td></tr><tr><td>Заказ</td><td>M:N</td><td>1 уровень</td><td>Связанная сущность. Один товар может входить во множество заказов. В одном заказе может быть несколько товаров.</td></tr><tr><td>Отзыв</td><td>1:N</td><td>1 уровень</td><td>Связанная (дочерняя) сущность. У одного товара может быть множество отзывов.</td></tr><tr><td>Пользователь</td><td>M:N</td><td>1 уровень</td><td>Связанная сущность. Пользователь может взаимодействовать с несколькими товарами (просмотры, избранное, история покупок). С одним товаром могут взаимодействовать множество пользователей.</td></tr></tbody></table></figure></div><p>Такая таблица может стать отличным началом для дальнейшей проработки связей.</p><h3 class="wp-block-heading">Контекстные связи</h3><p>Речь о связях вроде «похожие», «часто вместе», «варианты», «альтернативы» и так далее. Они используются в карточках, рекомендациях и аналитике пользовательских сценариев. Например, в e-commerce это может быть «с этим товаром часто покупают», а в медиа — «похожие статьи» или «продолжение серии».</p><p>Важно разделять логические связи (на уровне ИА) и вычисляемые (на уровне аналитики и рекомендательных алгоритмов).</p><p>Вот тот же пример, но с добавленными контекстными связями. Здесь и дальше я буду удалять лишние столбцы для читаемости, но в реальной таблице их лучше бы оставлять (или делать перекрёстные таблицы):</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Связан с</th><th>Контекст</th><th>Тип контекста</th></tr></thead><tbody><tr><td>Категория</td><td>«Товары в этой категории» — аналогичные товары из категории.</td><td>Логический</td></tr><tr><td>Тег</td><td>«Похожие товары» — товары с пересекающимися тегами.</td><td>Логический</td></tr><tr><td>Заказ</td><td>&#8212;</td><td>&#8212;</td></tr><tr><td>Отзыв</td><td>&#8212;</td><td>&#8212;</td></tr><tr><td>Пользователь</td><td>«Вам понравится» — на основе поведенческих данных и предыдущих заказов.</td><td>Вычисляемый</td></tr></tbody></table></figure></div><p>Разумеется, эта табличка сильно упрощает реальность. Даже в простеньком интернет-магазине контекстная связь «Похожие товары» будет, скорее, <em>вычисляемой</em> на основе многих факторов, а не только тегов.</p><h3 class="wp-block-heading">Ключевые и вариативные связи</h3><p>Выделите два типа связей: </p><ul class="wp-block-list"><li><strong>ключевые (частые) связи</strong> — они должны быть быстрыми, индексируемыми, проверяемыми на целостность; </li><li><strong>вариативные</strong> — их можно хранить гибко, например, в JSON или агрегированных таблицах.</li></ul><p>Вот тот же пример:</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Связан с</th><th>Тип связи</th><th>Комментарий к типу связи</th></tr></thead><tbody><tr><td>Категория</td><td>Ключевая</td><td>Основная связь для навигации и фасетной фильтрации, требует строгой целостности и индексации.</td></tr><tr><td>Тег</td><td>Вариативная</td><td>Может меняться часто, используется для быстрых выборок и контекстных срезов, хранится гибко.</td></tr><tr><td>Заказ</td><td>Ключевая</td><td>Одна из бизнес‑критичных связей, формирует аналитику продаж и отчётность, требует транзакционной целостности.</td></tr><tr><td>Отзыв</td><td>Вариативная</td><td>Данные обновляются динамически пользователями; важно для контентных сервисов, но не влияет на бизнес‑логику.</td></tr><tr><td>Пользователь</td><td>Вариативная</td><td>Основана на поведенческих данных (просмотры, избранное, покупки), часто хранится в отдельных логах или кэше.</td></tr></tbody></table></figure></div><h3 class="wp-block-heading">Направление и зависимости связей</h3><p>Направления связей и зависимость объектов часто определяет их поведение. Заказ зависит от пользователя, а не наоборот. Комментарий зависит от поста, а не пост от комментария. Такие зависимости влияют на каскадное удаление и миграции, это очень важная часть ИА и дальнейшего проектирования баз данных.</p><p>Вот как это может выглядеть:</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Связан с</th><th>Направление связи</th><th>Зависимость</th><th>Описание</th></tr></thead><tbody><tr><td>Категория</td><td>Категория → Товар</td><td>Товар зависит от категории</td><td>При удалении категории товары должны быть перемещены, переназначены или архивированы.</td></tr><tr><td>Тег</td><td>Двусторонняя (M:N)</td><td>Независимая</td><td>При удалении тега удаляются только связи, товары остаются без изменений.</td></tr><tr><td>Заказ</td><td>Товар → Заказ</td><td>Заказ зависит от товара</td><td>Заказ хранит ссылки на товары. При удалении товара заказы сохраняют данные о позиции, помечая их как архивные или недоступные.</td></tr><tr><td>Отзыв</td><td>Товар → Отзыв</td><td>Отзыв зависит от товара</td><td>При удалении товара отзывы удаляются или помечаются как «осиротевшие».</td></tr><tr><td>Пользователь</td><td>Двусторонняя (поведение)</td><td>Частично</td><td>Поведенческие связи с товаром (просмотры, избранное) можно анонимизировать или обнулить при удалении пользователя.</td></tr></tbody></table></figure></div><p>На этом, пожалуй, можно завершить историю про выявление связей между сущностями. Мы и так одной ногой ступили на зыбкую почву <strong>дизайна баз данных</strong>. Дальше пусть взрослые разбираются.</p><h2 class="wp-block-heading">Итог</h2><p>Мы ещё не успели пройтись по самому интересному — выявлению и фиксации свойств сущностей, схематизации всего этого добра. Но статья и так вышла объёмной, об этом будет в следующей части серии.</p><p>Запись <a href="https://sherer.pro/blog/informacionnaya-arhitektura-sushchnosti-vol-2/">Информационная архитектура: сущности (практика, vol.1)</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></content:encoded></item><item><title>Информационная архитектура: сущности (теория)</title><link>https://sherer.pro/blog/informacionnaya-arhitektura-sushchnosti-vol-1/</link><dc:creator><![CDATA[Павел Шерер]]></dc:creator><pubDate>Sat, 18 Oct 2025 15:02:24 +0000</pubDate><category><![CDATA[UX/UI]]></category><category><![CDATA[Аналитика]]></category><category><![CDATA[Технический дизайн]]></category><category><![CDATA[аналитика]]></category><category><![CDATA[гайд]]></category><category><![CDATA[информационная архитектура]]></category><guid isPermaLink="false">https://sherer.pro/?p=2411</guid><description><![CDATA[<p>Что такое информационные сущности, зачем они нужны и из чего состоят.</p><p>Запись <a href="https://sherer.pro/blog/informacionnaya-arhitektura-sushchnosti-vol-1/">Информационная архитектура: сущности (теория)</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></description><content:encoded><![CDATA[<p>Сущности — это «кирпичи» информационной архитектуры. Правильно выделенные сущности, их свойства и связи задают масштабируемость продукта, качество поиска и фильтрации, логику навигации и эволюцию данных. В этой статье мы поговорим о том, как выявлять сущности, описывать их свойства, моделировать связи и таксономии (не запутывая при этом команду и пользователей).</p><h2 class="wp-block-heading">Вокабуляр</h2><p>Для начала давайте вспомним некоторые определения, которые помогут вам ориентироваться в этой статье:</p><p><strong>Информационная сущность</strong> — устойчивый тип информации в домене продукта (товар, пользователь, заказ, пост, коллекция, организация и тп), обладающий набором свойств и связей.</p><p><strong>Свойство сущности</strong> — характеристика, описывающая сущность количественно или качественно (название, цена, цвет, дата создания и тп). Свойства могут быть разных типов, заполняться и проверяться по разным правилам, быть «зависимыми» или нет.</p><p><strong>Таксономия</strong> — управляемая схема классификации, объединяющая сущности по общим признакам (категории, метки и прочие). Она создаёт структуру смысловых связей между сущностями, помогает группировать объекты, облегчает поиск и делает навигацию предсказуемой.</p><p><strong>Термин таксономии</strong> — конкретная единица этой классификации (например, категория «Кроссовки» в таксономии «Обувь»).</p><p><strong>Фасет</strong> — нормализованный атрибут, используемый для фильтрации и уточнения поиска (бренд, цвет, размер и тп).</p><h2 class="wp-block-heading">Что такое «сущность» и чем она не является</h2><p>Сущность всегда:</p><ul class="wp-block-list"><li>имеет <strong>роль</strong> в домене (зачем она нужна, какую задачу выполняет);</li><li>несёт <strong>набор свойств</strong> (атрибутов);</li><li>находится в <strong>связях</strong> с другими сущностями или таксономиями;</li><li>проходит <strong>жизненный цикл</strong> (например: создание, модерация, публикация, удаление).</li></ul><p>Из-за того, что терминология, как обычно, размыта, сущности легко можно спутать с чем-то, что ими не является, например:</p><ul class="wp-block-list"><li>со страницей/экраном (это <strong>представление</strong> сущности в одном из контекстов);</li><li>с UI‑компонентом (это <strong>способ отображения</strong> свойства или связи);</li><li>с таблицей БД (это <strong>реализация хранения</strong>, одна сущность может жить в нескольких таблицах и наоборот);</li><li>с бизнес‑процессом (это <strong>поведение</strong> вокруг данных: процесс «оформить заказ» использует сущности «корзина», «заказ», «платёж»).</li></ul><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Небольшая оговорка: иногда название <strong>сущности </strong>совпадает с названием <strong>представления</strong>, это абсолютно нормально. В контент‑ориентированных продуктах (CMS, документация, лендинги) тип «Страница» может быть <strong>полноценной контент‑сущностью</strong> с собственными свойствами (название, ярлык, текст, автор и тп) и жизненным циклом. Тезис «страница — не сущность» касается только путаницы между <strong>сущностью домена</strong> и <strong>экраном интерфейса</strong> (UI‑представлением).</p></blockquote><p>Сложно? На самом деле нет. Вот вам простой тест. Объект — это сущность, если содержит хотя бы 3 из следующих признаков:</p><ul class="wp-block-list"><li>имеет собственные свойства;</li><li>имеет связи с другими объектами;</li><li>повторяется во множестве экземпляров;</li><li>нужен в отчётности/поиске;</li><li>имеет собственные правила валидации/жизненный цикл.</li></ul><h2 class="wp-block-heading">Свойства сущности</h2><p>Как мы уже выяснили, у сущностей есть свойства. Это, пожалуй, самое важное, что отличает их от остальных объектов цифрового продукта. Давайте поговорим об этом чуть подробнее.</p><h3 class="wp-block-heading">Типы свойств</h3><p>Свойства могут быть нескольких типов:</p><ul class="wp-block-list"><li><strong>Базовые:</strong> идентификатор, название, описания и прочие. Это простые поля, которые содержат типовую информацию. Базовые свойства не ссылаются на другие объекты и, как правило, представлены в виде простых <em>типов</em> данных (строка, число, дата и тп).</li><li><strong>Ссылочные:</strong> внешние ключи на другие сущности (например, «идентификатор пользователя» в сущности «заказ»), а также термины таксономий (категория, метка, группа). Ссылочные свойства нужны для того, чтобы гарантированно связать сущности между собой и с терминами таксономий.</li><li><strong>Составные:</strong> свойства, которые включают в себя сразу несколько значений, объединённых одной логикой. Составные свойства могут быть однородными и неоднородными:<ul class="wp-block-list"><li><strong>однородные </strong>списки (например, изображения: <code>{url, alt},...</code>);</li><li><strong>неоднородные </strong>комплекты (например, габариты: <code>{weight, width, height, depth}</code>).</li></ul></li><li><strong>Вычисляемые:</strong> свойства, для фиксации (сохранения, отображения и тп) которых нужно сначала произвести какие-то операции. Например, это могут быть: цена со скидкой, количество на складе, агрегированный рейтинг.</li><li><strong>Технические:</strong> SKU/артикул, временные отметки, статусы модерации/публикации, флаги индексации. Технические свойства редко используются в визуальном представлении (например, в карточке товара из десятка технических свойств будет выводиться только артикул).</li><li><strong>Ограничительные:</strong> права доступа (ACL), владельцы, видимость. Их очень легко спутать с техническими, так как они тоже используются больше в логике, чем в представлении. Если сомневаетесь, задайте себе вопрос: «это свойство влияет на возможности пользователей?» — если да, то перед вами именно ограничительное свойство.</li></ul><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><em>И снова небольшое уточнение, чтобы избежать путаницы: типы&nbsp;<strong>свойств&nbsp;</strong>сущностей — не то же самое, что типы&nbsp;<strong>данных</strong>, которые эти свойства содержат. Например, если у нашей сущности «товар» есть свойство&nbsp;</em><code>title</code><em>&nbsp;(название), то тип&nbsp;свойства&nbsp;здесь —&nbsp;<strong>базовый</strong>, тогда как тип&nbsp;данных&nbsp;—&nbsp;<strong>строка</strong>. Подробнее о типах данных я писал&nbsp;</em><a href="https://sherer.pro/blog/dizajn-dannyh-chast-4-matchast-osnovy/#3-tipy-dannyh">здесь</a><em>.</em></p></blockquote><h3 class="wp-block-heading">Пример описания свойств</h3><p>Минимальный набор информации, которую желательно фиксировать при описании каждого свойства сущности:</p><ol class="wp-block-list"><li><strong>название</strong> — короткое имя свойства, одно-два слова;</li><li><strong>код</strong> — как это свойство будет называться в коде и базе данных;</li><li><strong>тип данных</strong> — строка, число, массив, объект, ссылка и тп;</li><li><strong>обязательность</strong> — обязано ли свойство быть заполненным, если отметка «да», то значение свойства не может быть пустым;</li><li><strong>пример</strong> — короткий пример заполнения свойства (если пример слишком длинный, он может быть обрезан);</li><li><strong>описание/комментарий</strong> — если требуется вносить какую-то дополнительную информацию.</li></ol><p>При желании, этот перечень можно дополнить дополнительными параметрами:</p><ol class="wp-block-list"><li><strong>источник </strong>— откуда берётся значение свойства (логика, подсистемы, интеграции и тп);</li><li><strong>валидации </strong>— базовое правило проверки значения свойства;</li><li><strong>индексация/поиск</strong> — участвует ли свойство в поиске и индексации, если да, то как;</li><li><strong>политика i18n</strong> — для локализуемых свойств: какие переводятся, какие нет;</li><li><strong>политикой заполнения</strong> — кто и когда обязан заполнить.</li></ol><p>Вот пример того, как могут фиксироваться свойства сущности «товар» (табличка получилась внушительная, скрольте влево):</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Название</th><th>Код</th><th>Тип данных</th><th>Обяза-тельно</th><th>Пример</th><th><strong>Описание/комментарий</strong></th><th>Источник</th><th>Валидация</th><th>И<strong>ндексация/поиск</strong></th></tr></thead><tbody><tr><td>Внутренний идентификатор</td><td><code>id</code></td><td><code>int</code></td><td>да</td><td><code>12345</code></td><td>Используется на бэкенде, на клиент не передаётся.</td><td>БД</td><td>уникальность</td><td>нет</td></tr><tr><td>Внешний идентификатор</td><td><code>sku</code></td><td><code>string</code></td><td>да</td><td><code>X-2025-01</code></td><td>Артикул, идентифицирует товар в URL.</td><td>БД</td><td>уникальность</td><td>точный</td></tr><tr><td>Название</td><td><code>title</code></td><td><code>string</code></td><td>да</td><td><code>Кроссовки X</code></td><td>&#8212;</td><td>ERP</td><td>5–120 символов</td><td>полнотекстовый</td></tr><tr><td>Описание</td><td><code>description</code></td><td><code>string</code></td><td>да</td><td><code>Летние кроссовки для самых...</code></td><td>&#8212;</td><td>ERP</td><td>200–2400 символов</td><td>полнотекстовый</td></tr><tr><td>Категория</td><td><code>category_id</code></td><td><code>ref</code></td><td>да</td><td><code>17</code></td><td>Идентификатор термина ключевой таксономии</td><td>Таксономия</td><td>существует</td><td>фасет</td></tr><tr><td>Габариты</td><td><code>dimensions</code></td><td><code>object</code></td><td>нет</td><td><code>{w:10,h:20,d:5}</code></td><td><code>w</code> &#8212; ширина,<br><code>h</code> &#8212; высота,<br><code>d</code> &#8212; глубина</td><td>ERP</td><td>диапазоны</td><td>фильтр</td></tr><tr><td>Изображения</td><td><code>images</code></td><td><code>list</code></td><td>да</td><td><code>['/upload/img1.jpg']</code></td><td>Список изображений товара, первое в списке — основное.</td><td>CDN</td><td>не пусто</td><td>нет</td></tr><tr><td>Цена</td><td><code>price</code></td><td><code>int</code></td><td>да</td><td><code>4990</code></td><td>Стоимость в рублях.</td><td>ERP</td><td>≥0</td><td>сортировка и фильтр</td></tr><tr><td>Скидка</td><td><code>discount</code></td><td><code>int</code></td><td>нет</td><td><code>20</code></td><td>Процент, на который снижается <code>price</code></td><td>ERP</td><td>целое число</td><td>нет</td></tr></tbody></table></figure></div><p>Такая фиксация свойств экономит кучу времени на разработке, интеграциях и отчётности. Дизайнеры и аналитики получают чёткий перечень с примерами, а разработчики намного более уверенно проектируют БД и жизненный цикл данных в продукте.</p><h3 class="wp-block-heading">Примеры по доменам</h3><p>Из-за того, что все продукты разные, домены в них тоже могут отличаться. В одном e-com сущность «товар» будет обладать одним набором свойств, в другом — совершенно иным. Порой очень хочется просто взять наработки с прошлого места работы и запихнуть их в текущую архитектуру «как есть». Призываю вас этого не делать, а всегда проектировать сущности, исходя из реалий продукта, процессов, потребностей пользователей и бизнес-задач.</p><p>Чтобы показать, насколько всё может отличаться от продукта к продукту, вот вам несколько примеров сущностей со свойствами из разных доменов:</p><div class="wp-block-group highlighted content-wide is-layout-constrained wp-block-group-is-layout-constrained"><figure class="wp-block-table"><table><thead><tr><th>Сущность</th><th>Свойства</th></tr></thead><tbody><tr><td>Пользователь</td><td><code>id</code>, <code>guid</code>, <code>email</code>, <code>login</code>, <code>password_hash</code>, <code>avatar</code>, <code>roles[]</code>, <code>org_id</code>, <code>created_at</code>, <code>last_seen_at</code></td></tr><tr><td>Каталог</td><td><code>id</code>, <code>type</code>, <code>parent_id</code>, <code>slug</code>, <code>default_facets[]</code>, <code>synonyms[]</code></td></tr><tr><td>Товар</td><td><code>id</code>, <code>sku</code>, <code>title</code>, <code>slug</code>, <code>description</code>, <code>images[]</code>, <code>price</code>, <code>currency</code>, <code>dimensions{}</code>, <code>weight</code>, <code>category_id</code>, <code>tags[]</code>, <code>stock_qty</code>, <code>rating</code>, <code>seller_id</code></td></tr><tr><td>Корзина</td><td><code>id</code>, <code>user_id</code>, <code>items[]</code>, <code>coupon</code>, <code>total_amount</code>, <code>currency</code>, <code>updated_at</code></td></tr><tr><td>Категория</td><td><code>id</code>, <code>parent_id</code>, <code>name</code>, <code>slug</code>, <code>synonyms[]</code>, <code>default_filters[]</code></td></tr><tr><td>Пост (медиа)</td><td><code>id</code>, <code>title</code>, <code>excerpt</code>, <code>body</code>, <code>author_id</code>, <code>category_id</code>, <code>tags[]</code>, <code>published_at</code>, <code>status</code></td></tr><tr><td>Организация (SaaS)</td><td><code>id</code>, <code>name</code>, <code>inn</code>, <code>slug</code>, <code>plan</code>, <code>seats</code>, <code>billing_account_id</code>, <code>status</code>, <code>created_at</code></td></tr></tbody></table></figure></div><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Обратите внимание, что категория здесь — информационная сущность, хотя она же — и термин таксономии. У терминов всегда есть собственные свойства, жизненный цикл и связи. Фиксировать ли их как сущности или описывать отдельно — решать вам.</p></blockquote><h2 class="wp-block-heading">Связи между сущностями</h2><p>Как я уже говорил, сущности почти всегда связаны как между собой, так и с терминами таксономии. Давайте теперь копнём поглубже.</p><h3 class="wp-block-heading">Кардинальности</h3><p>Кардинальность — это характеристика связи между двумя сущностями (таблицами, объектами, классами и т.д.), показывающая, сколько экземпляров одной сущности может быть связано с экземпляром другой. Проще говоря, это способ ответить на вопрос: «Сколько А может быть связано с одним B?» и наоборот.</p><p>Она лежит в основе информационной и логической архитектуры: без понимания кардинальностей невозможно правильно спроектировать базу данных, API, доменную модель или даже интерфейс.</p><p>Подробнее про кардинальности я <a href="https://sherer.pro/blog/dizajn-dannyh-chast-5-matchast-bazy-dannyh/#2-2-svyazi">писал</a> в цикле про дизайн данных, здесь пройдёмся коротко:</p><ul class="wp-block-list"><li><strong>Один-ко-одному, 1:1</strong> — связь, когда каждой записи одной сущности соответствует не более одной записи другой (аккаунт ↔ профиль). Используется для разделения личных и технических данных или выделения редко используемых атрибутов.</li><li><strong>Один-ко-многим, 1:N</strong> — наиболее частая связь: один объект верхнего уровня связан с множеством подчинённых (категория → товары; организация → проекты). Применяется для иерархий, коллекций и агрегатов.</li><li><strong>Многие-ко-многим, M:N</strong> — объект может быть связан с несколькими другими (товар ↔ теги; пост ↔ автор). Реализуется через промежуточные таблицы/сущности, содержащие идентификаторы обеих сторон и метаданные связи.</li></ul><h3 class="wp-block-heading">Хранение и производительность</h3><p>Выбор способа хранения связей напрямую влияет на скорость работы системы, гибкость изменений и устойчивость к росту данных. Здесь важно найти баланс между строгими структурированными связями и гибкими форматами, чтобы обеспечить масштабируемость, простоту поддержки и корректную работу поиска и аналитики.</p><p>Это ещё не дизайн баз данных, но первый шаг к нему.</p><h4 class="wp-block-heading">Ключевые, частые связи</h4><p>Реализуются как явными внешними ключами (Foreign Key, FK — ссылка из одной таблицы БД на запись другой таблицы), так и отдельными таблицами. Индексируются для быстрого поиска и каскадных операций (например, при удалении пользователя каскадом удаляются его профиль, способы оплаты и тп). Ключевые связи хорошо подходят для данных, которые часто запрашиваются и требуют согласованности.</p><p>Например, ключевой связью является связь пользователя и его профиля (1:1) или заказа и товара (1:N).</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b990154&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b990154" class="wp-block-image aligncenter size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="2096" height="1168" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2025/11/ia-entities-1.png" alt="Ключевая связь между сущностями в информационной архитектуре" class="wp-image-4639" srcset="https://sherer.pro/content/uploads/2025/11/ia-entities-1.png 2096w, https://sherer.pro/content/uploads/2025/11/ia-entities-1-1048x584.png 1048w, https://sherer.pro/content/uploads/2025/11/ia-entities-1-768x428.png 768w" sizes="auto, (max-width: 2096px) 100vw, 2096px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><h4 class="wp-block-heading">Вариативные, редкие связи</h4><p>Удобнее хранить в агрегированных структурах (JSON, массивы, ключ-значение) или связующих таблицах без строгих FK. Такой подход облегчает эволюцию схемы и интеграции с внешними источниками.</p><p>Пример вариативной связи: товар и теги (M:N через JSON или связующую таблицу) или пост и связанные материалы (список ссылок в массиве).</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b990457&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b990457" class="wp-block-image aligncenter size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="2096" height="1168" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2025/11/ia-entities-2.png" alt="Вариативная связь между сущностями в информационной архитектуре" class="wp-image-4640" srcset="https://sherer.pro/content/uploads/2025/11/ia-entities-2.png 2096w, https://sherer.pro/content/uploads/2025/11/ia-entities-2-1048x584.png 1048w, https://sherer.pro/content/uploads/2025/11/ia-entities-2-768x428.png 768w" sizes="auto, (max-width: 2096px) 100vw, 2096px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><h4 class="wp-block-heading">Комбинированный подход</h4><p>Сочетает строго типизированные связи для критичных сценариев (например, FK для заказов и пользователей) и гибкие структуры для второстепенных (например, свойства товара в JSON). Это компромисс между скоростью, расширяемостью и затратами на сопровождение.</p><p>Пример комбинированного подхода: заказ и пользователь (жёсткий FK) + история изменений в JSON, товар и его характеристики (основные поля + гибкое поле параметров).</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b990738&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b990738" class="wp-block-image aligncenter size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="2096" height="736" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2025/11/ia-entities-3.png" alt="Комбинированный подход к связям между сущностями в информационной архитектуре" class="wp-image-4641" srcset="https://sherer.pro/content/uploads/2025/11/ia-entities-3.png 2096w, https://sherer.pro/content/uploads/2025/11/ia-entities-3-1048x368.png 1048w, https://sherer.pro/content/uploads/2025/11/ia-entities-3-768x270.png 768w" sizes="auto, (max-width: 2096px) 100vw, 2096px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><h3 class="wp-block-heading">Поисковые сценарии и индексы</h3><p>Вот вы открыли свой любимый маркетплейс. Вбили в поле поиска нужный товар, отфильтровали по бренду и отсортировали результат по цене. Поздравляю, вы только что покрыли практически все поисковые сценарии.</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Поисковые сценарии — это практические случаи, когда пользователь взаимодействует с данными через поиск, фильтрацию и сортировку.</p></blockquote><p>Чтобы такие операции выполнялись быстро и точно, информационная модель должна поддерживать разные типы <em>индексов</em>. Индексы обеспечивают мгновенное обращение к нужным сущностям и позволяют формировать результаты без полного перебора данных.</p><p>Индексировать можно разные типы полей:</p><h4 class="wp-block-heading">Фасетные поля</h4><p>Категория, бренд, размер, цвет, материал и прочее. Хранятся в нормализованных словарях или связаны с терминами таксономий, индексируются отдельно. Это даёт возможность строить фильтры и считать количество элементов в каждой группе (это ещё называется «фасетные агрегации»). Чтобы ускорить отклик системы, важно хранить <em>предвычисленные частоты </em>— но это уже совсем мрак, оставим его архитекторам БД.</p><h4 class="wp-block-heading">Поисковые поля</h4><p>Используют полнотекстовые индексы и префиксные деревья для автодополнения и предложений. Помните, как вы вбиваете что-то в строку поиска, а вам показывают подсказки? Вот это оно. Здесь же добавляются морфологический анализ, поддержка синонимов, транслитерации и нечёткий поиск (<a href="https://habr.com/ru/articles/354032/">fuzzy search</a>).</p><h4 class="wp-block-heading">Сортировочные поля</h4><p>Числовые и временные индексы (цена, рейтинг, дата создания, популярность), обеспечивающие быстрые операции сортировки и пагинацию без нагрузки на базу данных.</p><h4 class="wp-block-heading">Сложно? Подождите, это ещё не всё</h4><p>Существует тьма технических приёмов, нацеленных на оптимизацию индексирования: применение комбинированных индексов по частым связкам <code>category_id + price</code>, денормализация популярных связей <code>product → category_name</code>, кэширование фасетных частот для снижения нагрузки и прочее. Но это вам так, если захочется погрузиться.</p><h2 class="wp-block-heading">Таксономии и «сквозные» свойства</h2><p>Правильная таксономия обеспечивает единый язык между пользователями, системой и бизнесом. Таксономии бывают нескольких типов, и каждая решает свою задачу:</p><h3 class="wp-block-heading">Иерархическая таксономия</h3><p>Древовидная структура терминов, где каждый элемент подчинён родительскому (например, дерево категорий или разделов). В таких таксономиях «родительство» обычно обеспечивается отдельным свойством, вроде <code>parent_id</code>.</p><p>Такая модель хорошо подходит для каталогов товаров, корпоративных порталов и CMS, где пользователи ожидают логичную последовательность разделов и вложенных подразделов.</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b990c27&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b990c27" class="wp-block-image aligncenter size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1446" height="680" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2025/10/ia-entities-4.png" alt="Пример иерархической таксономии" class="wp-image-4676" srcset="https://sherer.pro/content/uploads/2025/10/ia-entities-4.png 1446w, https://sherer.pro/content/uploads/2025/10/ia-entities-4-1048x493.png 1048w, https://sherer.pro/content/uploads/2025/10/ia-entities-4-768x361.png 768w" sizes="auto, (max-width: 1446px) 100vw, 1446px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p><strong>Преимущество:</strong> высокая предсказуемость навигации и простота в управлении.</p><p><strong>Недостаток:</strong> ограниченная гибкость и риск «похоронить» информацию слишком глубоко.</p><h3 class="wp-block-heading">Плоская таксономия</h3><p>Сеть меток, тем или ключевых слов, связанных с сущностями по принципу многие‑ко‑многим. Она добавляет горизонтальные связи и позволяет связывать контент по контексту: статьи с похожими тегами, продукты с общими характеристиками, документы одной темы.</p><p>Чаще всего плоские таксономии используется в медиа, блогах и SaaS‑платформах для тегирования и сквозных переходов между материалами.</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b990f32&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b990f32" class="wp-block-image aligncenter size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1446" height="360" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2025/10/ia-entities-5.png" alt="Пример плоской таксономии" class="wp-image-4693" srcset="https://sherer.pro/content/uploads/2025/10/ia-entities-5.png 1446w, https://sherer.pro/content/uploads/2025/10/ia-entities-5-1048x261.png 1048w, https://sherer.pro/content/uploads/2025/10/ia-entities-5-768x191.png 768w" sizes="auto, (max-width: 1446px) 100vw, 1446px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p><strong>Преимущество</strong>: простота расширения и гибкость.</p><p><strong>Недостаток:</strong> если не контролировать список терминов, со временем возможна потеря структурности и даже полная поломка логики (например, когда у вас есть 2 разных метки «UX» и «ux»).</p><h3 class="wp-block-heading">Фасетная таксономия</h3><p>Объединяет независимые классификации, например: категория, бренд, размер, цена, материал. Пользователь может фильтровать данные сразу по нескольким измерениям.</p><p>Такая модель характерна для маркетплейсов и аналитических панелей, где каждый фасет — это отдельная ось с набором значений.</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b991235&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b991235" class="wp-block-image aligncenter size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1446" height="680" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2025/10/ia-entities-6.png" alt="Пример фасетной таксономии" class="wp-image-4678" srcset="https://sherer.pro/content/uploads/2025/10/ia-entities-6.png 1446w, https://sherer.pro/content/uploads/2025/10/ia-entities-6-1048x493.png 1048w, https://sherer.pro/content/uploads/2025/10/ia-entities-6-768x361.png 768w" sizes="auto, (max-width: 1446px) 100vw, 1446px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p><strong>Преимущество</strong>: высокая управляемость фильтрацией и быстрый поиск.</p><p><strong>Недостаток:</strong> сложность проектирования и ухудшение управляемости при росте числа комбинаций.</p><h3 class="wp-block-heading">Сквозные свойства</h3><p>Например: материал, бренд, разрешение экрана. Сквозные свойства выполняют роль фасетов и служат мостом между таксономиями и данными:</p><ul class="wp-block-list"><li>живут в <strong>единых словарях</strong>, которые поддерживаются централизованно;</li><li>используются как <strong>фасеты</strong> и <strong>правила мерчендайзинга/рекомендаций</strong>;</li><li>имеют <strong>политику синонимов</strong>, нормализации значений и правила локализации;</li><li>могут быть <strong>жёстко типизированы</strong> (enum — о них чуть ниже) или <strong>гибкими</strong> (текстовые значения, появляющиеся из данных);</li></ul><p>Однако у сквозных свойств есть и обратная сторона. Давайте разберём на примере свойства товара «материал».</p><p>«Материал» — фасет <strong>только</strong> при наличии нормализованного словаря (ограниченный справочник материалов). Если материал хранится как произвольный текст (например, «металлический с пластиковыми вставками»), он <strong>не</strong> является фасетом и остаётся обычным полем: участвует в полнотекстовом поиске, но не в фасетной фильтрации.</p><h2 class="wp-block-heading">Противоречивые классификации</h2><p>Иногда классифицировать сущности оказывается сложно. Хороший пример такой противоречивой классификации — вопрос «где разместить арбуз»? Это <em>ягода </em>(что правильнее с точки зрения ботаники), <em>тыквина </em>(что ещё более правильно) или <em>фрукт </em>(ведь именно там его ищут пользователи)?</p><p>Когда один и тот же объект может относиться сразу к нескольким категориям, архитектору важно не выбрать «правильный» ответ, а установить управляемую логику принятия решений. Задача таксономии — не отражать условную «истину», а обеспечивать предсказуемость и согласованность между системами.</p><p>И для этого существует несколько правил:</p><ol class="wp-block-list"><li>Вводим <strong>приоритеты классификаций</strong> (биология < повседневные ожидания < бизнес‑цели каталога). Эти приоритеты задают уровень, на котором принимается решение — например, витрина каталога ориентируется на пользовательскую логику, а не на научную.</li><li>Формируем <strong>правила визуализации и информационные связи</strong>: как объект отображается в меню, поиске, фильтрах и фасетах, чтобы не было дублирования или рассинхронизации. В карточке сущности могут быть указаны обе принадлежности, но навигация использует только основную.</li><li>Фиксируем <strong>конфликты и владельцев решения</strong>: кто принимает решение, когда пересматривается структура, где фиксируются комментарии и примечания.</li><li>Документируем<strong> принципы разрешения конфликтов</strong> и <strong>исключения</strong>, чтобы разные подсистемы (поиск, рекомендации, SEO) пользовались единым источником правды.</li></ol><h2 class="wp-block-heading">Пример визуализации базы данных</h2><p>По итогу работы над информационной архитектурой обычно создаются спецификации API и дизайн БД. Про API здесь говорить пока рано, а вот про БД уже пора.</p><p>Ловите пример того, как может выглядеть простенькая база данных в виде ER-диаграммы:</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b991719&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b991719" class="wp-block-image aligncenter size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1095" height="526" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2025/11/er-diagram-example.png" alt="" class="wp-image-4653" srcset="https://sherer.pro/content/uploads/2025/11/er-diagram-example.png 1095w, https://sherer.pro/content/uploads/2025/11/er-diagram-example-1048x503.png 1048w, https://sherer.pro/content/uploads/2025/11/er-diagram-example-768x369.png 768w" sizes="auto, (max-width: 1095px) 100vw, 1095px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p>Здесь учитывается почти всё:</p><ul class="wp-block-list"><li>По типу соединения можно понять тип связей. Например, от <code>users.id</code> к <code>orders.user_id</code> соединение начинается одной линией, а заканчивается несколькими, разветвлением — это связь однин-ко-многим (1:N).</li><li>Иконка «ключика» возле названия поля обозначает первичный ключ (primary key), который уникально идентифицирует каждую запись. А иконка «заметки» говорит о том, что у поля есть дефолтное значение.</li><li>Если возле названия есть иконка «ссылки», то это внешний ключ (foreign key), и от него почти всегда будет связь 1:N к источнику. Например, от того же <code>orders.user_id</code> к <code>users.id</code>.</li><li>Две буквы «NN» в конце каждой строки — это «NOT NULL», поле не может быть пустым. Та самая <em>обязательность</em> из таблички, помните?</li><li>Буква «Е» в <code>orders.status</code> означает «ENUM» — набор именованных констант. Значение этого поля может быть заполнено только значениями из определённого словаря. В нашем случае статус заказа может быть только <code>pending</code>, <code>paid</code>, <code>shipped</code>, <code>delivered</code> или <code>canceled</code>.</li><li>Ну а всякие <code>varchar</code>, <code>int</code>, <code>decimal</code>, <code>datetime</code> и другие — всего лишь типы данных, которые хранятся в этом поле.</li></ul><p>Так нафига вообще тогда информационная архитектура, если можно сразу пилить ER-диаграммы и не париться? Да потому что они описывают только один слой IA — слой <strong>реализации хранения </strong>данных (в самом начале статьи мы об этом говорили). Огромный пласт информации, накопленной грамотным подходом к IA, здесь не учитывается. Примеры, политики заполнения и мультиязычности, правила валидации, источники данных и куча всего остального.</p><p>Так что не ER-диаграммами едиными.</p><h2 class="wp-block-heading">Что дальше</h2><p>А дальше мы поговорим о практической работе с сущностями: как их искать, формализовать и поддерживать, немного поговорим о частых ошибках и анти-паттернах. Отдельно я расскажу о том, как из сущностей и их связей формировать навигацию и поиск. Ну и бонусом, в следующих статьях будет несколько шаблонов, чек-листов и даже мини‑RFC для решения по сущностям.</p><p>Подписывайтесь на <a href="https://t.me/shererpro" target="_blank" rel="noreferrer noopener">канал</a>, там будут все новости.</p><p>Запись <a href="https://sherer.pro/blog/informacionnaya-arhitektura-sushchnosti-vol-1/">Информационная архитектура: сущности (теория)</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></content:encoded></item><item><title>UX vs CX: кто кого включает</title><link>https://sherer.pro/blog/ux-vs-cx-kto-kogo-vklyuchaet/</link><dc:creator><![CDATA[Павел Шерер]]></dc:creator><pubDate>Sun, 08 Jun 2025 15:36:14 +0000</pubDate><category><![CDATA[UX/UI]]></category><category><![CDATA[Исследования]]></category><category><![CDATA[методологии]]></category><category><![CDATA[насмотренность]]></category><guid isPermaLink="false">https://sherer.pro/?p=4398</guid><description><![CDATA[<p>Небольшой гайд для продуктовых команд, руководителей и всех, кто принимает решения об опыте пользователей и клиентов.</p><p>Запись <a href="https://sherer.pro/blog/ux-vs-cx-kto-kogo-vklyuchaet/">UX vs CX: кто кого включает</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></description><content:encoded><![CDATA[<h2 class="wp-block-heading">Почему я решил об этом поговорить</h2><p>Я начинал свой путь в дизайне, когда все эти ваши юиксы обитали, преимущественно, на Западе. А сииксов вообще не было. Тогда всё это называлось просто «юзабилити». Ещё живя в Саратове (не пытайтесь покинуть Саратов), я выступал за расширение этого понятия. Читал наивные лекции о том, что «пользователь пьян», был одним из евангелистов пользовательского опыта как подхода.</p><p>Но обожаемый мною маркетинг, как обычно, всё упростил.</p><figure class="wp-block-pullquote"><blockquote><p>Любая методология, термин или подход, который приобрёл достаточную популярность, рано или поздно будет упрощён. Так его проще продавать.</p></blockquote></figure><p>Так <a href="https://sherer.pro/blog/personazhi-po-kuperu-kak-diskreditirovat-metodologiyu/">случилось</a> с персонами Алана Купера (моделями типичных пользователей), картами пути клиента (CJM) и даже со скрамом. </p><p>UX сузили до интерфейсов, а CX (опыт клиента) возвели в ранг «нового короля». Меня это иногда подбешивает, и я решил немного подушнить. Теперь я буду просто давать ссылку на эту статью.</p><p>Но чтобы было понятнее, давайте разберёмся на простом примере.</p><h2 class="wp-block-heading">Пример: бронирование билета в авиакомпании</h2><p>Как все себе представляют это разграничение сейчас:</p><ul class="wp-block-list"><li>UX. Как легко найти рейс в приложении, понятен ли фильтр, быстро ли работает чек-аут.</li><li>CX. Плюс UX, плюс: реклама в соцсетях, письма-напоминания, регистрация в аэропорту, общение с бортпроводником, багаж-карусель, компенсация за задержку.</li></ul><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Если вы улучшите только UX-форму оплаты, NPS может не сдвинуться, потому что претензии к колл-центру останутся. И наоборот: идеальный CX-чеклист не спасёт, если кнопка «Оплатить» лагает.</p></blockquote><p>Да, UX и CX связаны, но я считаю, что в 2025 году UX остаётся фундаментом. Давайте разберём, почему.</p><h2 class="wp-block-heading">Почему UX главнее</h2><p>UX включает в себя CX, а не наоборот. Да, всё идёт к слиянию, но это не будет «поглощением» сииксом юикса. Это либо будет что-то новое (об этом чуть ниже), либо юикс останется собой. И вот почему:</p><h3 class="wp-block-heading">Оригинальное определение</h3><p>Дон Норман ещё в девяностых <a href="https://www.nngroup.com/articles/definition-user-experience/" target="_blank" rel="noreferrer noopener">определил</a> UX как «<strong>все</strong> аспекты взаимодействия конечного пользователя с компанией, её услугами и продуктами»:</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>«User experience» encompasses <strong>all</strong> aspects of the end-user&#8217;s interaction with the company, its services, and its products.</p></blockquote><p>«Весь» опыт — это и офлайн-доставка, и колл-центр, и вообще всё, что маркетологи потом назвали CX. </p><p>Да, Норман прямо <a href="https://www.mckinsey.com/featured-insights/mckinsey-on-books/author-talks-don-norman-designs-a-better-world" target="_blank" rel="noreferrer noopener">говорит</a>, что сейчас классический human-(user)-centered design фокусируется на «сделать интерфейс понятным» и забывает о том, как производство, утилизация и экосистема влияют на людей и планету. То есть сам термин UX за 30 лет врос в digital-нишу и утратил изначальную широту. Однако это не делает его синонимом «юзабилити» и не превращает в «расширенный UI».</p><p>Ещё раз, хронология:</p><ul class="wp-block-list"><li>1993 — Норман вводит UX, чтобы расширить понятие «интерфейсы».</li><li>2010-е — маркетинг обратно сужает UX до UI.</li><li>2023 — сам Норман вытаскивает понятие дальше, к humanity-centered.</li></ul><p>То есть, если продолжать наш пример с авиакомпанией, то в последний пункт добавляются вопросы выбросов CO₂, переработки одноразового пластика в салоне, программы компенсации углеродного следа и тп. И всё это продолжает влиять на пользовательский опыт в широком его смысле.</p><h3 class="wp-block-heading">Международный стандарт</h3><p>Я не особо люблю стандарты, но ISO 9241-210:2019 явно <a href="https://www.iso.org/standard/77520.html" target="_blank" rel="noreferrer noopener">закрепил</a> UX как «восприятия и реакции человека, возникающие <strong>до</strong>, <strong>во время</strong> и <strong>после</strong> использования системы». Это охватывает весь опыт, включая моменты, которые CX-команды считают «своими». CX не выходит за рамки UX.</p><h3 class="wp-block-heading">Лингвистика</h3><p>Слова имеют значение:</p><ul class="wp-block-list"><li>«User» — любой, кто взаимодействует: покупатель, партнёр, сотрудник.</li><li>«Customer» — только тот, кто платит. </li></ul><p>Например, в Sony Playstation Store пользователи — это и отец (который выбирает игру и покупает её), и сын (который играет). А вот клиент — только отец, потому что платит именно он. Следовательно, все CX-сценарии с платящими клиентами являются подмножеством более широкого множества UX-сценариев.</p><h3 class="wp-block-heading">Историческое родство</h3><p>Сервис-дизайн и CJM выросли из UX-исследований, чтобы захватить бэкстейдж услуги. CX появился как маркетинговый «ребрендинг» этой надстройки. Исторически CX-инструментарий вышел из UX, а не наоборот. </p><p>Это не значит, разумеется, что более «поздний» термин всегда должен быть «ребёнком» более «раннего», но историю не обманешь.</p><h3 class="wp-block-heading">Методологическая инклюзивность</h3><p>A/B‑тесты, глубинки, этнография — это всё базовый UX‑арсенал, который CX‑команды заимствуют. Обратного движения почти нет.</p><p>В плане методологий построения опыта почти всё берётся из изначальных UX-практик. Разумеется, с подмешиванием маркетинга.</p><h2 class="wp-block-heading">Почему кто-то считает CX важнее</h2><p>Сторонники CX скажут, что он ближе к бизнес-целям: удержание клиентов, рост лояльности, увеличение выручки. Например, компании вроде Amazon фокусируются на CX, чтобы каждый контакт с клиентом, от рекламы до возврата товара, был безупречным. Это помогает растить базовые метрики, вроде LTV. CX фокусируется на эмоциональной связи с брендом, что критично для долгосрочной лояльности клиентов. </p><p>UX же, по их мнению, слишком узок и зациклен на интерфейсах. Но это не так. UX охватывает весь опыт, включая моменты, которые CX считает «своими». Да, CX кажется ближе к бизнесу, но только потому, что UX шире.</p><figure class="wp-block-pullquote"><blockquote><p>UX — это фундамент дома, а CX — красивый фасад. Без фундамента дом рухнет, как бы круто он ни выглядел внешне.</p></blockquote></figure><p>Хороший UX тоже влияет на метрики: снижает churn rate (отток пользователей) и увеличивает retention (удержание), а это напрямую влияет на выручку компании.</p><p>Маркетинг сузил восприятие UX до дизайна кнопок, а CX возвёл в ранг «стратегического подхода». На деле же хороший UX уже включает заботу о <em>клиенте</em> — просто без маркетингового шума.</p><h2 class="wp-block-heading">Почему спор постепенно стихает</h2><p>Nielsen Norman Group недавно <a href="https://www.nngroup.com/articles/ux-and-cx-merge/">отметила</a> тренд слияния UX и CX. Компании вроде Airbnb и Spotify создают кросс-функциональные journey-команды, где исследователи, дизайнеры, продакт-менеджеры и CX-специалисты вместе отвечают за весь путь клиента — от первого знакомства с брендом до повторной покупки. Например, в Spotify такая команда может работать над «опытом первого прослушивания», синхронизируя интерфейс приложения, рекомендации и поддержку.</p><p>Эта матричная структура снимает вопрос иерархии. Важнее не спорить о терминах и бодаться за семантику, а избегать «слепых зон» между отделами. Но даже в этой парадигме UX остаётся фундаментом, потому что именно он даёт инструменты для понимания пользователей.</p><h2 class="wp-block-heading">Что дальше?</h2><p>Скорее всего, UX и CX скоро окончательно сольются, но пока важно помнить: UX — это основа, на которой строится весь опыт. Если вы хотите создать продукт, который люди полюбят, начните с UX-исследований: глубинных интервью, юзабилити-тестов, анализа поведения. Это даст фундамент, на котором CX сможет выстроить лояльность и бизнес-результаты.</p><p>Мой призыв к дизайнерам и продактам: думайте не только об интерфейсах, но и о каждом моменте, где пользователь встречается с вашим продуктом, верните термину UX его изначальный смысл. Даже если планируете идти в сторону HX.</p><p>Независимо от того, как эволюционируют термины, принципы UX — понимание пользователей и создание удобных решений — останутся базой для продуктов, которые люди любят.</p><p>Запись <a href="https://sherer.pro/blog/ux-vs-cx-kto-kogo-vklyuchaet/">UX vs CX: кто кого включает</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></content:encoded></item><item><title>User Story Mapping и функциональная архитектура</title><link>https://sherer.pro/blog/user-story-mapping-i-funkcionalnaya-arxitektura/</link><dc:creator><![CDATA[Павел Шерер]]></dc:creator><pubDate>Fri, 09 Jul 2021 08:49:47 +0000</pubDate><category><![CDATA[UX/UI]]></category><category><![CDATA[Аналитика]]></category><category><![CDATA[Технический дизайн]]></category><category><![CDATA[гайд]]></category><category><![CDATA[методологии]]></category><category><![CDATA[функциональное проектирование]]></category><guid isPermaLink="false">https://sherer.pro/?p=2985</guid><description><![CDATA[<p>Что общего у функциональной архитектуры и персонажей Купера? Как User Story Mapping решает проблемы со структуризацией требований, стратегией разработки и границами проекта.</p><p>Запись <a href="https://sherer.pro/blog/user-story-mapping-i-funkcionalnaya-arxitektura/">User Story Mapping и функциональная архитектура</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></description><content:encoded><![CDATA[<p>Каждый, кто запускал IT-проекты или участвовал в продуктовых исследованиях, наверняка слышал про метод <a href="https://onezero.medium.com/in-1983-i-created-secret-weapons-for-interactive-design-d154eb8cfd58" target="_blank" rel="noreferrer noopener"><strong>персон Алана Купера</strong></a> и <strong>User Story</strong>. И пусть некоторые считают персон нерабочей и устаревшей методологией — я убеждён, что это всего лишь результат многолетней <a href="https://sherer.pro/blog/personazhi-po-kuperu-kak-diskreditirovat-metodologiyu/" target="_blank" rel="noreferrer noopener">вандализации метода</a>.</p><p>В этой статье я хочу рассказать о том, как «продолжение» User Story может не только улучшить UX продуктов, но и решить кое-какие фундаментальные проблемы их разработки.</p><p>Цифровые продукты редко запускаются гладко. Правки к сценариям, функциональности и макетам зачастую возникают прямо в процессе реализации. Никто никогда не в курсе, куда несётся поезд продуктовой разработки — а обратное чувство, чаще всего, обманчиво.</p><p><strong>Персоны </strong>и <strong>User Story</strong> — это такая прикольная штуковина для того, чтобы погрузить всех участников в проектный процесс, выявить и подсветить истинные задачи пользователей. Однако сами по себе персоны практически не влияют на процесс создания продуктов, лишь на их функциональность. Чего нельзя сказать о следующем этапе развития пользовательских историй — о <strong>User Story Mapping</strong>.</p><p>Об этом подходе написано уже немало, в том числе и на русском языке. Но большинство таких статей (на мой субъективный взгляд) либо весьма поверхностны, либо имеют серьёзный перекос в сторону именно UX, практически игнорируя аспект управления и развития продукта. Однако я искренне благодарен авторам таких статей, ибо понахватал оттуда приличное количество тезисов и умозаключений.</p><h2 class="wp-block-heading">Проблемы</h2><p>Для начала давайте разберём некоторые глобальные трудности и барьеры, возникающие при создании цифровых продуктов.</p><h3 class="wp-block-heading">Требования к продукту плохо структурированы по отношению друг к другу</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b9938bb&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b9938bb" class="wp-block-image aligncenter size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="1200" height="400" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/usm-1.png" alt="" class="wp-image-3010" srcset="https://sherer.pro/content/uploads/2021/07/usm-1.png 1200w, https://sherer.pro/content/uploads/2021/07/usm-1-768x256.png 768w, https://sherer.pro/content/uploads/2021/07/usm-1-1048x349.png 1048w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p>Нет иерархии и последовательности требований. Не всегда понятно, какая задача какую блокирует и от какой зависит. Чаще всего зависимость задачи проставляется исключительно командой разработчиков или тимлидом — но они не владеют общим видением продукта, руководствуясь только своими представлениями о локальном участке архитектуры. То есть они не видят всю связь, весь flow бизнеса и пользователя целиком. Не тот уровень абстракции.</p><p>Это, разумеется, влияет на глобальную архитектуру, на качество кода и самого продукта, на динамику разработки. Что, в свою очередь, приводит к многократному увеличению стоимости поддержки и развития. </p><p>Каждое требование — это определённая функция или функциональный раздел продукта. Если команда разработки не понимает взаимосвязи между функциями в создаваемой ими системе, то такие проекты гарантированно обречены на «историческое» развитие. Так рождаются огромные «монолиты», которые очень и очень быстро переходят в разряд с трудом поддерживаемых «<a href="https://en.wikipedia.org/wiki/Legacy_code" target="_blank" rel="noreferrer noopener">legacy</a>».</p><h3 class="wp-block-heading">Требования к продукту не приоритизированы с точки зрения ценности для пользователей</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b993be3&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b993be3" class="wp-block-image aligncenter size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="1200" height="400" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/usm-2.png" alt="" class="wp-image-3011" srcset="https://sherer.pro/content/uploads/2021/07/usm-2.png 1200w, https://sherer.pro/content/uploads/2021/07/usm-2-768x256.png 768w, https://sherer.pro/content/uploads/2021/07/usm-2-1048x349.png 1048w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p>Порядок реализации задач формируется по наитию, по сложности разработки, по желанию клиента, по чему угодно — но только не по важности для пользователей. В итоге разработка и выпуск новых версий затягиваются.</p><p>Ядро функциональности, пресловутый MVP, собирается, исходя из представлений команды о продукте. Даже если команда думает, что полагается на результаты исследований — на сложных проектах эти результаты ещё необходимо как-то структурировать и визуализировать. Иначе высока вероятность «рассинхрона», отсутствия единого информационного поля внутри команды. </p><p>Последствия в этом случае весьма печальны, вплоть до полной невостребованности продукта аудиторией.</p><h3 class="wp-block-heading">Отсутствует единое понимание стратегии разработки, последовательности и состава релизов</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b993edb&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b993edb" class="wp-block-image aligncenter size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="1200" height="400" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/usm-3.png" alt="" class="wp-image-3012" srcset="https://sherer.pro/content/uploads/2021/07/usm-3.png 1200w, https://sherer.pro/content/uploads/2021/07/usm-3-768x256.png 768w, https://sherer.pro/content/uploads/2021/07/usm-3-1048x349.png 1048w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p>Отсутствие стратегического подхода влечёт за собой не только архитектурные ошибки (опять), но и заставляет нервничать стейкхолдеров и владельцев продукта. Прогнозы в такой ситуации строить крайне сложно.</p><p>Как это решается в большинстве случаев? Продуктовая команда либо строит лишь краткосрочные планы, либо составляет план релизов буквально «наугад». Однако инвесторы не любят неопределенности. Если вы не можете предоставить им хотя бы примерный таймлайн или просто последовательность и функциональный состав релизов, то у меня для вас плохие новости. Ваш проект рискует остаться без финансирования.</p><p>Кто-то мне скажет, что это не всегда возможно. Часто исследования идут бок о бок с разработкой. Те же гибкие методологии, в конце концов. Однако даже здесь нужно опираться на определённый фундамент, базис. Ну и кроме того, гибкие методологии имеют весьма ограниченный ореол применения.</p><h3 class="wp-block-heading">Функциональные границы проекта очерчены слишком высокоуровнево или даже вовсе отсутствуют</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b9941e8&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b9941e8" class="wp-block-image aligncenter size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="1200" height="400" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/usm-4.png" alt="" class="wp-image-3013" srcset="https://sherer.pro/content/uploads/2021/07/usm-4.png 1200w, https://sherer.pro/content/uploads/2021/07/usm-4-768x256.png 768w, https://sherer.pro/content/uploads/2021/07/usm-4-1048x349.png 1048w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p>Бизнес требует внедрения всё новых фич, разработка затягивается, бэклог растёт, команда выгорает. Продукт получается, мягко говоря, странным.</p><p>Случалось ли у вас, что клиент/начальник/инвестор начинал каждую неделю приносить новые функции в проект? И обычный вначале лендинг в итоге превращался в космолёт-монстр, с админкой, функцией телепортации и собственным мобильным приложением?</p><p>Фичи должны добавляться последовательно и обоснованно (см. предыдущие проблемы). Функция не может жить «сама по себе», в отрыве от остальных частей продукта. И вот конечный порядок и взаимосвязь функций системы, состав её компонентов — это и есть границы проекта.</p><h2 class="wp-block-heading">User Story Mapping</h2><p>Как я уже сказал, все эти проблемы (и не только) решают карты историй. Вот вам хорошее определение USM:</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Карта историй работает сразу в двух измерениях: показывает не только приоритет историй, но и то, как они связаны между собой и с более крупными задачами пользователей. Карта помогает команде понять, как можно скомпоновать истории, чтобы получить продукт, готовый к релизу.</p><cite><strong>Крис Симс</strong> (в переводе <em>Ольги Жолудовой</em> и <em>Рината Шайхутдинова</em>)</cite></blockquote><p>По факту, карта историй — это набор <em>упрощённых </em><strong>User Stories</strong>: собранные, отсортированные и приоритизированные. Сама методология простая, на высоком уровне с ней справится даже новичок. Но если копнуть глубже, то там окажется целое поле работы для исследователей, продактов и архитекторов.</p><p>В этой статье в качестве иллюстрации для составления USM мы будем использовать небольшую браузерную игру с программой лояльности какого-нибудь банка. В ней есть регистрация, игровой персонаж, его убежище, сражения и баллы лояльности.</p><p><em>Следующие ниже изображения-схемы могут быть не очень хорошо читаемы на небольших экранах мобильных устройств. В этом случае рекомендую посмотреть их на десктопе или перевернуть смартфон в &#171;ландшафт&#187;.</em></p><h3 class="wp-block-heading">Шаг 1. Выявляем активности</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b9945bb&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b9945bb" class="wp-block-image size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1201" height="211" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/user-story-mapping-1-activities.jpg" alt="User Story Mapping - активности пользователей" class="wp-image-3017" srcset="https://sherer.pro/content/uploads/2021/07/user-story-mapping-1-activities.jpg 1201w, https://sherer.pro/content/uploads/2021/07/user-story-mapping-1-activities-768x135.jpg 768w, https://sherer.pro/content/uploads/2021/07/user-story-mapping-1-activities-1048x184.jpg 1048w" sizes="auto, (max-width: 1201px) 100vw, 1201px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button><figcaption class="wp-element-caption">Активности пользователей</figcaption></figure><p>Сначала нужно собрать список основных <strong>активностей </strong>пользователей. В нашем примере игры их пять:</p><ol class="wp-block-list"><li>Регистрация и логин;</li><li>Работа над аватаром;</li><li>Работа над убежищем;</li><li>Участие в сражении;</li><li>Работа с баллами лояльности.</li></ol><p>Это — ключевые, главные «категории» действий пользователя в игре. Они включают в себя всю остальную деятельность. Если использовать терминологию <a href="https://sherer.pro/blog/funkcionalnaja-arhitektura-cifrovyh-produktov-chast-1/" target="_blank" rel="noreferrer noopener">функциональной архитектуры</a>, то здесь мы создаём <em>глобальные функциональные разделы</em>.</p><h3 class="wp-block-heading">Шаг 2. Разворачиваем активности в задачи</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b99490f&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b99490f" class="wp-block-image size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="2449" height="316" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/user-story-mapping-2-tasks.jpg" alt="User Story Mapping - задачи" class="wp-image-3018" srcset="https://sherer.pro/content/uploads/2021/07/user-story-mapping-2-tasks.jpg 2449w, https://sherer.pro/content/uploads/2021/07/user-story-mapping-2-tasks-768x99.jpg 768w, https://sherer.pro/content/uploads/2021/07/user-story-mapping-2-tasks-1048x135.jpg 1048w" sizes="auto, (max-width: 2449px) 100vw, 2449px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button><figcaption class="wp-element-caption">Разбивка активностей на задачи</figcaption></figure><p>Теперь мы раскладываем их (активности) на <strong>задачи</strong>. Например, <em>активность</em> «Регистрация и логин» превращается в три <em>задачи</em>:</p><ol class="wp-block-list"><li>Регистрация и логин через соцсети;</li><li>Регистрация и логин через e-mail;</li><li>Восстановление доступа.</li></ol><p>Заметьте, здесь нет отдельно «логина» или «регистрации». Это более глубокий уровень, задачи же — это такие «категории» пользовательских историй. В функциональной архитектуре это тоже <em>функциональные разделы</em>, но уже не глобальные, а обычные.</p><h3 class="wp-block-heading">Шаг 3. Задачи детализируем до конкретных историй</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b994c65&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b994c65" class="wp-block-image size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="2449" height="871" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/user-story-mapping-3-stories.jpg" alt="User Story Mapping - истории" class="wp-image-3020" srcset="https://sherer.pro/content/uploads/2021/07/user-story-mapping-3-stories.jpg 2449w, https://sherer.pro/content/uploads/2021/07/user-story-mapping-3-stories-768x273.jpg 768w, https://sherer.pro/content/uploads/2021/07/user-story-mapping-3-stories-1048x373.jpg 1048w" sizes="auto, (max-width: 2449px) 100vw, 2449px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button><figcaption class="wp-element-caption">Детализация задач историями</figcaption></figure><p>И, наконец, <strong>истории </strong>(жёлтые карточки) — они расположены в порядке приоритета &#8212; сверху критичные, внизу наименее важные. Приоритет обычно выстраивается, исходя из нескольких условий:</p><ul class="wp-block-list"><li>ценность для пользователей;</li><li>ценность для бизнеса;</li><li>сложность реализации.</li></ul><p>Именно в таком порядке: сначала пользователи, потом бизнес, потом технологии. Понятно, что зачастую бизнес-задачи оказываются важнее пользовательских, и в этом случае карточки немножко двигаются. Иногда реалии рынка действительно сильнее влияют на продукт, чем желания пользователей. Аккуратнее с этим, руководствуйтесь здравым смыслом.</p><p>В случае нашего примера, <em>задача </em>&#171;Регистрация и логин через e-mail&#187; разложилась на 2 <em>истории</em>:</p><ol class="wp-block-list"><li>Регистрация с помощью e-mail;</li><li>Логин через e-mail;</li></ol><p>Истории — это <em>функции</em> будущей системы. У них есть взаимосвязи и порядок. Например, мы не можем реализовать функцию <em>&#171;Выбор навыков аватара для улучшения&#187; по результатам сражения</em> до того, как, собственно, реализуем сам <em>&#171;Подбор параметров аватара&#187;</em> в момент создания персонажа.</p><p>В результате этапа мы понимаем, какая задача из каких историй состоит и к какой она относится активности. Мы понимаем, какие истории нужно сделать в первую очередь. Мы можем планировать спринты и релизы.</p><h3 class="wp-block-heading">Шаг 4. Делаем из приоритетов схему релизов</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b995039&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b995039" class="wp-block-image size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="2449" height="1081" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/user-story-mapping-4-releases.jpg" alt="User Story Mapping - релизы" class="wp-image-3021" srcset="https://sherer.pro/content/uploads/2021/07/user-story-mapping-4-releases.jpg 2449w, https://sherer.pro/content/uploads/2021/07/user-story-mapping-4-releases-768x339.jpg 768w, https://sherer.pro/content/uploads/2021/07/user-story-mapping-4-releases-1048x463.jpg 1048w" sizes="auto, (max-width: 2449px) 100vw, 2449px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button><figcaption class="wp-element-caption">Разделение задач на релизы</figcaption></figure><p>Напомню, что истории — это всего лишь функции будущей системы. Понимая это, мы просто переносим те истории, которые не критичны или требуют на этом этапе слишком много ресурсов, в следующий релиз. Точно так же можно выделить MVP.</p><p>Например, нам проще сделать логин и регистрацию через соцсети — и регистрацию через e-mail мы отодвигаем на второй релиз. Пользователям не так важна покупка амуниции — и она тоже вылетает из MVP.</p><h3 class="wp-block-heading">Дополнительно: цветовая индикация и структура</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b99531e&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b99531e" class="wp-block-image size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="2449" height="1081" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/user-story-mapping-5-structure.jpg" alt="User Story Mapping - структура" class="wp-image-3022" srcset="https://sherer.pro/content/uploads/2021/07/user-story-mapping-5-structure.jpg 2449w, https://sherer.pro/content/uploads/2021/07/user-story-mapping-5-structure-768x339.jpg 768w, https://sherer.pro/content/uploads/2021/07/user-story-mapping-5-structure-1048x463.jpg 1048w" sizes="auto, (max-width: 2449px) 100vw, 2449px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button><figcaption class="wp-element-caption">Структура User Story Mapping</figcaption></figure><p>Принято разделять USM на две структурных части:</p><ol class="wp-block-list"><li>Верхняя часть, с активностями и задачами, называется «backbone» (хребет), но я предпочитаю слово «скелет».</li><li>Нижняя часть, истории, называется «тело».</li></ol><p>И да, цветом стикеров можно помечать отдельные категории событий/действий, дополнительную важность (например, для бизнеса), типы пользователей и так далее. Всё, что посчитаете важным.</p><h2 class="wp-block-heading">Итог</h2><p>С помощью User Story Mapping можно не только планировать новые продукты, но и улучшать уже существующие &#8212; например, приоритизировать бэклог.</p><p>USM позволяет на очень простом визуальном языке донести до всех участников команды не только функциональный состав продукта, но и порядок проектирования и реализации. Если вы хотите выполнить глубокое функциональное проектирование будущего продукта, то User Story Mapping — отличное начало для этого.</p><p>Помните только, что слепое следование методологиями убивает профессионализм. Комбинируйте, не бойтесь отойти от канонов, если уверены в своих действиях.</p><p>Запись <a href="https://sherer.pro/blog/user-story-mapping-i-funkcionalnaya-arxitektura/">User Story Mapping и функциональная архитектура</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></content:encoded></item><item><title>Персонажи по Куперу: как дискредитировать методологию</title><link>https://sherer.pro/blog/personazhi-po-kuperu-kak-diskreditirovat-metodologiyu/</link><dc:creator><![CDATA[Павел Шерер]]></dc:creator><pubDate>Tue, 06 Jul 2021 08:49:50 +0000</pubDate><category><![CDATA[UX/UI]]></category><category><![CDATA[методологии]]></category><guid isPermaLink="false">https://sherer.pro/?p=2990</guid><description><![CDATA[<p>Все, кто хотя бы немного касался проектирования интерфейсов, слышали про метод персон по Куперу. Однако приверженцев методологии с каждым годом становится всё меньше. Разбираемся, почему.</p><p>Запись <a href="https://sherer.pro/blog/personazhi-po-kuperu-kak-diskreditirovat-metodologiyu/">Персонажи по Куперу: как дискредитировать методологию</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></description><content:encoded><![CDATA[<p>Алан Купер в своё время сформулировал прекрасную методологию для улучшения продуктов &#8212; метод&nbsp;<strong>персонажей&nbsp;</strong>(или метод&nbsp;<strong>персон</strong>). Если вкратце, то это способ создания усреднённых портретов ваших пользователей, для более точного &#171;попадания&#187; в их контекст и задачи.</p><p>Так почему же сейчас этот метод так непопулярен? Почему на каждом углу кричат, что методология не работает, что персонажи устарели? А, главное, к чему апеллируют все эти люди? Давайте разбираться.</p><p>Начнём с основ.</p><h2 class="wp-block-heading">Немного истории</h2><p>Купер не был первым, кто использовал термин &#171;персона&#187; применительно к роли личности. Более ста лет назад это сделал Юнг, но суть его была несколько иной, разумеется. Затем термин плавал, видоизменяясь, пока в начале 21 века не попал в золотые руки Алана, а затем &#8212; в грязные лапы глобализации. Но давайте по порядку.</p><h3 class="wp-block-heading">1912-1916</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b996307&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b996307" class="wp-block-image aligncenter size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="1200" height="500" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/ung.png" alt="Карл Густав Юнг" class="wp-image-2991" srcset="https://sherer.pro/content/uploads/2021/07/ung.png 1200w, https://sherer.pro/content/uploads/2021/07/ung-768x320.png 768w, https://sherer.pro/content/uploads/2021/07/ung-1048x437.png 1048w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p><strong><a href="https://ru.wikipedia.org/wiki/%D0%AE%D0%BD%D0%B3,_%D0%9A%D0%B0%D1%80%D0%BB_%D0%93%D1%83%D1%81%D1%82%D0%B0%D0%B2" target="_blank" rel="noreferrer noopener">Карл Густав Юнг</a></strong>&nbsp;переопределяет понятие&nbsp;<strong>&#171;архетипы&#187;</strong>. Здесь&nbsp;<strong>&#171;персона&#187;</strong>&nbsp;&#8212; это&nbsp;<strong>&#171;маска&#187;</strong>, социальная роль, компромисс между индивидуумом и социальностью. В одном человеке всегда сочетается несколько таких&nbsp;<strong>&#171;персон&#187;</strong>&nbsp;&#8212; это основа подхода.</p><h3 class="wp-block-heading">1995-2009</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b9965d7&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b9965d7" class="wp-block-image aligncenter size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="1200" height="500" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/cooper.png" alt="" class="wp-image-2993" srcset="https://sherer.pro/content/uploads/2021/07/cooper.png 1200w, https://sherer.pro/content/uploads/2021/07/cooper-768x320.png 768w, https://sherer.pro/content/uploads/2021/07/cooper-1048x437.png 1048w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p><strong><a href="https://mralancooper.medium.com/">Алан Купер</a></strong>&nbsp;во время работы с компанией Sagent Technologies, а затем и в нескольких книгах, формирует метод выявления и использования <strong>&#171;персон&#187;</strong>&nbsp;для улучшения пользовательского опыта и, как следствие, улучшения продукта. Купер говорит об эмпатии, о том, что только поняв пользователей, можно придумать, как решить их задачи в продукте.</p><p>Изначально в персонажах не было ярко выраженных демографических признаков, они пролезли туда позднее, не без участия маркетинга.</p><h3 class="wp-block-heading">2010-2015</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b9968bd&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b9968bd" class="wp-block-image aligncenter size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="1200" height="500" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/globalisation.png" alt="" class="wp-image-2995" srcset="https://sherer.pro/content/uploads/2021/07/globalisation.png 1200w, https://sherer.pro/content/uploads/2021/07/globalisation-768x320.png 768w, https://sherer.pro/content/uploads/2021/07/globalisation-1048x437.png 1048w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p>Развитие технологий и рынка вносит коррективы в методологию, добавляя по вкусу демографии и психологии. Путаница и невежество погребают под собой саму суть&nbsp;<strong>&#171;персон&#187;</strong>.</p><p>У маркетологов и продуктовых дизайнеров появляется тьма тьмущая инструментов и возможностей для получения информации о пользователях. Маркетологи, уже давно использующие нечто похожее на персон в своих исследованиях, яростно набрасываются на новую методологию. Дизайнеры, ленивые гады, начинают потихоньку тащить у маркетинга готовые описания, не понимая, что маркетинговые персоны и дизайн-персоны порой сильно отличаются.</p><p>Масла в огонь подливает инфобизнес, вдруг почуявший в персонах дойную корову: на каждом углу горе-лекторы начинают вещать о новой прорывной методике.</p><p>Явление приобретает массовость и теряет в качестве. Дизайнеры и исследователи начинают составлять персон механически и поверхностно, не желая или не умея вникать в суть подхода.</p><h3 class="wp-block-heading">2016-2020</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b996bd5&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b996bd5" class="wp-block-image aligncenter size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="1200" height="500" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/christensen.png" alt="" class="wp-image-2996" srcset="https://sherer.pro/content/uploads/2021/07/christensen.png 1200w, https://sherer.pro/content/uploads/2021/07/christensen-768x320.png 768w, https://sherer.pro/content/uploads/2021/07/christensen-1048x437.png 1048w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p>Кажется, уже последний гвоздь в крышку методологии забивает&nbsp;<strong>Клейтон Кристенсен</strong>, автор методологии&nbsp;<strong>Jobs To Be Done</strong>.</p><p>Клейтон придумал классный подход к выявлению истинных потребностей пользователей и противопоставил его привычке компаний сегментировать свою аудиторию. К сожалению, поверхностные умы ухватились больше за это противопоставление, чем за реальную суть подхода.</p><p>Глобализация, рост технологий и big data тем временем продолжают снабжать маркетологов, дизайнеров и исследователей всё новой информацией. Которую многие из них лопают без разбора.</p><h2 class="wp-block-heading">Мусорные войны</h2><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b996ece&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b996ece" class="wp-block-image aligncenter size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="1200" height="500" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/trash.png" alt="" class="wp-image-2997" srcset="https://sherer.pro/content/uploads/2021/07/trash.png 1200w, https://sherer.pro/content/uploads/2021/07/trash-768x320.png 768w, https://sherer.pro/content/uploads/2021/07/trash-1048x437.png 1048w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p>В итоге, мы получаем печальную картину: в широких дизайнерских массах JTBD явно заменяет персонажей. Но причина тому вовсе не в том, что персонажи плохие &#8212; просто к этому времени способ их создания стал настолько неряшливым, что сама методология в общественном сознании обратилась чем-то простым. Слишком незатейливым, чтобы быть правильным.</p><p>И вот тут начинается самое нелепое. Люди, которым всегда нужен кто-то, против кого дружить, объединяются и начинают как из автомата строчить однотипные &#171;разгромные&#187; статьи, в которых главным доводом против придуманного Купером подхода то и дело всплывают фразы вроде&nbsp;<em>&#171;ну и как то, что Вася курит, поможет нам продать ему пиццу?&#187;</em>. Вы вообще понимаете, что происходит? Думаю, да. Но я всё равно расскажу.</p><h3 class="wp-block-heading">Шаг 1</h3><p>Берём продукт. Например, сервис по доставке пиццы. Начинаем активно собирать информацию о потенциальных и существующих пользователях. Используем всё, до чего можем дотянуться и на что хватает ресурсов: веб-аналитику, фокус-группы, полевые исследования.</p><p>Тут мы пока что всё делаем правильно.</p><h3 class="wp-block-heading">Шаг 2</h3><p>Итак, пришло время составлять персонажей. Наученные этому простому делу на двух с половиной вебинарах и даже одном мастер-классе, начинаем пихать в описание персонажей всё подряд. Не важно, что именно. Это относится к большинству наших пользователей этой категории? Да — в топку персоны, она стерпит. А мы потом уже разберёмся.</p><p>Кое-как валидируем получившихся &#171;монстров франкенштейна&#187;, недостающую информацию просто придумываем.</p><h3 class="wp-block-heading">Шаг 3</h3><p>Начинаем применять персон и вдруг понимаем, что&nbsp;<em>&#171;вредная привычка Васи не помогает нам продать ему пиццу&#187;</em>!</p><p>Profit, метод дискредитирован. Мы молодцы.</p><h3 class="wp-block-heading">Итог</h3><p>Кажется глупостью, но это происходит именно так. Горе-исследователи сперва набивают персонажей всяким дерьмом, а потом предъявляют это в качестве неоспоримого доказательства несостоятельности методологии.</p><p>Мне одному кажется, что здесь что-то не так?</p><h2 class="wp-block-heading">Совокупность</h2><p>Я не евангелист куперовского подхода. Я согласен, что метод персон имеет здоровенный перекос в сторону именно потребителя, а не пользователя и его истинных потребностей. Но это отнюдь не значит, что метод неприменим. Это говорит только о том, что применять его нужно с умом.</p><p>Без сомнения, персоны не всеобъемлющи. В современных реалиях, в условиях постоянного усложнения продуктов и технологий, полагаться на одни только короткие описания усреднённых пользователей — явно маловато. Просто это не &#171;серебряная пуля&#187;, и использовать персонажей нужно в совокупности с другими методами — хотя бы с тем же Jobs To Be Done.</p><p>А не гоняться каждый год за новыми модными фреймворками (хотя и посматривать, конечно, в их сторону).</p><h2 class="wp-block-heading">Примеры</h2><p>Куда ж без них. Ниже можно посмотреть на пример простых (очень простых) персонажей, в которых нет ни капли лишней информации. Тут и контекст, и задачи, и особенности. Можно было бы даже фотографии убрать, но они полезны для эмоциональной привязки.</p><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b997392&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b997392" class="wp-block-image size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="2258" height="1165" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/personas-1.jpg" alt="Пример персон по Куперу" class="wp-image-2998" srcset="https://sherer.pro/content/uploads/2021/07/personas-1.jpg 2258w, https://sherer.pro/content/uploads/2021/07/personas-1-768x396.jpg 768w, https://sherer.pro/content/uploads/2021/07/personas-1-1048x541.jpg 1048w" sizes="auto, (max-width: 2258px) 100vw, 2258px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b997618&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b997618" class="wp-block-image size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="2258" height="1165" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/personas-2.jpg" alt="Пример персон по Куперу" class="wp-image-2999" srcset="https://sherer.pro/content/uploads/2021/07/personas-2.jpg 2258w, https://sherer.pro/content/uploads/2021/07/personas-2-768x396.jpg 768w, https://sherer.pro/content/uploads/2021/07/personas-2-1048x541.jpg 1048w" sizes="auto, (max-width: 2258px) 100vw, 2258px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b99783c&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b99783c" class="wp-block-image size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="2258" height="1165" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2021/07/personas-3.jpg" alt="Пример персон по Куперу" class="wp-image-3000" srcset="https://sherer.pro/content/uploads/2021/07/personas-3.jpg 2258w, https://sherer.pro/content/uploads/2021/07/personas-3-768x396.jpg 768w, https://sherer.pro/content/uploads/2021/07/personas-3-1048x541.jpg 1048w" sizes="auto, (max-width: 2258px) 100vw, 2258px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure></div><p>Руководствуйтесь здравым смыслом, а не хайпом. Купер тоже так <a href="https://mralancooper.medium.com/defending-personas-2657fe26dd0f" target="_blank" rel="noreferrer noopener">делает</a>.</p><p>Запись <a href="https://sherer.pro/blog/personazhi-po-kuperu-kak-diskreditirovat-metodologiyu/">Персонажи по Куперу: как дискредитировать методологию</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></content:encoded></item><item><title>Информационная архитектура: пример и типизация</title><link>https://sherer.pro/blog/informacionnaya-arxitektura-primer-i-tipizaciya/</link><dc:creator><![CDATA[Павел Шерер]]></dc:creator><pubDate>Fri, 08 Jan 2021 11:47:09 +0000</pubDate><category><![CDATA[UX/UI]]></category><category><![CDATA[Аналитика]]></category><category><![CDATA[Технический дизайн]]></category><category><![CDATA[аналитика]]></category><category><![CDATA[гайд]]></category><category><![CDATA[информационная архитектура]]></category><guid isPermaLink="false">https://sherer.pro/?p=2863</guid><description><![CDATA[<p>На примере реального некоммерческого проекта разбираем проблему типизации данных в информационной архитектуре. </p><p>Запись <a href="https://sherer.pro/blog/informacionnaya-arxitektura-primer-i-tipizaciya/">Информационная архитектура: пример и типизация</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></description><content:encoded><![CDATA[<p><strong><em>Дисклеймер</em></strong><em>: если вы не знаете, что такое </em><strong><em>информационная архитектура</em></strong><em>, то крайне рекомендую сперва прочитать <a href="https://sherer.pro/blog/informacionnaya-arxitektura-kratkij-ekskurs/">вот этот</a> мой пост, а потом уже вернуться сюда. Иначе крайне высока вероятность того, что изложенный ниже текст не принесёт вам особенной пользы.</em></p><h2 class="wp-block-heading">О чём статья</h2><p>В первую очередь, речь пойдёт о проблеме информационной типизации в IT-проектах. В частности &#8212; о типизации конкретных свойств информационных сущностей. Однако рассказать об этом в отрыве от конкретики вряд ли получится, а если и получится, то выйдет долго и скучно. Поэтому в этой статье мы сперва разберём конкретный пример реального проекта, а уже затем сделаем кое-какие выводы.</p><h2 class="wp-block-heading">Типизация</h2><p><em>В языках программирования есть понятия &#171;сильной&#187; и &#171;слабой&#187;, &#171;статической&#187; и &#171;динамической&#187; типизаций. Если несколько упростить, то &#171;типизация&#187; диктует, как именно заполняются переменные в коде: можно ли одну и ту же переменную в разные периоды времени наполнить то текстом, то числом, то датой и тд.</em></p><p>Если с языками программирования всё более или менее ясно, то при работе с информационной архитектурой продукта типизацией мало кто заморачивается. Хотя именно она часто определяет часть возможностей к развитию продукта.</p><p>Информационные архитекторы, чаще всего, выполняют свою работу &#171;по наитию&#187; (разумеется, называя это &#171;логикой&#187; и &#171;опытом&#187;). Наверное, в этом нет ничего плохого или критичного &#8212; так делают все, и даже сложные продукты как-то создаются, живут и развиваются. Однако мы же хотим сделать мир лучше и совершеннее, не правда ли?</p><h2 class="wp-block-heading">Пример проекта</h2><p>У нас есть реальный проект, работа над которым ведётся прямо сейчас, пока пишется эта статья. Проект некоммерческий, никаких NDA. Плюс, он попутно выполняет некоторые образовательные цели &#8212; на нём обкатывает навыки информационного и функционального проектирования талантливая Евгения Шамрай.</p><h2 class="wp-block-heading">Информационная структура</h2><p>В проекте есть несколько информационных сущностей, у каждой есть некоторые свойства. Все сущности связаны между собой: какие-то напрямую, какие-то опосредованно.</p><p>Если попробовать изобразить иерархию сущностей графически, то получится что-то вроде этого:</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b998895&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b998895" class="wp-block-image aligncenter size-large size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1048" height="636" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2023/12/ia-example-sheme-1048x636.png" alt="" class="wp-image-3893" srcset="https://sherer.pro/content/uploads/2023/12/ia-example-sheme-1048x636.png 1048w, https://sherer.pro/content/uploads/2023/12/ia-example-sheme-768x466.png 768w" sizes="auto, (max-width: 1048px) 100vw, 1048px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p></p><ol class="wp-block-list"><li><strong>Инфоблок</strong> &#8212; самая низкоуровневая сущность, &#171;молекула&#187; информационной архитектуры, содержащая произвольную информацию (например, текст, цитату, изображение и тп). Из инфоблоков, собственно, и строится почти вся контентная часть продукта.</li><li><strong>Год</strong> &#8212; статическая среднеуровневая сущность, которая объединяет <em>инфоблоки </em>в разрезе определённых лет. Они единые для всех <em>композиторов</em>, но конкретные <em>годы </em>у конкретных <em>композиторов</em> могут не совпадать.</li><li><strong>Период</strong> &#8212; уникальная для каждого композитора среднеуровневая сущность, проходящая через все <em>слои</em> и объединяющая <em>годы</em> в определённый этап жизни <em>композитора</em>.</li><li><strong>Слой </strong>&#8212; статическая информационная сущность, объединяющая разные <em>периоды </em>в некий тематический срез творчества композитора. Слоёв ограниченное количество, они обязательны и одинаковы для всех <em>композиторов</em>.</li><li><strong>Композитор </strong>&#8212; высокоуровневая, главная сущность проекта.</li></ol><p>Если рассматривать эту модель как плоскую, то получается, что внутри одного <em>композитора </em>находится произвольное количество <em>инфоблоков</em>, которые объединяются в <em>годы</em>, которые объединяются в <em>периоды</em>, которые объединяются в <em>слои</em>.</p><p>У каждой сущности есть свои свойства. Мы не будем детально перечислять и описывать все такие свойства, так как это выходит за рамки темы статьи. Но мы помним, что у каждой сущности в проекте всегда есть как минимум одно свойство: внутренний <em>идентификатор</em> (уникальный для каждого <em>экземпляра </em>этой сущности).</p><h2 class="wp-block-heading">Навигационная модель</h2><p>Схема навигации в примере максимально простая:</p><ul class="wp-block-list"><li>Есть главная страница, на ней перечислены <em>композиторы</em>.</li><li>Внутри раздела каждого композитора есть список <em>слоёв</em>.</li><li>Каждый <em>слой </em>представлен отдельной страницей, на которой в иерархическом порядке расположены <em>периоды</em>, а в них &#8212; <em>годы</em>.</li></ul><p>Внутри каждого <em>года </em>может находится произвольное количество <em>инфоблоков</em> &#8212; я не стал их отображать на схеме, чтобы не усложнять восприятие:</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b998c8e&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b998c8e" class="wp-block-image aligncenter size-large size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1048" height="691" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2023/12/ia-example-navigation-1048x691.png" alt="" class="wp-image-3894" srcset="https://sherer.pro/content/uploads/2023/12/ia-example-navigation-1048x691.png 1048w, https://sherer.pro/content/uploads/2023/12/ia-example-navigation-768x506.png 768w" sizes="auto, (max-width: 1048px) 100vw, 1048px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button><figcaption class="wp-element-caption">Визуализированная навигационная модель</figcaption></figure><h2 class="wp-block-heading">Под капотом</h2><p>Важно понимать, как именно будет работать наша система &#8212; без этого зачастую невозможно выяснить все свойства и связи сущностей. Здесь мы уже одной ногой ступаем на зыбкую почву <a href="https://sherer.pro/blog/dizajn-dannyh-chast-3-menjaemsja/">дизайна данных</a>, но без этого никак. Мы должны построить схему обмена и формирования информации в нашем продукте.</p><figure class="wp-block-pullquote"><blockquote><p><strong>Информационная модель</strong> фиксирует сущности/свойства/связи (что есть), тогда как <strong>дата-модель</strong> — физическое хранение и индексы (как реализуем). В примере мы сознательно показываем оба слоя, чтобы не терять контекст.</p></blockquote></figure><p><strong>В нашем случае логика такова:</strong></p><ol class="wp-block-list"><li>пользователь загружает страницу конкретного <em>слоя</em> на сайте;</li><li>браузер делает запрос к серверу, в котором указывает идентификатор этого <em>слоя </em>и идентификатор <em>композитора;</em></li><li>сервер принимает эти параметры и делает соответствующий запрос в базу данных;</li><li>в результате у него появляется массив <em>инфоблоков</em>, которые ему теперь нужно отсортировать.</li></ol><p><strong>Как же происходит сортировка?</strong> Здесь тоже всё просто:</p><ol class="wp-block-list"><li>все <em>инфоблоки </em>разделяются на <em>периоды</em>;</li><li><em>периоды </em>сортируются по порядку;</li><li>внутри <em>периодов </em>происходит объединение <em>инфоблоков</em> по <em>годам</em>;</li><li><em>годы </em>также сортируются по порядку внутри <em>периодов</em>;</li><li>внутри каждого <em>года</em> по порядку сортируются сами <em>инфоблоки</em>.</li></ol><p>В результате в браузер пользователя прилетает <strong>многомерный массив</strong>, который потом просто разбирается на странице.</p><h2 class="wp-block-heading">Связи сущностей</h2><p>Как я уже говорил, все сущности связаны. Но связь эта не всегда прямолинейна.</p><p>Чтобы связать информационные элементы, к одной сущности нужно прикрепить ссылку на другую. В нашем случае &#8212; к &#171;дочерней&#187; нужно прикрепить ссылку на &#171;родительскую&#187;. Делать это правильнее (и проще) всего как раз с помощью идентификаторов.</p><ul class="wp-block-list"><li><strong>Композитор </strong>&#8212; главная и независимая сущность.</li><li><strong>Слои </strong>единые для всех <em>композиторов</em> и вообще &#8212; для всего проекта, они ни от чего не зависят.</li><li><strong>Период </strong>у нас уникален для каждого <em>композитора</em>, а значит, ссылается на него (имеет в своих свойствах идентификатор того <em>композитора</em>, которому принадлежит).</li><li><strong>Годы </strong>тоже едины для всего проекта, независимы от остальных сущностей.</li><li>И только <strong>инфоблоки</strong>, как низшая сущность, зависят от всех остальных информационных элементов системы. У них в свойствах прописаны идентификаторы всех остальных сущностей.</li></ul><p>Вот так выглядит схема зависимостей в нашем примере:</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b999173&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b999173" class="wp-block-image aligncenter size-large size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1048" height="181" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2023/12/ia-example-relations-1048x181.png" alt="" class="wp-image-3895" srcset="https://sherer.pro/content/uploads/2023/12/ia-example-relations-1048x181.png 1048w, https://sherer.pro/content/uploads/2023/12/ia-example-relations-768x133.png 768w" sizes="auto, (max-width: 1048px) 100vw, 1048px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button><figcaption class="wp-element-caption">Связь информационных сущностей</figcaption></figure><p>Больше всего свойств со связями в нашем случае будет именно у <em>инфоблоков</em>. Очевидно, что каждый раз, когда нам понадобится связать <em>инфоблок </em>с <em>композитором</em>, <em>слоем</em>, <em>периодом </em>или <em>годом</em>, мы просто прописываем ему соответствующий <strong>идентификатор </strong>в соответствующее поле.</p><h2 class="wp-block-heading">Проблема</h2><p>Мы понимаем, что самая &#171;насыщенная&#187; связями сущность &#8212; это <em>инфоблок</em>. Мы также понимаем, что продукт будет развиваться. В нём появятся дополнительные сущности, вроде <em>треков</em>, <em>плейлистов </em>или <em>событий</em>. И каждый <em>инфоблок </em>потенциально может оказаться связанным с этими новыми сущностями.</p><p>Какая здесь появляется проблема? Мы должны спроектировать <strong>хранение</strong> связей в <em>инфоблоке </em>таким образом, чтобы добавление новых сущностей и связывание их с <em>инфоблоками</em> (как минимум с ними) не вызывало особенных проблем.</p><p>Как такое проектирование происходит обычно? А никак. Когда добавится новый тип сущности, к <em>инфоблоку </em>в базе данных просто будет добавлено новое поле. У каких-то инфоблоков оно будет заполнено, у каких-то &#8212; нет. Где-то в интерфейсе будет обрабатываться его отсутствие, где-то &#8212; не будет. Где-то на странице вывалится ошибка, где-то пользователь обматерит очередное обновление, где-то тестировщик обольётся кровавыми слезами.</p><p>А что, если это связь нелинейная? Не &#171;один ко одному&#187;, а &#171;один ко многим&#187;? Если конкретный <em>инфоблок</em> может содержать в себе связь с несколькими <em>треками</em>? Сможем мы в одном свойстве <em>инфоблока </em>сохранить несколько идентификаторов <em>треков</em>? А если можем, то почему вообще все связи не хранить в одном свойстве?</p><h2 class="wp-block-heading">Решение</h2><p>А решения нет. По крайней мере, однозначного.</p><p>Да, мы можем в одном свойстве хранить сразу несколько (сколько угодно) связей. Но упростит ли нам это задачу? Не будет ли слишком &#171;дорогим&#187; с точки зрения программных ресурсов разбор такого &#171;комплексного&#187; свойства? А если наших инфоблоков несколько миллионов? Справится ли сервер с необходимостью получить их все, выяснить, какие из них относятся к конкретному композитору и конкретному слою?</p><p>Боюсь, я вас запутал. Давайте немножко упрощу.</p><p>У нас, казалось бы, два варианта:</p><ol class="wp-block-list"><li>Хранить каждую связь в конкретном свойстве инфоблока. Это в IA &#8212; признак <strong>&#171;строгой&#187;</strong> или, по другому, <strong>&#171;сильной&#187;</strong> типизации.</li><li>Хранить все связи в одном свойстве, массивом. Обычно это отличает <strong>&#171;слабую&#187;</strong> типизацию.</li></ol><p>&#171;Слабая&#187; типизация подразумевает больше свободы, &#171;строгая&#187; &#8212; больше стабильности. Но при этом каждая из них, возведённая в абсолют, может уничтожить все плоды ваших усилий.</p><p>Слишком слабая типизация приведёт ваш продукт к тому, что простая операция по извлечению и сортировке нужных инфоблоков будет занимать непозволительно много времени. Сайт будет грузиться медленнее, конверсия будет снижаться, бизнес (или кто там у вас вместо него) окажется недоволен.</p><p>Излишне сильная типизация в разы увеличит стоимость поддержки и развития продукта. Разработчики будут ещё сильнее, чем обычно, материть проектировщика/архитектора. Время внедрения и отладки даже маленькой новой фичи станет сопоставимо с операцией Барбаросса в 1941-ом (и, вероятно, закончится так же, &#8212; провалом).</p><h2 class="wp-block-heading">Настоящее решение</h2><p>Грамотный и осознанный баланс &#8212; вот залог действительно качественного продукта. Это в полной мере касается и информационной архитектуры.</p><p>В нашем случае я выберу комбинированный подход:</p><p>Для связей, которые могут понадобиться при &#171;выборке&#187; <em>инфоблоков</em> из базы данных, я выберу отдельные свойства. В нашем случае это будут уже упомянутые <em>композитор</em>, <em>слой</em>, <em>период </em>и <em>год</em>. Остальные, существующие или потенциально возможные, я запихну в отдельное свойство массивом.</p><figure class="wp-block-pullquote"><blockquote><p>Правило простое: частые и ключевые связи мы прописываем как явные поля, а редкие и вариативные — в агрегате или отдельной связующей таблице. Так мы держим и производительность, и гибкость.</p></blockquote></figure><p>В следующей статье разберём подробно, что же такое информационная сущность и из чего она состоит.</p><p>Запись <a href="https://sherer.pro/blog/informacionnaya-arxitektura-primer-i-tipizaciya/">Информационная архитектура: пример и типизация</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></content:encoded></item><item><title>Информационная архитектура: краткий экскурс</title><link>https://sherer.pro/blog/informacionnaya-arxitektura-kratkij-ekskurs/</link><comments>https://sherer.pro/blog/informacionnaya-arxitektura-kratkij-ekskurs/#comments</comments><dc:creator><![CDATA[Павел Шерер]]></dc:creator><pubDate>Fri, 08 Jan 2021 11:44:32 +0000</pubDate><category><![CDATA[UX/UI]]></category><category><![CDATA[Аналитика]]></category><category><![CDATA[Технический дизайн]]></category><category><![CDATA[аналитика]]></category><category><![CDATA[гайд]]></category><category><![CDATA[информационная архитектура]]></category><guid isPermaLink="false">https://sherer.pro/?p=2850</guid><description><![CDATA[<p>Короткая статья про основы информационной архитектуры: трамплин для погружения в область.</p><p>Запись <a href="https://sherer.pro/blog/informacionnaya-arxitektura-kratkij-ekskurs/">Информационная архитектура: краткий экскурс</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></description><content:encoded><![CDATA[<p><em>Это короткая статья не претендует на полное раскрытие термина, ибо он настолько глубок, что даже для базового его изложения потребуется не одна статья. Здесь я опишу только самые фундаментальные принципы, остальное будет в других частях цикла.</em></p><h2 class="wp-block-heading">Что такое IA</h2><p>Очень ёмко об информационной архитектуре высказался Алексей Бородкин, основатель Гильдии Вольных Проектировщиков:</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Это описание связи всего со всем!</p></blockquote><p>И во многом он прав. Во время этапа проработки IA формируется информационная структура продукта, выявляются взаимосвязи между всеми его частями, определяется их важность и содержимое.</p><p>Грамотная информационная архитектура упрощает поддержку и развитие продукта, улучшает UX:</p><ul class="wp-block-list"><li>программисты не матерят своих предшественников (или себя) за неудобные для масштабирования роутинг и базы данных;</li><li>контент-менеджеры и администраторы больше не льют кровавые слёзы при работе с внутренней частью продукта;</li><li>пользователи легко и непринуждённо находят то, что им нужно и попадают именно туда, куда хотели;</li><li>сеошники и поисковые системы влюбляются в ваш сайт и не хотят оттуда никуда уходить.</li></ul><p>Притом, как это часто случается в IT, каждый специалист вкладывает немного собственного смысла в этот термин, поэтому любая формулировка рискует оказаться недостаточно точной. И всё же я постарался сформулировать максимально общее определение информационной архитектуре:</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Это совокупность данных об информационной структуре цифрового продукта, способствующая его правильной работе, выполнению задач и интуитивному доступу к содержимому.</p></blockquote><p>Стало не сильно понятней, да? Вот так, сходу, всё это может показаться немного запутанным или сложным. Поэтому давайте на каком-нибудь очень простом и понятном примере пройдёмся по базовым этапам создания IA. Пусть это будет абстрактный интернет-магазин одежды.</p><h2 class="wp-block-heading">Этапы создания IA</h2><p>Важно понимать, что каждый опытный архитектор выполняет эту работу немного по-своему. В формате этой &#171;вводной&#187; статьи я смогу рассказать только о ключевых моментах, основных вехах.</p><h3 class="wp-block-heading">Подготовка</h3><p>Работа над информационной архитектурой начинается сильно позже старта проектирования. Сперва определяется концепция, суть продукта. Нам нужен базис, от которого мы уже начнём выстраивать IA.</p><p>Мы должны как минимум очертить высокоуровневые границы проекта, сформировать базовое понимание его функциональности. И только на этом этапе приступать к информационному проектированию.</p><p>В нашем случае базис относительно простой: есть интернет-магазин, есть товары, категории и пользователи. Углубляться не станем, а то всё-таки скатимся к лонгриду.</p><h3 class="wp-block-heading">Декомпозиция</h3><p>На этом шаге мы разбираем проект на отдельные <em>информационные сущности</em>. Каждая такая сущность обладает определёнными <em>свойствами</em>. Некоторые сущности могут быть <em>вложенными </em>(каталог и товар, например), некоторые &#8212; <em>независимыми</em>.</p><p>Итак, пусть в нашем примере будет только 5 сущностей:</p><ol class="wp-block-list"><li><strong>Страница </strong>(статические сущности, содержащие какую-то информацию; например, страницы &#171;О компании&#187;, &#171;Доставка и оплата&#187;).</li><li><strong>Товар </strong>(да, обычный товар с описанием, фоточками, ценой и тп).</li><li><strong>Каталог </strong>(внезапно, но каталог &#8212; это тоже сущность; у него есть свои свойства, вроде параметров поиска или уровня вложенности).</li><li><strong>Корзина </strong>(которая обладает <em>динамическими</em> свойствами: вложенные товары и их количество, скидки, даже связь с конкретным пользователем).</li><li><strong>Пользователь </strong>(тут всё понятно: как минимум, у пользователя есть регистрационные данные, адрес доставки и платёжные реквизиты).</li></ol><p>Конечно, даже в самом простом e-commerce этих сущностей больше, а их свойства разнообразнее. Однако мы помним, что это пример, да? Для простоты мы в дальнейшем даже не будем детально разбирать почти ничего, кроме самих &#171;товаров&#187;.</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Важная оговорка: в контент-проектах «Страница» — полноценная <strong>контент-сущность</strong>, но в UX-лексике «страница/экран» — это <strong>UI-представление</strong>, и она не равна сущности домена. Подробнее об этом будет в третьей статье цикла.</p></blockquote><p><em>На этом и последующих этапах присутствуют некоторые пересечения с <a href="https://sherer.pro/blog/dizajn-dannyh-chast-1-chto-i-zachem/" target="_blank" rel="noreferrer noopener">дизайном данных</a>, это не страшно и не противоречит концепции информационной архитектуры. Если проектировщик/архитектор хороший, он совмещает оба направления, экономя ресурсы компании</em>.</p><h3 class="wp-block-heading">Классификация</h3><p>Теперь надо классифицировать получившиеся сущности, но не только их. Для грамотного составления архитектуры, нам потребуется классифицировать ещё и возможные операции с этими сущностями.</p><p><strong>A. Классификация пользовательских потребностей</strong> (задач) в разрезе информационной архитектуры опирается, как правило, на результаты пользовательских же исследований. Мы должны понимать, что <em>действительно</em> нужно нашим потенциальным покупателям. Исходя из этой информации, мы выясним, как именно следует связать наши сущности как они будут друг к другу относиться.</p><p>Для нашего примера классификация задач пользователя будет очень простой:</p><ol class="wp-block-list"><li><strong>Найти товары</strong> (с помощью поиска, фильтрации и сортировки).</li><li><strong>Сравнить товары</strong> (выбрать наиболее подходящий вариант).</li><li><strong>Почитать про товары</strong> (ознакомиться с характеристиками).</li><li><strong>Купить товары</strong> (положить в корзину, оплатить и ждать доставку).</li></ol><p>Как видите, все действия напрямую связаны с товарами, и опосредованно &#8212; с остальными сущностями (например, <em>поиск товара</em> осуществляется в <em>каталоге</em>, а покупка &#8212; в <em>корзине</em>).</p><p>На этом шаге мы также определяем все возможные варианты и способы манипуляции с нашими сущностями: определяем, как будет осуществляться поиск, по каким параметрам мы будем сортировать товары и так далее.</p><p><strong>B. Классификация информационных сущностей</strong> &#8212; ещё один обязательный этап. Вся информация, которую видит пользователь, должна быть структурирована. Страницы должны объединяться в разделы, товары &#8212; в категории. И те, и другие должны быть доступны для поиска, а последние &#8212; ещё и для сортировки. У товаров могут быть общие свойства, вроде скрытых от глаз пользователя &#171;тегов/меток&#187; или доступных для просмотра &#171;размеров&#187;.</p><p>На этапе классификации сущностей мы решаем, по какому принципу они будут объединяться и как пользователю будет удобнее с ними обращаться. Попутно не забываем и про администраторов, которым тоже нужно упростить работу.</p><p>Но для начала немного терминологии:</p><ul class="wp-block-list"><li><strong>таксономия </strong>— это управляемая схема классификации;</li><li><strong>термины</strong> — атомы таксономии.</li></ul><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Например, таксономия &#171;Размер&#187; может содержать несколько терминов: &#171;XXL&#187;, &#171;XL&#187;, &#171;L&#187;, &#171;M&#187;, &#171;S&#187;, &#171;XS&#187;.</p></blockquote><p>В реальных продуктах часть терминов обрастает свойствами и становится «почти сущностями» — это нормально, фиксируем это явно.</p><p>В нашем примере добавляем три <em>таксономии</em> и одно общее <em>свойство</em>:</p><ol class="wp-block-list"><li><strong>Категория </strong>(иерархическая таксономия сущности &#171;товар&#187;).</li><li><strong>Метка </strong>(не-иерархическая таксономия сущности &#171;товар&#187;).</li><li><strong>Размер</strong> (не-иерархическая таксономия сущности &#171;товар&#187;).</li><li><strong>Цвет </strong>(общее свойство для всех экземпляров сущности &#171;товар&#187;).</li></ol><p>Иерархические таксономии могут быть вложенными: например, категория может иметь подкатегорию (зимняя одежда -&gt; пуховики). А вот у метки, например, родительского термина быть не может.</p><p><em>Некоторые архитекторы считают таксономии за отдельные сущности, однако мне такой подход не нравится, я предпочитаю отделять одно от другого. Вот &#171;термин&#187; таксономии вполне можно иногда посчитать за сущность, ибо порой термины обрастают таким количеством свойств, что сами по себе начинают претендовать на роль серьёзной информационной составляющей.</em></p><h3 class="wp-block-heading">Выявление связей</h3><p><em>На самом деле, этот этап (и следующий тоже) часто параллелятся с предыдущим, но излагать и воспринимать их удобнее именно так. Просто имейте в виду, что это не всегда прям последовательные шаги.</em></p><p>Итак, мы разобрались, что у нас за сущности и таксономии. Теперь нужно понять, как они будут между собой связаны. Связи сущностей могут быть совершенно разными. Если копнуть глубоко, то неподготовленный читатель слегка ошалеет от всех этих <em>&#171;от одного ко многим&#187;</em>, <em>&#171;от многих ко многим&#187;</em> и тп. Мы рассмотрим только простые варианты, когда связи являются либо <em>&#171;плоскими&#187;, либо &#171;иерархическими&#187;</em>.</p><p><strong>Плоские связи </strong>в нашем случае &#8212; это связь терминов таксономии &#171;метки&#187; между собой. У них нет родителей, они &#171;равны&#187;. Или связь товаров с одинаковыми &#171;метками&#187; &#8212; она тоже плоская. Кстати, связь самого товара с меткой &#8212; тоже плоская.</p><p><strong>Иерархическая связь</strong>, например, у терминов таксономии &#171;категории&#187; &#8212; они почти всегда вложенные. Также иерархическая связь будет между сущностями &#171;каталог&#187; и &#171;товар&#187;, так как первый всегда включает в себя несколько товаров. Если пойти дальше, то в игру вступают термины таксономии и у нас получается целая цепочка связей: <em>каталог </em>-&gt; <em>категория </em>-&gt; <em>товар</em>.</p><p>Иерархия сущностей &#8212; вообще отдельная песня. У хорошего архитектора почти все сущности в проекте делится на высоко-, средне- и низкоуровневые.</p><h3 class="wp-block-heading">Фиксация свойств</h3><p>Во время всей работы над информационной архитектурой мы всё время попутно выясняли, какие именно свойства будут у наших сущностей. Пришло время их зафиксировать.</p><p>Мы знаем, что у <strong>товаров </strong>есть как минимум 10 свойств:</p><ol class="wp-block-list"><li><strong>Идентификатор </strong>(внутренний, в базе данных, он есть у каждой сущности и термина таксономии).</li><li><strong>Артикул</strong> (внешний, для обмена данными, например, с системой складского учёта).</li><li><strong>Название</strong>.</li><li><strong>Описание</strong>.</li><li><strong>Основное изображение</strong> (используется в карточке товара в каталоге).</li><li><strong>Дополнительные изображения</strong> (используются в галерее изображений на странице товара).</li><li><strong>Цвет </strong>(общее свойство для всех товаров: оно не &#171;сквозное&#187;, как метки и категории, а может быть уникальным для каждого товара &#8212; например, «синий с белым узором»).</li><li><strong>Размер </strong>(прикреплённый термин таксономии).</li><li><strong>Категория</strong> (прикреплённый термин таксономии).</li><li><strong>Метки </strong>(несколько терминов таксономии, на основе которых будут показываться &#171;похожие&#187; товары).</li></ol><p>При этом мы знаем, что свойства 8 и 9 являются &#171;ссылками&#187; на конкретный термин таксономии, а десятое свойство &#8212; даже на несколько таких терминов.</p><p>Таким образом, мы составили информационную модельку нашего товара. Мы молодцы.</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>На самом деле, конечно, не всё так просто. И в третьей статье цикла мы немного углубимся в тему свойств сущностей. Например, добавим понятие «контролируемый словарь», «<a href="https://ru.wikipedia.org/wiki/%D0%A4%D0%B0%D1%81%D0%B5%D1%82%D0%BD%D0%B0%D1%8F_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%86%D0%B8%D1%8F" target="_blank" rel="noreferrer noopener">фасет</a>» и другие.</p></blockquote><h3 class="wp-block-heading">Схематизация</h3><p>Составление предметных и навигационных схем продукта. Самый последний и самый сложный этап. Причём его сложность чаще не в каких-то особенных нотациях или технических трудностях. Его главная сложность &#8212; в психологическом факторе. Я видел, как талантливые информационные архитекторы сводили на нет результаты всей своей работы из-за небрежного финального оформления.</p><p>Причина тут простая: в голове у архитектора картинка уже сложилась. Переносить её на бумагу (пусть и цифровую) кажется второстепенной задачей. Гештальт закрыт, мозг получил свою дозу дофамина.</p><p>Вот только без грамотного отчуждения практически любые знания бесполезны. Всё, что получилось выяснить, сопоставить и придумать во время работы над информационной архитектурой, должно быть зафиксировано в документации. В случае с IA эта документация состоит, по большей части из разного рода схем. Здесь и перечень/описание сущностей и их свойств, здесь взаимосвязи, задачи, операции и так далее. Самые крутые даже описывают предполагаемую программную реализацию, миксуя информационную архитектуру с дизайном данных.</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Важно: информационная архитектура описывает «что и как связано» (сущности, свойства, таксономии), а навигация — «как по этому двигаться» (меню, крошки, фасеты, поиск).</p></blockquote><p>Об артефактах информационного проектирования можно написать не одну статью. И, возможно, я это ещё сделаю.</p><h2 class="wp-block-heading">Напоследок</h2><p>О сущностях, типах свойств и связей можно рассказывать очень долго. Как и об информационных моделях, например. Но об этом в следующих статьях.</p><p>Запись <a href="https://sherer.pro/blog/informacionnaya-arxitektura-kratkij-ekskurs/">Информационная архитектура: краткий экскурс</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></content:encoded><wfw:commentRss>https://sherer.pro/blog/informacionnaya-arxitektura-kratkij-ekskurs/feed/</wfw:commentRss><slash:comments>1</slash:comments></item><item><title>Регистрация и логин на стероидах</title><link>https://sherer.pro/blog/registracija-i-login-na-steroidah/</link><comments>https://sherer.pro/blog/registracija-i-login-na-steroidah/#comments</comments><dc:creator><![CDATA[Павел Шерер]]></dc:creator><pubDate>Sun, 18 Aug 2019 10:20:05 +0000</pubDate><category><![CDATA[UX/UI]]></category><category><![CDATA[Документация]]></category><category><![CDATA[Технический дизайн]]></category><category><![CDATA[гайд]]></category><category><![CDATA[методологии]]></category><category><![CDATA[функциональное проектирование]]></category><guid isPermaLink="false">https://sherer.pro/?p=2099</guid><description><![CDATA[<p>Часто ли вы сталкивались с тем, что не помните, через какую соцсеть логинились на сайте? Или что разработчики не очень точно реализовали логику придуманной вами регистрации? Этим постом я начинаю выкладывать свои проектные решения в паблик - и первое будет посвящено подробной диаграмме логина, регистрации (обычной и через соцсети) и восстановления доступа.</p><p>Запись <a href="https://sherer.pro/blog/registracija-i-login-na-steroidah/">Регистрация и логин на стероидах</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></description><content:encoded><![CDATA[<p>Что может быть проще и понятнее, чем стандартная регистрация? Даже если она включает в себя вход через соцсети и восстановление доступа. Даже если нужно рассказать разработчикам о логике &#8212; что там рассказывать-то?</p><p>Кажется, любой продуктовый дизайнер легко накидает вам идеальный сценарий регистрации с закрытыми глазами &#8212; пока лифт спускается из офиса в холл.</p><p>Но не всё так просто.</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Насмотренность в проектировании не менее важна, чем в остальных областях дизайна. Изучение чужих работ, помимо прочего, ещё и позволяет более критически относиться к своим. Этим постом я начинаю выкладывать собственные проектные решения в паблик &#8212; и сперва покажу вам кусок функционального проектирования.</p></blockquote><h2 class="wp-block-heading">UPD: спустя год (09.2020)</h2><p>Это материал, основанный на реальной проектной практике, он за первый год своего существования набрал приличное количество положительных реакций. Хочется верить, что кому-то он оказался полезным, сделал чей-то сервис более удобным и защищённым.</p><p>Однако как и любой кусок реальной документации, эта схема имела ряд проектных ограничений. Перепиливать её, делая универсальной, было бы не правильно — в числе прочего, это был шаг в сторону повышения насмотренности дизайнеров/проектировщиков.</p><p>Но при этом хотелось дать более гибкий инструмент, однозначно подсветить сложные и не самые очевидные технические и сценарные решения. В общем, ловите новую <a href="https://vc.ru/dev/156552-instrukciya-kak-napisat-idealnuyu-registraciyu" target="_blank" rel="noreferrer noopener">статью</a> про идеальные логин, регистрацию и восстановление доступа. Немножко лонгрид, конечно, но вам наверняка понравится.</p><h2 class="wp-block-heading">Почему регистрация</h2><p>В большинстве сервисов регистрация &#8212; это первый серьёзный шаг пользователя на тернистом пути к целевому для бизнеса действию. От того, насколько идеально будут работать логин, регистрация и восстановление доступа, зависит конверсия; это даже объяснять не нужно. </p><p>У каждого опытного дизайнера есть готовый набор стандартных схем заполучения заветных телефонов с емэйлами. Выбрать нужную, модифицировать под реалии проекта и швырнуть в разработку. Всё просто.</p><h3 class="wp-block-heading">Проблема</h3><p>Однако почему же тогда регистрация на большинстве сервисов отнюдь не идеальна?</p><p>И почему именно регистрация и сопутствующая функциональность отнимают столько сил и времени у разработчиков и тестировщиков? Неужели они настолько тупые, что не могут быстро реализовать простой сценарий? Нет, они не тупые, они умные. Просто сценарий не такой простой, каким кажется. А ещё они вынуждены решать проблемы, которые должен был до них закрыть <a rel="noreferrer noopener" aria-label="дизайнер (откроется в новой вкладке)" href="https://sherer.pro/blog/dizajn-vs-proektirovanie/" target="_blank">дизайнер</a>. Вот навскидку шесть вопросов, связанных с одной лишь регистрацией через социальные сети:</p><ol class="wp-block-list"><li><em>Что произойдёт, если Facebook, с помощью которого регистрируется пользователь, не вернул e-mail?</em></li><li><em>Что делать, если соцсеть вообще отвалилась и не работает (например, кто-то из админов поменял конфиги)?</em></li><li><em>А если соцсеть при регистрации вернула e-mail, который уже есть в базе?</em></li><li><em>Как быть, если пользователь восстанавливает доступ, но у него нет пароля, так как он создавал аккаунт через ВКонтакте?</em></li><li><em>Нужно ли при попытке регистрации или восстановления доступа напоминать пользователю, что он уже регистрировался через Twitter?</em></li><li><em>А можно как-то заранее сообщить пользователю (ещё до нажатия кнопки входа), через какую соцсеть он входил в прошлый раз?</em></li></ol><p>И ещё тьма вопросов. Все они относятся к бизнес-логике, интерфейсам и юиксу. И очень часто некоторые из них попросту обходятся дизайнерами. Разработчики тоже не боги. Они сперва делают то, что описано; потом &#8212; то что принесли тестировщики; потом &#8212; то, до чего додумались сами; а затем &#8212; чинят то, что поломали предыдущие два шага. И в части этих работ они уже не обращаются к дизайнерам, а делают &#171;по аналогии&#187;. Понимаете, что происходит в такие моменты? Да, UX валится к чертям. Потому что красное сообщение о том, что <em>&#171;пароль не подходит&#187;</em> следовало бы заменить на синенькое <em>&#171;не тупи, ты регался через фэйсбук, у тебя нет пароля&#187;</em>.</p><h3 class="wp-block-heading">Не решение</h3><p>Окей, допустим, нам попался реально умный дизайнер. Он описал все эти случаи. Все негативные сценарии, нулевые состояния, все экраны и валидации. Как он это сделал? </p><p>Учитывал ли он, кто именно будет <em><a rel="noreferrer noopener" aria-label="пользователем (откроется в новой вкладке)" href="https://sherer.pro/blog/uchim-proektnuju-komandu-chitat/" target="_blank">пользователем</a></em> этого описания? Может быть, разработчикам будет не очень удобно вычёсывать логику из тридцати листов текстовой документации? И даже если их не избежать, может, стоило сделать погружение более плавным?</p><p>А общался ли наш дизайнер с разработкой, чтобы пощупать серверную логику и выяснить, можно ли вообще сделать так, как он описал &#8212; или это космически дорого и долго?</p><p>Он не подумал, что какие-то части могут быть общими для разных сценариев? Это здорово бы упростило (читай &#171;удешевило&#187;) разработку. Хотя бы потому, что не всегда разработчик может (и будет) выходить на более высокий уровень абстракции &#8212; чаще всего он занят конкретной узкой задачей и не соотносит её с остальными. Или делает это не сильно тщательно.</p><h3 class="wp-block-heading">Решение</h3><p>Все эти проблемы разом убивает всего один-единственный документ. Вернее, одна диаграмма. Функциональная схема. </p><p>В ней можно описать:</p><ul class="wp-block-list"><li>действия пользователя (белые блоки);</li><li>действия системы на клиенте (серые блоки);</li><li>действия системы на сервере (синие блоки);</li><li>негативные события (красные блоки);</li><li>позитивные события (зелёные блоки);</li><li>условия перехода от действия к действию (жёлтые ромбы);</li></ul><p>Все переходы в рамках одного компонента (сервера или сайта/мобильного приложения) мы будем показывать простыми линиями, а переходы между компонентами (например, передачу информации на сервер) &#8212; пунктирными.</p><p>Отдельно укажем точки входа и выхода из сценариев. А мелким текстом над некоторыми блоками даже укажем названия и состояния относящихся к ним экранов!</p><p>Красота же, да?</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b99b7e4&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b99b7e4" class="wp-block-image size-full wp-lightbox-container"><img decoding="async" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2019/08/auth-scheme.jpg" alt="" class="wp-image-2276"/><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p>Пока рисовали, вспомнили про что-то ещё, дополнили. Через два дня подошли, посмотрели, увидели прореху &#8212; залатали. В итоге сделали немного сложную, плохо читаемую, но полную и наглядную функциональную диаграмму логина, регистрации и восстановления доступа.</p><p>Тут у нас и путь пользователя, и логика поведения системы, и обработка всех негативных и спорных сценариев, и общие функции (например, запись в БД данных о входе и отработка успешной аутентификации), и указание конкретных экранов и их состояний.</p><p>Посмотрите внимательно. В нашей диаграмме есть несколько простых решений, которые почти никто не использует &#8212; хотя они напрашиваются сами. Например, если у пользователя сохранились куки соцсетей, но протух ключ авторизации, мы можем показать ему его аватарку рядом с иконкой соцсети, через которую он входил. Или после попытки регистрации через e-mail подсказать, к какой соцсети этот e-mail привязан. Или сделать аккаунт пользователя безопаснее, деактивируя после использования его ключ из письма с восстановлением доступа (увы, многие разработчики просто забывают это реализовать).</p><h2 class="wp-block-heading">Сценарии</h2><p>Давайте пойдём дальше и сделаем нашу чудо-схему несколько более удобной для восприятия &#8212; ведь от того, насколько она будет читаемой, зависит качество её понимания и реализации программистами. </p><p>Для этого будет достаточно лишь подсветить конкретные сценарии &#8212; хвала богам, у нас их всего четыре:</p><ul class="wp-block-list"><li>обычная регистрация через e-mail;</li><li>регистрация через соцсети;</li><li>вход в аккаунт;</li><li> восстановление доступа.</li></ul><p>Я не стану детально описывать особенности и решения каждого сценария &#8212; они прекрасно понятны из самих диаграмм. Если у вас возникли вопросы &#8212; пишите в комментариях.</p><h3 class="wp-block-heading">Обычная регистрация</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b99bc10&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b99bc10" class="wp-block-image size-full wp-lightbox-container"><img decoding="async" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2019/08/auth-scheme-registration-focus.jpg" alt="" class="wp-image-2278"/><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><h3 class="wp-block-heading">Регистрация через соцсети</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b99bebf&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b99bebf" class="wp-block-image size-full wp-lightbox-container"><img decoding="async" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2019/08/auth-scheme-social-focus.jpg" alt="Функциональная схема регистрации через e-mail, регистрации через соцсети, входа в аккаунт и восстановления доступа" class="wp-image-2280"/><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><h3 class="wp-block-heading">Вход в аккаунт</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b99c184&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b99c184" class="wp-block-image size-full wp-lightbox-container"><img decoding="async" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2019/08/auth-scheme-login-focus.jpg" alt="" class="wp-image-2277"/><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><h3 class="wp-block-heading">Восстановление доступа</h3><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b99c418&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b99c418" class="wp-block-image size-full wp-lightbox-container"><img decoding="async" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2019/08/auth-scheme-restore-focus.jpg" alt="" class="wp-image-2279"/><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><h2 class="wp-block-heading">Это не идеальная регистрация</h2><p>И эту схему можно улучшать бесконечно.</p><p>Например, показывать подсказку про соцсеть ещё и при неудачном логине. Да объединить в общую функцию показ таких подсказок у всех сценариев: регистрации, логина и восстановления доступа (как и ошибок &#171;e-mail уже используется&#187; и &#171;не удалось отправить письмо&#187;). Или добавить проверку на срок действия ключа из письма с восстановлением доступа. Можно еще впилить капчу после пяти неудачных попыток входа. Вариантов тьма.</p><p>Но все продукты разные, и требования везде также отличаются. То, что я вам показал &#8212; это реальное проектное решение, со всеми присущими ему проектными ограничениями и особенностями. К примеру, здесь форма логина открывается в модальном окне &#8212; а у вас она может быть на отдельной странице. В любом случае, вы можете взять это решение и спокойно модифицировать его под себя.</p><h2 class="wp-block-heading">Исходники</h2><p>Понятно, что ценность этой статьи была бы невысока, если б я не предоставил исходников диаграммы. Собственно, вот.</p><p>В архиве:</p><ol class="wp-block-list"><li>исходник диаграммы (делал в <a aria-label="draw.io (откроется в новой вкладке)" rel="noreferrer noopener" href="https://about.draw.io/" target="_blank">draw.io</a>, так как работал в Confluence);</li><li>все диаграммы в SVG и JPG с подсветкой конкретных сценариев из этого поста.</li></ol><div class="wp-block-file"><a id="wp-block-file--media-4ff504af-2e31-4617-b5ec-552cbdfb0bfa" href="https://sherer.pro/content/uploads/2019/08/auth-scheme-all-in-one.zip" target="_blank" rel="noreferrer noopener">Функциональная схема регистрации</a><a href="https://sherer.pro/content/uploads/2019/08/auth-scheme-all-in-one.zip" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-4ff504af-2e31-4617-b5ec-552cbdfb0bfa">Скачать</a></div><p><em>Видимо, из-за специфического содержания архива хром иногда ругается, что файл скачивают редко и он может быть вредоносным. Не верьте, всё там <a href="https://www.virustotal.com/gui/url/aa2394e331a00b19eb8b0cf17ff298d11f94d1738dd920d83901692bd4db6695/detection" target="_blank" rel="noreferrer noopener">нормально</a>.</em></p><p>Запись <a href="https://sherer.pro/blog/registracija-i-login-na-steroidah/">Регистрация и логин на стероидах</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></content:encoded><wfw:commentRss>https://sherer.pro/blog/registracija-i-login-na-steroidah/feed/</wfw:commentRss><slash:comments>8</slash:comments></item><item><title>Учим проектную команду читать</title><link>https://sherer.pro/blog/uchim-proektnuju-komandu-chitat/</link><comments>https://sherer.pro/blog/uchim-proektnuju-komandu-chitat/#comments</comments><dc:creator><![CDATA[Павел Шерер]]></dc:creator><pubDate>Sat, 13 Jul 2019 11:00:58 +0000</pubDate><category><![CDATA[UX/UI]]></category><category><![CDATA[Документация]]></category><category><![CDATA[гайд]]></category><guid isPermaLink="false">https://sherer.pro/?p=1384</guid><description><![CDATA[<p>Как сделать так, чтобы проектная команда усваивала документацию с тем же рвением, что и быстрые углеводы? Есть несколько правил и хаков.</p><p>Запись <a href="https://sherer.pro/blog/uchim-proektnuju-komandu-chitat/">Учим проектную команду читать</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></description><content:encoded><![CDATA[<p>Давным-давно, когда компьютеры были деревянными, жил-был один добрый инженер. Тогда инженеры все были добрыми &#8212; это была престижная работа, хотя никто и не знал ещё слова &#171;престижная&#187;. Однажды, переписывая в десятый раз сложнейшую программу (весом в 4 килобайта), он вдруг подумал: &#171;А пошло оно всё!&#187;. Встал, написал заявление по собственному и ушёл торговать контрафактными джинсами… Ой, простите, это из другой истории про другого инженера. Наш ничего не писал. Ну то есть писал, конечно, но не заявление, а программы. Хотя и заявления иногда тоже &#8212; на отпуск например. Или на отгул вне очереди, когда его собака ощенилась на даче, а жена не знала, что делать. Ему тогда не подписали заявление, и жена (суровая работница общепита: столовой при трубопрокатном заводе) утопила всех щенков, потому что маленькие дворняжки никому не нужны, а в однушке на 34-х метрах не уместишь шесть здоровенных псин. Дача-то только летом, да и то по выходным. </p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b99d188&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b99d188" class="wp-block-image size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="1048" height="393" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2019/07/old-computer-1048x393.jpg" alt="" class="wp-image-2091" srcset="https://sherer.pro/content/uploads/2019/07/old-computer-1048x393.jpg 1048w, https://sherer.pro/content/uploads/2019/07/old-computer-768x288.jpg 768w, https://sherer.pro/content/uploads/2019/07/old-computer.jpg 1920w" sizes="auto, (max-width: 1048px) 100vw, 1048px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button></figure><p>В общем, да, грустная тогда вышла история. Инженер наш даже запил немножко. Недельку. Его бы уволили, но на предприятии никто не знал, в какое место надо засовывать перфокарты &#8212; и его оставили, просто лишив премии. Но премия была небольшая, так что он не сильно и расстроился. Вообще, зарплата инженера тогда была не ахти, не то что сейчас. Хотя тогда и цены были другие. А вот продуктов не было &#8212; один только дефицит в каждом магазине. Инженер вообще был доволен, что нашел такую жену, которая в общепите работает. Сами понимаете, о таком писать не принято, но с едой у них в доме проблем не было. Мурзилке (это собаку так звали, которая на даче ощенилась, из-за чего инженер пытался взять отгул, но ему не дали и он запил) вообще повезло &#8212; жена (инженера, не Мурзилки) каждый день что-нибудь, да и приносила с работы.</p><h2 class="wp-block-heading">Это — история</h2><p>И она не про Мурзилку, не про инженера с женой и не про расхищение социалистической собственности. Эта история про проектирование.</p><p>Хотя так себе история, надо признаться. Да что там, чушь полная. Хотел поведать о том, как нелегко было инженеру в ту пору сформировать архитектуру даже простой программы, но в какой-то момент… Что произошло вообще? Да все просто: мелочи, детали и нюансы погребли под собой суть. Причем так ловко, что та даже опомниться не успела.</p><p>У рассказа должна быть структура, иначе крайне высок риск, что он превратится вот в такую вот ахинею. Только профессиональный писатель способен удержать план длинного рассказа в голове, да не растерять при этом хотя бы те же характеры персонажей. Поверьте, это сложнее, чем даже оправдываться перед женой, которая винит тебя в том, что утопила пятерых щенят.</p><p>Примерно такая же ситуация возникает и при попытке сформировать/сформулировать требования к разработке ПО. Вы можете быть суперкрутым спецом в своем деле, но если вас ненавидит проектная команда, какой в этом прок? А если ей придётся продираться через сбивчивый документ в 300 страниц &#8212; она вас возненавидят, гарантирую.</p><h2 class="wp-block-heading">Все делают это</h2><p>Проектную документацию, в том или ином виде, пишут все дизайнеры. Однако качество подобных творений такое же разное, как и уровень самих творцов. И я говорю не только о содержательной части.</p><p>Плохая проектная документация &#8212; как арт-хаусное кино: кто-то поймет, кто-то нет, а кто-то только подумает, что понял. Разница лишь в том, что выяснить, к какой из этих категорий относится исполнитель проекта, получится только в самом финале. И вам очень повезет, если в финале проектирования, а не реализации.</p><p>Когда ты создаёшь дизайн продукта, ты словно пишешь рассказ (а иногда даже почти книгу). А чтобы написать художественное произведение, недостаточно просто пересказать историю. Нужно понимать характер персонажей, знать предметную область, понимать, кто именно твои читатели, и много чего ещё. </p><p>Нафига писать рассказ, который никто никогда не прочтёт? Или прочтёт с явным трудом, как инструкцию к старой микроволновке? Рассказ должен читаться легко, оставаться в памяти надолго, читатель должен жалеть, что рассказ кончился. Так и с документацией. </p><p>О боги, сколько я за свою жизнь видел техзаданий, концепций и диаграмм, которые никто, кроме их создателя, не может прочесть! А спустя полгода-год &#8212; уже и сами создатели с трудом их осиливают. Такая документация становится &#171;вещью в себе&#187;, она существует вне нашего восприятия. Не надо так делать.</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b99d567&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b99d567" class="wp-block-image size-full wp-lightbox-container"><img decoding="async" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2019/07/system-data-flow-blured-scaled.jpg" alt="Потоки данных" class="wp-image-2038"/><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button><figcaption class="wp-element-caption">Обычная диаграмма потоков данных &#8212; игра «выберись из лабиринта». Заблюрено, ибо NDA.</figcaption></figure><p>Видите картинку сверху? Она создавалась <a rel="noreferrer noopener" aria-label="Мариной Пустовит (откроется в новой вкладке)" href="https://www.facebook.com/kinkreu" target="_blank">Мариной Пустовит</a> с целью структурировать у себя в голове всю имеющуюся информацию по данным проекта. Такие запутанные схемы ни в коем случае нельзя передавать разработчикам и, тем более, клиентам. Мир и так не идеален, не стоит делать его хуже, а людей &#8212; грустнее.</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Помните, что <strong>у проектной документации</strong> тоже <strong>есть пользователи</strong>. Рассматривайте её как отдельный внутренний <strong>продукт</strong>.</p></blockquote><p>Ваша документация должна быть понятной, однозначной, отчуждаемой. Она должна быть, чёрт возьми, интересной! Это ведь действительно не очень сложно. Мы придумываем удобные интерфейсы (и не важно, UI или API) &#8212; но даже не пытаемся понять тех, кто реализует то, что мы там напридумывали.</p><p>Статья называется &#171;учим проектную команду читать&#187;, но, говоря по правде, она должна называться &#171;учимся писать для проектной команды&#187;. Или &#171;прививаем проектной команде любовь к чтению&#187;. Ведь сложно полюбить чтение, если вся твоя библиотека &#8212; это учебники по ядерной физике и селекции папоротниковых (хотя тут на любителя, конечно).</p><h2 class="wp-block-heading">8 советов</h2><p>В итоге я собрал несколько правил и хаков, упрощающих &#171;впитывание&#187; информации членами проектной команды (да и клиентами, чего уж там).</p><p>Часть из этих советов я подсмотрел у других дизайнеров, часть выработал сам, а часть всплыла в ходе моего недавнего микро-опроса на фэйсбуке (за что отдельное спасибо <a rel="noreferrer noopener" aria-label="Астхик Сукиасян (откроется в новой вкладке)" href="https://www.facebook.com/astkhik.sukiasyan" target="_blank">Астхик Сукиасян</a>, <a rel="noreferrer noopener" aria-label="Антону Григорьеву (откроется в новой вкладке)" href="https://www.facebook.com/vandergrav" target="_blank">Антону Григорьеву</a> и <a rel="noreferrer noopener" aria-label="Виталию Мазуревичу (откроется в новой вкладке)" href="https://www.facebook.com/vitaly.mazurevich" target="_blank">Виталию Мазуревичу</a>).</p><p>Разумеется, это никакой не чеклист. Используйте только те пункты, которые применимы к конкретному проекту и конкретным условиям. Включайте голову, в общем.</p><h3 class="wp-block-heading">Плавное погружение</h3><p>Самый важный пункт по версии моей бабушки. </p><p>Серьёзно, нет ничего хуже, чем с ходу бросать несчастных читателей в дебри CJM и фронтенд-спецификаций. Особенно, если проект сложный и документация по нему подробная. Мотивация к дальнейшему чтению убивается надёжнее, чем микробы сейфгардом.</p><p>Делайте погружение в документацию плавным. Сперва расскажите основную информацию о проекте: краткое описание, задачи, ЦА, ключевую механику. Опишите базовые компоненты, состав сервиса, какие-то особенные технические или бизнес-требования. Очертите границы проекта.</p><p>У меня даже есть специальное слово для такого &#171;вводного&#187; документа &#8212; <strong>концепция</strong>. Обычно это небольшой документ на 3-4 страницы (зависит от сложности проекта) с очень чётким оглавлением и содержанием. Иногда уже одного этого хватает, чтобы тот же разработчик задал вам потом в миллион раз меньше вопросов. А уж клиенту/заказчику этот документ необходим как воздух.</p><h3 class="wp-block-heading">Современные инструменты</h3><p>Перестаньте использовать MS Office и файлики с макетами. Мир прекрасен и удивителен &#8212; и в нём есть куда более гибкие и подходящие для документации инструменты.</p><p>Интерактивные схемы, встраивающиеся прямо в страницы с текстом; перекрёстные ссылки на разделы; макросы и динамические содержания конкретных частей; краткие выжимки из разделов &#8212; это и многое другое откроется вам, как только вы начнёте использовать современный инструментарий. Просто представьте себе, насколько приятнее (и быстрее) нажать на статическое изображение и сразу открыть интерактивную user story, чем прочитать что-то вроде <em>&#171;более подробно схема представлена в рис. Польз_история_1_ (версия_5).jpeg в папке user_stories на Google Drive&#187;</em>.</p><p>Хороших инструментов много, никто не мешает вам их совмещать и комбинировать, пока не найдёте идеального для вас варианта. Я лично предпочитаю <a rel="noreferrer noopener" aria-label="Confluence (откроется в новой вкладке)" href="https://ru.atlassian.com/software/confluence" target="_blank">Confluence</a> (с десятком полезных плагинов) в связке с <a rel="noreferrer noopener" aria-label="Axure (откроется в новой вкладке)" href="https://www.axure.com/" target="_blank">Axure</a> и <a href="https://www.figma.com/" target="_blank" rel="noreferrer noopener" aria-label="Figma (откроется в новой вкладке)">Figma</a>. Но иногда не пренебрегаю и обычными гуглдоками (если их правильно приготовить, конечно).</p><h3 class="wp-block-heading">Структурирование</h3><p>Есть одна простая штука: в проектной документации нарратив не работает. Если у вас проект чуть сложнее лендинга, то разработчик (маркетолог/сеошник/клиент) будет скакать по разделам, как кузнечик по углям. Дайте ему возможность делать это легко и естественно.</p><p>Чёткая и (главное) понятная структура документации &#8212; залог её эффективного использования. Причём это касается как самих документов, так и разделов, в которых они лежат.</p><p>Пользователь (мы же помним, что у документации тоже есть пользователи, да?) должен иметь возможность найти любое место в доках буквально за 5 секунд.</p><p>Вот так выглядит примерная структура разделов у меня в Confluence (первые два уровня):</p><ul class="highlighted wp-block-list"><li>Roadmap</li><li>Текущее состояние<ul class="wp-block-list"><li>Требуется уточнение</li><li>Требуется проработка</li><li>Требуется локализация</li><li>TODO</li><li>Следующие итерации</li></ul></li><li>Словарь терминов</li><li>Концепция</li><li>Компоненты<ul class="wp-block-list"><li>Мобильное приложение</li><li>Сервер</li><li>Админпанель</li><li>Сайт</li></ul></li><li>UX/UI<ul class="wp-block-list"><li>Аудитория</li><li>Сценарии</li><li>Навигационная модель</li><li>Прототип</li><li>Screen Flows</li><li>Дизайн-макеты</li></ul></li><li>Entities</li><li>Functions<ul class="wp-block-list"><li>Fn.Mobile</li><li>Fn.Server</li><li>Fn.Admin</li><li>Fn.Site</li></ul></li><li>API<ul class="wp-block-list"><li>Философия API</li><li>Словарь ошибок API</li><li>API.Mobile</li><li>API.Admin</li></ul></li><li>Databases<ul class="wp-block-list"><li>Db.Mobile</li><li>Db.Server</li></ul></li></ul><p>Разумеется, эта структура меняется от проекта к проекту &#8212; и об этом следующий пункт.</p><h3 class="wp-block-heading">Контекст использования</h3><p>Все команды и продукты разные. Если вы однажды нашли подходящий формат документации для одного проекта &#8212; не факт, что он станет таким же идеальным для другого.</p><p>Высокотехнологичные стартапы требуют более проработанной архитектуры, чем e-commerce на Битриксе. Команды, выполняющие типовые задачи (вроде того же e-commerce), наверняка уже знакомы с их базовыми UX-особенностями. Фрилансерам или удалёнщикам желательно расписывать всё максимально подробно &#8212; тогда как для остальных эта информация может оказаться избыточной.</p><p>Если у вас уже есть команда разработки, поинтересуйтесь, разные ли люди отвечают за фронтенд и бэкенд. Это позволит понять, нужно ли мешать серверную логику с клиентской &#8212; или стоит разнести их по разным разделам. Аналогично с дизайн-макетами сайта и мобильного приложения.</p><p>Учитывайте особенности проекта, а также кто и в каких условиях будет его разрабатывать и развивать. Использовать один и тот же формат от проекта к проекту можно только в том случае, если вы стругаете однотипные сайты, а делает их одна и та же команда.</p><h3 class="wp-block-heading">Унификация формулировок</h3><p>Это как с элементами интерфейса. Каждый новый элемент заставляет пользователя немножко, но учиться. Когда элементы на разных экранах выполняют одну и ту же роль, логично сделать их одинаковыми.</p><p>Если где-то вы написали &#171;проектируется в следующих итерациях&#187; &#8212; используйте эту фразу везде, где речь идёт о фичах, которые нужно продумать и описать при развитии продукта. Кроме того, что это будет удобно для читателя, это позволит вам потом простым поиском по документации собрать всех этих &#171;ждунов&#187; в одном месте. А не вычитывать внимательно сотню страниц. Посмотрите в структуру выше, там есть раздел &#171;Текущее состояние&#187; &#8212; вот он как раз и собирает такие штуки. Причём делает это автоматом и динамически.</p><h3 class="wp-block-heading">Словарь терминов</h3><p>Незаменимая штука при соответствии любому из двух условий:</p><ul class="wp-block-list"><li>в проектной команде меняются люди;</li><li>проект необычный или сложный;</li></ul><p>В первом случае это не обязательно обусловлено текучкой. Если проект долгий, менять разработчиков раз в квартал/полгода &#8212; нормально, защищает от выгорания. Имея словарь терминов, вы снижаете порог входа новых людей в проект.</p><p>Второе условие самое очевидное. Если проект связан, например, со специфической отраслью, типа налогообложения или нейрохимии, иметь такой словарь &#8212; значит увеличить шансы на правильное понимание всей документации.</p><p>Вообще, я бы рекомендовал заводить словарь терминов на всех проектах сложнее лендинга. А уж если вы научите свою документацию подсвечивать термины и выдавать определения, не сходя со страницы &#8212; спасибо вам скажут все: от разработчика до уборщицы. </p><p>Вот, например, <a rel="noreferrer noopener" aria-label="специальный плагин (откроется в новой вкладке)" href="https://marketplace.atlassian.com/apps/1219513/glossary-terminology-manager?hosting=server&amp;tab=overview" target="_blank">специальный плагин</a> такого словаря для Confluence.</p><h3 class="wp-block-heading">Удобочитаемость</h3><p>То, что сейчас принято называть &#171;UX текста&#187;. </p><p>Разбивайте текст на абзацы, выделяйте важные места. Не пишите слишком длинных предложений, используйте переходные слова. Если где-то в проектной логике есть условия, делайте из них список (а лучше &#8212; диаграмму). Подзаголовки &#8212; наше всё. </p><p>И ради всего святого, не используйте канцеляризмы. Пишите простым языком, вы не на юридический поступаете.</p><p>Ну да на эту тему написано уже много, не стану повторяться. Если интересно, посмотрите на <a rel="noreferrer noopener" aria-label="индекс удобочитаемости Флеша (откроется в новой вкладке)" href="https://orfogrammka.ru/%D1%88%D0%BF%D0%B0%D1%80%D0%B3%D0%B0%D0%BB%D0%BA%D0%B8/%D0%B8%D0%BD%D0%B4%D0%B5%D0%BA%D1%81_%D1%83%D0%B4%D0%BE%D0%B1%D0%BE%D1%87%D0%B8%D1%82%D0%B0%D0%B5%D0%BC%D0%BE%D1%81%D1%82%D0%B8_%D1%84%D0%BB%D0%B5%D1%88%D0%B0/" target="_blank">индекс удобочитаемости Флеша</a> и <a rel="noreferrer noopener" aria-label="индекс туманности Ганнинга (откроется в новой вкладке)" href="https://orfogrammka.ru/%D1%88%D0%BF%D0%B0%D1%80%D0%B3%D0%B0%D0%BB%D0%BA%D0%B8/%D0%B8%D0%BD%D0%B4%D0%B5%D0%BA%D1%81_%D1%82%D1%83%D0%BC%D0%B0%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8_%D0%B3%D0%B0%D0%BD%D0%BD%D0%B8%D0%BD%D0%B3%D0%B0/" target="_blank">индекс туманности Ганнинга</a> &#8212; математика, конечно, но с неё можно начать.</p><h3 class="wp-block-heading">Пасхалки</h3><p>Обычно пасхалки используются для того, чтобы выяснить, читала ли вообще вторая сторона документ.</p><blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Когда был в агентстве, то вставлял в доку пасхалки. Например: при нажатии кнопки Звезда Смерти взрывается. Если я видел, что ТЗ согласовано с ними, то ловил на том, что его не читали. Однажды в ответ на такое ТЗ мне заказчик прислал правки, где фраза про Звезду Смерти была прокомментирована так: И Дарт Вейдер переходит на светлую сторону Силы.</p><cite>Виталий Мазуревич</cite></blockquote><p>В случае, если вам надо замотивировать команду именно прочитать документацию, вы можете просто намекнуть им на наличие таких пасхалок. Даже если их там не было и нет.</p><p>Конечно, с этим нужно быть осторожным. Излишне азартные люди могут крайне рьяно искать скрытые послания в доках. Вместо того, чтобы изучать эти самые доки.</p><h2 class="wp-block-heading">Завершение</h2><p>Ну и в конце я отдельно хотел бы упомянуть про необходимость поддерживать документацию в актуальном состоянии на протяжении всего проекта или, хотя бы, до конца разработки. Ибо любая документация устаревает: у продукта появляются новые микро-фичи, бизнес решает нацелиться на другой сегмент, а разработчики решают заюзать новую библиотеку. Однако не каждый дизайнер/проектировщик живёт на проекте так долго. Вот и получается, что спустя пару месяцев всё чаще звучат фразы типа:</p><figure data-wp-context="{&quot;imageId&quot;:&quot;69d727b99e0ef&quot;}" data-wp-interactive="core/image" data-wp-key="69d727b99e0ef" class="wp-block-image wp-lightbox-container"><img loading="lazy" decoding="async" width="1642" height="750" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://sherer.pro/content/uploads/2019/07/devanswers.jpg" alt="" class="wp-image-2069" srcset="https://sherer.pro/content/uploads/2019/07/devanswers.jpg 1642w, https://sherer.pro/content/uploads/2019/07/devanswers-768x351.jpg 768w, https://sherer.pro/content/uploads/2019/07/devanswers-1048x479.jpg 1048w" sizes="auto, (max-width: 1642px) 100vw, 1642px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Увеличить"
data-wp-init="callbacks.initTriggerButton"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /></svg></button><figcaption class="wp-element-caption"> devanswers.ru</figcaption></figure><p>Неактуальная документация может здорово снизить динамику разработки, а то и вовсе похоронить проект. Некоторые разработчики (заказчики/маркетологи) с радостью вернутся к привычному состоянию &#8212; когда можно было не читать.</p><p>Но это уже другая история, не про Мурзилку, её хозяйку и их мужа-инженера (который ушел в недельный запой из-за того, что жена утопила пятерых щенков, хотя одного из них он обещал своему начальнику).</p><p><em>P.S. На картинке к посту кубики Чаплыгина, крайне рекомендую для тех, у кого дети учатся читать.</em></p><p>Запись <a href="https://sherer.pro/blog/uchim-proektnuju-komandu-chitat/">Учим проектную команду читать</a> первой появилась на <a href="https://sherer.pro">Павел Шерер</a>.</p>]]></content:encoded><wfw:commentRss>https://sherer.pro/blog/uchim-proektnuju-komandu-chitat/feed/</wfw:commentRss><slash:comments>2</slash:comments></item></channel></rss>