После успешного дизайна приложения «Театрум» для Smart TV в студии Webbox меня пригласили в штат Театрума для решения ключевых продуктовых задач. В этом кейсе расскажу про проектирование интерфейса загрузки видеоконтента.
Задача
Сделать админку для театров, в которой можно создавать и редактировать описание и загружать видеозаписи постановок для демонстрации в онлайн-кинотеатре. Для удобства внутри компании мы называем эту админку «Панель креатора».
Кроме самой панели креатора нужно было сделать экраны с основными настройками профиля театра.
Решение задач я начала со структурирования данных. Выделила сущности, их параметры и возможные действия согласно тз.
Информационая структура
Представитель театра или администратор приложения может войти в панель креатора через кнопку «Настройки» в профиле театра.
Использовала структуру существующих экранов, чтобы вписать в нее новый функционал.
Разобравшись с сущностями, их параметрами и действиями, я перешла к работе с интерфейсом.
Структура интерфейса
Поменяла вложенность загруженных на сайт видео для онлайн-кинотеатра, теперь они находятся внутри постановки.
Объединила «Постановки» и «Людей театра» в «Панели кератора».
2. Скорректировала первичное видение информационной структуры, учитывая удобство управления контентом:
В настройках профиля театра можно добавлять и редактировать всю информацию о театре (название, адрес, телефоны, описание, ссылки и т. д.), загружать фотографии.
Настройки профиля театра
Контент о людях и постановках разместила в разных вкладках. Сотрудников, загруженных в «Люди театра», можно добавить в конкретную постановку.
«Панель креатора» — хранилище информации обо всех загруженных постановках театра и о его сотрудниках. Самый логичный формат представления и управления таким массивом — таблицы.
Панель креатора
Дизайн таблиц сделала легким и минималистичным.
Показала комментарии и дополнительную информацию только при наведении на элемент либо по клику, чтобы не перегружать интерфейс,
Предусмотрела возможность настроить то, какие именно колонки отображаются, чтобы администратор мог сделать вид таблицы максимально удобным для себя.
Самые важные ячейки таблицы показала целиком.
Сократила через многоточие содержание части ячеек, а полное показала при наведении.
Колонок в таблице с постановками получилось много. Не все данные одинаково важно видеть на этом экране, поэтому:
Редактирование постановки внутри организовано аналогично странице «Настройки». Вся информация разбита на логические группы и размещена на соответствующих вкладках в боковом меню.
Для планшета я оставила табличную организацию данных, добавив горизонтальный скролл внутри таблицы, а в мобильных экранах вместо таблиц использовала раскрывающиеся списки и карточки.
Базовый сценарий использования «Панели креатора» — офисный. Мобильная и планшетная версии второстепенны, но все же нужны для внесения экстренных изменений.
Адаптация под мобильные устройства
Для Театрума я сделала дизайн раздела «Настройки» профиля театра и mvp «Панели креатора». Панель нужна представителям театров для добавления видео для онлайн-кинотеатра. Следующая задача после запуска — собрать данные и проверить удобство и готовность клиентов использовать этот функционал. Далее приступим к коррекции интерфейса по результатам аналитики.
