Pull to refresh
0

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

Reading time 10 min
Views 14K
Представляю вашему вниманию перевод статьи "Mobile Form Design Strategies" от Chui Chui Tan. Перевели в компании UXDepot. Специально для пользователей Хабрахабра с одобрением издания UX Booth.


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

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


Согласно международному стандарту ISO 9241-11, юзабилити включает в себя три важных показателя: производительность, эффективность и продуктивность. Однако веб-дизайн не совсем соответствует последнему фактору — мы привыкли пользоваться сетью на большом экране обычного компьютера, не имея ограничения по времени и располагая мощным, надежным интернет-соединением. С другой стороны, использование интернета на мобильнике происходит в более напряженной обстановке. Продуктивность становится важным фактором. Чем больше времени пользователю нужно на заполнение формы на мобильном телефоне, тем больше вероятность возникновения различных проблем (вроде прерывания интернет-соединения). Поэтому при работе на мобильном устройстве очень важно то, насколько быстро пользователь может достичь своих целей.




Веб-формы в обычном браузере 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 — замена ряда радиокнопок выпадающим списком

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


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


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

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




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


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


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

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


Когда нельзя применять фиксированный список:
  • Фикисированный список неудобен тогда, когда поля в списке располагаются в случайном порядке или когда пользователь скорее всего не знает, какой пункт ему выбирать. Форма поиска достопримечательностей на Tripadvisor — хороший пример случая, когда не стоит использовать фиксированные списки. В списке для выбора доступны 30 типов достопримечательностей. Проблема в том, что в отличие от списка стран, в этом случае пользователь изначально не знает, какие у него есть варианты выбора, и не знает, что ищет. Пользователю придется пролистать весь список сверху вниз и, возможно, вернуться обратно наверх чтобы выбрать вариант, который подойдет лучше всего.
  • Также такой тип списка не стоит применять тогда, когда каждый пункт имеет длинное название — оно будет неизбежно обрезано с применением «...», и пользователю придется только догадываться что это может означать (прочитать полное название пункта не получится).



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

Когда можно использовать список с автоподстановкой:
  • Список с автоподстановкой хорошо использовать тогда, когда у пунктов в списке слишком длинные названия. В отличие от фиксированного списка, пункты списка с автоподстановкой могут иметь несколько строк каждый — это делает их понятнее.
  • Если у пользователя есть много вариантов выбора и длинный список в данном случае не подходит (или если список невозможно или нет смысла отсортировать в по какому-либо признаку), то лучше использовать список с автоподстановкой.
  • Пользователь примерно знает то, что хочет выбрать в списке — ему потребуется ввести только пару символов желаемого пункта для того, чтобы найти его.


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





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



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

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

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




Заключение



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


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

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

Articles

Information

Website
www.uxdepot.ru
Registered
Founded
Employees
2–10 employees
Location
Украина