Веб-формы

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

Содержание лекции

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

1. Введение2. Элементы управления3. Проверка данных4. Защита от ошибок5. Подсказки и помощь6. Верный фокус7. Понятная кнопка8. Забота о секретных данных9. Процесс оформления заказа10. Лучшее решение11. Примеры хороших форм

Введение

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

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

Точность и скорость выполнения задач и общее впечатление от сервиса часто зависят от того, насколько взаимодействие пользователя с такими формами эффективно. Хорошая форма – это когда клиент не задает лишних вопросов в процессе ее заполнения. Чтобы добиться этого, достаточно следовать изложенным правилам.

ЗАЧЕМ НУЖНЫ ФОРМЫ?─ получение информации от пользователя─ упрощение и ускорение процесса сбора информации─ уменьшение количества ошибок (например, при заказе по телефону часто неверно

слышат и записывают адрес доставки)

Также формы помогают получить целевое действие от пользователя (покупку, регистрацию, заявку, результаты опроса и т.д.). Если форма неудобная и сложная, пользователь предпочитает не связываться с ними и уходит.

Элементы управления

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

Элементы формы должны соответствовать типу ожидаемой от пользователя информации.

Поле для ввода текста

Радиокнопки: выбор одного значения из нескольких

Чекбоксы: выбор либо одного, либо нескольких значений

Кнопка для совершения действия

Дизайн элементов формы должен помогать пользователю оценить количество вводимых данных.

Правильно

Неправильно

Проверка данных

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

Важно, чтобы система деликатно «молчала», пока пользователь вводит данные. Сообщить об ошибке можно после того, как он закончит ввод (переведет фокус в другое место или нажмет на кнопку отправки формы). Когда пользователь вернется к полю ввода в сообщении об ошибке должна содержаться рекомендация по её устранению.

Правильно

Неправильно

Защита от ошибок

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

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

Если пользователь нажмет на кнопку отправки, когда она неактивна, произойдёт возврат к полю, в котором была допущена ошибка, либо которые было еще не заполнено.

Подсказки и помощь

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

В сложных формах к неочевидным полям стоит добавлять соответствующие комментарии для того, чтобы пользователь понимал, какие конкретно данные нужно вводить и для чего. Когда форма содержит поля для ввода персональных данных, например номер телефона или адрес, стоит добавить пояснение о том, как эта информация будет использована.

Грамотная вёрстка

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

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

ПРИМЕЧАНИЕ 1Когда подпись к полю выравнивается по правому краю, после неё ставится двоеточие. Если хочется больше компактности, можно разместить подпись внутри поля ввода. Однако так стоит делать только в очень коротких формах (например, при авторизации или быстрой регистрации). В других случаях такие формы хуже читаются, так как подпись «затирается» данными пользователя.

ПРИМЕЧАНИЕ 2Область с формой нужно четко отделить от других элементов страницы.

Правильно Неправильно

Верный фокус

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

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

в главное поле ввода.

Понятная кнопка

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

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

ПРИМЕЧАНИЕДля каждой формы должна быть одна «Главная кнопка». Если нужно совершить несколько действий (например загрузить файл), такие элементы управления должны быть менее выразительными:

Секретные данные

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

Если в форме есть поля ввода персональных секретных данных (например пароля или номера банковской карты), необходимо дать возможность скрыть эту информацию от посторонних глаз.

Процесс оформления заказа

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

Пользователю всегда интересно узнать сколько этапов он прошел и сколько ещё предстоит пройти. Визуализация процесса оформления заказа имеет важное значение с точки зрения психологии продаж. Основная схема процесса оформления – 3,4 этапа.

Лучшее решение

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

В соответствии с исследованием движения глаз от компании CXPartners, сканирование формы вниз предпочтительнее, чем слева направо. Это уменьшает количество движения глаз, которое нужно совершить для заполнения формы. Поэтому лучшее решение – это «одноколоночная» форма.

Примеры хороших форм

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru

www.kissmetrics.comwww.groupon.comwww.formsite.comwww.pillowhomes.comwww.zenefits.comwww.gusto.comwww.californiaclosets.comwww.evolutiontrainers.comwww.threadless.comwww.kickstarter.comwww.kayak.com

Примеры плохих форм можно посмотреть здесь:www.badforms.com

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

В компании «CXPartners» разрабатывают и тестируют бесчисленное количество новых и уже существующих форм для сайтов различных компаний. Есть набор золотых правил, которые используются как руководство к дизайну форм, собравшее в себя опыт компании за последние 6 лет.

В компании «CXPartners» решили проверить эти правила и найти более глубокое понимание дизайна веб-форм. Это привело их к необходимости организовать eye-track исследования, чтобы наблюдать за реакцией людей на различные дизайны, и узнать куда же смотрят пользователи, когда они сталкиваются с большим списком полей.

Читать далее статью…>Перевод статьи…>

Желаем успехов в учёбеи ждём на занятиях!

Материал подготовлен для обучения по профессии «Веб-дизайнер» на сайте www.geekbrains.ru