Юзабилити форм – Юзабилити аудит сайта — чек-лист, лучшие примеры юзабилити и разбор ошибок

Как улучшить юзабилити форм? | UX Guru

Кратко: Следуйте этим хорошо зарекомендовавшим себя — но часто игнорируемым – рекомендациям, для того, чтобы пользователи могли успешно заполнять вэб формы.

Управление транспортной безопасности (TSA) помогает сохранять безопасность авиаперелетов. Но так как опоздания или тот факт, что вас заставляют снимать с себя одежду в общественном месте, гарантированно раздражает множество людей, то понятное дело, что они получают немаленький объем жалоб.

Так что, когда я впервые увидел форму жалобы TSA, ошибка ее дизайна, показалась мне настолько очевидной, что я подумал, что она сделана специально. Форма включает в себя 2 кнопки в нижней части: «Предварительный просмотр» и. Кнопка «Очистить форму» тут чуть более, чем, неуместна так как большинство пользователей ожидает увидеть кнопку «Отправить» или по крайней мере «Дальше». Но настоящая проблема заключается в кнопке «очистить форму», которая удаляет все данные, введенные в форму.

Намеренно или нет, эта форма, несомненно, уменьшает объем жалоб! Однако она также нарушает рекомендацию по проектированию вэб форм, которую мы написали более 15 лет назад: избегайте кнопок сброса в вэб формах.

Веб — форма TSA содержит кнопку «Clear Form», нарушающую рекомендации по юзабилити, которым уже более 15 лет. Так же она расположена ближе, к полю ввода, чем кнопка «пред просмотр», (нарушая дополнительную директиву о расстоянии между объектами и их главных действиях), что создает вероятность того, что пользователь нажмет ее по ошибке.

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

Как налогоплательщику, мне нравится думать, что правительственное агентство использует плохой дизайн чтобы не слышать мои комментарии в свой адрес не намеренно. Но с точки зрения UX это болезненное напоминание, что, несмотря на популярность «UX» в последние годы, часто до сих пор не хватает основного понимания юзабилити. Даже простые рекомендации, которые должны быть хорошо известны часто неизвестны или игнорируются.

Тщательный форм-дизайн оказывает огромное влияние на скорость, с которой пользователи понимают и заполняют форму. В недавно опубликованном документе CHI, написанном Секлер и ее коллегами показывает, что когда формы следуют основным правилам юзабилити, время заполнения значительно уменьшается, и пользователи, с почти двукратной вероятностью, отправляют форму без ошибок и с первого раза (78% форм, заполненных с первого раза это формы, следующие правилам юзабилити, и только 42% форм, заполненных с первого раза это формы их нарушающие). Если вам интересно, почему у вашей конверсионной воронки такие большие потери, на стадии заполнения форм, это исследование поможет вам это понять: проблемы юзабилити в формах могут навредить бизнесу.

А формы Вашего вэб-сайта следуют лучшим практикам юзабилити?

 

Рекомендации по дизайну вэб-форм

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

1. Сделайте форму краткой. Математик Блез Паскаль сказал знаменитую фразу: «Это письмо получилось таким длинным потому, что у меня не было времени написать его короче». Этот принцип применим и к веб – формам, и к прозе. Устранение ненужных полей требует больше времени, но уменьшение усилий пользователя и увеличение темпов завершения делает это стоящим занятием. Удалите поля, собирающие информацию, которая может быть (А) получена каким — либо другим способом, (В) может быть собрана в более поздний срок, или (С) просто опущена. Недавно мы применили эту технику к одной из наших собственных форм и сократили ее с шести полей до всего двух. Каждый раз, когда вы убираете поле или вопрос из формы, вы увеличить коэффициент конверсии — экономическое обоснование для этой рекомендации вот такое простое.
2. Визуально сгруппируйте сходные поля и отметки. Отметки должны располагаться близко к полям, которые они описывают (непосредственно над полем для мобильных и коротких форм, или рядом с полем для очень длинных настольных форм). Избегайте неопределенных отступов, где отметки находятся на одинаковом расстоянии от нескольких полей, и обязательно добавьте меткам атрибуты для чтения с экрана. Если ваша форма спрашивает о двух различных темах, разделите ее на две отдельные группы полей (и пометьте группы для чтения с экрана).
3. Поместите все поля в одну колонку. Несколько столбцов прерывает вертикальный импульс движется вниз по форме. Вместо того, чтобы заставлять пользователей визуально переориентироваться, придерживайтесь одного столбца с отдельной строкой для каждого поля. Исключения из этого правила: короткие и/или логически смежные поля, такие как город, штат, и индекс могут быть представлены в той же строке.
4. Используйте логическую последовательность. Придерживайтесь стандартных последовательностей как для полей (например, номер кредитной карты, дата окончания действия, код безопасности), так и для выбора значений (например, стандартная доставка груза, двухдневная доставка, однодневная доставка). Но для значений полей рассмотрите вопрос о частоте использования, а также разместите наиболее распространенные значения первыми в списке. Помогите пользователям клавиатур путем тестирования Tab- навигации, и убедитесь, что она следует правильной последовательности полей.

