Электронные курсы. Разбор полётов
анализ курсов: что хорошо, что не очень
⭐️Николай Дворников
⭐️Сергей Снегирёв

❗️Смотрим по критериям:
👉Первое впечатление, обложка курса
➕легкая подача, обращение к пользователю
➕кнопка "Вперёд"
➕дизайн, стиль курса
➖на обложке написано "электронный курс" - можно убрать
➖на обложке нет ни одной кнопки, не понятно, что делать
➖нет реакции курсора при наведении
➖"глянцевые" кнопки
➖меню на обложке и элементы навигации - лишнее

👉Элементы навигации
➕контекстная навигация вместо "далее"
➕кнопки очевидны и достаточно крупные, чтобы нажать
➕варианты ответа - область, а не текст (картинка с продуктом)
➕вспомогательный текст (выберите два варианта, нажмите "ответить") может быть лишним, но он может помогать дать правильный ответ, побудить к действию
➖малозаметные элементы навигации - для мобильных телефонов будет не удобно
➖неудачное сочетание шрифтов с засечками и без
➖кнопки навигации не должны состоять просто из текста, должен быть фон, вид кнопки
➖"нажмите продолжить, чтобы продолжить" - кнопка "дальше" может называться по-другому

👉Вёрстка и текст
➕любое выделение текста должно быть оправдано
➖проверять лишние пробелы, мелочи, которые могут "резать" слайд (особенно при использовании автоматизированных боксов)
➖любая полупрозрачность - большой риск, делать однородный фон
➖не экономить место на слайде - больше свободного места, чтобы текст не прилипал к границам
➖"висячие" предлоги - переносить на следующую строку
➖жирный шрифт - важный текст, а не любой
➖исправлять ошибки, вычитывать текст
➖Вы или вы - нужно договорится, какое обращение
➖е или ё - тоже нужно договариваться

👉Графика
➕единая визуализация - отрисовка и фотографии из стока должны сочетаться, или не быть вместе
➕цветовое кодирование: верно - зеленым, неверно - серым (красный может раздражать)
➖стоковые фотографии - зло или нужно внимательно подбирать сюжеты близкие к реальности
➖большой объем текста не выравнивать по центру - сложно читать
➖при неправильно ответе давать развёрнутый ответ (но это сложно сделать в множественном выборе)

👉Персонажи
➕сотрудник компании - лучший персонаж (но может быть риск, если сотрудник получил негативную репутацию)
➕рисованные персонажи - тоже отличный вариант

👉Механика (использование средств разработки)
➕калькулятор в виде слайдера (шкала оценки, а не дискретный выбор)
➖механика drag n drop иногда усложняет пользование курсом (когда можно выбрать более простую механику), но идеально для темы подбора дресс-кода.

#LX_design
#заметкипеддизайнера

35 примеров лонгридов для воскресного вдохновлённого чтения.
Грамотный дизайн лонгрида способен превратить простыню текста в настоящее приключение и увлечь. Он не только удерживает внимание на время чтения, но заставляет возвращаться к материалу через какое-то время.

Самые интересные на мой вкус:
🌟Snow Fall, The New York Times - классический пример, но по-прежнему, такой атмосферный

🌟The Long, Strange Trip of Dock Ellis - про бейсбольного игрока, особенно нравятся рукописные рисунки и стиль фото

🌟The Dawn Wall: El Capitan's Most Unwelcoming Route - про подъем на скалу Эль-Капитан в национальном парке Йосемити

🌟Наука своими руками - интервью с исследователем мирового океана Александром Семёновым -

http://blog.tilda.cc/longreads

#LX_advice
#LX_design

Короткий ролик про теорию цвета от Ольги Жолудовой (Nancy Pong)

Образец понятного изложения и приятного дизайна 😍
Продолжительность: 6:30

🌈 Что такое тон, насыщенность и яркость цвета?
🌈 Почему цветовой круг - это круг?
🌈 Как наконец-то разобраться в разных цветовых схемах?
🌈 Что такое вибрация цвета?
🌈 Как сбалансировать дизайн с помощью цвета?
🌈 О чём говорит цвет?
🌈 Причём здесь Ван Гог?

Приятного просмотра! ❤️💛💚💙💜

