:

примеров

姓:

姓:

Попробуйте »

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

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

В закладки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поиск

По Вашему запросу мобильная форма сайта найдено 2833 результатов

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

  Соответствие: 7

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

  Соответствие: 7

• В данном уроке мы разберёмся, как создать оригинальную форму для сообщений в виде пишущей машинки. Все основные функции данного агрегата, вышедшего из употребления, будут бережно восстановлены с помощью CSS и jQuery.

  Соответствие: 7

• Тут вы узнаете всю правду о сайтах электронной коммерции: согласно последним исследованиям в этой области, по крайней мере 59,8% потенциальных покупателей отказываются от оплаты того, что набрали в корзину (MarketingSherpa 59,8%, SeeWhy 83% и MarketLive 62,14%). Главный вопрос: почему клиенты так часто отказываются от покупок? Дело в том, что есть некоторые принципиальные ошибки, которые разработчики сайтов электронной коммерции очень часто делают. Есть ли общие принципы, которые усложняют жизнь пользователям, чтобы купить наши продукты? И есть ли какой-то осмысленный способ улучшить показатели продаж того, что мы продаём?

  Соответствие: 7

• Самым приятным новшеством в HTML5 является возможность добавления текста по умолчанию в поля форм. Атрибут placeholder позволяет отображать в полях формы определенный текст, пока они пусты или находятся не в фокусе (когда поле в фокусе, оно очищается). Это стильная фишка, но все же она поддерживается не всеми браузерами. В этом уроке я покажу, как с помощью Modernizr, определить, поддерживается ли она данным браузером, и если нет, то забить поля формы текстом по умолчанию динамически через jQuery.

  Соответствие: 7

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

  Соответствие: 7

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

  Соответствие: 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. Сделайте так, чтобы форма загружалась быстро

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

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

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

Применимо к: 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. Все права защищены.