UXDepot
Компания
33,24
рейтинг
16 января 2012 в 15:30

Разное → Как улучшить выбор страны из списка перевод tutorial

Представляю вашему вниманию перевод статьи под названием "Redesigning The Country Selector" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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



Однажды, проводя масштабные юзабилити-тестирования (о которых мы писали на Smashing Magazine в апреле 2011. Примечание переводчиков: мы перевели и эту статью тоже. Обязательно ознакомьтесь :), мы последовательно столкнулись с несколькими проблемами, связанными с выбором страны. Якоб Нильсен сообщал о похожих моментах в 2000 и 2007 годах, когда он тестировал выпадающие списки с большим количеством внутренних элементов, к примеру, таких, как перечни штатов или стран.


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

Первым делом, давайте ближе рассмотрим проблемы использования традиционных селекторов стран.



Трудности


Выпадающие списки провоцируют юзабилити-проблемы в том случае, когда они (списки) используются в качестве средств для выбора страны или штата, по нескольким причинам. Вот шесть основных из них:
  1. Отсутствие обзора. С толку сбивает даже выбор более чем из 20 неструктурированных вариантов, не говоря уже о списке всех стран мира (согласно ISO 3166, в нём 249 стран).
  2. Неясность принципов сортировки. При демонстрировании пользователям масштабного списка, первым делом пользователи пытаются понять логику сортировки элементов. Но, поскольку селекторы стран часто содержат от трех до пяти наиболее популярных вариантов в начале списка, логика сортировки элементов не всегда понятна с первого взгляда.
  3. Вопросы прокрутки списка. Многие проблемы также связаны с прокруткой больших раскрывающихся списков. Если курсор вашей мыши находится за пределами раскрытого списка, то вы, скорее всего, прокрутите всю страницу целиком, скрывая раскрытый вами список со страницы. В других браузерах, однако, раскрывшийся список будет прокручиваться до тех пор, пока он будет в фокусе, что скорее всего приведёт к вводу ошибочных данных.
  4. Разнородные способы представления списка. Интерфейсы раскрывающихся списков в разных браузерах и операционных системах существенно отличаются друг от друга. Например, на маке и Сафари для прокрутки списка попросит вас воспользоваться двумя стрелками, а FireFox предоставляет традиционный вариант прокрутки. А теперь возьмите свой смартфон, и вы внезапно обнаружите, что интерфейс снова резко изменился.
  5. Физические ограничения. Мобильные устройства имеют серьезные ограничения по размеру экрана — на него физически невозможно вывести большой список стран. Это замедляет процесс выбора, что также вызывает неудобства.
  6. Нарушение логической последовательности. Практически все пользователи — даже те, которые пользуются табом для переключения между элементами формы — для взаимодействия с раскрывающимися списками будут использовать мышь, что существенно замедлит взаимодействие.


В сумме мы имеем


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

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



Этап 1. Ввод с клавиатуры против прокрутки


Простейший способ избавиться от сотен элементов списка и проблем, связанных с прокруткой, заключается в том, чтобы просто заменить раскрывающийся список на поле для ввода, чтобы позволить пользователю ввести название своей страны. Этот способ работает только если пользователь знает, что и куда ему вводить, потому что в противном случае не возникнет эффект визуальной узнаваемости (это никогда не сработает для указания вариантов доставки, поскольку пользователю придётся угадывать названия полей). Но “выбиралка” страны хорошо реализуется текстовым полем потому, что логично предположить, что каждый пользователь знает, в какой стране он живёт.

Итак, у нас есть поле для ввода текста. Хотя это и удобно с одной стороны, это плохо для курьера, которому приходится доставлять товар. Раскрывающийся список предлагает ограниченное количество вариантов, в то время, как текстовое поле предлагает бесконечное (пользователь может ввести туда всё, что захочет). Для ограничения ввода значения в поле (речь идёт о названии страны), которое сможет распознать серверная часть нашего сервиса, к текстовому полю стоит добавить автоподстановку и принятие ограниченного набора вариантов. Это позволит нам обеспечить ввод данных, которые на 100% устраивают нашу серверную часть (и нашего курьера).


