20 ux-референсов кнопок, форм и QR: эффекты, акценты, расположение, подсказки и упрощение

Каждый день я тренирую насмотренность в UX. Мощные, необычные и редкие находки публикую в телеграмм-канале.

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

Дополнительный акцент

У Current за счет плавной анимации продукта в закрепленной кнопке:

Второстепенная кнопка притягивает на себя внимание за счет подсветки тем же цветом, что и заголовок у Vercel:

Замена кнопки

Переход в корзину появляется сразу вместо «Добавления в корзину» у Яндекс.Маркета:

Польза вместо обычного призыва

«Дата доставки» вместо «В корзину» у Ozon:

Кнопка в каждом сценарии

Возможность оставить заявку прямо в поиске, если ничего не нашлось у Solvery:

СТА максимально близко к ползунку в тарифах у ChartMogul:

Приложение с помощью кнопки упрощает вставку копированного текста вместо обычной ручной вставки у Google Translate:

Эффекты при наведении

Акцент на контенте и неразрывность перехода на другую страницу у Twitter:

Акцент на презентации продукта у Mural:

Показать результат от продукта перед призывом

Работа в анимационном редакторе FlipaClip:

Вообще без кнопки

Скачивание иконки у Сергея Чикина при клике на иконку без лишних действий и визуального шума:

Появление контента только при взаимодействии

Форма у VWO чистая и не отвлекает внимание лишним контентом. Политика и согласие на рассылку появляются только во время заполнения:

Каждое поле вынесено в отдельный шаг у Lower:

Появление формы по наведению, а не клику у Tutortop:

Закрепленная вертикальная форма у GeekBrains, а не привычная горизонтальная:

Подсказки

Удобный выбор с помощью курсора или клавиатуры у Typeform:

Подсказки при заполнении анкеты у Тинькофф:

Акцент на заполнении

Весь контент вокруг заблюривается для полной концентрации на форме у Biosites:

Упрощение...

...сканирования — курсор пропадает в области с QR-кодом у Бери заряд:

...звонка с десктопа у m2:

Спасибо за внимание!)

Еще больше UX-референсов тарифов, туториалов, онбордингов, слайдеров, форм и тд в телеграм-канале.

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