:
примеров
Попробуйте »
Совет:
Для того, чтобы предотвратить JQuery Mobile автоматически добавляет стиль интерактивных элементов, использование данных роли = "нет" атрибут.
UX-дизайнера из IBM Золтана Коллина.
В закладки
Золтан Коллин
Формы в виде выпадающих списков кажутся очевидным дизайнерским решением:
их легко и дешево создать, они не занимают слишком много места, автоматически подтверждают введенную информацию, поддерживаются всеми браузерами и платформами, и пользователи уже к ним привыкли.
Дизайнеры чаще всего используют выпадающие списки не к месту, а по мнению директора по продукту Google Люка Вроблевски, к этому шаблону следует прибегать только в самом крайнем случае.
Давайте рассмотрим некоторые ограничения:
- Опции выпадающего списка невидимы до тех пор, пока пользователь не кликнет или не коснется формы. Кроме того, с первого взгляда невозможно предсказать, сколько строк будет в списке - две или пятьдесят.
- Выбор опции из выпадающего списка - это многоступенчатый процесс, особенно на мобильных устройствах: сперва пользователю нужно коснуться формы и открыть варианты, пролистать вниз и найти нужный, выбрать его и закрыть список.
- Из-за выпадающих списков дизайнеры становятся ленивыми, ведь это так просто - добавить все возможные опции в один перечень без какой-либо приоритизации. Из-за этого выпадающий список очень похож на другой шаблон - меню «гамбургер ».
- Листать длинные списки, вроде выбора страны, - это кошмар. Особенно на мобильных устройствах, где поиск с клавиатуры обычно недоступен.
- На некоторых устройствах поле для отображения вариантов очень мало, поэтому пролистывание может превратиться в кошмар.
Количество видимых вариантов списка на iOS
может показаться крайне незначительным
Хорошая новость заключается в том, что существует большое количество альтернативных элементов для ввода данных, которые во многих случаях сработают лучше выпадающих списков.
Оцените количество вариантов
Не стоит использовать выпадающие списки для решений, где требуется выбрать один из двух вариантов. Вместо этого попробуйте чекбокс или переключатель.
Для небольшого количества взаимоисключающих опций подойдет форма в виде радиокнопок или кнопок Segmented Control. Пользователь сразу увидит все доступные варианты, и ему не придется раскрывать список.
Пример использования кнопок Segmented Control
Количество видимых вариантов зависит от ширины экрана и длины текста. Однако не стоит использовать более пяти опций
Используйте форму ввода с отфильтрованным выпадающим списком для большого количества точно определенных вариантов, когда пользователь точно знает, что ему нужно найти.
Чтобы не пролистывать весь список, пользователи могут ввести первые буквы, и выбрать отфильтрованные варианты
Для больших и разнообразных списков лучше использовать существующие пользовательские данные, чтобы в список попали популярные варианты ответа. В этом случае 90% пользователей смогут сразу выбрать необходимую опцию, а оставшиеся 10% - кликнут по варианту «Другое», который будет уточнен в следующем вопросе.
И хотя «Другое» - это не самое элегантное решение, приоритизация может улучшить UX для большинства пользователей.
Оцените предпочтительную форму ввода
Одно из преимуществ выпадающего списка заключается в том, что пользователям не нужно много печатать. Однако если печатать нужно немного, и данные запрашиваются довольно часто (например, личная информация), то их удобнее вводить, а не выбирать из списка.
На мобильных устройствах проще всего вводить год рождения с помощью цифровой клавиатуры, а не выпадающего списка
Говоря в целом, числовая клавиатура - самый эффективный способ ввести числовое значение.
Даже если значение списка отсортированы по порядку, возможно, пользователям будет проще ввести их от руки, а не листать.
Если вам важно подтвердить данные, которые вводит человек, используйте форму ввода с отфильтрованным выпадающим списком.
Например, когда пользователю требуется указать штат, отфильтровать список доступных вариантов может всего одна буква
Это особенно важно, если порядок сортировки элементов списка ясен не до конца.
Например, пользователи не понимают, по какому принципу отсортированы валюты. Сделайте так, чтобы они могли искать и по ее названию, и по аббревиатуре
То же относится к списку стран.
Для целых чисел - например, количества пассажиров или товаров в корзине, - лучше всего использовать степпер. Он позволит пользователям увеличивать или уменьшать значение по одному клику.
Для дробных чисел или переменных, расположенных на шкале, лучше всего использовать слайдер.
Данная статья является анонсом новой функциональности.
Не рекомендуется использовать содержание данной статьи для освоения новой функциональности.
Полное описание новой функциональности будет приведено в документации к соответствующей версии.
Полный список изменений в новой версии приводится в файле v8Update.htm.
Реализовано в версии 8.3.11.2867.
Мы продолжаем развивать мобильную платформу, добавляя в неё функциональность, которая уже имеется в платформе для персональных компьютеров. Кроме этого мы развиваем специфические возможности платформы, актуальные только для мобильных устройств. О некоторых самых важных доработках мы сейчас расскажем.
Планировщик
Объектная модель «мобильного» планировщика не изменилась, а вот способы взаимодействия пользователя с планировщиком поменялись, так как методы ввода информации на мобильных устройствах отличаются от тех, которые применяются в настольных компьютерах.
Например, быстрое редактирование элемента выполняется одиночным кликом по элементу. Долгое нажатие приводит к вызову контекстного меню, и к появлению маркеров, которые позволяют растягивать элемент. Перетаскивание выполняется долгим нажатием и последующим перемещением пальца.
Прокручивание всего планировщика выполняется скроллированием одним пальцем, масштабирование – растягиванием двумя пальцами, и так далее.
Особенностью текущей реализации «мобильного» планировщика является то, что он пока не поддерживает печать.
Форматированный документ
Еще один «новый» объект, который мы добавили в мобильную платформу, это ФорматированныйДокумент
. С точки зрения пользователя «мобильный» форматированный документ отличается только тем, что его панель редактирования встроена в сам элемент управления, и является логической частью виртуальной клавиатуры. От вас, как от разработчиков, не требуется её отдельное добавление в конфигурацию. Панель редактирования имеет разный вид в зависимости от типа мобильного устройства (телефон или планшет).
Предварительный просмотр «мобильной» формы в конфигураторе
В конфигураторе, при разработке формы, мы добавили возможность посмотреть, как будет выглядеть ваша форма на мобильном устройстве.
В командной панели вы можете выбрать вариант интерфейса Мобильное устройство
, и увидеть, как будет выглядеть форма в стандартной ориентации.
Тут же вы можете повернуть мобильное устройство.
Кроме этого мы предоставили вам возможность выбрать из большого числа распространенных устройств.
Помимо этого вы можете просматривать «мобильные» формы в трех разных масштабах:
- Пиксель в пиксель
- когда пикселю экрана мобильного устройства соответствует пиксель экрана окна предварительного просмотра;
- Реальный размер
- когда размеры мобильного устройства на экране соответствует геометрическим размерам устройства;
- По размеру окна
- когда масштаб отображения подбирается таким образом, чтобы область «мобильного» дисплея помещалась в окно предварительного просмотра без прокрутки.
Пакетная обработка табличных документов
В мобильную платформу мы добавили ряд новых объектов, которые позволяют вам формировать пакеты отображаемых документов. Эта функциональность аналогична той, которая имеется в платформе для персональных компьютеров. Таким образом, теперь вы можете, например, отправлять на печать сразу несколько документов.
Развитие доставляемых уведомлений
Мы реализовали поддержку службы push-уведомлений Windows (WNS , Windows Notification Services). Теперь вы можете использовать функциональность доставляемых уведомлений при работе мобильного приложения на платформах семейства Windows.
Также мы переработали систему обработки ошибок отправки доставляемого уведомления. В ситуациях, в которых раньше ошибка выдавалась исключением, теперь она выдается в виде значения, которое вы можете обработать во встроенном языке.
Аппаратное ускорение в операционной системе Android
На версиях операционной системы Android 4.4.2 и выше мобильная платформа теперь использует аппаратное ускорение. Это позволило увеличить скорость отрисовки интерфейса в 1,5 – 3 раза.
Люди, которые используют ваше мобильное приложение или сайт, преследуют определенную цель. Обычно то, что стоит между пользователем и его целью – это форма. Фактически, формы считаются финальным шагом в процессе достижения пользовательских целей. Вот почему так важно, чтобы пользователь заполнял форму максимально быстро и без каких-либо препятствий.
Следуйте этим семи правилам для создания простых и понятных форм:
Правило №1: Формы должны быть совместимы с тем, как пользователь вводит свои данные
Убедитесь в том, что поля формы не перекрываются элементами интерфейса (например, клавиатурой). По мере заполнения пользователем полей формы, автоматически поднимайте поля вверх.
Правило №2: Минимизируйте количество полей ввода и необходимость пользователя печатать
Чем длиннее и сложнее выглядит форма, тем меньше вероятность того, что пользователи захотят заполнять пустые места, особенно на маленьких экранах. Уменьшив количество полей ввода, вы сделаете вашу форму менее загруженной, особенно когда вы запрашиваете у пользователя большое количество информации.
Сделайте форму максимально простой и короткой
Но уменьшить количество полей – недостаточно. Вам также следует обратить внимание на то усилие, которое затрачивает пользователь при вводе данных. Печать требует высокой степени взаимодействия; высока вероятность ошибки, даже при вводе с полноформатной клавиатуры (тем более на сенсорном экране).
Поэтому, попытайтесь минимизировать необходимость печатать и допущения ошибок пользователем.
Умные дефолты
Умные дефолты помогают пользователям быстрее и точнее заполнить все поля формы. Например, вы можете сделать предвыбор страны проживания пользователя на основе данных его геолокации.
Автоматическое определение локации позволит сэкономить время пользователю на поиск номера в гостинице
Радиобаттоны для схожих, но взаимоисключающих вариантов выбора
Когда перед пользователем стоит выбор из списка опций, рассмотрите возможность использования горизонтального списка тегов . Это позволяет более эффективно использовать доступное пространство экрана.
Слайдеры для минимальной/максимальной цены или диапазона бюджета
Подумайте об использовании слайдеров для полей, которые содержат цены или бюджет. Так пользователь сможет двигать слайдер к минимальному/максимальному значению. Слайдер легко перемещать по-горизонтали, а также можно запросто кастомизировать это действие при помощи визуальных подсказок. Но помните, что числа не должны скрываться при взаимодействии со слайдером (особенно при использовании большими пальцами).
Слайдер в форме AirBnB для выбора цены
Правило №3: Заголовки формы должны находиться либо выше самих полей, либо быть плавающими
Заголовки говорят пользователю об основной цели поля и четкий текст является одним из главных способов сделать UI более доступным.
Почему никогда не стоит использовать текстовые заголовки внутри поля
Заголовки внутри поля (или плейсхолдер) – это текст, который находится внутри поля формы, который исчезает как только пользователь начинает вводить свои данные.
Заголовки внутри поля
В то время, как заголовки внутри поля выглядят хорошо с эстетической точки зрения, это преимущество часто становится переоцененным. Основной ошибкой является потеря контекста. После того, как пользователь кликнул на поле, надпись пропадает. И, соответственно, он не может проверить, что он написал именно то, что необходимо.
Текст внутри поля является не самой лучшей заменой визуального заголовка
Также, некоторые пользователи, которые видят, что в поле уже что-то написано, могут подумать, что поле уже пред заполнено и им больше ничего вводить не нужно и могут проигнорировать заполнение.
Почему выравнивание заголовков полей по левому краю плохо для мобильных устройств
Главное, что необходимо учитывать при использовании заголовков, выровненных по левому краю, на мобильном устройстве – это размер экрана и соотношении сторон. Если заголовок слева стоит напротив поля, то при вертикальной ориентации экрана, у вас останется очень мало места для самого поля. Это создает определенную сложность в использовании потому, что остается недостаточно места для отображения того, что вводит пользователь. Невозможность увидеть введенный текст, создает проблему для пользователей потому, что это не дает возможности быстро заметить ошибку при вводе перед подтверждением формы.
Очень трудно заметить ошибку если данные видны не полностью
Заголовок сверху или адаптивный заголовок
Заголовки форм должны сверху полей формы так, чтобы пользователи видели, что они заполняют и как. Основное преимущество расположения заголовков форм над формой состоит в том, что вы можете растянуть форму по всей ширине экрана и сделать ее достаточно большой для ввода данных (например, с размером шрифта в 16 пикселей). Дополнительным преимуществом будет возможность написание четких и понятных заголовков (не ограничиваясь 1-2мя словами).
Основным же недостатком расположения заголовков над полями в том, что вся форма занимает больше места по-вертикали, что означает, что пользователю надо скроллить экран. Однако, это не очень серьезная проблема – на сегодняшний день, все привыкли скроллить .
В качестве альтернативы, вы можете использовать адаптивные заголовки для понимания того, что пользователи корректно заполнили поле. Текст плейсхолдера отображается по умолчанию, но после тапа на поле и ввода текста, текст плейсхолдера переходит наверх поля, как показано ниже.
Правило №4: Валидация поля формы должна происходить в режиме реального времени
В идеальном мире, пользователи заполнят форму необходимой информацией и успешно завершат эту задачу. В реальном мире, пользователи часто допускают ошибки. При этом пользователям не нравится то, что после всего процесса заполнения полей, они доходят до кнопки “отправить” и обнаруживают, что они сделали ошибку. Правильно будет сообщить пользователю об успехе/ошибки в поле сразу после его заполнения. Валидационное сообщение сразу информирует пользователя о корректности введенной информации. Такой подход позволяет пользователям исправить допущенные ошибки быстрее и без необходимости ждать отображения ошибок после нажатия сабмит кнопки.
Если вы ожидаете специфические ответы на вопросы, необходимо сразу показывать, что нужно ввести и в каком виде.
Строчная валидация также может послужить решением. На примере ниже, вы можете увидеть хороший пример, как можно исправить потенциальную ошибку.
Правило №5: Отображение раскладки клавиатуры соответственно вводимым данным
Пользователи предпочитают соответствующую раскладку клавиатуры в приложении. Например, когда пользователю надо вводить номер кредитной карты, показывайте только ввод цифр для того, чтобы пользователь вводил цифры а не символы. Это увеличит скорость заполнения и уменьшит количество возможных ошибок ввода.
Вам необходимо убедится в том, что данная возможность реализована на всем приложении, а не на отдельных его частях.
Правило №6: Предоставляйте полезную информацию в контексте
Иногда, возникает необходимость предоставить релевантную и полезную информацию для упрощения процесса прохождения формы пользователем. Но такой сопроводительный текст должен использоваться только там, где он действительно необходим:
- При планировании дат, пользователи ценят контекст типа встроенного календаря для определения дней недели. Это снижает необходимость выхода из приложения для просмотра календаря, что снижает риск того, что пользователь отвлечется от своей основной задачи.
- Люди могут задумываться о безопасности своих данных, поэтому вам необходимо показать им, что их данные не будут переданы третьим лицам.
В качестве правила хорошего тона, не стоит растягивать объяснение на 100 символов.
Правило №7: Используйте гибкий формат
Некоторые задачи требуют от пользователя очень точной информации. Но, в тоже время, требовать от пользователя предоставить информацию в конкретном виде, может идти врозь с принципами хорошего юзабилити. Если вы просите пользователя ввести цифровые данные (например, номер телефона) в форму, используйте гибкий подход и создавайте экраны, которые могут поддерживать разные форматы ввода и отображать информацию в наиболее удобном для пользователя виде для предотвращения ошибок.
Не используйте фиксированный формат ввода данных
Вывод
У пользователя могут возникнуть разного рода сомнения при заполнении формы, поэтому вам следует постараться максимально упростить этот процесс. Все советы, описанные в данной статье, могут значительно повысить юзабилити форм.