Приложение iPhone Starbucks, которое включает в себя мобильную форму, чтобы позволить вам оформить заказ напитка, к сожалению, скрывает все опции «DECAF» справа экрана, требуя горизонтальной прокрутки. Если опция «без кофеина» выбирается чаще всего, она должна быть отображена в первую очередь.

5. Избегайте текста внутри форм. Дизайнеры любят помещать исчезающий текст внутри форм, так как это устраняет визуальный беспорядок. Но такой текст вызывает много проблем с юзабилити, и его лучше избегать.
6. Подгоните поля к типу и размеру вводных данных. Избегайте раскрывающихся меню, когда есть только 2 или 3 варианта, которые могут быть отображены в виде радиокнопок (которые требуют только одного клика). Текстовые поля должны быть примерно того же размера, что и ожидаемые вводные данные, поскольку пользователи часто совершают ошибки, когда не видят полную запись. Например, для 2130 последних участников конференции по UX, обозначили, что город проживания пользователя колеблется от 3 -х символов (Leo, Indiana) до 22 символов (San Pedro Garza Garcia, Mexico). 99,9% названий городов состояло из 19, или меньше символов, что делает 19 символьное поле ввода достаточным по ширине, для поля с названием города проживания.
7. Выделите необязательные и обязательные для заполнения поля. Во- первых, устраните как можно больше необязательных полей, (см первую рекомендацию выше). Если некоторые поля действительно необходимы, но применяются только к подгруппе пользователей, не заставляйте пользователей применять метод проб и ошибок. Ограничьте форму 1 или 2 дополнительными полями, и четко обозначьте их как необязательные.
8. Объясните все требования к вводимым данным или их формату. Если поле требует определенного формата или типа данных, укажите точные инструкции. Не заставлять пользователей угадывать ваши непонятные требования к паролям. То же самое относится и к правилам синтаксиса, таким, как знаки препинания или пробелы для телефонных номеров или кредитных карт. Хотя, насколько это возможно, вы должны устранить эти деспотичные правила форматирования: смерть круглым скобкам для телефонных кодов городов!

Форма сброса пароля Netgear объясняет требования к паролям… но только как сообщение об ошибке после того, как вы его неудачно ввели. Не настраивайте пользователей на неудачу секретными правилами.

9. Избегайте кнопок «Сбросить» и «Очистить». Риск случайного удаления перевешивает маловероятную необходимость начать заполнять веб-форму заново. В формах, которые собирают чрезвычайно чувствительную информацию, такую, как финансовую, предоставьте кнопку «Отмена», чтобы поддержать тех пользователей, которые отказались от формы и хотят удалить свою информацию. Но убедитесь, что кнопка отмены имеет значительно меньшее визуальное выделение, чем кнопка «подтвердить», чтобы избежать случайных нажатий.
10. Обеспечьте хорошо видимые и понятные сообщения об ошибках. Ошибки должны быть обозначены посредством различных сигналов, а не только цветом: очертите поле, используйте красный текст, используйте более тяжелый шрифт, чтобы убедиться в том, что пользователи не упустят из виду эту важную информацию. Это не время нежностей.

