20 января 2020

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

Пишу, перевожу и иллюстрирую IT-статьи. На proglib написал 140 материалов. Увлекаюсь Python, вебом и Data Science. Открыт к диалогу – ссылки на соцсети и мессенджеры: https://matyushkin.github.io/links/ Если понравился стиль изложения, упорядоченный список публикаций — https://github.com/matyushkin/lessons
Несколько слов о технике, которая улучшает дизайн регистрационной формы, делает её привлекательнее и удобнее для ввода.
Графический приём, благодаря которому пользователи будут регистрироваться чаще

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

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

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

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

Привлекательность мотивирует

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Источники

Комментарии

ВАКАНСИИ

Добавить вакансию
Разработчик C++
Москва, по итогам собеседования

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