Сегодня большинство пользователей веба знакомы с функционалом автоподстановки. Google использует эту возможность для своего поискового поля с 2008 года (и с 2004 года как экспериментальную возможность).



Этап 2. Опечатки и их последствия


Заменяя список стран полем ввода с автоподстановкой, мы сталкиваемся с новой проблемой. Хотя пользователь знает название своей страны, он не может знать, как называет её наша серверная часть. Если пользователь, проживая в США, опечатывается, например “оединённые штаты”, или решает ввести лишь часть названия, например “Америка” (вместо “Соединённые штаты Америки”), это приведёт к неправильному результату.


Поле ввода страны на сайте Apple требует от вас не только стопроцентно точного написания названия страны, но и правильной последовательности слов в названии.

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

Многочисленные веб-сервисы, а особенно интернет-магазины, географически ограничены, и международные пользователи хорошо осведомлены об этом. Даже у крупных сайтов, как Amazon, Hulu или Spotify есть серьёзные географические ограничения на некоторые или на все услуги. Если кто-то, живущий в США, может ожидать, что его страна есть в списке поддерживаемых, то пользователь из другой страны, который не сможет отыскать свою страну в списке, может покинуть ваш сайт до того, как распознается его опечатка.

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





Этап 3. Когда Нидерланды называют Голландией.


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



Когда мы требуем от пользователя ввода названия страны, мы должны рассматривать все распространённые варианты их написания. Синонимы, местные названия, аббревиатуры и коды — все это обязательно нужно учесть. Обычная автоподстановка не сработает, если пользователь вместо Швейцарии (Switzerland) введет Scweiz, Suisse, Svizzera или Svizra. То же произойдет в случае, если вместо Германии напишут DE.

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

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





Этап 4. Когда Соединенные Штаты Америки популярнее, чем Объединенные Арабские Эмираты


Вводя слово “United” в поле выбора страны на сайте Apple, можно пронаблюдать следующую картину:


Страны в этом списке автоподстановки отсортированы по алфавиту. Но, так как нам больше не нужно листать список стран, нет никаких причин для алфавитной сортировки логичнее было бы отсортировать его по по популярности. Apple, наверняка захотят сделать более приоритетным США, а уже за ними — Объединённое Королевство и ОАЭ. В то же время, британская газета может захотеть поставить на первое место Объединённое Королевство.



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

Итоговое решение: переработанный селектор страны


Итогом всех этапов стало создание переработанного селектора стран: он учитывает опечатки, различные особенности написания, синонимы и приоритетные варианты.

Технически правильным было бы называть получившееся “текстовым полем с автоподстановкой, учётом частичных совпадений, синонимов и приоритетных результатов”. Это слегка громоздко, так что я просто решил назвать его переработанным селектором стран. Вы можете попробовать его в этом демо.

Для тех из вас, кто владеет или работает с сайтом, содержащим селектор страны, я решил сделать оупенсорсный код. Он представляет собой простой jQuery-плагин для улучшения раскрывающихся меню (т.е. раскрывающихся списков для выбора страны), превращающий их в усовершенствованные поля с автоподстановкой для современных браузеров. К плагину прилагается инструкция по использованию и FAQ. Вы также можете посмотреть проект на GitHub и следить за дальнейшими обновлениями этого решения.

.
PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите мне в личку, пожалуйста :)

