:
примеров
Попробуйте »
Совет:
Для того, чтобы предотвратить 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
Представьте, какую бурю эмоций испытает пользователь, которому нужно добавить всего лишь пару символов, чтобы отправить форму с большим объемом вручную заполненных полей, и вдруг все данные теряются. Ужасно. Если, конечно, нет способа восстановить данные, чтобы избежать участи Сизифа.
В этой статье мы взглянем на некоторые из новых усовершенствований форм в 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 для проверки вводимых данных. К примеру, мы хотим создать поле, которое должно быть обязательно заполнено:
