​​Михаил Галушко, руководитель UX-направления, ЦФТ на UX-Марафон #22 покажет, как можно использовать ментальные карты при работе с Информационной Архитектурой.

Тезисы доклада:
1. Определяем ключевые инструменты, точки принятия решения,
навигационные принципы.
2. Категоризируем информационные объекты по общим признакам и исходя.
из потребностей конечного пользователя
3. Определяем формат схемы информационной архитектуры и устанавливаем.
взаимосвязи между отдельными объектами.
4. Насыщаем информационную архитектуру обозначениями, углубляя
детализацию.
5. Используем информационную архитектуру как инструмент коммуникации
в команде.

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

Подключиться: https://ux-marafon.ru/new

ЧТО ТАКОЕ IA
Очень ёмко об информационной архитектуре высказался Алексей Бородкин, основатель Гильдии Вольных Проектировщиков:
Это описание связи всего со всем!

Грамотная информационная архитектура упрощает поддержку и развитие продукта, улучшает UX:
✔ программисты не матерят своих предшественников (или себя) за неудобные для масштабирования роутинг и базы данных;
✔ контент-менеджеры и администраторы больше не льют кровавые слёзы при работе с внутренней частью продукта;
✔ пользователи легко и непринуждённо находят то, что им нужно и попадают именно туда, куда хотели;
✔ сеошники и поисковые системы влюбляются в ваш сайт и не хотят оттуда никуда уходить (с)

Продолжение читайте в статье Павла Шерера

И сам Павел 28 января на UX-Марафон #22 покажет как собрать IA c нуля. Подключайтесь!

​​Столько новостей! Аж, дух захватывает!

Первая и самая главная:
открывать UX-Марафон #22 фундаментальной лекцией про Информационную архитектуру будет всеми любимый основатель Гильдии Вольных проектировщиков, ныне Product Lead в Магните и почетный спикер 7-ми UX-Марафонов
Алексей Бородкин!

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

Вторая новость:
После долгих раздумий и оценок рисков, я решила не проводить эксперимента с новым форматом марафона: 3 вечера, по 2-3 доклада. А провести по опробованному формату, как мы делали 5 лет подряд, в один день. 28 января, четверг. Единственное, мы не вписались в обычный тайминг с 11 до 18 и этот будет действительно длинный забег-марафон с 10 до 19 ч 🔥

Третья новость
Благодаря снижению расходов и замене 3-х дней трансляции на 1 день, цены не будут выше 3700 руб за билет. Сейчас цена 3300 руб, через 9 дней будет 3700 руб. А если сделать публикацию в соцсетях или рабочем чатике, то можно получить 25% скидку!

Четвертая новость
Мы добавим Zoom-интерактива в эфир, спикеры будут отвечать на вопросы как в чате, так и в зуме!
А Виталий Мазуревич проведет мастер-класс по карточной сортировке: вместе составим тест, вместе пройдем и вживую разберем результаты.

Программа полностью сформирована!
Изучайте и подключайтесь: https://ux-marafon.ru/new
15 дней до события

​​Валерия Курмак, руководитель практики Human Experience, AIC, и евангелист создания доступных интерфейсов для ограниченных в возможностях пользователей на UX-Марафоне #22 расскажет про ошибки при проектировании и какую роль в доступности сайтов и приложений играет Информационная Архитектура.

Из доклада зрители узнают:
1. Что такое accessibility и инклюзивный дизайн
2. Как применять WCAG и ГОСТР 52872—2019 к ИА
3. Как спроектировать навигацию для незрячих пользователей
4. Почему это важно
5. Сколько стоит создание доступного цифрового продукта

28 января
https://ux-marafon.ru/new
В наших руках сделать доступнее интерфейсы!

Дал кратенькое интервью про ИА в преддверии UX-Марафона

​​Первое интервью появилось в UX-блоге!
Мы поговорили с Сергеем Петровым, дизайн-проектировщиком Почтатех и организатором WIAD Moscow, вдохновившим меня на выбор темы "Информационная архитектура" для январского UX-Марафона.

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

Ответы в статье:
https://ux-marafon.ru/blog/informatsionnaya-arkhitektura-est-vsegda

Задать свои вопросы можно будет 28 января. Сергей выступит с самым свежим кейсом, сделанным для Почты России: "Инфоархитектурный разбор: сервисная платформа для операторов в отделениях"