PPS: спасибо netright за ссылку на альтернативное решение.
Автор: @DezmASter Christian Holst
UXDepot
рейтинг 33,24
Компания прекратила активность на сайте
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Комментарии (55)

  • +26
    Chosen — как сделать громоздкие селектбоксы более удобным для пользователей. harvesthq.github.com/chosen/
    • –2
      Очень крутая штука, но, даже в стандартном выпадающем списке достаточно нажать на него, чтобы отобразилось его содержимое и на клавиатуре ввести первые буквы страны, браузер сам отсортирует, просто многие об этом не догадываются.
      • +1
        Браузер не отсортирует, а просто заселектит первый элемент с такой комбинацией символов вначале, которую Вы ввели.
        • 0
          причем надо быстро вводить и не видно =)
          в chosen же поиск прям такой как надо

          мне очень нравится как у них multiple select выглядят

          единственный минус, имхо, так это то что он статичный и данные по ajax подгружать не имеет. допиливать разе что, но там свои ньюансы тогда.
          • 0
            .append(new Option(text, value, true, true));
            .trigger(«liszt:updated»);
        • 0
          Да, точно, привык просто набирать «ru' для выбора России, думал что там полноценная сортировка.
    • 0
      Chosen классный, но он IE7 не поддерживает, c IE8 непонятно
      (написано «Legacy support for IE8 is also enabled»)
      • 0
        Там есть fallback режим — откатывается в обычный селектбокс.
      • +1
        Плевать на IE.
    • 0
      Теперь бы интегрировать эти два замечательных решения.
      Например, встроить Country Selector в Chosen как дополнительный тип поля.
  • +7
    Большинство крупных сервисов уже знает о вашем местоположении (а мелкие могут взять их гео-api).
    По умолчанию это поле можно сделать уже заполненным.
    • +4
      я в командировке ищу инфу по своему региону. А эта собака подсовывает мне инфу о том регионе где я нахожусь сейчас. Хуже придумать трудно.
      • +1
        Да, меня тоже всегда на мой город бросает, когда нужно что-то в Москве посмотреть, раздражает.
        Тут от того какой это сервис зависит, во многих можно было бы сохранять свои значения.
        • +3
          А представялете как это раздражает пользователей Tor?..
    • 0
      Вот только эта база geoip не всегда актуальна. К примеру судя по большинству сайтов я уже много где побывал, и в Германии и в Сибири, да куда меня только не заносило, хотя живу в центре России. Просто провайдер все время покупал разные диапазоны ip адресов, которые раньше принадлежали другим провайдерам.
      Если использовать мобильный интернет, то вообще может определить соседний регион, ни разу не было так, чтобы по этой базе попал именно тот регион, откуда я выхожу в интернет.
      Так что все эти определялки, лично для меня, ничего не значат и зачастую — только мешают.
  • +1
    Можно ещё флаги стран добавить для красоты и лучшей ориентировки (последнее сомнительно для чужих стран, но свою найдут).
    Или выдавать таблицу флагов, как здесь, но плотнее (типа большого календаря) и подсвечивать выбранные лексическим анализом.

    spmbt.kodingen.com/flags/showFlags.htm — мешап из флагов стран
    • +1
      А что если сделать по принципу календаря: при клике всплывает окошко с картой мира, там выбирается континент, ну а потом уже страну выбрать несложно.
      Красивый виджет получится.
  • +7
    Забыт один немаловажный пункт — локализация. Я конечно понимаю, почему в демке Russia ищется, а вот Россия нет. Но если разработчик замахивается на вещи изложенный в статье, то он должен думать и про локализацию в том числе. Потому что скорее всего набирать начнут на родном языке.
    • 0
      На родном языке у них работает — находит и Suomi, и Sverige, и Nihon, и даже Rossiya. А вот на родном алфавите неа.
  • 0
    Ввожу «R», мне первым пунктом выдают «China». Что я делаю не так?
    • –1
      А на «d» — «Germany»
      • +4
        D — Deutschland
        R — видимо из-за слова «республика» в полном наименовании Китая.
        • 0
          People's Republic of China.
          Буква не первая.
    • +5
      Вы недооценили мощь китайского народа и созидательный порыв его Коммунистической Партии.
  • +1
    Очень понравилось, что на ua вывело Украину, а на by — Белоруссию.
    • 0
      Аналогично. Но вот опечатки (заявленные в статье) не работают. Ukreine и подобные опечатки в одну букву — не находит.
  • +7
    Красота. Была проблема маленькая — сделали большую :)

    А теперь посмотрим, как этот JS-тяжеловес будет работать в сложных боевых условиях?
    1) JS отключен — подставился обычный выпадающий список — тест пройден.
    2) Старый IE (тестировал через IETester, так что есть некоторая вероятность неправильного результата) — IE6 и IE7 показали обычный выпадающий список — не страшно. В IE8 после выпадания нужной подсказкой первой строкой нажатие «Enter» приводит к очищению поля. Если попрыгать сначала стрелками по подсказкам, то поле не очистится, но и выбор не подтвердится. Выбор подтверждается только мышью — плохо.
    3) Используется мобильный прокси-браузер (на примере Opera Mini) — после ввода страница сразу же обновляется и значение затирается, то есть вести что-то нельзя вообще — провал.
    4) Используется полноценный мобильный браузер — подсказки слишком медленно выползают, успеваешь полностью ввести «Russia» и начать делать что-то еще. В Opera Mobile после тормозов и подбрасываний обратно к форме всё-таки подправился ввод до «Russian Federation». В нативном Вебките для Андроида после всего это почему-то подставилось «China» — провал.
    • 0
      Сначала вышестоящий каммент был прилично в минусе, так что я решил подождать аргументированных претензий. Но теперь, видимо, не дождусь. Но всё равно попробую объяснить каммент тем, кто недопонял или недосогласился.

      Итак, автор оригинала статьи верно отметил, что длинный выпадающий список в 200 элементов — не торжество юзабилити. Тем не менее, страну можно определить по IP-адресу (почти безошибочно). Если же данные об IP устарели или пользователь собирается что-то заказывать с доставкой в другую страну, то он всегда может изменить страну в выпадающем списке (то есть список никуда не исчезает, а просто имеет в качестве умолчального значения автоопределившуюся страну). Таких людей окажется мало, да и прокрутить до нужного места не так уж тяжело. А в мобильном телефоне (с емкостным сенсорным экраном) это сделать даже легче, чем на десктопе. Так что это всё же маленькая проблема. И автор поста решил ее таким образом, что появились проблемы большие (хотя в правильных условиях работает отлично, согласен). Например, в одном из указанных тестов страну нельзя было ввести в поле вообще.

      На мой взгляд, идею о выпадающих списках с поисковой строкой и коррекцией ошибок неплохо бы протолкнуть в веб-стандарты. Это могло бы решить проблемы с совметимостью. А пока, как мне кажется, следует отключить расширенный селектор для мобильных устройств.
  • +1
    Я не совсем понимаю сути проблемы, вроде как в select box работает набор по буквам. Даже если список 100 элементов, можно навести фокус и начать набирать «Ро» и выпадет Россия или можно подкорректировать «вверх»/«вниз».

    Большинство пользователей частоиспользующих формы для заполнения, знакомы с этой штукой.
    • 0
      Это опытные пользователи знают. А среднестатистический пользователь Интернета — наверняка нет.
      • 0
        Именно. Я когда статью читал, тоже так подумал… но сразу встретил фразу: «Этот способ работает только если пользователь знает, что и куда ему вводить».
  • 0
    Поубивал бы таких горе дизайнеров!
    Ненавижу тянуться к клаве когда можно сделать всё мышкой, зачем лишать людей этой возможности?
    • –1
      тогда рядом нужна кнопка вызова виртуальной клавиатуры
    • +2
      Кстати, поддержу товарища. Не проблема же справа поставить стрелочку и вываливать весь список желающим.
  • 0
    Понравился в оригинале учёт национального написания.
  • +9
    Если есть список из определенных пунктов, то не должна пропадать возможность выбора без ввода с клавиатуры.
    image
    • 0
      Красиво, да, но возможность выбора элемента выпадающего списка вводом с клавиатуры реализована более 15 лет назад.
  • 0
    Самое ценное на мой взгляд 2 и 3 этапы, без них этот элемент не более чем стандартный Autocomplete.
  • +1
    Почему-то автор учёл всевозможные варианты набора, кроме самого основного: ввод «Россия», наиболее естественный для любого простого пользователя, никак не обрабатывается. И можно сколько угодно объяснять про локали и технические сложности, но пользователь ни о чём не знает. Он только сердится, когда не может набрать название своей страны на понятном ему языке.
  • 0
    Вот я уже привык везде, где длинные стандартные селектбоксы с выбором страны, просто жать на буковку R три раза.
    Если кто не знает, то в стандартных селектах оно по первой букве, как по хоткею срабатывает и прокручивает до следующего элемента в списке на эту букву. И любые оптимизации мне теперь неудобны наоборот будут. Конечно, таких, как я мало, скорей всего, ещё меньше, чем тех, кто по форме табом ходит, но тем не менее…
  • 0
    Не совсем понятно, почему при наборе любого количества букв и последующем стирании, на первом месте оказывается Лесото.
    • +4
      первые позиции выкуплены)
  • 0
    Раз уж задели сайт Apple, то можно написать целую статью. Я каждый раз, когда там что-то покупаю, постоянно ругаюсь на их юзабилити. Это та самая часть, которую они очень плохо контролируют. И дизайн стал какой-то странный, три года назад была металлическая поверхность, очень клево смотрелось. А спустя год они сменили ее на черно-серую.
  • +2
    Смотрите как это сделано в установщике дебиана. После определения локали показывается выбор location по языку человека и есть пункт other, который в два уровня (region/country) выбирает нужное.
  • 0
    Проблема с автодополнением возникает, когда есть пункт, название которого является началом названия другого пункта. Например, Niger и Nigeria. Набираешь niger[ENTER], а в регистрацию уходит Nigeria. Или приходится следить, исправлять. В любом случае, необходимо думать, что же с этим дополнением делать — нажимать ENTER, или ТАВ, или стрелками выбрать, или мышкой… Сложнее всё-таки, чем простое меню из 250 пунктов, которое прокручивается колёсиком на ура. В общем, как и везде — есть и плюсы, и минусы.
  • 0
    Можно сделать к каждой стране (или хотя бы к популярным) флаг 8х8 хотя бы, или 16х16 из спрайта какого-нибудь + мелким шрифтом перенос с названием этой страны на её национальном языке, напрмиер
    Russian Federation (написано по нормальному)
    Российская Федерация (написано чуть ниже не выделяющимся шрифтом и цветом)
    + включить это в поиск, тогда человек сможет набрать на своем языке свою страну
  • +1
    Кликабельная карта — самый удачный интерфейс. При клике на континенте, открывается карта континента, затем страны, затем карта области, а маленький город можно выбрать из списка.
    • 0
      Ужас какой. Я за это в свое время жутко матерился на установщик Федоры…
      • 0
        Почему же? Гораздо удобнее и быстрее, чем пролистывать список из 500 элементов.
        • +1
          Ну, во-первых, «согласно ISO 3166, в нём 249 стран».
          Во-вторых, вы не можете эффективно управлять такой картой с клавиатуры.
          В-третьих она занимает очень много места и заставляет напрягать серые клеточки мозга, чтобы вспомнить, где находится моя страна (в случае с городами все еще печальней). А это ведет к увеличению кол-ва ошибок.

          И это не полный список, хотя мне достаточно только первого пункта, чтобы сказать «ужас какой».
          • 0
            Извиняюсь, «второго пункта», конечно же.
          • 0
            >>напрягать серые клеточки мозга, чтобы вспомнить, где находится моя страна
            А ну, если выбор страны расчитан на 95% населения, то да, действительно, вариант не очень =)
    • 0
      Думаю с карты достаточно выбрать только континент. Это решит проблему большого кол-ва стран в списке.
      Да и сам процесс выбора сделает более увлекательным.
      А страну выбирать уже из списка с флагами. Кстати, почему бы не сделать его в несколько колонок?

      Прямо руки тянутся написать такой виджет)
  • 0
    omg! ну наконец-то у кого-то дошли руки, так просто и так эффективно! УАПЩЕ КРАСАФЧЕГИ!
  • 0
    Я за! за удобный интернет и прочая. Глупо было изобретать компьютеры чтобы потом тратить жизнь на поиск страны в выпадающем списке. Они бы туда ещё галактики добавили. Очень понравилось решение и его исполнение.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разное