Дизайн интерфейса коллекции материалов Пушкинского дома

Пушкин ⟨цифровой⟩ — проект, который открывает читателю доступ к рукописям и прижизненным изданиям всех произведений Пушкина, а также к большому массиву научно-исследовательской и справочной литературы о поэте.

Более 100 лет Пушкинский Дом (Институт Русской Литературы Российской Академии Наук) собирает рукописи, прижизненные и посмертные издания Пушкина, его заметки, письма, труды филологов, историков, лингвистов, — всё, что связано с жизнью и творчеством поэта.

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

К 225-летию со дня рождения Пушкина университет ИТМО и  Санкт-Петербургский Федеральный исследовательский центр РАН запустили проект по оцифровке и публикации всех архивов Пушкинского Дома и пришли к нам за интерфейсами.

Задача заказчика

Оцифровать коллекции материалов Пушкинского Дома. Сделать цифровой портал для представления и работы с научными и просветительскими материалами.

Фрагмент картотеки Пушкинского дома

Прижизненное издание «Цыганов»

Дизайн-задача

Создать UX-дизайн интерфейсов для представления и работы с научными и просветительскими материалами o Пушкине.

Результат

1. Провели исследование пользователей. Описали портреты целевой аудитории портала, их задачи на портале и сценарии использования.
2. Вместе с заказчиками придумали общую концепцию портала и проработали его информационную архитектуру.
3. Определили и зафиксировали MVP-версию для первого публичного запуска. Часть разделов системы, такие как таймлайн жизни Пушкина, описали концептуально и отложили на потом, остальные взяли в работу.
4. Сделали UX-дизайн для десктопной и мобильной версий интерфейсов портала.
5. Передали заказчикам библиотеку компонентов для последующей адаптации графическими и UI-дизайнерами и использования в разработке.

Рубрикатор произведений. Макет интерфейса

Рубрикатор произведений. В UI на портале

Пушкин ⟨цифровой⟩ – это не коллекция текстов из учебника. Это семантическое издание. Согласно определению Бориса Орехова, доцента школы лингвистики НИУ ВШЭ, «семантическое издание — это представление текста в виде связанных данных».

Рукопись «Скупого рыцаря». Экран по умолчанию

Рукопись «Скупого рыцаря». Раскрыто оглавление и контекст

Чтобы показать сложность Пушкина, и дать возможность каждому стать исследователем, потребовались сложная архитектура и нестандартные интерфейсные решения. Мы сделали:

1. Каталог произведений Пушкина, в том числе:

• Рубрикатор произведений по разделам, выделенным пушкинистами за долгие годы труда.
• Поиск по произведениям, фильтрацию, навигацию по времени и по алфавиту (как дань уважения традициям Пушкинского Дома).
• Раздел «Письма», группирующий переписку по людям и по времени.

Поисковая выдача

Раздел «Письма». Письма сгруппированы по персоналиям

2. Раздел «Произведение», который представляет текст Пушкина как комплекс связанных данных, включающих:

• Привычный текст произведения «из учебника».
• Рукописи Пушкина. Для этого потребовалось разработать специальный PDF-вьюер, удовлетворяющий как задачам учёных, так и простых читателей.
• Редакции, показывающие как менялся текст на разных этапах работы над ним.
• Печатные издания.
• Страницу для показа атрибутов, присвоенных произведению, изданию или каждому листу рукописей академическими исследователями.
• Научные комментарии академиков, как ко всему произведению, так и к какой-либо строфе, строке, а иногда и конкретному слову.
• Корреляты: материалы, в которых упоминается произведение.
• Библиографию работ по этому произведению, с функциями поиска и экспорта, столь ценными для учёных, оформляющих ссылки в своих статьях по ГОСТу.
• Просветительские материалы, специально разработанные для портала.

Аттрибуты

Корреляты

3. Раздел «Экскурсы» с просветительскими материалами, которые рассказывают о контексте создания произведения и его особенностях:

• Биографические комментарии, которые описывают отразившиеся в произведении события жизни поэта.
• Культурный контекст: повлиявшие на произведение исторические события и культурные явления.
• Комментарии филологов к поэтике, раскрывающие средства выразительности.
• Карту просветительских материалов и комментариев.
• Шаблоны для лонгридов, посвященных значимым персоналиям и местам, связанным с Пушкином.

Раздел «Экскурсы». Разводящая страница

Раздел «Экскурсы». Попап

Шаблон лонгрида

4. Глоссарий для пояснения академических терминов.

5. Раздел «О проекте», рассказывающий о его организации, миссии и ценностях, участниках и планах развития.

Все разделы проработали в десктопной и мобильной версиях.

Дополнительная польза

Дизайн продукта

Над проектом работали:

• филологи из Пушкинского Дома
• специалисты по Цифровым Гуманитарным проектам из ИТМО
• специалисты по базам данных из Академии Наук, делающие back-end
• разработчики из IT-агентства, делающие front-end
• дизайнеры из команды бренда, разрабатывающая цвета, шрифты и визуальные элементы
• отдел PR, организующий мероприятия и пишущий тексты о проекте
• мы, делающие информационную архитектуру и UX-дизайн портала

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

