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

UX-дизайнера из IBM Золтана Коллина.

В закладки

Золтан Коллин

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

Дизайнеры чаще всего используют выпадающие списки не к месту, а по мнению директора по продукту Google Люка Вроблевски, к этому шаблону следует прибегать только в самом крайнем случае.

Давайте рассмотрим некоторые ограничения:

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

Количество видимых вариантов списка на iOS может показаться крайне незначительным

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

Оцените количество вариантов

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

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

Пример использования кнопок Segmented Control

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

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

Чтобы не пролистывать весь список, пользователи могут ввести первые буквы, и выбрать отфильтрованные варианты

Для больших и разнообразных списков лучше использовать существующие пользовательские данные, чтобы в список попали популярные варианты ответа. В этом случае 90% пользователей смогут сразу выбрать необходимую опцию, а оставшиеся 10% - кликнут по варианту «Другое», который будет уточнен в следующем вопросе.

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

Оцените предпочтительную форму ввода

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

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

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

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

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

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

Это особенно важно, если порядок сортировки элементов списка ясен не до конца.

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

То же относится к списку стран.

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

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

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

Типы HTML5 Input

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

color — выбор цвета
date — выбор даты
datetime — выбор даты и времени
email — валидация email-маски
number — ввод номер
range — слайдер диапзаонов
search — поле для поиска
tel — валидация маски телефона
time — выбор времени
url — валидация URL

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

1. Input type color

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

< input type = "color" / >

Пример работы:

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

Выберите Ваш цвет:

К сожалению, поддержка данного типа мобильными браузерами оставляет желать лучшего. Из всех существующих, корректное отображение можно найти только в Opera Mobile и Chrome Android . Для всех остальных обозревателей будет показано пустое текстовое поле. Это стоит иметь ввиду. Как вариант, можно набросать палитру на JS либо воспользоваться плагинами.

2. Input type date

Если поддерживается браузером, то предоставляет удобный блок для выбора даты.

< input type = "date" / >

Пример работы:

Выбор даты:

Обратите внимание, что тип ввода Date , а также варианты типа datetime и datetime-local предлагают полезные атрибуты, такие значения, как min и max , которые могут устанавливать ограничение и проверку данных, вводимых пользователем. Мы это продемонстрируем ниже по тексту.

Тип HTML Input Date поддерживается почти всеми браузерами. Исключение составляют Opera Mini и дефолтный браузер Android.

3. Input type datetime и datetime-local

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

< input type = "datetime-local" / >

Пример работы:

Выбор даты и времени:

Не поддерживается в IE Mobile и Opera Mini. На остальных популярных обозревателях (мобильных) тип работает более мене корректно, однако не редки случаи багов и глюков. Имейте и это ввиду тоже, и не забывайте о запасных вариантов на JavaScript .

4. Input type email

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

< input type = "email" / >

Пример работы:

Введите Ваш e-mail адрес:

Перед отправкой, браузер проверяет корректность заполненного поля и сообщает пользователю в случае недопустимого формата ввода. Расчет идет по следующему выражению {text}@{domain}

5. Input type number и tel

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

Пример работы:

Выбор значения:

Диапазон по умолчанию в большинстве браузеров находится между 0 и 100. То есть крайнее левое положение ползунка соответствует 0, а правое 100. Можно изменить диапазон с помощью атрибутов min и Max. Мы также можем задать значение шага, через шаг атрибута. Так, чтобы указать диапазон от 5 до 50, с шагом 5, мы будем использовать:

< input type = "range" min = "5" max = "50" step = "5" / >

Поддержка всеми популярными браузерами, кроме Opera Mini.

7. Валидация формы

Весьма удобно задать специальные атрибуту HTML Input для проверки вводимых данных. К примеру, мы хотим создать поле, которое должно быть обязательно заполнено:

JQuery Mobile автоматически автоматически добавить стиль в HTML-формы, сделать их более привлекательными, более дружественным на ощупь.

JQuery Мобильный Форма Структура

JQuery Mobile, чтобы использовать CSS для стиля элементов HTML форму, чтобы сделать их более привлекательными и простыми в использовании.

В JQuery Mobile, вы можете использовать следующие элементы формы:

поле ввода текста
Поиск поля ввода
кнопка радио
флажок
Выберите Меню
ползунок
Флип тумблер

При использовании JQuery Mobile форму, вы должны знать:

<Форма> элемент должен иметь способ и атрибут действия
Каждый элемент формы должен иметь уникальный атрибут "ID". Идентификатор должен быть уникальным на всех страницах по всему сайту. Это происходит потому, что Jquery Мобильный одностраничное навигации механизм представлен таким образом, чтобы множество различных страниц одновременно
Каждый элемент формы должен иметь метку. Вкладка Настройки для свойств, чтобы соответствовать идентификатор элемента

примеров

Попробуйте »

Чтобы скрыть метку, используйте класс UI-скрытый доступный. Это часто используется, когда вы атрибуты элемента в качестве заполнителя тега:

примеров

Попробуйте »

Совет: Мы можем использовать данные чистой-BTN = "истинный " атрибут, чтобы добавить кнопку, чтобы очистить содержимое поля ввода (иконку X справа от поля ввода):

примеров

<Ярлык = "имя_файла"> Имя:
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">

Попробуйте »

JQuery Mobile Forms значок

Форма код кнопки стандартный HTML <вход> элемент (кнопка, сброс, отправить). Они будут автоматически стилей рендеринга, автоматическую адаптацию мобильных устройств к рабочему столу:

примеров

<Тип входного = "Сброс" значение = "кнопка сброса">

Попробуйте »

Если вам необходимо добавить дополнительные стили в <вход> кнопка, вы можете использовать следующую таблицу данные- * атрибуты:

Кнопка для добавления иконки:

<Тип входного = "Сброс" значение = "кнопка сброса">

Попробуйте »

поле Контейнер

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

элемент, окружающий метка / элемент формы используется с "UI-поля содержат" класс

примеров

Попробуйте »

Совет: Для того, чтобы предотвратить JQuery Mobile автоматически добавляет стиль интерактивных элементов, использование данных роли = "нет" атрибут.

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

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

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

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

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

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

Сделайте форму максимально простой и короткой

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

Данные на 2014 год показывают, что только в одних США, у 90% взрослых есть мобильный телефон, из которых 58% -это обладатели смартфонов. 42% американцев владеют планшетами. В своем докладе, eMarketer прогнозировали, что к концу 2014ого люди будут пользоваться около 1.75 биллионами смартфонов по всему миру.

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

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

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

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

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

1. Включайте только самые важные детали в свою форму

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

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

2. Используйте выравнивание по высоте для лейблов и полей ввода.

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

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

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

3. Используйте разворачивающиеся меню и выпадающие списки

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

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

4. Используйте адекватные списки выбора

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

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

5. Простой ввод входных данных

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

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

6. Отформатируйте кнопки вашей формы

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

Сделайте кнопку “Подтвердить” привлекательной, установив ее ширину в 1/3 от вашей формы, либо покрасив ее в яркий цвет. А вместо того, чтобы просто использовать слова “Подтвердить” или “Отправить”, прибегайте к более красноречивым призывам к действию, например, “Зарегистрируйтесь сейчас” или “Отправьте заявку”.

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

7. Установите масштабирование с помощью мета-тега viewport

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

8. Предоставляйте возможность сохранять данные

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

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

9. Помогайте клиентам отслеживать свой прогресс

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

10. Сделайте так, чтобы форма загружалась быстро

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

И как всегда, тестируйте ваши формы на всех системах и устройствах

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