Ошибочный текст должен быть сохранен, чтобы пользователи могли его исправить, так же он должен сопровождаться конкретным объяснением проблемы.

 

Заключение

Юзабилити веб — форм, это не новая тема. Она была покрыта в обоих общих рекомендациях по юзабилити (включая несколько NN/g книг по обоим общим рекомендациям по юзабилити, исследованию Eyetracking юзабилити и мобильном юзабилити). Многие из 114 руководств UX для электронной коммерции отвечают на вопросы из области дизайна форм. Есть также целые книги, написанные о дизайне форм, а также научные исследования, демонстрирующие эффективность соблюдения руководящих принципов.

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

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

Источник nngroup.com

Оптимизируем юзабилити веб-форм / Хабр

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

Сегодня мы обсудим способы улучшения и оптимизации форм.

Сделайте ее до тупости простой

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

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

Форма поиска в сервисе Iconfinder.

Подписка на рассылку сайта HeyDesigner.

Форма должна быть организованна

Чем меньше полей, тем лучше, так как это снижает временные затраты. Однако, если она длиннее, то это не всегда страшно. Попробуйте объединить несколько полей в секции, Вам понравится. Пусть это будет опрос о маме и папе, тогда вопросы о каждом родителе должны отображаться раздельно.

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

Форма заказа на сайте Fitbit.

А это — в магазине Jawbone.

Если вопросов много, то отображайте прогресс заполнения

Многостраничная форма вроде приобретения товаров должна сообщать человеку о том, сколько ему еще предстоит иметь с ней дело. Будьте прозрачны. Скажите сами о том, сколько еще предстоит выполнить шагов (но по-прежнему сводите все к минимуму.).

Процесс запроса инвайта в закрытое сообщество Juiiicy.

Сбор информации о пользователе для Working Nomads.

Указывайте синтаксис ответа

Вам ведь известно, что номер телефона можно записать по-разному? С помощью placeholder Вы можете сообщить своему посетителю о том, что от него требуется. Если хотите увидеть запись вроде (111) 222-333, то так и скажите. Кстати, этому способу есть альтернатива. Если Вы не обозначили своих требований, то будьте гибкими. Не нужно выдавать ошибки.

Как можно привести все данные к одному формату? Просто производите ее парсинг с помощью JavaScript или RegEx.

Easypost на своей странице регистрации помогает человеку не ломать голову.

Дайте кнопкам соответствующие имена

Кнопки могут сбить с толку своими некорректными подписями. Если в конце формы присутствует кнопка «Submit», то она не может дать представление о том, что произойдет после ее нажатия, а вот «Send» или «Create an account» придают больше ясности. С ними пользователю становится очевидно, что он делает.

Форма регистрации в сервисе Dropbox.

Пишите корректные пояснения

Правильно описывать требуемую информацию тоже важно. Сделайте так, чтобы Ваш гость ни в чем не сомневался. Не стесняйтесь повторить о том, что в данном поле Вы хотите знать о конкретном родителе. Будьте настойчивы: “Фамилия матери”.

Зачем кому-то гадать, о чьей именно фамилии идет речь?

Форма Karma довольно проста и очевидна.

Объясните, зачем Вам нужно что-то знать о пользователе

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

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

Пример формы регистрации в сервисе Stripe.

Выпадать или не выпадать

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

Выбор пола в форме регистрации HealthTab.

Поиск на портале Lovely.

Последние советы

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

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

Простейшая авторизация в Medium.

Форма входа на Awwwards.com.

Заключение

Мы поговорили с Вами не только об оптимизации форм, но и повышении конверсии всего проекта в целом. Объясняйте своим пользователям, что и зачем Вы от них требуете, и старайтесь просить как можно меньше и давать как можно больше. Предоставляйте им как можно больше справок (placeholder и т.д.). Лучшие формы — простые и четкие формы. Не тратьте ничье время и будьте счастливы.

7 правил юзабилити мобильных форм

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

Следуйте этим семи правилам для создания простых и понятных форм:

Правило №1: Формы должны быть совместимы с тем, как пользователь вводит свои данные

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

Правило №2: Минимизируйте количество полей ввода и необходимость пользователя печатать

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

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

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

Умные дефолты

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

