Графический приём, благодаря которому пользователи будут регистрироваться чаще

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

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

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

Графический приём, благодаря которому пользователи будут регистрироваться чаще

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

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

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

Не совсем белые текстовые поля

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

Графический приём, благодаря которому пользователи будут регистрироваться чаще

Чуть подкрашенные текстовые поля быстро привлекают к себе внимание. Обеспечивается более чёткая фокусировка на вводимых данных – легче набирать, проверять и исправлять введённое. Текст за пределами полей не так сильно конфликтует с вводимым текстом и не затрудняет фокусировку.

Не совсем белый фон за текстовыми полями также улучшает качество представления. Подкрашенный фон подчёркивает пустое пространство полей и снижает контраст текста за их пределами. Вводимый пользователем текст ощущается как более чёткий и яркий.

Графический приём, благодаря которому пользователи будут регистрироваться чаще

Важно отметить, что не совсем белый не означает серый. Избегайте использования сплошных серых текстовых полей. Пользователи склонны воспринимать их как неактивные. Серые текстовые поля также затрудняют чтение вводимого текста и текста-заполнителя.

Определения стиля формы через бренд

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

Графический приём, благодаря которому пользователи будут регистрироваться чаще

Подойдёт яркость (brightness) чуть меньше 100% и насыщенность (saturation) примерно до 5%. Понижение яркости на несколько градусов ниже 100 добавит оттенок серого цвета. Уменьшение насыщенности уменьшит оттенок вашего не совсем белого. Немного более тёмный оттенок границы придаст полю бо́льшую глубину.

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

Графический приём, благодаря которому пользователи будут регистрироваться чаще

Заключение

Вам не потребуется много времени или продвинутых дизайнерских навыков, чтобы улучшить внешний вид и удобство sign-up-формы. Не изменится и алгоритм обработки запроса. Разделив фон и текстовые поля за счёт незначительного окрашивания, вы освежите форму и сделаете процесс регистрации удобнее.

proglib.io

Добавить комментарий

Ваш e-mail не будет опубликован.

16 + 20 =