Изучение дизайна интерактивных статей путем синтеза теории из таких дисциплин, как образование, журналистика и визуализация.
https://distill.pub/2020/общение-с-интерактивными-статьями/
1: Примеры интерактивных статей со всего Интернета. Выберите статью для получения дополнительной информации.
ПРИСОЕДИНЕНИЕ
ОПУБЛИКОВАНО
DOI
11 сентября 2020 г.
Содержание
Интерактивные статьи: теория и практика
"Введение"
Интерактивные статьи: теория и практика
- Делаем системы игривыми
- Побуждение к саморефлексии
- Персонализирующее чтение
- Снижение когнитивной нагрузки
- Привлекайте и воодушевляйте более широкую аудиторию последними достижениями в области исследований
Проблемы создания интерактивов
"Жду с нетерпением"
Компьютеры изменили то, как люди общаются. Передача новостей, сообщений и идей происходит мгновенно. Можно услышать любой голос. На самом деле доступ к цифровым коммуникационным технологиям, таким как Интернет, настолько важен для повседневной жизни, что нарушение их правительством осуждается Советом по правам человека Организации Объединенных Наций.
[1]
. Но хотя технология распространения наших идей стремительно развивалась, интерфейсы в основном остались прежними.
Параллельно с развитием Интернета такие исследователи, как Алан Кей и Дуглас Энглбарт, работали над созданием технологий, которые расширили бы возможности людей и улучшили бы познание. Кей представил Dynabook
[2]
в руках детей по всему миру. Энглебарта, которого больше всего помнят за его «мать всех демонстраций», больше интересовала способность вычислений увеличивать человеческий интеллект.
[3]
. Нил Стивенсон написал спекулятивную фантастику, в которой представлял интерактивную бумагу, на которой можно было бы отображать видео и интерфейсы, и книги, которые могли бы учить и отвечать своим читателям.
[4]
.
Более поздние разработки (хотя и все еще исторические по стандартам персональных компьютеров) указывают на будущее, в котором компьютеры связаны между собой и помогают людям в принятии решений и общении с помощью богатой графики и интерактивных пользовательских интерфейсов.
[5]
. Хотя некоторые технологии получили широкое распространение, например гипертекст
[6]
, к сожалению, многие другие этого не сделали. Самые популярные издательские платформы, например WordPress и Medium, отдают приоритет социальным функциям и простоте использования, ограничивая при этом возможность авторов общаться с помощью динамических функций Интернета.
В духе предыдущих компьютерных технологий познания появился новый тип вычислительной среды связи, в которой используются методы активного чтения, чтобы сделать идеи более доступными для широкого круга людей. Эти интерактивные статьи основаны на долгой истории, начиная с Платона
[7]
к ФЭТ
[8]
к доступным объяснениям
[9]
. Было показано, что они более увлекательны, могут помочь улучшить запоминание и обучение, а также привлечь широкую читательскую аудиторию и признание, 1 однако мы не так уж много о них знаем.
В этой работе мы впервые связываем точки между интерактивными статьями, представленными в этом журнале, и такими публикациями, как The New York Times, и методами, теориями и эмпирическими оценками, предложенными академические исследователи в области образования, взаимодействия человека с компьютером, визуализации информации и цифровой журналистики. Мы покажем, как цифровые дизайнеры воплощают эти идеи в жизнь для создания интерактивных статей, которые помогают повысить уровень обучения и вовлеченности своих читателей по сравнению со статическими альтернативами.
Распространение исследованийЖурналистикаОбразованиеПолитика и принятие решений
Распространение исследований
Проведение новых исследований требует глубокого понимания и опыта в конкретной области. Достигнув этого, исследователи продолжают вносить новые знания, которые будущие исследователи могут использовать и развивать. Со временем это постоянное добавление новых знаний может накапливаться, способствуя тому, что некоторые называют исследовательским долгом. Не все являются экспертами во всех областях, и легко потерять перспективу и забыть о более широкой картине. Тем не менее исследования должны быть понятны многим. Интерактивные статьи могут быть использованы для обобщения последних достижений в различных областях исследований, а также для того, чтобы сделать их методы и результаты доступными и понятными для более широкой аудитории.
ВОЗМОЖНОСТИ
- Убрать долги по исследованиям, привлечь новых исследователей
- Сделайте более быстрый и четкий прогресс в исследованиях
- Нет четкой системы стимулов для исследователей
ВЫЗОВЫ
- Небольшое финансирование для распространения и коммуникации индивидуальных исследований
- Не рассматривается как законный исследовательский вклад (например, в область или карьеру)
- Название arrow_downwardПубликация или автор Теги Год «Интерфейс, который позволяет читателям контролировать, сколько информации они видят» Баски, КейсСнижение когнитивной нагрузки2018«Визуальное введение в машинное обучение»R2D3Персонализация чтения2015«Вы богаты? Этот опрос о доходах может изменить ваше представление о себе»The New York TimesPersonalizing Reading2019«Атака на дискриминацию с помощью более умного машинного обучения»Google ResearchРаспространение исследований 2016«Калькулятор выпивки: национальность, в которой вы пьете»BBCPPersonalizing Reading2017«Call for Proposals Winter/Spring 2019»The Parametric PressReduction Cognitive Load2019«Climate Spirals»Climate Lab BookConnecting People and Data2016«Coeffects: Context-Aware Programming Languages»Petricek, TomasResearch Dissemination2017«Colorized Math Equations»Better ExplainedReduction Cognitive Load2017«Complexity Explained»Manlio De Domenico, Hiroki SayamaResearch Dissemination2019«Cutthroatthroat» Игра»WiredОбъединение людей и данных, 2009 г. «Проектирование обучаемой машины (и обучение на ней») Google DesignMaking Systems Playful, 2018 г. «Earth Primer» Джинголд, Хаим Снижение когнитивной нагрузки, 2015 г. «Неумолимое потепление Земли устанавливает новый жестокий рекорд в 2017 г.» BloombergConnecting People and Data, 2018 г. «EconGraphs» Маклер, Крис stopherEducation2017«Эксперименты с почерком с нейронной сетью»DistillMaking Systems Playful2016«Explorable Explanations»Виктор, БретMaking Systems Playful2011«Обширные данные показывают наказание за распространение расизма для чернокожих мальчиков»The New York TimesConnecting People and Data2018«Узнайте, будет ли ваша работа автоматизирована »BloombergПерсонализированное чтение2017«Глобальная температура»НАСА Глобальное изменение климатаСоединяем людей и данные2020«Смерти от огнестрельного оружия в Америке»FiveThirtyEightСоединяем людей и данные2016«Как нарисовать круг? Мы проанализировали 100 000 рисунков, чтобы показать, как культура формирует наши инстинкты»КварцПодсказка к саморефлексии2017«Как работают глаза»Исследуемые объяснения Game JamУменьшение когнитивной нагрузки2018«Насколько жарче в вашем родном городе, чем когда вы родились»The New York TimesПерсонализированное чтение2018«Как Рецессия сформировала экономику, в 255 диаграммах» The New York Times Снижение когнитивной нагрузки 2014 г. «Как запомнить что-либо навсегда» Случай, NickyPrompting Self-Refelction 2018 г. «Как эффективно использовать T-SNE» DistillMaking Systems Playful2016 г. «How You Will Die» Flowing DataMaking Systems Playful2016«Как вы все, вы и вы, ребята, разговариваете»The New York TimesIntroduction2013«Человеческая местность»The PuddingPersonalizing Reading2018«Image Kernels»SetosaУменьшение когнитивной нагрузки2015«Лучше арендовать или купить»The New York TimesФормирование политики2014«Выпуск 01 : Наука и общество»The Parametric PressCritical Reflections2018«Это не ваше воображение. Лето становится жарче». The New York Times. Соединение людей и данных. 2017. «Давайте узнаем о волновых формах». The Pudding. Подробные документы»Бикрофт, УэстонСнижение когнитивной нагрузки2016«Притча о полигонах»Ви Харт, Ники КейсСоединение людей и данных2016«Квантовая страна»Энди Матушак, Майкл НильсенПодсказка к самоанализу2019«Научная коммуникация как последовательное искусство»Виктор, БретMaking Systems Playful2011«Should Prison Приговоры основаны на преступлениях, которые еще не были совершены»FiveThirtyEightMaking Systems Playful2015«Снег: лавина в Туннельном ручье»The New York TimesСоединение людей и данных2014«Эксперимент Джилленхола»The PuddingПодсказка к самоанализу2019«Миф о беспристрастной машине» »The Parametric PressCritical Reflections2019«The Uber Game»Financial TimesJournalism2017«The Atl as Of Redistricting»FiveThirtyEightPolicy Making2018«Руководство для начинающих по уменьшению размерности»VISxAI на IEEE VISMaking Systems Playful2018«Книга шейдеров»Patricio Gonzalez Vivo, Jen LoweEducation2015«The Fallen Of World War II»Halloran, NeilConnecting People and Data2015«To Build A Better Ballot»Case, NickyPolicy Making2016«Понимание UMAP»Google PAIRMaking Systems Playful2019«Visualizing Quaternions: An Exploration Video Series»Grant Sanderson, Ben EaterMaking Systems Playful2018«Что действительно согревает мир»BloombergJournalism2015«Who Will Be President»The New York TimesMaking Systems Playful2016«Кто выиграет президентство»FiveThirtyEightMaking Systems Playful2016«Почему такие вспышки, как коронавирус, распространяются в геометрической прогрессии и как «сгладить кривую»»The New York TimesIntroduction2013«Вы рисуете: как семейный доход предсказывает шансы детей в колледже»The New York TimesJournalism2015« Вы рисуете это: насколько серьезна эпидемия передозировки наркотиков» The New York TimesPrompting Sel f-Reflection2017«Ты рисуешь: что стало лучше или хуже во время президентства Обамы»The New York TimesПодсказка к самоанализу2017
Атака на дискриминацию с помощью более умного машинного обучения
[13]
Дополнение к традиционной исследовательской работе, в которой используются интерактивные визуализации, позволяющие читателям настраивать поведение модели машинного обучения и исследовать альтернативные справедливые стратегии для сценария предоставления кредита.
Коэффекты: контекстно-зависимые языки программирования
[14]
Кандидатская диссертация, которая вносит абстракцию языка программирования для понимания того, как программы получают доступ к контексту или среде, в которой они выполняются, и знакомит читателей с работой, используя два простых контекстно-зависимых языка с живыми демонстрациями в браузере.
[15]
Ускоренный курс по науке о сложных системах, созданный ведущими экспертами, практиками и студентами в этой области, с сопутствующими интерактивными песочницами для моделирования, управления и визуализации различных сложных систем.
2: Интерактивные статьи применимы к различным областям, таким как распространение исследований, журналистика, образование, политика и принятие решений.
Сегодня растет интерес к использованию интерактивных статей для общения, поскольку они предлагают уникальные возможности, помогающие людям изучать сложные идеи и вовлекаться в них, чего не хватает традиционным средствам массовой информации. После описания возможностей интерактивных статей мы приводим критические размышления о нашем собственном опыте масштабных интерактивных публикаций с открытым исходным кодом. В заключение мы обсудим практические проблемы и открытые направления исследований для создания, разработки и публикации интерактивных статей.
Этот стиль общения и платформы, которые его поддерживают, все еще находятся в зачаточном состоянии. Выбирая, где опубликовать эту работу, мы хотели, чтобы средство отражало сообщение. Такие журналы, как Distill, не только расширяют границы исследований в области машинного обучения, но и предлагают пространство для распространения новых интерфейсов. Эта работа связывает воедино теорию и практику создания и публикации интерактивных статей. Он демонстрирует силу, которой обладает среда для предоставления новых репрезентаций и взаимодействий, чтобы сделать системы и идеи более доступными для широкой аудитории.
Соединение людей и данных
Интерактивные статьи используют и соединяют многие типы медиа, от статического текста и изображений до фильмов и анимации. Но в отличие от этих существующих форм, они также используют методы взаимодействия, такие как детали по запросу, выявление убеждений, игра, а также модели и симуляции для улучшения коммуникации.
В то время как пространство возможных дизайнов слишком велико, чтобы решить его с помощью универсальных руководств, соединяя методы, используемые в этих статьях, с лежащими в их основе теориями, представленными в различных областях исследований, мы обеспечиваем недостающую основу для использования дизайнерами. при рассмотрении широкого пространства взаимодействий, которые могут быть добавлены к статье, созданной в цифровом формате.
Мы опираемся на корпус из более чем шестидесяти интерактивных статей, чтобы подчеркнуть широту доступных методов и проанализировать, как их авторы использовали преимущества цифровой среды для улучшения опыта чтения по одному или нескольким параметрам, например, за счет снижения общей когнитивной нагрузки, привития положительный эффект или улучшение запоминания информации.
1: сортируемый список интерактивных статей, которые мы обсуждаем в этой работе.
Поскольку интерактивный контент создается различными сообществами, этот носитель имеет много разных названий и еще не определился ни в стандартизированном формате, ни в определении. 2 Исследователи предложили такие артефакты, как поддающийся исследованию анализ мультивселенной.
, объяснимо
[26]
и исследования
[27]
более эффективно распространять свою работу, доводить результаты до сведения общественности и устранять задолженность по исследованиям.
[28]
. В отделах новостей дата-журналисты, разработчики и дизайнеры работают вместе, чтобы сделать сложные новости и журналистские расследования понятными и увлекательными с помощью интерактивных историй.
[29]
. Преподаватели используют интерактивные учебники в качестве альтернативного формата обучения, чтобы дать учащимся практический опыт работы с учебным материалом.
[30]
Помимо этих групп, другие, такие как ученые, разработчики игр, веб-разработчики и дизайнеры, сочетают навыки редактирования, дизайна и программирования для создания и публикации пояснений для изучения.
[31]
.
, интерактивная фантастика
[9]
, интерактивная нехудожественная литература
[32]
, активные эссе
[33]
и интерактивные игры
[34]
. Хотя все они немного различаются по своему техническому подходу и целевой аудитории, все они в значительной степени используют интерактивность современной сети.
[35]
Мы сосредоточимся на пяти уникальных возможностях интерактивных статей, перечисленных ниже. Наряду с этим обсуждением представлены встроенные видеоролики и примеры интерактивной графики для демонстрации конкретных методов.
Соединение людей и данных.
Сделайте данные удобными для работы. Счастливые читатели — это заинтересованные читатели.
Делаем системы игривыми.
Запускайте интерактивные симуляции прямо в браузере. Настройка не требуется.
Побуждение к саморефлексии.
Помогите читателям учиться, попросив их поразмышлять в среде с низким давлением.
Персонализация чтения.
Позвольте читателям выбирать контент, соответствующий их собственному опыту.
Снижение когнитивной нагрузки.
Используйте эффективные представления, чтобы сделать сложные темы более интуитивно понятными.
Как хорошо известно визуальным дизайнерам, и как эмпирически подтвердили исследователи журналистики
Делаем системы игривыми
, аудитория, которая находит контент эстетически приятным, с большей вероятностью положительно отнесется к нему. Это, в свою очередь, означает, что люди будут тратить больше времени на изучение контента, что в конечном итоге приведет к улучшению результатов обучения. Хотя вовлеченность сама по себе не может быть конечной целью большинства исследовательских коммуникаций, способность влиять как на отношение аудитории, так и на количество затрачиваемого времени является полезным рычагом для улучшения обучения: из исследований в области образования мы знаем, что как затраченное время,
[36]
и эмоции
[37]
прогнозируют результаты обучения.
[38]
Анимации также можно использовать для повышения вовлеченности.
. Хотя среди исследователей ведутся споры о том, могут ли анимации в целом более эффективно передавать ту же информацию по сравнению с хорошо разработанной статической графикой.
[39]
, было показано, что анимация особенно эффективна для передачи информации о переходах между состояниями.
[40]
, неопределенность
[41]
, причинность
[42]
, и построение рассказов
[43]
. Классическим примером этого является исследование движения Мейбриджа.
[44]
это можно увидеть в «3»: в то время как серия неподвижных изображений может быть более эффективной для ответа на конкретные вопросы, такие как «Отрывает ли лошадь все четыре ноги от земли во время бега?» просмотр анимации в замедленном темпе дает зрителю гораздо более интуитивное представление о том, как она работает. Более современный пример можно найти в отчетах OpenAI об их агентах в прятки.
[45]
. Анимация здесь мгновенно дает зрителю представление о том, как агенты работают в своей среде.
[46]
Несколько представлений дают несколько точек зрения.
Дополняющие представления, такие как управляемая пользователем анимация и небольшие мультипликаторы, помогают заинтересовать и связать читателей.
В 1878 году Эдверд Мейбридж разрешил горячо обсуждаемый вопрос Леланда Стэнфорда о том, отрываются ли все четыре ноги лошади от земли во время рыси, используя несколько камер для захвата движения на покадровых фотографиях.
play_circle_outline
«3»: нажмите кнопку воспроизведения или прокрутите видеокадры, чтобы просмотреть и управлять анимацией.
Пассивно анимация может использоваться для придания драматизма изображению, отображающему важную информацию, но в противном случае читатели могут счесть его сухим. Научные данные, которые по своей природе меняются во времени, могут быть показаны с использованием анимации, чтобы более тесно связать зрителей с исходными данными, по сравнению с просмотром абстрактного статического представления. Например, Эд Хокинс разработал Климатические спирали, которые показывают изменение средней глобальной температуры с течением времени.
. Эта презентация данных вызвала такой резонанс у широкой аудитории, что ее продемонстрировали на церемонии открытия Олимпийских игр в Рио-де-Жанейро в 2016 году. На самом деле, многие другие визуализации изменения климата в том же наборе данных используют анимацию, чтобы создать напряжение и подчеркнуть недавний всплеск глобальных температур.
[47]
«1»: в «Обширные данные показывают, что за расизм наказывают чернокожих мальчиков»
[16, 48, 49, 50]
.
, использование юнит-анимации несет в себе основную визуализацию истории, чтобы подчеркнуть изменение жизни реальных людей с течением времени.
[51]
Воспроизводится ПРЕДПРОСМОТР, нажмите, чтобы воспроизвести ПОЛНОЕ ВИДЕО.
Добавляя вариации с течением времени, авторы получают доступ к новому измерению для кодирования информации и еще более широкому пространству дизайна для работы. Рассмотрим анимированную графику в статье The New York Times «Обширные данные показывают, что Расизм для черных мальчиков», в котором показаны экономические результаты для 10 000 мужчин, выросших в богатых семьях.
. Хотя существует множество способов, которыми одни и те же данные можно было бы передать более кратко, используя статическую визуализацию.
[51]
, используя анимацию, авторы смогли разработать модульную визуализацию, в которой каждая показанная точка данных представляет человека, напоминая читателям, что данные в этой истории касались жизни реальных людей.
[52]
Визуализация юнитов также использовалась, чтобы вызвать сочувствие у читателей в других работах, посвященных мрачным темам, таким как смерть от огнестрельного оружия.
и гибель солдат на войне
[53]
. Было показано, что использование глифов в форме человека (в отличие от абстрактных символов, таких как круги или квадраты) не вызывает дополнительных эмпатических реакций.
[54]
, но включение реальных фотографий людей помогает читателям заинтересоваться, запомнить
[55]
, и сообщать о сложных комплексных явлениях
[56, 57]
с помощью визуализаций. Коррелл утверждает, что большая часть силы визуализации исходит из абстракции, но квантование блокирует эмпатию.
[58]
. Вместо этого он предлагает антропоморфизировать данные, заимствуя журналистские и риторические приемы для создания новых дизайнов или вмешательств, чтобы вызвать у читателей сочувствие при просмотре визуализаций.
[59]
Что касается формата интерактивных статей, в сообществе журналистов данных продолжаются споры о том, являются ли статьи, использующие графику на основе прокрутки (прокрутка), более эффективными, чем те, в которых используется пошаговая графика (слайд-шоу). МакКенна и др.
[59, 60]
.
обнаружили, что участники их исследования в основном предпочитали отображать контент с пошаговой навигацией или прокруткой, а не с традиционными статическими статьями, но не обнаружили существенной разницы в вовлеченности между двумя макетами. В родственной работе Zhi et al. обнаружил, что производительность при выполнении задач на понимание была выше в макетах слайд-шоу, чем в макетах на основе вертикальной прокрутки.
[61]
«2»: В «Капитализме-головорезе: Игра»
[62]
.
, читатели играют роль командира пиратов, давая им уникальный взгляд на экономику, которая привела к росту пиратства у берегов Сомали.
[63]
Воспроизводится ПРЕДПРОСМОТР, нажмите, чтобы воспроизвести ПОЛНОЕ ВИДЕО.
Использование игр для передачи информации изучалось в областях журналистики.
и образование
[35]
. Дизайнеры новостных игр используют их, чтобы помочь читателям развить сочувствие к своей теме, например, в «Uber Game» The Financial Times.
[64]
, и объяснить сложные системы, состоящие из нескольких частей, например, в Wired «Cutthroat Capitalism: The Game».
[18]
. Было показано, что в образовательных учреждениях использование игр мотивирует учащихся при сохранении или улучшении результатов обучения.
[63]
По мере того, как текст переходит от нарративов, ориентированных на автора, к повествованиям, в большей степени ориентированным на читателя.
[65]
.
, опыт чтения становится ближе к игре. Например, одобренное критиками объяснительное объяснение «Притча о многоугольниках» ставит игру в центр истории, позволяя читателю вручную запустить алгоритм, который позже моделируется в статье, чтобы продемонстрировать, как популяция людей с небольшими личными предубеждениями против разнообразия ведет к социальной сегрегации
[66]
Интерактивные статьи используют базовую вычислительную инфраструктуру, позволяя авторам редактировать вычислительные процессы, происходящие на странице. Этот доступ к вычислениям позволяет интерактивным статьям вовлекать читателей в опыт, которого они не могли бы получить с помощью традиционных медиа. Например, в «Рисование динамических визуализаций» Виктор демонстрирует, как интерактивная визуализация может позволить читателям составить интуитивное представление о поведении системы, что приводит к принципиально другому пониманию лежащей в основе системы по сравнению с рассмотрением набора статических уравнений.
[67]
.
Побуждение к самоанализу
. В этих статьях используется активное обучение и чтение в сочетании с критическим мышлением.
[68]
чтобы помочь различным группам людей учиться и исследовать, используя изолированные модели и симуляции
[69]
Сложные системы часто требуют обширной настройки для обеспечения надлежащего изучения: проведение научных экспериментов, обучение моделей машинного обучения, моделирование социальных явлений, обработка сложной математики и исследование недавних политических событий — все это требует настройки сложных программных пакетов, прежде чем пользователь сможет взаимодействовать с системой. системы вообще, даже просто для настройки одного параметра. Этот входной барьер может удерживать людей от участия в сложных темах или явно мешать людям, у которых нет необходимых ресурсов, например, компьютерного оборудования для интенсивных задач машинного обучения. Интерактивные статьи резко снижают эти барьеры.
[9]
.
Наука, использующая физические и вычислительные эксперименты, требует систематического контроля и изменения параметров, чтобы наблюдать их влияние на моделируемую систему. В исследованиях распространение обычно осуществляется через статические документы, где различные цифры показывают и сравнивают влияние различных конкретных параметров. Тем не менее, были предприняты усилия по использованию интерактивности в академических публикациях.
. Переосмысление исследовательской работы с интерактивной графикой
[26]
, как исследования
[70]
, или как исследуемый анализ мультивселенной
[28]
, дает читателям контроль над отчетом о результатах исследования и показывает большие перспективы, помогая читателям как усвоить новые идеи, так и узнать о существующих областях, которые построены на грудах исследовательских долгов.
[26]
Помимо предоставления статистических данных, интерактивные статьи чрезвычайно эффективны, когда изучаемые системы могут быть смоделированы или смоделированы в режиме реального времени с интерактивными параметрами без предварительной настройки, например песочницы в браузере. Рассмотрим пример в «4» симуляции Boids, которая моделирует, как птицы собираются вместе. Такие сложные системы имеют множество различных параметров, которые изменяют результирующее моделирование. Эти симуляции песочницы позволяют читателям играть с параметрами, чтобы увидеть их эффект, не беспокоясь о технических накладных расходах или других экспериментальных последствиях.
[29]
.
Взаимодействуйте с живыми симуляциями — настройка не требуется.
Эта визуализация Boids моделирует движение стаи птиц и предоставляет параметры, которыми читатель может управлять, чтобы изменить поведение симуляции.
СЧЕТЧИК БОИДОВ
РАЗДЕЛИТЕЛЬНОЕ РАССТОЯНИЕ
РАССТОЯНИЕ ВЫРАВНИВАНИЯ
РАССТОЯНИЕ СОЕДИНЕНИЯ
РАЗДЕЛИТЕЛЬНАЯ СИЛА
СИЛА ВЫРАВНИВАНИЯ
СИЛА СПЛОЧЕНИЯ
«4»: вверху перетащите ползунок, чтобы изменить количество боидов в симуляции. Внизу настройте различные параметры, чтобы найти интересные конфигурации.
Это выдающийся шаблон дизайна в интерактивных статьях, и существует множество примеров различной сложности. Как ты умрешь визуально моделирует среднюю продолжительность жизни разных групп людей, где читатель может выбрать пол, расу и возраст человека.
. «О физике частиц» позволяет читателям экспериментировать с ускорением различных частиц с помощью электрических и магнитных полей, чтобы построить интуитивное представление об основах электромагнетизма, таких как сила Лоренца и уравнения Максвелла — эксперименты, поддерживающие эти моделирования, не могут быть выполнены без многомиллионного оборудования.
[71]
. «Должны ли приговоры к тюремному заключению основываться на преступлениях, которые еще не были совершены?» показывает результат расчета оценок риска рецидивизма, когда читатели настраивают пороговые значения для определения того, кто получит условно-досрочное освобождение.
[72]
«3»: В «Обучаемых машинах»
[73]
.
, читатель использует свою собственную живую видеокамеру для обучения классификатора изображений с машинным обучением в браузере без каких-либо дополнительных вычислительных ресурсов.
[74]
Воспроизводится ПРЕДПРОСМОТР, нажмите, чтобы воспроизвести ПОЛНОЕ ВИДЕО.
Распространению современных методов машинного обучения способствовали интерактивные модели и симуляции. Три статьи «Как эффективно использовать t-SNE»
, «Руководство для начинающих по уменьшению размерности»
[75]
и «Понимание UMAP»
[76]
показать эффект, который гиперпараметры и различные методы уменьшения размерности оказывают на создание низкоразмерных вложений многомерных данных. Популярный подход — продемонстрировать, как модели машинного обучения работают с моделями в браузере.
[77]
, например, позволяя читателям использовать свою собственную видеокамеру в качестве входных данных для модели классификации изображений.
[78]
или почерк в качестве входных данных для модели прогнозирования инсульта
[74]
. Другие примеры предназначены для технических читателей, которые хотят узнать о конкретных концепциях глубокого обучения. Здесь интерфейсы позволяют читателям выбирать гиперпараметры модели, наборы данных и процедуры обучения, которые после выбора визуализируют процесс обучения и внутренние компоненты модели для проверки эффекта изменения конфигурации модели.
[79]
Интерактивные статьи обычно сообщают об одной идее или концепции, используя несколько представлений. Одна и та же информация, представленная в разных формах, может иметь разное значение. Например, в математике часто один объект имеет и алгебраическое, и геометрическое представление. Ярким примером этого является определение круга
[80, 81]
.
. Оба полезны, информируют друг друга и ведут к разным способам мышления. Примеры интерактивных статей, демонстрирующих это, включают освещение политических выборов в различных публикациях в СМИ, в которых одни и те же результаты разбиваются по нескольким параметрам, например, по демографическим данным избирателей, географическому местоположению и исторической перспективе.
[82]
Мультимедийный принцип гласит, что люди лучше учатся на словах и картинках, чем на одних только словах или картинках.
[83, 84, 85]
.
, так как люди могут обрабатывать информацию как через зрительный канал, так и через слуховой канал одновременно. Популярные создатели видео, такие как 3Blue1Brown
[86]
и грунтовка
[87]
проиллюстрируйте эти принципы, используя богатую анимацию и одновременное повествование, чтобы разбить сложные темы. Эти видеоролики дополнительно используют принцип избыточности, включая дополнительную информацию в повествование и в графику, а не повторяя одну и ту же информацию в обоих каналах.
[88]
«4»: В «Визуализации кватернионов»
[89]
.
, зритель может управлять интерактивным видео, в то время как повествование продолжается в фоновом режиме.
[90]
Воспроизводится ПРЕДПРОСМОТР, нажмите, чтобы воспроизвести ПОЛНОЕ ВИДЕО.
Хотя эти видео хвалят за доступность и богатую экспозицию, они не интерактивны. Одним из радикальных расширений традиционного видеоконтента также является включение пользовательского ввода в видео во время воспроизведения повествования. Серия этих интерактивных видеороликов на тему «Визуализация кватернионов» позволяет читателю слушать повествование о живой анимации на экране, но в любой момент зритель может взять под контроль видео и управлять анимацией и графикой, одновременно слушая повествование.
Использование нескольких представлений позволяет читателю увидеть разные абстракции одной и той же идеи. Как только они становятся знакомыми и известными, автор может создавать интерфейсы из нескольких представлений и позволять читателям взаимодействовать с ними одновременно, что в конечном итоге приводит к интерактивному опыту, демонстрирующему мощь вычислительных средств коммуникации. Далее мы обсудим такой опыт, когда интерактивные статьи изменили общение и обучение, сделав доступными живые модели и симуляции сложных систем и явлений.
[90]
.
Попросить учащегося подумать над материалом, который он изучает, и объяснить его самому себе — метод обучения, называемый самообъяснением, — как известно, оказывает положительное влияние на результаты обучения.
Персонализация чтения
. Предполагается, что путем создания объяснений и уточнения их по мере получения новой информации учащийся будет больше вовлечен в процессы, которые он изучает.
[91]
. При написании для интерактивной среды могут быть включены компоненты, которые побуждают читателей делать предположения или размышлять о материале и побуждают их к самообъяснению.
[92]
Хотя эти подсказки могут принимать форму ввода текста или других стандартных виджетов ввода, один из наиболее ярких примеров этого метода, используемого на практике, взят из Нью-Йорк Таймс визуализаций «Ты рисуешь это».
[93]
.
. В этих визуализациях читателям предлагается завершить линию тренда на графике, заставляя их генерировать объяснение, основанное на их текущих убеждениях, почему, по их мнению, тренд может двигаться в определенном направлении. Только после того, как читатели сделают свой прогноз, им будут показаны фактические данные. Ким и др. показали, что использование визуализаций в качестве подсказки является эффективным способом побудить читателей заниматься самообъяснением и улучшить их запоминание информации.
[17, 94, 95]
. «5» показывает одну из этих визуализаций выбросов CO2 при сжигании ископаемого топлива. После щелчка и перетаскивания, чтобы угадать тенденцию, ваше предположение будет сравниваться с фактическими данными.
[93]
Полная тенденция выбросов CO2 от сжигания ископаемого топлива.
Предоставление читателю возможности сначала догадаться о данных, а затем показ только основной истины бросает вызов прежним убеждениям читателя и, как было показано, улучшает его запоминание информации.
Сделайте предположение для каждого года до 2014 года, чтобы выявить истинную тенденцию.
195019601970198019902000201001,0002,0003,0004,0005,0006,0007,0008,0009,00010,000
Измеряется в метрических тоннах CO2.
«5»: нажмите и перетащите, чтобы угадать тренд данных с течением времени. После этого будут раскрыты реальные данные.
, читатели должны напечатать имена знаменитостей со сложной орфографией. После отправки предположения визуализация показывает запись читателя по сравнению со всеми остальными, масштабированную по частоте различных вариантов написания.
[96]
Воспроизводится ПРЕДПРОСМОТР, нажмите, чтобы воспроизвести ПОЛНОЕ ВИДЕО.
В случае «You Draw It» читателям также были показаны прогнозы, сделанные другими, что добавило к опыту элемент социального сравнения. Было показано, что эта дополнительная социальная информация не обязательно эффективна для улучшения памяти.
. Однако можно предположить, что этот социальный аспект может иметь и другие преимущества, такие как повышение вовлеченности читателей, из-за популярности недавних визуальных историй, использующих этот метод, например, в «Эксперименте Джилленхола» The Pudding.
[97]
и Quartz «Как нарисовать круг?»
[96]
Побуждение читателей вспомнить ранее представленный материал, например, с помощью викторин, может быть эффективным способом улучшить их способность вспоминать его в будущем.
[98]
.
. Это результат когнитивной психологии, известный как эффект тестирования.
[99]
, может использоваться авторами, пишущими для интерактивной среды
[100]
. В то время как тестирование может вызвать у многих стрессовые образовательные переживания, викторины, включенные в веб-статьи, могут быть низкими ставками: нет необходимости записывать результаты или оценивать читателей. Эффект усиливается, если участникам викторины предоставляется обратная связь, например, путем предоставления правильного ответа после того, как пользователь записал свой ответ.
[101]
«6»: В «Как запомнить что-нибудь навсегда»
[102]
.
, читатели используют интервальные повторения, чтобы узнать об интервальных повторениях.
[103]
Воспроизводится ПРЕДПРОСМОТР, нажмите, чтобы воспроизвести ПОЛНОЕ ВИДЕО.
Преимущества эффекта тестирования могут быть дополнительно усилены, если тестирование повторяется в течение определенного периода времени.
, при условии, что читатели готовы участвовать в этом процессе. Идея интервального повторения была популярной основой для приложений для наращивания памяти, например, в системе флэш-карт Anki. Совсем недавно авторы экспериментировали со встраиванием интервальных повторений непосредственно в свои веб-письма.
[104]
, предоставляя заинтересованным читателям возможность легко подписаться на повторную программу тестирования соответствующего материала.
[103, 105]
Персонализация контента — автоматическое изменение текста и мультимедиа на основе индивидуальных характеристик или данных читателя (например, демографических данных или местоположения) — это метод, который, как было показано, повышает вовлеченность и обучаемость читателей.
Снижение когнитивной нагрузки
и поддерживать изменение поведения
[106]
. Система PersaLog предоставляет разработчикам инструменты для создания персонализированного контента и представляет рекомендации по персонализации, основанные на исследованиях пользователей, проведенных практикующими журналистами.
[107]
. Другая работа показала, что «персонализированные пространственные аналогии», представляющие измерения расстояний в регионах, с которыми читатели географически знакомы, помогают людям более конкретно понимать новые измерения расстояний в новостях.
[108]
«7»: В «Насколько жарче ваш родной город, чем когда вы родились?»
[109]
.
, читатель вводит свое место рождения и год рождения, и ему показывают несколько визуализаций, описывающих влияние климата на его родной город.
[110]
Воспроизводится ПРЕДПРОСМОТР, нажмите, чтобы воспроизвести ПОЛНОЕ ВИДЕО.
Сама по себе персонализация также использовалась в качестве отличительной черты множества интерактивных статей. Оба «Насколько жарче ваш родной город, чем когда вы родились?»
и «Человеческая местность»
[110]
использовать местоположение читателя, чтобы вести истории, связанные с изменением климата и плотностью населения соответственно. В других примерах требуется явный вклад читателя, например, история, которая визуализирует собственный капитал читателя, чтобы бросить вызов предположениям читателя, богаты они или нет (относительно большей части населения).
[111]
или предсказать принадлежность читателя к политической партии
[112]
. Другим примером является интерактивная диаграмма рассеяния, представленная в статье «Узнайте, будет ли ваша работа автоматизирована».
[113]
. В этой визуализации профессии нанесены на график, чтобы определить вероятность их автоматизации в зависимости от их среднегодовой заработной платы. Статья призывает читателей использовать строку поиска, чтобы ввести свою профессию, чтобы выделить ее среди других.
[114]
Интерактивный носитель может предложить читателям опыт, отличный от статического линейного текста. Нелинейные истории, в которых читатель может выбрать свой собственный путь по контенту, могут обеспечить более персонализированный опыт и сосредоточиться на областях, представляющих интерес для пользователя.
. Например, BBC использовала эту технику как в онлайн-статьях,
[33]
и в недавнем выпуске «Клик»
[115]
, новостная телевизионная программа, посвященная технологиям. Нелинейные истории представляют собой проблемы для авторов, поскольку они должны учитывать множество возможных путей прохождения контента и учитывать различные возможные переживания, которые аудитория может получить, следуя различным направлениям.
[116]
«8»: В «Квантовой стране»
, интерактивный учебник использует интервальные повторения и позволяет читателю зарегистрироваться и сохранить свой прогресс при чтении плотного материала и математических понятий с течением времени.
[105]
Воспроизводится ПРЕДПРОСМОТР, нажмите, чтобы воспроизвести ПОЛНОЕ ВИДЕО.
Еще одна техника, часто используемая в интерактивных статьях, — это сегментация контента на небольшие фрагменты, которые можно читать между другой графикой или рядом с ней. Хотя мы уже обсуждали теорию когнитивной нагрузки, теорию сегментации, идею о том, что сложные уроки разбиваются на более мелкие части размером с бит.
, также поддерживает персонализацию в интерактивных статьях. Предоставление читателю возможности воспроизводить, приостанавливать и пролистывать содержимое позволяет читателю перемещаться со своей собственной скоростью, понимая информацию со скоростью, которая лучше всего подходит для него. Сегментация также задействует основные процессы обработки информации читателем, не перегружая их когнитивную систему.
[117]
Было проведено множество исследований, показывающих, что учащиеся работают лучше, когда информация сегментирована, будь то только в анимации.
[117]
.
или в интерфейсе с текстовыми описаниями
[118]
. Отличным примером использования сегментации и анимации для персонализации доставки контента является «Визуальное введение в машинное обучение», в котором представлены фундаментальные концепции машинного обучения небольшими частями, а один набор данных преобразуется в обученную модель машинного обучения.
[119]
. Развивая эту идею, в «Quantum Country», интерактивном учебнике, посвященном квантовым вычислениям, авторы внедрили систему учетных записей пользователей, позволяющую читателям сохранять свою позицию в тексте и потреблять контент в своем собственном темпе.
[120]
. Эта книга также использует интерактивную среду, используя интервальные повторения, которые помогают улучшить память.
[105]
Авторы должны калибровать детали обсуждения идей и содержания в соответствии с опытом и интересом своих читателей, чтобы не перегружать их. Когда темы становятся многогранными и сложными, необходимо найти баланс между общим обзором темы и ее деталями более низкого уровня. Один из методов взаимодействия, используемый для предотвращения когнитивной перегрузки читателя, — это «подробности по запросу».
ВИЗУАЛИЗАЦИЯ ДАННЫХ
Детали по запросу стали вездесущим шаблоном проектирования. Например, современные операционные системы предлагают извлекать словарные определения при выделении слова. Применительно к визуализации этот метод позволяет пользователям выбирать части набора данных для более подробного отображения, сохраняя при этом общий обзор. Это особенно полезно, когда изменение представления не требуется, так что пользователи могут проверять интересующие элементы по пунктам в контексте целого.
. Ниже мы выделяем области, в которых было успешно применено подробное описание по запросу для уменьшения количества информации, представленной в интерфейсе одновременно.
[121]
Подробная информация по запросу является основой визуализации информации и завершает основополагающую мантру визуального поиска информации: «Сначала обзор, масштабирование и фильтрация, а затем подробные сведения по запросу»
ИЛЛЮСТРАЦИЯ
. Успешная визуализация не только обеспечивает базовые представления и методы для этих трех шагов, но и устраняет пробелы между ними.
[122]
. На практике закрепившийся стандарт предоставления сведений по запросу в визуализации данных проявляется в виде всплывающей подсказки, обычно вызываемой при наведении курсора, которая представляет дополнительную информацию в виде наложения. Учитывая, что наборы данных часто содержат несколько атрибутов, всплывающие подсказки могут отображать другие атрибуты, которые в настоящее время не закодированы визуально.
[123]
, например, карта в «7», которая показывает, где записаны разные типы пения птиц и как они звучат.
[124]
Мультимодальные детали по запросу.
Выберите кружок ниже, чтобы вызвать запись пения птиц в полевых условиях.
«6»: Щелкните любую точку, чтобы прослушать чириканье другой птицы.
Детали по запросу также используются в иллюстрациях, интерактивных учебниках и музейных экспонатах, где можно выбрать выделенные сегменты фигуры для отображения дополнительной информации о конкретном сегменте. Например, в Как работает глаз? читатели могут выбирать сегменты анатомической схемы человеческого глаза, чтобы больше узнать об определенных областях, например о палочках и колбочках.
МАТЕМАТИЧЕСКИЕ ОБОЗНАЧЕНИЯ
. Другой пример — «Earth Primer», интерактивный учебник для планшетов, который позволяет читателям исследовать недра, поверхность и биомы Земли.
[125]
. Каждая иллюстрация содержит сегменты, которые читатель может коснуться, чтобы изучить и изучить глубже. «6» демонстрирует это, указывая на определенные области в машинных изображениях.
[126]
чтобы помочь людям распознать поддельные изображения.
[127, 128]
Что выдает машинное изображение?
Интерактивность на иллюстрациях может помочь людям получить больше контекста вокруг определенных объектов, которые могут не иметь четких и разделимых границ.
Выберите регион для получения дополнительной информации.
«7»: выберите одно из 4 изображений, созданных машиной, и проведите кистью по круглым выноскам, чтобы отобразить короткое сообщение о каждом регионе. Сгенерированные изображения из
Формальная математика, исторически статическая среда, может извлечь выгоду из подробностей по запросу, например, чтобы разъяснить читателю интуитивное представление о конкретном алгебраическом термине или представить геометрическую интерпретацию уравнения. Например, в Раскрашенных математических уравнениях уравнение преобразования Фурье представлено как в математической записи, так и в обычном тексте, но они связаны посредством наведения курсора, который выделяет, какой термин в уравнении соответствует какому слову в тексте.
[127, 128]
.
ТЕКСТ
. Другим примером, который визуализирует математику и вычисления, является учебное пособие «Ядра изображения», где читатель может навести указатель мыши на реальное изображение и наблюдать эффект и точные вычисления для применения фильтра к изображению.
[129]
. Эта операция, называемая сверткой, лежит в основе архитектур сверточных нейронных сетей, которые недавно привели к прогрессу в области машинного обучения. Вместо того, чтобы записывать длинные арифметические суммы, интерфейс позволяет читателям быстро увидеть условия операции суммирования и вывод. В «8» показано одно из уравнений Максвелла. Нажмите две кнопки, чтобы открыть или напомнить себе, что представляют собой каждая нотация и переменная.
[130]
Улучшение математического дизайна с помощью аннотаций и интерактивности.
Работа с уравнениями требует хорошей оперативной памяти. Дополнительная интерактивность может помочь людям запомнить определенные обозначения и определения переменных только при необходимости.
Переключить нотацию Переключить переменные
«8»: Нажмите, чтобы показать или напомнить себе, что представляет каждая метка записи или переменная в уравнении.
Текстовые документы и другие длинные текстовые носители, хотя и не столь распространены, также экспериментировали с тем, чтобы позволить читателям выбирать переменный уровень детализации для чтения. Эта идея была исследована еще в 1960-х годах в StretchText, функции гипертекста, которая позволяет читателю раскрыть более описательное или исчерпывающее объяснение чего-либо, расширяя или сокращая содержимое на месте.
ПРОСМОТР КОНТЕНТА
. Эта идея всплыла в более поздних примерах, включая «Документы с переменным уровнем детализации».
[131]
, докторская диссертация превратилась в интерактивную статью
[132]
, а также запрос предложений от The Parametric Press
[14]
. Одной из проблем, ограничивающих внедрение этой техники, является то, что на авторов ложится бремя написания нескольких версий их контента. Например, перетащите ползунок в «9», чтобы прочитать описание универсальной теоремы приближения с возрастающим уровнем детализации. Другие примеры подробностей по запросу для текста, например приложение в документации по коду, см. в этой небольшой коллекции примеров.
[133]
Теорема универсального приближения в 3-х уровнях детализации.
[134]
.
Читатели приходят с разным опытом. Что, если бы наш контент можно было адаптировать к их уровню знаний по определенным темам?
ИЛЛЮСТРАТИВНЫЙ
ТОЧНЫЙ
Нейронные сети могут аппроксимировать любую существующую функцию. Однако у нас нет гарантированного способа получить такую нейронную сеть для каждой функции.
«9»: перетащите ползунок, чтобы отобразить утверждение теоремы с возрастающим уровнем детализации.
Детали по запросу также можно использовать в качестве метода предварительного просмотра контента без необходимости другого взаимодействия или изменения представления. Например, при наведении на гиперссылку в Википедии показывается карточка предварительного просмотра, которая может содержать изображение и краткое описание; это дает читателям быстрый предварительный просмотр темы без перехода по ссылке и загрузки новой страницы.
Проблемы создания интерактивов
. Эта идея также не нова: работа по взаимодействию человека с компьютером исследовала гибкие связи.
[135]
внутри гипертекста, которые представляют информацию по конкретной теме в месте, которое не скрывает исходный материал. Как старые, так и современные методы предварительного просмотра используют основанную на восприятии анимацию и простые всплывающие подсказки, чтобы их взаимодействие было естественным и легким для читателей.
[136, 137]
Если интерактивные статьи имеют явные преимущества перед другими средствами передачи сложных идей, то почему они менее распространены?
[136]
.
Критические размышления
К сожалению, создавать интерактивные статьи сегодня сложно. Диаграммы предметной области, главная достопримечательность многих интерактивных статей, должны разрабатываться и реализовываться индивидуально, часто с нуля. Взаимодействия должны быть интуитивно понятными и производительными, чтобы обеспечить приятное чтение. Излишне говорить, что текст также должен быть хорошо написан и, в идеале, органично интегрироваться с графикой.
Процесс создания успешной интерактивной статьи ближе к созданию веб-сайта, чем к написанию сообщения в блоге, и часто требует значительно больше времени и усилий, чем статическая статья или даже академическая публикация. 3 Большинство интерактивных статей создаются с использованием универсальных сред веб-разработки, которые, хотя и выразительны, могут быть трудны для работы авторам, не являющимся также веб-разработчиками. Даже для опытных веб-разработчиков современные инструменты предлагают более низкий уровень абстракции, чем может потребоваться для создания прототипов и повторения проектов.
Хотя есть некоторые инструменты, которые помогают решить эту проблему
, они относительно несовершенны и в основном помогают уменьшить необходимую скуку программирования. Такие инструменты, как Идиллия
[138, 139, 140, 141, 142]
может помочь авторам быстро начать писать и даже обеспечить быструю итерацию по различным проектам (например, позволяя автору быстро сравнивать последовательность контента с использованием макета на основе «прокрутки» или «степпера»). Однако Idyll не предлагает никаких рекомендаций по дизайну, не помогает авторам продумать, где интерактивность будет наиболее эффективно применяться, и не указывает, как можно улучшить их контент, чтобы повысить его читабельность и запоминаемость. Например, «Идиллия» не содержит знаний о положительном влиянии самообъяснения, вместо этого она требует, чтобы авторы были знакомы с этим исследованием и с тем, как его реализовать.
[138]
Для успешного создания интерактивной статьи требуется разнообразный набор навыков редактирования, дизайна и программирования. Хотя некоторые люди могут создавать эти статьи самостоятельно, многие интерактивные статьи создаются коллективной командой, состоящей из нескольких членов со специальными навыками, например, аналитиков данных, сценаристов, редакторов, журналистов, графических дизайнеров и наборщиков, как указано выше. в
. Текущее поколение авторских инструментов не признает это сотрудничество. Например, чтобы отредактировать только текст этой статьи, требуется клонировать исходный код с помощью git, установить зависимости для конкретного проекта с помощью терминала и уметь редактировать HTML-файлы. Вся эта сложность не связана с задачей редактирования текста.
[30]
Публикация в Интернете сопряжена со своими проблемами: хотя интерактивные статьи доступны любому, у кого есть браузер, они обременены быстро меняющимися веб-технологиями, которые могут нарушить интерактивный контент уже через несколько лет. По этой причине простое и доступное интерактивное архивирование статей важно для авторов, чтобы они знали, что их работа может быть надежно сохранена на неопределенный срок для поддержки постоянной читательской аудитории. 4 Создание интерактивных статей также требует проектирования для различных устройств, например, обеспечение возможности адаптации индивидуального контента для настольных и мобильных экранов с различной скоростью соединения, поскольку доступ к интерактивному контенту требует большей пропускной способности.
Существуют и другие нетехнические ограничения для публикации интерактивных статей. Например, в областях, не связанных с журналистикой, существует несогласованная структура стимулов для создания и публикации интерактивного контента: зачем исследователю тратить время на «дополнительное» интерактивное изложение своей работы, если вместо этого он мог бы опубликовать больше статей? от чего зависит их карьера? В то время как разные группы людей стремятся максимизировать влияние своей работы, узаконивание интерактивных артефактов требует участия коллектива сообществ.
Сделать интерактивные статьи доступными для людей с ограниченными возможностями — непростая задача. Динамический носитель усугубляет эту проблему по сравнению с традиционным статическим письмом, особенно когда статьи сочетают в себе несколько форматов, таких как аудио, видео и текст. Поэтому для обеспечения доступности интерактивных статей для всех потребуются альтернативные способы представления контента (например, преобразование текста в речь, субтитры к видео, физическая обработка данных, озвучивание данных) и тщательный дизайн взаимодействия.
Также важно помнить, что не все должно быть интерактивным. Авторы должны учитывать аудиторию и контекст своей работы при принятии решения о целесообразности использования интерактивности. В худшем случае интерактивность может отвлекать читателей или функционал может остаться неиспользованным, поскольку автор зря потратил время на его реализацию. Тем не менее, даже в области, где потенциальное улучшение связи является постепенным, 5 в масштабе (например, доставка через Интернет), интерактивные статьи все еще могут «иметь влияние».
Мы пишем эту статью не как теоретики медиа, а как практики, исследователи и разработчики инструментов. Хотя писателям еще никогда не было так легко делиться своими идеями в Интернете, современные издательские инструменты в основном поддерживают только статическую авторскую работу и не в полной мере используют тот факт, что Интернет является динамической средой. Мы хотим, чтобы это изменилось, и мы не одиноки. Другие участники сообщества Исследуемые объяснения определили шаблоны проектирования, которые помогают делиться сложными идеями с помощью игры.
[143]
.
Жду с нетерпением
Для дальнейшего изучения этих идей двое авторов этой работы создали The Parametric Press: ежегодно издаваемый цифровой журнал, демонстрирующий описательную силу, которую интерактивные динамические медиа могут иметь при эффективном сочетании.
[144, 145, 66, 146, 61]
.
. В конце 2018 года мы пригласили писателей принять участие в конкурсе предложений для нашего первого номера, посвященного исследованию научных и технологических явлений, которые должны формировать общество в целом. Мы стремились охватить темы, которые выиграют от использования интерактивных или иных динамических возможностей Интернета. Учитывая сложности написания интерактивных статей, мы не просили авторов присылать полностью разработанные статьи. Вместо этого мы принимали идеи и сотрудничали с авторами в течение четырех месяцев, чтобы разработать выпуск, предлагая коллективную техническую, дизайнерскую и редакционную помощь авторам, у которых не было опыта в одной из этих областей. Например, мы помогли писателю реализовать визуализацию, студенту составить связное повествование, а ученому подытожить историю и распространить ее среди общественности. Несколько просмотров одной статьи показаны в «10».
[147]
10: Миф о беспристрастной машине
была одной из пяти статей, опубликованных в The Parametric Press. В статье использовались такие методы, как анимация, визуализация данных, пояснительные диаграммы, примечания на полях и интерактивное моделирование, чтобы объяснить, как возникают предубеждения в системах машинного обучения.
[148]
Мы рассматриваем Параметрическую прессу как важнейшее связующее звено между часто разными мирами исследований и практики. Проект служит платформой для реализации теорий, выдвинутых исследователями в области образования, журналистики и человеко-компьютерного взаимодействия. Такие инструменты, как Idyll, разработанные в исследовательской среде, должны быть проверены и протестированы, чтобы убедиться, что они применимы на практике; Параметрическая пресса облегчает это, позволяя нам изучить ее использование в реальных условиях авторами, которые лично заинтересованы в выполнении своей задачи по созданию высококачественной интерактивной статьи и имеют только второстепенные задачи. и заботиться об используемом инструменте, если вообще.
Через The Parametric Press мы увидели множество проблем, связанных с созданием, проектированием и публикацией из первых рук, как исследователи и практики. «1» обобщает возможности интерактивного общения как из исследований, так и из практики.
ИсследованияПрактикаАвторская разработкаИнструменты нового поколенияОценка в производственных условиях, выявление ошибокПроектированиеРазработка теории, проведение лабораторных исследованийОценка конкретных дизайнерских решений в реальных условиях, понимание ограниченийПубликацияИнструменты, рекомендации и лучшие практикиКонкретные примеры для подражания, доступный исходный код, доступные архивы, DOI, брендинг2: интерактивный коммуникативные возможности как из исследований, так и из практики.
Как исследователи, мы можем рассматривать проект как серию тематических исследований, в которых мы наблюдали за мотивацией и рабочими процессами, которые использовались для создания историй, от их первоначальной концепции до их публикации. Мотивация внести свой вклад в проект варьировалась в зависимости от автора. В то время как некоторые авторы лично вкладывались в проблему или набор данных, которые они хотели выделить и повысить осведомленность в целом, другие были привлечены к среде, признавая ее потенциал, но не имея опыта или поддержки для интерактивного общения. Мы также наблюдали, как исследовательские программные пакеты, такие как Apparatus,
, идиллия
[139]
и D3
[138]
подходят для создания интерактивных статей и как авторы должны комбинировать эти разрозненные инструменты, чтобы создать увлекательный опыт для читателей. В одной статье «О физике частиц» автор объединил два инструмента таким образом, что это позволило ему создавать и вставлять динамическую графику непосредственно в свою статью без написания кода, кроме базовой разметки. Один из создателей Apparatus ранее не рассматривал такой вид интеграции и, увидев готовую статью, «откомментировал»: «Это фантастика! Читая эту статью, я понятия не имел, что Аппарат был использован. Это очень интересное доказательство концепции нетрадиционных рабочих процессов с поддающимся исследованию объяснением».
[149]
Мы смогли предоставить авторам редакционные рекомендации, опираясь на наши знания эмпирических исследований, проведенных в сообществах мультимедийного обучения и визуализации информации, чтобы рекомендовать графические структуры и макеты страниц, помогая наиболее эффективно передавать сообщение каждой статьи. Одним из самых захватывающих результатов проекта является то, что мы увидели, как авторы развили навыки интерактивного общения, как и любые другие навыки: посредством постоянной практики, обратной связи и повторения. Мы также рассмотрели проблемы, связанные с публикацией динамического контента в Интернете, и выявили потребность в улучшении инструментов в этой области, особенно в отношении архивирования интерактивных статей. Будет ли код статьи работать через год? Через десять лет? Чтобы решить проблему архивации интерактивного контента, мы создали систему для публикации цифрового архива всех наших статей в момент их первой публикации на сайте. В верхней части каждой статьи на The Parametric Press есть ссылка на архив, которая позволяет читателям загрузить файл WARC (Web ARChive), который можно воспроизвести, не требуя какой-либо веб-инфраструктуры. Хотя наша первая итерация проекта основывалась на специальных решениях этих проблем, мы надеемся показать, как можно уверенно публиковать цифровые работы, подобные нашей, зная, что они будут храниться бесконечно долго.
Как специалисты-практики, мы раздвинули границы инструментов текущего поколения, предназначенных для поддержки создания интерактивных статей в Интернете. Мы обнаружили ошибки и ограничения в Idyll, инструменте, который изначально был разработан для поддержки создания разовых статей, которые мы использовали в качестве системы управления контентом для всего выпуска журнала. Мы были вынуждены писать патчи и плагины, чтобы обойти ограничения и добиться желаемой публикации. 6 Мы также были вынуждены создавать проекты с более реалистичным набором ограничений, чем обычно имеют дело с учеными: при создании визуализации недостаточно выбрать наиболее эффективные визуальные кодировки, графика также должна была быть эстетически привлекательной, соответствовать дому. стиля, оказывать минимальное влияние на время загрузки страницы и производительность во время выполнения, быть удобочитаемым как на мобильных, так и на настольных устройствах и не быть слишком обременительным для реализации. Любой дополнительный час, потраченный на реализацию одной графики, был часом, который не был потрачен на улучшение какой-либо другой части проблемы, такой как ясность текста или общий дизайн сайта.
Существует относительно немного изданий, обладающих навыками, технологиями и желанием публиковать интерактивные статьи. С самого начала одна из целей The Parametric Press — продемонстрировать новые формы медиа и публикаций, которые возможны с помощью доступных сегодня инструментов, и вдохновить других на создание собственных динамичных статей. Например, Омар Шехата, автор статьи The Parametric Press «Распутывая JPEG», сказал нам, что он хотел написать эту интерактивную статью в течение многих лет, но никогда не имел возможности, поддержки или стимула. чтобы создать его. Его статья вызвала широкий интерес и признание критиков.
Мы также хотели воспользоваться возможностью в качестве независимой публикации, чтобы служить конкретным примером для других, чтобы представить набор лучших практик для публикации интерактивного контента. С этой целью мы сделали доступным все программное обеспечение, на котором работает сайт, включая повторно используемые компоненты, настраиваемые визуализации данных и сам механизм публикации.
Для решения этих задач возникло разнообразное сообщество, исследующее и экспериментирующее с тем, какими могут быть интерактивные статьи. «Сообщество Explorable Explanations» — это «неорганизованное «движение» художников, программистов и педагогов, которые хотят воссоединить игру и обучение». Их онлайн-хаб содержит более 170 интерактивных статей на самые разные темы: от искусства, естественных и социальных наук до журналистики и гражданского права. Любопытные также могут найти инструменты, учебные пособия и мета-дискуссии об обучении, играх и представлениях. Explorables также провел смешанный личный и «онлайн-джем»: спринт на основе сообщества, направленный на создание новых исследуемых объяснений. «11» выделяет подмножество интерактивных статей, созданных во время Jam.
«Соединение людей и данных»
11: примеры изучаемых объяснений, сделанных за три недели во время Explorables Jam, охватывающих темы из математики, астрономии, компьютерной графики и музыки.
Многие интерактивные статьи публикуются самостоятельно из-за отсутствия платформ, поддерживающих интерактивную публикацию. Создание большего количества площадок, позволяющих авторам публиковать интерактивный контент, будет способствовать их развитию и легитимации. Несколько существующих примеров, в том числе новые журналы, такие как Distill, академические семинары, такие как VISxAI.
, публикации с открытым исходным кодом, такие как The Parametric Press.
[27]
и блокноты для живого программирования, такие как Observable
[150]
help, но в настоящее время нацелены на узкую группу авторов, а именно на тех, у кого есть навыки программирования. Такие платформы также должны обеспечивать четкие пути для отправки, качество и редакционные стандарты, а также руководящие принципы для авторов. Например, у новостных агентств есть четкие инструкции по размещению письменных материалов, но они недостаточно разработаны для интерактивных статей. Наконец, имеется мало средств для поддержки разработки интерактивных статей и инструментов, которые их поддерживают. Исследователи не получают грантов на распространение информации о своей работе, а специалисты-практики, не работающие в крупнейших новостных агентствах, не могут позволить себе тратить время и вкладывать средства в реализацию. Предоставление большего финансирования для включения интерактивных статей стимулирует их создание и может способствовать культуре, в которой читатели ожидают, что цифровые коммуникации будут лучше использовать динамическую среду.
[140]
Мы уже обсуждали широту навыков, необходимых для написания интерактивной статьи. Можем ли мы помочь снизить входной барьер? Хотя в этом направлении были достигнуты большие практические успехи
, все еще есть возможность создавать инструменты для проектирования, разработки и оценки интерактивных статей в дикой природе. Конкретные функции должны включать поддержку адаптации интерактивной графики для мобильных устройств (например,
[138, 139, 140, 141, 142]
), создание контента для разных платформ, помимо Интернета, и инструменты, которые позволяют людям создавать интерактивный контент без кода.
[151, 152, 153]
Полезность интерактивных статей основана на предположении, что эти интерактивные статьи действительно облегчают общение и обучение. Существует ограниченная эмпирическая оценка эффективности интерактивных статей. Проблема усугубляется тем фактом, что крупные издатели не желают делиться внутренними показателями, а лабораторные исследования могут не соответствовать тенденциям чтения в реальном мире. Нью-Йорк Таймс предоставила одну из немногих доступных точек данных, заявив, что только часть читателей взаимодействует с нестатическим контентом, и предложила дизайнерам отказаться от интерактивности.
. Однако другое исследование показало, что многие читатели, даже пользующиеся мобильными устройствами, заинтересованы в использовании интерактивности, когда она является основной частью сообщения статьи.
[154]
. Это утверждение из The New York Times стало практическим правилом для дизайнеров, и многие из-за него предпочитают не использовать интерактивность. Это означает, что дизайнеры потенциально выбирают неоптимальное представление своей истории из-за этого анекдота. Необходимы дополнительные исследования, чтобы определить случаи, когда интерактивность стоит затрат на создание.
[155]
Мы верим в силу и неиспользованный потенциал интерактивных статей, которые пробуждают у читателей желание учиться и делают сложные идеи доступными и понятными для всех.
Общение с интерактивными статьями
