Пример того, как 3D анимация меняет восприятие страницы

Нашел на просторах dribbble занятную анимацию перехода по контенту при прокрутке страницы вниз. Хоть это и концепт,
но эффект довольно интересный. Как вам такое?

​​Эффект изоляции или эффект Ресторфф

Немецкий психолог Хедвиг Фон Ресторфф провела в 1933 году ряд экспериментов в которых выявила, что при восприятии группы схожих объектов с наибольшей вероятностью запомнится тот, который отличается от остальных.
Суть эксперимента состояла в том, что испытуемым показывали карточки со схожими словами, где одно слово сильно отличалось от общего списка. Например среди карточек с глаголами попадалась одна с существительным. После чего испытуемых просили вспомнить содержание карточек. Получалось, что большинство смогли вспомнить только 22% из схожих слов и в три раза больше (70%) из отличных от всего списка.

Аналогичным образом эффект изоляции применим и в дизайне интерфейсов. Например, выделить важный элемент цветом, размером, рамкой или расположением. Это позволит сделать объект не только более заметным, но и более запоминаемым.

Посмотрите на примере Squarespace: при выборе подходящего сервиса они явно продвигают один из своих тарифных планов больше, чем другие, благодаря более темному оттенку, надписи "Most Popular" и ее расположению прямо под кнопкой "Get Started".

Как создать качественную цветовую палитру #3 - работа с контрастом

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

Как подобрать контраст

Я уже писал в первой серии постов о том, что шрифт и задний фон должны иметь достаточную контрастность. Разница в яркости между двумя смежными цветами называется коэффициентом контрастности и имеет диапазон значений между 1 и 21. Чем больше значение, тем выше контраст. Чтобы проверить коэффициент контрастности можно воспользоваться этим инструментом contrast-ratio.com

Когда использовать низкий контраст

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

Пример из практики

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

Дайте знать в реакциях если было полезно!

Собесы, эффект приманки и ментальные карты...

Воскресенье - время недельного дайджеста. Все, что было на канале за неделю:

→ Три вопроса, на которые не может ответить джуниор UX-дизайнер

→ Эффект приманки

→ Ментальные карты

→ 3D анимация в веб

→ Эффект изоляции

→ Цветовая палитра #3 - работа с контрастом

Если было полезно вдарьте по реакциям! Это нехило мотивирует писать еще больше годного контента 🙂 До скорой!

Почему дизайн-система не равно UI-kit

Недавно наткнулся на статью от команды Ростелекома где автор подробно разбирает почему не надо путать дизайн-систему с UI-китом.
Если очень кратко: дизайн-система это больше про взаимодействие дизайнеров и разработчиков, чем про конкретные UI компоненты. Это особенно актуально если у вас сложный продукт с массой сервисов и огромная команда. Статья конечно написана с точки зрения разрабов, не без предвзятости к дизайнерам, но от этого она будет не менее полезна для прочтения.

https://habr.com/ru/company/rostelecom/blog/684816/

Инструменты управления пользователем #1 - когнитивная нагрузка

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

Управление вниманием пользователей

Уже давно создание сайтов и приложений сводится к упрощению, стремлению не слишком сильно загружать пользователя лишним: скрыть менее важную информацию в меню, сократить количество визуальных элементов итд... Аскетичные интерфейсы просты и понятны в использовании. Это особенно помогает при выполнении целевых действий, таких как переход по навигации сайта или заполнении формуляра. Но в некоторых случаях этот путь не всегда полезен.
Если интерфейс слишком однообразен, а большая часть информации скрыта — когнитивная нагрузка сведена к минимуму. В результате наш мозг начинает скучать, теряется концентрация. Вспомните себя на скучном уроке в школе ;)

Повышаем вовлеченность за счет когнитивной нагрузки

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

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

На этом все! Дайте знать в реакциях если тематика вам по душе.

Визуализация данных в интерфейсе Ч.5 — проектирование дашборда

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

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

Можно выделить два основных типа дашбордов:

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

Аналитический дашборд - для представления большого объема данных и аналитической информации. Основная цель – помочь пользователям оценить информацию, проанализировать тенденции и принять стратегическое решение не критичное по времени.
Примеры: анализ продаж, HR-дашборд, посещаемость сайта

Несколько советов как проектировать дашборды