Автоматическое определение локации позволит сэкономить время пользователю на поиск номера в гостинице

Радиобаттоны для схожих, но взаимоисключающих вариантов выбора

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

Слайдеры для минимальной/максимальной цены или диапазона бюджета

Подумайте об использовании слайдеров для полей, которые содержат цены или бюджет. Так пользователь сможет двигать слайдер к минимальному/максимальному значению. Слайдер легко перемещать по-горизонтали, а также можно запросто кастомизировать это действие при помощи визуальных подсказок. Но помните, что числа не должны скрываться при взаимодействии со слайдером (особенно при использовании большими пальцами).

Слайдер в форме AirBnB для выбора цены

Правило №3: Заголовки формы должны находиться либо выше самих полей, либо быть плавающими

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

Почему никогда не стоит использовать текстовые заголовки внутри поля

Заголовки внутри поля (или плейсхолдер) – это текст, который находится внутри поля формы, который исчезает как только пользователь начинает вводить свои данные.

Заголовки внутри поля
В то время, как заголовки внутри поля выглядят хорошо с эстетической точки зрения, это преимущество часто становится переоцененным. Основной ошибкой является потеря контекста. После того, как пользователь кликнул на поле, надпись пропадает. И, соответственно, он не может проверить, что он написал именно то, что необходимо.

Текст внутри поля является не самой лучшей заменой визуального заголовка

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

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

Главное, что необходимо учитывать при использовании заголовков, выровненных по левому краю, на мобильном устройстве – это размер экрана и соотношении сторон. Если заголовок слева стоит напротив поля, то при вертикальной ориентации экрана, у вас останется очень мало места для самого поля. Это создает определенную сложность в использовании потому, что остается недостаточно места для отображения того, что вводит пользователь. Невозможность увидеть введенный текст, создает проблему для пользователей потому, что это не дает возможности быстро заметить ошибку при вводе перед подтверждением формы.

Очень трудно заметить ошибку если данные видны не полностью

Заголовок сверху или адаптивный заголовок

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

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

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

Правило №4: Валидация поля формы должна происходить в режиме реального времени

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

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

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

Правило №5: Отображение раскладки клавиатуры соответственно вводимым данным

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

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

Правило №6: Предоставляйте полезную информацию в контексте

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

• При планировании дат, пользователи ценят контекст типа встроенного календаря для определения дней недели. Это снижает необходимость выхода из приложения для просмотра календаря, что снижает риск того, что пользователь отвлечется от своей основной задачи.

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

В качестве правила хорошего тона, не стоит растягивать объяснение на 100 символов.

Правило №7: Используйте гибкий формат

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

Не используйте фиксированный формат ввода данных

Вывод

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

Спасибо!

Юзабилити веб-форм: практическое руководство. Часть 1

Стандарт ISO 9241 определяет удобство использования веб-сайта как “эффективность, результативность и удовлетворенность тем, что указанные пользователи достигают определенных целей в определенных средах”. При использовании веб-сайта пользователи имеют конкретную цель. Очень часто в качестве инструмента для ее достижения используются веб-формы. Юзабилити веб-форм – именно об этом мы сегодня и поговорим.

Шесть компонентов веб-форм

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

1. Заголовки. Они сообщают пользователям, что означают соответствующие поля ввода;
2. Поля ввода. Позволяют пользователям предоставлять информацию. Они включают в себя текстовые поля, поля пароля, флажки, переключатели, ползунки и многое другое;
3. Действия. Это ссылки или кнопки, при нажатии на которые выполняются действия. Например, отправка формы;
4. Помощь. Эти подсказки помогают понять, как заполнить форму;
5. Сообщения. Дают обратную связь пользователю на основе введенной информации. Они могут быть положительными (например, “Ваша форма была успешно отправлена”) или отрицательными (“Выбранное вами имя пользователя уже занято”).
6. Проверка. Эти меры гарантируют, что данные, представленные пользователем, соответствуют приемлемым параметрам.

Регистрационная форма на сайте “Детский мир” содержит все элементы веб-форм:

Решение проблем юзабилити веб-форм

Несмотря на различия в компоновке, функциональности и назначении, все формы имеют три основных аспекта:

