Лилия Кавлюк
29 июля 2013

Разыгрался у нас с заказчиком горячий спор. Он человек разумный и пообещал прислушаться к точке зрения незаинтересованного профессионала. Есть у нас сайт продажи винограда, а именно корзина с контактными данными клиента. Целевая аудитория — люди за сорок. Они жутко консервативны и в общении с компьютером не сильны. Именно такой спецификой аудитории заказчик мотивирует необходимость сильно детализировать последующие действия для клиентов. На варианте номер 1 моя версия, номер 2 — заказчика. Мне второй вариант кажется слишком «навязчивым» и «кричащим».


Лилия!

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

Клиента волнует КПД формы. Если хотите узнать, кто из вас прав — проведите А/Б-тест. Предположу, что явное указание на ошибку в поле ввода повысит конверсию. Добавление звёздочек * для обязательных полей, возможно, также повысит конверсию,— теперь сразу видно, что на половину формы можно забить. Но этот же ход снизит количество указанных адресов электронной почты — ведь сейчас никак не объясняется, для чего её указывать.

Вас волнует эстетика и минимализм — сделайте свой вариант без дословного повторения фраз серым и розовым шрифтом. Используйте правильную терминологию: «электронная почта» вместо «электронного адреса» — тогда не придётся добавлять в скобках email. Внятно назовите поле с пунктом доставки, сейчас нельзя понять, что вы хотите спросить — название деревни или конечный адрес. Не хотите звёздочек — откажитесь от необязательных полей. И снова проведите А/Б-тест.

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


На десерт — бюрошные гайдлайны.

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

Для любых полей, особенно необязательных, рекомендуется объяснять их предназначение. Зачем пользователю сообщать эту информацию, какую он получит пользу?

Фраза «Все поля обязательны для заполнения» имеет смысл непосредственно рядом с кнопкой отправки формы, а не над полями. В начале формы она будет проигнорирована.

Нежелательно ограничение ввода символов в зависимости от типа поля — несрабатывающие клавиши сбивают с толку и вызывают панику. К тому же каждый человек имеет право написать дату словами или оформить телефон пробелами. Если человек ввёл что-то недопустимое, лучше сообщить ему об этом после ввода. Но эта мысль не распространяется на мобильные телефоны, планшеты и публичные тачскрины, где вводимые символы наглядно ограничены видом экранной клавиатуры.

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

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

Сообщение об ошибке может располагаться рядом с подсвеченным полем ввода (справа или снизу):


или в тултипе, как на «Раз-два-трипе»:


В первом случае сообщение желательно подкрасить красным или жёлтым, во втором оно и так хорошо видно.

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


В коротких формах такой интерфейс будет выглядеть избыточно.

Любое из этих правил может быть пересмотрено в результате А/Б-тестов в конкретном проекте.

P. S.

Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Роман Верник
29 июля 2013

Кто-нибудь из советчиков сталкивался на личном опыте с увеличением конверсии после переработки формы заказа?

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

Сергей Якунин
28 ноября 2013

Недавно мой старший брат сообщил мне: что чем больше среднее время пользования сайтом — тем лучше для владельца. Мол, телевидение работает по такому принципу. Я думаю иначе. Бывает — люди развлекаются, смотрят ТВ, а бывает — работают, ищут заказы. Пользователь за доли секунды понимает — того, что он ищет тут нет — и уходит. Это суперрезультат. Но при учёте конверсии многие примут такое поведение за негативное.

По-моему, конверсия не дает полной картины. Конверсия может не меняется, а полезность сайта при этом может расти. И прибыль тоже.

Роман! Грамотно сделанная форма очень полезна, как и любая хорошо продуманная вещь. Полезность высокого уровня конверсии — предмет широкомасштабных споров.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Арт-директор требует, чтобы пробел в именах всех файлов заменялся на нижнее подчёркивание 5 10 13 Как создавался новый сайт бюро. Часть четвёртая




Недавно всплыло

3 4 Расскажите об управляемости. Домашнее задание 4 Это я неправ, что долго думал, или магазин, что допустил такую ситуацию? 3