https://ux-journal-nancy-pong.wistia.com/medias/g29yxa969v

#LX_design

В блоге "Продуктовый дизайн" занятная статья про метафоры в интерфейсе
(давайте-ка возрождать рубрику #LX_design, м?)

Некоторые цитаты
💡От метафор зависит, насколько интуитивным будет дизайн. Если дизайн строится на реальных и узнаваемых понятиях, людям будет проще его понять. А если взять за основу дизайна нечто абстрактное, есть вероятность, что пользователи будут почесывать голову.

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

💡В целом, метафоры нужны, чтобы помочь людям понять какую-то концепцию. Но если метафора слишком абстрактна, она только мутит воду.

В конце статьи советы, как тренировать своё мышление на придумывание метафор.
Спойлер: картинки, идиомы, синонимы, связанные по контенсту слова

Всё равно дочитайте до конца. Я ушла с головой во все эти ссылки на целый час жизни.
https://goo.gl/RdFXfw

Попалась на глаза короткая статья Пишем интерфейсный текст: 15 правил для дизайнеров. Автор: Ника Бабич, главный редактор UX Planet 🤘
Для справки
Интерфейсный текст включает в себя кнопки и пункты меню, сообщения об ошибках, советы по безопасности, правила и инструкции. Его основная цель — направлять пользователя и помогать ему взаимодействовать с продуктом

🤓Что полезного я нашла для создания онлайн-курсов?
В нашей реальности мы поговорим про текст в элементах навигации, уведомлениях, обратной связи на ошибки, подсказках. В общем, любой вспомогательный текст курса.

Написала свой заметки в статье — получилось 14 пунктов
https://goo.gl/FvQKNp

#LX_articles
#LX_design

Подборка статей по UX дизайну

Собрала для вас ТОП-10 статей осени из блога UX Notes, которые помогут сделать курсы более user friendly

📎 Как сообщать, какие поля обязательны для заполнения
Каких полей должно быть больше и какой текст лучше использовать в подсказках

📎 Как применять закон Миллера в дизайне
Оказывается, тот самый закон про 7±2 элемента не такой уж применимый в реальной жизни. И про магическое число «4»

📎 Как сделать карусель в смартфоне
Будет полезно для тех, кто проектирует курсы только для мобилки

📎 Как не сгореть на работе
Гайд по выживанию для новичков, юных и профессиональных дизайнеров. Нам тоже подойдут

📎 Как подписывать таймлайны и графики
Если много данных и мало места для подписи. Как на слайде или инфографике

📎 Как оценить качество продукта
Если курс — это продукт, в этом списке много показательных метрик

📎 Как писать подсказки для пользователей
Нажмите на стрелку, чтобы продолжить или как?

📎 Как создать у пользователя состояние потока
Чтобы он дольше находился на странице. Или в курсе

📎 Как верстать таблицы и списки
Когда много линий и много однородного текста

📎 Как и зачем создавать раскадровки при проектировании
Возможно, это никогда не пригодится. Но если решите делать - будете лучше представлять своего пользователя и продукт!

#LX_design
#LX_advice

Добро пожаловать на канал LX notes 🖐 LX notes = Learning eХperience notes

Я — Евгения, дизайнер образовательного опыта и человек, развивающий других людей 🤓
В этом блоге я делюсь находками в области проектирования образовательной среды, помогаю новичкам, экспертам и компаниям создавать классные программы обучения 🚀

👉 Каждый понедельник на канале анонс событий на неделю для тех, кто работает в обучении. Можно читать канал сначала или найти нужную тему по тегу 👇

📚Библиотека знаний LX notes
#LX_best — лучшие избранные посты за прошедшее время, рекомендую начинать с этого тега

Все теги:
#askme — эфиры Ask Me Anything каждый месяц 5 числа в 5 мск
#LX_advice — рекомендации статей, книг, курсов и каналов
#LX_articles — мои статьи и презентации с выступлений
#LX_author — об авторе
#LX_case — разбор кейсов, примеры курсов
#LX_challenge — челенджи по разработке курсов и мои личные вызовы
#LX_design — фишки, методы и примеры дизайна и визуализации оформления обучения
#LX_duel — дуэли с интересными каналами
#LX_events — еженедельный анонс событий сферы обучения
#LX_start — советы начинающим
#LX_mentor — про менторство и мой опыт в роли ментора и менти
#LX_product — про образование как продукт
#LX_talks — подкасты с экспертами сферы обучения, основателями EdTech компаний
#LX_video — новые видео на моем канале Youtube
#заметкипеддизайнера — идеи, мысли и рассуждения про методологию и педдизайн

Присоединяйтесь и получайте доступ к знаниям глобального EdTech-сообщества! 🌏

Коротко о модульных сетках в дизайне 🍀

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

Вчера прочитала книгу Модульные системы в графическом дизайне. Пособие для графиков, типографов и оформителей выставок
Автор: Йозеф Мюллер-Брокманн, графический дизайнер и преподаватель, пионер швейцарского графического дизайна.

Делюсь инсайтами и конспектом 👌

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

Конспект: http://bit.ly/2Rbi6zl

А еще:
Книга: https://www.ozon.ru/context/detail/id/145757007
Плакаты Йозефа Мюллер-Брокманна - для вдохновения: https://awdee.ru/15-josef-muller-brockmann-posters/

#LX_design #LX_advice

Тренируем насмотренность и вёрстку

Во-первых, зачем
Чтобы быстрее делать визуально привлекательные курсы и любые обучающие материалы.

Во-вторых, как
1) Годами практиковать
2) Смотреть примеры курсов
3) Использовать тренажёры

