Выпадальныя спісы з магчымасцю пошуку: як зрабіць доўгія спісы зручнымі для карыстальніка

Выпадальны спіс з 200 краінамі. Спіс з 50 штатаў. Сотні варыянтаў прадуктаў. Пракрутка доўгіх выпадальных спісаў раздражняе і прыводзіць да адмовы ад формы.

Выпадальныя спісы з магчымасцю пошуку вырашыць гэтую праблему, дазваляючы карыстальнікам імгненна фільтраваць параметры. Замест пракруткі яны ўводзяць «can» і бачаць уверсе Канаду.

У гэтым кіраўніцтве вы даведаецеся, калі выкарыстоўваць выпадальныя спісы з магчымасцю пошуку і як наладзіць іх у формах WordPress.

Праблема з доўгімі выпадальнымі спісамі

Стандартныя выпадальныя спісы становяцца непрыдатнымі для выкарыстання па меры павелічэння колькасці опцый:

Праблемы з карыстальніцкім досведам

• Бясконцая пракрутка – Пошук «Злучаныя Штаты» ў алфавітным спісе краін азначае пракрутку больш чым 180 краін.
• Мабільны кашмар – Маленькія вобласці пракруткі на сэнсарных экранах
• Патрабуе шмат часу – Карыстальнікі трацяць больш за 10 секунд на пошук аднаго варыянту
• Схільны да памылак – Лёгка выпадкова выбраць няправільны прадмет
• Непрыемна – Паўтараецца для некалькіх выпадальных спісаў

Калі выпадальныя спісы становяцца праблематычнымі

Як працуюць выпадальныя спісы з магчымасцю пошуку

Выпадальны спіс з магчымасцю пошуку спалучае ў сабе поле для ўводу тэксту з выпадальным спісам:

1. Карыстальнік націскае на выпадальнае поле
2. З'яўляецца поле пошуку (або само поле становіцца даступным для пошуку)
3. Карыстальнік уводзіць некалькі сімвалаў
4. Фільтрацыя параметраў у рэжыме рэальнага часу ў адпаведнасці з уваходнымі дадзенымі
5. Карыстальнік выбірае з адфільтраванага кароткага спісу

Прыклад: Выбар краіны

Без пошуку: Прагартайце больш за 200 краін, каб знайсці «Германія»

З дапамогай пошуку: Увядзіце «ger» → паглядзіце Германія, Алжыр, Нігерыя → націсніце Германія

Зэканомлены час: больш за 10 секунд → 2 секунды

Тыповыя выпадкі выкарыстання выпадальных спісаў з магчымасцю пошуку

Выбар краіны

Класічны прыклад. У больш чым 195 краінах пошук вельмі важны:

• Увядзіце «uni» → Злучаныя Штаты, Вялікабрытанія, Аб'яднаныя Арабскія Эміраты
• Увядзіце «aus» → Аўстралія, Аўстрыя
• Увядзіце «новы» → Новая Зеландыя, Новая Каледонія

Выбар штата/правінцыі

50 штатаў ЗША, 13 канадскіх правінцый або рэгіёнаў па ўсім свеце:

• Увядзіце «cal» → Каліфорнія
• Увядзіце «новы» → Нью-Ёрк, Нью-Джэрсі, Нью-Гэмпшыр, Нью-Мексіка

катэгорыі прадуктаў

Сайты электроннай камерцыі з сотнямі відаў тавараў:

• Увядзіце «ноўтбук» → Ноўтбукі, аксэсуары для ноўтбукаў, сумкі для ноўтбукаў
• Увядзіце «тэлефон» → Тэлефоны, чахлы для тэлефонаў, зарадныя прылады для тэлефонаў

Пасады/Галіны

Кар'ерныя формы з шырокім спісам вакансій:

• Увядзіце «інжынер» → Інжынер-праграміст, Інжынер-будаўнік, Інжынер-механік
• Увядзіце «рынак» → Менеджэр па маркетынгу, Рынкавы аналітык, Спецыяліст па рынку

Мовы

Моўныя перавагі з больш чым 100 варыянтамі:

