Визуальный шум

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

Почувствуем себя юристами и найдём границы в разночтениях.

Вот причины, по которым возникает визуальный шум
1. Ты
2. Твои мечты
3. Чрезмерная детализация. Не просто МНОГО ДЕТАЛЕЙ, а много декоративных элементов, не несущих функциональности.
4. Излишнее количество стилей: начертаний, цветов, насыщенности.  
5. Непродуманные или неуместные анимации: когда движений на экране слишком много
6. Хромая композиция: когда не хватает группировки элементов

Что называют шумом, но на самом деле проблема в другом

1. Проблема иерархии
Пользователю может быть тяжело ориентироваться не потому, что элементов много, а потому, что они не организованы на экране. Благодаря иерархии мы можем оборачивать сложные предметные области в простые для восприятия системы.
🔴 Шум — когда элементы конкурируют за внимание.
🔵 Не шум — когда их много, но они структурированы

2. Осознанный выбор не в пользу минимализма
Ретро-стиль, к примеру, покажется нагруженным тем, кто предпочитает плоский дизайн.
🔴 Шум — если стиль мешает usability.
🔵 Не шум — если стиль осознанный и не вредит функциональности.

3. То, что просто не нравится
Не нравятся человеку градиенты. Даже если с их помощью подчёркиваются интерактивные элементы. Не нравятся ему тени. Даже если они помогают выделять модальность. Почему бы не перечеркнуть всё простой фразой «Это шумно»)
🔴 Шум — если градиенты, тени и прочее выполняют декоративную функцию.
🔵 Не шум — если они помогают восприятию.

А зачем в этом разбираться?
Всё равно же понятно, что твой интерфейс кому-то не зашёл.

✨ Чтобы отбиваться от мнений не-пользователей, уметь объяснять, что много элементов не равно шум, если они логично и ожидаемо для пользователя размещаются.
✨ Чтобы вовремя распознать подмену и спросить «Что именно мешает?». Этот вопрос упирает именно в суть шума. Убирать надо то, что реально мешает пользователям.

«Визуальный шум» — полезный термин, но его нельзя использовать как универсальную отмашку. Настоящий шум мешает пользователю, а не просто не нравится кому-то (часто не пользователю). Если интерфейс функционален и логичен, даже насыщенный дизайн может быть хорошим.

Эмоциональная сфера

Многие из вас сейчас сталкиваются с модным направлением эмоционального дизайна. Говорят, что...
✨ важно не допустить отсутствие эмоций в интерфейсе
✨ эмоции формируют первое впечатление о продукте
✨ есть новые классные принципы дизайна в этой сфере

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

Что где
00:00 Приветствие
06:29 Что такое эмоциональная сфера психики
29:37 Зачем нужны эмоции
38:02 Где живут эмоции
41:42 Виды эмоций
45:34 Мост между теорией и UX
01:00:08 Типичные ошибки при проектировании
01:09:09 Как работать с эмоциями в UX
01:20:36 Выводы или Алёна сдаёт зачет по серии

Слушаем!
Apple Podcasts
VK
Яндекс.Музыка
Telegram-плеер

Как запороть UX с помощью «добавления эмоций»

Пособие от людей, которые уже так делали, и теперь вспоминают об этом с лёгкой внутренней истерикой. Да не повторятся у вас эти ошибки

1️⃣ Проектируем на сухую

Эмоции? Это всё для маркетинга. Мы тут про смыслы, сценарии и схемки в Фигме. Пользователь сам как-нибудь распереживается — от нашей логики. А если он ушёл, ну и нахер его: кто не понял интерфейс — тот не ЦА.

2️⃣ Пихаем «вау» в каждый пиксель

Шевелится? Мерцает? Кричит «ПОГНАЛИ»? Значит, будет «вау».
Главное — не дать человеку сосредоточиться.
Пусть глаз дёргается, но зато дизайн эмоциональный.

3️⃣ Делаем так, чтобы человек ипытывал тревогу — и оставался с этим один

Всплывашка: «Ваш аккаунт будет заблокирован».
Кнопка: отсутствует.
Инструкция: нет.
Контакт: идите в поддержку, сорян.

Зато эмоции — вот они, кипят!! Возбудим — и не дадим

4️⃣ Говорим со всеми одним тоном

