Базовые нюансы, которые помогут избежать распространенных юзабилити-ошибок при создании интерфейсов. Конкретнее – как делать нормальные кнопки и поля, чтобы пользователь без лишних мыслей взаимодействовал с ними.
Иногда случаются сбивающие с толку дизайн-решения, которые номинально выполняют свою функцию, но по факту недостаточно хорошо. Одна из задач UX/UI-дизайнера упрощать пользовательский путь, делать его простым, понятным и направленным на решение запроса.
Для этого есть масса инструментов и целей. Сегодня рассмотрим элементы дизайна, которые есть везде – кнопки и поля.
Кнопки
Кнопки являются элементами первостепенной важности, с их помощью пользователь взаимодействует с продуктом. Нестандартный подход здесь может оттолкнуть или вовсе не сработать.
Например, мы не делаем кнопку ДА красной, а НЕТ – зеленой. Разве что это хитрость всплывающего окна, в котором предлагают подписку. Там как раз расчет на то, что человек не глядя нажмет красное, не читая надпись.
Таких деталей много.
Состояния кнопок и иерархия
Начнем с того, что необходимо разработать сразу несколько состояний кнопки и сделать этот визуал понятным и не допускающим разночтений.
- Обычное состояние (активная кнопка)
- Ховер
- Неактивная кнопка
Ты уже знаешь, как это должно выглядеть, как и любой пользователь интернета. Дизайн этих состояний будет единым для всех кнопок на сайте, как первостепенных, так и вспомогательных.
Единый стиль необходим. Определи основные и вспомогательные кнопки, делай их одинаково. Например, главный призыв – “Рассчитать стоимость” и он ведет на форму квиза. Ты можешь разбросать эту кнопку по лендингу в других блоках, можешь менять надпись на “Получить предложение”, “Узнать цену”, “Подать заявку”. Но все они будут одинаковые по размеру, цвету, шрифту.
Что касается иерархии, то обязательно главные СТА должны быть самыми заметными. Обычно это сплошной яркий цвет. Для дополнительных кнопок стоит применять более приглушенные тона, контуры.
Нельзя делать более одного вида главной кнопки. Если ты даешь равносильные предложения и оба считаются главными, то лучше что-то поменять в воронке. Ибо это рассеивает внимание, чем больше вариантов, тем меньше вероятность получить лида хоть по одному из них.
Тайтл (надпись в кнопке) и расстояния
Названия кнопок желательно делать лаконичными и использовать глагол в тайтле. Купить, заказать, перейти, узнать, смотреть. Расширенные названия оправданы, если демонстрируют привлекательность/преимущество предложения. Например, “получить бесплатно”. Кстати, такие решения часто очень хорошо отрабатывают. Надо проводить А/В-тесты и отслеживать число конверсий. Слова важны, часто только замена надписи в кнопке на более удачную помогает достичь мощных результатов.
Надпись всегда должна быть в одну строку! Если не влазит или кнопка становится слишком огромной – значит с тайтлом что-то не так, меняй.
Отступы внутри важны. Расстояние от надписи до границ кнопки должно быть в среднем размером от половины размера шрифта. То есть если надпись 18 пикселей, то расстояние от надписи до границы поля будет от 9 до 18 пикселей.
Отступы от самой кнопки должны быть соответствующими. Она не “слепляется” с остальным контентом, но явно относится к нему. Чаще это такое же расстояние, как и высота самой кнопки.
Вспомогательные кнопки и ссылки
Кнопки взаимодействия – важный элемент. Стрелочки, иконки, ярлыки. Каждая из них должна иметь состояние ховера, чтобы при наведении курсора было ясно, что на элемент можно нажать. Про ховер-эффект читай подробнее здесь, там много интересных моментов насчет создания креативных решений.
В большинстве случаев при оформлении вспомогательной кнопки лучше дать всплывающую надпись с пояснением действия. Без надписей могут работать только символы, которые однозначно понятны всем: крестик для закрытия/удаления, сохранение, копирование и т.п.
Если речь о таких небольших кнопках-иконках, то учитывай четкость детализации. Чем меньше значок, тем меньше деталей должно быть. Про тонкости использования иконок мы уже писали в одном из предыдущих материалов.
Диалоговые и контекстные окна
Это формы для обратной связи, которые всегда сопровождаются кнопками подтверждения действия. Есть определенные правила создания диалоговых окон:
- указание темы/вопроса/контекста – пользователь должен понимать, что от него требуется и зачем ему взаимодействовать с окном. Пиши прямым текстом – “Оставьте контакты и мы свяжемся с вами для уточнения сроков доставки”, или что там еще.
- понятность – говори с пользователем на одном языке, не используй сложные термины, если по ту сторону экрана рядовой юзер и наоборот, при необходимости объясняй понятными словами, даже если они больше сленговые, чем официальные. Ориентируйся на ЦА и пиши тайтлы исходя из общепринятого тона общения.
- примеры – в полях прописывай примеры заполнения или подсказки. Посетитель не должен догадываться, что от него требуется. Если есть возможность дать готовые варианты ответа – так и сделай, пусть просто нажмет кнопочку, а не печатает текст вручную.
- однозначность интерпретации – не запутывай, пиши понятно, расставляй поля по порядку. Даже если это выглядит как попытка общаться с 5-летним ребенком, пусть так. Лучше сделать слишком очевидные решения, чем сложные.
- возможность отказа – у пользователя должна быть возможность отказаться от диалога, от отправки формы, от перехода к следующему шагу. Он может закрыть окно в любой момент, когда захочет.
Диалоговые и контекстные окна не должны быть расположены “не вовремя” – они органично дополняют воронку, являются ее частью, а не прерывают пользовательский путь.
Если окно перекрывает основной экран и является единственной активной частью, то остальной контент рекомендуется сделать под прозрачной подложкой. Так контент страницы не будет отвлекать, но и не будет ощущения оторванности от сайта. Легкое перекрытие подложки повысит внимательность при работе с формой, снимет нагрузку зрения и когнитивную, покажет важность окна.
Иногда посетителю нужно использовать данные с основной страницы, когда он заполняет форму. Здесь нужно предусмотреть такой сценарий и создать окно правильно – либо на странице, либо с возможностью перетаскивания. И сделать это надо так, чтобы не приходилось долго листать для возвращения в форму. Иначе это просто надоест, будет неудобным и отпугнет пользователя.
Если форма является многоступенчатым квизом, то обязательно указывай шаги: 1 из 6, 2 из 6 и т.п. Юзер должен видеть свой путь и понимать, сколько до конца. Неопределенность раздражает. А это что? Это повышение вероятности потерять лида.
Общие рекомендации
Если есть устоявшийся паттерн – используй его. В кнопках и формах оригинальность может вылезти боком, творчество лучше проявить в других деталях. Это тот случай, когда взять за основу чужой хороший пример не будет плагиатом, а будет отличным решением. Если перефразировать классику, то все хорошие формы похожи друг на друга, а каждая провальная форма провальна по-своему.
Уникальные элементы и интерактивные состояния могут быть восприняты неверно, пользователь не поймет функционал или попросту побоится нажимать штуку, которая неясно что делает.
Следи за отступами и воздухом. Сохранять читабельность – очень важная задача. В процессе проверяй свой дизайн в 100% масштабе – иногда делая все в увеличенном виде ты можешь упустить пропорции и общий вид. С опытом придет понимание размеров и отступов, надо только набить руку, делая все изначально правильно.
Сейчас в тексте все рекомендации могут показаться или непонятными, или слишком очевидными. Но на практике стоит заглядывать в эту статью для проверки. И все станет на свои места. Ты начнешь понимать, что мелочи важны. Что из них и состоит хороший дизайн.
UX/UI-дизайн – одна из самых активно развивающихся отраслей. Сейчас каждая компания стремится создать свое приложение, сделать его удобным и простым. И профессия действительно востребована. Быть хорошим специалистом в этой отрасли на вес золота. И оплата такая же. Так что не теряй шанс – учись, развивайся, замечай закономерности и создавай свои решения, которые облегчат путь пользователя.
Качественная работа принесет заказчику обширный круг пользователей, а тебе – достойный доход, хорошую репутацию и новые интересные заказы. Чтобы делать действительно хорошие интерфейсы, нужно не только понимать базу, но и тестировать свои решения, постоянно их улучшая. Это непрерывный процесс развития.
Как начать путь к крутым заказам, отличному портфолио и повышению ценника на услуги? Учиться у лучших на практике! Онлайн-курс «UX/UI легенда» именно про это. Делаем из новичков профи. Стань одним из них!