• Увядзіце «span» → Іспанская
• Тып «падбародак» → Кітайская (спрошчаная), Кітайская (традыцыйная)

Універсітэты/Школы

Спісы навучальных устаноў:

• Увядзіце «гарвард» → Гарвардскі ўніверсітэт
• Увядзіце «MIT» → Масачусецкі тэхналагічны інстытут

Часовыя зоны

Больш за 400 варыянтаў часавых паясоў:

• Увядзіце «ціхаакіянскі рэгіён» → Ціхі акіян/Окленд, Ціхі акіян/Ганалулу, ЗША/Ціхаакіянскі рэгіён
• Увядзіце «Нью-Ёрк» → Амерыка/Нью-Ёрк

Налада выпадальных спісаў з магчымасцю пошуку

Вось як стварыць выпадальныя спісы з магчымасцю пошуку з дапамогай Аўтаматычны канструктар формаў:

Крок 1: Усталюйце Auto Form Builder

1. Да Плагіны → Дадаць новы
2. Шукаць "АФБ«(скарочаная назва ад Auto Form Builder)»
3. знайсці «AFB – Аўтаматычны канструктар формаў – Канструктар формаў з перацягваннем"
4. націсніце Устанавіць зараз, То Актываваць

Крок 2: Дадайце выпадальнае поле

1. Стварыце або адрэдагуйце сваю форму
2. Перацягнуць Падаць поле ў вашу форму
3. Націсніце, каб адкрыць налады

Крок 3: Дадайце свае параметры

Увядзіце спіс варыянтаў. Для доўгіх спісаў вы можаце:

• Увядзіце ўручную – Уводзьце кожны варыянт па чарзе
• Масавае даданне – Устаўце спіс варыянтаў (па адным у радок)

Крок 4: Уключыце пошук

У выпадальным спісе налад знайдзіце Пошук or Уключыць пошук опцыя. Уключыце яе.

Цяпер у выпадальным спісе будзе поле пошуку/фільтра, якое фільтруе параметры па меры ўводу карыстальнікамі.

Крок 5: Наладзьце паводзіны пошуку

У залежнасці ад вашага канструктара формаў, у вас могуць быць такія варыянты, як:

• Мінімальная колькасць сімвалаў – Пачаць фільтраванне пасля ўводу X сімвалаў
• Пазіцыя пошуку – Супадзенне з пачатку опцыі або з любога месца
• Тэкст-запаўняльнік – «Увядзіце тэкст для пошуку…» або «Пошук па краінах…»

Найлепшыя практыкі для выпадальнага поля

1. Заўсёды ўключайце пошук для больш чым 20 варыянтаў

Калі ў вашым выпадальным спісе больш за 20 варыянтаў, уключыце пошук. Гэта так проста. Карыстальнікі будуць вам удзячныя.

2. Выкарыстоўвайце празрысты тэкст-запаўняльнік

Паведаміце карыстальнікам, што яны могуць шукаць:

• «Выберыце краіну (увядзіце тэкст для пошуку)»
• «Выберыце свой штат…»
• «Пошук або выбар…»

3. Лагічна ўпарадкуйце параметры

Нават пры пошуку парадак опцый мае значэнне:

• па алфавіце – Найлепш падыходзіць для назваў (краін, штатаў)
• Спачатку найбольш распаўсюджаныя – Размясціце папулярныя варыянты ўверсе (ЗША, Вялікабрытанія, Канада)
• Згрупаваныя – Катэгорыі з раздзяляльнікамі

4. Уключыце распаўсюджаныя варыяцыі

Карыстальнікі могуць шукаць:

• «ЗША» або «Злучаныя Штаты» або «ЗША» або «Амерыка»
• «Вялікабрытанія» або «Злучанае Каралеўства», або «Вялікабрытанія» або «Англія»

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

5. Тэставанне на мабільным тэлефоне

Выпадальныя спісы з магчымасцю пошуку павінны працаваць без праблем на сэнсарных прыладах:

• Пошукавы ўвод лёгка націскаць
• Для ўводу тэксту з'яўляецца клавіятура
• Варыянты дастаткова вялікія, каб дакладна націскаць

Калі НЕ варта выкарыстоўваць выпадальныя спісы з магчымасцю пошуку

