Java, UX, HTML, CSS, WEB-design

Редизайн выбора страны

[ad_1]

  • Кристиан Холст

  • 0 Комментарии

Редизайн выбора страны

  • 7 минут чтения

  • UX-дизайн, Дизайн, Юзабилити, Дизайн взаимодействия, Шаблоны проектирования, Лучшие практики

Краткое резюме ↬

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

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

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

Дальнейшее чтение на SmashingMag:

  • Ввод формы: проблема поддержки браузера, о которой вы не знали
  • Шаблоны пользовательского интерфейса для мобильных приложений: поиск, сортировка и фильтрация
  • Полезные идеи и рекомендации для хорошего дизайна веб-форм

Еще после прыжка! Продолжить чтение ниже ↓

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

Проблемы юзабилити

Раскрывающиеся списки вызывают проблемы с удобством использования при использовании для выбора страны и штата по нескольким причинам. Вот шесть:

  1. Отсутствие обзора Увидев более 20 неклассифицированных вариантов, можно сбить с толку, а раскрывающиеся списки стран часто предлагают сотни вариантов (согласно ISO 3166, существует 249 стран).
  2. Непонятная сортировка Когда отображается массивный список, первое, что делают пользователи, — выясняют логику сортировки. Но поскольку раскрывающиеся списки стран часто включают от трех до пяти самых популярных вариантов вверху, логика сортировки на первый взгляд непонятна.
  3. Проблемы с прокруткой Многочисленные проблемы связаны с прокруткой больших раскрывающихся списков. Если курсор мыши находится за пределами раскрывающегося списка, вы, скорее всего, прокрутите всю страницу вниз, скрывая параметры раскрывающегося списка с экрана. Однако в других браузерах выпадающий список будет прокручиваться, пока он находится в фокусе, что, вероятно, приведет к ошибочным данным.
  4. Несогласованный пользовательский интерфейс Пользовательский интерфейс раскрывающихся списков отличается от браузера к браузеру и от ОС к ОС. Выпадающий список будет не только выглядеть по-другому, но и работать по-другому. Например, на Mac Safari заставляет вас наводить курсор на две стрелки для прокрутки вверх и вниз, тогда как Firefox предоставляет традиционную полосу прокрутки. Теперь возьмите свой смартфон, и внезапно пользовательский интерфейс снова резко изменился.
  5. Отсутствие контекста Мобильные устройства имеют очень ограниченное пространство экрана, а это означает, что при прокрутке у вас меньше контекста страницы, и на самом деле поиск нужной опции занимает больше времени.
  6. Нарушение потока Почти все пользователи — даже те, кто в противном случае перемещается по формам — будут использовать мышь при взаимодействии с раскрывающимся списком, что замедляет их продвижение.

Все это складывается

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

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

Итерация 1: набор текста против. Прокрутка

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

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

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

Итерация 2: опечатки и последовательность

Заменив раскрывающийся список текстовым полем с автозаполнением, мы создали новую проблему. Хотя можно ожидать, что пользователь знает название своей страны, нельзя ожидать, что он знает, как ее называет наш сервер. Если пользователь живет в США и делает упущениенапример «Соединенные Штаты», или решает ввести только часть имени, например «Америка» (вместо «Соединенные Штаты Америки»), то не будет отображаться правильный результат:

Подписка на электронную почту Apple
Поле автозаполнения Apple для страны требует от вас 100% правильного написания имени и в правильной последовательности.

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

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

Короче говоря, выбор страны должен учитывать пропуски и последовательность. Мы достигаем этого, просто включив свободное частичное сопоставление:

Итерация 3: когда Нидерланды не называют «Нидерланды»

Теперь мы позаботились об опечатках и последовательности, но есть еще одна проблема. Некоторые названия стран имеют несколько общепринятых вариантов написания; например, Нидерланды иногда называют Голландией. Географически они одинаковы, но средний человек сказал бы, что отдыхал в «Голландии», тогда как сами голландцы обычно пишут «Нидерланды».

Когда мы требуем от пользователя ввести название страны, мы должны рассмотреть все распространенные варианты написания. Сюда входят синонимы, местные варианты написания, распространенные сокращения и коды стран. Типичное автозаполнение (а также выпадающий список) потерпит неудачу, если будет предъявлено обвинение во всех этих написаниях, таких как сопоставление США с Соединенными Штатами или Schweiz, Suisse, Svizzera и Svizra со Швейцарией или DE с Германией.

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

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

Итерация 4: когда «США» встречается чаще, чем «Объединенные Арабские Эмираты»

Введя «United» в поле выбора страны с автозаполнением на веб-сайте Apple, вы получите следующий список:

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

Чтобы учесть это, всем значениям (странам) можно было бы присвоить вес. По умолчанию все будут равны, и тогда каждый веб-сайт сможет применить свой собственный вес для своих самых популярных стран:

Решение: переработанный инструмент выбора страны

Решением является переработанный селектор страны, который устраняет проблемы с раскрывающимся селектором страны. Он обрабатывает опечатки, различные последовательности написания, синонимы и приоритетные варианты.

Технически правильным термином для этого было бы что-то вроде «автозаполнение текстового поля со свободным частичным соответствием, синонимами и взвешенными результатами». Это немного длинно, поэтому я просто назвал его «Переработанный выбор страны» — вы можете попробуйте демо здесь.

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

Обновлять:Как отметили многие комментаторы, логика сортировки в оригинальной демонстрации была не такой уж «логичной». Теперь мы изменили его, поэтому первые буквы названия страны ранжируются выше (например, при вводе «Ca» вверху отображается «Канада» вместо «Американское Самоа», а «In» возвращает «Индия» вместо «Соединенные Штаты». », и так далее), как многие из вас предлагали. Спасибо за отзыв — вы можете следить за проектом на GitHub, чтобы получать уведомления о будущих улучшениях.

Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Редизайн выбора страны

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Редизайн выбора страны

Название: Редизайн выбора страны . Краткое описание: [ad_1] ⭐ Кристиа . Дата публикации: 19.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

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

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»