Erori în interfața magazinului online: cum verifici și corectezi parcursul până la cumpărare

Pentru ca un cumpărător să finalizeze o comandă, magazinul online trebuie să îl ajute să găsească produsul, să aleagă o variantă disponibilă, să înțeleagă costul total și să primească o confirmare clară a achiziției. Începe verificarea cu aceste sarcini: parcurge pașii de la căutare până la plată pe telefon, introdu intenționat o greșeală în formular și verifică dacă poți continua fără să reintroduci toate datele.

Pașii de mai jos sunt recomandări practice pentru verificarea și îmbunătățirea magazinului. Recomandările privind formularele se bazează pe materialele educaționale ale World Wide Web Consortium (W3C), care explică introducerea accesibilă a datelor, verificarea erorilor și mesajele privind rezultatul. Folosește-le ca reper tehnic pentru dezvoltator și ca bază pentru verificarea propriului site.

1. Verifică dacă un cumpărător găsește produsul fără ajutorul unui manager

Dă-i unei persoane sarcina să găsească un anumit produs, fără să îi spui secțiunea de meniu potrivită. De exemplu, roag-o să găsească pantofi sport negri, într-o anumită mărime și într-un anumit interval de preț. Urmărește ce denumiri de categorii alege, ce introduce în căutare și unde se oprește. Dacă deschide mai multe secțiuni nepotrivite, revizuiește denumirile și structura categoriilor.

Numește categoriile folosind cuvintele cu care cumpărătorii descriu produsele când contactează magazinul. Denumirile interne ale grupelor furnizorilor pot fi neclare pentru vizitatori. În pagina produsului, afișează calea către categoria sa, iar la întoarcerea din pagina produsului păstrează filtrele alese și poziția în listă: cumpărătorul trebuie să poată continua comparația din același loc.

• Căutare. Verifică interogări după denumire, codul produsului, o parte din denumire și variante frecvente de scriere. Dacă magazinul acceptă corectarea greșelilor sau sinonime, testează-le cu interogări reale ale clienților.
• Filtre. Afișează parametrii care ajută la alegerea produselor din categoria respectivă: pentru încălțăminte — mărimea, pentru cablu — tipul conectorului și lungimea. Arată filtrele aplicate și permite eliminarea fiecăruia separat.
• Rezultate inexistente. Păstrează interogarea și explică ce poate fi modificat. Dacă o combinație de filtre nu returnează rezultate, propune eliminarea unei anumite restricții.
• Butoane și pictograme. Adaugă denumiri clare acțiunilor importante: «Căutare», «Coș», «Elimină filtrele». Verifică dacă oamenii înțeleg la ce folosește un buton înainte să îl apese.

Verifică separat meniul pe mobil. Categoria trebuie să se deschidă la atingere, iar subcategoriile să rămână accesibile fără trecerea cursorului. După închiderea meniului, cumpărătorul trebuie să revină la locul din pagină în care l-a deschis.

2. Corelează varianta produsului, stocul, prețul și termenul de expediere

Verifică disponibilitatea pentru o combinație concretă de caracteristici. Dacă modelul se află în catalog, dar culoarea neagră nu este disponibilă în mărimea dorită, mesajul general «În stoc» nu ajută la alegerea corectă. După alegerea unei variante, pagina produsului trebuie să afișeze fotografiile, prețul, cantitatea disponibilă sau statutul și termenul de expediere corespunzătoare.

Roagă dezvoltatorul să verifice disponibilitatea atât la adăugarea în coș, cât și înainte de confirmarea finală. Dacă stocul s-a modificat, site-ul trebuie să explice ce produs nu mai este disponibil și să păstreze restul coșului. Înlocuirea culorii, mărimii sau configurației necesită alegerea explicită a cumpărătorului.

Dacă un manager trebuie să confirme suplimentar disponibilitatea, informează cumpărătorul înainte de finalizarea comenzii. Nu promite expedierea imediată cât timp magazinul verifică încă livrarea produsului. Asigură-te că textele de pe site corespund cu ceea ce pot face efectiv angajații.

3. Afișează costul total înainte de confirmarea finală

Cumpărătorul trebuie să înțeleagă cât costă produsul și ce cheltuieli se adaugă în funcție de livrarea și plata alese. Lângă metoda de livrare, afișează suma cunoscută sau modul în care se calculează. Dacă tariful exact depinde de adresă, greutate sau dimensiuni, explică acest lucru și actualizează calculul după ce primești datele necesare.

Exemplu orientativ de calcul: două produse a câte 480 UAH costă 960 UAH. Cu o livrare de 80 UAH și ambalare de 20 UAH, costul total este de 1.060 UAH. Dacă cumpărătorul plătește 960 UAH magazinului, iar 100 UAH la primire, totalul trebuie să afișeze ambele sume și cui îi sunt plătite. Cifrele sunt prezentate doar pentru a ilustra structura calculului.

