Našepkávač vo vyhľadávaní e-shopu: ako má fungovať, aby predával

Našepkávač (anglicky typeahead alebo autocomplete) je okno pod vyhľadávacím poľom, ktoré ukazuje návrhy a produkty už počas písania. Dobrý našepkávač odpovie skôr, než zákazník dopíše slovo, zvládne preklep, ukáže 4 až 10 položiek a po kliknutí vedie priamo na produkt. Na väčšine WooCommerce e-shopov nič také nie je, vyhľadávanie čaká na Enter a potom vráti stránku výsledkov.

V článku vysvetľujem, ako má našepkávač fungovať podľa výskumov používateľov, na čo si dať pozor pri výbere riešenia a ako som to vyriešil v plugine wooacademy search 1.0.3.

Typeahead, autocomplete, našepkávač: je to to isté?

V praxi áno. Typeahead znamená, že systém reaguje počas písania. Autocomplete dopĺňa rozpísané slovo alebo dopyt. Slovenské e-shopy pre obe veci používajú slovo našepkávač. Rozdiel je skôr v tom, čo okno ukazuje:

• návrhy dopytov (zákazník napíše „sneh“ a vidí „snehové reťaze“),
• produkty s názvom, cenou a dostupnosťou,
• kategórie, do ktorých sa dá hľadanie zúžiť.

Na e-shope dávajú najväčší zmysel produkty a kategórie, pretože skracujú cestu k nákupu o jednu stránku.

Čo hovoria výskumy o našepkávači

Baymard Institute testuje vyhľadávanie na stovkách e-shopov. Z ich výsledkov vyberám to, čo sa dá priamo použiť:

• Našepkávač má 80 % e-shopov, ale všetky detaily dobre nastavené má len 19 %.
• Na počítači neukazovať viac ako 10 návrhov, na mobile 4 až 8. Pri väčšom počte ich ľudia prestanú čítať.
• 69 % e-shopov neukáže rozumné návrhy, keď zákazník spraví malý preklep. Návrhy vtedy zmiznú alebo sú úplne mimo.

Posledný bod je najdrahší. Kto napíše „sampon“ namiesto „šampón“ a našepkávač stíchne, ten si myslí, že tovar nemáte. Viac o preklepoch píšem v článku o tom, ako funguje fuzzy vyhľadávanie.

Päť vecí, ktoré musí dobrý našepkávač zvládnuť

1. Rýchlosť

Ak sa návrhy objavia až po pol sekunde, zákazník medzitým dopíše a stlačí Enter. Našepkávač vtedy nemá zmysel. Problém WordPressu je, že každá požiadavka načíta celý systém: tému, všetky pluginy, WooCommerce. Na bežnom hostingu to trvá stovky milisekúnd až sekundy.

2. Preklepy a diakritika

Na mobile ľudia diakritiku často vynechávajú. „Kosela“, „koseľa“ aj „košela“ musia viesť ku košeli.

3. Tvary slov

Slovenčina skloňuje. Zákazník hľadá „topánky“, v názve produktu je „topánok“ alebo „topánka“. Na to slúži stemmatizácia a lematizácia.

4. Rozumné poradie

Prvé tri položky rozhodujú. Hore patria produkty, ktoré sedia v názve, sú skladom a predávajú sa, nie produkt, ktorý má hľadané slovo raz v dlhom popise.

5. Neprekážať webu

Skript našepkávača nesmie spomaľovať načítanie stránky. Kto nehľadá, nemá ho sťahovať.

Prečo to WooCommerce nevie sám

Štandardné vyhľadávanie WordPressu porovnáva text v databáze cez SQL podmienku LIKE v názve, obsahu a krátkom popise. Neopraví preklep, nepozná tvary slov a nemá našepkávač. Pluginy, ktoré našepkávač pridávajú, často len posielajú rovnaký dopyt cez AJAX po každom písmene, takže sú pomalé a server zaťažujú.

Ako to rieši wooacademy search 1.0.3

Pri vývoji pluginu som začal od rýchlosti, lebo bez nej ostatné nefunguje.

• Vlastný index. Plugin si produkty pripraví do vlastných tabuliek (slová, ich váhy, cena, sklad, kategórie, značka). Pri hľadaní sa nečíta celý katalóg.
• Ľahký endpoint mimo celého WordPressu. Dopyt nenačítava tému ani ostatné pluginy. Na testovacom katalógu s 5 000 produktmi odpovedal za 3 až 35 ms.
• Skript až po kliknutí. Na stránke je len malý zavádzač (približne 4 kB). Samotný našepkávač sa stiahne, až keď návštevník klikne do poľa.
• Preklepy, diakritika a tvary. Vyhľadávanie ignoruje diakritiku, má ľahký stemmer pre slovenčinu a češtinu a zvládne aj prehodené písmená. Keď si nie je istý, ponúkne „Mali ste na mysli“.
• Poradie podľa predajov. Okrem zhody v texte zohľadňuje predaje za 90 dní, sklad a to, na čo ľudia pri rovnakom dopyte klikali. Viac v článku o relevancii a radení výsledkov.
• Ovládanie klávesnicou. Šípky a Enter fungujú, takže sa dá vybrať produkt bez myši.

Ako otestovať našepkávač na vlastnom e-shope za 5 minút

1. Napíšte na mobile názov najpredávanejšieho produktu bez diakritiky.
2. Spravte v ňom jeden preklep (vynechajte písmeno, prehoďte dve).
3. Napíšte iný tvar slova (množné číslo, 2. pád).
4. Napíšte slovo, ktoré zákazníci používajú, ale vy ho v názvoch nemáte. Ak nič nenájde, chýbajú vám synonymá vo vyhľadávaní.
5. Zmerajte, či sa návrhy objavia skôr, než dopíšete slovo.

Ak zlyhajú dva body z piatich, vyhľadávanie vám berie objednávky. Koľko ich je, uvidíte v štatistike hľadaných výrazov a nulových výsledkov.

Časté otázky

Autor: Milan Fraňo, wooacademy.sk. Robím WooCommerce e-shopy, merania a SEO. Plugin wooacademy search som vyvíjal pre e-shopy, ktoré chcú dobré vyhľadávanie bez mesačného poplatku externej službe.