В статье блога iSpring про 20 полезных ресурсов для создания курсов есть подборка таких тренажёров.

🔥 Can’t Unsee
Поможет запомнить правила UX-дизайна. Есть две картинки, нужно выбрать лучшую. Сначала кажется просто, но потом начинаешь замечать мелкие различия в дизайне. Невозможно развидеть.
https://cantunsee.space/

🔥 Тренажёр Ильяхова
То же самое, только с текстами. Два варианта, оба не идеальные, но один немного лучше другого. Жалко, что нет обратной связи с правилами, но зато есть книжка и сайт.
http://maximilyahov.ru/trenazher/

🔥 Вкусомер от Студии Артемия Лебедева
Проверяет дизайнерский вкус. Вам предлагают примеры дизайна, нужно оценить: ок или не ок.
https://vkusomer.artlebedev.ru/

Всё, теперь вам есть, чем заняться в дороге и в очереди 👌😋


Кстати, посты про полезные ресурсы по тегу #LX_advice
А здесь всё про дизайн #LX_design

Ещё четыре способа тренировать насмотренность

Расскажу, как мы в команде тренируем визуальную насмотренность - классные слайды и решения по верстке и дизайну.

👀 Heroes_bank
У нас есть отдельный канал в slack, куда мы по темам складываем удачные слайды, примеры дизайнов, которые считаем визуально привлекательными. Это своеобразный банк идей, куда можно зайти за вдохновением. Можно организовать такую штуку даже в папках.

👀 Внутреннее тестирование
На каждый новый курс мы назначаем ответственного за просмотр и тестирование. Он проверяет навигацию, дает рекомендации по контенту, дизайну и UX. И заодно смотрит курс. Я распределяю проекты поровну, так что у каждого есть возможность посмотреть разные курсы других.

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

👀 Обучение
Каждый понедельник мы проводим в команде встречу по развитию - Level Up. Один день - одна тема. Например, hero прошел курс от Bonnie&Slide и провел мастер-класс для остальных по визуализации.
Кстати, у них на сайте тоже можно посмотреть крутые примеры. https://bank.bonnieandslide.com/

🤔 Что еще пробовали, но пока не зашло
➖ делать подборки на Pinterest - лично я забываю туда заходить, в slack удобнее
➖ создавать шаблоны курсов и отдельных слайдов - пользуемся, но это никак не систематизировано, сложно искать.

🤓 Поделитесь, как вы тренируете визуальную насмотренность, я подготовлю новый пост с вашими рекомендациями. Напишите боту @LXnotes_bot чтобы не потерять 👌

#LX_design

Фиолетовые сайты

В поисках вдохновения набрела на тренды дизайна 2019 года от Shutterstock. Теперь понимаю, почему все сайты вокруг фиолетовые и неоновые с геометрией 😜

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

Ждем трендов 2020.
https://www.shutterstock.com/blog/trends/2019-creative-trends

