форма заявки мобильная версия

Мобильная форма: восемь UX-советов

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

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

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

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

Ниже приведены 7 клавиатур, которые имеют отношение к дизайну формы:

— input type = «text» отображает обычную клавиатуру мобильного устройства.

— input type = «email» отображает обычную клавиатуру, ‘@’ и ‘.com’.

— input type = «tel» отображает цифровую клавиатуру от 0 до 9.

— input type = «number» отображает клавиатуру с цифрами и символами.

— input type = «date» отображает переключатель даты мобильного устройства.

— input type = «datetime» отображает переключатель даты и времени на мобильном устройстве.

— input type = «month» отображает переключатель месяца и года на мобильном устройстве.

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

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

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

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

Это уменьшает потребность в восстановлении пароля и снижает вероятность того, что потребители откажутся от всего процесса.

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

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

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

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

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

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

В этом случае помогут:

— Проектирование состояния фокуса для полей

— Реализация визуальной обратной связи

— Показ состояния подтверждения или сообщения об ошибках

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

Источник

Принципы дизайна веб-форм для мобильных устройств

Представляю вашему вниманию перевод статьи «Mobile Form Design Strategies» от Chui Chui Tan. Перевели в компании UXDepot. Специально для пользователей Хабрахабра с одобрением издания UX Booth.

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

Веб-формы в обычном браузере vs веб-формы в мобильном браузере


Формы резервирования Hertz и Burger King Locator (слева — дестктоп-версия, справа — версия для мобильного устройства)

Мобильная версия вашего сайта может быть просто облегченной и урезанной версией обычного сайта, лишенной отвлекающих элементов и рекламы (как версия формы резервирования Hertz). С другой стороны, она может быть специально разработанной версией, с более легким и удобным интерфейсом (например, мобильный сайт Burger King Locator). Есть еще один вариант — небольшое изменение разметки. Например, изменение расположения заголовков к полям, как на странице регистрации M&S.

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

Принципы дизайна мобильных форм

Вертикальное выравнивание заголовков полей

Расположение названия поля ввода слева от поля на сайте Trainline и расположение названия сверху от поля на сайте Burger King

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


Длинное название невозможно отобразить полностью из-за размещения слева от поля

Эта проблема может быть достаточно просто решена размещением названия поля ввода над самим полем.

Убираем лишнее

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

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


В Hertz упростили форму заказа, убрав второстепенные элементы как подсказки и помощь

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

Объединяем

Еще один способ упрощения мобильного дизайна — объединение общих форм в одну единую форму.


Mapquest упростил свою форму, объединив несколько полей ввода в одно «умное» поле.

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

Именно поэтому дизайнеры мобильной версии сайта Mapquest решили объединить три эти опции в одном поле. Пользователь может спокойно вводить в нем и адрес компании, и ее название — «умное» поле само разберется.


Умные поля начальной и конечной точек направления на сайте Mapquest

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

Импровизируем

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

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


В выпадающем списке стран сайта компании Eurocar 139 позиций

В мобильной версии сайта они чуть-чуть облегчили пользователю задачу — в списке стран осталось всего 40 позиций (самые популярные страны).

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


Мобильная версия сайта Eurocar предлагает пользователю автоматически определить его местоположение

В несколько шагов

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

В обычной версии своего интернет-сайта AirAsia.com выпадающий список «Откуда», состоящий из 80 городов, разбит на подкатегории по количеству стран (всего 25 подкатегорий). В обычной версии сайта это работает действительно круто, помогая быстро находить нужную точку отправления. Однако в мобильной версии сайта такой огромный список явно не нужен.


На сайте AirAsia список “Город отправления” группируется по странам

Именно поэтому в мобильной версии сайта AirAsia список представили в виде нескольких отдельных экранов. На первом экране вверху отображается название страны по умолчанию — Малайзия (так как AirAsia — Майлайзийская авиакомпания). Под названием страны — все города этой страны, в которые можно лететь. Под этим списком находится список остальных стран. Если пользователь нажимает на название другой страны, открывается новый экран со списком городов этой страны.


В мобильной версии сайта список «Город отправления» представлен в несколько шагов на нескольких экранах.

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

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

Используем правильные элементы управления

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


Форма бронирования в Expedia — выпадающий список заменен несколькими ссылками

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

При таком подходе нужно также быть внимательнее — длинный список из ссылок вверху экрана может подвинуть форму вниз с экрана. На первом экране следует показать хотя бы первые два или три поля формы.


Форма бронирования на сайте Shangri-La — замена ряда радиокнопок выпадающим списком

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


Выпадающий список пунктов назначения заменен полем ввода с автоподстановкой значений

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

Выбираем правильный список

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


Фиксированный список и список с автоподстановкой


Правильный и неправильный варианты использования списка с автоподстановкой

Предлагайте умные варианты по умолчанию

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

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

Patrick Rhone так описал преимущества использования умных вариантов по умолчанию:
«Умные варианты по умолчанию смягчают трение во время пользования продуктом и упрощают жизнь всем без исключения пользователям. Варианты по умолчанию это краеугольный камень практичного и умного дизайна.»

Заключение

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

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите мне в личку, пожалуйста 🙂

Источник

Операционные системы и программное обеспечение