🔜Третья эвристика Якоба Нильсена

Согласно исследованиям, 30% потерь данных на сервисе происходят из-за ошибки человека. Чтобы упростить пользование продуктом, важно предоставить людям возможность отменить или повторить действие без потери данных и прогресса. Об этом говорит третья эвристика Якоба Нильсена — Пользовательский контроль и свобода действий. Она позволяет пользователю видеть результаты действий и их отмены.

✅Расширение возможностей для отмены действия повышает оценку продукта со стороны пользователей и метрики, например, CRR (Customer retention rate, уровень удержания клиентов) или NPS (Net promoter score, индекс потребительской лояльности).

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

Один из самых распространенных примеров эвристики — отмена отправки письма в почтовых сервисах или сообщения в Telegram. После отправки письма или сообщения пользователю показывают уведомление, что у него есть несколько секунд для отмены отправки и внесения правок.

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

▶️Принцип «Пользовательский контроль и свобода действий» — один из ключевых в создании удобных и понятных пользовательских интерфейсов. Его можно использовать как основу для оценки удобства использования на этапе разработки и запуска проекта.

Источники:
— Jacob Nielsen. How I Developed the 10 Usability Heuristics [2024’s update]
— Илья Бирман. «Пользовательский интерфейс». — 2017
— Как уберечь пользователя от потери данных по ошибке: проектирование «удаления» и «отмены»

#интерфейс #дизайн #UXUI #SimbirSoft_Design #SS_Design #Ульяновск #simbirsoft

Принцип общей области

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

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

Вот несколько примеров, когда использование Принципа общей области помогает при создании интерфейсов.

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

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

🔵Нарушение Принципа общей области сильно влияет на метрики продукта. Для нашего клиента мы проводили UX-аудит и обнаружили, что из-за нарушения принципа общей области при создании меню в приложении только 22% пользователей нашли необходимую информацию по продукту для оформления покупки.

Чрезмерное же использование этого принципа может создать беспорядок. Так, на старой версии сайта Озона каждый фильтр, установленный в меню фильтров, был сделан в рамке. Хотя это и не ужасно, эти границы не являются такими уж необходимыми — чтобы обозначить группировку, достаточно их просто близко расположить. Продуктовая команда провела анализ и убрала рамки с фильтра, повысив процент использования фильтрации с 42% до 64%.

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

Источники:
— The Principle of Common Region: Containers Create Groupings
— Law of Common Region

User Story: Как понять, что хочет пользователь?

▶️User Story — это инструмент, помогающий понять и структурировать потребности пользователей, что напрямую влияет на качество продукта и его востребованность на рынке. Это особенно важно, если конкуренты предлагают решения, которые лучше соответствуют ожиданиям клиентов.

Зачем нужны User Story?
Они позволяют четко определить, какие задачи пользователь хочет решить с помощью продукта. Это помогает команде разработки и бизнес-стейкхолдерам расставить приоритеты в реализации функционала, чтобы сосредоточиться на наиболее важных для пользователя функциях. User Story — ключевой элемент Agile-методологии, способствующий гибкости и адаптации продукта под реальные нужды пользователей.

Как создать User Story:

Исследование пользователя: Нужно изучить целевую аудиторию, её потребности, задачи и цели. Для этого применяются качественные и количественные методы исследований: интервью, наблюдения, опросы, анализ конкурентов.
Описать результат: Важно указать, какой результат или выгоду хочет получить пользователь.
Формулировка User Story: Она строится по шаблону: «Как [роль пользователя], я хочу [цель], чтобы [результат]». Например: «Как менеджер, я хочу видеть статистику выполнения задач, чтобы контролировать прогресс команды».

👇Преимущества User Story:

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

▶️Типографика на мобильных устройствах

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

На что обратить внимание при работе с текстом для мобильных приложений или адаптивной верстки:

1. Используйте достаточно крупный шрифт основного текста (от 14 до 17 пунктов) для комфортного чтения без необходимости увеличивать текст. Помните, что размер подбирается индивидуально под каждый выбранный шрифт, потому что один и тот же кегль у разных шрифтов будет иметь разную высоту.

