Как заредизайнить форму из стандартных компонент для улучшения UX
Большинство дизайнеров и разработчиков при создании очередной формы на сайте используют стандартные компоненты, заложенные во фреймворк, на котором построен сайт. Хоть и кажется, что это наиболее быстрый и простой путь, но не является оптимальным с точки зрения пользовательского опыта.
Внеся лишь несколько улучшений в визуал используемых UI компонент, вы поможете пользователям быстрее и проще заполнить требуемую форму, что повысить их лояльность к сервису.
Ниже пример между формой, собранной на дефолтных элементах и формой после небольшой оптимизации: расставлены акценты, добавлен F-паттерн считывания информации и т.д.
Радиогруппа
Стандартная радиогруппа не всегда может однозначно ответить на вопрос пользователя «А между чем я вообще выбираю и в чем преимущество одного пункта перед другим?». Все из-за того, что обычно в стандартных радиогруппах есть лишь один заголовок и даже нет подзаголовка или описания → Давайте добавим чуть больше информативности каждому пункту, превратив радиокнопки в выбираемые карточки.
Эти карточки позволяют отображать текст описания, смысловые иконки и другие визуальные элементы, помогающие пользователю принять решение. Кроме того из-за своего размера, карточки создают более крупные зоны для клика, что упрощает выбор. Поскольку поля формы подгружаются в зависимости от выбранного плана, логично предположить, что карточки должны быть первостепенным по акценту элементом в форме и первым шагом в выборе.
Текстовые поля (инпуты)
Текстовые поля в дефолтных компонентах имеют очень маленькую высоту инпута, из-за чего вводить данные становится некомфортно. Увеличив высоту инпута и перенеся название поля внутрь, пользователю не нужно будет «прыгать» взглядом от заголовка к введенному тексту: оба текстовых блока теперь располагаются близко друг к другу.
Кроме того, чтобы добиться большей контрастности между полем ввода и фона, последний можно покрасить в светло-серый оттенок, что делает белый инпут более выразительным и заметным. Другими словами, пользователи смогут быстрее заметить пустые поля, которые требуют от них внимания → Снижается шанс пропустить обязательное для заполнения поле.
Инпут с выпадающим списком
Когда вы в одной форме используется выпадающий список и текстовый инпут, стоит позаботиться о том, чтобы они были «совмещены» и выполнены в одной стилистике, чтобы пользователи визуально видели их связь. Чтобы снизить когнитивную нагрузку, стоит объединять подобные поля в «единую границу», чтобы сделать связь этих элементов более явной, а так же упростить перемещение курсора пользователя между инпутом и селектом.
Небольшие выпадающие списки
В случаях, когда выпадающие списки содержат в себе небольшое количество пунктов выбора, стоит отказаться от них в пользу табов.
Основное преимущество табов в том, что пользователи сразу видят все доступные опции без лишнего взаимодействия с интерфейсом. Очень часто при использовании выпадающих списков, UI-дизайнеры сталкиваются с проблемой, что часть пользователей даже не понимает, что от них требуется и пользователи остаются с дефолтным выбором.
Чекбоксы
На чекбоксы часто жалуются, что по ним сложно попасть из-за небольших зон клика. Особенно эта проблема заметна, если разработчик не добавил в область клика так же и весь текст около чекбокса. Чтобы таких проблем не было (пусть даже разработчик неправильно настроит зону клика), стоит увеличить размеры чекбоксов. Например, есть большая разница в удобстве взаимодействия с чекбоксами 16х16 и 24х24. Большой чекбокс лучше, потому что курсор мыши может спокойно уместиться внутри и пользователь однозначно видит куда кликать.
Кнопка подтверждения (CTA)
Финальная кнопка, подтверждающая заполнение формы, в первом примере немного мелкая и теряется на общем фоне, хотя должна выполнять роль подтверждения и быть заметной. Лучше, если эта кнопка занимает всю ширину формы для большей видимости и удобства пользователей.
И, наверное, одна последняя деталь, которая может еще немного улучшить UX вашей формы – это дополнительное выделение заполненных и выбранных полей, чтобы перед подтверждением, пользователь мог еще раз бегло просмотреть все поля на предмет ошибок.
Снова возвращаясь к первой версии нашей формы, можем оценить, что она, хоть и выполняет свои задачи, но доставляет множество неудобств пользователю: элементы маленькие, поля ввода маленькие и незаметные и т.д. Общее впечатление производит холодное и скорее роботоориентированное, чем то, чем будет приятно пользоваться человеку.
Вывод
Как заредизайнить форму из стандартных компонент для улучшения UXОчень важно оптимизировать визуал вашей формы для улучшения пользовательского опыта, чтобы пользователи могли выполнять свои задачи более эффективно и с большим удовлетворением. Хорошая новость в том, что изменения, которые вам нужно внести, не слишком радикальны. Удачи!
