---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2024-07-24
publishYear: 2024
name: Прожито
title: Интерфейс платформы общественной архивистики
excerpt: Провели исследование пользователей, спроектировали и создали интерфейс каталога архивов.
logo:
  src: ~/assets/images/portfolio/prozhito/logo.svg
  alt: Прожито • Логотип
  link: https://prozhito.org/
image: ~/assets/images/portfolio/prozhito/main.png
imageAlt: Собака Павлова • Прожито • Интерфейс платформы общественной архивистики
thumbnail: 
  src: ~/assets/images/portfolio/cards/prozhito.svg
  alt: Собака Павлова • Прожито • Интерфейс платформы общественной архивистики
tags:
  - ed
  - ux-design
  - research
  - mass  
awards: 
  - |
    <a href="https://tagline.ru/cases/interfeys-platformy-obschestvennoy-arhivistiki/" target="_blank" title="Кейс «Прожито» — призер Tagline Awards 2024"><img src="https://tagline.ru/medal-tagline-awards-2024-shortlist.svg" alt="Кейс «Прожито» — призер Tagline Awards 2024"></a>
  - |
    <a href="https://tagline.ru/cases/interfeys-platformy-obschestvennoy-arhivistiki/" target="_blank" title="Кейс «Прожито» — призер Tagline Awards 2024"><img src="/images/medals/tagline-winner.svg" alt="Кейс «Прожито» — призер Tagline Awards 2024"></a>
