Проектировщик и визуальщик — один человек!

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

🔴 Дизайнер не должен собирать требования. Для этого есть продакт и аналитик
ТЗ редко учитывает что-то кроме функциональности. Если рисовать только по ТЗ, можно выпустить из внимания взаимодействие человека с системой. Дизайнер думает про составляющие юзабилити (Помните, да? Эффективность, продуктивность, удовлетворённость). Требования по скорости загрузки для дизайнера столь же нормальны, как и лоадер на время этой загрузки. Мало того, дизайнер в коллаборации с разработчиком может адаптировать макет в поисках баланса между красотой и эффективностью системы.

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

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

🔴 Не навешивайте на дизайнера исследования, для этого есть угадайте кто..?) Исследователи!
В идеале исследование не дизайнером снижает предвзятость и вероятность обмана (в том числе самообмана). Проводить большие исследования с исследователями — одно удовольствие. Правда, всё равно придётся думать, к сожалению) Составлять бриф, погружать в предметную область, чтобы они смогли задать вопросы и много ещё чего. Привлечение их на небольшие юзабилити-тесты, коридорки, опросы часто заканчивается тем, что их перестают проводить. А навык не привязываться к своему решению успешно осваивается.

🔴 Дизайнеры перестали говорить про дизайн, а только про метрики и фреймворки. Дизайнер, который гонится за метриками — грустное зрелище
Гнаться за метриками, как и работать вообще без них — грустное зрелище. Тонуть в аналитике или работать вообще без неё — тоже грустное зрелище. Собранные интерфейсные события помогут дизайнеру понять, как пользователи взаимодействуют с интерфейсом: какие колонки таблицы чаще прячут, какими фильтрами пользуются, а какими нет, чем наполняют раздел избранного. JTBD, OOUX спасают от «заплаток» в интерфейсе, помогают ничего не потерять, снимают процент «магии».

🔴 Продуктовые дизайнеры хватают всё подряд: метрики, фреймворки. Они же ничего до конца классно не будут делать, ни в чем не станут экспертами
Мы не стремимся стать экспертами во всём, чего касаемся. Мы хотим стать экспертами в проектировании пользовательского опыта. Чтобы наша работа была повторяемо эффективна. Фреймворки помогают понять мотивы, цели и задачи пользователей. Метрики проверяют наши гипотезы и показывают поведение пользователей. Композиция, ритм и другие инструменты визуала помогают сделать опыт пользователя приятнее. Фреймворк это уже запакованная для нас наука: чтобы применять JTBD, не надо становиться экспертом в психологии. От нас требуется взять фреймворк, понять его (поверьте, для этого не надо быть семи пядей во лбу), адаптировать под свои задачи, получить с помощью него результат.

🔴 Мы хотим реализовывать именно ту экспертизу, которой никто кроме нас не обладает — визуал.
К сожалению (нет уахахаха), уже обладает, искусственный интеллект. Сейчас ИИ может по текстовому описанию и гайдам сделать множество максимально выверенных вариантов дизайна. ИИ не справляется с тем, что касается мотивов, целей людей, не могёт в комплексные задачи и выводы при большом количестве неизвестных.

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

Ну что, где мы перегнули? ПОСПОРЬТЕ С НАМИ!

После такого «каминг-аута» мы уходим на каникулы.
Вернёмся в июне с новым сезоном по когнитивной психологии в дизайне и не только.

До встречи ❤️

Психология входит в чат

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

➖ Разберёмся, как работает психика человека и при чём здесь дизайн
➖ Закопаемся в истоки модных психологических UX-эффектов
➖ Расскажем, всё ли то, что называют когнитивной нагрузкой, ей правда является (нет, конечно же)
➖ Научим выводить формулы UX-психологии, освободив от необходимости заучивать 100500 новых главных принципов дизайна
➖ Развенчаем много мифов и разведём духоту, это наша любимая часть. 

❤️ Может быть, у вас в карманах найдётся пара камней вопросов про психологию в дизайне? Задайте их в комментариях, пока мы ищем лучшие мемы для обложек серий. Мы ответим на них в сериях или постах этого сезона. А первая серия выйдет уже в следующий четверг ✨

Психология ➡️ психика ➡️ дизайн

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

То этот сезон для вас ❤️ Рассказываем, что такое психика, разбираем её по косточкам и кейсам применения в дизайне. Начинаем наш марафон желаний познания глубин дизайна. Внимательным слушателям возможно кажется, что в обложке эпизода есть что-то знакомое... Вам не кажется, у нас очередная табуретка!)

Что где
00:00 Приветствие
02:42 Что происходит с психологией в UX-дизайне или почему у авторов горит
22:04 Что такое психология
32:06 Что такое психика
39:30 Когнитивная часть психики
53:50 Эмоциональная часть психики
56:50 Волевая часть психики
01:00:25 Где физически живет психика
01:05:36 Выводы или Алёна сдаёт зачет по серии

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

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

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

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

Вот причины, по которым возникает визуальный шум
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%, если верить интернетам. Они зачастую скрываются, так как много где считается, что дальтонизм делает дизайнеров профнепригодными. А это на деле не приговор, в чём-то даже суперсила.

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

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

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

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

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