Дизайн интерфейса рождается в споре

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

Проектируем на бумаге

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

Проектируем на стекле и под стеклом

Образование

Вели практику междисциплинарной гильдии студентов нескольких университетов (ИТМО, УрФУ). Ходили с ними в Пушкинский дом интервьюировали пушкинистов и изучали организацию архива. Придумывали концепции для разделов интерфейса. Проводили исследования публик и тестирования макетов портала.

Студенты

Особенности

Некоммерческий проект

Пушкин ⟨цифровой⟩ – проект некоммерческий. Для бизнеса конечная ценность – прибыль. Если проект не окупит себя – он закроется. Нам не нужно было продавать Пушкина, это уже сделали за нас: «Пушкин» – главное слово 2024-го года.

В нашем случае критерии выживания иные:

1. Финансирование проекта – целевое: в первую очередь нужно представить данные, с сохранением полноты и многообразия связей, определённых академиками за последние столетия;
2. Материалы должны быть доступны разным людям: академикам от мира литературы, отраслевым профессионалам (экскурсоводам, учителям, историкам, режиссёрам…), простым любителям Пушкина. Каждый должен получить нужную глубину, никто не должен подумать что вошел не в ту дверь.
3. Цифровые Гуманитарные проекты живут, пока вызывают интерес. Для этого мало просто выложить в интернет всего Пушкина: нужно продумать стратегию развития проекта на годы вперёд и учесть эти перспективы в интерфейсе.

Интерфейс, объединяющий людей

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

Например:

• экскурсовод, готовящий маршрут по пушкинским местам в родном городе;
• библиотекарь, который готовит выставку;
• историк, специализирующийся на Золотом Веке;
• журналист, который пишет про литературу;
• преподаватель литературы школы или ВУЗа.

Проводим юзабилити-тестирование прототипов интерфейса с профессионалами из разных сфер

Пушкин ⟨цифровой⟩ для них – источник уникальной информации для создания собственных материалов. Вместе с коллегами по ИТМО и студентами мы изучали цели и задачи таких людей, чтобы они могли решать их на портале. Одна из перспектив проекта – стать не только источником, но и витриной для подобных работ, связанных с Пушкином и Золотым веком.

Библиография

Работа с академиками

Сохранить академическую точность, вынося Пушкина из научных архивов на всеобщее обозрение – непростая задача.

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

Вот так это выглядит. Редакции и варианты

Термины – другая сложность. С точки зрения академической науки, не может быть такого раздела каталога как «Сказки». Правильно – «Фикциональная проза». Мы организовали фокус-группу с преподавателями, библиотекарями, историками и другими профессионалами. Ни один из них не смог найти «сказки» иначе как методом исключения, и это убедило академиков. Однако сложных терминов на страницах ещё много.

Мы строили пути пользователя по интерфейсу таким образом, чтобы понятные каждому блоки встречались первыми, а требующие кандидатской степени – оставались доступными, но не отпугивали родителей, пришедших почитать детям сказку перед сном.

Комментарий к произведению в «Экскурсах»

Карта комментариев к произведению в «Экскурсах»

Логика организации материала

Семантическое издание предполагает демонстрацию не только текста, но и всех связанных с ним данных. Задача со звёздочкой – придумать информационную архитектуру и навигацию, которые с одной стороны – позволяли бы любому пользователю сориентироваться на портале, а с другой – соответствовали бы требованиям академиков.

Для примера рассмотрим организацию раздела «Произведение». Когда человек только попадает на страницу – он видит текст. Тот самый, который знаком нам по учебнику. Акцентная кнопка раскрывает «Контекст»: все материалы, с этим произведением связанные.

Материалы, относящиеся ко времени создания произведения – рукописи, редакции, первые печатные издания – расположены слева. Они – источники текста, который нам знаком. Справа расположены интерпретации: материалы, созданные на основе этого текста: комментарии, библиография, экскурсы, корреляты. Такая организация отражает восприятие времени в нашей культуре: таймлайны как правило организованы слева направо.

Мы прорабатывали таким образом каждый раздел.

Нюансы процесса

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

Например, немало времени ушло на основную визуальную метафору со скобками, как в слове ⟨цифровой⟩ или вокруг кнопки ⟨контекст⟩: скобки символизируют цифровую трансформацию, при которой объект открывается большему числу людей, но при этом неизбежно что-то утрачивает, оставляет за скобками цифровизации.

Цвета, шрифты и прочий UI были настолько же важны и требовали большого ресурса на обсуждение. Эту часть работы забрала отдельная команда заказчика, с которой мы работали в плотной связке. Мы строили, коллеги – красили. Их решения в свою очередь отражались на нашей работе: метафора со скобками отражается в композиции экрана и навигации.

В работе с таким объектом как «Пушкин» много нюансов. За каноничным, сформированным советской школой, академической традицией, фольклором и анекдотами образом Пушкина сложно увидеть человека.

Научные архивы затем и нужны, чтобы отделять зёрна фактов от слухов и легенд.