#LX_design

— Как подобрать цвета для курса?
— Взять из иллюстрации

Ещё пара быстрых способов сделать шаблон для курса:
— растянуть фрагмент сайта или картинки
— взять цвета из корпоративного сайта

#LX_design

​​Схемы визуализации

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

https://www.visual-literacy.org/periodic_table/periodic_table.html

#LX_design

​​Для тех, кто создает инструкции

Галерея шаблонов Miro — это не только хороший ресурс для тренировки насмотренности на разные фреймворки для проведения встреч, обучения и работы над проектами.
Здесь можно подсмотреть, как оформлять инструкции к этим фреймворкам. Например, в шаблоне Stinky Fish от Hyper Island сразу понятно, откуда начать, что делать дальше и что скачать, чтобы пользоваться.

https://miro.com/miroverse/
#LX_design #заметки_педдизайнера

Только что заметила, что Google docs появился формат текста "контрольный список."
То есть можно делать чек-листы, списки дел и планы развития составлять))

#LX_design

Я — не дизайнер

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

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

Вот для чего я использовала Canva:
- обложки для роликов и вся визуализация канала Youtube - вот тут можно посмотреть #LX_video
- обложки для подкаста #LX_talks
- визуализация для слайдов вебинара, ключевые красивые слайды
- логотип проекта IDEVA studio когда я думала уйти во фриланс и делать курсы на заказ
- дизайн для сайта evaraa.ru - давно стоит задача обновить, но руки пока не доходят

Скачивайте Canva по ссылке: canva.me/lxnotes и делитесь в комментариях, что вы там делаете.

#LX_design - тут все посты про визуализацию
#реклама от души

Визуальная насмотренность

Тренируем вместе, cмотрим хайлайты 2021 года на платформе Unsplash.

Обожаю этот ресурс, беру оттуда визуал для анонсов по понедельникам. Для тех, кто ищет свободные для использования изображения для курсов и еще не знает про Unsplash — рекомендую.

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

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

https://unsplash.com/blog/2021-in-review

#LX_design

Узнавать себя через других людей

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

Вчера на встрече методических команд холдинга Skillbox одной из задач был нетворкинг. Ребята встречаются второй раз, в zoom, считай, не знакомы друг с другом. Я дала простое упражнение: в группах заполнить слайд о себе, ответить на несколько вопросов каждому и вместе найти что-то общее. В итоге есть презентация с короткими описаниями про каждого, можно после встречи посмотреть другие слайды, найти единомышленников, найти коллег, которые разрабатывают курсы по той же теме.

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

— О! Восхищение. Почему я восхищаюсь этим человеком?
— Этому завидую. Почему?
— Злость. Что в этом меня так злит?
— А почему здесь я радуюсь?

Вот что меня триггернуло, когда я читала презентации других (и почему, на мой взгляд):
- Я побывала в 41 стране - тоже хочу 41, пока только 14
- Была в 45+ российских городах - я не считала, но кажется много где была в России
- Прыгал с парашютом с 2000 м - тоже прыгала, в тандеме с 4000
- Погружался с аквалангом на затонувший корабль на 35 метров - боюсь плавать до ужаса
- Я делаю обучение Режиссуры кино, Дизайн звука, Видеомонтаж - люблю снимать и монтировать видео
- Создаю курсы по Data Science - интересно разобраться хотя бы поверхностно
- Люблю рисовать картины - тоже люблю, но рисую редко

Вывод такой.
Рефлексия через других в курсе может случиться, а может — нет. Если в какой-то части курса для вас важно организовать пространство для самопознания — проектируйте рефлексию через других. Это могут быть вопросы, задания или просто пауза для изучения и наблюдения.


#LX_design #LX_author
@lxnotes

Смотрите, как можно визуализировать оценку контента - от блеклого до яркого. Как бы намекая, какую звезду выбрать.

На картинке — пример из письма Авиасейлз

#LX_design

Как создавать обучение в Метавселенной

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

Вчера я прошла короткий курс в LinkedIn Learn Designing Learning Experiences in the Metaverse, и по итогам получился небольшой конспект

Рекомендую курс вместо сериала на 1-2 вечера, и интересно, и полезно 🙂

#LX_design