Интерактивные истории

Интерактивные истории Выполнили: Похабова Юлия Штенгауэр Надежда

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

Задачи проекта • Изучение информации по данной теме. • Изучить возможности использования сервисов для разработки интерактивных историй. • Активизация учебной и познавательной деятельности; • Формирование и развитие критического и визуального мышления, зрительного восприятия, образного представления знаний и учебных действий; • Повышение визуальной грамотности и визуальной культуры.

Интерактивная история - это большое количество текста, разбитого на части с помощью различных мультимедийных элементов: фотографий, видео, инфографики, аудиофайлов (однако это не является строгим правилом).  Формат предполагает чтение материала с различных электронных носителей. Он также позволяет читателю преодолеть «информационный шум» и полностью погрузиться в тему статьи.  Практически любой лонгрид разрабатывается в формате цифрового сторителлинга.

4 слагаемых успеха интерактивной истории  Изучение проблемы  Якоря внимания в формате «просто о сложном»  Мультисенсорика  Эмоциональная составляющая (https://yandex.ru/images/search?pos=29&from=tabbar&img_url=https%3A%2F%2Ftelegra.p h%2Ffile%2Ffcdcd3ab85b1c304d3e4e.jpg&text=%)

Контент — это главное • Хороший материал должен быть интересен и полезен читателю. Подумайте, что ценного и нового человек получит от прочтения вашего материала. Чтобы составить хорошо усваиваемый рассказ, пользуйтесь пирамидой информации. https://special.theoryandpractice.ru/storytelling

Будьте исследователем • Именно глубокая проработка темы отличает хорошую историю от поверхностной. • Любой дизайнер или редактор, работая над материалом, должен уметь быстро погружаться в тему. (https://yandex.ru/images/search?p=7&source=related-query- serp&text=%D0%B8%D1%81%D1%81%D0%BB%D0%B5%D0%B4%D0%B E%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%20%D0%BA% D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B0%20%D)

Найдите красивые картинки • Сторителлинг — это как кино, https://yandex.ru/images/search?pos=4&from=tabbar&img_url=https%3A%2F%2Fst.depositphotos.com% которое играет, пока 2F1899425%2F1623%2Fi%2F950%2Fdepositphotos_16232649-stock-photo-moraine-lake-sunrise- ты скроллишь. Именно colorful- визуальная часть помогает передать атмосферу, раскрыть landscape.jpg&text=%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B0%20 тему и погрузить пользователя %D0%BD%D0%B4&rpt=simage в контекст. Подумайте, что могло бы помочь вашей истории раскрыться. Это может быть, например, фотосессия, эмбиент-видео, иллюстрация или инфографика.

Прорабатывайте заголовки • Заголовок должен быть говорящим. Хороший заголовок вызывает интерес и обозначает тему статьи, без провокации и искажения ее сути. https://yandex.ru/images/search?pos=19&from=tabbar&img_url=https%3A%2F%2Fi.ytimg.com %2Fvi%2FWWjEJEsEFY4%2Fmaxresdefault.jpg&text=%D0%B7%D0%B0%D0%B3%D0%B E%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA%20%D0%BA%D0%B0%D1%80%D1%8 2%D0%B8%D0%BD%D0%BA%D0%B0&rpt=simage

Проектируйте несколько слоев чтения • Существует два типа чтения: https://yandex.ru/images/search?pos=14&from=tabbar&img_url=https%3A%2F%2Fwww.tokkor первое — линейное. Сначала идет o.com%2Fpicsup%2F3084117-book- оценка материала, затем — чтение текста stack_books_classic_knowledge_learn_pile_retro_stack_vintage.jpg&text=%D1%81%D0%BB% по порядку. Традиционный D0%BE%D0%B8%20%D1%87%D1%82%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%B вариант. Второе — кросс-чтение (скимминг): чтение идет только A%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8&rpt=simage по заголовкам, врезам и так далее. • Важно учитывать чтение второго типа. Позаботьтесь о том, чтобы структура материала считывалась без проблем даже беглым взглядом.

Думайте паттернами • Накопленный дизайнерами опыт показывает, что есть наиболее подходящие способы доносить разные типы информации. Понятие «дизайн-паттерн» подразумевает определенный элемент, или группу элементов, повторяющуюся на множестве сайтов для одной и той же цели. Например, из десятка разных способов оформлять прямую речь, со временем выживают два-три самых успешных. https://yandex.ru/images/search?pos=0&from=tabbar&img_url=https%3A%2F% 2Fi.pinimg.com%2Foriginals%2Fab%2Fa2%2Fe5%2Faba2e51d89f6a4c725d1cc 40c5bd4c2f.jpg&text=%20%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D 0%0%B5%D1%80%D0%BD&rpt=simage

Избегайте монотонности • Подумайте, что и в какой последовательности увидит читатель. Подача материала должна быть разнообразной. Хороший паттерн, примененный 10 раз подряд, может мозолить глаза почти так же, как простыня текста. https://yandex.ru/images/search?pos=2&from=tabbar&img_url=https%3A%2F%2Fst.depositphot os.com%2F1258191%2F2507%2Fi%2F950%2Fdepositphotos_25079635-stock-photo-tired- businesswoman.jpg&text=%D0%BC%D0%BE%D0%BD%D0%BE%D1%82%D0%BE%D0%B D%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%D0%BA%D0%B0%D1%80%D1%82 %D0%B8%D0%BD%D0%BA%D0%B0&rpt=simage

Единство и контраст • Используйте большие отступы между блоками. Не бойтесь воздуха, дайте информации дышать. Когда тексту отведено большое пространство, он раскрывается и становится читаемее. https://yandex.ru/images/search?p=2&text=%D0%B5%D0%B4%D0%B 8%D0%BD%D1%81%D1%82%D0%B2%D0%BE%20%D0%B8%20% D0%BA%D0%BE%D0%BD%D1%82%D1%80%D0%B0%D1%81%D 1%82&pos=88&rpt=simage&img_url=https%3A%2F%2Fwww.filepicke r.io%2Fapi%2Ffile%2FNOqooIZWQKW3qiS6VNbS&from=tabbar

Найдите подходящую тональность • Хорошо учитывать культурный контекст шрифтов. • Для хорошо оформленной статьи вполне достаточно одного шрифта. Допустимо также использование двух шрифтов — это создает эффектный контраст. https://yandex.ru/images/search?pos=5&from=tabbar&im g_url=https%3A%2F%2Favatars.mds.yandex.net%2Fget- pdb%2F1701500%2F731f007e-117b-4797-8735- 9bd9d5c5279e%2Fs1200&text=%D1%88%D1%80%D0 %B8%D1%84%D1%82%20%D0%BA%D0%B0%D1%8 0%D1%82%D0%B8%De

Позаботьтесь о шэринге • Не забывайте поставить социальные кнопки. Лучше использовать так называемые «залипающие» кнопки, которые остаются в поле зрения при скроллинге страницы. https://yandex.ru/images/search?pos=5&from=tabbar&img_url=https%3A%2F%2Fasninfo.ru%2 Fimages%2Farticles%2F9ed9fbd2%2F3ccd29554a6cd710a8450f31.jpg&text=%D1%88%D1%8 D%D1%80%D0%B8%D0%BD%D0%B3%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8 %D0%BD%D0%BA%D0%B0&rpt=simage

Инструменты/сервисы для создания интерактивных историй • Оэлнелкатйрно-ниннысхтркунмиегнты для создания https://yandex.ru/images/search?pos=12&from=tabbar&img_url=https%3A%2F%2Fmtdata.ru%2 • Интерактивная книга — книга, Fu11%2Fphoto2D70%2F20172795720- взаимодействующая с читателем 0%2Foriginal.jpg&text=%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B0%D0%BA% и предлагающая ему иные виды D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5%20%D0%B8%D1%81%D1%82%D деятельности, кроме чтения. • mystorybook.com 0%BE%D1%80%D0%B8%D0%B8&rpt=simage • https://bookcreator.com/ • http://utellstory.com/ • https://www.writereader.com • https://tilda.cc/ru/ • http://hyperbook.ru/

Tilda Publishing • Это инструмент для создания сайтов, где процесс создания нового контента похож на игру. • Это блочный конструктор сайтов, не требующий навыков программирования

Ключевые особенности Tilda Publishing • Фокус на типографике- контент, оформленный с помощью Тильды, не просто красив — его хочется читать • Визуальный контент-создание красивого сайта во многом зависит от фотографий и видео. Мы придумали как их эффектно показать. • Все для лендингов-создание посадочных страниц и измерение их эффективности • Интернет-магазин-создавайте небольшие онлайн-магазины, интернет-бутики, продавайте отдельные товары или услуги.

Гиперкнига • Одним из таких сервисов является грдоесспиуйбслкиикйуептосрятианлтГеирпакертикнвниыгае, исосзтдоарниниы, теесксптоомвоыщеьиюгрсыпеицкиваелсьтныо,го ИрендтаекртаокртаиAвнXаMя иAсSтоtoрrиyяMсоaсkтeоr.ит зиазвсетрршанаюицт-сэякнраабноорво, мкостсоырылоек (пунктов, вопросов) для перехода к следующим страницам. Таким образом, путей прочтения истории получается множество. Выбор конкретного осуществляет сам читатель.

Сервис • http://project1911829.tilda.ws/

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

Источники • https://special.theoryandpractice.ru/storytelling- 10 правил хорошего сторителлинга • https://tilda.cc/ru/- Конструктор сайтов Tilda Publishing • https://yandex.ru/images/search?pos=0&from=tabbar&img_url=https%3A %2F%2Frusplt.ru%2Fnetcat_files%2Fuserfiles4%2Fa250e1387b045228c69b 40656090cc4f.jpg&text=%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0% B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5%20%D0 %B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B8&rpt=simage- Яндекс картинки • https://e.sfu-kras.ru/mod/page/view.php?id=767069&inpopup=1- Информационно-коммуникационные технологии в образовании (тьюторы, 1 курс). Истории с обратной связью