Выпадальныя спісы з магчымасцю пошуку не заўсёды з'яўляюцца адказам:

Кароткія спісы (менш за 10 варыянтаў)

Для 5-10 варыянтаў стандартны выпадальны спіс працуе хутчэй. Не трэба друкаваць, калі вы бачыце ўсё адразу.

Калі карыстальнікі не ведаюць дакладнага тэрміна

Для пошуку карыстальнікам трэба ведаць, што ўводзіць. Калі яны праглядаюць/даследуюць варыянты, лепш падыдзе спіс па катэгорыях або радыёкнопкі.

Так/Не або бінарныя варыянты

Выкарыстоўвайце замест гэтага радыёкнопкі. Для двух варыянтаў выпадальны спіс зусім не патрэбны.

Лікавыя дыяпазоны

Што тычыцца ўзроставых дыяпазонаў або выбару колькасці, улічвайце наступнае:

• Поле ўводу лічбы
• паўзунок
• Кароткі выпадальны спіс (1-10)

Альтэрнатывы выпадальным спісам з магчымасцю пошуку

У залежнасці ад вашых дадзеных, разгледзьце наступныя альтэрнатывы:

Тэкставае поле аўтазапаўнення

Карыстальнік можа ўводзіць тэкст свабодна, ніжэй з'яўляюцца прапановы. Гэта добра, калі карыстальнікі могуць уводзіць значэнні, якіх няма ў вашым спісе.

Каскадныя выпадальныя спісы

Разбіце адзін доўгі спіс на два кароткія:

• Першы выпадальны спіс: Выберыце кантынент
• Другі выпадальны спіс: Выберыце краіну (адфільтравана па кантыненце)

Радыёкнопкі з пунктам «Іншае»

Паказваць 5–7 першых варыянтаў у выглядзе радыёкнопак з опцыяй «Іншае», якая адкрывае тэкставае поле.

Згрупаваныя/катэгарызаваныя параметры

Выкарыстоўвайце optgroups для арганізацыі опцый па катэгорыях:

• Паўночная Амерыка
  • Канада
  • Мексіка
  • ЗША
• Еўропа
  • Францыя
  • Германія
  • Злучанае Каралеўства

Папярэдне падрыхтаваныя спісы опцый

Не вынаходзьце ровар. Вось распаўсюджаныя спісы, якія вам спатрэбяцца:

Краіны

195 дзяржаў-членаў ААН плюс тэрыторыі. Падумайце аб тым, каб размясціць агульныя краіны (ЗША, Вялікабрытанія, Канада, Аўстралія) уверсе, а затым у алфавітным парадку.

Штаты ЗША

50 штатаў плюс акруга Калумбія і тэрыторыі. Алфавітны рэжым добра працуе.

Канадскія правінцыі

13 правінцый і тэрыторый. Дастаткова кароткі тэрмін, каб пошук быў неабавязковым.

Часовыя зоны

Выкарыстоўвайце стандартныя ідэнтыфікатары часавых паясоў (Амерыка/Нью-Ёрк, Еўропа/Лондан). Групуйце па рэгіёнах.

Мовы

Коды моў ISO з назвамі, якія адлюстроўваюцца. Спачатку размяшчайце распаўсюджаныя мовы.

Прамысловасць

Стандартныя спісы галіновых класіфікацый (NAICS, SIC) або карыстальніцкія спісы для вашай аўдыторыі.

Меркаванні прадукцыйнасці

Вельмі вялікія спісы (больш за 1000 варыянтаў)

Для вельмі вялікіх спісаў:

• Загрузка опцый па запыце – Атрымліваць з сервера па меры ўводу карыстальнікам
• Устанавіць мінімальную колькасць сімвалаў – Патрабуйце 2-3 сімвалы перад пошукам
• Абмежаваць паказаныя вынікі – Паказваць 20 лепшых матчаў, а не ўсе 500

Уплыў загрузкі старонкі

Доўгія спісы варыянтаў павялічваюць памер старонкі. Для спісаў з больш чым 500 варыянтамі варта ўлічваць наступнае:

