Как улучшить любую веб-форму
В журнале Телеграф.дизайн вышел перевод статьи «16 дизайн-правил в дизайне форм» Дмитрия Коваленко из Readdle. Он проанализировал проблемы веб-форм и рассказал как их улучшить:
http://telegraf.design/16-dizajn-printsipov-kotorye-uprostyat-zapolnenie-lyuboj-formy/
Оригинал:
https://medium.com/@justd/the-18-must-do-principles-in-the-form-design-fe89d0127c92
Я выделил 10 лучших советов и добавил примеров от себя:
Спрашивай только самое необходимое в данный момент
Если на этапе регистрации от пользователя достаточно его электронной почты и имени, а номер телефона понадобится позже, то нет смысла спрашивать всё сразу. Чем большее усилие должен совершить пользователь, тем меньше будет конверсия формы. Информацию надо выуживать постепенно, чтобы пользователь не устал.
Фокусируй первое поле по умолчанию
Подсказывай респонденту, откуда начинать и тем ты сэкономишь ему клик. Кроме того, явно выделенное первое поле побуждает к заполнению формы.
Используй одну колонку
Структурированная форма воспринимается лучше, её легче сканировать глазами как оглавление. В противном случае глаза двигаются зигзагом, на что уходит больше сил пользователя и дизайнера.
Разделяй поля по смысловым группам
Большая бесформенная куча полей демотивирует. Если разделить её на группы и сделать отступы между ними, будет проще воспринимать информацию. Вспомни сплошной текст без деления на абзацы.
Как можно раньше информируй об ошибках
Используй ограничения на ввод данных. Например, в поле ввода карты не нужно вводить буквы.
Делай поля пропорциональными их контенту
Если в поле нужно ввести две буквы, оно не должно занимать целую строку.
В сообщении об ошибке пиши причину
Если поле введено неверно, это понятно уже из красного цвета. Фраза «Что-то пошло не так» не делает мир лучше. Лучше писать что-то вроде: «В пароле должно быть 8 символов».
Поощряй пользователя: ставь ему зелёную галочку за каждое заполненное поле
Если поле заполнено корректно, это можно понять уже на этапе ввода следующего. Срабатывает психологический эффект: заполнил поле — похвалили галочкой.
Не отвлекай от заполнения
Никаких лишних отвлекающих ссылок, которые могут прервать сценарий. Пользователь уже сделал подвиг: он сфокусировал внимание. Наша задача — затаить дыхание и дождаться, чтобы он закончил и отправил её. Если нужно что-то объяснить, это надо делать словами и всплывашками.
Обоснуй, зачем тебе именно эти данные
Информация, которую готов дать пользователь, дорога ему. Не имея мотивации, он её просто так не отдаст. Чтобы развеять его сомнения, хорошо бы объяснить, с какой стати мы спрашиваем у него группу крови на сервисе авиабилетов.
Бонус не из статьи: Сохраняй введённые данные
Данные пользователя бесценны. Если после нажатия кнопки «Отправить» пользователь видит ошибку 404, о красивом дизайне формы он уже не вспомнит и в бешенстве закроет страницу. Современный фронтенд позволяет проверять, произойдёт ли успешная отправка. Если нет интернета или есть ошибки, сайт должен выводить предупреждение до того, как случилась катастрофа.
#UX #дизайн_форм #высушено
В журнале Телеграф.дизайн вышел перевод статьи «16 дизайн-правил в дизайне форм» Дмитрия Коваленко из Readdle. Он проанализировал проблемы веб-форм и рассказал как их улучшить:
http://telegraf.design/16-dizajn-printsipov-kotorye-uprostyat-zapolnenie-lyuboj-formy/
Оригинал:
https://medium.com/@justd/the-18-must-do-principles-in-the-form-design-fe89d0127c92
Я выделил 10 лучших советов и добавил примеров от себя:
Спрашивай только самое необходимое в данный момент
Если на этапе регистрации от пользователя достаточно его электронной почты и имени, а номер телефона понадобится позже, то нет смысла спрашивать всё сразу. Чем большее усилие должен совершить пользователь, тем меньше будет конверсия формы. Информацию надо выуживать постепенно, чтобы пользователь не устал.
Фокусируй первое поле по умолчанию
Подсказывай респонденту, откуда начинать и тем ты сэкономишь ему клик. Кроме того, явно выделенное первое поле побуждает к заполнению формы.
Используй одну колонку
Структурированная форма воспринимается лучше, её легче сканировать глазами как оглавление. В противном случае глаза двигаются зигзагом, на что уходит больше сил пользователя и дизайнера.
Разделяй поля по смысловым группам
Большая бесформенная куча полей демотивирует. Если разделить её на группы и сделать отступы между ними, будет проще воспринимать информацию. Вспомни сплошной текст без деления на абзацы.
Как можно раньше информируй об ошибках
Используй ограничения на ввод данных. Например, в поле ввода карты не нужно вводить буквы.
Делай поля пропорциональными их контенту
Если в поле нужно ввести две буквы, оно не должно занимать целую строку.
В сообщении об ошибке пиши причину
Если поле введено неверно, это понятно уже из красного цвета. Фраза «Что-то пошло не так» не делает мир лучше. Лучше писать что-то вроде: «В пароле должно быть 8 символов».
Поощряй пользователя: ставь ему зелёную галочку за каждое заполненное поле
Если поле заполнено корректно, это можно понять уже на этапе ввода следующего. Срабатывает психологический эффект: заполнил поле — похвалили галочкой.
Не отвлекай от заполнения
Никаких лишних отвлекающих ссылок, которые могут прервать сценарий. Пользователь уже сделал подвиг: он сфокусировал внимание. Наша задача — затаить дыхание и дождаться, чтобы он закончил и отправил её. Если нужно что-то объяснить, это надо делать словами и всплывашками.
Обоснуй, зачем тебе именно эти данные
Информация, которую готов дать пользователь, дорога ему. Не имея мотивации, он её просто так не отдаст. Чтобы развеять его сомнения, хорошо бы объяснить, с какой стати мы спрашиваем у него группу крови на сервисе авиабилетов.
Бонус не из статьи: Сохраняй введённые данные
Данные пользователя бесценны. Если после нажатия кнопки «Отправить» пользователь видит ошибку 404, о красивом дизайне формы он уже не вспомнит и в бешенстве закроет страницу. Современный фронтенд позволяет проверять, произойдёт ли успешная отправка. Если нет интернета или есть ошибки, сайт должен выводить предупреждение до того, как случилась катастрофа.
#UX #дизайн_форм #высушено
