Переосмысление чтения в сети

Переосмысление чтения в сети

https://t.me/uxidesign

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


Захватывающее чтение

Я начну с конца. Вот короткое видео, в котором показано то, что нам удалось создать:


А здесь вы вживую можете посмотреть на готовый сайт.


Начало истории

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


Они хотели донести свои мысли визуальным интерактивным образом. Задача заключалась в том, чтобы создать интерактивные визуализации и сделать их понятными как для врачей и работников здравоохранения, так и для простой аудитории.


С самого начала мы знали, что хотим пойти путём интерактивного взаимодействия, но не акцентировать внимание на визуальной составляющей. Мы собирались взять текстовый контент The Atlantic и объединить его с современными цифровыми технологиями.


Вдохновение от 90-х

В начале сотрудничества с The Atlantic мы хотели больше узнать о том, что важно для их бизнеса и что важно для их читателей. После нескольких коротких встреч стало ясно - ЧТЕНИЕ их приоритет №1.


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

Первые браузеры Netscape и Mosaic (примерно 1993 год) - разработаны практически только для чтения контента и его распространения


Люди только читали и прокручивали страницы в браузере! Теперь ясно, что чтение и прокрутка (и кнопка «Назад») являются неотъемлемыми атрибутами веб-страницы.


В самом начале проекта мы решили сохранить естественный способ прокрутки и чтения документов. Мы также установили небольшой набор принципов проектирования, которые определяли чтение, как приоритет:

  • Графика должна помогать, а не быть заменой тексту.
  • Люди должны читать в своём собственном привычном темпе.
  • Использование привычной навигации и ссылок.


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


Сторителлинг в сети

Если вы быстро просмотрите новости и публикации крупных изданий, вы будете шокированы тем, как мало изменилось за последние 15 лет.


С помощью Internet Wayback Machine и изображения ниже вы можете сами увидеть, что я имею в виду. Помимо очевидных улучшений стиля, общий подход к информации остается неизменным. The New Yorker - далеко не единственные, это общая тенденция.

Вид обычных страниц сайта The New Yorker 2001 год (слева) и 2016 год (справа)


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


New York Times делает это своими интерактивными историями. Этот новый вид повествования в значительной степени помогает читателю вникать в содержание. Независимо от того, написана ли статья об авиакосмическом техническом прорыве или это освещение малоизвестной части планеты, визуальные эффекты в значительной степени помогают читателю разобраться в теме статьи.

Примеры современного сторителлинга от New York Times


Современные технологии, которые доступны каждому в интернете, дают нам захватывающие возможности оформления рассказов и статей, которых раньше мы не имели. Конечно же, мы были вдохновлены интерактивными историями и, вооружившись WebGL и 3D инструментами, решили сделать наш проект кинематографическим.


Кинематографический подход

Вместо того, чтобы создавать ряд интерактивных виджетов, встраиваемых в статью, мы решили создать интерактивный рассказ. Мы использовали WebGL для создания полноценной 3D среды, которая дала нам возможность рассказать историю с разных точек зрения.


Применение 3D позволило нам использовать привычные инструменты для создания фильмов, такие как камеры и сцены, и на протяжении всего нашего процесса проектирования мы использовали различные режимы рисования.


Раскадровка

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



Территориальная взаимосвязь

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


Стивен Кац (Steven Katz), автор книги по созданию фильмов «Film Directing Shot by Shot», пишет о важности управления пространственными стыковками. Он описывает это так:

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


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


Match cut

Вы наверняка не раз видели этот эффект. Match cut – монтаж с эффектом совпадения (совмещения). Монтаж выполняется таким образом, что объект в финале предыдущей сцены совпадает (или очень похож по внешнему виду или свойствам) с предметом в начале следующей сцены.



Визуализация данных

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


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


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


Объединяя всё вместе

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


Чтение

Изначально мы делали упор на текст и его прокрутку. Тесты пользователей показали, что это интуитивно понятно.


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


Использование кинематографических приёмов

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


Использование реальных данных

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


Надеемся, вам понравилась наша история. Будем вместе следить за развитием сторителлинга в этом году.