Программа и билеты: https://ux-marafon.ru/new

Приглашаю зарегистрироваться на UX-Марафон 22 — Инфо-архитектура.
Пока что это самое масштабное ИА-мероприятие в 2021 году, так как московский WIAD-2021 будет весьма скромный : )

​​Алексей Бородкин, один из самых обожаемых спикеров нашей конференции, откроет UX-Марафон с фундаментальной лекцией про основы информационной архитектуры. В стандартное время такой материал точно не уложится... поэтому мы заложили под доклад двойной слот на 80 минут!

Тезисы доклада:
1. Почему термин «информационная архитектура» – это одновременно и гениально, и ни о чём
2. Какой бывает информационная архитектура
3. Зачем понимание информационной архитектуры UX-специалисту
4. Ошибки, подводные камни и прочие поучения

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

Интересно? Подключайтесь!
Событие уже в следующий четверг, 28 января

​​28 января, в следующий четверг, Виталий Мазуревич, сооснователь Гильдии вольных проектировщиков, почетный спикер UX-Марафонов, Senior Product в Магнит, проведет мастер-класс по карточной сортировке.

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

Вот что сам Виталий говорит про свое выступление:

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

Мастер-класс будет в рамках UX-Марафон #22, посвященному информационной архитектуре. Кроме Виталия будет шесть полезных выступлений и ещё один мастер-класс.
Полная программа: https://ux-marafon.ru/new

Хотите принять участие? Спешите!
Завтра итоговое подорожание билетов
Если сделать публикацию о событии или репост этого поста, то скидку 25% можно успеть применить до повышения цен 🔥

​​1 день до события. Самое время оформить билет и подключиться к UX-Марафон #22 | Информационная архитектура.
Работа над программой велась 2 месяца. За 5 лет опыта проведения UX-Марафонов это было самое сложное событие в части поиска спикеров. Оказалось, что специалистов по этой теме крайне мало на нашем рынке.
Несмотря на трудности, программа составлена, материал получился сильный и уникальный, не пропустите возможность профессионального роста в этот четверг.
Тайминг мероприятия:
28 января, с 10 до 18:30 по Мск.

10:00 Открытие конференции, организатор Александра Постовалова.

10:10 Алексей Бородкин выступит с фундаментальной лекцией про основы ИА.

11:40 Валерия Курмак расскажет, как проектировать ИА для незрячих людей.

12:30 Павел Шерер научит собирать базовую информационную артихектуру с нуля.

13:15 Виталий Мазуревич проведет мастер-класс по карточной сортировке, зрители познакомятся с методом, сами примут участие в тесте и разборе результатов.

13:40 - 14:30 Перерыв

14:30 Виталий Мазуревич разберет результаты теста и ответит на вопросы зрителей.

15:00 Анастасия Попова расскажет про объектную модель проектирования.

16:00 Михаил Галушко покажет, как с помощью ментальных карт проектировать информационную архитектуру.

17:00 Сергей Петров сделает инфоархитектурный разбор проектирования ИА для Почты России.

17:45 Денис Васильев расскажет про кейс проектирования ИА для Банка России.

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

Освойте новые навыки и научитесь строить информационную архитектуру для своих продуктов!

28 января, онлайн с 10 до 18:30 ч.

Программа и билеты: https://ux-marafon.ru/new

Начался UX-Марафон по ИА. Буду зесь постить конспекты докладов

А. Бородкин — лекция про основам ИА - ч. 1
1. Продукт — бизнес + клиенты + технологии. Это три потока интересов.
2. Что прорабатывать в продукте — интерфейсы + функциональность + ИА
Также — UX = UI + functions + IA
3. Успешный продукт: хороший клиентский опыт + заработать + выполнить задачи пользователя
4. Определение ИА по Бородкину — (не на примере определений) — на примере, см далее, пункт 5.
5. Пример (упрощенный): проектируем книжный интернет-магазин.
- Начинаем с ЦА: прикидываем кто есть ЦА, выявляем околоперсоны.
- Дальше собираем околоперсоны в группы (4-7 групп обычно)
- Далее по каждой группе — создаем персону. В рамках персоны: контекст, цель, что важно, что полезно, страхи.
6. Далее к каждой персоне создаем CJM (в идеале для каждой отдельной цели). При этом база CJM по вертикали:
- что хочет
- какие барьеры
- чем помогаем
- что показываем в интерфейсе / что за локация (это заход в сторону service blueprint)
Затем эти пункты приземляются на шаги по горизонтали.
7. На основе 4й строки в CJM делаем диаграмму навигации (screen-flow / location flow)
8. Как следствие: 1е определение ИА — навигационная структура цифрового продукта. Её польза: стратегическое понимание всей структуры, помощь разработке, выявление нагруженных частей UI, проработка компромиссов.
9. Ошибки с ИА: 1) на неё забивают 2) не опираются на реальных пользователей 3) делают мало сценариев 4) подменяют желания возможностями. Страховка — CJM

