Особый взгляд

Доступность как основа проекта

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

Из этого сценария мы исходили при проектировании структуры, навигации и интерфейсных компонентов. В «Особом взгляде» доступность стала основой проекта — без отдельной версии сайта или формальной панели «для слабовидящих».

Ключевые сценарии мы заранее обсудили с незрячими пользователями и тестировщиками, а позже подробнее рассказали об этом в материале «Как незрячие “видят” сайты».

Как звучит сайт

Попробуйте на минуту перестать смотреть на интерфейс и просто его послушать. Мы попросили незрячих коллег записать работу со скринридером на двух сайтах: портале «Особый взгляд», где цифровая доступность учитывалась на всех этапах проектирования, и обычном медиа-сайте.

Архитектура портала

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

Ресурсы

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

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

Благодаря этому пользователь может перейти от статьи к мероприятию, найти другие публикации автора или посмотреть материалы по интересующей теме. Такая структура помогает ориентироваться в большом объёме контента не только через основное меню или поиск, но и через смысловые связи между страницами.

Масштаб и сообщество

Одной из задач клиента было показать масштаб проекта и людей, которые его создают.

Поэтому на сайте появился расширенный раздел команды. В нём представлены не только сотрудники «Особого взгляда», но и авторы, амбассадоры, тифлокомментаторы и другие участники проекта.

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

Географию проекта показывает карта России с городами его присутствия. При этом информация доступна не только в визуальной форме: пользователь может получить те же данные в виде структурированного списка.

Визуальная концепция

Доступность не должна была превращать портал в обезличенный утилитарный интерфейс.

Нам было важно создать визуальную систему, которая:

• отражает смысл проекта;
• развивает узнаваемый образ «Особого взгляда»;
• остаётся чистой и понятной, не усложняя работу с контентом.

На главном экране название «Особый взгляд» постепенно появляется из размытого состояния. На фоне расположены геометрические элементы с деликатной реакцией на движение курсора.

Для проекта мы также разработали стеклянную 3D-интерпретацию логотипа «Особого взгляда». Она стала одним из ключевых элементов нового визуального языка.

Персонализация рекомендаций

Портал учитывает, материалами каких категорий пользователь интересуется чаще, и на основе этого корректирует порядок рекомендаций.

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

Инструменты для редакции

Помимо пользовательской части мы разработали инструменты, упрощающие ежедневную работу редакции.

Система автоматически обрабатывает материалы, добавленные через WYSIWYG-редактор:

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

Такая постобработка сокращает объём ручной работы и снижает вероятность того, что новый материал нарушит адаптивность или доступность страницы.

Проектирование и разработка

В рамках этапа проектирования мы подготовили интерактивный прототип из 23 экранов, охватывающий ключевые пользовательские сценарии и функциональные модули портала.

Технологии

• Система управления: 1С-Битрикс.
• Фронтенд: Vue, Vite, TypeScript.
• Интеграции: DaData, Sendsay.