• Отношения. Устанавливают отношения между пользователем и сайтом;
• Диалог. Они устанавливают диалог между пользователем и сайтом;
• Внешний вид. По тому, как они выглядят, они устанавливают отношения и диалог.

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

Аспект 1: отношения

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

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

2. У каждого отношения есть цель. То же самое касается веб-форм. Спросите себя, какова цель вашей формы;

3. Название формы. Оно сообщает пользователям, о чем эта форма и почему они должны ее заполнить.

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

Аспект 2: диалог

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

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

Рассматривая веб-формы с этой точки зрения, можно вынести ряд рекомендаций:

• Форма – это диалог. Агрессивная формулировка вопросов заставляет пользователей нервничать;
• Логика в расположении полей. Согласитесь, было бы странно спрашивать кого-то о имени в конце, после ряда других вопросов. Поэтому более сложные вопросы нужно поставить в конце формы;
• Постоянная контактная форма. Как и в реальном разговоре, каждое поле должно затрагивать одну тему за раз, помогая пользователю ответить в соответствующем поле ввода.
• В любом разговоре люди отвлекаются на фоновый шум. Поэтому удалите помехи рядом с формой:  баннеры, анимацию, ненужную навигацию и т.д.

Третий аспект юзабилити веб-форм – внешний вид, мы разберем в следующей статьей. Следите за обновлениями!

usability форм фильтрации / Habr

Большинство интернет-магазинов, новостные порталы, да и многие информационные сайты содержат большой объем элементов контента в одной категории. Одним структурированием каталога здесь не обойтись. Придется либо строить иерархию меню уровней в 5-7 (хотя и это может не решить проблемы), либо вываливать на пользователя десятки страниц выдачи в надежде, что он сам разберется, что ему нужно.

Выглядит это обычно как на картинке (плюс еще 10 экранов вниз). Деление на страницы (пейджинация), естественно, никак не улучшает опыт взаимодействия, это лишь способ снизить нагрузку на систему.

Почему изобилие — зло?

Плохая новость еще и в том, что изобилие предложений не помогает принятию решения. Наоборот.
В свое время был проведен эксперимент в супермаркетах розничной сети. Покупателям было предложено продегустировать джемы и купить понравившийся.
На один стол были выставлены 6 видов джема, на другой — 26 видов. Только 40% посетителей подошли к первому столу и 60% — ко второму. Пока счет в пользу изобилия.
Однако с обоих столов дегустаторы попробовали 2-3 джема. То есть, объем предложения не влияет на процесс выбора.
Более того, в результате дегустации купили джем: с первого стола 31% дегустаторов, со второго — 3% дегустаторов.
Такая поразительная разница в конверсии объясняется просто: во втором случае людям показалось, что они попробовали слишком мало вариантов и у них нет серьезных оснований для выбора.
Делаем вывод: для повышения конверсии необходимо сокращать количество вариантов в выдаче. При этом мы не можем сократить общее количество предложений в каталоге и не можем разбить весь каталог на микроразделы, поскольку это слишком усложнит навигацию. Что делать?
Хорошее решение — формы фильтрации каталога.

Внешний вид формы, или рассуждения о том, как делать не надо

Многие (пожалуй, большинство) разработчиков сайтов осознали этот факт. Либо неосознанно копируют друг у друга фильтры, в данном случае это не имеет значения. Выглядят эти формы обычно как на картинке и традиционно вызывают у пользователей раздражение. Попробуем разобраться, почему.
Во-первых, нам снова предлагают избыточное изобилие, теперь уже на уровне параметров. Вместо просмотра сотни предложений мне предлагают просмотреть сотню параметров этих предложений и с некоторой (довольно большой) вероятностью в итоге получить не ту выдачу, на которую я расчитывал. А в клиническом случае — и вовсе сообщение «по вашему запросу ничего не найдено».
Во-вторых, при такой компановке страницы фильтр визуально отделен от самой выдачи и вынесен на боковую панель. Туда, где располагается навигация, баннеры и прочие служебные элементы, выводящие пользователя из контекста конкретной решаемой задачи. Не соблюдается один из основных принципов компановки — принцип близости, когда элементы, выполняющие сходные функции, сгруппированы в общей локальной области.
В третиих, тут нужно упомянуть о такой особенности восприятия человека, как локус внимания. Локус — это место или объект, который находится в центре нашего осознанного внимания. И он у нас в один момент времени может быть ровно один. На уровне когнитивного бессознательного мы можем взаимодействовать с множеством объектов по многим каналам, но осознанно концентрировать внимание можно только на чем-то одном. Так устроен человек, и сделать с этим ничего нельзя. Эта особенность приводит к важным последствиям. Можно воспринимать это как недостаток, но в тоже время она дает дополнительные возможности при проектировании, если уметь ей пользоваться.

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

