Chyby v rozhraní e-shopu: ako skontrolovať a opraviť cestu k nákupu

Aby zákazník dokončil objednávku, e-shop mu musí pomôcť nájsť produkt, vybrať dostupný variant, zistiť celkovú cenu a dostať jednoznačné potvrdenie nákupu. Kontrolu začnite týmito úlohami: prejdite cestu od vyhľadávania po platbu na telefóne, zámerne urobte chybu vo formulári a overte, či možno pokračovať bez opätovného zadávania všetkých údajov.

Nasledujúce kroky sú praktické odporúčania na kontrolu a úpravu e-shopu. Odporúčania týkajúce sa formulárov vychádzajú zo vzdelávacích materiálov Konzorcia World Wide Web (W3C), ktoré vysvetľujú prístupné zadávanie údajov, kontrolu chýb a oznamovanie výsledkov. Použite ich ako technické vodidlo pre vývojára a ako základ kontroly vlastného webu.

1. Overte, či zákazník nájde produkt bez pomoci manažéra

Dajte človeku úlohu nájsť konkrétny produkt, ale nepovedzte mu, ktorú časť ponuky má otvoriť. Požiadajte ho napríklad, aby našiel čierne tenisky v určitej veľkosti a v stanovenom cenovom limite. Sledujte, ktoré názvy kategórií vyberá, čo zadáva do vyhľadávania a kde sa zastaví. Ak zákazník otvorí niekoľko nesúvisiacich kategórií, skontrolujte ich názvy a obsah.

Kategórie pomenujte slovami, ktorými zákazníci opisujú produkty, keď kontaktujú obchod. Interné názvy skupín dodávateľa nemusia byť návštevníkovi zrozumiteľné. Na karte produktu zobrazte cestu k jeho kategórii a po návrate z karty zachovajte vybrané filtre aj pozíciu v zozname, aby zákazník mohol pokračovať v porovnávaní na rovnakom mieste.

• Vyhľadávanie. Overte vyhľadávanie podľa názvu, kódu produktu, časti názvu a bežného variantu zápisu. Ak e-shop podporuje opravu preklepov alebo synonymá, vyskúšajte ich na skutočných dopytoch zákazníkov.
• Filtre. Zobrazte parametre, ktoré pomáhajú pri výbere v danej kategórii: pri obuvi veľkosť, pri kábli typ konektora a dĺžku. Ukážte použité filtre a umožnite odstrániť každý zvlášť.
• Žiadne výsledky. Zachovajte dopyt a vysvetlite, čo možno zmeniť. Ak zvolená kombinácia filtrov nezobrazí žiadne výsledky, navrhnite zrušenie konkrétneho obmedzenia.
• Tlačidlá a ikony. Dôležité akcie označte zrozumiteľnými názvami, napríklad „Vyhľadávanie“, „Košík“ a „Odstrániť filtre“. Overte, či človek rozumie účelu tlačidla ešte pred kliknutím.

Samostatne skontrolujte mobilnú ponuku. Kategória sa musí dať otvoriť ťuknutím a jej podkategórie musia byť dostupné bez podržania kurzora myši. Po zatvorení ponuky sa má zákazník vrátiť na miesto stránky, z ktorého ju otvoril.

2. Zlaďte variant produktu, skladovú zásobu, cenu a čas odoslania

Dostupnosť kontrolujte pre konkrétnu kombináciu vlastností. Ak je model v katalógu, ale čierna farba v požadovanej veľkosti nie je dostupná, všeobecný údaj „Skladom“ zákazníkovi nepomôže správne sa rozhodnúť. Po výbere variantu má karta zobrazovať príslušné fotografie, cenu, dostupné množstvo alebo stav a termín odoslania.

Požiadajte vývojára, aby dostupnosť overoval pri pridaní do košíka aj pred konečným potvrdením. Ak sa skladová zásoba zmenila, web má vysvetliť, ktorá položka chýba, a zachovať zvyšok košíka. Zmenu farby, veľkosti alebo zostavy musí zákazník výslovne potvrdiť.

