🐾Закон Хика

В 1952 году британский психолог Уильям Хик провел эксперимент, в котором перед участниками стояла задача быстро нажимать на кнопки, соответствующие загорающимся лампочкам. Их количество менялось от 2 до 10. В результате психолог выявил закономерность: чем больше лампочек включалось, тем больше времени требовалось участникам для нажатия.

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

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

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

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

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

Источники:
— On the rate of gain of information
— Hick’s Law: Making the choice easier for users
— Как использовать Закон Хика в дизайне интерфейсов
— UX-дизайн: Закон Хика — как ускорить принятие решений пользователями
— Что такое закон Хика и почему из «всего» мы выбираем «ничего»
— Закон Хика: просто о сложном, или как сделать правильный выбор?

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

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

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

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

Оптимальные параметры расстановки брейкпонтов:
— Смартфоны: 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