А. Бородкин — лекция про основам ИА - ч. 2
10. Далее — что еще есть ИА, как выражена? Например, аудит категорий в продукте (интернет магазин книг), варианты: 1) самому сделать (не очень ©) 2) закрытая карточная сортировка 3) открытая карточная сортировка. Закрытую и открытую можно (и нужно) комбинировать. 4) обратная карточная сортировка (tree test)
11. Итого, второе определение ИА — иерархия и категоризация контента для оптимизации (таксономия)
12. Ошибки в проработке таксономии: 1) позиция “нам виднее” 2) маленькая выборка 3) исследование всего однажды (а надо обновлять данные) 4) отсутствие качественных подходов, а только количественные.

А. Бородкин — лекция про основам ИА - ч. 3
13. Чем ещё выражена ИА, в чём ещё проявляется? Рассмотрим, что вообще есть в цифровом продукте, какие сущности, объекты?
14. Пример тот же, интернет-магазин книг, у нас сущности: книга, автор, издательство, жанр, etc… — и как эти сущности друг с другом связаны. Получается справочник объектов.
15. Добавляем сущности “заказ”, “клиент” и также связи между ними.
16. В итоге получаем “паутину” взаимосвязей контента, это — структура данных продукта.
17. В UI это нужно, чтобы поддерживать действия пользователя с этими сущностями.
18. Снова — это способ общения с разработчиками/архитекторами данных.
19. Итого — 3-е определение/выражение ИА == описание структуры данных и их взаимосвязь
20. Чем полезно: 1) Помощь в построении админки / управления 2) построение и проверка логики связей 3) обсуждение с разработкой 4) проще обсуждать интеграции
21. Ошибки в этом выражении ИА: 1) Пренебрежение этим рассмотрением и проработкой структуры данных 2) Невнимательное заполнение 3) НЕобщение с разработчиками 4

Заключение:
22. Грани ИА == 1) навигация 2) таксономия (категоризация контента) 3) описание связей, структуры данных + “описание того как всё связано со всем”

