Как померить качество UX по фреймворку HEART

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

Фреймворк позволяет отслеживать опыт пользователя по 5 ключевым категориям:

1. Happiness (счастье) 
Отношение пользователей к услуге или продукту. Оценка удовлетворенности пользователей часто собирается с помощью опроса.

2. Engagement (вовлеченность) 
Насколько часто и глубоко взаимодействуют с продуктом. Обычно измеряется с помощью поведенческих показателей, таких как частота, интенсивность или глубина взаимодействия за определенный период времени. В качестве примера можно привести количество посещений сайта пользователем в неделю или количество фотографий, загруженных пользователем в день.

3. Adoption (принятие) 
Насколько клиенты принимают обновления и новый функционал. Например, количество аккаунтов, созданных за последние семь дней, или процент пользователей, использующих фичу.

4. Retention (удержание) 
Как часто пользователи возвращаются в продукт. Например, приток или отток активных пользователей за определенный период времени

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

Как это работает?

Для каждой категории необходимо определить следующие параметры:

Цель — опираясь на бизнес-цели компании формулируем задачу

Сигнал — поведение пользователей, которое укажет на успешное достижение цели

Метрика — численное измерение сигнала во времени

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


Как вам инструмент? Дайте знать в реакциях:
❤️ – буду применять
🤓 – уже использую
😐 – мне это не интересно

Когда использовать бесконечную прокрутку, а когда пагинацию?

Бесконечная прокрутка (infinite scroll) также называемая "ленивой загрузкой", довольно популярная техника отображения контента, например на новостных сайтах или в ленте социальных сетей. Динамическое подтягивание информации при прокрутке страницы повышает вовлеченность пользователей и время проведенное на ресурсе. Но одно дело лента новостей, а вот эффективен ли этот метод для других сайтов? Специалисты Baymard Institute провели масштабное исследование интернет-магазинов и пришли к следующим выводам:

Переключение страниц

- пользователи просматривают меньше информации на странице, зато уделяют ей больше внимания;

- понятная и доступная навигация по контенту;

- пользователь сразу видит по скроллбар сколько информации выдано на странице;


Бесконечная прокрутка

- пользователи просматривают больше информации, зато уделяют ей меньше внимания;

- лучше подходит для визуального контента – пользователям проще воспринимать большой поток изображений, чем текста;

- Для результатов поиска лучше всего работает в комбинации с кнопкой "Показать еще", подгружая информацию блоками по 15-35 записей;


Какой вывод можно сделать?

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

Как пройти тестовые задания на собеседовании продакт дизайнерам?

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

Какие наиболее частые ошибки можно выделить:

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

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

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

4. Решение оторвано от бизнеса
Мало показать идеи, необходимо объяснить как ваше решение работает в контексте бизнеса. Какие первостепенные и второстепенные цели оно решает, как можно замерить его эффективность, какие есть минусы и плюсы.


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

Коридорный тест – получаем быстрый фидбек по макетам 

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

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


Как проводить тестирование

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

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

– Что ты здесь видишь?
– Как ты понимаешь это название?
– Что бы ты сделал, чтобы…?
– Как ты думаешь, что произойдет при нажатии на эту кнопку?

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

В чем преимущества и недостатки

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

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

#методы

Фреймворк HEART, бесконечная прокрутка, коридорный тест...

Дайджест статей за неделю:


Как и куда расти дизайнеру


Как померить качество UX по фреймворку HEART


Когда использовать бесконечную прокрутку, а когда пагинацию?


Как пройти тестовые задания на собеседовании продакт дизайнерам?


Коридорный тест – получаем быстрый фидбек по макетам 


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

Как продать исследования заказчику

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

Частый аргумент, который можно услышать от заказчика – он и сам прекрасно знает свою ЦА и вообще у него самый лучший продукт, просто "сделайте красиво" и всё!


Как убеждать

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

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


Аргументация

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


Предоставьте факты

Аргументируя, не будьте голословны! Не поленитесь провести ресёрч, найдите цифры, маркетинговые исследования по бизнесу вашего клиента. В идеале – кейсы конкурентов, например, где показано как после пользовательского исследования улучшился продукт, поднялась средняя выручка, повысилась лояльность клиентов. 


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

