uxtrends

Уже второй год подряд ребята из DevCrowd проводят большое исследование продуктовых дизайнеров:

- Что входит в обязанности и каких навыков не хватает
- Как попадают в профессию и куда из нее уходят
- Полезные для развития каналы и подкасты

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

Ссылка на опрос

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

Дизайн онлайн-формуляров

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

В этой статье рассмотрим плюсы и минусы компоновки наиболее популярных онлайн-форм.

1. Лейблы, выровненные по левому краю

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

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

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


2. Лейблы, выровненные по правому краю

Ссылаясь на исследование Matteo Penzo “Label Placement in Forms” время заполнения такой формы почти в два раза быстрее, чем при использовании лейблов с левым выравниванием.

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

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


3. Лейблы сверху поля

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


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

❌ Недостатки: Требуют большего вертикального пространства.


4. Длина текстового поля 

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

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


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

Про поля можно еще много чего рассказать, если вам понравился формат и соберем 20 🔥 напишу как-нибудь продолжение.

Почему онбординг больше не работает, и как это исправить

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

Главная проблема, большинства онбордингов – они предполагают линейный путь обучения, заставляя пользователей проходить через серию заготовленных шагов.

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

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

Более эффективным будет делать инструкции доступными на протяжении всего использования продукта и отображать их в контексте.


1. Контекстные подсказки

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

Пример подсказок в приложениях Uber, Zomato и Spotify на картинке над постом.


2. Прогрессивный онбординг

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

Пример: Slack. Вместо полного погружения после нескольких вводных слайдов, Slack использует Slackbot для знакомства с базовыми функциями обмена сообщениями. Сначала скрыты все функции, кроме ввода сообщений. Затем постепенно открываются дополнительные возможности. Это имитирует естественный процесс обучения: мы опираемся на каждый предыдущий шаг и дополняем уже полученные знания.


3. Шаблон "Начало работы"

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

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


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

Config 2024 - что ждать от обновлений в Figma

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

Интеграция инструментов ИИ в Figma
Искусственный интеллект теперь становится неотъемлемой частью экосистемы Figma, охватывая Figma Design, FigJam и Figma Slides. Новые AI-виджеты, интегрированные непосредственно в интерфейс, призваны упростить и автоматизировать рутинные задачи. Среди ключевых функций:

- Визуальный поиск по скриншоту, выбранному элементу или эскизу

- Автоматическое создание прототипа из готовых макетов

- Умное переименование слоев в зависимости от контекста


Создание дизайна по текстовому запросу

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

Кроме того, встроенный AI поможет в написании и переводе текстов, а также в удалении фона из фотографий.

До конца 2024 года пользователи смогут бесплатно потестировать новые AI-функции.


UI3: Редизайн интерфейса Figma

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


Улучшения в Figma Slides

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


DevMode

Обновленный DevMode предлагает разработчикам расширенные возможности для отслеживания и управления изменениями. Ключевые улучшения:

- Режим фокуса, позволяющий видеть только элементы, помеченные как "готовые к разработке"

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

- Внедрение CodeConnect — многообещающего инструмента для интеграции дизайн-систем из Figma непосредственно в код проекта


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

С редизайном интерфейса, улучшением DevMode и Figma Slides видно, что команда старается прислушиваться к потребностям пользователей. Кто знает, может через год мы будем удивляться, как вообще работали без всех этих инструментов раньше.

Почему ваши UX-исследования могут быть бесполезными

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


1. Неверный выбор респондентов

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

❌ Неправильно: Тестировать со знакомыми или коллегами, которые не являются будущими пользователями вашего продукта

✅ Правильно: Выбирать кандидатов для теста из целевой аудиторией вашего продукта

2. Неверная формулировка заданий

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

Избегайте закрытых вопросов (когда в вопросе содержится намек на решение):

❌ Неправильно: У вас заблокирована карта. Вы позвоните в службу поддержки или воспользуетесь чат-ботом?

❌ Неправильно: У вас заблокирована карта. Выберите в меню службу поддержки.

✅ Правильно: Вы обнаружили, что у вас заблокирована карта. Какие ваши действия?

Также недостаточно четко сформулированные задания или непонятная терминология могут привести к ошибкам и неудачному выполнению задачи во время теста.


3. Помощь респонденту во время теста

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

❌ Неправильно: Давать респонденту подсказки и объяснять как взаимодействовать с интерфейсом во время теста

✅ Правильно: Дать респонденту возможность решить или не решить задачу без дополнительных пояснений.


4. Некритическое отношение к собственной работе

Не стоит подгонять тест к «хорошим» результатам. Для идеального результата тест должен проводить независимый специалист или команда. Но это далеко не всегда возможно. Важно оставаться объективным и готовым признать ошибки.

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

❌ Субъективная оценка, умалчивание/приуменьшение негативных результатов теста

✅ Объективная оценка результатов теста. Любые негативные результаты, это возможность улучшить продукт.


Заключение

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

Треугольник драмы дизайнеров

Хочу поделиться кратким содержанием одной из презентаций с uxcamp от ментора и коуча, UX-стратега с 15 летним опытом, Hias Wrba.

В чем суть? Думаю, каждый из нас в той или иной мере попадал в конфликтные ситуации в своей профессиональной жизни. Доклад предлагает рассмотреть их с точки зрения “треугольника драмы”.

Это психологическая модель (предложенная психиатром Стивеном Б. Карпманом в 1968 году) описывает деструктивные роли, которые люди играют в конфликтах. Она иллюстрирует, как люди взаимодействуют друг с другом, постоянно подпитывая конфликт. Хиас Врба объяснил все это с помощью визуального повествования представив действующих лиц драмы:


Обвинитель (persecutor)

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


Жертва (victim)

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


Спасатель (rescuer) 

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


Как предлагается преодолеть эти конфликтные роли?

В первую очередь, всем стоит повзрослеть и осознать разрушительность своих ролей.

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

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

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

Над постом пару слайдов с презентации.

Ну что, скучали? Последние недели были довольно насыщенными на работе, зато в эти выходные мне удалось сгонять в Берлин на UXcamp Europe. Хочу поделиться своими впечатлениями.

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

Из плюсов:

- Большое количество докладов, воркшопов и дискуссий на продуктовые и UX темы.

- Интернациональная, профессиональная аудитория.

- Отличная площадка для нетворкинга в непринужденной студенческой атмосфере (конференция проходит в здании Берлинского университета имени Гумбольдта).

Из минусов:

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

- На каждый доклад отводится всего 45 минут. Поэтому некоторые доклады получаются немного поверхностными, но это ещё зависит от темы и спикера.

- Параллельные доклады, из-за чего невозможно попасть на все интересные.


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

Ну и конечно же оно стоит того ради выступлений крутых спикеров. Про некоторые инсайты напишу отдельной статьей!