/ Финальные макеты
Результат работы
Финальные макеты, подготовленные к реализации и адаптации под разные экраны.
/ Вместо эпиграфа
«Бажов Цифровой» — это масштабный грантовый проект команды УГИ УрФУ (заявка № ПФКИ-25–1-011059), посвящённый цифровому изучению жизни и творчества Павла Бажова. Проект состоит из нескольких сайтов, каждый из которых рассматривает отдельную сторону его наследия — тексты, язык, биографию, архивные материалы.
Таймлайн жизни Бажова — второй проект в рамках этой инициативы. Первым стал «Словарь Бажова»🔗, для которого я разрабатывала визуальный стиль и UI-kit. Поэтому в работе над таймлайном было важно сохранить уже заданный визуальный язык и развить его, не ломая общую логику проекта.
Так как я учусь в магистратуре «Цифровая гуманитаристика», мы договорились о работе над проектом в формате командной разработки. В рамках таймлайна я отвечала за UX/UI-дизайн сайта и проектирование интерфейса.
/ Проблемы
Зачем нужен таймлан?
01
Исследователи показывают Бажова всегда в каком‑то образе: сказочник, революционер, учитель. Нет сервиса для беспристрастного изучения фактов и составления собственного мнения
02
Биографические данные — это разрозненные медиа: фото, письма, факты. Есть какие‑то архивы, какие‑то статьи. Нет единой точки изучения Бажова
03
События жизни разбросаны по разным сайтам, архивам, статьям. Нет единой картины хронологии жизни П.П. Бажова для изучения нефилолгом
/ Вводные
Вводные / Опыт прошлых коллег
Ранее коллеги уже сделали первую версию таймлайна. Однако имела ряд проблем.
Невозможно размещать длинные тексты и полноценные статьи
Отсутствие масштабирования под новые материалы
Сложная и неочевидная навигация
Перегруженный визуально интерфейс
Ограниченная адаптивность под разные устройства
/ Вводные
Вводные / Материалы
Деление биографии Бажова на 9 периодов жизни, сформированное исследователями
Корпус биографических фактов, текстов, писем, фотографий и локаций
/ Требования
Требования / Целевая аудитория
Аудитория проекта широкая: пользователи из разных регионов, с разным уровнем цифровой грамотности и на разных устройствах. Поэтому при проектировании интерфейса приоритетом стали доступность, читаемость и простота — без сложных сценариев, визуального шума и перегруженного взаимодействия.
Учителя
В основном возрастная аудитория. Работают с сайтом как с образовательным инструментом — на уроках, при подготовке занятий, иногда прямо «на ходу»
Что важно для интерфейса:
Понятная и предсказуемая навигация
Читаемые шрифты и высокая контрастность
Отсутствие скрытых или нестандартных UX-паттернов
Стабильное поведение интерфейса на разных устройствах
Школьники
Средние и старшие классы. Используют сайт в рамках школьной программы — на уроках литературы и при подготовке домашних заданий. Заходят с вопросом, а не с намерением долго изучать материал: фотографии и факты.
Что важно для интерфейса:
Очевидные точки входа
Минимум лишнего текста на пути к фактам
Возможность быстро понять, где находится нужная информация
/ Wireframes
Wireframes [скелет]
Скелеты будущих страниц,показывают основной контент, структуру информации, описание и базовую визуализацию взаимодействия между интерфейсом и пользователем
/ Usability-тестирование
Usability-тестирование/Подготовка
Мои коллеги UX-исследователи составили скрипт, а я кликабельный прототип для проверки сценариев
/ Usability-тестирование
Usability-тестирование/Проведение
В рамках командной работы проведение usability-тестирования выполняли коллеги-UX-исследователи. Я не участвовала в сессиях напрямую, так как моя зона ответственности в проекте — UX/UI-дизайн и проектирование интерфейса.
3 Школьника
- Денис, 17 лет, ученик
- Варя, 17 лет, школьница
- Лена, 17 лет, школьница 10 класс
2 Студента
- Настя, 20 лет, студентка гуманитарного направления
- Алена, 20 лет, студентка гуманитарного направления
Фиксация результатов в FigJam
/ Usability-тестирование
Usability-тестирование/Ключевые инсайты
В результатах было много хвалебных инсайтов про понятность шрифтов, контрастность, удобство навигации в том числе переход к следующему событию/письму через предложенную плашку в конце страницы. Ниже вывожу только полезные инсайты, которые повлияли на макеты.
Не хватало кнопки возврата из просмотра конкретного периода → Добавила
Респондент думал, что плашки с фактоидами кликабельна, и хотел нажать → Добавила такой сценарий использования
Основной сценарий использования — через главную страницу.
Альтернативный — через раздел «Хронология»
Альтернативный — через раздел «Хронология»
Команда дизайна серии сайтов Бажов Цифровой
«Бажов Цифровой» — грантовый проект исследователей УГИ УрФУ, реализуемый при поддержке Президентского фонда культурных инициатив (заявка № ПФКИ-25-1-011059). Проект направлен на цифровизацию наследия уральского писателя Павла Бажова и включает серию образовательных сайтов. Команда дизайна отвечает за разработку UX/UI и единой визуальной системы проектов «Словарь Бажова» и «Таймлайн Бажова».
-
Анна ПогорельскаяUX-редактор -
Ирина ШульгинаUX/UI-дизайнер -
Екатерина УткинаUX-исследователь -
Юлия ХисамоваUX-исследователь