Как делать?

Из всего сказанного формулируется следующая задача:

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

В результате, получаем довольно разумное решение для расположения фильтров.

1. Располагаем форму фильтрации над выдачей в краткой форме и кнопкой «больше параметров».
2. При нажатии на кнопку разворачиваем форму на большую часть экрана, не экономя на подписях, пояснениях, иконках и других средствах визуализации.
3. Даем возможность свернуть эту форму по окончании процесса фильтрации, именно в этот момент формируем финальную выдачу.

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


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

Юзабилити веб-форм на сайте: повышаем удобство

Karina | 16.07.2016

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

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

Сохраняйте чувство меры

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

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

Долой самодеятельность!

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

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

Еще одна ошибка – неправильное использование HTML-атрибута tabindex. Возможность переключаться между полями веб-формы с помощью клавиши Tab – это большой плюс к юзабилити сайта, ведь пользователь может заполнять ячейки без использования мыши. Следует уделить особое внимание этому пункту при проектировании форм входа/регистрации и онлайн-магазинов.

Безопасность превыше всего

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

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

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

Больше пространства!

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

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

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

Автозаполнение полей

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

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

Поля, обязательные для заполнения

Поля, которые обязательны для заполнения, необходимо должным образом отметить. Можно использовать символ звездочка * для обязательных полей либо подписать, какие поля обязательны, а какие — нет. Не стоит применять атрибут required ко всем полям без исключения, выбирайте только действительно важные.

Понятные сообщения об ошибках

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

Польза тега label

Иногда дизайнеры могут перестараться с упрощением веб-форм, убрав подписи к полям. Между тем тег <label> весьма полезен при разработке удобных форм для мобильных устройств с сенсорным экраном. Клик/касание по label — всё равно что клик по полю ввода/флажку (checkbox). Без тега label пользователю придется прицеливаться пальцем и нажимать четко на поле/чекбокс, что может быть особенно неудобным для человека с плохим зрением. Кроме того, содержимое тега label читается скринридером — программой, которая произносит вслух текст на экране.

Лучше всего размещать ярлык label над полем ввода, а не справа или слева. Это увеличит активную область, и пользователю будет проще попадать по необходимому полю.

И напоследок…

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

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

Юзабилити веб форм: практическое руководство. Часть 2

В первой части статьи, посвященной юзабилити веб форм мы рассказывали об общей концепции веб форм, а также на какие компоненты и аспекты необходимо обратить внимание. Речь шла об отношениях, которые должна формировать и вызывать правильно созданная веб-форма, а также как наладить с ее помощью диалог с пользователем. Во второй (и заключительной) части мы рассмотрим последний аспект веб-форм – их внешний вид.

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

1. Текст

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

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

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

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

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

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

2. Поля ввода

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

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

Ограничение формата полей ввода. Если вам нужно ограничить формат данных, вводимых пользователями, сделайте это так, чтобы не раздражать пользователей. Например, вместо отображения MM/DD/YYYY рядом с текстовым полем для даты рассмотрите возможность использования трех раскрывающихся полей или элемент управления календарем.

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

3. Основные и второстепенные действия

Основные действия – это ссылки и кнопки в форме, которые выполняют основные функции: “Сохранить” и “Отправить”. Вторичные действия, такие как “Назад” и “Отмена” имеют нежелательные последствия. Поэтому используйте, по возможности, только первичные действия. Если вы должны включить дополнительные действия, придавайте им меньший визуальный вес.

4. Помощь

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

5. Сообщения

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

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

Заключение

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