Ak dostupnosť musí dodatočne potvrdiť manažér, informujte o tom ešte pred objednávkou. Nesľubujte okamžité odoslanie, ak obchod ešte overuje dodávku. Texty na webe musia zodpovedať tomu, čo zamestnanci skutočne dokážu zabezpečiť.

3. Zobrazte celkovú cenu pred konečným potvrdením

Zákazník musí vedieť, koľko stojí produkt a aké náklady sa pripočítajú pri zvolenom doručení a platbe. Pri spôsobe doručenia zobrazte známu sumu alebo vysvetlite, ako sa určuje. Ak presná tarifa závisí od adresy, hmotnosti alebo rozmerov, uveďte to a aktualizujte výpočet po získaní potrebných údajov.

Ilustračný príklad výpočtu: dva produkty po 480 UAH stoja 960 UAH. Pri doručení za 80 UAH a balení za 20 UAH sú celkové náklady 1 060 UAH. Ak zákazník zaplatí 960 UAH obchodu a 100 UAH pri prevzatí, súhrn musí zobrazovať obe sumy a uvádzať, komu sa platia. Čísla slúžia iba na ukážku štruktúry výpočtu.

Skontrolujte zmenu ceny po uplatnení zľavového kódu, výbere iného dopravcu a spôsobu platby. V súhrne samostatne zobrazte produkty, zľavu, doručenie, ostatné dohodnuté náklady a celkovú sumu. Ak niektorá položka ešte nie je známa, jasne to označte a vysvetlite, kedy sa zákazník dozvie presnú sumu. Celková suma nesmie pôsobiť ako konečná, ak zahŕňa iba produkty.

Príklad vizuálneho rozlíšenia akcií. Kontrast a prístupnosť konkrétnych tlačidiel treba overiť osobitne.

4. Skráťte mobilný formulár a vysvetlite každé pole

Každé povinné pole prejdite spolu s manažérom, ktorý spracúva objednávky. Zistite, na aký úkon sú dané údaje potrebné. Pri doručení na výdajné miesto netreba požadovať ulicu a číslo bytu a pri osobnom odbere úplnú poštovú adresu. Ďalšie polia zobrazte až po výbere príslušného spôsobu prevzatia.

Formulár v záujme jednoduchšieho nákupu umožnite odoslať aj bez vytvorenia účtu. Registráciu ponúknite po potvrdení nákupu a vysvetlite jej výhody, napríklad prístup k histórii objednávok. Overte aj postup v situácii, keď je e-mailová adresa už v databáze: obnovenie hesla nemá byť jediným spôsobom, ako pokračovať v nákupe bez registrácie.

V materiáli W3C o označovaní polí sa odporúča označiť prvky formulára a prepojiť označenie s príslušným poľom. Požiadajte vývojára, aby po zadaní údajov zostali viditeľné názvy „Телефон“ (telefón), „Електронна адреса“ (e-mailová adresa) a „Місто“ (mesto). Pomocný text v prázdnom poli po zadaní zmizne, takže zákazník môže stratiť informáciu o tom, čo vypĺňa.

• Typ poľa. Pre e-mailovú adresu nastavte typ email a pre telefón tel. Telefónne číslo ukladajte ako textovú hodnotu, aby sa znak „+“ a formát čísla nepovažovali za aritmetické číslo.
• Automatické dopĺňanie. Požiadajte o nastavenie atribútu autocomplete podľa účelu polí a vyskúšajte dopĺňanie mena, telefónu a adresy na skutočnom telefóne.
• Formát zadávania. Umožnite vložiť telefónne číslo s medzerami alebo zátvorkami a podporované formáty spracujte na webe. W3C v odporúčaniach na overovanie vstupov radí podľa možnosti prijímať rôzne zápisy údajov.
• Povinné údaje. Povinné polia označte slovami alebo pred formulárom vysvetlite význam označenia. Zrozumiteľne označte aj nepovinné údaje.