• Загрузка параметраў праз AJAX
• Разбіццё на каскадныя выпадальныя спісы
• Выкарыстанне пошуку на баку сервера

Даступнасць

Забяспечце доступ да выпадальных спісаў для пошуку:

Навігацыя па клавіятуры

• Націсніце Tab, каб сфакусаваць поле
• Увядзіце для пошуку
• Клавішы са стрэлкамі для навігацыі па параметрах
• Увядзіце, каб выбраць
• Уцёкі, каб закрыць

Праграмы для чытання з экрана

• Правільныя тэгі ARIA
• Абвясціць колькасць вынікаў
• Абвясціць выбраны варыянт

Візуальныя паказчыкі

• Выразныя станы фокусу
• Выдзелены бягучы варыянт
• Індыкатар загрузкі падчас пошуку

Questions fréquemment posées

Колькі варыянтаў, перш чым мне спатрэбіцца пошук?

Уключыце пошук для любога выпадальнага спісу з больш чым 20 варыянтамі. Для больш чым 50 варыянтаў пошук неабходны. Некаторыя карыстальнікі цэняць пошук нават для 10-15 варыянтаў.

Ці павінен пошук супадаць з самага пачатку ці з любога месца?

Пошук па запыце «Усюды» больш прабачальны. Пошук па запыце «Ёрк» дасць вынік «Нью-Ёрк». Пошук па запыце толькі ў пачатку тэрміна хутчэйшы для вядомых тэрмінаў.

Ці могуць карыстальнікі ўсё яшчэ пракручваць усе параметры?

Так, у выпадальных спісах з магчымасцю пошуку звычайна спачатку адлюстроўваецца поўны спіс. Пошук фільтруе яго, але карыстальнікі ўсё роўна могуць пракручваць, калі ім зручней.

Што рабіць, калі карыстальнікі памыляюцца ў сваім пошукавым запыту?

Звычайны пошук не апрацоўвае памылкі друку. Для важных палёў (напрыклад, краіны) пераканайцеся, што ўключаны распаўсюджаныя памылкі, або выкарыстоўвайце невыразнае супастаўленне, калі даступна.

Ці працуюць выпадальныя спісы з магчымасцю пошуку на мабільных прыладах?

Так, і яны часта лепшыя на мабільных прыладах, чым стандартныя выпадальныя спісы, таму што набор тэксту хутчэйшы, чым пракрутка доўгага спісу з невялікай вобласцю пракруткі.

Рэзюмэ

Зрабіце доўгія выпадальныя спісы зручнымі для карыстальніка:

1. Вызначце доўгія спісы – Любы выпадальны спіс з больш чым 20 варыянтамі
2. Уключыць пошук – Дазволіць карыстальнікам уводзіць тэкст для фільтрацыі
3. Выкарыстоўвайце празрыстыя запаўняльнікі – «Увядзіце тэкст для пошуку…»
4. Лагічна ўпарадкаваць – Спачатку папулярныя тавары, потым па алфавіце
5. Тэст на мабільным тэлефоне – Забяспечце плыўнае адчуванне дотыку
6. Разгледзім альтэрнатывы – Каскадныя выпадальныя спісы, згрупаваныя параметры

Conclusion

Доўгія выпадальныя спісы зніжаюць верагоднасць запаўнення формаў. Выпадальныя спісы з магчымасцю пошуку змяніць вопыт — карыстальнікі знаходзяць патрэбны варыянт за лічаныя секунды, замест таго, каб бясконца пракручваць старонку.

Незалежна ад таго, ці гэта краіны, штаты, прадукты ці любы іншы спіс з больш чым 20 варыянтамі, даданне функцыі пошуку робіць вашы формы хутчэйшымі і больш зручнымі для карыстальнікаў.

Аўтаматычны канструктар формаў дазваляе ствараць выпадальныя спісы з функцыяй пошуку, дапамагаючы карыстальнікам хутка знаходзіць патрэбную інфармацыю нават у самых доўгіх спісах.

Гатовыя палепшыць свае формы? Спампаваць аўтаматычны канструктар формаў і зрабіце свае выпадальныя спісы зручнымі для карыстальнікаў ужо сёння.