Как обеспечить безошибочный ввод пользователем одного значения из большой совокупности?

Question

[nikolaykhl]

Столкнулся со следующей задачей.

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

Обычное поле для ввода и дропдаун-лист отпадают (высокая вероятность ошибки/слишком длинный лист – станций метро в Москве почти 200).

Для полной версии сайта подойдут два решения: автозаполнение с jQuery или виджет (как у Яндекс.Недвижимость).

Вопрос заключается в том, что делать с мобильной версией сайта?

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

Делать заполнение формы по логике «forwar thinking devices» и разводить ее на несколько страниц, где на первой, например, нужно выбрать линию метро, а на второй показать уже 10-15 станций? Делать приложение для каждой платформы? Или все-таки есть способ создать функционал, который обеспечивал бы удобство хотя бы для 80% мобильных устройств (OperaMini, iOS, Android)?

Answer 1

[phgrey]

jQuey mobile Вам в помощь!
вот здесь, например, что-то похожее рассматривают.

Comments

[nikolaykhl]

Полезная ссылка, спасибо!
А где почитать про совместимость библиотеки с платформами, отличными от Android и iOS?
Кстати, там по ссылке внизу спрашивают, как оно ведет себя с кириллицей, есть там подводные камни?

[phgrey]

Чесно, не знаю, не пробовал. Просто когда-то прочитал и подумал, что может быть Вам полезно.

[1nd1go]

А где почитать про совместимость библиотеки с платформами, отличными от Android и iOS?

jquerymobile.com/gbs/

Answer 2

[ag666]

Помоему, двустраничный подход — оптимальный вариант, при условии, что будет еще и строка поиска с авто-подбором вариантов по введенной части. Т.е. по сути будет три страницы: поиск (поле ввода и снизу список авто-подбора) и двустраничный выбор конкретной станции.

Answer 3

[Rafael Osipov]

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

На мой взгляд можно сделать так.

На форме — поле ввода для названия станции. При вводе первых одной-двух букв с сервера подгружается список подходящих станций метро. Для радиальных/кольцевых в скобках указывается тип станции. Например «Таганская (кольцевая)»

Список подходящих станций метро показывается во всплывающем окне (popup) в виде списка. Где пользователь уже и выбирает станцию. Даже при вводе всего одной буквы количество подгружаемых станций не превысит пару десятков.

Для сжатия отдаваемых данных и распаковки при их получении с помощью JavaScript применяйте LZW

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

Comments

[nikolaykhl]

Popup на мобильных телефонах?
Автокомплит после ввода 2-3 букв, конечно, оптимально, вопрос в совместимости мобильных браузеров с jQuery/AJAX реализациями. Для iPhone и Android есть jQuery Mobile, jQTocuh и другие, а что делать с Opera Mini на Symbian и иже с ними?

[Rafael Osipov]

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

Тут придётся добавить дополнительный шаг. А именно — поиск станции.

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

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

Answer 4

[Анатолий]

А почему бы Вам не сделать в мобильной версии кнопочку рядом с полем ввода: «Найти». Человек вводит кусок станции, нажимает «Найти» и ему выдается список совпадающих станций. Сейчас все мобильные браузеры поддерживают JS в той или иной мере. Вывести список совпадений и пусть выбирает из них. Ничего не введет в поле, вывести все станции, введет некие буквы, будет станций меньше.

Answer 5

[edogs]

Алфавитный список по первым буквам названий метро (1 или для тех букв где станций много по 2-3). Почти то же что ветка, но ветку не всегда можно вспомнить, по первой букве проще.

Answer 6

[ZloiZmei]

Для полной версии — схема метро
Для мобильной — видимо автозаполнение с подсказками.

Вариант с выбором ветки, затем станции мне не нравится. Я не помню как ветки называются, ориентируюсь по цветам :)

Comments

[nikolaykhl]

Названия веток нетрудно раскрасить в нужные цвета. Меня больше беспокоит поддержка автозаполнения и подсказок браузерами мобильных.