Pri ukrajinskom obchode súvisí zloženie polí aj s požiadavkami ukrajinských právnych predpisov. Časť 3 článku 6 ukrajinského zákona „Про захист персональних даних“ („O ochrane osobných údajov“) č. 2297-VI vyžaduje, aby rozsah a obsah údajov boli primerané, adekvátne a nie nadmerné vzhľadom na účel spracúvania. V praxi to znamená overiť, či na konkrétnu objednávku naozaj potrebujete dátum narodenia, pohlavie a ďalšie údaje.

Bod 3 časti 1 článku 11 tohto zákona uvádza uzavretie a plnenie právneho úkonu ako jeden z právnych základov spracúvania údajov. Základ preto určite osobitne pre každý účel; súhlas nie je jediným možným základom spracúvania objednávky. Pri formulári uveďte zrozumiteľný odkaz na informácie o prevádzkovateľovi údajov, účele spracúvania, príjemcoch a spôsobe podávania žiadostí týkajúcich sa údajov, so zohľadnením práv podľa článku 8. Ak využívate súhlas s reklamnými správami, ponúknite ho oddelene od nákupu.

Skontrolujte klávesnicu, viditeľnosť fokusu a čitateľnosť

Prejdite objednávku bez myši: klávesom Tab prechádzajte dopredu, Shift+Tab dozadu, aktivujte tlačidlá a otvárajte zoznamy pomocou klávesnice. Fokus, teda označenie aktuálne aktívneho prvku, musí byť viditeľný. Poradie prechádzania má zodpovedať poradiu čítania a otvorená ponuka alebo okno nesmie človeka pripraviť o možnosť vrátiť sa k nákupu.

Na telefóne skontrolujte formulár pri otvorenej klávesnici na obrazovke: aktívne pole, pomocný text a chybové hlásenie musia zostať viditeľné. Zväčšite stránku a prečítajte názvy variantov a podmienky doručenia. Ak sa text orezáva, tlačidlá prekrývajú polia alebo sa blízke prvky ťažko stláčajú samostatne, zaznamenajte konkrétnu obrazovku a úkon, ktorý treba opraviť.

5. Vysvetľujte chyby a zachovajte zadané údaje

Hlásenie „Neplatné údaje“ núti zákazníka, aby príčinu hľadal sám. Napíšte, ktorému poľu treba venovať pozornosť a ako ho opraviť: „Uveďte výdajné miesto“ alebo „Skontrolujte e-mailovú adresu: po znaku @ musí nasledovať názov domény“. Text prepojte s príslušným poľom a nechajte ho viditeľný, kým používateľ údaje opravuje.

Odporúčania W3C k hláseniam vo formulároch radia zobrazovať zrozumiteľné vysvetlenia chýb, zoznam problémov pred formulárom a odkazy na príslušné polia. Pri formulári s viacerými chybami požiadajte vývojára o zobrazenie takéhoto zoznamu, viditeľných vysvetlení pri poliach a prístupného oznámenia o zmenách pre ľudí, ktorí používajú čítačku obrazovky. Samotný červený rámček nevysvetľuje, ako chybu opraviť.

Zámerne vynechajte výdajné miesto, zadajte nesprávnu adresu a odošlite formulár. Overte, že web zachoval produkty, množstvo, kontakty a už vybrané možnosti. Po oprave musí zákazník pokračovať v objednávke s už zadanými údajmi. Samostatne otestujte návrat na predchádzajúci krok a obnovenie po dočasnom výpadku siete; zachovanie údajov nesmie sprístupniť informácie inému používateľovi zdieľaného zariadenia.

Kontrola v prehliadači pomáha rýchlo zobraziť chybu, ale W3C v materiáli o overovaní vstupov vysvetľuje, že údaje treba overovať aj na serveri. Zahrňte do zadania pre vývojára oba spôsoby kontroly. Na serveri pred potvrdením overujte aj hodnoty dôležité pre objednávku: cenu, dostupnosť, množstvo a uplatnenie zľavy.

6. Umožnite skontrolovať objednávku a obnoviť platbu bez vytvorenia duplicity

