Татьяна Соколовская про правило близости (https://designpub.ru/%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D0%BE-%D0%B1%D0%BB%D0%B8%D0%B7%D0%BE%D1%81%D1%82%D0%B8-540012265d16) в дизайне.
С примерами.
#LX_design
С примерами.
#LX_design
Medium
Правило близости
Дизайнеры часто ставят дизайн на первое место и оправдывают неряшливость работ словами: “здесь такой творческий замысел” или “такая…
Всем привет! ✌️
В эфире рубрика #LX_design – говорим про законы UX-дизайна, которые можно использовать в проектировании онлайн обучения. Часть 4 из 10. Остальные по тегу #LX_design Поехали!
Сегодня речь пойдет про Закон Прагнанца - Law of Prägnanz
Это один из гештальт-принципов восприятия, также известный как закон хорошей конфигурации, закон простоты, закон точности. «Pragnanz» — это немецкое слово, означающее краткость, четкость.
Закон звучит так:
📎Люди воспринимают и интерпретируют двусмысленные или сложные изображения как самую простую возможную форму, потому что именно интерпретация требует наименьшего познавательного усилия.
People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.
Человеческий глаз любит находить простоту и порядок в сложных формах, потому что это мешает нам переполняться информацией. Мы упрощаем формы, которые видим.
📝Как это учитывать в дизайне обучения:
✏️ Используйте простые формы. Вместо сложных изображений выберите иконки – обучение будет легче для восприятия.
✏️ Помещайте блоки текста в курсе (и другие элементы) равноудалено друг от друга, выравнивайте элементы по сетке. Так картинка будет визуально гармоничнее.
✏️ Старайтесь не перекрывать блоки друг другом (например, помещая часть картинки за текстом), это усложняет восприятие.
✏️ В выравнивании текстов, картинок, видео стремитесь к завершенным простым фигурам – круг, крадрат, треугольник.
✏️ Если вы создаете иллюстрации самостоятельно (например, делаете скрайб-конспект встречи или рисуете стрелки и иконки), не стремитесь добиться фотографического сходства – достаточно обозначить очертания предметов с помощью простых форм.
Посмотрите пару страниц из книги Майка Роуди «Визуальные заметки» – простые фигуры проще воспринимать и проще рисовать.
Успехов! 😉
В эфире рубрика #LX_design – говорим про законы UX-дизайна, которые можно использовать в проектировании онлайн обучения. Часть 4 из 10. Остальные по тегу #LX_design Поехали!
Сегодня речь пойдет про Закон Прагнанца - Law of Prägnanz
Это один из гештальт-принципов восприятия, также известный как закон хорошей конфигурации, закон простоты, закон точности. «Pragnanz» — это немецкое слово, означающее краткость, четкость.
Закон звучит так:
📎Люди воспринимают и интерпретируют двусмысленные или сложные изображения как самую простую возможную форму, потому что именно интерпретация требует наименьшего познавательного усилия.
People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.
Человеческий глаз любит находить простоту и порядок в сложных формах, потому что это мешает нам переполняться информацией. Мы упрощаем формы, которые видим.
📝Как это учитывать в дизайне обучения:
✏️ Используйте простые формы. Вместо сложных изображений выберите иконки – обучение будет легче для восприятия.
✏️ Помещайте блоки текста в курсе (и другие элементы) равноудалено друг от друга, выравнивайте элементы по сетке. Так картинка будет визуально гармоничнее.
✏️ Старайтесь не перекрывать блоки друг другом (например, помещая часть картинки за текстом), это усложняет восприятие.
✏️ В выравнивании текстов, картинок, видео стремитесь к завершенным простым фигурам – круг, крадрат, треугольник.
✏️ Если вы создаете иллюстрации самостоятельно (например, делаете скрайб-конспект встречи или рисуете стрелки и иконки), не стремитесь добиться фотографического сходства – достаточно обозначить очертания предметов с помощью простых форм.
Посмотрите пару страниц из книги Майка Роуди «Визуальные заметки» – простые фигуры проще воспринимать и проще рисовать.
Успехов! 😉
Привет! ✌️
Поделюсь короткой памяткой по созданию презентаций (спасибо за идею дружественному каналу 😉)
Готовила для коллег, которые выступают перед аудиторией, но очень подойдёт для подготовки презентации для обучения 🤓
Можно распечатать и использовать как чек-лист ✅
❓Кстати, скажите честно, вы начинаете создание презентации сразу в Power Point 🎬 или делаете сначала наброски (например, на бумаге или в программе)🗒?
#LX_design
#заметкипеддизайнера
Поделюсь короткой памяткой по созданию презентаций (спасибо за идею дружественному каналу 😉)
Готовила для коллег, которые выступают перед аудиторией, но очень подойдёт для подготовки презентации для обучения 🤓
Можно распечатать и использовать как чек-лист ✅
❓Кстати, скажите честно, вы начинаете создание презентации сразу в Power Point 🎬 или делаете сначала наброски (например, на бумаге или в программе)🗒?
#LX_design
#заметкипеддизайнера
Электронные курсы. Разбор полётов
анализ курсов: что хорошо, что не очень
⭐️Николай Дворников
⭐️Сергей Снегирёв
❗️Смотрим по критериям:
👉Первое впечатление, обложка курса
➕легкая подача, обращение к пользователю
➕кнопка "Вперёд"
➕дизайн, стиль курса
➖на обложке написано "электронный курс" - можно убрать
➖на обложке нет ни одной кнопки, не понятно, что делать
➖нет реакции курсора при наведении
➖"глянцевые" кнопки
➖меню на обложке и элементы навигации - лишнее
👉Элементы навигации
➕контекстная навигация вместо "далее"
➕кнопки очевидны и достаточно крупные, чтобы нажать
➕варианты ответа - область, а не текст (картинка с продуктом)
➕вспомогательный текст (выберите два варианта, нажмите "ответить") может быть лишним, но он может помогать дать правильный ответ, побудить к действию
➖малозаметные элементы навигации - для мобильных телефонов будет не удобно
➖неудачное сочетание шрифтов с засечками и без
➖кнопки навигации не должны состоять просто из текста, должен быть фон, вид кнопки
➖"нажмите продолжить, чтобы продолжить" - кнопка "дальше" может называться по-другому
👉Вёрстка и текст
➕любое выделение текста должно быть оправдано
➖проверять лишние пробелы, мелочи, которые могут "резать" слайд (особенно при использовании автоматизированных боксов)
➖любая полупрозрачность - большой риск, делать однородный фон
➖не экономить место на слайде - больше свободного места, чтобы текст не прилипал к границам
➖"висячие" предлоги - переносить на следующую строку
➖жирный шрифт - важный текст, а не любой
➖исправлять ошибки, вычитывать текст
➖Вы или вы - нужно договорится, какое обращение
➖е или ё - тоже нужно договариваться
👉Графика
➕единая визуализация - отрисовка и фотографии из стока должны сочетаться, или не быть вместе
➕цветовое кодирование: верно - зеленым, неверно - серым (красный может раздражать)
➖стоковые фотографии - зло или нужно внимательно подбирать сюжеты близкие к реальности
➖большой объем текста не выравнивать по центру - сложно читать
➖при неправильно ответе давать развёрнутый ответ (но это сложно сделать в множественном выборе)
👉Персонажи
➕сотрудник компании - лучший персонаж (но может быть риск, если сотрудник получил негативную репутацию)
➕рисованные персонажи - тоже отличный вариант
👉Механика (использование средств разработки)
➕калькулятор в виде слайдера (шкала оценки, а не дискретный выбор)
➖механика drag n drop иногда усложняет пользование курсом (когда можно выбрать более простую механику), но идеально для темы подбора дресс-кода.
#LX_design
#заметкипеддизайнера
анализ курсов: что хорошо, что не очень
⭐️Николай Дворников
⭐️Сергей Снегирёв
❗️Смотрим по критериям:
👉Первое впечатление, обложка курса
➕легкая подача, обращение к пользователю
➕кнопка "Вперёд"
➕дизайн, стиль курса
➖на обложке написано "электронный курс" - можно убрать
➖на обложке нет ни одной кнопки, не понятно, что делать
➖нет реакции курсора при наведении
➖"глянцевые" кнопки
➖меню на обложке и элементы навигации - лишнее
👉Элементы навигации
➕контекстная навигация вместо "далее"
➕кнопки очевидны и достаточно крупные, чтобы нажать
➕варианты ответа - область, а не текст (картинка с продуктом)
➕вспомогательный текст (выберите два варианта, нажмите "ответить") может быть лишним, но он может помогать дать правильный ответ, побудить к действию
➖малозаметные элементы навигации - для мобильных телефонов будет не удобно
➖неудачное сочетание шрифтов с засечками и без
➖кнопки навигации не должны состоять просто из текста, должен быть фон, вид кнопки
➖"нажмите продолжить, чтобы продолжить" - кнопка "дальше" может называться по-другому
👉Вёрстка и текст
➕любое выделение текста должно быть оправдано
➖проверять лишние пробелы, мелочи, которые могут "резать" слайд (особенно при использовании автоматизированных боксов)
➖любая полупрозрачность - большой риск, делать однородный фон
➖не экономить место на слайде - больше свободного места, чтобы текст не прилипал к границам
➖"висячие" предлоги - переносить на следующую строку
➖жирный шрифт - важный текст, а не любой
➖исправлять ошибки, вычитывать текст
➖Вы или вы - нужно договорится, какое обращение
➖е или ё - тоже нужно договариваться
👉Графика
➕единая визуализация - отрисовка и фотографии из стока должны сочетаться, или не быть вместе
➕цветовое кодирование: верно - зеленым, неверно - серым (красный может раздражать)
➖стоковые фотографии - зло или нужно внимательно подбирать сюжеты близкие к реальности
➖большой объем текста не выравнивать по центру - сложно читать
➖при неправильно ответе давать развёрнутый ответ (но это сложно сделать в множественном выборе)
👉Персонажи
➕сотрудник компании - лучший персонаж (но может быть риск, если сотрудник получил негативную репутацию)
➕рисованные персонажи - тоже отличный вариант
👉Механика (использование средств разработки)
➕калькулятор в виде слайдера (шкала оценки, а не дискретный выбор)
➖механика 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
Грамотный дизайн лонгрида способен превратить простыню текста в настоящее приключение и увлечь. Он не только удерживает внимание на время чтения, но заставляет возвращаться к материалу через какое-то время.
Самые интересные на мой вкус:
🌟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
blog.tilda.cc
37 лонгридов с отличным дизайном
Список лучших лонгридов с комментариями дизайнеров команды Tilda Publishing
Короткий ролик про теорию цвета от Ольги Жолудовой (Nancy Pong)
Образец понятного изложения и приятного дизайна 😍
Продолжительность: 6:30
🌈 Что такое тон, насыщенность и яркость цвета?
🌈 Почему цветовой круг - это круг?
🌈 Как наконец-то разобраться в разных цветовых схемах?
🌈 Что такое вибрация цвета?
🌈 Как сбалансировать дизайн с помощью цвета?
🌈 О чём говорит цвет?
🌈 Причём здесь Ван Гог?
Приятного просмотра! ❤️💛💚💙💜
https://ux-journal-nancy-pong.wistia.com/medias/g29yxa969v
#LX_design
Образец понятного изложения и приятного дизайна 😍
Продолжительность: 6:30
🌈 Что такое тон, насыщенность и яркость цвета?
🌈 Почему цветовой круг - это круг?
🌈 Как наконец-то разобраться в разных цветовых схемах?
🌈 Что такое вибрация цвета?
🌈 Как сбалансировать дизайн с помощью цвета?
🌈 О чём говорит цвет?
🌈 Причём здесь Ван Гог?
Приятного просмотра! ❤️💛💚💙💜
https://ux-journal-nancy-pong.wistia.com/medias/g29yxa969v
#LX_design
В блоге "Продуктовый дизайн" занятная статья про метафоры в интерфейсе
(давайте-ка возрождать рубрику #LX_design, м?)
Некоторые цитаты
💡От метафор зависит, насколько интуитивным будет дизайн. Если дизайн строится на реальных и узнаваемых понятиях, людям будет проще его понять. А если взять за основу дизайна нечто абстрактное, есть вероятность, что пользователи будут почесывать голову.
💡Работая над каждым элементом дизайна, всегда старайтесь подобрать подходящую метафору — и у вас появятся новые идеи и решения привычных задач. А если получится провести параллели с реальным миром — вашим пользователям будет проще на лету ухватить суть каждого элемента.
💡В целом, метафоры нужны, чтобы помочь людям понять какую-то концепцию. Но если метафора слишком абстрактна, она только мутит воду.
В конце статьи советы, как тренировать своё мышление на придумывание метафор.
Спойлер: картинки, идиомы, синонимы, связанные по контенсту слова
Всё равно дочитайте до конца. Я ушла с головой во все эти ссылки на целый час жизни.
https://goo.gl/RdFXfw
(давайте-ка возрождать рубрику #LX_design, м?)
Некоторые цитаты
💡От метафор зависит, насколько интуитивным будет дизайн. Если дизайн строится на реальных и узнаваемых понятиях, людям будет проще его понять. А если взять за основу дизайна нечто абстрактное, есть вероятность, что пользователи будут почесывать голову.
💡Работая над каждым элементом дизайна, всегда старайтесь подобрать подходящую метафору — и у вас появятся новые идеи и решения привычных задач. А если получится провести параллели с реальным миром — вашим пользователям будет проще на лету ухватить суть каждого элемента.
💡В целом, метафоры нужны, чтобы помочь людям понять какую-то концепцию. Но если метафора слишком абстрактна, она только мутит воду.
В конце статьи советы, как тренировать своё мышление на придумывание метафор.
Спойлер: картинки, идиомы, синонимы, связанные по контенсту слова
Всё равно дочитайте до конца. Я ушла с головой во все эти ссылки на целый час жизни.
https://goo.gl/RdFXfw
Medium
Метафоры и аналогии в продуктовом дизайне
Как метафора может определить судьбу вашего дизайна
Попалась на глаза короткая статья Пишем интерфейсный текст: 15 правил для дизайнеров. Автор: Ника Бабич, главный редактор UX Planet 🤘
Для справки
Интерфейсный текст включает в себя кнопки и пункты меню, сообщения об ошибках, советы по безопасности, правила и инструкции. Его основная цель — направлять пользователя и помогать ему взаимодействовать с продуктом
🤓Что полезного я нашла для создания онлайн-курсов?
В нашей реальности мы поговорим про текст в элементах навигации, уведомлениях, обратной связи на ошибки, подсказках. В общем, любой вспомогательный текст курса.
Написала свой заметки в статье — получилось 14 пунктов
https://goo.gl/FvQKNp
#LX_articles
#LX_design
Для справки
Интерфейсный текст включает в себя кнопки и пункты меню, сообщения об ошибках, советы по безопасности, правила и инструкции. Его основная цель — направлять пользователя и помогать ему взаимодействовать с продуктом
🤓Что полезного я нашла для создания онлайн-курсов?
В нашей реальности мы поговорим про текст в элементах навигации, уведомлениях, обратной связи на ошибки, подсказках. В общем, любой вспомогательный текст курса.
Написала свой заметки в статье — получилось 14 пунктов
https://goo.gl/FvQKNp
#LX_articles
#LX_design
Medium
Пишем интерфейсный текст для онлайн-курса: 14 правил для педдизайнеров
Попалась на глаза короткая статья Пишем интерфейсный текст: 15 правил для дизайнеров. Автор: Ника Бабич, главный редактор UX Planet 🤘…
Подборка статей по UX дизайну
Собрала для вас ТОП-10 статей осени из блога UX Notes, которые помогут сделать курсы более user friendly
📎 Как сообщать, какие поля обязательны для заполнения
Каких полей должно быть больше и какой текст лучше использовать в подсказках
📎 Как применять закон Миллера в дизайне
Оказывается, тот самый закон про 7±2 элемента не такой уж применимый в реальной жизни. И про магическое число «4»
📎 Как сделать карусель в смартфоне
Будет полезно для тех, кто проектирует курсы только для мобилки
📎 Как не сгореть на работе
Гайд по выживанию для новичков, юных и профессиональных дизайнеров. Нам тоже подойдут
📎 Как подписывать таймлайны и графики
Если много данных и мало места для подписи. Как на слайде или инфографике
📎 Как оценить качество продукта
Если курс — это продукт, в этом списке много показательных метрик
📎 Как писать подсказки для пользователей
Нажмите на стрелку, чтобы продолжить или как?
📎 Как создать у пользователя состояние потока
Чтобы он дольше находился на странице. Или в курсе
📎 Как верстать таблицы и списки
Когда много линий и много однородного текста
📎 Как и зачем создавать раскадровки при проектировании
Возможно, это никогда не пригодится. Но если решите делать - будете лучше представлять своего пользователя и продукт!
#LX_design
#LX_advice
Собрала для вас ТОП-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-сообщества! 🌏
Я — Евгения, дизайнер образовательного опыта и человек, развивающий других людей 🤓
В этом блоге я делюсь находками в области проектирования образовательной среды, помогаю новичкам, экспертам и компаниям создавать классные программы обучения 🚀
👉 Каждый понедельник на канале анонс событий на неделю для тех, кто работает в обучении. Можно читать канал сначала или найти нужную тему по тегу 👇
📚Библиотека знаний 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-сообщества! 🌏
👍9❤1