Привет, коллеги-дизайнеры🐾

Когда дело доходит до создания оптимизированного интерфейса, брейкпойнты – это главное. Эти “плохиши” создают или ломают дизайн. Далее кратко расскажем, как пользоваться ими в режиме бога.

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

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

Оптимальные параметры расстановки брейкпонтов:
— Смартфоны: 375-414 пикселей
— Планшеты: 768-1024 пикселей
— Настольные компьютеры: свыше 1200 пикселей

Вот и все, коллеги. Брейкпойнты – важная часть UX-дизайна, и правильное их использование выведет дизайн на новый уровень.

Теперь время создавать адаптивные макеты, как боги дизайна😎

▶️Чем заменить Notion?

9 сентября 2024 года Notion ушел из России. Если рабочее пространство (workspace) хотя бы раз оплачивалось российской банковской картой, его отключат. Если аккаунт ни разу не оплачивался российской банковской картой, можно включить VPN и всё будет работать, как обычно.

Мы подготовили несколько альтернатив Notion.
*знаком 🇷🇺 пометили российские платформы.

🟡WEEEK. Похожий функционал с Notion. Можно ставить дедлайны команде, работать над проектами, делать заметки и планировать дела.(🇷🇺)

🟡Strive. Сервис для командной работы с проектами и регламентами
Можно создавать проекты и канбан-доски, ставить задачи, вести документацию. Подойдет как для одиночной работы, так и для команд. (🇷🇺)

🟡YoNote. Можно создавать документы и канбан-доски, организовывать базу знаний и делать заметки. Есть интеграции с Figma, Google Docs, Miro, GitHub и Telegram.(🇷🇺)

🟡Obsidian. Пожалуй, самая популярная замена Notion. Можно делать конспекты лекций, отслеживать дедлайны и делать рефераты книг и статей.

🟡Affine.pro. Смесь Miro и Notion с кастомизацией заметок, шерингом доступа и возможностью использования нейросетей.

🟡Boost Note. Инструмент для совместной разработки и ведения документации.

Ставь «❤️», если пост был полезен для вас! И пишите в комментарии - каким сервисом вы заменили Notion?

Как контрастность цвета влияет на метрики.

Цвет - ключевой элемент в дизайне интерфейсов. Он помогает пользователям ориентироваться, сигнализирует о статусе и делает продукт доступным для людей с нарушениями зрения. Цвет также влияет на продуктовые метрики: 93% людей считают его основным фактором принятия решений, а 60-80% суждений о продукте основаны на цвете.

Контрастность цвета влияет на показатели следующим образом:

⏩Увеличение CTR:

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

⏩ Улучшение доступности:

Высококонтрастные цвета текста и фона облегчают чтение для людей с нарушениями зрения. Дизайнеры могут использовать инструменты вроде Contrast в Figma или Contrast Checker для оценки различимости цветов.

⏩Прямое влияние на метрики:

В кейсе крупного банка изменение цвета кнопок входа в приложение привело к росту использования входа через Госуслуги с 43% до 51%.

⏩ Улучшение восприятия информации:

Цвет помогает пользователям быстрее считывать данные в таблицах и больших объемах информации.

⏩Эмоциональное вовлечение:

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

⏩Снижение показателя отказов:

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

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

🔜Эвристики Якоба Нильсена - это 10 принципов юзабилити для оценки пользовательских интерфейсов.

Они были разработаны в 1990 году и уточнены в 1994 году на основе анализа 249 проблем юзабилити. Несмотря на некоторые обновления в формулировках, сами принципы остаются актуальными уже более 25 лет.
Первая и одна из ключевых эвристик - "Видимость состояния системы". Она подчеркивает важность своевременной обратной связи пользователю о происходящем в интерфейсе.

Это помогает пользователям:
✔️Чувствовать контроль над ситуацией
✔️Принимать обдуманные решения
✔️Доверять бренду

Примеры реализации:
✔️Индикация товаров, которые скоро закончатся, в интернет-магазинах
✔️Отображение времени прибытия курьера в приложениях доставки

Видимость состояния системы критически важна для удобного пользовательского опыта. Без этой информации пользователи не могут эффективно достигать своих целей и оценивать результаты своих действий.
Другие важные эвристики включают:
✔️Соответствие системы реальному миру
✔️Свобода действий и контроль пользователя
✔️Единообразие и стандарты
✔️Предотвращение ошибок

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

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

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

✔️Когда элементы управления интерфейсом соответствуют реальным ожиданиям и желаемым результатам (так называемое естественное отображение), пользователям легче изучить и запомнить, как работает интерфейс. Это помогает создать интуитивно понятный опыт.

На сайтах интернет-магазинов иконка корзины всегда дублирует внешний вид корзины в магазине. Другие иконки, например, Календарь, Лупа, Закладки — также визуально отображают то, как эти предметы выглядят в реальной жизни. С помощью технологий отображения реальности бизнес также сможет приблизить товар или услугу ближе к пользователям. В одном из наших кейсов с помощью технологии «динамическое изображение» мы добились того, что интернет-магазин платьев помог покупателям увидеть товар со всех сторон и увеличил показатели конверсии на 23%.

🔘Этот же принцип используется и в темных паттернах. Создатели простой 2D-игры поменяли иконку с реального отображения геймплея на красивую — с реалистичным кораблем и космосом. Процент скачивания игры вырос на 37,1%.

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

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

Источники:
— Jacob Nielsen. How I Developed the 10 Usability Heuristics [2024’s update]
— Anna Kaley. Match Between the System and the Real World
— Nielsen’s Heuristics: 10 Usability Principles To Improve UI Design

🔸Тумблер

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

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

✔️Во-первых, как было сказано, тумблер включает что-то. Если он стоит напротив текста «Темная тема», это наилучшее решение. Тогда контекстуально он будет читаться как «Включить/Выключить темную тему».

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

✔️Второе — это “вес” включаемого объекта с помощью тумблера. Изначально тумблер включал функции, которые приводили к изменению состояния интерфейса: менялся цвет приложения, включался Bluetooth или WI-FI. Предпочтительнее использовать его для подобных функций. Если же, например, в интерфейсе нужно подсветить, что человек может сам забрать товар из магазина, лучше использовать чек-бокс или радиокнопку, если есть несколько вариантов на выбор.

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

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

Согласно исследованиям, 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-решений для развития бизнеса клиентов.