Pred konečným úkonom zobrazte zloženie objednávky vrátane vlastností produktov, množstva, sumy, kontaktov, adresy a spôsobu platby. Pridajte možnosť upraviť každý blok bez vymazania ostatných. Možnosť skontrolovať a opraviť údaje pred nákupom uvádzajú aj odporúčania W3C na predchádzanie chybám.

Konečné tlačidlo pomenujte podľa nasledujúceho úkonu: „Potvrdiť objednávku“, ak web objednávku vytvorí, alebo „Pokračovať k platbe“, ak otvorí platobnú stránku. Po kliknutí ukážte, že sa požiadavka spracúva. Ochrana pred opakovaným kliknutím musí fungovať spolu s ochranou na serveri: opätovné odoslanie tej istej požiadavky má vrátiť už vytvorenú objednávku, nie vytvoriť novú.

Návrat z platobnej stránky sám osebe nesmie určovať, či bola platba úspešná. Požiadajte vývojára, aby získaval a overoval výsledok mechanizmom, ktorý poskytuje platobná služba. Ak zákazník zatvoril kartu alebo stratil spojenie, web má obnoviť stav existujúcej objednávky. Kým výsledok nie je známy, nenavádzajte na opätovnú platbu a bez potvrdenia neoznamujte, že peniaze neboli odpísané.

Skontrolujte dvojité kliknutie, obnovenie stránky s potvrdením a návrat pomocou tlačidla prehliadača. Pri každej kontrole overte počet objednávok v systéme, ich čísla a platobné pokusy. Viditeľné hlásenie „Úspešné“ musí zodpovedať skutočnému výsledku; W3C osobitne zdôrazňuje potrebu informovať používateľa o chybách aj o úspešnom dokončení formulára.

7. Zabezpečte dostupnosť podmienok doručenia, vrátenia tovaru a kontaktov ešte pred nákupom

Stručné podmienky zobrazte pri produkte a počas objednávania, podrobné vysvetlenia uveďte na samostatných stránkach s viditeľnými odkazmi. Zákazník musí nájsť odpoveď pred potvrdením objednávky a vrátiť sa k nej bez straty zadaných údajov.

• Doručenie. Uveďte dostupné spôsoby, obsluhovanú oblasť, spôsob určenia ceny a čas spracovania. Rozlišujte čas, ktorý obchod potrebuje na odoslanie, a očakávaný čas prepravy.
• Vrátenie tovaru. Vysvetlite, kam sa obrátiť, aké údaje poskytnúť na vyhľadanie objednávky, ako dohodnúť odoslanie a dostať odpoveď. Podmienky a výnimky overte pre vlastný sortiment; obmedzenia pre jeden druh tovaru nevzťahujte na všetky nákupy.
• Kontakty. Uveďte predajcu, kontaktné kanály a hodiny, počas ktorých odpovedá. Overte, či odkazy na telefón a e-mail fungujú na mobilnom zariadení.
• Osobný odber. Ak je dostupný, uveďte adresu, otváracie hodiny a čas, kedy možno prísť: hneď po objednaní alebo až po oznámení, že je objednávka pripravená.

Požiadajte manažéra, aby skontroloval tieto stránky v súlade so skutočným pracovným postupom. Ak web sľubuje odpoveď v určitom čase, zamestnanci musia vedieť, kto spracúva požiadavky a čo robiť, keď nie je k dispozícii. Upravte zároveň pokyny pre zákazníka aj organizáciu spracúvania požiadaviek.

Synchronizácia Torgsoft s e-shopom: kontrola skladovej zásoby a cien

Ak sa hlavná evidencia vedie v Torgsoft, platená doplnková funkcia „Synchronizácia s internetovým obchodom“ umožňuje prenášať údaje o produktoch, dostupnosti, vlastnostiach a opisoch a prijímať objednávky. Podľa oficiálneho porovnania licencií je na synchronizáciu potrebná licencia s plnou funkčnosťou a príslušná platená možnosť. Pripojenie z vlastného webu vyžaduje spoluprácu jeho vývojára, ako uvádza pomocník Torgsoft.