Verifică modificarea costului după aplicarea unui cod promoțional, alegerea altui transportator și a metodei de plată. În total, afișează separat produsele, reducerea, livrarea, celelalte cheltuieli convenite și suma totală. Dacă o componentă nu este încă cunoscută, marcheaz-o clar și explică în ce moment cumpărătorul va afla valoarea exactă. Suma totală nu trebuie să pară finală dacă include doar produsele.

Exemplu de diferențiere vizuală a acțiunilor. Contrastul și accesibilitatea butoanelor concrete se verifică separat.

4. Simplifică formularul pentru mobil și fă fiecare câmp clar

Revizuiește fiecare câmp obligatoriu împreună cu managerul care procesează comenzile. Află pentru ce acțiune sunt necesare aceste date. Pentru livrarea la un punct de ridicare nu trebuie cerute strada și apartamentul, iar pentru ridicarea personală nu trebuie solicitată adresa poștală completă. Afișează câmpurile suplimentare după alegerea metodei de primire corespunzătoare.

Ca simplificare practică, permite plasarea unei comenzi fără crearea unui cont. Propune înregistrarea după confirmarea achiziției și explică avantajul, de exemplu accesul la istoricul comenzilor. Verifică și scenariul în care adresa de e-mail se află deja în baza de date: recuperarea parolei nu trebuie să fie singura modalitate de a continua finalizarea comenzii ca vizitator.

În materialul W3C despre etichetele câmpurilor se recomandă etichetarea elementelor formularului și asocierea etichetei cu câmpul corespunzător. Cere-i dezvoltatorului să păstreze vizibile denumirile «Telefon», «Adresă de e-mail», «Oraș» după introducerea datelor. Textul orientativ dintr-un câmp gol dispare, astfel că cumpărătorul poate pierde explicația despre ce completează.

• Tipul câmpului. Setează tipul email pentru adresa de e-mail și tel pentru telefon. Salvează numărul de telefon ca text, astfel încât semnul «+» și formatul numărului să nu fie tratate ca o valoare numerică pentru calcule.
• Completare automată. Cere configurarea atributului autocomplete în funcție de rolul câmpurilor și verifică completarea automată a numelui, telefonului și adresei pe un telefon real.
• Formatul datelor introduse. Permite lipirea unui număr de telefon cu spații sau paranteze și gestionează pe site variantele acceptate. În recomandările privind validarea datelor introduse, W3C sugerează acceptarea diferitelor moduri de a introduce datele, atunci când este posibil.
• Câmpuri obligatorii. Marchează câmpurile necesare prin cuvinte sau explică semnificația marcajului înaintea formularului. Și câmpurile opționale trebuie să poată fi identificate.

Pentru un magazin din Ucraina, structura câmpurilor are legătură și cu cerințele legislației ucrainene. Partea 3 a articolului 6 din Legea Ucrainei «Cu privire la protecția datelor cu caracter personal» nr. 2297-VI impune ca structura și conținutul datelor să fie adecvate, relevante și neexcesive în raport cu scopul prelucrării. În practică, verifică dacă sunt necesare data nașterii, sexul și alte informații care nu sunt cerute pentru comanda concretă.

Punctul 3 al părții 1 a articolului 11 din această lege prevede încheierea și executarea unui act juridic ca unul dintre temeiurile prelucrării datelor. Prin urmare, stabilește temeiul separat pentru fiecare scop; consimțământul nu este singurul temei posibil pentru procesarea unei comenzi. Lângă formular, adaugă un link clar către informațiile despre operatorul de date, scopul prelucrării, destinatari și modalitatea de a trimite solicitări privind datele, ținând cont de drepturile prevăzute la articolul 8. Dacă folosești consimțământul pentru comunicări publicitare, oferă această opțiune separat de plasarea comenzii.

Verifică tastatura, vizibilitatea focalizării și lizibilitatea

Parcurge procesul de comandă fără mouse: folosește Tab pentru a avansa, Shift+Tab pentru a reveni, activează butoanele și deschide listele de la tastatură. Focalizarea, adică marcarea elementului activ în acel moment, trebuie să fie vizibilă. Ordinea de navigare trebuie să corespundă ordinii de citire, iar un meniu sau o fereastră deschisă nu trebuie să lase persoana fără o modalitate de a reveni la cumpărare.

Pe telefon, verifică formularul cu tastatura de pe ecran deschisă: câmpul activ, indicațiile și mesajul de eroare trebuie să rămână vizibile. Mărește pagina și citește denumirile variantelor și condițiile de livrare. Dacă textul este tăiat, butoanele acoperă câmpurile sau elementele apropiate sunt greu de apăsat separat, notează ecranul concret și acțiunea care trebuie corectată.

5. Explică erorile și păstrează datele introduse

