Tyter. От рисования совы текстом до рисования истории о сове с помощью картинок

Небольшая историю о том, как я проектировал UI платформы для сценаристов, а потом решил взять готовые паттерны Телеграма и нарисовать прототип для раскадровщиков.

В этом выпуске:

UI прототип: сегмент сценаристов (макеты)
сегмент раскадровщиков (кликабельный прототип / макеты)

Срок: 2 месяца на прототип приложения для сценаристов и 3 месяца на проектирование приложения для раскадровщиков.

Стоимость: где-т около 640 000 Р (за этап «продукт дифинишн», сайтецкий, моё время как дизайнера, сайтецкий на Тильде, доменчик в зоне .ru)

Часть 1 — Приложение для сценаристов. Анимируем сову текстом.

Исследование и анализ аудитории. А кому нужен такой продукт и зачем?

Основная ЦА и контекст: Сценаристы и проектная группа.

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

Основная идея и миссия. Ради чего затевался проект?

Изначально — предоставить сценаристам и другим участникам проектов веб платформу, где можно было бы и писать сценарии с всплывающими подсказками текстовых блоков, делать сценарные карточки, и финансовые отчёты на их основе формировать, и других участников приглашать для редактирования, создавать компоненты (персонажи, локации), комментарии оставлять как в Гугл Ворде + на основе сценария рисовать раскадровки. В общем, такая огромная SaaS платформа, да.

Вторичные исследования.

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

Большое спасибо режиссёру Никите, Богдану и сценаристу Дмитрию, которые подсказали куда копать. И большущее спасибо Артуру и чату Motion Talk за рекомендации по литературе.

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

В особенность я записывал то, на что стоит обратить внимание при проектировании, а в комментарии записывал, как примерно это можно отобразить в UI.

Примеры таких заметок:

• Особенность: основное правило у сценаристов, которые пишут сценарии для кино и анимации — использовать определённый сценарный формат. Вывод: сделать отдельный блок с переключением разметки: ЭКС, ИНТ, ДИАЛОГ и т.д..
• Особенность: сценаристы используют различные методики для создания историй. Вывод: Можно добавить подсказки для начинающих сценаристов в раздел «помощь».
• Особенность: сценаристы после написания сценария могут возвращаться к нему в процессе съёмки, если у режиссёра или продюсера появляются комментарии. Вывод: сценарии должны храниться на серверах, пока их не удалят. После удаления они сохраняются в корзине ещё 6 месяцев, если корзину не чистить.
• Особенность: пайплайн в медиа обычно такой: препродакшн (сценарий, тэглайны, мудборды, раскадровки и черновые 3D/2D аниматики, выстраивание мизансцен и прочее); продакшн (воплощение сценария и раскадровок в жизнь. Съёмка, создание 3D сцен, работа с освещением и т.д.); Постпродакшн (озвучка, VFX, дубляж); Дистрибьюция (маркетинг, прокат или добавление на стриминговые сервисы). Выводы: делать многофункциональное приложение для всех сфер не имеет смысла. Сосредоточиться на одном сегменте.
• и так далее

Артефакты проектирования и интерфейс.

На основе этого списка заметок я собрал по шаблону Остервальда карту потребительского профиля и User Story Map с основным функционалом платформы, который позже я планировал использовать для написания ЮзКейсов и функциональной спецификации для Фронтендера и Бекэндера.

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

Синтез пользовательского интерфейса.

Первые наброски интерфейса я по классике сделал на бумажках. Потом собрал из них первые наброски UI в Фигме.

После первого прогона с «тестом первого клика», от большинства элементов на этом экране редактора пришлось отказаться, тк он оказался вообще ненужным в работе сценариста. Например, вся верхняя панель была убрана. Оставил только функционал работы с текстом + пользователи хотели, чтобы можно было собирать отдельные сценарные карточки — это такие ключевые моменты из которого потом пишется полноценный сценарий. Этот функционал при перепроектировании я решил убрать в правое меню (скриншот UI ниже).

Про лендинг и цифры.

Чтобы проверить востребованность такой платформы я собрал небольшой лендинг, где описал основной функционал приложения и попросил друзей и знакомых поделиться ссылкой на несуществующий продукт. Стал ждать. За первые 4 месяца существования лендинга на него зашло 1051 человек. Записалось на закрытое тестирование 44 человека. Конверсия 4,1%.

https://tyter.ru/

Тестирование удобства и немножко про пользовательский опыт.

Из всех 44 человек, которые подписались на сайте Tyter.ru 6 ответили на рассылку о проведении тестирования интерфейса. С одним из них я пообщался в телеграме.

Как проходило тестирование:

1. Сначала я провёл небольшие коридорные тесты вместе с тестом первого клика на своих знакомых, чтобы выяснить, насколько понятны интерфейсные элементы.

2. Для дальнейшего тестирования удобства интерфейса я использовал нескольких пользователей из email базы + написал нескольким людям из профильных чатов.

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

3. По итогу тестирования выяснилось, что некоторые детали интерфейса вовсе стоит убрать, а некоторого функционала не хватает. Например, на третьем интервью выяснилось, что пользователи хотят видеть на какой хронометраж они написали текст. Для этого в следующей версии UI проекта я добавил индикатор хронометража (подсмотрел этот паттерн у приложения КИТ.Сценарист).

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