В. Курмак — ОШИБКИ ПРИ ПРОЕКТИРОВАНИИ ИЛИ КАКУЮ РОЛЬ В ДОСТУПНОСТИ
САЙТОВ И ПРИЛОЖЕНИЙ ИА ИГРАЕТ ДЛЯ НЕЗРЯЧИХ
1. Навигация по сайту / цифровому продукту. Зрячие ориентируются по заголовкам, незрячие — тоже, используют скринриде screenreader, он читает то, что написано и (!) подписано на экране.
2. Сначала надо понять “где я” — это глобальная навигация
3. Затем — локальная, “куда я здесь могу попасть”. Незрячий точно так же ориентируется по заголовкам, и важны уровни этих заголовков.
4. Между глобальной и локальной переключаемся по блокам / компоновке страницы, незрячий не видит этой компоновки, а ориентируется на разметку заголовков, которую понимает скринридер. В противном случае незрячий ПОЛНОСТЬЮ прослушивает всю страницу по скринридеру до нужного контента : /
5. Ошибка 1 в этой области — нарушение уровня заголовка, что визуально можно исправить для зрячего, и будет большой проблемой для незрячего. Стили и размеры заголовка СИЛЬНО влияют на ориентацию незрячих на сайте.
6. Ошибка 2 — НЕ разделять ссылку и текст явно стилем. Скринридер воспример текст как ссылку или наоборот, не прочитает пункт как ссылку!!! Надо явно выделить ссылки стилем, потому что скринридер будет понимать действие в тч и по стилю.
7. Дальше. Незрячий воспринимает странице как структуру с вложенностью и структурой. Потому важно проработать структуру страницы на абстрактном уровне с иерархией — блоки/подблоки/подподблоки/etc…
8. У скринридера есть функция skip to main content, это важно.
9. В случае с незрячими UX-редактура и UX-копирайтинг становится МАКСИМАЛЬНО АКТУАЛЬНЫМ.
10. При подписи элементов — пишите конкретно.
“Шаг 1 “= плохо. “Первый шаг: создать аккаунт” == хорошо.
11. Таблица должна быть сверстана как таблица, строки и столбцы должны иметь понятные названия. Скринридер прочитает “3я строка из 5ти”. Укажите общее кол-во строк.
12. Убирайте из видимости скринридера лишнюю информацию: например, если таблица сделана только для красоты / визуала, то “3-я строка из 5-ти” надо убрать из видимости скринридера.
13. Дальше. Стандарт WCAG. реализация на фронте должна учитывать прочтение скринридером.
14. Необходимо продумать управление контентом — жесты на мобильных, обработка кликов на десктопе.
15. Ссылка должна быть не “тут” а “перейти на госуслуги”
16. Соблюдайте единообразие навигации на всех страницах сайта, а лучше всего всего продукта / системы. Одинаковые иконки во всем продукте должны быть подписаны одинаково. Зашивайте эти вещи в дизайн-систему.
17. Дальше - видео как работают со скринридером на сайте (ссылка далее). Скринридер читает “основная область”, “область навигации”, etc. Например, кнопка [B] - назвать/прочитать buttons, какие есть кнопки.
18. Скринридер читает “кнопка без метки”.
19. Заниматься инклюзивностью — это след. шаг для дизайнеров. Приглашаем на курс Валерии (ссылка далее)
20. Блок про ИА на курсе в п.19 ведет Лара Симонова, сеньор ИА в MIRO, это круто!
21. Ещё раз, так как важно!!! Размечайте заголовки, их тип, их уровень! Структура заголовков с их стилями — основа навигации для незрячих!
22. Проверяйте как разработчики разметили заголовки!

Вопросы (часть)
23. В приложениях и на мобильных сайтах — там заголовков меньше на экране. Следите за разметкой основного заголовка на текущем экране.
24. % использования скринридера — с этим дефицит, даже нет четкого понимания статистики незрячих людей (?)
25. Арабский и другие языки - ответ ищите в тг-канале “Не исключение” (https://tttttt.me/neiskluchenie)
26. Можно ли адаптировать сложную навигацию для незрячих? Да, проектируйте вместе с разработчиком для незрячих, и тогда для зрячих UX многократно улучшится!

Ссылка на сайт в пункте 17 == https://www.pushkinmuseum.art/events/archive/2020/exhibitions/drawings/index.php? lang=ru
Курс В. Курмак в пункте 19 == https://kurmak.info/

П. Шерер — СОБИРАЕМ С НУЛЯ ИНФОРМАЦИОННУЮ АРХИТЕКТУРУ
Часть 1

1. Создадим приложение про тюленей
2. Что сегодня будет: декомпозиция, разбор продукта на свойства, свойства классифицируем, схематизируем
3. Ремарка: знание на UX-марафоне и единообразные и разнообразны, особенно про ИА, это нормально : ) Она абстрактна и её можно по-разному рассматривать.
4. Работать будем в Confluence
5. ИА не созидается с самого начала продукта. Сначала концепция и механики продукта.
6. Наш пример – приложение для отслеживания миграции тюленей в Охотском море. Мы их, тюленей, отслеживаем.
7. Что должно уметь приложение: выводить инфо о точках миграции + уметь масштабироваться для увеличения популяции
8. Этап 1 - декомпозиция. Ищем сущности: 1) тюлень с геометкой, только на сервере 2) точка (геометка), на сервере и на клиенте 3) список точек, совокупность точек, он динамический, запрашивается с клиента, на сервере не хранится 4) клиент, мобприложение, его данные и хранятся на клиенте и передаются на сервер. Чего не хватает? Не хватает стада. Что делать — привязываем точку к тюленю. Также привязываем точку к списку точек, объединяем точки в массивы. Это будут стада тюленей.
9. Но стадо — не есть отдельная сущность. Стадо есть таксономия (?), объединяет точки (тюленей) по удаленности.
10. Итого: есть сущности и есть таксономии.
11. Разбираем сущности и таксономии по свойствам. Параметры — название, код, тип данных, описание. Например, у тюленя два свойства: Внутренний ID и внешний ID. А вот точка — 7 свойств: внутрID, внешID, связанный тюлень (предыдущая сущность), связанное стадо, дата-время, широта, долгота.
12. Сущность [Список точек] — их может быть много, точка может содержать другие сущности и контент, например, фото, комментарии и тд.
13. Здесь может появиться пагинация, чтобы не грузить сразу все данные большого и тяжелого списка. Это важно когда устройства старые/слабые/медленный интернет/ограничения/etc. Кол-во в шаге загрузки называем “отступ”.
14. Таксономия “Стадо” также имеет два свойства — внутрID и внешID. Параметры те же — название, код, тип данных, описание. Динамически генерируется по запросу с клиента в каждой сессии.

