Surgut, Surgutskiy gosuniversitet, Tyumen, Russian Federation
The relevance of the study is due to the fact that in the digital transformation of the educational environment, designing an online course as a four-element system, three of which are related to the visual component and user experience becomes important. If one of these elements is lost or broken, the course quality will suffer, users will not complete it, and the learning objectives will not be met, as a result, the training course will be ineffective. The aim of the study is to present a toolkit for high-quality visualization of the educational content design. The practical significance of this study lies in the fact that it will allow HR company managers, methodologists and pedagogical designers to come to understanding of how to visualize content, how UI differs from UX, how to properly approach information visualization, what factors distinguish a good graphic design from a bad one. This will increase the level of involvement in learning and the educational process efficiency.
educational content, design, visualization, infographics, learning efficiency
Введение
Тим Слейд предлагает рассматривать дизайн онлайн-курса как систему из четырех элементов, три из которых связаны с визуальной составляющей и пользовательским опытом [1]:
- Педагогический дизайн. Предполагает определение измеримых целей обучения, целевой аудитории, ожидаемых результатов, формата и методов обучения, структуры образовательной программы, написание понятных текстов и подготовку релевантных примеров.
2. Графический дизайн. Как материал представлен на экране? Как используются шрифты, картинки, верстка?
- Визуальная коммуникация. Как передается идея и концепция? Понятны ли они? Сочетаются ли они с графическим дизайном или это просто набор из буллетов, абзацев текста и странной картинки с котиком?
- Дизайн пользовательского интерфейса. Понимают ли слушатели, для чего нужна та или иная кнопка? Удобно ли им перемещаться по курсу?
Если обратиться к профессиональным приложениям для создания электронных курсов, например, Articulate Storyline или Adobe Captivate, можно заметить, что интерфейсы этих редакторов во многом схожи с PowerPoint. Это неслучайно, ведь и для создания презентации, и для создания курсов используется примерно одинаковый набор мультимедийных элементов. Как этому научиться? Через насмотренность. Необходимо смотреть хорошие презентации и сайты, вылавливать эффектные идеи, собирать библиотеку элементов и следить за тем, чтобы слайд не был перегружен информацией, а зритель не потерял идею.
В этом исследовании будут раскрыты следующие вопросы, которыми задаются непрофессиональные дизайнеры:
- Чем UI отличается от UX?
- Чем отличается хороший графический дизайн от плохого?
- Как правильно подойти к визуализации информации?
- Как выбрать цвета, изображения и шрифты?
- Как самому визуализировать контент?
1. Материалы, модели, эксперименты, методы и методики
1.1. Дизайн, который вызывает эмоции.
Слушатели образовательного онлайн-курса получают целый багаж субъективных ощущений, связанных с доступностью его восприятия: легко ли читается текст, находятся ли нужные разделы в меню, выбираются ли действия и так далее. Всё это является частью пользовательского опыта – того, что в профессиональной среде дизайнеров обозначается аббревиатурой UX.
UX (user experience) – это эмоции, восприятие и ответные действия пользователя, возникающие в результате использования и/или предстоящего использования продукции, системы или услуги. Этот термин ввел в обиход Дональд Норман, ученый в области когнитивных наук и автор бестселлера «Дизайн привычных вещей» [2,3]. В 1993 году он устроился работать в компанию Apple на должность, которую так и назвал – архитектор пользовательского опыта. Хороший UX во многом зависит от хорошего пользовательского интерфейса – UI.
UI (user interface) – набор средств для взаимодействия между пользователем и системой. Интерфейсы могут быть текстовые, графические, жестовые, голосовые, материальные (например, руль и педали автомобиля). Часто встречаются комбинации разных интерфейсов.
Тем же, чем отличается хороший автомобиль от плохого. Хороший производитель изучает все нюансы взаимодействия пользователя с автомобилем. Удобно ли ему сидеть, хорошо ли он видит спидометр, доступны ли ему все элементы управления. В большинстве случаев замечают плохой UX, а хороший – не замечают. Хороший UX позволяет без проблем пройти пользовательский сценарий (совершить покупку, сделать денежный перевод), и вниманию просто не за что зацепиться.
Понять, как должно происходить взаимодействие пользователя с продуктом, помогают качественные исследования.
Примеры качественных исследований: наблюдение, глубинные интервью, фокус-группы, дневниковые исследования, анализ обратной связи, юзабилити-тестирование.
В Сбербанке используется юзабилити-тестирование. В ходе тестирования пользователю нужно выполнить какую-либо задачу по взаимодействию с системой: положить товар в корзину, совершить покупку, найти какой-то пункт меню. Если пользователь не справляется с этой задачей, стоит понять причину ошибки и исправить графический интерфейс или процесс. Если правильно выстроить гипотезы и поставить задачи, даже небольшая выборка (6–8 человек) покажет до 80 % критических ошибок в интерфейсе.
Примеры количественных исследований: парные сравнения, A/B-тестирования, опросы, метрики, статистические наблюдения.
A/B-тестирования показывают влияние небольших изменений на пользовательский опыт: какой текст лучше читается, какая иконка понятнее большинству. Крупные корпорации одновременно тестируют сразу несколько вариантов: A, B, C, D и так далее. Поскольку выбор методов исследования очень большой, наша задача – определить, какие из них позволят получить ответы на волнующие вопросы. От проекта к проекту набор этих методов будет разниться.
1.2. Принципы формирования дизайна онлайн-контента.
При создании визуализации учебного контента необходимо соблюдать следующие принципы формирования дизайна [3,4]:
1. Баланс между сигналом и шумом.
Если выделить в качестве важных слишком много элементов, они превратятся в визуальный шум. Чтобы этого не произошло, необходимы единые правила расстановки акцентов.
2. Работа с изображениями.
Значение графики, иконок и изображений должно быть понятно пользователю. Если текст размещен на фоне изображения, следите за тем, чтобы он легко читался.
3. Соотношение цвета и контраста.
Размещая текст на фоне, важно следить за коэффициентом контрастности – разнице в яркости между двумя используемыми цветами. Чем выше коэффициент, тем лучше видна эта разница и легче читается текст. Обычному тексту необходима контрастность от 4,5 : 1. Для увеличенного текста (14–18 pt) можно снизить контрастность до 3 : 1. Для измерения контрастности есть специальные калькуляторы. Например, Contrast Ratio (www.contrast-ratio.com).
Проблем с контрастностью не будет, если использовать черный текст на белом фоне. Но в презентации зачастую лучше использовать белый текст на черном фоне, чтобы даже в светлом помещении картинка смотрелась контрастно.
4. Типографика.
Чтобы пользователь без труда читал текст, нужно всего шесть вещей. Достаточный размер кегля (высота буквы). Оптимальная высота строки и межстрочного расстояния. Необходимая длина строки (не слишком короткая и не слишком длинная). Разборчивый шрифт (для экранов лучше шрифт без засечек). Использование заголовков (помогает понять, о чем текст). Хорошее сочетание шрифтов.
5. Сетка.
Сетка помогает:
– гармонично упорядочить элементы на экране;
– обеспечить связность экранов одинаковыми отступами по краям и между блоками;
– адаптировать контент под различные размеры экранов.
1.2. Правила работы с цветом.
«Как правильно выбрать цвет?» – этот вопрос дизайнеры слышат очень часто от тех, кто только начинает заниматься визуальным оформлением контента. Хороший дизайнер на это ответит уклончиво: «Здесь нет однозначных решений, всё очень индивидуально». Новичкам может казаться, что есть какие-то «хорошие» и «плохие» цвета, но это не так. Хорошими и плохими могут быть результаты неумелого обращения с цветами или их сочетаниями. Рассказываем о том, что такое цвет и как им управлять в своих целях.
Цвета в объективной реальности не существует. Световые волны бесцветны сами по себе, но у них есть важная характеристика – длина. Отраженные от предмета волны разной длины мы воспринимаем как цвет. Красное яблоко кажется нам красным потому, что его поверхность поглотила все световые волны, кроме самой длинной. Первым белый солнечный свет на цветовой спектр разложил Исаак Ньютон, пропуская луч света через призму.
Цвет – очень субъективная характеристика. Один и тот же оттенок цвета может показаться приятным одному человеку и отталкивающим – другому. Несмотря на это, за столетия развития искусства стало понятно, что цвет – это мощный инструмент. Поэтому человек научился мастерски им орудовать и управлять с его помощью вниманием и настроением зрителя. Прежде чем перейти к визуальным законам, связанным с цветом, важно узнать еще кое-что важное. Из школьных уроков изобразительного искусства можно помнить понятия основных и дополнительных цветов. Основными считались красный, желтый и синий, а дополнительными – зеленый, оранжевый и фиолетовый, поскольку их можно было получить путем смешения основных (например, оранжевый – это красный плюс желтый). Идея получать разные оттенки из нескольких цветов очень привлекательна, но основными цветами могут быть не только красный, желтый и синий.
Например, в системе кодирования цвета RGB основными являются красный (Red), зеленый (Green) и синий (Blue). Это основная модель цветовоспроизведения для экранов и мониторов. А вот в системе CMYK основные цвета – это сине-зеленый (Cyan), пурпурный (Magenta), желтый (Yellow) и черный (blacK). Систему CMYK используют в полиграфии. Какую бы систему мы ни использовали, у цвета есть вполне конкретные параметры. Мы имеем о них интуитивное представление: большинство из нас чувствует разницу между светло-коричневым и темно-коричневым или между сиреневым и алым.
Сочетая основные и дополнительные цвета, а также играя с параметрами цвета, можно создавать гармоничные цветовые палитры. Цвет субъективен, а цветовая гармония – вполне предсказуемая и закономерная вещь. Когда мы смотрим на гармоничное сочетание цветов, нам становится приятно, а ведь эмоции зрителя – самая важная составляющая визуального дизайна. Поэтому при работе с цветом нужно знать принципы сочетаемости. Для грамотного сочетания цветов нужен цветовой круг. Существует несколько принципов выбора цветов из цветового круга – цветовых схем [5,6]:
– Монохроматическая схема. Это самый простой способ: выбираем на цветовом круге один тон, меняем его насыщенность или яркость и получаем работающую схему.
– Аналоговая схема. Для этой схемы выбираем несколько цветов, расположенных рядом на цветовом круге. В аналоговых схемах также можно смело выбирать насыщенность и яркость каждого из выбранных тонов.
– Комплементарная схема. В этой схеме используются цвета, расположенные друг напротив друга в цветовом круге. Чтобы составить палитру, нужно взять несколько вариантов насыщенности и яркости выбранных тонов.
– Раздельно-комплементарная схема. Для этой схемы нужно вместо одного противоположного цвета выбрать те, что находятся рядом с ним.
– Триадная схема. Для этой схемы выбирается три цвета, находящихся на равном расстоянии друг от друга на цветовом круге. По этой схеме получаются, как правило, самые яркие и неожиданные сочетания.
– Тетрадная схема. Для этой схемы нужно взять не три цвета, а четыре – таким образом, чтобы они выступали вершинами прямоугольника. Такое сочетание хорошо работает, если один из цветов выбрать в качестве основного, а остальными расставлять акценты.
В наше время уже почти никто вручную не составляет цветовые схемы, поэтому необходимо соблюдать важные принципы колористики.
Очевидно, на практике из получившейся цветовой палитры максимально часто используется лишь пара: основной цвет и цветовой акцент. В качестве фона и нейтральных элементов применяются ахроматические оттенки: серый, темно-серый, черный, белый. Самое сложное – выбрать основной цвет. Именно он будет передавать настроение и использоваться при создании палитры.
Правила выбора основного цвета [7].
Если есть корпоративный цвет, то можно смело его использовать. Целесообразно ориентироваться на целевую аудиторию, но избегать стереотипов. Для серьезного аналитического отчета необходимо выбрать один цвет, а для внутрикомандного демо –другой. Однако, всё зависит от созданной атмосферы и принятого тона общения. Необходимо избегать копирования цвета конкурентов, если они есть. После выбора основного цвета можно переходить к составлению гармоничной цветовой схемы по уже знакомым принципам.
Несколько популярных инструментов для составления цветовых палитр:
– Paletton. Составитель цветовых схем по выбранному основному цвету.
– Material.io. Tools for picking colors. Цветовые палитры для Material Design.
– Coolors. Генератор случайных палитр.
– Colorhunt. Готовые палитры.
– Dribbble Colors. Подбор палитр на Dribbble.
Цвет представляет собой мощный инструмент управления восприятием. Сила цвета – в гармонии. Гармоничные сочетания можно подобрать с помощью специальных сервисов. Цвета не должно быть в избытке, поэтому не стоит пренебрегать нейтральными (ахроматическими) оттенками.
2. Результаты
2.1. Инфографика как инструмент визуализации.
Инфографика стала модным форматом визуализации контента, но мало кто задумывается, что это такое. Бытуем мнение, что для инфографики достаточно наглядных иконок и картинок. Другие полагают, что инфографика – это мудреный график. Третьи уверены, что инфографика должна вмещать максимум информации в ограниченном пространстве макета.
Инфографика – это графическое отображение информации, благодаря которому она становится понятнее и нагляднее. Главная цель инфографики – не просто визуализировать информацию, а сделать так, чтобы читателю не приходилось прилагать усилия для ее восприятия. Зачастую инфографика воспринимается как конечный продукт. Однако инфографика – это лишь способ переработки информации. Можно сказать, что это графический язык, на который переводится текстовая или числовая информация. Качественная инфографика обладает несколькими свойствами:
Свойство № 1. Информация хорошо структурирована.
Свойство № 2. Сделан акцент на важных деталях.
Свойство № 3. Информация подана корректно и наглядно, без искажений.
Свойство № 4. Использовано красивое визуальное решение.
Проиллюстрируем на примере (см. рис.1)
Рис. 1. Пример 1 визуализации дизайна.
Fig. 1. Example 1 of design visualization.
Свойство № 1. На инфографике хаос.
Свойство № 2. Нет акцента на важных деталях.
Свойство № 3. Информация подана с искажениями: круговые диаграммы нельзя показывать под углом.
Свойство № 4. Слабая визуальная подача.
Рассмотрим другой пример визуализации (см. рис. 2).
Свойство № 1. Структура информации прослеживается плохо, хоть и видно деление на три части.
Свойство № 2. Нет акцента на важных деталях.
Свойство № 3 Информация подана с искажениями: кажется, что два столбца с 2 % и с 5 % имеют разную высоту.
Свойство № 4. Представлено красивое визуальное решение, здесь оно привлекает внимание.
Чтобы информация превратилась в инфографику, которая облегчит понимание материала пользователем, необходимо пройти через 5 этапов:
1. Формулирование задачи.
2. Сбор информации.
3. Анализ информации.
4. Создание структуры.
5. Визуализация.
Таким образом, инфографика - это графический язык, который переводит обычную информацию в легкий для восприятия и интересный формат. Это инструмент для облегчения жизни читателю, способ переработки информации. У инфографики всегда есть смысл. Если не думать о смысле и целях инфографики, а сразу визуализировать информацию, получится просто красивая картинка, какое бы профессиональное программное обеспечение для ее создания ни использовалось.
Рис. 2. Пример 2 визуализации дизайна.
Fig. 2. Example 2 of design visualization.
Заключение
1. Обосновано, что в условиях цифровой трансформации образовательной среды важное значение приобретает дизайн онлайн-курса как системы из четырех элементов, три из которых связаны с визуальной составляющей и пользовательским опытом. Если один из этих элементов будет утерян или нарушен, пострадает качество курса, пользователи не пройдут его до конца, а цели обучения не будут выполнены, как следствие, учебный курс окажется неэффективен.
2. Представлен инструментарий качественной визуализации дизайна образовательного контента.
3. Автором представлены примеры инфографики как инструментария визуализации контента.
4. Практическая значимость данного исследования заключается в том, что позволит HR-менеджерам компаний, методистам и педагогическим дазайнерам прийти к пониманию, как визуализировать контент, чем UI отличается от UX, как правильно подойти к визуализации информации, чем отличается хороший графический дизайн от плохого. Это позволит повысить уровень вовлеченности в обучение и эффективность образовательного процесса.
1. Dokuchaev S.A., Kostetskaya G.S., Svetlichnaya N.O., et al. Modern Tools for Visualization of Learning Content. North Caucasus Branch of Moscow Technical University of Communications and Informatics. 2021;2:141-142.
2. Katysheva E.E., Lavrichenko K.K. Visualization of Mathematical Training Content for Future Car Drivers as a Condition for Development of Communicative Competences. Bulletin of Krasnoyarsk State Pedagogical University named after V.P. Astafiev. 2021;4(58):21-29. DOIhttps://doi.org/10.25146/1995-0861-2021-58-4-300.
3. Shirinkina E.V. Collaborations of Art and Business in the Digital World. Ergodesign. 2022;2(16):137-143. DOIhttps://doi.org/10.30987/2658-4026-2022-2-137-143.
4. Khalzova N.A. Taking into Account the Regional Component when Visualizing Educational Content. Modern Pedagogical Education. 2022;4:68-72.
5. Inozemtseva L.A., Kuzhekin N.S. Psychological and Pedagogical Foundations for the Visualization of Educational Content in the Development of Electronic Didactic Materials. Proceedings of the Mozhaisky Military Space Academy. 2017;657:173-177.
6. Dolgopolova O.D. Content Visualization in the Educational Process: International Practice of Using Infographics. Scientific notes of the Institute of Education Management of the Russian Academy of Education. 2019;3(71):18-23.
7. Reznik N.A. Model of Visualization of Educational Content in the Modern Information Space. Journal of Scientific and Pedagogical Information. 2011;4:110-143.
