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