Mesajul «Date incorecte» îl obligă pe cumpărător să caute singur cauza. Precizează câmpul care necesită atenție și modul de corectare: «Indică punctul de livrare» sau «Verifică adresa de e-mail: după @ trebuie să urmeze numele domeniului». Asociază textul cu câmpul corespunzător și lasă-l vizibil cât timp persoana corectează datele.

Recomandările W3C privind mesajele din formulare sugerează explicații clare pentru erori, o listă a problemelor înaintea formularului și linkuri către câmpurile corespunzătoare. Pentru un formular cu mai multe erori, cere-i dezvoltatorului să implementeze o astfel de listă, explicații vizibile lângă câmpuri și anunțarea accesibilă a modificărilor pentru persoanele care folosesc un cititor de ecran. O bordură roșie nu este suficientă pentru a explica modul de corectare.

Omite intenționat punctul de livrare, introdu o adresă incorectă și trimite formularul. Asigură-te că site-ul a păstrat produsele, cantitatea, datele de contact și parametrii deja aleși. După corectare, cumpărătorul trebuie să poată continua comanda cu datele existente. Verifică separat revenirea la pasul anterior și recuperarea după o întrerupere temporară a rețelei; păstrarea datelor nu trebuie să le expună unui alt utilizator al unui dispozitiv comun.

Validarea în browser ajută la semnalarea rapidă a unei erori, dar, după cum explică W3C în materialul despre validarea datelor introduse, datele trebuie verificate și pe server. Include ambele niveluri de validare în sarcina pentru dezvoltator. Verifică tot pe server valorile esențiale pentru comandă — prețul, disponibilitatea, cantitatea și aplicarea reducerii — înainte de confirmare.

6. Permite verificarea comenzii și reluarea plății fără dubluri

Înaintea acțiunii finale, afișează detaliile comenzii, cu caracteristicile produselor, cantitatea, suma, datele de contact, adresa și metoda de plată. Oferă posibilitatea de a modifica fiecare secțiune fără a șterge celelalte date. Posibilitatea de a revizui și corecta datele înainte de cumpărare este prevăzută și în recomandările W3C privind prevenirea erorilor.

Numește butonul final în funcție de acțiunea următoare: «Confirmă comanda» dacă site-ul o creează sau «Continuă la plată» dacă deschide pagina de plată. După apăsare, arată că solicitarea este în curs de procesare. Protecția împotriva apăsării repetate trebuie să funcționeze împreună cu protecția de pe server: retrimiterea aceleiași solicitări trebuie să returneze comanda deja creată, nu să creeze una nouă.

Revenirea de pe pagina de plată nu trebuie să determine singură dacă plata a fost efectuată. Cere-i dezvoltatorului să primească și să verifice rezultatul prin mecanismul prevăzut de serviciul de plată. Dacă cumpărătorul a închis fila sau a pierdut conexiunea, site-ul trebuie să restabilească starea comenzii existente. Cât timp rezultatul nu este cunoscut, nu îl îndemna să plătească din nou și nu afirma fără confirmare că banii nu au fost retrași.

Verifică apăsarea de două ori, reîncărcarea paginii de confirmare și revenirea cu butonul browserului. Pentru fiecare verificare, confruntă numărul comenzilor din sistem, numerele lor și încercările de plată. Mesajul vizibil «Succes» trebuie să corespundă rezultatului real; W3C subliniază separat necesitatea de a informa utilizatorul atât despre erori, cât și despre finalizarea cu succes a formularului.

7. Fă condițiile de livrare, retur și contact disponibile înainte de cumpărare

Afișează pe scurt condițiile lângă produs și în timpul finalizării comenzii, iar explicațiile detaliate publică-le pe pagini separate, cu linkuri vizibile. Cumpărătorul trebuie să poată găsi răspunsul înainte de confirmarea comenzii și să revină la ea fără să piardă datele introduse.

• Livrare. Indică metodele disponibile, zona deservită, modul de calcul al costului și termenele de procesare. Diferențiază timpul de care magazinul are nevoie pentru expediere de termenul estimat al transportului.
• Retur. Explică unde trebuie să te contacteze cumpărătorul, ce informații să ofere pentru identificarea comenzii, cum să stabilească împreună cu magazinul detaliile expedierii și cum să primească un răspuns. Verifică termenii și excepțiile pentru produsele tale; nu extinde restricțiile aplicabile unei singure categorii la toate achizițiile.
• Contacte. Identifică vânzătorul, afișează canalele de comunicare și programul în care răspunde. Verifică dacă linkurile către telefon și e-mail funcționează pe mobil.
• Ridicare personală. Dacă este disponibilă, indică adresa, programul și momentul în care cumpărătorul poate veni: imediat după plasarea comenzii sau după notificarea că aceasta este gata.

