Создали интерфейсы научно-просветительского портала, где представлены рукописи и старые издания Пушкина, пушкинистика и справочные материалы.
Пушкин ⟨цифровой⟩ — проект, который открывает читателю доступ к рукописям и прижизненным изданиям всех произведений Пушкина, а также к большому массиву научно-исследовательской и справочной литературы о поэте.
Более 100 лет Пушкинский Дом (Институт Русской Литературы Российской Академии Наук) собирает рукописи, прижизненные и посмертные издания Пушкина, его заметки, письма, труды филологов, историков, лингвистов, — всё, что связано с жизнью и творчеством поэта.
Это богатство оставалось доступным только узкому кругу профессионалов. Чтобы изучить архивы, нужно как минимум приехать в Петербург, а доступ к таким ценностям, как рукописи или письма — отдельное бюрократическое приключение.
К 225-летию со дня рождения Пушкина университет ИТМО и Санкт-Петербургский Федеральный исследовательский центр РАН запустили проект по оцифровке и публикации всех архивов Пушкинского Дома и пришли к нам за интерфейсами.
Задача заказчика
Оцифровать коллекции материалов Пушкинского Дома. Сделать цифровой портал для представления и работы с научными и просветительскими материалами.
Дизайн-задача
Создать UX-дизайн интерфейсов для представления и работы с научными и просветительскими материалами o Пушкине.
Результат
- Провели исследование пользователей. Описали портреты целевой аудитории портала, их задачи на портале и сценарии использования.
Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть модуль дизайн-задачника «Сценарии взаимодействия» для тех, кто хочет научиться их использовать в дизайне интерфейсов.
2. Вместе с заказчиками придумали общую концепцию портала и проработали его информационную архитектуру.
3. Определили и зафиксировали MVP-версию для первого публичного запуска. Часть разделов системы, такие как таймлайн жизни Пушкина, описали концептуально и отложили на потом, остальные взяли в работу.
4. Сделали UX-дизайн для десктопной и мобильной версий интерфейсов портала.
5. Передали заказчикам библиотеку компонентов для последующей адаптации графическими и UI-дизайнерами и использования в разработке.
Пушкин ⟨цифровой⟩ – это не коллекция текстов из учебника. Это семантическое издание. Согласно определению Бориса Орехова, доцента школы лингвистики НИУ ВШЭ, «семантическое издание — это представление текста в виде связанных данных».
Чтобы показать сложность Пушкина, и дать возможность каждому стать исследователем, потребовались сложная архитектура и нестандартные интерфейсные решения. Мы сделали:
- Каталог произведений Пушкина, в том числе:
- Рубрикатор произведений по разделам, выделенным пушкинистами за долгие годы труда.
- Поиск по произведениям, фильтрацию, навигацию по времени и по алфавиту (как дань уважения традициям Пушкинского Дома).
- Раздел «Письма», группирующий переписку по людям и по времени.
2. Раздел «Произведение», который представляет текст Пушкина как комплекс связанных данных, включающих:
- Привычный текст произведения «из учебника».
- Рукописи Пушкина. Для этого потребовалось разработать специальный PDF-вьюер, удовлетворяющий как задачам учёных, так и простых читателей.
- Редакции, показывающие как менялся текст на разных этапах работы над ним.
- Печатные издания.
- Страницу для показа атрибутов, присвоенных произведению, изданию или каждому листу рукописей академическими исследователями.
- Научные комментарии академиков, как ко всему произведению, так и к какой-либо строфе, строке, а иногда и конкретному слову.
- Корреляты: материалы, в которых упоминается произведение.
- Библиографию работ по этому произведению, с функциями поиска и экспорта, столь ценными для учёных, оформляющих ссылки в своих статьях по ГОСТу.
- Просветительские материалы, специально разработанные для портала.
3. Раздел «Экскурсы» с просветительскими материалами, которые рассказывают о контексте создания произведения и его особенностях:
- Биографические комментарии, которые описывают отразившиеся в произведении события жизни поэта.
- Культурный контекст: повлиявшие на произведение исторические события и культурные явления.
- Комментарии филологов к поэтике, раскрывающие средства выразительности.
- Карту просветительских материалов и комментариев.
- Шаблоны для лонгридов, посвященных значимым персоналиям и местам, связанным с Пушкином.
4. Глоссарий для пояснения академических терминов.
5. Раздел «О проекте», рассказывающий о его организации, миссии и ценностях, участниках и планах развития.
Все разделы проработали в десктопной и мобильной версиях.
Дополнительная польза
Дизайн продукта
Над проектом работали:
- филологи из Пушкинского Дома
- специалисты по Цифровым Гуманитарным проектам из ИТМО
- специалисты по базам данных из Академии Наук, делающие back-end
- разработчики из IT-агентства, делающие front-end
- дизайнеры из команды бренда, разрабатывающая цвета, шрифты и визуальные элементы
- отдел PR, организующий мероприятия и пишущий тексты о проекте
- мы, делающие информационную архитектуру и UX-дизайн портала
Интерфейс – то место, где разные команды встречаются и на экране, а не на словах, видят противоречия. Пока обсуждается концепция, каждый участник представляет что-то своё. Когда появляется картинка – приходится договариваться.
Первые полгода работы над проектом Собака Павлова много участвовала в дизайне продукта: мы модерировали обсуждения концептов, стараясь понять и реализовать в интерфейсе запросы всех команд. Инициировали исследования, воркшопы и консультации, пока все команды не согласились, что предмет обсуждения обрёл форму.
В ходе этой работы мы ходили в архивы Пушкинского Дома, придумывали концептуальные метафоры, строили карты, брали интервью и даже собирали многослойные экраны из стекла и бумаги на столе.
Образование
Вели практику междисциплинарной гильдии студентов нескольких университетов (ИТМО, УрФУ). Ходили с ними в Пушкинский дом интервьюировали пушкинистов и изучали организацию архива. Придумывали концепции для разделов интерфейса. Проводили исследования публик и тестирования макетов портала.
Особенности
Некоммерческий проект
Пушкин ⟨цифровой⟩ – проект некоммерческий. Для бизнеса конечная ценность – прибыль. Если проект не окупит себя – он закроется. Нам не нужно было продавать Пушкина, это уже сделали за нас: «Пушкин» – главное слово 2024-го года.
В нашем случае критерии выживания иные:
- Финансирование проекта – целевое: в первую очередь нужно представить данные, с сохранением полноты и многообразия связей, определённых академиками за последние столетия;
- Материалы должны быть доступны разным людям: академикам от мира литературы, отраслевым профессионалам (экскурсоводам, учителям, историкам, режиссёрам…), простым любителям Пушкина. Каждый должен получить нужную глубину, никто не должен подумать что вошел не в ту дверь.
- Цифровые Гуманитарные проекты живут, пока вызывают интерес. Для этого мало просто выложить в интернет всего Пушкина: нужно продумать стратегию развития проекта на годы вперёд и учесть эти перспективы в интерфейсе.
Интерфейс, объединяющий людей
Помимо простых читателей, особую роль играют посредники: те, кто используют труды Пушкина в своей работе, создавая авторские материалы для своих аудиторий.
Например:
- экскурсовод, готовящий маршрут по пушкинским местам в родном городе;
- библиотекарь, который готовит выставку;
- историк, специализирующийся на Золотом Веке;
- журналист, который пишет про литературу;
- преподаватель литературы школы или ВУЗа.
Пушкин ⟨цифровой⟩ для них – источник уникальной информации для создания собственных материалов. Вместе с коллегами по ИТМО и студентами мы изучали цели и задачи таких людей, чтобы они могли решать их на портале. Одна из перспектив проекта – стать не только источником, но и витриной для подобных работ, связанных с Пушкином и Золотым веком.
Работа с академиками
Сохранить академическую точность, вынося Пушкина из научных архивов на всеобщее обозрение – непростая задача.
Учёные годами вырабатывали особые способы расшифровки рукописей, разметки редакций и вариантов, именования элементов. Итог их работы больше напоминает ноты: чтению такого текста нужно учиться специально. Нарисовать для него интерфейс – особое искусство.
Термины – другая сложность. С точки зрения академической науки, не может быть такого раздела каталога как «Сказки». Правильно – «Фикциональная проза». Мы организовали фокус-группу с преподавателями, библиотекарями, историками и другими профессионалами. Ни один из них не смог найти «сказки» иначе как методом исключения, и это убедило академиков. Однако сложных терминов на страницах ещё много.
Мы строили пути пользователя по интерфейсу таким образом, чтобы понятные каждому блоки встречались первыми, а требующие кандидатской степени – оставались доступными, но не отпугивали родителей, пришедших почитать детям сказку перед сном.
Логика организации материала
Семантическое издание предполагает демонстрацию не только текста, но и всех связанных с ним данных. Задача со звёздочкой – придумать информационную архитектуру и навигацию, которые с одной стороны – позволяли бы любому пользователю сориентироваться на портале, а с другой – соответствовали бы требованиям академиков.
Для примера рассмотрим организацию раздела «Произведение». Когда человек только попадает на страницу – он видит текст. Тот самый, который знаком нам по учебнику. Акцентная кнопка раскрывает «Контекст»: все материалы, с этим произведением связанные.
Материалы, относящиеся ко времени создания произведения – рукописи, редакции, первые печатные издания – расположены слева. Они – источники текста, который нам знаком. Справа расположены интерпретации: материалы, созданные на основе этого текста: комментарии, библиография, экскурсы, корреляты. Такая организация отражает восприятие времени в нашей культуре: таймлайны как правило организованы слева направо.
Мы прорабатывали таким образом каждый раздел.
Нюансы процесса
Особое внимание уделялось визуальным метафорам, цветам, формам. Заказчики хотели учесть и эстетику Золотого Века, и историю издания Пушкина, и особенности цифрового представления архивных данных.
Например, немало времени ушло на основную визуальную метафору со скобками, как в слове ⟨цифровой⟩ или вокруг кнопки ⟨контекст⟩: скобки символизируют цифровую трансформацию, при которой объект открывается большему числу людей, но при этом неизбежно что-то утрачивает, оставляет за скобками цифровизации.
Цвета, шрифты и прочий UI были настолько же важны и требовали большого ресурса на обсуждение. Эту часть работы забрала отдельная команда заказчика, с которой мы работали в плотной связке. Мы строили, коллеги – красили. Их решения в свою очередь отражались на нашей работе: метафора со скобками отражается в композиции экрана и навигации.
В работе с таким объектом как «Пушкин» много нюансов. За каноничным, сформированным советской школой, академической традицией, фольклором и анекдотами образом Пушкина сложно увидеть человека.
Научные архивы затем и нужны, чтобы отделять зёрна фактов от слухов и легенд.
Некоторые цифры
Передали в разработку 17 разделов портала
В макетах отдельно описали работу скролла, раскрытие интерактивных элементов на страницах и т.п.
Проработали отображение 27 типов контента
Общий принцип позволяет единообразно отображать разнородные материалы на всех страницах портала.
Создали 4 портрета пользователей
Они помогут разрабатывать будущие разделы портала и проверять, насколько те нужны пользователям.
Отзыв заказчика
До знакомства с командой «Собаки Павлова» мы долго ломали голову над тем, как выстроить работу. Ведь нам нужно было и собрать экраны для проекта, и всё продумать, и вовлечь в работу студентов и студенток, и сохранить гуманитарную составляющую.
Как только появились коллеги из СП, мы перестали ломать голову, потому что они принесли с собой отличные рабочие практики. Появился общий план, задачи для создания интерфейсов, планёрки с обсуждением всех деталей, удобные документы. Потом Юра Медведик здорово помог нам как проджект, удерживая разные стороны работы проекта.
Но коллеги пришли не только с планами. Алексей Евстифеев вник в проект, помог понять, каким может (и не может) быть интерфейс и понял, в чём особенность нелинейности произведений Пушкина. Юля Груздева создавала в Figma то, что мы вместе обсуждали, а ещё вовремя говорила «вот», и оказывалось, что вся нелинейность может уместиться на экране.
Мы работали с разными разработчиками, а в финале проекта весь дизайн довольно сильно изменился. И сейчас продолжаем дорабатывать интерфейс, но фраза «Это есть в макетах Собаки» — звучит до сих пор. Как бы ни менялся Пушкин <Цифровой> дальше, мы знаем, что цифровую базу этого проекта создали в КБ «Собака Павлова».
Полина Колозариди,
Академический руководитель магистратуры, директор DH-центра, проводница цифровой инфраструктуры и исследований ИТМО
Хотите так же? Пишите на we@sobakapav.ru.