Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Лучшие практики по созданию успешной веб-истории

Веб-истории — это формат захватывающих историй, которые просматриваются путем перелистывания кадров и которыми можно с легкостью поделиться. Веб-истории создаются с помощью подмножества 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-валидаторе. Для получения дополнительной информации ознакомьтесь с техническими сведениями о формате веб-историй.