Большинство людей воспринимают мир глазами, поэтому визуальный дизайн имеет большое значение при создании интерфейсных веб-приложений.
Но действительно ли полезны все эти навороты и «карамельки», которыми современные веб-дизайнеры любят насыщать интерфейс? В этой статье я хотел бы рассказать о распространенных ошибках при проектировании веб-форм, а также поделиться некоторыми секретами создания правильного интерфейса.
Стоит отметить, что под «правильным интерфейсом» я подразумеваю интерфейс, который достоверно повышает конверсию и обеспечивает субъективный комфорт для пользователей.
Достоверность данных обеспечивается как исследованиями, проводимыми нашей группой, так и исследованиями сторонних (чаще всего западных) UX-специалистов.
В последнее время тенденции в дизайне как веб-приложений в целом, так и форм в частности стремятся к максимальному украшению: т. н.
«карамельный» дизайн, градиенты, тени, яркие и нестандартные элементы интерфейса.
Иногда среди «дизайна» бывает сложно найти реальный контент. Такое необдуманное оформление приводит к тому, что внимание пользователя отвлекается от основной цели использования веб-приложения; пользователь начинает концентрироваться не на заполнении формы, а на изучении ее дизайна.
В конечном итоге форма никогда не заполняется, и мы не получаем драгоценной конверсии.
Итак, давайте рассмотрим несколько модных тенденций в дизайне веб-форм:
- Нестандартное расположение заголовков полей;
- «Креативные» метки для обязательных полей;
- Слайдеры повсюду;
- Неочевидные контекстные подсказки;
Нестандартное расположение заголовков полей
Метка сообщает вам, какой тип информации необходимо ввести в текстовое или другое поле.Это означает, что пользователь должен прочитать заголовок, прежде чем перейти к полю ввода.
Для сайтов, где контент читается сверху вниз слева направо, метку логично размещать либо над полем ввода, либо непосредственно слева от него.
На практике дизайнеры часто размещают заголовок где угодно, но не на его естественном месте.
Яркий пример — метка расположена под полем ввода (рис.
1): 
Рис.
1 Заголовок поля ввода под самим полем Такое расположение заголовка поля приводит к тому, что люди, привыкшие с детства читать сверху вниз, видят сначала пустое текстовое поле, после чего вынуждены искать дальше объяснение к нему, а затем возвращаться обратно к поле.
Получается, что при заполнении формы пользователь делает два шага вперед, затем один шаг назад, после этого, переходя к следующему полю и его заголовку, делает еще три шага вперед, затем шаг назад и т.д. Казалось бы вроде мелочь, но длинные прыжки туда-сюда утомляют довольно быстро.
Очевидно, что пользователь тратит гораздо больше усилий на заполнение такой нестандартной формы, внимание истощается быстрее и, как следствие, увеличивается количество отказов от заполнения.
По данным нашего исследования с использованием фокус-групп (по 30 человек в основной и контрольной группах), при заполнении формы с нестандартно расположенными заголовками полей (20 текстовых полей, 10 флажков, 10 списков, 4 группы переключателей по 3 в каждой) было увеличение на 16,67 % большего количества отказов, чем в контрольной группе, при заполнении стандартной формы (46,67 % против 30 %), на 30 % больше ошибок при заполнении полей (53,33 % против 23,33 %) и на 63,33 % большей вероятности высказывают субъективное недовольство дизайном формы (73,33% против 10%).
Рис.
2. Результаты юзабилити-исследования форм с заголовками, расположенными под полем Другой распространенный случай — формы с заголовками внутри полей ввода (рис.
3): 
Рис.
3 Заголовок поля ввода внутри самого поля Перечислим несколько причин, почему столь часто используемое решение на самом деле не является правильным выбором:
- Когда пользователь начинает вводить поле, заголовок исчезает. И если пользователь на что-то отвлечется, а затем вернется к форме, он не сразу сможет понять, какое поле он заполняет;
- В особо сложных случаях, когда разработчикам лень использовать js для автоматического исчезновения заголовка при нажатии на поле, пользователю придется совершать массу дополнительных умственных и физических действий, чтобы убрать этот заголовок.
То же самое верно и для существующего, но неработающего JavaScript;
- Поля с заголовками внутри выглядят так, как будто они заполнены, поэтому велика вероятность, что пользователь пропустит какое-либо из полей;
- Если форма заполнена полностью, у пользователя нет возможности проверить правильность заполнения полей, сопоставив их с заголовками;
- Нет возможности напрямую распечатать форму, потому что.
при отсутствии заголовков становится непонятно, какие поля заполнены;
- Нельзя использовать такое оформление формы в случаях, когда заголовки полей состоят более чем из 2-3 слов;
- JS, используемый для реализации этой конструкции, неоправданно усложняет код интерфейса;
Да, форма занимает меньше места, но существенно теряет функциональность.
Это все равно, что выбрасывать еду из холодильника только для того, чтобы полки выглядели аккуратнее.
Дизайнерам следует подавлять свою страсть к минимализму, если он вредит удобству использования.
Наконец, самое издевательское использование титров — это анимированные заголовки.
Вы когда-нибудь видели заголовок, который обычно располагается внутри поля, но при нажатии на поле он медленно сползает влево или вправо от него? я пила , это ужасно как с точки зрения юзабилити, так и с точки зрения дизайна.
Во-первых, этот метод не экономит место, во-вторых, анимация сильно отвлекает пользователя и мы сталкиваемся с массой проблем: ошибки ввода, пустые поля и т.д.
«Креативные» ярлыки для обязательных полей
Если вам нужно показать пользователю обязательные поля, почему бы не использовать красную звездочку (*), которая оказалась стандартом де-факто? Возможно, это не лучший пример инфографики, но за годы использования на многих сайтах он стал привычным для пользователей.Кроме того, звездочка использует так называемый «двойной визуальный акцент», т.е.
пользователь сразу узнает ее по особой форме и цвету и даже в случае нарушений цветовосприятия не будет двойной трактовки этого показателя.
Однако существует определенная группа дизайнеров, которые пытаются внести свои коррективы в этот элемент информационного дизайна.
Конечно, есть люди, которые не знают, что красная звездочка означает, что ее необходимо заполнить.
Но гораздо больше людей привыкли к такому соглашению и вводят их в ступор отклонения от него в виде произвольных изменений формы и цвета отметин (рис.
4).
Рис.
4 Примеры нестандартного оформления подписей обязательных полей И, наконец, самый крутой способ отметить обязательные поля — подчеркнуть заголовок (рис.
5).
Да-да, даже такие вещи иногда приходят в голову некоторым воспылавшим творчеством дизайнерам.
Рис.
5 Подчеркнутые заголовки — вершина «творческого» хаоса Принято считать, что подчеркивание в веб-документах означает ссылку.
А теперь представим себе когнитивный диссонанс, который испытывает пользователь, увидевший в форме подчеркнутые заголовки.
Лично я бы начал кликать по ним, чтобы узнать, что это за ссылки, и отвлечься от процесса заполнения формы.
И для меня, как и для многих пользователей, совершенно не очевидно, что поля с подчеркнутыми заголовками обязательны.
Ради интереса мы провели небольшое узкое исследование в фокус-группе из 30 человек на тему меток для обязательных полей.
Мы получили следующие результаты: 90% респондентов признают красную звездочку символом обязательного поля, 73,33% понимают, что красный квадрат означает то же самое, что и звездочка (при этом 33,3% из них субъективно испытывают дискомфорт от такого обозначения).
), и только 6,67% респондентов сразу распознали подчеркивание как указание на необходимость заполнения поля (остальные пытались нажать на «ссылку») 
Рис.
6. Результаты исследования юзабилити форм со стандартными и не очень обязательными метками полей
Слайдеры и прокрутки в формах
В этой части статьи мы поговорим о слайдерах и скролах, которые являются не вспомогательной частью интерфейса, а прямым способом ввода информации в форму.Стандартный набор элементов управления, используемых для ввода информации, ограничен: текстовые поля, радиокнопки, флажки и раскрывающиеся списки.
Неудивительно, что дизайнеры и специалисты по интерфейсам постоянно испытывают соблазн расширить этот набор.
Одним из таких «расширений» стал слайдер — виртуальный аналог физических органов управления, позволяющий плавно изменять значения различных параметров, от громкости до температуры нагрева плиты.
Подобно своему реальному аналогу, ползунок предназначен для быстрого выбора приблизительного значения.
Для таких целей, как регулировка уровня громкости или перемещение по видео, ползунки идеально подходят. Но хороши ли они при использовании в веб-формах? Чаще всего основное свойство «ручки» — плавная регулировка — в вебе просто не требуется, поэтому появляются слайдеры-мутанты с четко фиксированными значениями (рис.
7).
Рис.
7 Неуместное использование ползунков в формах В тех случаях, когда пользователю необходимо предоставить выбор из нескольких фиксированных значений, логичнее и целесообразнее использовать выпадающие списки или переключатели.
В частности, преимущества выпадающего списка перед слайдером заключаются в следующем:
- Сам элемент управления списком означает, что пользователь может выбрать только одно значение из предопределенного списка, тогда как ползунок подразумевает выбор из диапазона значений;
- Для выбора значения в раскрывающемся списке пользователь может использовать как клавиатуру, так и мышь по своему усмотрению, тогда как при использовании ползунка он ограничивается в большинстве случаев только мышью;
- Пользователи, как правило, больше привыкли к раскрывающимся спискам, чем к ползункам;
- Список стал более гибким и доступным для людей с ограниченными возможностями;
Так, исследование, проведенное для крупнейшего австралийского портала вакансий, показало восьмипроцентный рост конверсии при замене ползунка, позволяющего выбирать диапазон зарплат, на два списка (рис.
8).
Рис.
8 Результаты замены «непонятного» ползунка на привычные выпадающие списки Конверсией в данном исследовании было использование пользователем диапазона зарплат в качестве критерия выбора вакансии.
Руководство портала решило использовать на странице «ползунок зарплаты» для «тонкой настройки» параметров поиска, т.е.
там, где необходимо уточнить полученные результаты (рис.
9).
Рис.
9 Слайдер можно успешно использовать в некритических частях проекта Многие сайты используют ползунки, чтобы предложить пользователям точный выбор в широком диапазоне значений, тогда как пользователя больше удовлетворит несколько предустановленных вариантов.
Например, ползунок на рис.
10 позволяет пользователю установить максимальную стоимость девушки за ночь с точностью до 10 долларов.
Но действительно ли пользователю нужно задуматься о том, стоит ли ограничить поиск 740 долларами или все же потратиться на 750? Гораздо предпочтительнее облегчить выбор, используя флажки с заданными диапазонами цен (скажем, от 0 до 50 долларов, от 50 до 100, от 100 до 200 и т. д.).
Рис.
10. Слайдер против группы флажков: не заставляйте людей слишком много думать На самом деле ползунки не так уж и плохи, просто использовать их (как и любые другие элементы управления) нужно не бессистемно, а только в действительно необходимых случаях.
Пример правильного использования ползунка можно рассмотреть на рис.
11, и вот почему:
- В этом случае важно показать конечные значения диапазона, из которого пользователь может выбирать.
С таким визуальным представлением данных слайдер хорошо справляется;
- Есть возможность выбрать точное значение;
- Пользователь сразу видит влияние своего выбора на изменение стоимости страховых взносов;
- Если пользователь знает точную стоимость своего автомобиля, он может сразу ввести ее в текстовое поле, совмещенное с ползунком;
- Сам слайдер, как необычный элемент интерфейса, вносит разнообразие в заполнение скучной формы;
Рис.
11. Слайдер позволяет пользователю точно выбрать цену своего автомобиля.
Неочевидные контекстные подсказки
Контекстные подсказки оказывают своевременную помощь пользователю в процессе заполнения форм.Примером может служить описание допустимого формата пароля под полем пароля.
Однако в Интернете можно найти кучу форм, в которых контекстная помощь либо скрыта за значками вопросительных знаков, либо вообще отсутствует. Это происходит, в частности, из-за недостатка системных знаний в области юзабилити у специалистов по интерфейсам.
Но мы сейчас не говорим о безграмотных дизайнерах.
Фактически, предоставление пользователю контекстной помощи может значительно упростить заполнение форм, а значит, повысить конверсию и лояльность.
Нет необходимости заставлять пользователя прилагать дополнительные усилия в виде кликов по иконкам, чтобы получить нужную ему информацию.
Своевременное явное объяснение пользователю, что ему следует использовать пароль длиной более 5 символов (рис.
12), позволит существенно сократить количество ошибок и предотвратить повторное заполнение полей (что, кстати, происходит не всегда; во многих случаях пользователь просто закроет страницу с недружественной формой).
Рис.
12 Пример формы с хорошо продуманными контекстными подсказками Использование привычных значков, скрывающих контекстную подсказку, конечно, уменьшает размер формы и приводит к более «аккуратному» виду (рис.
13), но вынуждает пользователя совершить дополнительное действие, которое он не всегда предпримет. до допустить ошибку (мы не любим читать инструкции).
Рис.
13 Использование значков для уменьшения формы Также не забывайте о людях, которые не используют мышь при заполнении форм.
Подумайте, стали бы вы нажимать на крошечный значок справки, когда заходили на сайт с iPad или телефона? А если пользователь привык использовать только клавиатуру при заполнении форм, то, если возникнет вопрос, ему придется тянуться к мышке, кликать по иконке, читать, возвращать фокус в поле ввода.
А вы знаете, сколько пользователей устанут и откажутся заполнять? По данным нашего исследования с участием фокус-группы (60 человек), 23,33% пользователей не завершают заполнение сложной формы из-за полного отсутствия контекстной помощи, а 13,33% отказываются от формы, если им нужно нажать на кнопку.
соответствующий значок, чтобы получить подсказку.
При этом 63,33% респондентов выражают субъективное недовольство отсутствием контекстной помощи, а 30% - необходимостью дополнительного нажатия на значок справки (рис.
14).
Рис.
14 Из-за неграмотного использования контекстной помощи теряется до 23% пользователей, снижается лояльность более 60% В том же случае, если обстоятельства вынуждают нас использовать значки вместо явной контекстной подсказки, мы должны позаботиться о том, чтобы этот значок соответствовал обычным стандартам.
Принято считать, что помощь обозначается знаком вопроса на синем фоне.
Такая инфографика используется не только в веб-дизайне, но и в повседневной жизни, поэтому у большинства пользователей уже давно выработаны «знания»: если что-то обозначено синим значком с вопросительным знаком, то там можно получить помощь.
Когда дизайнер решает заменить стандартную иконку чем-то более креативным, например, спасательным кругом (рис.
15), он создает дополнительные трудности для пользователя, что в конечном итоге снижает конверсию.
Рис.
15 Использование нестандартной инфографики для обозначения подсказки приводит к трудностям восприятия такой формы Казалось бы, компромиссом будет использование всплывающего окна с текстом справки рядом с полем, но и здесь могут скрываться проблемы:
- Пользователи, не подозревая о существовании контекстной помощи, могут начать думать о вопросах, которые могут у них возникнуть перед заполнением формы.
Но мы не хотим, чтобы пользователи нервничали, верно?
- В случаях, когда используются флажки, переключатели и другие элементы управления, отличные от текстовых полей, пользователи увидят контекстную справку только после того, как сделают выбор;
- Подсказки могут скрывать некоторую ключевую информацию;
- Опять же, на мобильных платформах такое решение может оказаться очень неудобным для пользователя;
В случаях, когда контекстная помощь необходима, но добавить ее явно затруднительно, можно использовать всплывающие подсказки – всплывающие подсказки (рис.
16).
Самая удачная область их применения — это чекбоксы и радиокнопки, т.е.
те элементы управления, в которых всплывающее окно не будет мешать вводу информации и не будет отвлекать пользователя.
При этом вы можете проинформировать пользователя о наличии контекстной помощи, обозначив управляющий заголовок пунктирным подчеркиванием, что является обычным стандартом для такого рода ссылок.
Однако не следует забывать, что пользователи, заходящие на сайт со смартфона или планшета, не смогут увидеть подобные подсказки, если они появляются при наведении курсора на ссылку.
Рис.
16 Компромиссное решение — использование всплывающих подсказок
Заключение
Все формы имеют стандартный, устоявшийся набор элементов управления, знакомый большинству пользователей и позволяющий реализовать практически все необходимые функции.Добавление любых новых элементов, а также изменение конструкции и функций стандартных следует осуществлять осторожно.
При разработке форм специалист по интерфейсам должен руководствоваться не собственными предпочтениями, а удобством пользователя и экономической рациональностью.
Каждый внедренный элемент формы, каждый неуместный элемент управления приводит к неудобству для пользователя, снижению конверсии и, в конечном итоге, к потере прибыли компании.
Дьявол кроется в деталях, помните об этом.
Отказ от ответственности: статья не была написана с целью кого-либо «просвещать».
Основная цель — открыть дискуссию на такую деликатную тему, как создание удобных форм.
Давайте учиться друг у друга, чтобы сделать мир лучше.
Теги: #интерфейсы #UX #юзабилити #тестирование юзабилити #дизайн форм
-
Поворотный Момент: Падение Свободы
19 Oct, 24 -
(Видео) Топ-10 Ожидаемых Дронов 2016 Года
19 Oct, 24
