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

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

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

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

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

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

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

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

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

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

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

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

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

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

- Рубрикатор произведений по разделам, выделенным пушкинистами за долгие годы труда.

- Поиск по произведениям, фильтрацию, навигацию по времени и по алфавиту (как дань уважения традициям Пушкинского Дома).

- Раздел «Письма», группирующий переписку по людям и по времени.

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

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

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

- Привычный текст произведения «из учебника».

- Рукописи Пушкина. Для этого потребовалось разработать специальный PDF-вьюер, удовлетворяющий как задачам учёных, так и простых читателей.

- Редакции, показывающие как менялся текст на разных этапах работы над ним.

- Печатные издания.

- Страницу для показа атрибутов, присвоенных произведению, изданию или каждому листу рукописей академическими исследователями.

- Научные комментарии академиков, как ко всему произведению, так и к какой-либо строфе, строке, а иногда и конкретному слову.

- Корреляты: материалы, в которых упоминается произведение.

- Библиографию работ по этому произведению, с функциями поиска и экспорта, столь ценными для учёных, оформляющих ссылки в своих статьях по ГОСТу.

- Просветительские материалы, специально разработанные для портала.

Аттрибуты

Корреляты

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

- Биографические комментарии, которые описывают отразившиеся в произведении события жизни поэта.

- Культурный контекст: повлиявшие на произведение исторические события и культурные явления.

- Комментарии филологов к поэтике, раскрывающие средства выразительности.

- Карту просветительских материалов и комментариев.

- Шаблоны для лонгридов, посвященных значимым персоналиям и местам, связанным с Пушкином.

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

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

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

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

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

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

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

- филологи из Пушкинского Дома

- специалисты по Цифровым Гуманитарным проектам из ИТМО

- специалисты по базам данных из Академии Наук, делающие back-end

- разработчики из IT-агентства, делающие front-end

- дизайнеры из команды бренда, разрабатывающая цвета, шрифты и визуальные элементы

- отдел PR, организующий мероприятия и пишущий тексты о проекте

- мы, делающие информационную архитектуру и UX-дизайн портала

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

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

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

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

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

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

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

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

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

1. Финансирование проекта – целевое: в первую очередь нужно представить данные, с сохранением полноты и многообразия связей, определённых академиками за последние столетия;

2. Материалы должны быть доступны разным людям: академикам от мира литературы, отраслевым профессионалам (экскурсоводам, учителям, историкам, режиссёрам…), простым любителям Пушкина. Каждый должен получить нужную глубину, никто не должен подумать что вошел не в ту дверь.

3. Цифровые Гуманитарные проекты живут, пока вызывают интерес. Для этого мало просто выложить в интернет всего Пушкина: нужно продумать стратегию развития проекта на годы вперёд и учесть эти перспективы в интерфейсе.

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

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

Например:

- экскурсовод, готовящий маршрут по пушкинским местам в родном городе;

- библиотекарь, который готовит выставку;

- историк, специализирующийся на Золотом Веке;

- журналист, который пишет про литературу;

- преподаватель литературы школы или ВУЗа.

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

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

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

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

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

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

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

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

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

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

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

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

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

Страница произведения с раскрытым контекстом. Макет интерфейса

Страница произведения с раскрытым контекстом. Реализованная страница на портале

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

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

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

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

Научные комментарии. Макет интерфейса

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

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

Некоторые цифры

Передали в разработку 17 разделов портала 

В макетах отдельно описали работу скролла, раскрытие интерактивных элементов на страницах и т.п.

Проработали отображение 27 типов контента 

Общий принцип позволяет единообразно отображать разнородные материалы на всех страницах портала.

Создали 4 портрета пользователей 

Они помогут разрабатывать будущие разделы портала и проверять, насколько те нужны пользователям.

1. Провели исследование пользователей. Описали портреты целевой аудитории портала, их задачи на портале и сценарии использования.

2. Вместе с заказчиками придумали общую концепцию портала и проработали его информационную архитектуру.

3. Определили и зафиксировали MVP-версию для первого публичного запуска. Часть разделов системы, такие как таймлайн жизни Пушкина, описали концептуально и отложили на потом, остальные взяли в работу.

4. Сделали UX-дизайн для десктопной и мобильной версий интерфейсов портала.

5. Передали заказчикам библиотеку компонентов для последующей адаптации графическими и UI-дизайнерами и использования в разработке.