технология

Как создать
интерактивный рейтинг
в Playbuzz

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

Зарегистрируйтесь в сервисе или войдите в свой аккаунт, если регистрировались ранее — кнопка «LOG IN» расположена в правом верхнем углу. Авторизоваться можно с помощью учетной записи в Гугле или Фейсбуке, или ввести адрес электронной почты и придумать пароль.

Интерфейс сервиса на английском языке, но разобраться не сложно.

После того, как вы войдете в свой аккаунт, сайт предложит вам выбрать уже имеющиеся шаблоны или создать свой. Наведите курсор на иконку в левом верхнем углу рядом с логотипом сайта и в выпадающем списке выберите «New from template» (Новый шаблон). Во вкладке «New» (Новые) появившегося окна выберите «Ranked List» (Рейтинг) и нажмите кнопку «Create» (Создать).

Обложка рейтинга

Назовите ваш рейтинг, напишите описание, чтобы пользователи понимали, о чем идет речь, и выберите обложку — нажмите на кнопку «+ Add header» (Добавить заголовок) и заполните соответствующие поля. Картинку вы можете найти на стоках или же загрузить с вашего компьютера или из интернета, указав ссылку на изображение в поисковой строке. Мы для примера сделаем рейтинг преданности собак.

Настройка вариантов голосования

В поле «Titlе» напишите название варианта ответа, за который смогут проголосовать пользователи. В нашем случае это породы собак. Когда вы кликните на поле «Titlе», появятся две группы меню — в начале строки и в конце. Первая группа настроек позволяет добавить к названию ссылку и emoji, вторая — выбрать цвет индикатора голосования и форму определения лидера. Мы выбираем иконку «Interactive List», вы можете поэкспериментировать и подобрать подходящий вариант для вашего рейтинга. Не забудьте открыть само голосование — за это отвечают две стрелочки в конце строки. Вы можете сделать его по системе «лайк/дизлайк» (должны быть активны красная и зеленая стрелочки), оставить только «лайки» (зеленая стрелочка) или «дизлайки» (красная стрелочка).

Под строкой с названием варианта голосования расположено поле с иконкой фотоаппарата. Есть несколько видов контента, который можно добавить в это поле:

Изображение из встроенного поисковика, с компьютера, из интернета по ссылке. Картинку можно отредактировать: обрезать, размыть; добавить рисунок, текст, смайлики, стикеры.

Видео из встроенного поисковика, Ютуба или вставить гифку. На видео из поисковика вы можете наложить фильтр, обрезать ролик или зациклить его. Видео из Ютуба можно только обрезать, а вот гифку только размыть и масштабировать.

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

Добавьте к карточке описание со смыслом — это поможет пользователю решить, за какой вариант он проголосует. В описании вы можете изменить начертание шрифта на Bold (жирный) и Italic (курсив), добавить подчеркивание и зачеркивание.

Добавляем, меняем местами, удаляем и копируем

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

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

1. Нажмите на значок плюса в фиолетовом кружочке у нижнего левого угла любой из карточек, в открывшемся окне выберите «Media».

2. Скопируйте любую из карточек голосования — пустую или уже заполненную (в последнем случае отредактируйте контент). Для этого кликните по иконке «Dublicate» (Создать дубликат).

Если вы хотите изменить порядок элементов в рейтинге, нажмите на перекрестие со стрелками «Drag to reorder» (Перетащить, чтобы изменить порядок) и переместите выбранную позицию в нужное место.

Лишнюю карточку можно удалить, кликнув на иконку с мусорным баком «Delete» (Удалить).

Если в вашем голосовании много вариантов, не обязательно пролистывать страницу вверх и вниз в поисках нужного элемента — перемещайтесь по рейтингу с помощью оглавления в левой части конструктора, во вкладке «Map» (Карта).

Финишная прямая

Вы можете посмотреть, как будет выглядеть рейтинг на экранах пользовательских устройств (компьютер, планшет, телефон) — нажмите на кнопку «Preview» (Предпросмотр) в правом верхнем углу. Если нужно что‐то исправить — сделайте это.

Обязательно сохраните проект, нажав на кнопку «Save Draft» (Сохранить черновик) в правом верхнем углу. Сохраняйте также любые внесенные позже изменения.

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

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

Если после публикации рейтинга вы что‐то в нём поменяли, нажмите кнопку «Publish» еще раз — в противном случае будет отображаться предыдущая версия рейтинга.

Чтобы поделиться рейтингом в социальных сетях, нужно:
— кликнуть на иконку со своим аватаром в правом верхнем углу экрана, в выпадающем меню выбрать строчку со своим именем;
— в открывшемся окне на вкладке «My Item» выбрать рейтинг, которым вы хотите поделиться;
— пролистать рейтинг до конца — под последним вариантом голосования расположены ссылки на популярные социальные сети, — кликнуть на нужной.

В сервисе есть возможность посмотреть аналитику по каждому созданному проекту: сколько раз пользователи открыли рейтинг, сколько раз проголосовали, сколько времени потратили, сколько людей долистало до конца рейтинга, а также результаты голосования. Чтобы увидеть эти данные, доберитесь до вкладки «My Item» и выберите «View Status» в меню нужного рейтинга и подождите, пока информация загрузится.

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

С помощью этой технологии были реализованы следующие проекты

Над материалом работала
Ульяна Коршунова

Иллюстрации:
скриншоты
сервиса Lapse It

Знаете похожие технологии? Расскажите о своем опыте, нам интересно!