Офтоп Никита Евдокимов
7 161

Мобильные формы: чем заменить выпадающие списки

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

В закладки
Золтан Коллин

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подумайте, как можно сделать выпадающий список умнее

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

  • Используйте понятное название формы, которое не потеряет смысла даже при раскрытом списке. Например, «Выберите тип» вместо «Пожалуйста, выберите».
  • Сортируйте значения выпадающего списка в зависимости от пользовательских данных, выдвигая на верхние строчки самые популярные варианты. Или же поставьте самый популярный вариант по умолчанию.
  • Смартфоны и браузеры собирают о пользователях множество информации, включая данные о местонахождении. Используйте ее для автозаполнения форм.
  • Сократите количество полей и позвольте компьютеру сделать свою работу. Например, если человек вводит индекс, то компьютер должен сам распознать город и штат — незачем просить пользователя ввести эту информацию. То же самое — если человек вводит номер банковской карточки, система может сама понять — Visa у него или MasterCard.
  • Используйте API других сервисов — зарегистрироваться через Facebook и оплатить через PayPal всегда проще, чем вводить данные вручную.

Чтобы узнать больше о разработке выпадающих списков, посмотрите лекцию известных UX-дизайнеров Голдена Кришны и Эрика Кэмпбелла с фестиваля SXSW.

#Интерфейсы

{ "author_name": "Никита Евдокимов", "author_type": "editor", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 11, "likes": 25, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 25057, "is_wide": false, "is_ugc": false, "date": "Mon, 10 Jul 2017 16:05:29 +0300" }
{ "id": 25057, "author_id": 61917, "diff_limit": 1000, "urls": {"diff":"\/comments\/25057\/get","add":"\/comments\/25057\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/25057"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791, "possessions": [] }

11 комментариев 11 комм.

Популярные

По порядку

Написать комментарий...
9

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

Каким нужно быть ушлепаном чтобы сделать 5-значный ZIP код выпадающим списком)
Или выбор количества товара — так никто уже не делает.

Ответить
6

сегодня пиццу заказывал, в корзине выпадающий список на количество, а 0 в нем для удаления объекта из корзины. плакал кровавыми слезами.

Ответить
1

Да, тут я видимо погорячился. Ну бросьте им ссылку, если пиццуля вкусная)

Ответить
5

Спросите сначала пользователя: Вы любите головоломки? Да/Нет/Хочу попробовать
И в зависимости от ответа загрузится соответствующий интерфейс.

Ответить
–5

Заставлять пользователя вбивать 4х значный год рождения с клавиатуры - это ад и садизм.
Проставлять в скролле 2018 год в качестве года рождения by default - тоже.

Ответить
4

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

Ответить
2

Заставлять мобильных пользователей вбивать что-то с клавиатуры - плохая практика. Это долго и не удобно.
Для веба текстовые инпуты это ок, для мобайла это медленно и мучительно открывающаяся клавиатура, переключение раскладки на цифры (можно, конечно, бережно проставить content type, но сильно зависит от того, какая клавиатура включено у пользователя).
Плюс, всё таки, работа с цифровым блоком мобильной клавиатуры редко удобна в режиме работы одной рукой.

Селекторы дат ввиде скроллеров - не сильно приятнее, но значительно быстрее, если там есть нормальные default state, а не приходится листать год с начала времен.
Какую дату ставить по дефолту? Я бы сказал, что для дня и месяца это 15 и 6 соотв, для года - в зависимости от цели.
Условно, если вашему пользователю не может быть меньше 18 лет, то делать доступным выбор 2017 года в качестве даты рождения - так себе идея, можно ограничиться условным 2000.

Ответить
0

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

Ответить
1

Что руками, что в селекторах будут вбивать от балды. Просто руками это будет делать дольше и не удобнее.
Порнхабу нужно проверять, что пользователь старше условных 18 лет, достаточно поставить default state крутилок на 16 лет, 11 месяцев, 29 дней (или любое другое невалидное состояние) и все будет ок.
Таким образом пользователь, желающий вбить реальную дату - вобьет, пользователь желающий вбить рандомную дату, но удовлетворяющую требованиям сервиса - вобьет и сделает это быстрее, а пользователь желающий тупо кликнуть submit ничего не заполняя будет редиректнут на walt disney.

Ответить

1

Зачем делать 10 обращений на сервер? Кол-во товара подгружаете при загрузке страницы, а валидируете (что столько товара все ещё есть) - перед оплатой.

Ответить

0

Между + – ставлю инпут, а не просто число. Когда нужно ввести большое значение, люди вводят руками.

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления
{ "page_type": "default" }