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

:

примеров

姓:

姓:

Попробуйте »

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

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

В закладки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

Применимо к: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2016, Dynamics CRM Online

Microsoft Dynamics 365 для телефонов Express использует форму, оптимизированную для использования с телефоном. При редактировании формы вы выбираете, какие поля должны отображаться и в каком порядке. Можно сделать некоторые поля доступными только для чтения, но использовать скрипты для форм в формах CRM для телефонов Express нельзя.

CRM для телефонов Express - это предыдущая версия телефонного приложения для Microsoft Dynamics 365 Последняя версия телефонного приложения - Microsoft Dynamics 365 для телефонов - предусматривает всю ту же функциональность, что и приложение Microsoft Dynamics 365 для планшетов. Сведения о настройке Dynamics 365 для телефонов и планшетов см. в разделе Настройка Dynamics 365 для телефонов и планшетов .

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

В этом разделе

Просмотр формы Mobile Express

Создание формы Mobile Express

Просмотр формы Mobile Express

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

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

Как видите, форма представляет собой список полей.

Примечание

Отображаются только поля, которые содержат данные.

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

Создание формы Mobile Express

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

Перейдите в раздел Параметры > Настройки . Выберите Настроить систему .

Разверните узел Сущности и выберите сущность, для которой нужно создать новую мобильную форму.

Разверните сущность и выберите узел Формы .

Выберите Создать и Mobile – Express .

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

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

Теперь можно изменить форму или выбрать Сохранить и закрыть , чтобы закрыть ее.Дополнительные сведения:Изменение формы Mobile Express

Задание порядка форм

В списке форм для сущности выберите Порядок форм и выберите Mobile - Express .

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

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

Выберите ОК , чтобы закрыть диалоговое окно Порядок форм .

Примечание

Вы, как носитель роли "Системный администратор" или "Настройщик системы", имеете доступ ко всем формам. Единственный способ просмотреть найстройки, примененные к формам Mobile Express в приложении CRM для телефонов Express - это задать такой порядок форм, чтобы только что созданная форма находилась сверху.

Изменение формы Mobile Express

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

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

В списке форм выберите форму, у которой в столбце Тип формы присутствует значение Mobile - Express .

Откроется редактор мобильных форм.

С такой простой формой задачи по настройке заключаются в следующем.

Выбор полей для включения в форму.

Выбор расположения полей.

Решение о предоставлении к некоторым полям доступа только для чтения.

Публикация настроек по завершении. Дополнительные сведения см. в разделе Публикация настроек .

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

См. также

© Корпорация Майкрософт (Microsoft Corporation), 2017. Все права защищены.