1. Определитесь с целями
Четко сформулируйте для какой целевой группы вы создаете панель. Руководству скорей подойдет аналитический дашборд, менеджерам нижнего звена может понадобиться операционный дашборд.

2. Расставьте приоритеты
Структурируйте информацию по значимости для вашей ЦА. Определите какие наиболее критические данные должны быть видны в первую очередь, а какая информация будет вовсе излишней.

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

— Для сравнения данных лучше всего подойдут столбчатые и линейные диаграммы.

— Для анализа взаимосвязей и распределения в основном используются диаграммы рассеяния (scatter plot) или пузырьковые диаграммы (bubble charts)

— Чтобы отобразить соотношение частей к целому используйте столбчатую диаграмму с накоплением и диаграмму с областями. Не стоит использовать секторную и кольцевую диаграммы т.к. их неудобно читать особенно в дашбордах

— Для большого количества текстовой информации имеет смысл использовать сортируемые таблицы и списки

4.Используйте карточки
Компонуйте сложные элементы управления и диаграммы в карточки схожие по своей структуре. Благодаря согласованной структуре, пользователю будет легче сориентироваться.

5. Последовательно используйте форматы и названия
Всегда четко согласовывайте форматы, надписи разделов, подписывайте оси диаграмм и панели. Тоже самое касается и цветов в диаграммах.

На этом все! Получилось объемно но, думаю, максимум полезно.

Генератор локального мерча от Лебедева

На днях студия Артемия Лебедева запустила генератор мерча «На районе» позволяющий создавать "уникальный" дизайн для любого места в мире. Просто вводите в поиск название родного города, посёлка или любимой страны и алгоритм выдает бесконечный креатив. Вот как авторы пишут о своем проекте:

"Люди во всех точках мира любят свой город, регион или край. Локальный патриотизм — чувство, понятное везде. Теперь свой мерч есть не только у Нью-Йорка и других крупных городов. Он есть у Лаокая, Таоса и деревни Каменка."

Ссылка: https://naray.one/ru
Как вам такая рандомизация локального патриотизма? 🔥 или все-таки 💩

​​Основы дизайна - Закон Хика

Закон Хика или Закон Хика-Хаймана, названный в честь американского и британского психологов, определяет время, необходимое для принятия решения, исходя из количества доступных вариантов. Проще говоря: чем больше объектов перед пользователем, тем больше времени нужно на выбор.

Как использовать закон Хика?

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

Вывод

Всегда помните о законе Хика при проектировании страниц и приложений. Слишком много вариантов для выбора может привести пользователя в ступор. Разбивайте сложные действия на отдельные шаги, а разные варианты сортируйте в алфавитном порядке по группам или по популярности.

Топ 6 частых ошибок в дизайне лэндингов

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

1. Плохая читаемость текста

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

2. Слишком много стилей

Наиболее частая ошибка новичков — использование разных стилей типографики и оформления на одной странице. Это не только губительно для целостности стиля страницы, но также затрудняет восприятие информации. Используйте 1-2 шрифта и один стиль для иконок. Подходящие шрифты можно подобрать тут.
Также применяйте ограниченную палитру цветов используя максимум два цвета для выделения важных элементов.
Пример →

3. Недостаточно отступов

Отсутствие достаточного отступа между смысловыми блоками дробит страницу на части, внося беспокойство. Также не стоит пытаться ужать контент внутри блоков уменьшая отступы, это только ухудшит восприятие информации.
Пример →


4. Слишком много текста

Большинство посетителей не очень любят читать длинные тексты лэндингов. Чаще всего пользователи просто «сканируют» страницу цепляясь за ключевые фразы. Помогите вашим пользователям — сократите текст до минимума или разбейте его на несколько смысловых блоков. Оптимальной длиной текста для чтения считается 50-60 символов в строке. Также стоит избегать слишком много текста в узких колонках и заголовках.
Пример →


5. Информация не разделена на смысловые блоки

Визуально отделяйте смысловые блоки с помощью разного цвета заднего фона и используя отступы как минимум 120px. Если этого не делать блоки будут сливаться в единый массив без какой либо структуры ухудшая восприятие информации.
Пример →

6. Не соблюдена иерархия в типографике

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

На этом все... Если было полезно дайте знать в реакциях!

Воскресный дайджест. Посты, которые вышли на этой неделе:

— Почему дизайн-система не равно UI-kit

