Автоновости

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

Стоит обмолвиться, что под «правильным интерфейсом» я осознаю такой внешний вид, который точно повышает конверсию и гарантирует индивидуальный комфорт для клиентов. Аутентичность данных гарантируется как исследовательскими работами проводимыми нашей компанией, так и исследовательскими работами посторонних (в большинстве случаев восточных) экспертов по UX.

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

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

Так вот, давайте разберем несколько престижных трендов в дизайне веб-форм:

Необычное размещение заголовков полей;
«Креативные» метки для необходимых полей;
Слайдеры всюду и повсюду;
Спорные коммерческие подсказки.

Заголовок (label) дает подсказку, какой вид информации нужно ввести в текстовом либо другом поле. Это значит, что клиент должен прочитать заголовок до того, как пройти к полю ввода. Для сайтов, на которых текст читается снизу вверх справа налево, label разумно владеть или над полем ввода, или прямо справа от него. На деле же дизайнеры довольно часто устанавливают заголовок где угодно, однако только не в натуральном для него месте. Зайдите на сайт https://topvector.ru/forms.html если возникнут вопросы по данной теме.

Заголовок для поля ввода ниже самого поля. Такое размещение заголовка поля ведет к тому, что люди, привычные с детства читать снизу вверх, видят вначале нелепое текстовое поле, затем они должны искать далее объяснение к нему, а потом прийти обратно к полю. Выходит, что клиент при наполнении формы делает 2 шага вперед, потом 1 шаг назад, после этого, приступая к последующему полю и его заголовку, делает еще 3 шага вперед, потом шаг назад и т.д. На первый взгляд – деталь, но длительная скачка туда-сюда достаточно оперативно утомляет.

Логично, что клиент тратит на наполнение такой необычной формы значительно больше сил, стремительней истощается внимание и, следовательно, возрастает число отказов от наполнения.

По нашему изучению с применением фокус-групп (по 30 человек в основной и контрольной команде), при наполнении формы с необычно размещенными заголовками полей (20 текстбоксов, 10 чекбоксов, 10 листбоксов, 4 группы радиобаттонов по 3 в любой) случилось на 16,67% больше отказов, чем при наполнении нормальной формы контрольной компанией (46,67% против 30%), на 30% больше погрешностей при наполнении полей (53,33% против 23,33%), и на 63,33% намного чаще высказывалось личное возмущение внешним видом формы (73,33% против 10%).

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

Когда клиент начинает заводить данные в поле, заголовок пропадает. И в случае если клиент на что-нибудь отвлечется, возвратившись потом к форме, он не сразу может осознать, что за поле он наполняет;
В особенно тяжелых вариантах, когда создатели поленились применять js для автоматического пропадания заголовка при клике в поле, клиенту надо будет сделать большое количество особых интеллектуальных и физических действий для снятия этого заголовка. То же самое правильно для имеющегося, однако выключенного яваскрипта;
Поля с заголовками внутри смотрятся, как наводненные, потому высока возможность того, что клиент упустит какое-нибудь из полей;
В случае, если выкройка целиком заполнена, у клиента не остается возможности проверить приверженность наполнения полей, соотнося их с заголовками;
Теряется вероятность прямо размножить фигуру, т.к. когда отсутствуют заголовки, является неясно, что за поля заполнены;
Нельзя применять такой дизайн форм в вариантах, когда заголовки полей заключаются не менее, чем из 2-3 слов;
JS, применяемый для реализации этого дизайна безосновательно усложняет код фронтенда.

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

В конце концов, самое глумливое применение заголовков – заголовки с анимацией. Вы никогда в жизни не видели заголовок, который в стандартном пребывании располагается внутри поля, а при клике на поле медлительно переползает налево либо направо от него? Я видел, это страшно и с позиции юзабилити и с позиции дизайна. Прежде всего, место при этом методе не экономится, во-вторых, мультипликация значительно отводит клиента и мы встречаемся с кучей неприятностей: ошибки при вводе, незанятые поля и т.д.

«Креативные» метки для необходимых полей

Если вам нужно показать клиенту необходимые для наполнения поля, то почему не применять ярко-красную звездочку (*), зарекомендовавшую себя, как стереотип de-facto? Вероятно, это далеко не лучший пример инфографики, но за долгое время использования на огромном количестве сайтов он стал обычным для клиентов. Также, в звездочке применяется т.н. «двойной зрительный акцент», т.е. клиент сразу выяснит ее по особенной форме и тону и, даже в случае нарушений цветного восприятия, не появится парного объяснения этого индикатора.

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

И, в конце концов, самое «крутой» метод пометки необходимых полей – выделение заголовка. Да-да, даже такие вещи временами идут в распаленные креативом разумы определенных дизайнеров.

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

Внимания для, мы провели незначительное тесное исследование в фокус-группе из 30 человек на тему ловок необходимых полей приобрели вот какие итоги: 90% респондентов узнают ярко-красную звездочку, как знак непременного поля, 73,33% осознают, что ярко-красный квадратик означает то же, что и звездочка (при этом 33,3% из них лично чувствуют дискомфорт от подобного обозначения), и только 6,67% респондентов различили в подчеркивании распоряжение на необходимость наполнения поля (другие предприняли попытку нажать на «ссылку»).

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

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

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

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

В большинстве случаев основное качество “ручки-регулятора” — складность опции — в интернете просто не требуется, потому появляются слайдеры-мутанты с хорошо прочными значениями.

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

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

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

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

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

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

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

Действительно, слайдеры не так нехороши, просто применять их необходимо (как и любые иные контролы) не как попало, а лишь в на самом деле нужных вариантах.