6 советов по дизайну селекторов для коммерческих проектов
Одна из главных метрик эффективности интерфейса — количество конверсий. Если дизайнер сделал удобную структуру, поработал над call to action, выбрал гармоничные шрифты, шансы получить конверсию сильно увеличиваются. Результат зависит от продукта, текстовой подачи и оперативности техподдержки, но дизайн сильно влияет на пользовательский опыт.
В этой статье поговорим о важном атрибуте любого интерфейса — селекторах. Выясним, как правильно их оформлять, чтобы сделать выбор очевидным, и каких ошибок стоит избегать.
Для структурирования экранов интерфейса используются разные компоненты. В список часто используемых элементов обязательно входят селекторы. Это собирательное название для группы объектов, которые сильно влияют на решение пользователей. На английском и русском языке понятие звучит одинаково, но надо обращать внимание на образующее слово select — выбор.
В нише веб-дизайна сложился стереотип, что селекторы — второстепенные компоненты, которые почти не влияют на эффективность форм. Достаточно выбрать правильный цвет, создать приемлемую структуру и дело сделано. На самом деле, элементы выбора очень важны. Даже мелкие ошибки в дизайне и юзабилити могут оказаться решающими для потенциальных клиентов. Если они не поймут, что делать, доверие будет потеряно безвозвратно.
Селекторы должны быть инклюзивными по умолчанию. То есть, доступными для всех пользователей без исключения. Человек должен посмотреть на блок и без подсказок понять, что надо выбрать. В теории кажется, что на выбор можно повлиять нестандартной анимацией и красивым оформлением. На практике становится понятно, что важна интуитивность и удобство.
Селекторы — важный элемент, влияющий на процесс покупки. Представьте, что человек приходит на кассу продуктового магазина и хочет купить батончик. Он смотрит на полку с любимыми лакомствами, а там перепутаны все цены и товары лежат не на своих местах. Пример очень отдалённый, но он наглядно демонстрирует важную особенность селекторов. Они расположены ближе к концу цепочки, которую проходит потенциальный клиент на пути к конверсии. Если сделать выбор логичным, возрастёт лояльность целевой аудитории.
Важно понять, что нет универсального решения для создания инклюзивных селекторов. В каждом случае надо отталкиваться от контекста, анализировать предпочтения клиентов, тестировать эффективность разных вариантов и находить оптимальное решение.
Посмотрите на оформление селекторов для банковского приложения. Они сделаны настолько изящно и круто, что хочется выбрать карту и поскорее пройти дальше. Если условия использования продукта подходят клиенту и у банка хорошая репутация, на пути к конверсии не будет преград.
Для оформления переключателей необязательно использовать анимацию, но, если правильно подойти к задаче, интерактивность может повысить вовлечённость. Человек несколько раз переключит радиокнопки и примет окончательное решение. В данном случае микро-анимации — отличный выбор. Дизайнер отказался от сложных эффектов и сосредоточился на простом подходе.
Понимание визуальной силы разных элементов интерфейса — ключ к созданию продающего дизайна. Эффективный цифровой продукт складывается из маленьких кусочков пазла, которые плавно превращаются в большой механизм.
Чтобы лучше понять, как правильно использовать переключатели в зависимости от контекста и особенностей интерфейса, подробно остановимся на каждом виде селекторов. Разберём ключевые особенности и определим сильные стороны каждой группы элементов.
Дизайнер при разработке форм каждый раз выбирает подходящие компоненты. От правильности его выбора и подхода к оформлению селекторов зависит опыт пользователей. Если у потенциальных клиентов не будет проблем при работе с переключателями, и они нажмут на кнопку для отправки формы, значит дизайнер успешно справился с задачей.
В список селекторов входят 4 компонента, которые одинаково важны в дизайне интерфейсов. Это чекбоксы, радиокнопки, тумблеры и выпадающие списки. При правильном использовании, каждый из них отлично справляется со своей задачей.
Чекбоксы или флажки — маленькие элементы, которые обычно делают в виде квадратиков со скруглёнными углами. При нажатии область заполняется галочкой, и пользователь понимает, что выбрал элемент списка.
Кроме квадратика и галочки в активном состоянии у флажков обязательно должны быть надписи. Если поясняющего текста не будет, компонент становится бесполезным. Лейблы обычно состоят из одного или нескольких слов. В редких случаях ниже надписи размещается дополнительный контент, как на примере справа. Такую структуру стоит использовать с осторожностью, так как рабочая область сильно увеличивается в размерах.
Главная особенность чекбоксов в том, что они используются для множественного выбора. К примеру, пользователь хочет купить комплект экипировки для туристических походов. Он открывает форму, выбирает сначала палатку, затем добавляет беспроводной аккумулятор, фонарик и удочку. Флажки являются частью списка, но каждый существует независимо от остальных. Выбор каждой следующей опции не влияет на предыдущие.
Чекбоксы должны обязательно иметь стандартную структуру, чтобы пользователи без дополнительных подсказок поняли, что перед ними. Для заполнения области флажка можно использовать галочки или крестики в зависимости от контекста. Первый вариант более предпочтителен, крестики ассоциируются с ошибкой.
Для повышения эффективности чекбоксов можно добавить приятную анимацию. Главное не переборщить с интерактивностью, чтобы пользователь не отвлёкся от выполнения задачи. Для оформления отлично подходят микро-анимации, которые показывают, что элемент отзывается на действие. Люди понимают, что сами управляют ситуацией и хотят дойти до конца «квеста».
В некоторых случаях можно использовать нестандартные вариации чекбоксов в сочетании с другими селекторами. Например, совместить флажок и переключатель. Суть в том, что активация опции в этом случае получится более наглядной, но использовать необычную структуру стоит только с правильным контекстом. Иначе мечты о высокой конверсии останутся только на бумаге.
Радиокнопки похожи на чекбоксы по внешнему виду, но сильно отличаются по назначению и работе. Это маленькие круглые кнопки, которые закрашиваются при активации. Название элемента происходит от радиоприёмников, которые устанавливают в автомобили.
В примере выше радиокнопки очень похожи на чекбоксы и отличаются только круглой формой. При активации в центре появляется галочка, которая символизирует выбор варианта. Радиобаттоны используются, когда надо выбрать один элемент. Например, при оформлении кредита на сайте необходимо выбрать срок действия договора и нельзя одновременно задействовать несколько вариантов.
Радиокнопки используются так же часто, как и чекбоксы, поэтому их оформлению надо уделить максимум внимания. Принцип работы элемента максимально простой. Остаётся только адаптировать компонент под особенности проекта и добавить «изюминку».
В качестве усилителя внимания отлично подойдёт аккуратная анимация, которая привлечёт внимание пользователей и добавит интерактивность в форму. В примере ниже дизайнер сделал необычную анимацию, которая наглядно показывает переход от одной опции к другой.
При правильном использовании радиокнопки не только увеличивают конверсию форм, но и защищают потенциальных клиентов от неправильного выбора. Используйте селектор только для применения выделенных параметров.
Главное условие корректной работы радиокнопок — понятные надписи. Как и в случае с чекбоксами, пользователи смотрят на лейблы и понимают, что поменяется в форме после активации. Старайтесь делать логичные подписи, чтобы не было сомнений по поводу правильности выбора.
Тумблеры или свитчеры — переключатели, которые позволяют выбрать только одно решение. Это как с выключателем света, он либо включён, либо нет. В реальной жизни мы постоянно сталкивается с переключателями, поэтому они должны аналогично работать и в цифровой среде.
Тумблеры лучше использовать для сохранения настроек или применения дополнительных параметров. Например, включать и выключать виртуальный тур по приложению после регистрации. Для решения этой задачи не подойдут радиокнопки и частично подойдут чекбоксы.
Хороший пример реализации свитчеров есть в операционной системе iOS. Дизайнеры сделали переключатели стильными и понятными, их повсеместно используют в других цифровых продуктах. В неактивном состоянии тумблер выделен серым цветом, а после клика область закрашивается зелёным.
Переключатели тоже бесполезны без поясняющего текста. В отличие от других селекторов он может быть более длинным, чтобы пользователи точно поняли, стоит включать опцию или нет. Объём текста в лейбле зависит от контекста и задачи, которые решает элемент.
В правом экране концепта тумблер включает и выключает эквалайзер. В этом случае хватит одного слова, чтобы было понятно, что произойдёт после нажатия. Цветовые индикаторы делают процесс использования более наглядным.
Выпадающие списки или дропдауны — стандартный элемент интерфейса, который используется для решения определённых задач. Главное преимущество компонента в том, что он экономит полезное пространство. Представьте, что в форме размещены 20 стран, которые сделаны в виде радиокнопок. На мобильных устройствах придётся потратить много времени на прокрутку.
Исследования веб-аналитиков показывают, что дропдауны лучше использовать, когда есть не менее 10 вариантов. Отличный пример эффективного выпадающего списка — выбор даты и времени в формах. Показывать дни по умолчанию не стоит, чтобы не терять дополнительное пространство, которое можно использовать для других блоков.
В примере выше реализован крутой концепт дропдауна. Он отличается от скучных выпадающих списков, которые часто встречаются в десктопном софте и сервисах, которые не уделяют внимание юзабилити.
Главная проблема длинных выпадающих списков в том, что пользователям трудно найти нужный вариант. При оформлении заказа в большом интернет-магазине, который работает со всеми странами мира, придётся долго листать список в поисках региона. Упростить задачу поможет навигация. Например, можно добавить горячие клавиши для перехода к странам по введённой букве. Или разместить поисковую строку вверху, чтобы пользователи ввели полное название.
В некоторых случаях дропдауны станут идеальным решением, но их использование сопряжено с некоторыми техническими неудобствами. В разных браузерах выпадающие списки отображаются по-своему. Чтобы привести структуру к единому формату, программисту придётся потратить много времени и разбираться в тонкостях оформления.
Вторая критичная проблема дропдаунов заключается в нелогичной прокрутке. Если область не выделена ярким цветом и разработчик не уделил внимание прокрутке, пользоваться элементом выбора будет неудобно. Вместо перехода к варианту из списка, пользователи будут прокручивать страницу.
Мы разобрались с основными видами переключателей, теперь затронем важный атрибут этих UX-элементов. У них есть несколько состояний, которые отличаются по техническим особенностям и визуальному оформлению.
У каждой группы переключателей свои состояния, поэтому при работе с селекторами надо проработать все варианты. Всего существует 4 состояния: неактивное, сфокусированное, активное и нажатое.
Для каждого состояния необходимо создать визуальный ряд, чтобы пользователи могли без труда понять, с какими компонентами можно взаимодействовать, а с какими нет. Например, неактивные элементы в выпадающем списке можно сделать серыми и менять цвет для активных. Этого хватит, чтобы отобразить состояние.
У чекбоксов и радиокнопок есть все 4 состояния, свитчеры могут быть только включены или выключены. С выпадающими списками сложнее, доступные состояния зависят от контекста использования. Обычно применяется активное, сфокусированное и нажатое состояние.
При разработке дизайна селекторов нужно обязательно предусмотреть изменение визуального ряда в зависимости от состояния элемента. В случае с чекбоксом можно использовать следующие варианты:
Красивые микро-анимации всегда положительно влияют на эмоции пользователей. Некоторые эффекты сделаны настолько красиво, что хочется снова и снова добавлять товары в корзину. Даже если потенциальный клиент не оформит заказ сразу, он точно запомнит эмоции и будет ассоциировать их с проектом и компанией.
Селекторы влияют на принятие решения. Можно сказать, что они являются завершающим штрихом в длительном процессе заказа товаров или подписки на услугу. Нажатие кнопки только лишь символизирует завершение. Чекбоксы, радиокнопки, тумблеры и выпадающие списки могут как повысить лояльность, так и снизить её до предела.
Один из частых споров по поводу радиокнопок связан с выбором по умолчанию. Некоторые веб-аналитики говорят, что люди должны сами принимать решение. Тогда они убеждаются, что ситуация под контролем. Другие специалисты утверждают, что надо обязательно отметить кнопку в форме по умолчанию.
Доводы обеих сторон логичные, но лучше аккуратно подтолкнуть к выбору. Можно просто добавить опцию, которая позволит пропустить дополнительную услугу. Если предлагаете выбрать с помощью радиокнопки вид шнурков к кроссовкам, дайте возможность оставить стандартный вариант. По умолчанию можно сделать его активным и предложить дополнительные решения.
Горизонтальное позиционирование эффективно работает в редких случаях. Когда элементы размещены по вертикали, с ними гораздо проще взаимодействовать и анализ информации происходит быстрее. Если подписи длиннее одного слова, лучше выбрать стандартное вертикальное расположение.
Если возникнет необходимость разместить радиокнопки в горизонтальном формате, обязательно разделите их пустым пространством. Проблема в том, что на смартфонах маленькая рабочая поверхность. Кнопки надо не только вставить в форму, но и дать возможность пользоваться ими без проблем. Хотя горизонтальное позиционирование всё же более логичное.
Мы уже говорили, что выпадающие списки с большим количеством элементов могут затруднить навигацию. Придётся тратить время на прокрутку в поисках нужного варианта. Когда элементов не более 5-7, можно воспользоваться радиокнопками. Тогда опции будут находиться перед глазами и проблем не будет.
К примеру, если предлагаете выбрать в форме пол, не используйте для этой задачи дропдаун. Радиокнопки не только сэкономят пространство, но и позволят людям быстрее отметить опцию.
При стандартном использовании чекбоксов, переключателей или радиокнопок пользователи без труда добираются до конечной точки формы. Проблемы начинаются, когда приходится группировать блоки. Например, если на сайте можно заказать разные профили пластиковых окон, и конфигурация зависит от выбранного производителя.
Вложенные флажки или чекбоксы не будут сбивать людей с толку, только если потратить время на проработку структуры. В идеале, элементы выбора надо размещать на одном уровне, чтобы не портить визуальную картину.
В случае крайней необходимости можно создать структуру, которая будет логичной и однозначной. В примере ниже оценочная шкала сделана в виде чекбоксов. Это очень удачное решение, выпадающие списки или флажки в этом случае не подходят.
Все элементы дизайн-систем должны сообщать о своём состоянии и откликаться на действия пользователей. Селекторы не являются исключением. Добавьте анимацию и наглядно проиллюстрируйте разные состояния флажков или радиокнопок.
Визуальный отклик делает любые операции прозрачными и логичными. Пользователи понимают, что выполнили определённое действие и знают, что за этим последует. Нажали на чекбокс, он активировался и можно переходить к следующему шагу.
В идеале, элементы выбора должны откликаться на действия мгновенно. Если возникнут трудности, пострадает пользовательский опыт. Потенциальные клиенты по умолчанию уверены в том, что нажатие или переключение тумблера не придётся выполнять повторно. Система должна работать, как слаженный механизм.
Пользователи привыкли к стандартному поведению элементов дизайна. Кнопки должны нажиматься, выпадающие списки раскрываться по клику, а флажки активироваться без промедления. Любое отклонение от привычных паттернов может повлиять на конверсию. Протестируйте эффективность разных вариантов форм, чтобы найти оптимальное решение.
Используйте для флажков квадратики, а для радиокнопок — кружочки. Делайте тумблеры такими, чтобы можно было понять, что они переключают состояние. Круглые чекбоксы или квадратные радиокнопки могут смутить пользователей, и они не дойдут до выполнения целевого действия.
Мы в веб-студии IDBI знаем, насколько важны формы для коммерческих проектов. Если вам нужен продающий дизайн, свяжись с нами по телефону, в мессенджерах или по email.