На этом пока всё… Есть еще куча нюансов, которые постараюсь раскрыть в других постах. Дайте знать в реакциях если вам интересно!

Метрики клиентского опыта – Customer Effort Score (CES)

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


Зачем это нужно знать

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

Как измерять

Лучше всего CES измеряется через опрос. Например, пользователя можно спросить насколько легко ему было совершить покупку. Это можно сделать как на самом сайте, так и после прохождения немодерируемого тестирования, где респондент может дать оценку по шкале от 1 (очень легко) до 7 (очень сложно). 
Показатель более 5,5 говорит о том, что ваши пользователи испытывают проблемы с юзабилити продукта.

На этом все! Более подробно про CES можно почитать в этой статье

8 советов по созданию тёмной темы интерфейса

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


1. Затемняйте белый текст на черном фоне для удобства чтения

Белый текст на черном фоне слишком напрягает глаза. Всегда слегка затемняйте текст, чтобы снизить контраст.


2. Используйте цвета бренда в оттенках

Чтобы ваш дизайн смотрелся интересней, добавьте основные цвета вашего бренда в оттенки тёмной темы.


3. Используйте приглушённые цвета

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


4. Передайте глубину

Используйте цветовую шкалу от более светлых цветов к более тёмным, чтобы придать интерфейсу глубину. Чем светлее объект, тем он выше в визуальной иерархии. 


5. Следите за контрастом

Тёмный режим, как и светлый, должен соответствовать требованиям WCAG, чтобы обеспечить читабельность текста при достаточном контрасте. 

Несколько плагинов, которые помогут проверить коэффициент контрастности:

- Stark 

- Contrast 

- A11y 


6. Конвертируйте все цвета из светлой темы в тёмную

Начинайте дизайн со светлой темы и переводите её в тёмную версию. Не удаляйте цвета ради тёмной темы, чтобы не запутать пользователей.

Плагины, которые помогут при конвертации темы: 

- Appearance 

- Dark mode magic

- Camilo  


7. Используйте полупрозрачность для создания оттенков

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


8. Не злоупотребляйте тёмным  режимом

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

Оригинальный материал buninux

Вам интересны такие статьи?

👍 – Да, очень полезно.

👎 – Нет, мне такое неинтересно.

Психология в UX – Выборочное игнорирование

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

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

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

Почему это важно знать

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

Фичеризм в дизайне – как загубить хороший продукт

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

Чтобы не попасть в эту ловушку, важно учитывать следующие правила:

1. Следовать KISS принципу при разработке продукта
Простота должна быть ключевой целью в дизайне.

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

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

4. Проводить А/Б-тесты, для оценки эффективности новых функций
В качестве эксперимента можете отключать функционал для части пользователей и смотреть на их реакцию.

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


В заключение

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

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

Как продать исследования, метрики клиентского опыта, фичеризм в дизайне...

Дайджест статей за неделю:

Как продать исследования заказчику

Метрики клиентского опыта – Customer Effort Score

8 советов по созданию тёмной темы интерфейса

Психология в UX – Выборочное игнорирование

Фичеризм в дизайне – как загубить хороший продукт

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

Как написать резюме, чтобы попасть на собеседование?


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

- Кто вы? Какой ваш бэкграунд?

- Соответствие квалификации

- Какой опыт и какие задачи можно вам доверить

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


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


Что писать в резюме?

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


Сколько писать?

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


Как писать?

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

1) Даты

2) Проект или компания

3) Ваша роль

4) Результат и показатели, которые были достигнуты

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


Как оформлять?

Не стоит оригинальничать с украшательствами, создавать чумовые лейауты или ставить звездочки к навыкам владения программами. Ваше резюме в первую очередь для HR, там вряд ли оценят весь ваш креатив. Достаточно, чтобы ваше резюме было аккуратным и легко читаемым. Лучше упаковать его в PDF, так его проще распечатать.


В заключение

Не менее важно и написание сопроводительного письма. Это именно то, что увидят в первую очередь. Если в сообщении писать: “Привет, я Иван из Питера, в приложении мое резюме, вот ссылка на портфолио” То до резюме скорей всего дело даже не дойдет.

Про то, как писать сопроводительное письмо, напишу в другой раз если вам интересно.