— Инструменты управления пользователем #1 - когнитивная нагрузка

— Визуализация данных в интерфейсе Ч.5 — проектирование дашборда

— Генератор локального мерча от Лебедева

​​— Основы дизайна - Закон Хика

— Топ 6 частых ошибок в дизайне лэндингов

Если для вас эта неделя была полезна, жмакайте в реакциях. До скорой!

Как правильно создавать кейсы

Одна из основных болей всех начинающих в дизайне, это нехватка качественных работ в портфолио.
Восполнить этот пробел можно создавая кейсы - работами чисто напоказ, для вымышленного клиента.
Наткнулся на днях на статью, в которой автор разбирает как не застрять в стадии "кейсостроительства", а стратегически осмыслить свой подход к созданию портфолио. Основной посыл - не просто делать красиво, чтобы получать лайки на Behance, а работать на результат, решать конкретную проблему.
В общем всем джунам советую для прочтения!

https://vc.ru/design/496233-zapiski-yunomu-dzhunu-3-keysy

Основы дизайна — Закон Якоба

Очень банальный зато действенный закон названный в честь американского UX специалиста — Якоба Нильсена. Он гласит:

«Пользователи проводят бо́льшую часть своего времени на других веб-сайтах, а не на вашем»

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

Как применять на практике

Перед началом проектирования изучите конкурентов. Выясните характерные паттерны и принципы работы популярных сайтов вашего сегмента.
По возможности, используйте в работе дизайн-решения, знакомые пользователям по другим сервисам. В особенности на коммерческих сайтах излишний «креатив» или нестандартные решения могут плохо сказаться на пользовательском опыте. Сбитые с толку посетители не купят товар в онлайн магазине или не найдут нужный контент на сайте если им слишком сложно пользоваться.

Вывод

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

Если было полезно, реакции к вашим услугам!

Как создать качественную цветовую палитру #4 — как подобрать цвета

Мы уже разобрались, что цвета бывают первичные и вторичные и в какой пропорции их лучше использовать.
Если забыли, вот ссылки на предыдущие посты из цикла:

1 — создание палитры

2 — метод 60-30-10

3 — работа с контрастом

Сегодня заключительный пост. Разберем как правильно подобрать цвета для вашего продукта или сервиса. Погнали...


Почему важно подобрать правильные цвета?

В маркетинге правильно подобранный цвет задает нужный эмоциональный настрой, привлекает определенный тип покупателя, а отчасти он способен оказать влияние на поведение пользователей. Все просто если вам нужно сделать сайт для уже готового бренда, где цветовая палитра прописана в гайдлайнах. А как подобрать цветовую гамму если сайт или приложение создается с чистого листа? Собрал наиболее ключевые моменты:


Изучите вашу ЦА

Вы можете руководствоваться своими вкусами и предпочтениями, но не обязательно ваш выбор будет соответствовать предпочтениям вашей целевой аудитории.
Задайтесь вопросом: кто ваши пользователи? Сколько им лет? Какими похожими продуктами они пользуется? Какие эмоции должен вызывать ваш продукт или бренд? Тут будет очень полезно использовать метод персон, о котором я как-нибудь напишу отдельным постом. Определив среднестатистического пользователя вашего продукта вы сможете лучше понять его привычки и в том числе цветовые предпочтения.


Подбор палитры по фотографии

Очень эффективный метод для создания палитры — вдохновится фотографией с гармонично подобранной цветовой гаммой. Если в процессе изучения вашей ЦА вы создали мудборд (коллаж настроений), то определится с основными цветами будет намного проще. Лучше всего подходят фотографии, где используется только один основной цвет или оттенки одного цвета. Хороший сервис для создания палитры по фотографии https://coolors.co/image-picker


Ассоциативный выбор цвета

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


Как комбинировать цвета?

Вы провели конкурентный анализ, исследовали предпочтения вашей ЦА и поняли какие цветовые гаммы им могут подойти. Осталось понять как сочетать первичные и вторичные цвета... Крайне удобный инструмент для этой задачи — цветовой круг Иттена. Ознакомится с тем, как работать с комплементарными цветами, триадами, тетрадами и как их использовать в дизайне можно в этой статье. А подобрать цвета онлайн через цветовой круг на https://paletton.com


В заключение

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

На этом все... Если понравилось — вы знаете где реакции!

