Лучшие практики по созданию успешной веб-истории
Important: this documentation is not applicable to your currently selected format websites!
Веб-истории — это формат захватывающих историй, которые просматриваются путем перелистывания кадров и которыми можно с легкостью поделиться. Веб-истории создаются с помощью подмножества AMP Framework и предлагают авторам и издателям возможность структурировать контент в полноэкранном, визуально насыщенном и привлекательном для пользователей виде.
Веб-истории можно сравнить с перекусами — читателям нравится поглощать их маленькими кусочками в непродолжительные свободные моменты. Например, возможности для потребления насыщенного контента открываются во время ожидания метро или посиделок за чашкой кофе. Чтобы каждый «кусочек» заинтересовывал потребителя и доставлял ему удовольствие, следуйте рекомендуемым практикам создания захватывающей веб-истории, описанным в этой статье.
Кратко о главном
Основные составляющие приятной и легкой веб-истории:
- История должна быть завершенной и интересной.
- Сделайте вашу титульную страницу максимально впечатляющей с помощью высококачественных изображений и броского заголовка.
- Сделайте историю наглядной с помощью видео и изображений, которые подстраиваются под экран пользователя и заполняют его.
- Чтобы сказать много, не нужно много слов, особенно при использовании визуальных образов. Старайтесь, чтобы текст на странице не превышал 10 слов.
- При использовании видео старайтесь, чтобы их продолжительность не превышала 15 секунд.
- В некоторых ситуациях (а также состояниях) людям приходится смотреть истории без звука. Добавляйте в видео субтитры, чтобы сделать контент «инклюзивным».
- Старайтесь, чтобы история была многостраничной. Истории продолжительностью от 10 до 20 страниц позволяют большинству авторов создать хорошее повествование.
- Не злоупотребляйте анимацией или встраиваемыми элементами, следите за скоростью переходов.
Понимайте, что вы хотите донести
Продумайте начало истории, ее развитие и завершение. Как только вы поймете, что хотите сказать, разбейте это на составные части. Каждая страница веб-истории должна передавать отдельную идею, согласованно дополняющую все остальные.
Вкусный и питательный контент
Каждая веб-история должна состоять как минимум из 4 страниц и в идеале не превышать 30. Веб-истории должны быть хорошо рассказаны и просты в усвоении. Можно выходить за рамки 30 страниц, если этого требует повествование.
Грамотная упаковка
Титульная страница — это «упаковка» вашей веб-истории. Это первое, что видят зрители, и, если они ее не откроют, единственное. Убедитесь, что она способна заинтересовать их! Хорошая титульная страница состоит из двух элементов: привлекающего внимание изображения и короткого запоминающегося заголовка.
Визуальная составляющая
Используйте высококачественное портретное изображение или видео, которое занимает весь экран. Чтобы зрители могли сразу идентифицировать ваш бренд, добавьте его значок и логотип.
Заголовок
Заголовок должен быть ясным и быстрочитаемым, в идеале не должен превышать 10 слов (40 символов). Укажите автора и название публикации, а также дату публикации, если история привязана к определенному времени.
Бренд и дата
Читателю необходимо знать, кто и когда опубликовал веб-историю. Указывайте сведения о бренде и дату публикации на титульной странице. Это позволит повысить доверие и, если пользователю понравится ваш контент, лояльность. Пример: данная веб-история от CNN о путешествии по Италии позволяет с первого взгляда увидеть, кто опубликовал эту историю и насколько она актуальна.
Визуальное лакомство
Старайтесь заинтересовать читателей качественным и привлекающим внимание визуальным оформлением, а также текстом, который легко и быстро читается. Отдавайте предпочтение высококачественным видео и изображениям, но не отказывайтесь от анимации там, где это имеет смысл.
Все изображения и видео должны занимать весь экран с минимальным объемом «черных полос» (допускаются только по необходимости).
Видео
Видео очень интересны читателям; используйте их как можно больше. Стремитесь использовать видео продолжительностью менее 15 секунд. Если ваше видео длиннее, попробуйте разбить его на более мелкие части.
Веб-истории просматриваются в портретном режиме, поэтому помните о следующем:
- По возможности снимайте видео на высококачественные мобильные устройства.
- Снимайте в 480p.
- Снимайте с частотой не менее 24 кадров в секунду.
| ПРАВИЛЬНО | НЕПРАВИЛЬНО |
|---|---|
| | |
| Это видео без полей помогает читателям сосредоточиться на одной ключевой теме. | Из-за использования «альбомного» формата в этом видео отсутствует ощущение погружения, оно может отвлекать зрителей. |
Убедитесь, что ваш контент доступен для ограниченного восприятия. Кадрируйте видео, чтобы освободить место для текста и субтитров внизу. Не все зрители смогут или захотят слушать звук в видеоконтенте.
| ПРАВИЛЬНО | НЕПРАВИЛЬНО |
|---|---|
| | |
| Субтитры помогают заинтересовать аудиторию, даже если зрители не могут слушать звук. | Если субтитры отсутствуют, аудитория должна иметь возможность слушать аудио, чтобы следить за вашей историей. Это может ограничить круг лиц, которые будут взаимодействовать с вашим контентом, или время, когда они могут это сделать. |
Изображения
Используйте полноэкранные портретные изображения с хорошим разрешением (828 x 1792).
Избегайте фотографий альбомной ориентации.
Обрезайте внимательно
Сосредоточьтесь на самом важном. Обрезайте ненужные или отвлекающие элементы и следите за тем, чтобы ключевой объект фотографии находился в фокусе и был завершенным. Помните, что на некоторых устройствах верх и низ могут обрезаться, поэтому произведите соответствующее тестирование.
| ПРАВИЛЬНО | НЕПРАВИЛЬНО |
|---|---|
| Это изображение обрезано для соответствия содержимому страницы и дополняет ее смысл. | В данном кадре неясно, на чем должно сосредоточиться внимание читателя и какую идею стремится передать изображение. |
Текст
Убедитесь, что текст читаем. Не используйте размер шрифта меньше 24, старайтесь сделать его максимально большим и разборчивым. Выбирайте цвет текста, который контрастирует с цветом фона или фоновым изображением, используемым на странице истории. Не используйте изображения или видео, в которых содержится только текст.
| ПРАВИЛЬНО | НЕПРАВИЛЬНО |
|---|---|
| Благодаря высокой контрастности слова легко различимы. | Из-за низкой контрастности текст и изображения могут сливаться, что затрудняет чтение текста и восприятие истории. |
| Выделение текста делает слова легче читаемыми и помогает зрителям сосредоточиться на вашей истории. | Использование светлого текста поверх изображения со множеством деталей затрудняет чтение. |
Лаконичность текста
Текст должен использоваться маленькими порциями. Старайтесь, чтобы на странице было не более 200 символов.
Обращайтесь с уточняющей информацией как с приправами— предлагайте ее только по запросу пользователей. Развернутый текст следует размещать в виде вложений страницы. Вложения сообщают о наличии дополнительной информации для чтения — заинтересовавшиеся пользователи смогут прочитать ее, смахнув вверх.
Иногда страниц с несколькими предложениями текста не избежать. Старайтесь, чтобы их доля не превышала 10% от всех страниц истории.
| ПРАВИЛЬНО | НЕПРАВИЛЬНО |
|---|---|
| Старайтесь, чтобы в тексте было только самое главное. Используйте разные стили и размеры шрифта, чтобы визуально отделять блоки текста друг от друга и тем самым облегчать его усвояемость. | Такая «стена текста» трудна для чтения и может оттолкнуть зрителя. |
Анимации
Анимации выглядят хорошо, если применяются к месту, например для «оживления» статических изображений. Вы можете анимировать изображения и ресурсы с помощью эффектов «сбора мозаики», поворота или постепенного появления.
| ПРАВИЛЬНО | НЕПРАВИЛЬНО |
|---|---|
| | |
| В этом примере движение помогает донести основную идею и добавляет на страницу динамический элемент. | Эта статическая страница выполняет свои функции, однако не использует все возможности для вовлечения пользователей. |
Однако чрезмерное использование анимаций может быть назойливым. Старайтесь не злоупотреблять однотипными эффектами и будьте умеренны в добавлении анимаций.
Время решает все
Страницы должны быстро переходить в свое завершенное состояние (анимация не должна мешать пользователю переходить на следующую страницу), но не слишком быстро! Важно обеспечить правильное сочетание стиля и продолжительности показа. Например, простые анимации должны занимать менее 500 миллисекунд, но панорамирование фонового изображения должно длиться дольше.
| ПРАВИЛЬНО | НЕПРАВИЛЬНО |
|---|---|
| | |
| Эффект Кена Бернса на фоновом изображении является еле уловимым, благодаря чему хорошо сочетается наложенным текстом и делает просмотр более зрелищным. | Здесь эффект Кена Бернса слишком ускорен. Движение отвлекает и мешает сосредоточиться на заголовке. |
Попробуйте проявить творческий подход к анимации. Анимируйте несколько объектов по очереди, а не заставляйте их двигаться одновременно. Элементы могут использовать эффекты разных типов и разной длительности для создания одной цельной анимации.
| ПРАВИЛЬНО | НЕПРАВИЛЬНО |
|---|---|
| | |
| Анимация этих объектов по отдельности делает визуальное оформление более интересным и приятным, а также помогает выделить каждый элемент. | Быстрое перемещение одного большого блока может отвлекать и затрудняет понимание. |
Идеальные пары
Подбирайте стиль анимации под эстетику вашей истории. Используйте предлагаемую для веб-историй библиотеку анимаций, чтобы подобрать стиль и интенсивность анимаций, которые подходят именно вам и не отвлекают от просмотра вашего контента.
| ПРАВИЛЬНО | НЕПРАВИЛЬНО |
|---|---|
| | |
| Сдвиг заголовка вверх и постепенное появление субтитров позволяет знакомить читателя с содержимым страницы в задуманном порядке. | Анимация вращения не добавляет ценности истории — напротив, она создает «визуальный шум» и может отвлекать читателей. |
Тем, кто хочет еще
Разрешите пользователям углубленно изучать тему вашей истории — встраивайте сторонний контент, добавляйте дополнительную информацию и ссылки на другие ресурсы.
Стратегическое встраивание контента
При грамотном использовании и качественной презентации встраиваемые элементы добавляют в историю дополнительную глубину. Дополняйте встраиваемые элементы полезным контентом, чтобы они становились неотъемлемой частью истории. Функциональность встраиваемых элементов может требовать интерактивности.
| ПРАВИЛЬНО | НЕПРАВИЛЬНО |
|---|---|
| Встраиваемый элемент на этой странице хорошо гармонирует с остальной частью макета. Заголовок, дата и фоновая графика помогают улучшить визуальное восприятие. | Из-за размещения на странице только встраиваемого элемента создается ощущение незавершенности, такой подход плохо интегрируется с остальной историей. |
Прикрепляйте дополнительный контент
Размещайте связанный контент во вложениях, чтобы делать свою веб-историю более простой и понятной. Таким образом, если читатели заинтересуются вашей историей и захотят узнать больше, они смогут сразу же углубиться в подробности. Читателям легче ориентироваться в истории, если к соответствующим страницам прикреплен дополнительный контент.
| ПРАВИЛЬНО | НЕПРАВИЛЬНО |
|---|---|
| | |
| Встраиваемый элемент на этой странице хорошо гармонирует с остальной частью макета. Заголовок, дата и фоновая графика помогают улучшить визуальное восприятие. | Из-за размещения на странице только встраиваемого элемента создается ощущение незавершенности, такой подход плохо интегрируется с остальной историей. |
Вложения хорошо подходят для длинных блоков текста, или, если ваша история содержит обзорное видео, вы можете включить полное видео в качестве вложения.
| ПРАВИЛЬНО |
|---|
| |
| Обзорное видео может быть полезным элементом AMP-истории. Вы можете прикрепить к истории полную версию видео, чтобы дать зрителям возможность ознакомиться с вашим контентом подробнее. |
Размещайте ссылки на новые места
Вы можете добавлять ссылки в любом месте страницы веб-истории. При нажатии на ссылку появляется всплывающая подсказка. Она сообщает пользователю, куда ведет ссылка, и позволяет ему подтвердить действие перед выходом из истории.
| ПРАВИЛЬНО | НЕПРАВИЛЬНО |
|---|---|
| Ссылки на этой странице четко обозначены и окружены тематическим контентом. Они не мешают навигации по истории. | Ссылки на этой странице полностью блокируют навигацию. Зрителям будет трудно перейти на предыдущую или следующую страницу. |
Стратегически продумывайте размер, местоположение и частоту размещения ваших ссылок. Чрезмерное количество нажимаемых элементов может усложнять навигацию и раздражать зрителей.
Создавайте код вручную или автоматически
Веб-истории можно писать вручную, а также создавать с помощью специальных инструментов.
Создание истории вручную подразумевает написание кода с нуля на основе AMP Framework. Чтобы начать работу, следуйте инструкциям по созданию первой веб-истории. После того как вы создали свою веб-историю, убедитесь, что код AMP корректно сформирован. Вы можете протестировать код в AMP-валидаторе. Для получения дополнительной информации ознакомьтесь с техническими сведениями о формате веб-историй.
-