П. Шерер — СОБИРАЕМ С НУЛЯ ИНФОРМАЦИОННУЮ АРХИТЕКТУРУ
Часть 2

15. Основная схема на основе предыдущих шагов (заготовка Павла). Диаграмма иерархии включения с легендой. Включение: какие свойства включены в сущность.
16. Легенда — важно. Это метамодель (способ описания модели).
17. Формат — неважен, важно отобразить структуру схемами/схемоидами, чтобы обсуждать.
18. Рассматриваем диаграмму: показаны сущности и их связи между ними. Например, сущность [Точка] имеет свойство “Связанный тюлень”, тянем линию связи в свойству “Внешний ID” у сущности [Тюлень].
19. Связывая эти свойства у сущностей, собираем диаграмму связей между сущностями и таксономиями через какие свойства.

В. Мазуревич — мастер-класс по карточной сортировке (КС)
Часть 1 - теория

1. История: Виталий готовил как-то упражнение про картосортингу и его спросили, мол, вы серьёзный человек, а нам тут разложить пасьянс предлагаете : )
2. Одна из задач ИА: организация навигации + категоризация. Например, как сделать каталог?
3. Вариантов много — страна / жанр / автор / толщина / цена / etc
4. Налицо проблемы отнесения к жанру… Как быть? Карточная сортировка. Она позволяет спросить: как организовать каталог? Как назвать категории? И тд.
5. Основная идея КС — отобрать карточки и попросить пользователей их организовать.
6. Если пользователи сами организуют карточки в группы и называют эти группы, то это — открытая КС, это для исследования, пытаемся понять как пользователи мыслят о нашем контенте.
7. Мало респондентов — качественное исследование. С обсуждением и сопутствующими вопросами. Понимаем основные причины расхождений (если они есть), подходит на старте. Стат. Значимости нет.
8. Много респондентов — количественное исследование. Имеет статистическую значимость. Позволяет оценить масштаб. Причины и нюансы не понять. Подходит для масштабных тестирований и исследований.
9. Варианты КС: 1) Открытая КС — респондент сам создаем и называет группы для карточек. Исследование, понимание как мыслят пользователи. 2) Закрытая КС — респондент кладет карточки в готовые созданные нами группы. Тестирование уже созданной структуры. 3) Обратная КС (tree test) — поиск известного объекта по группам и карточкам. Проверка каталога / навигации.
10. Рекомендации к КС: 1) реальная ЦА 2) единый концептуальный (?) набор карточек (это про соответствие признаков, чтобы не было яблоко/груша/салат) 3) карточки максимум похожи на реальные товары/объекты 4) протестируйте пункт 2 заранее, что они совместимы 5) избегайте навязывания.
11. Далее — практический тест. Будем раскидывать карточки по товарным категориям. Инструмент — Optimal Workshop.

В. Мазуревич — мастер-класс по карточной сортировке (КС)
Часть 2 - практика

12. Выбираем открытую КС. Настраиваем группы для тестирования в OW (Optimal Workshop). + смотрим всякие настройки для теста.
13. Запустили, ссылка в чате конференции. Участники подключаются. Виталий показывает как сортировать карточки в OW.
14. Вложенных групп нет, структура плоская.
15. Почувствуйте себя в роли респондента. Поехали.