Roagă managerul să verifice aceste pagini împreună cu procedurile reale de lucru. Dacă site-ul promite un răspuns într-un anumit termen, angajatul trebuie să știe cine preia solicitările și ce trebuie făcut în lipsa acelei persoane. Actualizează atât instrucțiunile pentru cumpărător, cât și procesul de gestionare a solicitărilor.

Sincronizarea Torgsoft cu magazinul online: verificarea stocurilor și a prețurilor

Dacă evidența principală este ținută în Torgsoft, funcția suplimentară cu plată «Sincronizarea cu magazinul online» permite transferul datelor despre produse, disponibilitate, caracteristici și descrieri, precum și primirea comenzilor. Conform comparației oficiale a licențelor, sincronizarea necesită o licență cu funcționalitate completă și opțiunea corespunzătoare, cu plată. Integrarea din partea site-ului propriu necesită implicarea dezvoltatorului acestuia, după cum se precizează în documentația Torgsoft.

Înainte de lansare, stabiliți centrele de evidență ale căror stocuri se transmit pe site, sursa prețurilor pentru facturi, regulile de rezervare și lista caracteristicilor. Filtrul «Sincronizează doar produsele aflate în stoc» presupune ștergerea de pe site a produselor cu o cantitate egală cu zero sau negativă; verificați separat efectul asupra paginilor produselor și linkurilor. Pentru modul automat descris în instrucțiunile de configurare a schimbului de date, intervalul trebuie setat la cel puțin 10 minute, ținând cont și de celelalte obiecte sincronizate, iar programul Torgsoft trebuie să rămână deschis pe computerul desemnat, sub utilizatorul indicat. Acest schimb de date nu înseamnă că stocul de pe site se actualizează instantaneu.

Pentru verificare, efectuează o vânzare de test, așteaptă sincronizarea și controlează pe site o anumită variantă a produsului. Apoi plasează o comandă de test și verifică în sistem importul acesteia, cantitatea, prețul, rezervarea și starea plății. Consultă jurnalul de sincronizare pentru erori; potrivit documentației, la importul automat, o eroare la crearea plății poate lăsa factura neplătită, cu înregistrarea problemei în jurnalul de erori. Sincronizarea transferă datele, însă etichetele câmpurilor, navigarea, mesajele și protecția împotriva comenzilor duplicate trebuie configurate și verificate separat pe site.

8. Testează magazinul cu cumpărători și evaluează comenzile finalizate

Invită persoane care cumpără produse din categoria ta și roagă-le să îndeplinească sarcini fără să le explici unde se află butoanele. Pentru plată, folosește modul de test convenit cu dezvoltatorul. Roagă participanții să spună ce așteaptă să se întâmple, iar după finalizare întreabă-i unde au avut îndoieli și ce informații le-au lipsit.

1. Găsește un produs printr-o categorie și apoi prin căutare, alege caracteristicile necesare și verifică disponibilitatea.
2. Adaugă produsul în coș, modifică cantitatea, elimină un produs și revino la catalog.
3. Plasează o comandă pe telefon fără înregistrare, stabilește toate costurile și schimbă metoda de livrare.
4. Corectează o greșeală introdusă intenționat în formular și verifică dacă celelalte date s-au păstrat.
5. Parcurge scenariile de plată reușită și nereușită în modul de test, revino la comandă și verifică-i statutul.
6. Găsește procedura de retur și datele de contact ale magazinului fără să pierzi coșul.

Notează sarcina, dispozitivul, locul în care persoana s-a oprit, ce a spus și rezultatul: a finalizat singură, a finalizat cu ajutor sau nu a finalizat. În cererea către dezvoltator descrie acțiunea, rezultatul așteptat și comportamentul observat. De exemplu: «După schimbarea orașului, formularul păstrează punctul de livrare din orașul anterior; selecția respectivă trebuie ștearsă, iar cumpărătorului trebuie să i se ceară să aleagă un punct nou».

Corectează mai întâi problemele care împiedică achiziția, duc la un total incorect, pierd date sau creează comenzi duplicate. După corectare, repetă sarcina care a evidențiat problema și verifică pașii învecinați. Evaluează modificările folosind indicatori definiți consecvent: formulare trimise cu succes, comenzi create, plăți confirmate, comenzi onorate, anulări și retururi. Un clic pe butonul de plată nu înseamnă că achiziția a fost finalizată, iar o comandă onorată poate fi returnată ulterior.

Corelează indicatorii cu problemele concrete și feedbackul primit. Dacă după modificări cumpărătorii finalizează mai des comenzile, verifică și schimbările de trafic, prețuri, publicitate și disponibilitate înainte să atribui rezultatul exclusiv interfeței. Pentru următoarea verificare, păstrează o listă cu obstacolele nerezolvate, angajații responsabili și condiția clară care permite acceptarea fiecărei corectări.