4 сервиса для подбора палитры цветов
Подобрать цветовую схему — это половина успеха в дизайне сайта. От правильной палитры зависит настроение сайта и то, как его воспринимают пользователи. Главное — найти подходящее сочетание. Подобрал для вас 4 полезных сервиса:
1. Color-hex — информация о цвете в различных цветовых моделях
Сайт дает детальную информацию о заданном цвете, подбирая гармоничные оттенки и подходящие цвета для палитры.
2. Brand Colors — Коллекция фирменных цветов крупнейших брендов
Большая коллекция официальных цветовых кодов различных компаний. Удобный поиск и возможность сразу сохранить CSS файл с кодами.
3. Coolors — набор инструментов для создания цветовых палитр
Наиболее обширный сервис для создания палитр, что мне довелось найти. Можно искать по готовым примерам или создать свою палитру, также есть возможность сгенерить палитру из картинки, проверить контрастность палитры и даже перекрасить SVG графику.
4. Material Color Tool — генератор палитры от Material Design
Незаменимый инструмент если нужно сгенерировать правильные основные цвета для популярной библиотеки. Можно также предварительно посмотреть как цвета будут смотреться в приложении. На выходе получаем готовый код от которого разработчики будут в восторге.
На этом все! Вдарьте по реакциям если хотите больше таких подборок.
Подобрать цветовую схему — это половина успеха в дизайне сайта. От правильной палитры зависит настроение сайта и то, как его воспринимают пользователи. Главное — найти подходящее сочетание. Подобрал для вас 4 полезных сервиса:
1. Color-hex — информация о цвете в различных цветовых моделях
Сайт дает детальную информацию о заданном цвете, подбирая гармоничные оттенки и подходящие цвета для палитры.
2. Brand Colors — Коллекция фирменных цветов крупнейших брендов
Большая коллекция официальных цветовых кодов различных компаний. Удобный поиск и возможность сразу сохранить CSS файл с кодами.
3. Coolors — набор инструментов для создания цветовых палитр
Наиболее обширный сервис для создания палитр, что мне довелось найти. Можно искать по готовым примерам или создать свою палитру, также есть возможность сгенерить палитру из картинки, проверить контрастность палитры и даже перекрасить SVG графику.
4. Material Color Tool — генератор палитры от Material Design
Незаменимый инструмент если нужно сгенерировать правильные основные цвета для популярной библиотеки. Можно также предварительно посмотреть как цвета будут смотреться в приложении. На выходе получаем готовый код от которого разработчики будут в восторге.
На этом все! Вдарьте по реакциям если хотите больше таких подборок.
👍29🔥8
Как создать качественную цветовую палитру #2 — метод 60-30-10
Мы уже разобрали как нужно подбирать цвета в палитре в первом посте из цикла. Сегодня рассмотрим метод, который поможет грамотно комбинировать цвета в композиции.
Правило 60-30-10 изначально использовалось в дизайне интерьеров, но оно также идеально подходит и для цифровых продуктов.
Правило очень простое и звучит так:
60% — пространства предназначено для основного цвета;
30% — для вторичного цвета;
10% — акцент и сопровождающий цвет;
Можно использовать эти пропорции, чтобы найти правильный баланс в сочетании цветов, не превращая пользовательский интерфейс в красочную смесь.
Считается, что такие пропорции приятны человеческому глазу и позволяют легко воспринимать общую композицию тем самым направляя пользователя через интерфейс.
Также можете поэкспериментировать и применять цвета в другом порядке, и это все равно будет работать.
Мы уже разобрали как нужно подбирать цвета в палитре в первом посте из цикла. Сегодня рассмотрим метод, который поможет грамотно комбинировать цвета в композиции.
Правило 60-30-10 изначально использовалось в дизайне интерьеров, но оно также идеально подходит и для цифровых продуктов.
Правило очень простое и звучит так:
60% — пространства предназначено для основного цвета;
30% — для вторичного цвета;
10% — акцент и сопровождающий цвет;
Можно использовать эти пропорции, чтобы найти правильный баланс в сочетании цветов, не превращая пользовательский интерфейс в красочную смесь.
Считается, что такие пропорции приятны человеческому глазу и позволяют легко воспринимать общую композицию тем самым направляя пользователя через интерфейс.
Также можете поэкспериментировать и применять цвета в другом порядке, и это все равно будет работать.
👍28🔥1
Топ самых необходимых инструментов для начинающих UX дизайнеров
Я уже писал ранее о софт и хард скилах и с чего начать изучение UX.
В сегодняшней подборке — инструменты, которыми с моей точки зрения полезно овладеть любому новичку в UX дизайне.
Исследования
Любой основательный UX проект начинается с исследования. Чтобы выявить проблемы, связанные с навигацией по сайту достаточно сервисов от Яндекс.Метрика, Google Analytics или Hotjar. Для мобильных приложений есть аналогичные сервисы Firebase и UXCam. В последнем также есть инструменты, которые помогут вам проанализировать проблемы связанные с интерфейсом.
Пользовательские опросы и интервью
Лучший инструмент для пользовательских интервью — бумага и ручка :) Проводите интервью по возможности вживую в среде, где пользователь пользуется вашим продуктом, а не онлайн. Если нужно интегрировать опросы и получить обратную связь прямо в продукте, в этом вам помогут сервисы UserReport и GetFeedback
Стратегическое планирование и создание информационной архитектуры
Для создания визуальных карт путешествия клиента, пользовательских потоков и персон подойдет сервис от FlowMapp. Для планирования и работы в команде очень удобны также Miro и Fig Jam. Тут всё необходимое для действительно совместного процесса проектирования —можно и карту сайта нарисовать и интерактивно организовать работу над проектом.
Создание вайрфреймов и макетов
Когда дело доходит до проектирования интерфейсов не обойтись без Figma, Adobe XD или Sketch. Можно посветить отельную статью какой продукт лучший. Работайте с тем, который вам по душе.
Базовое прототипирование
Если работаете на Sketch — наиболее легко собирать простые прототипы в InVision. Для более сложных анимаций подойдет приложение Marvel. В Figma анимированные прототипы делаются прямо в самом приложении.
Hi-Fi прототипы
Если в ваши задачи входит создать сложный прототип близкий по функционалу к реальному продукту в этом вам помогут такие приложения как
Proto.io, Framer или Origami
В них можно создавать интерактивные формуляры, работать с живыми данными и переменными.
Это далеко не все приложения которые есть на рынке, но статья и без того получилась довольно длинной. Если было полезно — вдарьте по реакциям! А какими инструментами пользуетесь вы? Напишите в комментариях.
Я уже писал ранее о софт и хард скилах и с чего начать изучение UX.
В сегодняшней подборке — инструменты, которыми с моей точки зрения полезно овладеть любому новичку в UX дизайне.
Исследования
Любой основательный UX проект начинается с исследования. Чтобы выявить проблемы, связанные с навигацией по сайту достаточно сервисов от Яндекс.Метрика, Google Analytics или Hotjar. Для мобильных приложений есть аналогичные сервисы Firebase и UXCam. В последнем также есть инструменты, которые помогут вам проанализировать проблемы связанные с интерфейсом.
Пользовательские опросы и интервью
Лучший инструмент для пользовательских интервью — бумага и ручка :) Проводите интервью по возможности вживую в среде, где пользователь пользуется вашим продуктом, а не онлайн. Если нужно интегрировать опросы и получить обратную связь прямо в продукте, в этом вам помогут сервисы UserReport и GetFeedback
Стратегическое планирование и создание информационной архитектуры
Для создания визуальных карт путешествия клиента, пользовательских потоков и персон подойдет сервис от FlowMapp. Для планирования и работы в команде очень удобны также Miro и Fig Jam. Тут всё необходимое для действительно совместного процесса проектирования —можно и карту сайта нарисовать и интерактивно организовать работу над проектом.
Создание вайрфреймов и макетов
Когда дело доходит до проектирования интерфейсов не обойтись без Figma, Adobe XD или Sketch. Можно посветить отельную статью какой продукт лучший. Работайте с тем, который вам по душе.
Базовое прототипирование
Если работаете на Sketch — наиболее легко собирать простые прототипы в InVision. Для более сложных анимаций подойдет приложение Marvel. В Figma анимированные прототипы делаются прямо в самом приложении.
Hi-Fi прототипы
Если в ваши задачи входит создать сложный прототип близкий по функционалу к реальному продукту в этом вам помогут такие приложения как
Proto.io, Framer или Origami
В них можно создавать интерактивные формуляры, работать с живыми данными и переменными.
Это далеко не все приложения которые есть на рынке, но статья и без того получилась довольно длинной. Если было полезно — вдарьте по реакциям! А какими инструментами пользуетесь вы? Напишите в комментариях.
❤40🔥13👍5
Воскресный дайджест. Посты, которые вышли на этой неделе:
\ Определяем правильный интерлиньяж
\ Как восстановить доверие клиентов
\ Иконка зеленого для пешехода в разных странах
\ 4 сервиса для подбора палитры цветов
\ Как создать качественную цветовую палитру #2 — метод 60-30-10
\ Топ самых необходимых инструментов для начинающих UX дизайнеров
Если было полезно, дайте знать в реакциях. Завтра как обычно опрос по контенту на следующую неделю. Если хотите увидеть на канале конкретные темы, пишите в бот @uxtrendsbot. До завтра!
\ Определяем правильный интерлиньяж
\ Как восстановить доверие клиентов
\ Иконка зеленого для пешехода в разных странах
\ 4 сервиса для подбора палитры цветов
\ Как создать качественную цветовую палитру #2 — метод 60-30-10
\ Топ самых необходимых инструментов для начинающих UX дизайнеров
Если было полезно, дайте знать в реакциях. Завтра как обычно опрос по контенту на следующую неделю. Если хотите увидеть на канале конкретные темы, пишите в бот @uxtrendsbot. До завтра!
👍12🔥4❤1
Выбираем темы на эту неделю. Выйдут 4 из 5:
Final Results
14%
Визуализация Ч.5 - проектирование интерфейса
23%
Зачем нужны ментальные карты и как их строить
27%
Психология в дизайне - эффект приманки
14%
Как создать качественную цветовую палитру #3 - работа с контрастом
22%
Основы UX дизайна - эффект изоляции
👍8
Три вопроса, на которые не может ответить джуниор UX-дизайнер
Собесы - как правило, стресс для любого джуна (и не только) так как из-за напряжения можно наговорить всякой ерунды. К тому же многие работодатели не ограничиваются просьбами рассказать о себе и показать портфолио.
Недавно нашел статью, в которой автор доходчиво рассказывает к каким вопросам нужно заранее подготовится каждому молодому UX дизайнеру. Очень полезный материал, особенно если вы в процессе поиска новой работы.
https://design-glory.com/tri-voprosa-na-kotorye-ne-mozhet-otvetit-dzhunior-ux-dizajner/
Собесы - как правило, стресс для любого джуна (и не только) так как из-за напряжения можно наговорить всякой ерунды. К тому же многие работодатели не ограничиваются просьбами рассказать о себе и показать портфолио.
Недавно нашел статью, в которой автор доходчиво рассказывает к каким вопросам нужно заранее подготовится каждому молодому UX дизайнеру. Очень полезный материал, особенно если вы в процессе поиска новой работы.
https://design-glory.com/tri-voprosa-na-kotorye-ne-mozhet-otvetit-dzhunior-ux-dizajner/
👍38❤2😁1
Эффект приманки
Очень простой но зато действенный хак, чтобы подтолкнуть людей принять определенное решение. В маркетинге этот эффект используется, чтобы продать покупателю более дорогой товар.
Как он действует, проще всего объяснить на примере. Вы хотите купить попкорн — на выбор три разные по объему порции. Причем средняя стоит не намного меньше, чем самая большая. Большинство склонны взять именно большую порцию т.к. разница в цене несущественная, чего собственно и хочет продавец. Средняя порция выступает в данном примере приманкой как дополнительный, чуть менее привлекательный вариант.
Благодаря тому, что выбор мы делаем вполне осознанный сохраняется чувство контроля и мы не замечаем подвох.
«Эффект приманки» можно использовать и в любых других сферах. Так что возьмите себе на заметку - может пригодится!
Очень простой но зато действенный хак, чтобы подтолкнуть людей принять определенное решение. В маркетинге этот эффект используется, чтобы продать покупателю более дорогой товар.
Как он действует, проще всего объяснить на примере. Вы хотите купить попкорн — на выбор три разные по объему порции. Причем средняя стоит не намного меньше, чем самая большая. Большинство склонны взять именно большую порцию т.к. разница в цене несущественная, чего собственно и хочет продавец. Средняя порция выступает в данном примере приманкой как дополнительный, чуть менее привлекательный вариант.
Благодаря тому, что выбор мы делаем вполне осознанный сохраняется чувство контроля и мы не замечаем подвох.
«Эффект приманки» можно использовать и в любых других сферах. Так что возьмите себе на заметку - может пригодится!
👍34🔥3😁3
This media is not supported in your browser
VIEW IN TELEGRAM
Смотрите, как оригинально приступили к дизайну страницы "О компании" бренд хулиганской одежды
Хороший пример, как "впихнуть" в дизайн много чего и при этом сохранить сюжетную гармоничность. Посмотрите сами: https://manifesto.androll.fr/
Хороший пример, как "впихнуть" в дизайн много чего и при этом сохранить сюжетную гармоничность. Посмотрите сами: https://manifesto.androll.fr/
🔥25👏4❤1👍1
Ментальные карты — зачем нужны и как их строить
Ментальная карта (англ. Mind map) или карта мыслей, интеллект-карта — это метод визуального структурирования большого объема информации. С помощью него можно схематично систематизировать разные данные, выбрать нужные идеи или концепты.
1. Продумать логику нового продукта
В UX дизайне этот метод очень удобен для совместного воркшопа с клиентом когда нужно понять как работает сложный сервис. Так можно очень быстро визуализировать все процессы и связи связанные с работой этого сервиса, сайта или приложения.
Пример ментальной карты CRM-системы
2. Генерирование идей
С другой стороны в дизайн-процессе этот метод очень удобен для поиска оригинальных решений. Так можно за короткое время в формате совместного мозгового штурма наработать немало оригинальных идей для решения поставленных задач.
Пример ментальной карты для названия приложения
3. Планирование
Благодаря структурированию информации можно намного проще понять поставленную задачу и в дальнейшем разбить её на подзадачи. Таким образом, вы не упустите деталий и сможете успешно спланировать работу.
На самом деле нет никаких жестких правил для создания ментальных карт. Визуально интеллект-карта напоминает дерево. В центре располагается ключевая тема, идея или проблема. От неё ответвляются задачи, ресурсы, способы решения проблемы или реализации идей.
Очень удобно в Miro или Mindmeister но можно и в FigJam
В заключение. Умение строить такого рода схемы — один из хард-скилов любого UX и продуктового дизайнера. Он поможет вам разобраться с большим объёмом информации, найти нужные решения, а также грамотно спланировать работу.
Если было полезно дайте 🔥
До скорого!
Ментальная карта (англ. Mind map) или карта мыслей, интеллект-карта — это метод визуального структурирования большого объема информации. С помощью него можно схематично систематизировать разные данные, выбрать нужные идеи или концепты.
// Когда использовать?
1. Продумать логику нового продукта
В UX дизайне этот метод очень удобен для совместного воркшопа с клиентом когда нужно понять как работает сложный сервис. Так можно очень быстро визуализировать все процессы и связи связанные с работой этого сервиса, сайта или приложения.
Пример ментальной карты CRM-системы
2. Генерирование идей
С другой стороны в дизайн-процессе этот метод очень удобен для поиска оригинальных решений. Так можно за короткое время в формате совместного мозгового штурма наработать немало оригинальных идей для решения поставленных задач.
Пример ментальной карты для названия приложения
3. Планирование
Благодаря структурированию информации можно намного проще понять поставленную задачу и в дальнейшем разбить её на подзадачи. Таким образом, вы не упустите деталий и сможете успешно спланировать работу.
// Как создать ментальную карту?
На самом деле нет никаких жестких правил для создания ментальных карт. Визуально интеллект-карта напоминает дерево. В центре располагается ключевая тема, идея или проблема. От неё ответвляются задачи, ресурсы, способы решения проблемы или реализации идей.
// В чем создавать?
Очень удобно в Miro или Mindmeister но можно и в FigJam
В заключение. Умение строить такого рода схемы — один из хард-скилов любого UX и продуктового дизайнера. Он поможет вам разобраться с большим объёмом информации, найти нужные решения, а также грамотно спланировать работу.
Если было полезно дайте 🔥
До скорого!
🔥28👍5❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Пример того, как 3D анимация меняет восприятие страницы
Нашел на просторах dribbble занятную анимацию перехода по контенту при прокрутке страницы вниз. Хоть это и концепт,
но эффект довольно интересный. Как вам такое?
Нашел на просторах dribbble занятную анимацию перехода по контенту при прокрутке страницы вниз. Хоть это и концепт,
но эффект довольно интересный. Как вам такое?
🔥67❤2👍2👎1
Эффект изоляции или эффект Ресторфф
Немецкий психолог Хедвиг Фон Ресторфф провела в 1933 году ряд экспериментов в которых выявила, что при восприятии группы схожих объектов с наибольшей вероятностью запомнится тот, который отличается от остальных.
Суть эксперимента состояла в том, что испытуемым показывали карточки со схожими словами, где одно слово сильно отличалось от общего списка. Например среди карточек с глаголами попадалась одна с существительным. После чего испытуемых просили вспомнить содержание карточек. Получалось, что большинство смогли вспомнить только 22% из схожих слов и в три раза больше (70%) из отличных от всего списка.
Аналогичным образом эффект изоляции применим и в дизайне интерфейсов. Например, выделить важный элемент цветом, размером, рамкой или расположением. Это позволит сделать объект не только более заметным, но и более запоминаемым.
Посмотрите на примере Squarespace: при выборе подходящего сервиса они явно продвигают один из своих тарифных планов больше, чем другие, благодаря более темному оттенку, надписи "Most Popular" и ее расположению прямо под кнопкой "Get Started".
Немецкий психолог Хедвиг Фон Ресторфф провела в 1933 году ряд экспериментов в которых выявила, что при восприятии группы схожих объектов с наибольшей вероятностью запомнится тот, который отличается от остальных.
Суть эксперимента состояла в том, что испытуемым показывали карточки со схожими словами, где одно слово сильно отличалось от общего списка. Например среди карточек с глаголами попадалась одна с существительным. После чего испытуемых просили вспомнить содержание карточек. Получалось, что большинство смогли вспомнить только 22% из схожих слов и в три раза больше (70%) из отличных от всего списка.
Аналогичным образом эффект изоляции применим и в дизайне интерфейсов. Например, выделить важный элемент цветом, размером, рамкой или расположением. Это позволит сделать объект не только более заметным, но и более запоминаемым.
Посмотрите на примере Squarespace: при выборе подходящего сервиса они явно продвигают один из своих тарифных планов больше, чем другие, благодаря более темному оттенку, надписи "Most Popular" и ее расположению прямо под кнопкой "Get Started".
👍12
Как создать качественную цветовую палитру #3 - работа с контрастом
Продолжаем серию постов про создание палитры. На этот раз, как несложно догадаться, речь пойдет о контрасте и как с ним правильно работать. Погнали...
Как подобрать контраст
Я уже писал в первой серии постов о том, что шрифт и задний фон должны иметь достаточную контрастность. Разница в яркости между двумя смежными цветами называется коэффициентом контрастности и имеет диапазон значений между 1 и 21. Чем больше значение, тем выше контраст. Чтобы проверить коэффициент контрастности можно воспользоваться этим инструментом contrast-ratio.com
Когда использовать низкий контраст
Более насыщенный цветовой контраст делает интерфейс более удобным для чтения и восприятия контекста, а уменьшение контрастности придает интерфейсу более ровный оттенок. Уменьшение контраста может быть полезно если у вас большое количество элементов и их нужно как-то организовать между собой как например в дашбордах или таблицах. Используя оттенки можно создать иерархию наделяя более важные элементы большим контрастом и снижая контраст для менее важной информации и заднего фона элементов. Также низкий контраст можно использовать по отношению к неактивным элементам интерфейса.
Пример из практики
В моей практике был случай, когда мне пришлось работать над мобильным приложением для фермеров. При первом тестировании бета-версии выяснилось, что пользователи жалуются на низкую контрастность, хотя во время тестирования прототипа таких жалоб не было. Оказалось, что полу-тона в условиях сильной освещенности под прямыми солнечными лучами, не очень хорошо считываются. Пришлось избавится от некоторых оттенков усилив цветовой контраст. Поэтому всегда учитывайте в каких условиях будет применяться ваш продукт.
Дайте знать в реакциях если было полезно!
Продолжаем серию постов про создание палитры. На этот раз, как несложно догадаться, речь пойдет о контрасте и как с ним правильно работать. Погнали...
Как подобрать контраст
Я уже писал в первой серии постов о том, что шрифт и задний фон должны иметь достаточную контрастность. Разница в яркости между двумя смежными цветами называется коэффициентом контрастности и имеет диапазон значений между 1 и 21. Чем больше значение, тем выше контраст. Чтобы проверить коэффициент контрастности можно воспользоваться этим инструментом contrast-ratio.com
Когда использовать низкий контраст
Более насыщенный цветовой контраст делает интерфейс более удобным для чтения и восприятия контекста, а уменьшение контрастности придает интерфейсу более ровный оттенок. Уменьшение контраста может быть полезно если у вас большое количество элементов и их нужно как-то организовать между собой как например в дашбордах или таблицах. Используя оттенки можно создать иерархию наделяя более важные элементы большим контрастом и снижая контраст для менее важной информации и заднего фона элементов. Также низкий контраст можно использовать по отношению к неактивным элементам интерфейса.
Пример из практики
В моей практике был случай, когда мне пришлось работать над мобильным приложением для фермеров. При первом тестировании бета-версии выяснилось, что пользователи жалуются на низкую контрастность, хотя во время тестирования прототипа таких жалоб не было. Оказалось, что полу-тона в условиях сильной освещенности под прямыми солнечными лучами, не очень хорошо считываются. Пришлось избавится от некоторых оттенков усилив цветовой контраст. Поэтому всегда учитывайте в каких условиях будет применяться ваш продукт.
Дайте знать в реакциях если было полезно!
👍36🔥5
Собесы, эффект приманки и ментальные карты...
Воскресенье - время недельного дайджеста. Все, что было на канале за неделю:
→ Три вопроса, на которые не может ответить джуниор UX-дизайнер
→ Эффект приманки
→ Ментальные карты
→ 3D анимация в веб
→ Эффект изоляции
→ Цветовая палитра #3 - работа с контрастом
Если было полезно вдарьте по реакциям! Это нехило мотивирует писать еще больше годного контента 🙂 До скорой!
Воскресенье - время недельного дайджеста. Все, что было на канале за неделю:
→ Три вопроса, на которые не может ответить джуниор UX-дизайнер
→ Эффект приманки
→ Ментальные карты
→ 3D анимация в веб
→ Эффект изоляции
→ Цветовая палитра #3 - работа с контрастом
Если было полезно вдарьте по реакциям! Это нехило мотивирует писать еще больше годного контента 🙂 До скорой!
👍21
По традиции выбираем темы постов на неделю. Выйдут 4 из 5:
Final Results
50%
Топ 6 частых ошибок в дизайне лэндингов
12%
Визуализация данных в интерфейсе Ч.5 - проектирование дашборда
11%
Как создать качественную цветовую палитру #4 - как подобрать цвета
14%
Инструменты управления пользователем #1 - когнитивная нагрузка
13%
Основы дизайна - Закон Хика
Почему дизайн-система не равно UI-kit
Недавно наткнулся на статью от команды Ростелекома где автор подробно разбирает почему не надо путать дизайн-систему с UI-китом.
Если очень кратко: дизайн-система это больше про взаимодействие дизайнеров и разработчиков, чем про конкретные UI компоненты. Это особенно актуально если у вас сложный продукт с массой сервисов и огромная команда. Статья конечно написана с точки зрения разрабов, не без предвзятости к дизайнерам, но от этого она будет не менее полезна для прочтения.
https://habr.com/ru/company/rostelecom/blog/684816/
Недавно наткнулся на статью от команды Ростелекома где автор подробно разбирает почему не надо путать дизайн-систему с UI-китом.
Если очень кратко: дизайн-система это больше про взаимодействие дизайнеров и разработчиков, чем про конкретные UI компоненты. Это особенно актуально если у вас сложный продукт с массой сервисов и огромная команда. Статья конечно написана с точки зрения разрабов, не без предвзятости к дизайнерам, но от этого она будет не менее полезна для прочтения.
https://habr.com/ru/company/rostelecom/blog/684816/
Хабр
Дизайн-система не равно UI-kit
Дизайн-системы и UI-киты сейчас воспринимаются как равнозначные или тождественные. Но это не так! Более того, смешивать их будет чистым дилетантством. Что недопустимо для...
👍18🔥1
Инструменты управления пользователем #1 - когнитивная нагрузка
Для любого продукта будь то приложение или онлайн сервис важно не только заинтересовать аудиторию но и удержать внимание пользователя. Это особенно актуально в высококонкурентном цифровом мире, где каждое приложение или гаджет норовят переключить наше внимание на себя.
Данной статьей открываем новую серию, надеюсь будет интересно!
Управление вниманием пользователей
Уже давно создание сайтов и приложений сводится к упрощению, стремлению не слишком сильно загружать пользователя лишним: скрыть менее важную информацию в меню, сократить количество визуальных элементов итд... Аскетичные интерфейсы просты и понятны в использовании. Это особенно помогает при выполнении целевых действий, таких как переход по навигации сайта или заполнении формуляра. Но в некоторых случаях этот путь не всегда полезен.
Если интерфейс слишком однообразен, а большая часть информации скрыта — когнитивная нагрузка сведена к минимуму. В результате наш мозг начинает скучать, теряется концентрация. Вспомните себя на скучном уроке в школе ;)
Повышаем вовлеченность за счет когнитивной нагрузки
Именно поэтому важно повысить когнитивную нагрузку в ключевых моментах будь то новая информация о сервисе, отзывы о продукте, анимация или видео. В этом случае включается рациональное мышление, повышаются эмоциональная вовлеченность, что подталкивает пользователя к принятию решений. Тут важно понять, что для принятия решения нам нужно время. Ведь не зря перед приобретением какого-то дорогостоящего товара мы долго сравниваем, читаем кучу отзывов, взвешиваем все за и против... нашему мозгу нужна эта подпитка чтобы разобраться и сделать правильный выбор.
Прекрасный пример - сервис Youtube. Благодаря бесконечной ленте с похожими видосами сервису удается удержать наше вниманию как можно дольше. Мозг постоянно стимулируется получая новую информацию и эмоции. Мы и не замечаем как увлеклись просмотромвидео с котиками стороннего контента забыв ради чего вообще пришли.
На этом все! Дайте знать в реакциях если тематика вам по душе.
Для любого продукта будь то приложение или онлайн сервис важно не только заинтересовать аудиторию но и удержать внимание пользователя. Это особенно актуально в высококонкурентном цифровом мире, где каждое приложение или гаджет норовят переключить наше внимание на себя.
Данной статьей открываем новую серию, надеюсь будет интересно!
Управление вниманием пользователей
Уже давно создание сайтов и приложений сводится к упрощению, стремлению не слишком сильно загружать пользователя лишним: скрыть менее важную информацию в меню, сократить количество визуальных элементов итд... Аскетичные интерфейсы просты и понятны в использовании. Это особенно помогает при выполнении целевых действий, таких как переход по навигации сайта или заполнении формуляра. Но в некоторых случаях этот путь не всегда полезен.
Если интерфейс слишком однообразен, а большая часть информации скрыта — когнитивная нагрузка сведена к минимуму. В результате наш мозг начинает скучать, теряется концентрация. Вспомните себя на скучном уроке в школе ;)
Повышаем вовлеченность за счет когнитивной нагрузки
Именно поэтому важно повысить когнитивную нагрузку в ключевых моментах будь то новая информация о сервисе, отзывы о продукте, анимация или видео. В этом случае включается рациональное мышление, повышаются эмоциональная вовлеченность, что подталкивает пользователя к принятию решений. Тут важно понять, что для принятия решения нам нужно время. Ведь не зря перед приобретением какого-то дорогостоящего товара мы долго сравниваем, читаем кучу отзывов, взвешиваем все за и против... нашему мозгу нужна эта подпитка чтобы разобраться и сделать правильный выбор.
Прекрасный пример - сервис Youtube. Благодаря бесконечной ленте с похожими видосами сервису удается удержать наше вниманию как можно дольше. Мозг постоянно стимулируется получая новую информацию и эмоции. Мы и не замечаем как увлеклись просмотром
На этом все! Дайте знать в реакциях если тематика вам по душе.
❤27🔥9👍1
Визуализация данных в интерфейсе Ч.5 — проектирование дашборда
Это заключительная статья из серии визуализации данных, где мы подошли наконец к самому главному - созданию информационных панелей (дашбордов).
Основная задача дашборда наглядно отобразить данные, помочь пользователю проанализировать ту информацию, которая требует его наибольшего внимания. Преобразуя числа, данные и графики в общую картину информационная панель является инструментом для принятия решений.
Можно выделить два основных типа дашбордов:
Операционный дашборд - для быстрого определения наиболее критических данных, отображение текущих ресурсов и их статуса. Основная цель - эффективно и оперативно принять решение.
Примеры: диспетчерская панель на производстве, кол-центр, биржевая платформа
Аналитический дашборд - для представления большого объема данных и аналитической информации. Основная цель – помочь пользователям оценить информацию, проанализировать тенденции и принять стратегическое решение не критичное по времени.
Примеры: анализ продаж, HR-дашборд, посещаемость сайта
Несколько советов как проектировать дашборды
— Для сравнения данных лучше всего подойдут столбчатые и линейные диаграммы.
— Для анализа взаимосвязей и распределения в основном используются диаграммы рассеяния (scatter plot) или пузырьковые диаграммы (bubble charts)
— Чтобы отобразить соотношение частей к целому используйте столбчатую диаграмму с накоплением и диаграмму с областями. Не стоит использовать секторную и кольцевую диаграммы т.к. их неудобно читать особенно в дашбордах
— Для большого количества текстовой информации имеет смысл использовать сортируемые таблицы и списки
На этом все! Получилось объемно но, думаю, максимум полезно.
Это заключительная статья из серии визуализации данных, где мы подошли наконец к самому главному - созданию информационных панелей (дашбордов).
Основная задача дашборда наглядно отобразить данные, помочь пользователю проанализировать ту информацию, которая требует его наибольшего внимания. Преобразуя числа, данные и графики в общую картину информационная панель является инструментом для принятия решений.
Можно выделить два основных типа дашбордов:
Операционный дашборд - для быстрого определения наиболее критических данных, отображение текущих ресурсов и их статуса. Основная цель - эффективно и оперативно принять решение.
Примеры: диспетчерская панель на производстве, кол-центр, биржевая платформа
Аналитический дашборд - для представления большого объема данных и аналитической информации. Основная цель – помочь пользователям оценить информацию, проанализировать тенденции и принять стратегическое решение не критичное по времени.
Примеры: анализ продаж, HR-дашборд, посещаемость сайта
Несколько советов как проектировать дашборды
1. Определитесь с целями
Четко сформулируйте для какой целевой группы вы создаете панель. Руководству скорей подойдет аналитический дашборд, менеджерам нижнего звена может понадобиться операционный дашборд.2. Расставьте приоритеты
Структурируйте информацию по значимости для вашей ЦА. Определите какие наиболее критические данные должны быть видны в первую очередь, а какая информация будет вовсе излишней.3. Визуализируйте данные с умом
Выбор неправильного типа диаграммы может привести к неверному толкованию данных. Можно посвятить отдельную статью типам графиков, поэтому ограничимся основными: — Для сравнения данных лучше всего подойдут столбчатые и линейные диаграммы.
— Для анализа взаимосвязей и распределения в основном используются диаграммы рассеяния (scatter plot) или пузырьковые диаграммы (bubble charts)
— Чтобы отобразить соотношение частей к целому используйте столбчатую диаграмму с накоплением и диаграмму с областями. Не стоит использовать секторную и кольцевую диаграммы т.к. их неудобно читать особенно в дашбордах
— Для большого количества текстовой информации имеет смысл использовать сортируемые таблицы и списки
4.Используйте карточки
Компонуйте сложные элементы управления и диаграммы в карточки схожие по своей структуре. Благодаря согласованной структуре, пользователю будет легче сориентироваться.5. Последовательно используйте форматы и названия
Всегда четко согласовывайте форматы, надписи разделов, подписывайте оси диаграмм и панели. Тоже самое касается и цветов в диаграммах.На этом все! Получилось объемно но, думаю, максимум полезно.
🔥11👍7
Генератор локального мерча от Лебедева
На днях студия Артемия Лебедева запустила генератор мерча «На районе» позволяющий создавать "уникальный" дизайн для любого места в мире. Просто вводите в поиск название родного города, посёлка или любимой страны и алгоритм выдает бесконечный креатив. Вот как авторы пишут о своем проекте:
"Люди во всех точках мира любят свой город, регион или край. Локальный патриотизм — чувство, понятное везде. Теперь свой мерч есть не только у Нью-Йорка и других крупных городов. Он есть у Лаокая, Таоса и деревни Каменка."
Ссылка: https://naray.one/ru
Как вам такая рандомизация локального патриотизма? 🔥 или все-таки 💩
На днях студия Артемия Лебедева запустила генератор мерча «На районе» позволяющий создавать "уникальный" дизайн для любого места в мире. Просто вводите в поиск название родного города, посёлка или любимой страны и алгоритм выдает бесконечный креатив. Вот как авторы пишут о своем проекте:
"Люди во всех точках мира любят свой город, регион или край. Локальный патриотизм — чувство, понятное везде. Теперь свой мерч есть не только у Нью-Йорка и других крупных городов. Он есть у Лаокая, Таоса и деревни Каменка."
Ссылка: https://naray.one/ru
Как вам такая рандомизация локального патриотизма? 🔥 или все-таки 💩
🔥27💩21
Основы дизайна - Закон Хика
Закон Хика или Закон Хика-Хаймана, названный в честь американского и британского психологов, определяет время, необходимое для принятия решения, исходя из количества доступных вариантов. Проще говоря: чем больше объектов перед пользователем, тем больше времени нужно на выбор.
Как использовать закон Хика?
Закон Хика может быть использован когда вам нужно упростить сложный процесс. Сведите варианты выбора до минимума особенно, когда время реакции критично. Уменьшив количество опций на экране вы сделаете интерфейс более удобным для пользователя. Конкретный пример: если вам нужно вывести список товаров на сайте, то вместо длинного списка будет более эффективно сгруппировать товары по категориям, тем самым упрощая поиск. Также можно разбить сложные процессы, как например заказ и оплата товара, на несколько шагов, давая пользователю возможность сфокусировотаться на одном действии.
Вывод
Всегда помните о законе Хика при проектировании страниц и приложений. Слишком много вариантов для выбора может привести пользователя в ступор. Разбивайте сложные действия на отдельные шаги, а разные варианты сортируйте в алфавитном порядке по группам или по популярности.
Закон Хика или Закон Хика-Хаймана, названный в честь американского и британского психологов, определяет время, необходимое для принятия решения, исходя из количества доступных вариантов. Проще говоря: чем больше объектов перед пользователем, тем больше времени нужно на выбор.
Как использовать закон Хика?
Закон Хика может быть использован когда вам нужно упростить сложный процесс. Сведите варианты выбора до минимума особенно, когда время реакции критично. Уменьшив количество опций на экране вы сделаете интерфейс более удобным для пользователя. Конкретный пример: если вам нужно вывести список товаров на сайте, то вместо длинного списка будет более эффективно сгруппировать товары по категориям, тем самым упрощая поиск. Также можно разбить сложные процессы, как например заказ и оплата товара, на несколько шагов, давая пользователю возможность сфокусировотаться на одном действии.
Вывод
Всегда помните о законе Хика при проектировании страниц и приложений. Слишком много вариантов для выбора может привести пользователя в ступор. Разбивайте сложные действия на отдельные шаги, а разные варианты сортируйте в алфавитном порядке по группам или по популярности.
👍16🔥3
Топ 6 частых ошибок в дизайне лэндингов
Собрать лэндинг из готовых блоков на конструкторе в Тильде или Wordpress может любой новичок. Казалось бы, какие ошибки тут можно еще сделать? Как показывает практика, без знания основ дизайна, накосятичь можно всегда... Разберем наиболее частые ошибки, независимо от того, где вы собираете ваш лэндинг.
1. Плохая читаемость текста
Начнем с шапки. Если текст наложен на фотографию, то он не должен сливаться с задним фоном. Располагайте текст таким образом, чтобы он попадал на, более контрастный участок изображения. Если изображение имеет слишком неспокойную текстуру, можно наложить на задний фон фильтр высветляя или затемняя фон по отношению к тексту.
Пример →
2. Слишком много стилей
Наиболее частая ошибка новичков — использование разных стилей типографики и оформления на одной странице. Это не только губительно для целостности стиля страницы, но также затрудняет восприятие информации. Используйте 1-2 шрифта и один стиль для иконок. Подходящие шрифты можно подобрать тут.
Также применяйте ограниченную палитру цветов используя максимум два цвета для выделения важных элементов.
Пример →
3. Недостаточно отступов
Отсутствие достаточного отступа между смысловыми блоками дробит страницу на части, внося беспокойство. Также не стоит пытаться ужать контент внутри блоков уменьшая отступы, это только ухудшит восприятие информации.
Пример →
4. Слишком много текста
Большинство посетителей не очень любят читать длинные тексты лэндингов. Чаще всего пользователи просто «сканируют» страницу цепляясь за ключевые фразы. Помогите вашим пользователям — сократите текст до минимума или разбейте его на несколько смысловых блоков. Оптимальной длиной текста для чтения считается 50-60 символов в строке. Также стоит избегать слишком много текста в узких колонках и заголовках.
Пример →
5. Информация не разделена на смысловые блоки
Визуально отделяйте смысловые блоки с помощью разного цвета заднего фона и используя отступы как минимум 120px. Если этого не делать блоки будут сливаться в единый массив без какой либо структуры ухудшая восприятие информации.
Пример →
6. Не соблюдена иерархия в типографике
Без соблюдения иерархии в тексте пользователю будет трудно понять какая информация наиболее важная.
Структурируйте текстовые элементы в зависимости от их важности. Первый доминирующий заголовок должен быть всегда больше последующих подзаголовков. Текст описания имеет наименьший размер. Также используйте достаточный пробел между строк для удобства чтения.
Пример →
На этом все... Если было полезно дайте знать в реакциях!
Собрать лэндинг из готовых блоков на конструкторе в Тильде или Wordpress может любой новичок. Казалось бы, какие ошибки тут можно еще сделать? Как показывает практика, без знания основ дизайна, накосятичь можно всегда... Разберем наиболее частые ошибки, независимо от того, где вы собираете ваш лэндинг.
1. Плохая читаемость текста
Начнем с шапки. Если текст наложен на фотографию, то он не должен сливаться с задним фоном. Располагайте текст таким образом, чтобы он попадал на, более контрастный участок изображения. Если изображение имеет слишком неспокойную текстуру, можно наложить на задний фон фильтр высветляя или затемняя фон по отношению к тексту.
Пример →
2. Слишком много стилей
Наиболее частая ошибка новичков — использование разных стилей типографики и оформления на одной странице. Это не только губительно для целостности стиля страницы, но также затрудняет восприятие информации. Используйте 1-2 шрифта и один стиль для иконок. Подходящие шрифты можно подобрать тут.
Также применяйте ограниченную палитру цветов используя максимум два цвета для выделения важных элементов.
Пример →
3. Недостаточно отступов
Отсутствие достаточного отступа между смысловыми блоками дробит страницу на части, внося беспокойство. Также не стоит пытаться ужать контент внутри блоков уменьшая отступы, это только ухудшит восприятие информации.
Пример →
4. Слишком много текста
Большинство посетителей не очень любят читать длинные тексты лэндингов. Чаще всего пользователи просто «сканируют» страницу цепляясь за ключевые фразы. Помогите вашим пользователям — сократите текст до минимума или разбейте его на несколько смысловых блоков. Оптимальной длиной текста для чтения считается 50-60 символов в строке. Также стоит избегать слишком много текста в узких колонках и заголовках.
Пример →
5. Информация не разделена на смысловые блоки
Визуально отделяйте смысловые блоки с помощью разного цвета заднего фона и используя отступы как минимум 120px. Если этого не делать блоки будут сливаться в единый массив без какой либо структуры ухудшая восприятие информации.
Пример →
6. Не соблюдена иерархия в типографике
Без соблюдения иерархии в тексте пользователю будет трудно понять какая информация наиболее важная.
Структурируйте текстовые элементы в зависимости от их важности. Первый доминирующий заголовок должен быть всегда больше последующих подзаголовков. Текст описания имеет наименьший размер. Также используйте достаточный пробел между строк для удобства чтения.
Пример →
На этом все... Если было полезно дайте знать в реакциях!
👏33👍19