Pred spustením dohodnite skladové strediská, ktorých zásoby sa prenášajú na web, zdroj cien pre faktúry, pravidlá rezervácie a súbor vlastností. Filter „Синхронізувати товари тільки в наявності“ (Synchronizovať iba dostupné produkty) počíta s odstránením produktov s nulovým alebo záporným množstvom z webu, preto osobitne skontrolujte dosah na produktové karty a odkazy. Pri automatickom režime opísanom v návode na nastavenie výmeny údajov sa interval musí nastaviť na najmenej 10 minút s ohľadom na ostatné synchronizované objekty. Program Torgsoft musí zostať spustený na určenom počítači pod uvedeným používateľom. Takáto výmena údajov neznamená okamžitú aktualizáciu skladovej zásoby na webe.

Pri kontrole uskutočnite testovací predaj, počkajte na výmenu údajov a overte konkrétny variant produktu na webe. Potom vytvorte testovaciu objednávku a skontrolujte jej načítanie, množstvo, cenu, rezerváciu a stav platby v evidencii. Chyby hľadajte v denníku synchronizácie. Podľa pomocníka môže pri automatickom načítaní chyba pri vytváraní platby zanechať faktúru bez platby a záznam v denníku chýb. Synchronizácia prenáša údaje; označenia polí, navigáciu, hlásenia a ochranu pred opakovaným odoslaním treba samostatne nastaviť a overiť na webe.

8. Otestujte nákup so zákazníkmi a vyhodnocujte dokončené objednávky

Pozvite ľudí, ktorí nakupujú produkty z vašej kategórie, a nechajte ich splniť úlohy bez vysvetľovania, kde sa nachádzajú tlačidlá. Na platbu použite testovací režim dohodnutý s vývojárom. Požiadajte účastníka, aby priebežne komentoval svoje očakávania, a po dokončení sa ho opýtajte, kde váhal a aké informácie mu chýbali.

1. Nájsť produkt cez kategóriu a zvlášť cez vyhľadávanie, vybrať požadované vlastnosti a skontrolovať dostupnosť.
2. Pridať produkt do košíka, zmeniť množstvo, odstrániť položku a vrátiť sa do katalógu.
3. Vytvoriť objednávku na telefóne bez registrácie, zistiť všetky náklady a zmeniť spôsob doručenia.
4. Opraviť zámernú chybu vo formulári a overiť, že ostatné údaje zostali zachované.
5. Uskutočniť úspešnú aj neúspešnú testovaciu platbu, vrátiť sa k objednávke a skontrolovať jej stav.
6. Nájsť postup vrátenia tovaru a kontakt na obchod bez straty košíka.

Zaznamenajte úlohu, zariadenie, miesto, kde sa človek zastavil, jeho slová a výsledok: dokončil samostatne, dokončil s pomocou alebo nedokončil. V zadaní pre vývojára opíšte úkon, očakávaný výsledok a skutočné správanie. Napríklad: „Po zmene mesta formulár ponechá výdajné miesto z predchádzajúceho mesta; tento výber treba vymazať a vyžiadať nový“.

Najprv opravte problémy, ktoré znemožňujú nákup, spôsobujú nesprávnu sumu alebo stratu údajov či vytváranie duplicít. Po oprave zopakujte problematickú úlohu a skontrolujte súvisiace kroky. Zmeny vyhodnocujte pomocou rovnako definovaných ukazovateľov: úspešne odoslané objednávkové formuláre, vytvorené objednávky, potvrdené platby, vybavené objednávky, storná a vrátenia. Kliknutie na tlačidlo platby ešte neznamená dokončený nákup a vybavená objednávka môže byť neskôr vrátená.

Porovnávajte ukazovatele s konkrétnymi chybami a spätnou väzbou. Ak zákazníci po zmenách dokončujú objednávky častejšie, skontrolujte aj zmeny návštevnosti, cien, reklamy a dostupnosti produktov, než výsledok pripíšete samotnému rozhraniu. Na ďalšiu kontrolu si pripravte zoznam nevyriešených prekážok, zodpovedných zamestnancov a jasné podmienky prijatia každej opravy.