Таймлайн: полируем внешний вид
Как сделать таймлайн таким, чтобы глазу было приятно, а мозгу удобно? Какие ошибки допускаются чаще всего? И что делать, если «все сломалось»?
В чём разбираемся
  • 1
    Что может испортить ваш таймлайн и как этого избежать.
  • 2
    Какие есть оформительские приемы.
  • 3
    Зачем и как вести читателя по таймлайну.
Ошибки при оформлении

Если вы вы имели дело с созданием текстово-визуального контента — например, карточек для социальных сетей или презентаций — то, возможно, в курсе основных правил оформления. Проверьте себя. Листайте примеры ниже и отвечайте на вопрос «Что тут не так?», сверяйтесь с комментарием к изображению.

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

Ошибки технические

Проблемы могут возникать не только из-за отсутствия дизайнерских навыков (хотя во многих случаях хватает и чутья), но и по другим причинам. Например, из-за технических особенностей сервиса, с помощью которого делается таймлайн. Или просто потому что кто-то забыл протестировать финальный результат.

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

Этот таймлайн сделан в уже упомянутом сервисе Timeline JS. Фотографии, которые вы встраиваете в него, должны быть где-то опубликованы. Если фото исчезли из источника, они пропадут и из таймлайна.
То же самое касается видео. В этом примере видео c youtube, которое было встроено в таймлайн, вероятно, удалили.
В этом случае google-документ, использованный для создания таймлайна, был, вероятно, удалён ¯\_(ツ)_/¯
А здесь другая ситуация: то, что было бесплатным — стало платным. Сервис Tiki-Tok сократил количество таймлайнов, которые можно создавать на бесплатном тарифе, до одного. Редакция не отследила этот момент. Извините, до свиданья.
Что же делать?
Такого рода проблемы лучше предвидеть на стадии создания. Особенно если вы делаете не проходную ленту, которая завтра потеряет актуальность, а вечнозеленый спецпроект, к которому можно будет обращаться и в будущем.
  • Прочитайте условия использования сервиса
    Вдруг узнаете, что все продукты, сделанные с его помощью, не хранятся больше года. Или превращаются в тыкву, если по ним никто не кликает в течение месяца.
  • Не используйте файлы с личных аккаунтов
    Таблицу для таймлайна создавайте и храните на корпоративном аккаунте, не на личном. И сотрудникам не разрешайте использовать личные аккаунты для создания публичного контента. Это не убережет от всех рисков, но от части — вполне.
Это значит (лять), что (лять) не с корпоративного гугла делали таблицу (лять), а с личного, который попал под лимит размера после блокировок (лять)
Оксана Силантьева
мультимедийный продюсер, комментирует пропавший мультимедийный модуль на сайте
  • Переопубликуйте фото у себя
    Если сервис встраивает только фотографии, которые где-то уже опубликованы — переопубликуйте их в том месте, которое находится под вашим контролем. И используйте на здоровье.
  • Храните в архиве исходники
    В вашей редакции ведь есть папка, где хранятся исходники опубликованных материалов? И время от времени контент это папки архивируется (в идеале на двух носителях)? Тогда все ок — есть если вдруг что-то сломается, все можно будет перезалить.
  • Ведите единую таблицу сервисов, которые используете для работы
    Заносите в нее ссылки на проекты, в которых используются вставки из этих сервисов. Храните логины и пароли от этих сервисов в одном месте.
  • Автономизируйтесь. По возможности
    Сервисы становятся платными. Контент и аккаунты удаляется. Генераторы таймлайнов закрываются или блокируют возможность просматривать сгенерированный контент с российских IP-адресов. Поэтому самый надёжный (но и самый дорогостоящий, требующий квалифицированных кадров и технических ресурсов) вариант — когда все свое, все у себя и все своими руками. Тогда созданный ваши медиа продукт никуда не денется! (если, конечно, никуда не денется само медиа)
Ошибки взаимодействия

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


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

Читателя по таймлайну важно вести — не стесняйтесь рассказывать и показывать, как взаимодействовать с продуктом: где начинать, как двигаться, где можно отойти в сторону и как потом вернуться.
Это только кажется, что фраза «Кликайте на стрелки, чтобы листать ленту времени» делает вашу публикацию «детсадовской». Реальное, кстати, возражение со стороны редактора. Такая фраза помогает сориентироваться пользователям, которые нечасто сталкиваются с интерактивным контентом.

Не нужно думать, что все интуитивно понятно. Кто-то из вашей аудитории, возможно, вообще никогда не встречал лент времени и не понимает, как ими пользоваться. Не стесняйтесь давать людям объяснения, пишите инструкции. Буквально: куда нажимать, как листать, как изменить масштаб. Неопытные пользователи будут благодарны, а продвинутые пропустят этот текст, не заметят.

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

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

Есть и другие варианты, с помощью которых создатели облегчают навигацию по таймлайну. Вот в этой ленте про рождение российских СМИ справа зафиксирована легенда с годами и месяцами — и независимого от того, где читатель находится прямо сейчас, он может легко переместиться в другой период с помощью этого списка. А вот иной вариант — таймлайн про историю музыки. Здесь в «легенду» (слева) вынесены не месяцы, годы или века, а наименования периодов. Она также зафиксирована и не исчезает, когда читатель начинает скролить.

ДОБАВИТЬ ВИДЕО
Различные способы упрощения навигации по таймлайну
Лайфхаки при оформлении

Мы не дадим исчерпывающий список оформительских приемов, но накидаем несколько вариантов «на поверхности», чтобы задать направление мысли. Лучше способ собирать такие приемы — много читать, смотреть и собирать собственную коллекцию примеров. Это называется «насмотренность». Она помогает развить и то самое дизайнерское чутье, благодаря которому люди без специального образования и навыков могут, посмотрев на продукт, сказать: «Тут что-то не так».

  • Помните, ваша задача — не «сделать красочно», а сделать «ясно, понятно». Не увлекайтесь шрифтами, цветами, фонами.
    01
  • Результатом труда должно стать то, что глазу приятно, а мозгу, голове и шее удобно и неутомительно.
    02
  • Чтобы избежать технических неполадок, тестируйте то, что получилось, и лишь затем выпускайте в мир.
    03
  • Постарайтесь не зависеть от того, над чем у вас нет контроля и власти, или хотя бы минимизируйте риски такой зависимости.
    04
  • Не стесняйтесь давать пользователю «инструкции по применению» вашего таймлайна.
    05
  • Повышайте насмотренность. Чем больше вы видите разных примеров, тем больше сможете освоить оформительских приемов.
    FIN