2. Избегайте слишком тонких начертаний шрифтов — Thin, ExtraLight, Light. Они трудно различимы на мобильных устройствах.

3. Поддерживайте хорошую контрастность между текстом и фоном. Общие рекомендуемые значения контрастности: для основного текста не менее, чем 7:1 и 4,5:1 для заголовков или крупного текста. Чтобы проверить контрастность, воспользуйтесь онлайн-сервисами, например, Webaim.

4. Избегайте использования сложных декоративных шрифтов или множества разных стилей.

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

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

7. Используйте выравнивание по левому краю для основного текста. Ровный край делает текст аккуратнее и проще для чтения. Для оформления небольших объемов текста в 2–3 строки можно использовать выравнивание по центру.

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

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

⏪Оптимизация дизайн-ревью для продуктовых процессов⏩

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

Дизайн-ревью широко распространено в IT-индустрии. Более 70% опрошенных сотрудников различных российских компаний сообщили о применении этого процесса в своей работе.

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

Важной частью организации дизайн-ревью является создание гайдлайнов.

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

Вот несколько советов для начала дизайн-ревью:

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

2⃣ Создайте интерактивный прототип, с помощью которого можно наглядно продемонстрировать, как будет функционировать продукт и какая будет анимация.

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

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

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

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

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

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

4⃣Четвертая эвристика Якоба Нильсена

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

Сервис становится лояльней и проще в использовании, когда в его основе заложен принцип «Последовательности и стандарты» Якоба Нильсена. Его суть такая: Чем меньше новых навыков пользователь должен получить при взаимодействии с интерфейсом, тем более эффективно и быстро он сможет работать с системой. Логотип сайта находится в верхнем левом углу, значок лупы означает поиск — все это знакомые паттерны, которые постоянно используются в цифровых продуктах и облегчают жизнь пользователей.

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

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

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

Символы, иконки и изображения должны быть единообразными на всем сайте. Если вы используете изображения, убедитесь, что все они имеют схожую визуальную обработку. Например, цвет и толщина границ должны быть единообразными для всех изображений на странице продукта. Так, для одного из заказчиков дизайнеры SimbirSoft провели UX-исследование, в котором сравнили дизайн карточек с изображениями товаров в одном стиле и в разных стилях и выяснили, что карточки с единообразием в стиле увеличивают конверсию сайта на 35% по сравнению с вариантом карточек в разных стилях.

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

Источники:
— Maintain Consistency and Adhere to Standards
— What Is the Consistency and Standards Principle?

⏪Эффект Зейгарник⏩

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

Согласно исследованиям, незавершённые задачи запоминаются лучше, чем завершенные, почти в два раза. Впервые данный эффект описан в докторской диссертации психолога Блюмы Зейгарник в 1927 году и назван в ее честь. Суть эффекта заключается в подсознательном стремлении мозга к завершенности действия. А это значит, что каждое начатое занятие, не доведенное до конца, заставляет пользователя постоянно о нем помнить.

Несколько советов, как эффект Зейгарник можно использовать в UX/UI-дизайне.

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

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

— Использовать напоминания и уведомления
Они помогают пользователям вспомнить о прерванных действиях, например, таких как неоформленный заказ, и вернуться к ним. Отправка push-уведомлений увеличивает показатели удержания пользователей (retention rates) до 3 раз.

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

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

Осознанное и умеренное применение эффекта Зейгарник в UX/UI-дизайне может стать дополнительным инструментом для улучшения удовлетворенности пользователей, увеличить вероятность завершения действия и повлиять на конверсию сайта.

Источники:
— UX-дизайн: эффект Зейгарник, или как открытия профессоров психологии помогают доводить пользователей до цели на сайте.
— Как мотивировать пользователя закончить прогресс? -Эффект обеспеченного прогресса.
— 21 Critical Push Notification Statistics for 2023.
— Эффект Зейгарник поможет закончить все задачи законов UX, с которыми мы сталкиваемся каждый день | Часть 2.
— Феномен незавершенных действий.
— Законы UX/UI: Часть 1.
— Эффект Зейгарник или как довести пользователя до цели через —незавершенное действие.