Ещё я пообщался с друганами программистами и они посчитали мне, что на разработку работающей демки под веб уйдёт минимум 8КК рублей, что сразу отбило желание продолжать пилить интерфейс для такой огромной платформы.

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

Но об этом во второй части цикла статей «Tyter. От рисования совы текстом до рисования истории с помощью картинок».

Если хотите поглубже погрузиться в тему дизайна и проектирования подпишитесь на мой канал — https://t.me/ultraproduct

Часть 2 — поиск других решений и другого пользовательского сегмента.

Исследования другого сегмента и проектирование.

Контекст: основная пользовательская база — раскадровщики. Это люди, которые создают ключевые кадры для того, чтобы видеть всю историю будущей анимации или кино в целом. Иногда раскадровщики сами могут

Я решил пойти в другом направлении — спроектировать интерфейс и создать лендинг приложения для раскадровщиков. Об этой трудоёмкой профессии есть паттерны. О них и пойдёт речь.

Цель исследования?
Выявить основные паттерны поведения специалистов в сфере кино для создания простого в использовании редактора.

Немного технических деталей.

На этот раз для будущей экономии на технологии я решил взять за основу уже готовые исходники Телеграма, тк в нём уже спроектированы системы комментирования, шейринга, регистрации и другие ЮзКейсы взаимодействия проектных групп в кино и анимации.

Ещё собрал портрет потребителей, нарисовал на листочке А4 концептик, показал друганам и знакомым и пошёл искать респондентов, чтобы уточнить некоторые детали.

Про пользователя, монетизацию и эффективность решения. Кто такие, мать вашу, раскадровщики и что они делают?

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

Что я выяснил после проведения чато интервью и зум созвонов?

Если коротко, то выделил особенности, которые делают их повседневную профессиональную жизнь проще.

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

Для раскадровщиков важно, чтобы все ключевые кадры сцены или эпизода сериала были видны сразу на доске.

Прежде чем начать проектировать новую модель данных, отрисовывать макеты в Фигме я пообщался с Матвеем Лашко (режиссёр мультфильма «Песни Сирин») и раскадровщиком Богданом. После этих интервью я собрал такую доску с проблемами, задачами и выгодами для конечных пользователей.

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

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

Что такое раскадровка?

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

Что такое аниматик?

Аниматик — это версия раскадровки с анимацией.

Со сценаристами вроде бы всё понятно — пишут текст ну пусть и пишут, а что с раскадровщиками. Кто это? Они делают анимацию? Не совсем.

Раскадровщик — это человек, который создаёт ключевые кадры — визуальную основу всей истории для каждой сцены фильма или будущей анимации.

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

К таким деталям относится крупность кадра, соотношение сторон, свет, нумерация камер, вырезки текста из сценария и т.д.

Ещё я выяснил, что при передаче используют не видео, а набор картинок в формате досок или Excel документ с описанием деталей.

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

Пользовательские макро сценарии для раскадровщиков:

Суть у этих раскадровок, аниматиков и режиссёрских сценариев одна — помочь поставить режиссёру кадр визуально, чтобы он понимал как и где ставить камеру, свет, какое звуковое сопровождение будет и что вообще должно происходить в кадре.

А в чём разница между раскадровкой, аниматиком и анимацией?

Аниматиками часто занимаются раскадровщики, но основное отличие раскадровки от аниматика и анимации — это их реализация. Для создания аниматиков и итоговой анимации используют таймлайновое представление о будущей сцене.

Такие паттерны чаще всего встречается в приложениях типа Adobe Premiere, After Effects, Storyboarder и других, где есть система таймлайна. Некоторые приложения имеют нодовую систему. Например такие как Nuke или Fusion, но они не используются на этапе препродакшена, а используются уже в конце, когда создаются спецэффекты.

Раскадровка же имеет карточный вид и перемещение по кадрам в некоторых приложениях происходит не на таймлайне, а посредством нажатия на ключевые кадры.

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

Чем примичателен UI и UX экрана редактора Tyter?

Основное отличие приложения Tyter — это возможность создавать раскадровки в привычном виде для раскадровщиков: в виде большой доски с ключевыми кадрами (канвасами), которые можно объединять между собой и выстраивать путь повествования.

Эти пути повествования можно отрендерить в .mp4 и переслать внутри телеграма другому пользователю или экспортировать как сиквенцию .png файлов для дальнейшей анимации и наложения звукова и музыки. А ещё в самих канвасах можно рисовать за рамками и для каждого участника проекта создаются свои слои.

Дизайн система

Пока не готова. Чек-лист.

• Разбить на основные элементы и токены.
• Собрать из них компоненты для JSON библиотек.
• Сделать небольшой брендинг: фирстиль с цветами и типографикой для промо материалов
• редполитика: что пишем на кнопках и пишем ли?
• Добавить гайды и принципы анимации UI.
• Озвучка интерфейса (?)

Часть 3 — выводы и заключение.

Что понял и чему научился?

При проектировании профессиональных приложений порой стоит отходить от стандартных веб паттернов, потому что за пределами лендингов, CMS'ок и JS фреймворков, лежит прекрасный мир нативного PowerShell и .net приложений, а также целый мир офлайна с его CX со своими процессами взаимодействия клиента с сервисом.

Читайте, смотрите, проверяйте, не болейте, берегите себя и близких, смело заглядывайте в бездну неба. Если долго вглядываться начнут появляться звёзды.