relatedPages:
  - text: |
      ### Вам нужен интерфейс?
      #### Заказать дизайн
      Напишите нам на&nbsp;[we@sobakapav.ru](mailto:we@sobakapav.ru) 
      #### Что мы можем сделать?
      Разработать [UX-дизайн под ключ](/services/ux-design), провести [UX-исследование ](/services/research), как в этом кейсе. И [многое другое](/services). 
    collection: services
    page: ux-design
  - collection: services
    page: research
  - text: |
      ### Наша экспертиза
      368 интерфейсных проектов и более [120 проектных кейсов](https://sobakapav.ru/portfolio).
      ### Наши статьи о UX-исследованиях 
    collection: post
    page: ux-testing-results
  - collection: post
    page: professional-testing
  - collection: post
    page: before-interface-testing
  - collection: post
    page: everyday-information-architecture
  - collection: post
    page: qualitative-methods-in-ux-studies
  - collection: post
    page: interview-method-for-development
  - collection: post
    page: per-aspera-ad-astra
  - collection: post
    page: context
  - collection: post
    page: design-and-culture
  - text: |
      ### Хотите уметь так же?
      Научим создавать хорошие интерфейсы.
    collection: promo
    page: mio

relatedPages2:
  - text: |
      ### Похожие проекты
    collection: portfolio
    page: pushkin-digital
  - collection: portfolio
    page: ohlebe
  - collection: portfolio
    page: tigitl
  - collection: portfolio
    page: korochka
  - collection: portfolio
    page: vuborgskiy-zamok
  - collection: portfolio
    page: snob

outcome:
  title: Некоторые цифры
  numbers:
   - title: Нарисовали
     number: 4 варианта
     text: датапикера под разные потребности продукта
   - title: Создали
     number: более 40 макетов
     text: блока просмотрщика документов (общий вид и различные режимы)
   - title: Обсудили
     number: 60+ вопросов
     text: в документе с правками и 98 комментариев в Figma
  text2: Создали удобный современный дизайн интерфейса каталога архивов «Прожито», провели тестирование прототипа и передали макеты в разработку.
context: |
  Проект «[Прожито](https://prozhito.org/)» создан в 2015 году как площадка для сбора и публикации текстов личных дневников на русском языке. 
  
  Один из элементов этой платформы — каталог архива «Прожито», площадка для совместной работы кураторов домашних собраний документов и архивистов Европейского университета в Санкт-Петербурге.
  
  Здесь любой желающий может выложить оцифрованные документы своей семьи с описаниями, текстовым слоем и т.п.
result:
  - src: ~/assets/images/portfolio/figma.svg
    text: Покажем из рук в руки и расскажем ещё больше
    link: "mailto:we@sobakapav.ru"
budget: 1 000 000 ₽
time: 5 месяцев
review:
  text: |
    Центр «Прожито» Европейского университета в Санкт-Петербурге обратился за помощью к «Собаке Павловой», потому что у компании есть устойчивая репутация разработчика цифровых решений для гуманитарных проектов, подтвержденная многочисленными рекомендациями со стороны наших коллег-гуманитариев.
    
    Мы были впечатлены организацией рабочего процесса, которую почти полностью взяли на себя коллеги из «Собаки Павловой». Мы очень быстро нашли с ними общий язык и установили удобный всем рабочий ритм.
    
    В процессе работы коллеги из «Собаки» помогли нам существенно скорректировать представление о задачах продукта. Предложенные ими решения кажутся нам универсальными и масштабируемыми на следующие этапы разработки цифрового архива «Прожито», поэтому мы рассчитываем на дальнейшее сотрудничество.
  person: Михаил Мельниченко
  position: Директор Центра «Прожито»
  photo: ~/assets/images/portfolio/prozhito/person.jpg
director: |
  Сложно что-то сказать, кроме того, что это была славная охота.
  
  Крутая история. Интересный проект. Зубодробительная задача по работе над структурами архива. Много небольших, но элегантных решений.
  
  Громадная заслуга заказчика, который думал с нами вместе и сразу отправлял решения в продакшен.
  
  Что еще? Очень приятно видеть, как на всяких заумных конференциях ученые уже обсуждают, как будут использовать сделанное нами.
metadata:
  canonical: https://sobakapav.ru/portfolio/prozhito
  title: Дизайн интерфейса • Интерфейс платформы общественной архивистики (кейс)
  description: "Провели исследование пользователей, спроектировали и создали интерфейс каталога архива."
  robots:
    index: true
    follow: true
  openGraph:
    site_name: Собака Павлова
    images:
      - url: '~/assets/images/portfolio/prozhito/badge.png'
        width: 1200
        height: 630
---

import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';

<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Нюансы](#anchor4) • [Отзыв, цены, сроки](#anchor5)
</TOC>

## <a name="anchor1" />Бизнес-задача

Разработать платформу общественной архивистики «Прожито» для взаимодействия с аудиторией. 

<a href="/images/portfolio/prozhito/0-1.png" target="_blank" class="shadow-none">![Примеры материалов цифрового архива «Прожито» | SobakaPav.ru](~/assets/images/portfolio/prozhito/0-1.png)</a>
_Примеры материалов цифрового архива «Прожито»_

Для начала — создать каталог архивов «Прожито», далее расширять функциональность всей платформы с учетом пользовательских отзывов.

## <a name="anchor2" />Дизайн-задачи

1. Провести исследование: определить типы пользователей и выяснить, что нужно каждому из типов для взаимодействия с базой данных каталога.
2. Спроектировать и создать интерфейс каталога архива «Прожито» (как для десктопа, так и мобильную версию), провести тестирование прототипа, передать макеты в разработку.

<a href="/images/portfolio/prozhito/1.png" target="_blank" class="shadow-none">![Дизайн главной страницы каталога архива «Прожито» | SobakaPav.ru](~/assets/images/portfolio/prozhito/01.png)</a>
_Дизайн главной страницы каталога архива «Прожито»_

## <a name="anchor3" />Результат

На этапе исследования описали пользовательские сценарии. Учли широкую функциональность платформы и предусмотрели возможность для будущего развития системы.

>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.

На этапе проектирования разработали страницы сайта архива:
- Главная / Поиск
- Поиск / Результаты поиска
- Персона (профиль создателя архива / хранителя архива)
- Собрание (страница с информацией об отдельном архиве + его структура)
- Документ (информация об отдельной сущности из архива)

<a href="/images/portfolio/prozhito/2.png" target="_blank" class="shadow-none">![Разделы и результаты поиска каталога архива| SobakaPav.ru](~/assets/images/portfolio/prozhito/02.png)</a>
_Разделы и результаты поиска каталога архива_

<a href="/images/portfolio/prozhito/3.png" target="_blank" class="shadow-none">![Раздел «Персона» каталога архива| SobakaPav.ru](~/assets/images/portfolio/prozhito/03.png)</a>
_Раздел «Персона» каталога архива_

<a href="/images/portfolio/prozhito/4.png" target="_blank" class="shadow-none">![Раздел «Документ» каталога архива | SobakaPav.ru](~/assets/images/portfolio/prozhito/04.png)</a>
_Раздел «Документ» каталога архива_

### Экстра-польза

Проектируя страницы, заметили несколько дополнительных потребностей и, чтобы закрыть их, разработали:
- Просмотрщик документов (позволяет перемещаться между страницами документов, а также выбирать режимы отображения «документ / распознанный текст»).
- Датапикер (несколько концептов выбора диапазонов дат, для поиска документов / архивов / персон)

<a href="/images/portfolio/prozhito/5.png" target="_blank" class="shadow-none">![Просмотрщик документов каталога архива «Прожито»| SobakaPav.ru](~/assets/images/portfolio/prozhito/05.png)</a>
_Просмотрщик документов каталога архива «Прожито»_

<a href="/images/portfolio/prozhito/6.png" target="_blank" class="shadow-none">![Интерфейс платформы общественной архивистики. Датапикер| SobakaPav.ru](~/assets/images/portfolio/prozhito/6.png)</a>
_Интерфейс платформы общественной архивистики. Датапикер_

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

## <a name="anchor4" />Нюансы процесса

### Исследование

Мы провели два этапа исследования: 
1. Глубинные интервью с домашними архивистами, чтобы узнать, как они используют свои архивы.
2. Фокус-группу с учёными и практиками, которые используют архивы в своей работе, чтобы понять их ожидания и проявить задачи, требующие интерфейсных решений.

<a href="/images/portfolio/prozhito/0-3.png" target="_blank" class="shadow-none">![Примеры материалов цифрового архива «Прожито» | SobakaPav.ru](~/assets/images/portfolio/prozhito/0-3.png)</a>
_Примеры материалов цифрового архива «Прожито»_

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

<a href="/images/portfolio/prozhito/8.png" target="_blank" class="shadow-none">![Интерфейс платформы общественной архивистики. Результат поиска с подсказкой | SobakaPav.ru](~/assets/images/portfolio/prozhito/08.png)</a>
_Результат поиска с подсказкой_

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

<a href="/images/portfolio/prozhito/9.png" target="_blank" class="shadow-none">![Интерфейс платформы общественной архивистики. Информеры | SobakaPav.ru](~/assets/images/portfolio/prozhito/09.png)</a>
_Документ. Информеры_

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

<a href="/images/portfolio/prozhito/10.png" target="_blank" class="shadow-none">![Документ. Раскрыты авторы и населенные пункты | SobakaPav.ru](~/assets/images/portfolio/prozhito/010.png)</a>
_Документ. Раскрыты авторы и населенные пункты_

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

<a href="/images/portfolio/prozhito/11.png" target="_blank" class="shadow-none">![Документ. Документ. Оглавление | SobakaPav.ru](~/assets/images/portfolio/prozhito/011.png)</a>
_Документ. Оглавление_

### Проектирование

На этапе проектирования постоянно сверялись с разработчиками со стороны заказчика. Так мы понимали, какие решения будет сложно реализовать, и своевременно от них отказывались или заменяли на технически возможные.

<a href="/images/portfolio/prozhito/12.png" target="_blank" class="shadow-none">![Интерфейс платформы общественной архивистики. Собрание. Режим списка | SobakaPav.ru](~/assets/images/portfolio/prozhito/012.png)</a>
_Собрание. Режим списка_

Команда со стороны заказчика — пользователи своего продукта. Их экспертиза помогала нам оценить некоторые гипотезы при концептуальном проектировании и выбирать решения.

<a href="/images/portfolio/prozhito/14.png" target="_blank" class="shadow-none">![Интерфейс платформы общественной архивистики. Собрание. Древовидная структура| SobakaPav.ru](~/assets/images/portfolio/prozhito/014.png)</a>
_Собрание. Древовидная структура_

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

### <a name="anchor5" />