Бажов Цифровой/Таймлайн жизни

Дизайн сайта для спокойного и беспристрастного изучения жизни Павла Бажова — через время, места и архивные материалы, без навязанной интерпретации. Грантовый проект УрФУ УГИ.
На экране ноутбука видны события жизни Бажова в период детства
/ Финальные макеты

Результат работы

Финальные макеты, подготовленные к реализации и адаптации под разные экраны.
Главная страница сайта Таймлан Бажова
Страница Фото на сайте Таймлайн Бажова
Страница просмотра событий по периоду жизни Бажова
Страница писем Бажова
Просмотр содержания письма
События и фото связанные с географическим местом
/ Вместо эпиграфа
«Бажов Цифровой» — это масштабный грантовый проект команды УГИ УрФУ (заявка № ПФКИ-25–1-011059), посвящённый цифровому изучению жизни и творчества Павла Бажова. Проект состоит из нескольких сайтов, каждый из которых рассматривает отдельную сторону его наследия — тексты, язык, биографию, архивные материалы.
Таймлайн жизни Бажова — второй проект в рамках этой инициативы. Первым стал «Словарь Бажова»🔗, для которого я разрабатывала визуальный стиль и UI-kit. Поэтому в работе над таймлайном было важно сохранить уже заданный визуальный язык и развить его, не ломая общую логику проекта.
Так как я учусь в магистратуре «Цифровая гуманитаристика», мы договорились о работе над проектом в формате командной разработки. В рамках таймлайна я отвечала за UX/UI-дизайн сайта и проектирование интерфейса.
/ Проблемы

Зачем нужен таймлан?

01
Исследователи показывают Бажова всегда в каком‑то образе: сказочник, революционер, учитель. Нет сервиса для беспристрастного изучения фактов и составления собственного мнения
02
Биографические данные — это разрозненные медиа: фото, письма, факты. Есть какие‑то архивы, какие‑то статьи. Нет единой точки изучения Бажова
03
События жизни разбросаны по разным сайтам, архивам, статьям. Нет единой картины хронологии жизни П.П. Бажова для изучения нефилолгом
/ Вводные

Вводные / Опыт прошлых коллег

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

Вводные / Материалы

Эмодзи песочных часов
Деление биографии Бажова на 9 периодов жизни, сформированное исследователями
Эмодзи
Корпус биографических фактов, текстов, писем, фотографий и локаций
/ Требования

Требования / Целевая аудитория

Аудитория проекта широкая: пользователи из разных регионов, с разным уровнем цифровой грамотности и на разных устройствах. Поэтому при проектировании интерфейса приоритетом стали доступность, читаемость и простота — без сложных сценариев, визуального шума и перегруженного взаимодействия.
Учителя
В основном возрастная аудитория. Работают с сайтом как с образовательным инструментом — на уроках, при подготовке занятий, иногда прямо «на ходу»
Что важно для интерфейса:
Эмодзи руки с ручкой
Понятная и предсказуемая навигация
Эмодзи руки с ручкой
Читаемые шрифты и высокая контрастность
Эмодзи руки с ручкой
Отсутствие скрытых или нестандартных UX-паттернов
Эмодзи руки с ручкой
Стабильное поведение интерфейса на разных устройствах
Школьники
Средние и старшие классы. Используют сайт в рамках школьной программы — на уроках литературы и при подготовке домашних заданий. Заходят с вопросом, а не с намерением долго изучать материал: фотографии и факты.
Что важно для интерфейса:
Эмодзи руки с ручкой
Очевидные точки входа
Эмодзи руки с ручкой
Минимум лишнего текста на пути к фактам
Эмодзи руки с ручкой
Возможность быстро понять, где находится нужная информация

Информационная архитектура

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

Wireframes [скелет]

Скелеты будущих страниц,показывают основной контент, структуру информации, описание и базовую визуализацию взаимодействия между интерфейсом и пользователем
Ноутбук с вайрфреймами страниц: главная, конкретный период жизни, письма, периоды
Ноутбук с вайрфреймами страниц: просмотр письма, места, фото, мконкретное место
/ Usability-тестирование

Usability-тестирование/Подготовка

Мои коллеги UX-исследователи составили скрипт, а я кликабельный прототип для проверки сценариев
2 листка скрипта интервью
Ноутбук с отоюражением взаимодействий в прототипе
/ Usability-тестирование

Usability-тестирование/Проведение

В рамках командной работы проведение usability-тестирования выполняли коллеги-UX-исследователи. Я не участвовала в сессиях напрямую, так как моя зона ответственности в проекте — UX/UI-дизайн и проектирование интерфейса.
3 Школьника
  • Денис, 17 лет, ученик
  • Варя, 17 лет, школьница
  • Лена, 17 лет, школьница 10 класс
2 Студента
  • Настя, 20 лет, студентка гуманитарного направления
  • Алена, 20 лет, студентка гуманитарного направления
Фиксация результатов в FigJam
/ Usability-тестирование

Usability-тестирование/Ключевые инсайты

В результатах было много хвалебных инсайтов про понятность шрифтов, контрастность, удобство навигации в том числе переход к следующему событию/письму через предложенную плашку в конце страницы. Ниже вывожу только полезные инсайты, которые повлияли на макеты.
Приближение к кнопке "Хронология", которая вернет на предыдущую страницу
Не хватало кнопки возврата из просмотра конкретного периода → Добавила
Зум на карточки с фатоидами числа периодов, населенных пунктов, событий, писем на сайте
Респондент думал, что плашки с фактоидами кликабельна, и хотел нажать → Добавила такой сценарий использования
Tab для навигации в шапке сайта Таймлайн Бажова
Основной сценарий использования — через главную страницу.
Альтернативный — через раздел «Хронология»
/ Послесловие
Таймлан жизни Бажова — это часть большого грантового проекта. Вы можете изучить первый проект из этой серии.

Продолжение следует — так что если вам интересно, заглядывайте сюда ещё 🙃
/2025
Бажов Цифровой/Словарь
Дизайн электронного словаря для изучения книг Павла Бажова, грантовый проект

Команда дизайна серии сайтов Бажов Цифровой

«Бажов Цифровой» — грантовый проект исследователей УГИ УрФУ, реализуемый при поддержке Президентского фонда культурных инициатив (заявка № ПФКИ-25-1-011059). Проект направлен на цифровизацию наследия уральского писателя Павла Бажова и включает серию образовательных сайтов. Команда дизайна отвечает за разработку UX/UI и единой визуальной системы проектов «Словарь Бажова» и «Таймлайн Бажова».
  • Анна Погорельская UX-редактор
    Анна Погорельская
    UX-редактор
  • Ирина Шульгина UX/UI-дизайнер
    Ирина Шульгина
    UX/UI-дизайнер
  • Екатерина Уткина UX-исследователь
    Екатерина Уткина
    UX-исследователь
  • Юлия Хисамова UX-исследователь
    Юлия Хисамова
    UX-исследователь