Пока дизайн-комьюнити отходит от шока о предстоящей покупки Фигмы монополистом Adobe взглянем на пару концептов ребрендинга популярных приложений для социальных сетей. Как вам креатив? Напишите в комментариях!

5 главных ошибок начинающего фрилансера

тема фриланса стала для многих актуальной, особенно во времена распространения удаленной работы. С другой стороны быть фрилансером это очень не просто. Я выделил 5 наиболее важных факторов которые тормозят юного фрилансера в развитии.

1. Неумение презентовать свои услуги

Умение подать себя и свои услуги правильно - ваш главный инструмент по привлечению новых клиентов. Без грамотно проработанного портфолио вы не сможете донести заказчику, что вы способны решить поставленные задачи. О том как составить портфолио я уже писал на канале. Если кратко - покажите заказчику, что вы специалист в вашей области. Сочная и красивая подача работ это только половина успеха. Расскажите как вы мыслите, как решаете проблему, не скупитесь на описание всех шагов при выполнении работы.

— Берите качеством, а не количеством - лучше 3-5 классных работ, которыми вы реально гордитесь, чем разношерстные проекты последних лет.
— создавайте интересные кейсы, если не хватает работ в портфолио
— постоянно выкладывайте свежие работы на дизайнерских платформах и профессиональных биржах фриланса, а так же активно продвигайте себя в социальных сетях


2. Отсутствие профессионального фокуса

Если вы пытаетесь стать специалистом во всех возможных областях сразу, высока вероятность, что вы так ничему и не научитесь действительно хорошо и ваши клиенты не получат то качество работы, которое ожидают. Выберите для себя наиболее перспективное направление или нишу. То, от чего вы реально получаете удовольствие. Со временем вы наберетесь знаний из других областей, которые пригодятся вам в работе.

— не пытайтесь сразу научится всему и вся, только измотаете себя не научившись ничему до конца
— если вы позиционируете себя экспертом в определенной области у вас больше шансов, что клиент выберет именно вас


3. Плохая самоорганизация

Если вы решили пойти в фриланс, то должны осознавать, что сами отвечаете за все свои решения. Нет никого, кто за вас решит все проблемы. Чтобы доводить все дела до конца, нужно сформировать привычку к самоорганизации. Иначе можете потерять клиентов если начнете срывать сроки.

— приоритизируйте задачи, ведите ToDo-списки и чеклисты
— выполняйте задачи не рывками, а постепенно и осознанно
— четко разграничивайте рабочее время и отдых


4. Отсутствие навыков общения с заказчиками

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

— избегайте шаблонных ответов в заявках. То как вы откликаетесь на заявки во многом решает получите вы заказ или нет.

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


5. Заниженная цена за услуги

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

— если заказчик отказывается с вами работать только из-за того, что у кого-то дешевле, тогда пусть идет именно туда, где дешевле. Поверьте, лучше обходить таких "клиентов" стороной - сэкономите себе кучу хлопот.
— тоже самое касается и пробных/бесплатных работ. Чаще всего это в пустую потраченное время независимо от того, насколько вы будете стараться выполнить работу.


На этом все! Если было полезно — не забываем кликать по реакциям.

Инструменты управления пользователем #2 - управление памятью

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

Не секрет, что наша кратковременная память способна хранить ограниченное количество информации в течении короткого периода времени. Ученые заморочились и подсчитали, что это где-то 7-9 элементов за 20 секунд. После этого времени мозг забывает информацию. Если же информацию повторить более одного раза, то она переходит из кратковременной в долговременную память.

Как применить в дизайне?

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

Альтернативный метод

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

На этом все! В следующий раз поговорим об управлении временем пользователей. Если серия вам интересна, вдарьте по реакциям!

Кейсы, закон Якоба, ошибки начинающего фрилансера...

Недельный дайджест. Посты, которые вышли на этой неделе:

- Как правильно создавать кейсы

- Основы дизайна — Закон Якоба

- Как создать качественную цветовую палитру #4 — как подобрать цвета

- Концепты ребрендинга приложений для социальных сетей

- 5 главных ошибок начинающего фрилансера

- Инструменты управления пользователем #2 - управление памятью

Если неделя для вас была полезна, вдарьте по реакциям. Если есть интересующие вас темы, на которые хотели бы увидеть посты на канале, пишите в @uxtrends_bot