Финальная фраза после 40 шагов ада: «Ура! У вас получилось!»
А у человека только что три раза отвалился бэк и нифига не сохранилось.

Пытались быть милыми для всех — стали мудаками для каждого.

5️⃣ Пишем ошибки так, чтобы захотелось разбить монитор

«Что-то пошло не так. Обратитесь к администратору».
К какому администратору? Вы даже не сказали, что случилось. Ни совета, ни извинений, ни человека на той стороне. Просто холодное «умри и не задавай вопросов».

Соблюдайте эти правила и получится незабываемый UX с привкусом тревоги ✨

👉 А теперь признавайтесь, какой-нибудь из пунктов живет в ваших интерфейсах?

Волевая сфера

Продолжаем наш психомарафон, следующая станция Воля. Расскажем:
➖ Что это такое, как работает
➖ Причём здесь дизайн
➖ Как с ней работать в проектировании
➖ Где и почему тут зарыто UX-золото
➖ А можно ли её игнорировать? Спойлер: можно, но всё будет плохо ахаха

Что где
00:00 Приветствие
02:21 Что такое воля
13:32 Какие функции выполняет воля
21:51 Как происходит волевой процесс
40:41 Воля — дефицитный ресурс
44:35 Воля и интерфейсы
49:05 UX-эффекты на этапах волевого процесса: Побуждение к действию
53:11 Оценка ситуации и борьба мотивов
58:41 Принятие решения
01:01:04 Реализация действия
01:03:54 Удержание усилия и завершение
01:12:01 Выводы, или Алёна сдаёт зачёт по серии

Слушаем!
Apple Podcasts
VK
Яндекс.Музыка
Telegram-плеер

Пользователю нечем дышать, нужно больше воздуха!

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

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

Всё поменялось не в одночасье:
➖ Экраны в основном стали лучше и больше
➖ Мобилка затребовала для попадания пальцем элементы побольше
➖ Интернет в целом изменился, расширив развлекательную функцию

Вместе с этими изменениями родился новый тренд на «воздушный» дизайн.

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

Вы же ждёте жирное «НО»?) А вот оно! НО ИНОГДА ИНТЕРФЕЙСЫ НАДУВАЮТ КАК ВОЗДУШНЫЕ ШАРЫ!
Больше воздуха! Воздух внутри карточки, воздух вокруг карточки. Больше воздуха в таблице, чтобы было не как в экселе. Больше премиальности! В премиум-сегменте же есть время на бесконечный скролл... Или нет?

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

Для профессиональных интерфейсов «воздух» в избытке и вовсе становится проблемой:
🔴 пользователи просят «откачать весь воздух», чтобы позволить себе ну хотя бы 20 строк на экране и лишний раз не тыкать в пагинацию
🔴 и так большие формы становятся гигантскими и создают впечатление ну очень сложных
🔴 в навигации приходится находиться дольше из-за вроде бы благостных передышек.

Как всегда, стремимся к балансу. Воздух не только про красоту и лёгкость. Иногда он правда не нужен в больших количествах.

Когнитивная сфера психики
Думается нам, что можно даже не «продавать» эту серию. Про когнитивную сферу слышали ВСЕ. А это хороший повод причесать знания и приложить их к дизайну.

Что где
00:00 Приветствие
01:47 Что такое когнитивная сфера психики и зачем она нужна
10:48 История когнитивной психологии или давайте опять поговорим про дедов
15:42 Когнитивные процессы: ощущение и восприятие
21:39 Внимание, память, мышление, воображение
29:48 Модель потока обработки информации
43:46 Как применять эту модель в дизайне?
49:35 Система 1 и Система 2 Канемана
01:01:29 Причем тут ИИ
01:11:38 Выводы, или Алёна сдаёт зачёт по серии

Слушаем!
Apple Podcasts
VK
Яндекс.Музыка
Telegram-плеер

Красивый UI. Это как?

Кому-то красиво, кому-то нет. Как померить? Если вы зададите этот вопрос в интернетах, то скорее всего получите подмены разного рода: от совета следования трендам (что нравится всем, правда же?)) до сбора мнений на косвенное «нравится» и «не нравится».

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

Так и в интерфейсах. Вроде бы на этом всё, конец поста, но хочется добавить пару мыслей:
➖ Оценивать красоту интерфейса, не опираясь на юзабилити, нет смысла: это как выбирать между красивенькой и умненькой. А хочется выбрать два в одном)
➖ Красота в глазах смотрящего. А что еще у него в глазах? Перцептивные эталоны! Внимательные слушатели подкаста уже знают, что без них восприятие стерильно, безоценочно. А если учесть, что у каждого человека эталоны разные, то и оценка малопредсказуема
➖ Но не абсолютно непредсказуема. Перцептивные эталоны формируются обществом, культурой, опытом. Если мы хорошо знаем нашу ЦА, то можем предположить, что будет казаться красивым конкретно им. Так что персоны это не какое-то там устаревшее учение, а вполне рабочий инструмент ✨

👉 С чем вы согласны, а с чем нет? Пишите ваше мнение в комментариях, обсудим)

Восприятие

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

Шаг за шагом, рассказываем:
➖ Что такое восприятие, как оно устроено
➖ Правила его игры
➖ Причём здесь дизайн

Что где
00:00 Приветствие
02:13 Восприятие, внимание, ощущение — где что?
15:48 Что такое восприятие
22:08 Зачем оно нужно, какие у него этапы и связь с другими познавательными процессами
31:30 Принципы работы восприятия
46:17 UX эффекты: предметность и целостность восприятия
55:10 Осмысленность восприятия
01:00:45 Избирательность восприятия
01:08:10 Сравнение с перцептивными эталонами
01:15:19 Выводы, или Алёна сдаёт зачёт по серии

Слушаем!
Apple Podcasts
VK
Яндекс.Музыка
Telegram-плеер

Всё очень круто, но надо переделать

Поднимите руку, кому знаком диалог в духе:

— «Почему тут так?»
— «Это решение основано на паттернах...»
— «Ну не знаю, мне не нравится. Сделай просто как у Apple, но с анимацией и чтобы зелёного побольше!»

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

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

👉 Поделитесь, с какими перлами вы сталкивались при сдаче работы?

В следующем посте мы разберём ваши и наши «жемчужины» и расскажем:
➖ Как грамотно парировать такие замечания
➖ Где стоять насмерть, а где идти на компромисс
➖ Как превратить спор из разряда «мнение против мнения» в разряд аргументации экспертной позиции

Внимание

Следующая остановка в нашем психо-когнитивном трипе: Внимание.

➖ Почему внимание — главная валюта нашего времени?
➖ По каким правилам оно играет
➖ Причем здесь дизайн

На все эти вопросы ответит Аня, а Алена как всегда будет позориться в конце серии)

Что где
00:00 Приветствие
03:58 Что такое внимание, модели внимания
24:31 Функции внимания
31:30 Принципы работы внимания
46:32 UX-эффекты: ограниченность ресурса внимания
55:40 Избирательность внимания
01:01:03 Динамичность внимания
01:05:37 Модальность и контролируемость
01:10:20 Выводы, или Алёна сдаёт зачёт по серии

Слушаем!
Apple Podcasts
VK
Яндекс.Музыка
Telegram-плеер

Просто возьми и сделай, как просят. Что сложного?

В прошлом посте мы обещали разобрать самые частые и самые странные комментарии, которые вы можете услышать о своём дизайне. Что ж, пришло время посмеяться, поплакать и найти баланс: что пропустить никак нельзя, а на что можно махнуть рукой.

💔 «Сделай красивее, не хватает магии»
Если же переводить на человеческий, то скорее всего это говорит о том, что человек не понимает логику, не чувствует ценности. Возможно, он ожидал других эмоций от просмотра макета.

💔 «Давайте как у Apple, но со своей фишкой»
Так часто говорят, когда не знают, чего хотят, но знают, что есть признанные эталоны, где «точно хорошо». Хотя конечно, у эталонов часто не точно хорошо, а очень даже наоборот.

💔 «Здесь пустовато, давай добавим еще баннер, текст или акцию»
Страх пустого пространства входит в чат. Мы думаем, что многие из вас и так знают, что с этим делать: рассказать, что воздух в адекватном количестве помогает расставить приоритеты, снижает ощущение сложности как интерфейса, так и задач, решаемых им.

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

В нашей линии защиты есть универсальные инструменты

❤️ Не отвергать идею сразу, а проанализировать ее вместе
❤️ Если аргументы как об стенку горох, то предложить протестировать. Хотя бы коридоркой
❤️ Вопросы «Что конкретно?» и «Почему?» Вынимаем из человека конкретику, помогаем сформулировать. Оппоненту тоже сложно, он на нашем птичьем не говорит.
❤️ Возврат к пользователям вашего продукта, к их контексту и задачам.
❤️ Готовимся к показу дизайна. Не просто приносим макет без пояснений, а рассказываем, отвечаем на вопросы. На показе говорим опять же не на птичьем, без эффектов Фиттса, Зейгарник, Хика... Эти вещи здорово знать, но для незнающей аудитории вы можете выглядеть невыносимым всезнайкой)

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

Мы не позволяем наступать на:
➖ доступность (Accessibility): низкая контрастность, использование для перечачи информации только цвета, слишком мелкие шрифты — убивают UX
➖ тёмные паттерны: всё, что обманывает пользователя (скрытые подписки, навязчивые уловки). Если допустим — потеряем доверие навсегда.
➖ критичные ошибки юзабилити, сводящие продуктивность к нулю: убрать поиск, спрятать кнопку покупки.

Мы не откусываем голову в случаях:
➖ визуальной эстетики: если шрифт читается, а цвет проходит по контрасту, иногда можно уступить в оттенке; это дает оппоненту чувство соучастия
➖ приоритизация: «Я очень хочу эту кнопку здесь» — может, у стейкхолдера есть инсайдерская информация о будущем развитии продукта. Задаём вопросы «Почему?».
➖ безвредные «хотелки»: если анимация или декор не мешают UX, а делают босса счастливым — иногда это цена за хорошие отношения и дальнейшее доверие.

👉 А как вы боретесь с такими комментами? Может у вас тоже есть коронные инструменты? Делитесь в комментариях)

Насколько эффективна ваша работа?

Иногда сколько ни сделай — всё равно ничего не успеваешь. Причин такому масса: плохое планирование работ команды оунером, неоптимальный дизайн-процесс, нехватка ресурсов дизайнера. Как итог: бардак в макетах, ненависть к задачам, команде, работе, кровь и смерть.

Выход, как всегда есть, дверь вон там и очередь за забором) Но он почти всегда не единственный. Вот пять очевидных и не очень способов себе помочь

1️⃣ Проанализируйте свой календарь на количество рабочих встреч

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

2️⃣ Подумайте о расположении макетов: сколько времени у вас уходит, чтобы найти нужный макет?

Как часто к вам приходит команда их поисках? Если на оба вопроса ответ «много», то пришла пора сделать отдельный файл с навигацией по макетам. На это тоже нужно время, его придётся поддерживать, но в стратегии это сильно упрощает жизнь

3️⃣ Проанализируйте порядок в макетах

Все ли макеты вашей системы есть в реальном времени? Актуальны ли они? Не приходится ли вам в начале работы с системой срисовывать макет с прода, а потом вносить изменения? Такое часто бывает, когда вы приходите в команду, где либо дизайнера вообще не было, либо он был давно, либо он оставил не самое качественное наследие. В этом можно завязнуть: при высоком темпе работ самостоятельно выделять время на порядок практически невозможно. Поэтому снова идём к оунеру и договариваемся о том, чтобы снизить темп и выделять один день в неделю на протяжении пары месяцев, в который вы будете заниматься ТОЛЬКО наведением порядка. Мы пробовали, это работает, если донести ценность увеличения скорости и всем понятной структуры макетов

4️⃣ Освойте фигму по максимуму

Один из очевидных, но далеко не всегда соблюдаемых пунктов. Изучите резиновость, варианты, лейауты, констрейны, переменные. Придётся бить себя по рукам, когда «да я просто быстренько прикину» или «нет времени, потом пересоберу правильно»: не пересоберёте. Или пересоберёте, когда будете делать следующую фичу, что всё равно время сожрёт

5️⃣ Последний очевидный (нет) пункт: погружайтесь в ИИ

Пишите с ним брифы на исследования, постановку задачи. Отдайте ему часть аналитики. Лендосы и несложный визуал отдайте почти целиком. Ищите с ним референсы, проводите конкурентный анализ — это всё ИИ умеет лучше и лучше с каждым месяцем. За одно обретёте навык делегирования и приёмки работ у джунов)

👉 А какие у вас лайфхаки оптимизации работ? Что вы делали сами, а с чем обращались к команде? Делитесь секретами)

Прогрессивное раскрытие информации

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

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


🔴 Знаем, зачем приходит пользователь, но не знаем, кто он, каков его опыт и контекст

Чтобы это понять, используйте персоны, JTBD, OOUX и другие инструменты. Без них мы перекладываем ответственность за выбор нужных элементов на пользователя. Мол, сам разберётся.


🔴 Думаем экранами, а не сценарием

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


🔴 Не думаем о том, чтобы дать готовый вывод, а не исходные данные

Здесь снова поможет JTBD:
➖ Зачем сюда пришёл пользователь?
➖ Какая информация поможет ему выполнить задачу?
➖ А какая — сделать это быстрее?
➖ Возможно, мы можем что-то вычислить из тех данных, что у нас уже есть?


🔴 Забываем или не знаем о приёмах прогрессивного раскрытия

➖ Мастера или Wizards. Делим большую сложную задачу на несколько шагов. Шагов не должно быть слишком много. Кроме того, пользователю может пригодиться информация с предыдущих шагов — какая именно и в каком виде, помогут понять знания о его контексте и опыте. Также пользователю важно понимать, сколько работы ещё впереди. В этом помогут перечисление шагов и индикатор прогресса.

➖ Аккордеоны и табы. Помогают сориентироваться на странице, перемещаться в рамках контентной области и раскрывать только нужное в текущий момент. Снова без фанатизма: если аккордеон хорошо масштабируется (но не бесконечно), то табов стараемся делать не больше 5–7 штук.

➖ Контекстные подсказки и «вопросики». Привет всем, кто говорит, что «вопросики» никто не использует! В сложных предметных областях, где пересекаются и эксперты, и новички, без них не обойтись. Иначе мы получим негатив от экспертов, которым приходится прокручивать очевидные для них вещи, либо — от новичков, которые понятия не имеют, что такое SSH-порт и зачем система его требует.

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

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

👉 Делитесь вашими наблюдениями: что вы используете в своей работе для прогрессивного раскрытия?

Дальтонизм пользователя и дизайнера

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

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

Дальтонизм — это нарушение цветового зрения, при котором человек испытывает сложности в различении некоторых цветов. Самый частый красно-зелёный дальтонизм. Он есть у каждого 12-го мужчины и каждой 200-ой женщины. Все эти люди наши потенциальные клиенты, пользователи или коллеги.

Чтобы не ухудшать их пользовательский опыт, надо не так много:
➖ Не использовать цвет единственным сигналом. Опасное действие? Красный цвет кнопки ок, но плюс ещё текст, иконка.
➖ Поддерживаем достаточную контрастность: здесь вам и люди с астигматизмом и другими особенностями спасибо скажут. По WCAG стремимся к показателю AA как минимум.
➖ Тестировать интерфейсы с помощью разных инструментов-симуляторов нарушений зрения. Это не только полезно, но и любопытно людям с высокой эмпатией.
➖ Тестировать интерфейсы с пользователями количественными методами, не только качественными.

А как быть дизайнерам с дальтонизмом?
Они точно есть, их около 8%, если верить интернетам. Они зачастую скрываются, так как много где считается, что дальтонизм делает дизайнеров профнепригодными. А это на деле не приговор, в чём-то даже суперсила.

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

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

Хорошо делайте, а плохо не надо! Теперь вы знаете, как)

👉 А вы проверяете свои макеты на доступность? Знаете ли вы дизайнеров с дальтонизмом или может быть, это как раз вы?

Делитесь в комментариях любимыми инструментами и кейсами!

Микроинтеракции и Микровзаимодействия

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

Если интерфейс — это диалог с пользователем, то микроинтеракции — это его мимика и интонации.

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

Интерфейс с микроинтеракциями помимо соответствия требованиям:
➖ Добавляет интерфейсу плавности. Кнопка в вебе при ховере меняет цвет, говоря, что она кликабельна. А если она делает это через градиентный переход, то появляется ощущение плавности.
➖ Скрадывает ожидание. Пока пользователь вглядывается в анимашку, машина во всю лопатит для него следующий экран.
➖ Помогает направлять взгляд пользователя. Кнопка возврата назад будет меняться при наведении в граниентом, направленным влево. А кнопка перехода вперёд наоборот.
➖ Просто радует глаз. Например, анимация пульсирующего сердечка при нажатии.

В интернетах иногда проливается кровь из-за двух терминов: Микроинтеракции и Микровзаимодействия.

➖Одни считают, что первое — это только функция и логика, а второе это вовлечение и эмоции.
➖ Другие считают, что одного без другого не должно быть, термины настолько связаны, что можно использовать их как синонимы.
➖ А кто-то подсвечивает, что каноничный термин Microinteractions просто можно использовать как англицизм, а можно перевести как Микровзаимодействия.

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

👉 Какие запоминающиеся микроинтеракции вы встречали? Делитесь в комментариях!

UX-паттерны

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

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

Звучит здорово, да?)
Мы уверены, что у опытных дизайнеров сейчас шрамы заболели. Потому что зачастую создание паттернов — боль:
🔴 В больших составных системах хрен договоришься с другими дизайнерами об общем поведении
🔴 Пока проектируешь, пытаешься быть инспектором-гаджетом (кто еще помнит этот мульт?) и сделать достаточно универсально, но не слишком абстрактно.
🔴 В использовании махровые паттерны сложно настроить и повышается вероятность ошибок.
🔴 Чтобы паттерн не умер сразу после создания, приходится его планировать, поддерживать, вести планы разработки, доработок... Прямо как ребёнок, повисает на авторе лет так на 18.

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

А может тогда не связываться с паттернами?) Тоже не получится, например поэтому:
🔴 Одни и те же механики, но вышедшие из под рук разных дизайнеров, будут выглядеть по-разному. Пользователю не будет достаточно запомнить, как работает фильтр в системе. Ему придётся запомнить, как работают все разные фильтры.
🔴 Дизайнерам придётся каждый раз с нуля продумывать решение. Со всеми ховерами, нажатиями, сбросами до нулевого состояния и тд. Скорость работы падает.
🔴 При масштабировании появляются проблемы поддержки: у одного решения одно болит, у второго другое — каждая команда чинит своё, а значит тратит время нерационально.
🔴 Неэффективность онбординга: каждый новый дизайнер не сможет изучить принятые в компании механики: он будет сталкиваться с несколькими вариациями каждый раз, думая, что переиспользовать или как спроектировать своё решение.

А делать-то что?
Кажется, здесь не обойтись в одно лицо и без поддержки.

Что стоит сделать:
➖ Заручиться поддержкой руководства. Как своего, так и дизайнеров вашего комьюнити. У паттернов сильные аргументы за: ускорение разработки, уменьшение количества багов и стандартизация пользовательского опыта. Без апрува руководства можно получать палки в колёса в виде постоянной занятости дизайнеров, потому что паттерны не в фокусе.
➖ Вписаться заранее в планы разработки команд и договориться, кто, что и когда сможет реализовать для общей библиотеки.
➖ Найти союзников. В одиночку сделать паттерн на 5-10 продуктов невероятно сложно: нужно учесть варианты использования, особенности текущих решений... Делать паттерны вместе с другими заинтересованными дизайнерами проще. Главное не допустить, чтобы дизайнер становился рабом паттернов (вон тот диз шустренький, давай это ему тоже скинем), плюс чтобы у дизайнера не появилось две сложные работы одновременно. Иначе союзников не останется.
➖ Проведите аудит: найдите все 50 оттенков серого, 100 вариантов скругления карточек и прочего. Часто даже в одном разделе встречается несколько разных видов одного и того же. Визуальный хаос — мощный мотиватор для перфекционистов-дизайнеров.
✨ Взять ответственность. Паттерны — сложная задача. Это продукт в продукте. Сами не родятся, сами не проживут. На простой инициативе дизайнеров-участников комьюнити без полноценного запуска не поедет. Лидер этого направления — человек с весомым опытом, авторитетом, прокаченными софтами.

👉 С чем согласны, а с чем нет? Какие у вас есть советы по работе с паттернами? Делитесь с комментариях