Vreau un audit gratuit
  • Studiu de caz
  • Audit UX/UI e-commerce
  • Octombrie 2026

Happy Art de la prima impresie la achiziția produsului

Studiul de caz Happy Art este auditul UX/UI al magazinului online happyart.ro, parcurs ca un client, pe desktop și pe mobil, de la homepage până la formularul de retur. Am găsit un magazin cu o bază bună: catalog bogat, fotografie reală de produs și un checkout bine structurat. Din 62 de constatări măsurate în pagină, șase au cel mai mare impact asupra comenzilor, iar toate se rezolvă fără redesign, într-un plan în 3 etape.

01 Traseu auditat

Șase locuri unde clientul are nevoie de mai mult sprijin

Cum citești harta: opririle urmează pașii clientului, de la homepage la retur. Cifra din cerc arată în ce ordine recomandăm intervențiile: 1 e prima.

  1. 5Oprirea 1HomepageMesajul din banner nu poate fi citit ca text
  2. 4Oprirea 2CategorieTitlurile ascund ce deosebește produsele
  3. 2Oprirea 3ProdusTransportul și returul, aduse lângă buton
  4. 3Oprirea 4MobilPrețul și butonul pot urca în primul ecran
  5. 1Oprirea 5CheckoutToate erorile, arătate deodată
  6. 6Oprirea 6ReturFormularul de retur, readus online

02 Metodă

Am verificat fiecare detaliu direct pe site

Nu ne-am bazat pe impresii sau pe capturi de ecran. Am măsurat direct pe site cât de mari sunt textele și butoanele, cât de ușor se citesc și în ce ordine apar informațiile. Am parcurs magazinul ca un client real, fără să plasăm vreo comandă.

Persona de test: IoanaPărinte care cumpără de pe telefon, cu timp puțin. Fiecare pagină a fost judecată prin ochii ei și prin singura întrebare pe care o are în minte:Cât costă în total și pot returna dacă nu se potrivește?

  1. Parcurs complet

    Homepage, meniu, categorie, căutare, produs, adăugare în coș, coș, checkout, livrare, retur cu formularul de retur și contact.

  2. Două dispozitive

    Desktop 1440×900 și mobil 375×812, cu User-Agent de iPhone real, pe același HTML responsive.

  3. Aceeași structură pe fiecare pagină

    Structura logică, textul inclus în imagini, meniul, breadcrumb-urile, regulile UX și ce funcționează bine.

  4. Notare cu pondere fixă

    Patru categorii, fiecare notată ca medie a două evaluări independente: traseul de descoperire și suport, respectiv traseul de cumpărare.

  5. Prioritizare și plan

    Constatările primesc severitate (critic, major, minor), un fix concret și un loc într-un plan pe 3 etape.

03 Nota

4,3 din 10: o bază solidă, cu loc clar de creștere

Nota generală ponderată: 4,325. În grafic, lățimea fiecărei coloane e ponderea categoriei, iar înălțimea e nota ei. Suprafața colorată, adunată, e exact nota generală.

Calculul notei, pe categorii
Calculul notei, pe categorii
CategoriePondereNotăContribuțieDe ce
Design vizual20%4,500,900Paletă coerentă, aplicată consecvent; textul din bannere stă în imagini, iar paginile folosesc 14–17 niveluri tipografice.
UX și navigare30%4,751,425Lipsește o intrare directă pe categorii, titlurile din listing sunt trunchiate, transportul și returul nu apar lângă buton.
Accesibilitate și mobil25%3,750,9375Aici e cel mai mult de câștigat: ținte sub 44 px, contraste de 1,38–3,58:1, input-uri de 13 px, oferta sub primul ecran pe mobil.
Formulare și conversie25%4,251,0625Checkout pe o pagină, cu doar 5 câmpuri; validarea poate fi completată, iar formularul de retur trebuie republicat.
Nota generală100%4,325Rotunjit: 4,3 din 10.

Cum se citește. Platforma oferă un coș și un checkout disciplinate ca structură, iar asta e partea cea mai greu de construit. Nota vine din stratul de conținut adăugat în timp: bannere cu text în imagini, șase carusele în locul unui grid de categorii, validare incompletă în checkout. Toate se corectează în șablon și în text, fără să schimbi platforma. Nota nu măsoară calitatea magazinului sau a produselor, ci cât de bine îl sprijină acum interfața pe client.

04 Punctul de plecare

De la ce am pornit: ce funcționează deja bine

Înainte de orice recomandare, am notat ce face magazinul bine. E baza pe care se sprijină tot planul, nu ceva de înlocuit.

  • Paletă de brand coerentă, aplicată consecvent pe butoane, reduceri și footer.
  • Butonul „Adaugă în coș” are contrast de 11,21:1.
  • Checkout pe o singură pagină, cu doar 5 câmpuri de tastat.
  • Header redus în coș și checkout, fără distrageri din navigare.
  • Adăugare în coș fără redirect, cu coș actualizat fără reîncărcare; datele rămân după o eroare.
  • Pagina „fără rezultate” e mai bine gândită decât la mulți competitori.

05 Prioritizarea noastră – recomandare

Cele 6 locuri cu cel mai mare impact asupra comenzilor

Din cele 62 de constatări, acestea șase contează cel mai mult pentru comenzi. Nu țin de lipsă de grijă: s-au adunat în timp, pe măsură ce magazinul a crescut. Le găsești în ordinea în care le întâlnește clientul. La fiecare poți comuta între „Înainte”, captura reală, și „După”, schița soluției propuse.

Ordinea în plan: 5 din 6

Prima impresie: un banner frumos, pe care browserul nu îl poate citi

Prin ochii Ioanei

Ioana caută un cadou pentru fiica ei de 7 ani. Prima dată vede un banner frumos cu Frozen, dar pe telefon textul și butonul din el se micșorează până nu se mai pot citi. Mai jos o așteaptă șase carusele la rând, toate la fel de importante, și nicio scurtătură spre ce caută: pictură, goblen, machete.

Pe scurtDe 15 ori mai mic decât un buton ușor de apăsat cu degetul: așa ajunge butonul din banner pe telefon.

Hero actual pe desktop: titlul «Pictură cu nisip colorat», sloganul și butonul sunt desenate în imagine Același hero pe mobil, la lățimea reală de 375 px: textul și butonul devin aproape ilizibile
ÎnainteSus desktop, jos mobil la 375 px reali. Pe mobil: titlu ~14 px, slogan ~8 px, buton ~3 px echivalent.
DupăText HTML peste imagine, scrim de 0,55, buton real de 44 px.

De ce contează

Clienții caută de obicei după tipul de activitate, nu după campanie. Când primul ecran vorbește despre o singură categorie din zece, celelalte nouă rămân în meniu, iar pe mobil oferta din banner nu se poate citi.

Ce recomandăm

  • Hero cu text real (HTML), scrim de 0,55 și imagine dedicată pentru mobil.
  • Grid de categorii pe poziția 3, înaintea bannerului de campanie.
  • Cele trei carusele de categorie devin un singur bloc cu tab-uri: aceeași informație, de trei ori mai puțin scroll.
Ordinea în plan: 4 din 6

În listing, partea care deosebește produsele rămâne ascunsă

Prin ochii Ioanei

În „Pictură pe numere”, Ioana vrea să compare câteva modele. Toate cardurile încep la fel, „Kit pictura pe numere, cu sasiu…”, iar titlul se oprește exact înainte de partea care contează: dimensiunea, culorile, nivelul. Ca să afle diferențele, deschide produsele unul câte unul.

Pe scurtO treime din numele produsului se vede pe card. Restul, exact partea care deosebește modelele, e tăiat.

Card de produs cu titlul tăiat: «Kit pictura pe numere, cu sasiu, Tr…»
ÎnainteSe văd 32 / 89 de caractere, toate din prefixul comun.
DupăNumele modelului pe 2 rânduri, apoi linia de atribute.

De ce contează

Ca să afle dimensiunea sau nivelul, clientul deschide fiecare produs și revine. Comparația, pasul cel mai important într-un catalog bogat, devine un drum cu multe clicuri.

Ce recomandăm

  • Titlu pe 2 rânduri, fără prefixul de categorie: cardul arată numele modelului.
  • O linie de atribute sub titlu: dimensiune · număr de culori · nivel.
  • Filtre noi pentru preț și dificultate, cu etichete clare în loc de „Ea” și „El”.
Ordinea în plan: 2 din 6

Pe produs, transportul și returul merită aduse lângă buton

Prin ochii Ioanei

Pe pagina de produs, Ioana găsește prețul și butonul, dar nu răspunsul la întrebarea ei: cât costă în total și dacă poate returna. Transportul apare abia în coș, iar returul, la capătul paginii, în footer.

Pe scurt15 lei costă transportul, iar clientul află asta abia când ajunge în coș.

Zona de cumpărare: preț de 18 px, stoc în roșu, buton Adaugă în coș, fără transport și fără retur
ÎnainteInformația există pe site, dar nu apare în zona în care clientul decide.
DupăPreț de 28 px/800, costul total și returul înainte de buton.

De ce contează

Costurile suplimentare neanunțate sunt prima cauză de abandon documentată: 39% dintre abandonuri, după Baymard. Iar informația pusă doar în elemente generale ale site-ului este ratată de 27% dintre utilizatori.

Ce recomandăm

  • Bloc de preț de 28 px/800, cu „Economisești 50,00 Lei” și „Preț final cu TVA inclus”.
  • Rând de transport între stoc și buton: „Transport 15,00 Lei · GRATUIT de la 200 Lei”.
  • Mini-listă sub buton: retur în 14 zile, modalități de plată, curieri și termen. Un singur rând de stoc, în verde.
Ordinea în plan: 3 din 6

Pe mobil, prețul și butonul pot urca în primul ecran

Prin ochii Ioanei

Pe telefon, primul ecran e ocupat de numele produsului, scris cu majuscule pe șapte rânduri. Ca să vadă cât costă, Ioana trebuie să deruleze, iar când merge mai departe, butonul de cumpărare nu o urmează.

Pe scurtO derulare de ecran îi trebuie clientului pe telefon ca să afle cât costă produsul.

ÎnainteSchemă la scară, după măsurători. Linia roșie e marginea primului ecran.
DupăValorile „recomandat” sunt estimate din înălțimile propuse în raport.

De ce contează

Pe telefon, clientul vede întâi titlul, apoi oferta. Răspunsul la „cât costă?” vine abia după prima derulare, iar publicul principal cumpără chiar de pe mobil.

Ce recomandăm

  • Titlu de 20 px, cu majusculă doar la început, maximum 3 rânduri.
  • Galerie de 343 px imediat sub titlu, apoi blocul de preț, stoc și transport.
  • Bară fixă de cumpărare de 64 px, care apare când butonul iese din ecran.
Ordinea în plan: 1 din 6

La plată, erorile pot fi arătate toate deodată

Prin ochii Ioanei

Ioana a decis să cumpere. Completează formularul, apasă „Trimite” și primește trei erori. Le corectează, retrimite și abia acum află de email și adresă. A treia oară observă bifa de acord, înroșită mai jos, fără niciun mesaj.

Pe scurt3 încercări îi trebuie clientului ca să trimită comanda, pentru că erorile îi sunt arătate pe rând.

Formular de checkout la trimitere goală: erori doar la nume, prenume și telefon, emailul invalid primește mesajul «este obligatorie» Bifa de acord are doar eticheta înroșită, fără mesaj
ÎnainteErori doar la unele câmpuri; acordul e semnalat numai prin culoarea etichetei.
DupăToate erorile la prima trimitere, cu linkuri spre câmpuri și focus pe primul invalid.

De ce contează

Clientul a decis deja să cumpere. Când erorile apar pe rând, corectează trei câmpuri, retrimite și abia atunci află de email, adresă sau acord. E locul cel mai valoros de reparat, pentru că privește comenzi aproape finalizate.

Ce recomandăm

  • Validare completă la trimitere, inclusiv email, adresă și acord.
  • Rezumat de erori cu linkuri-ancoră, apoi focus pe primul câmp invalid.
  • Mesaje adaptive pe câmp, cu iconiță, bordură de 2 px și contrast peste 5:1.
Ordinea în plan: 6 din 6

Formularul de retur trebuie readus online

Prin ochii Ioanei

Înainte să comande un cadou, Ioana vrea să știe că îl poate returna dacă e dublat. Linkul spre politica de retur e doar în footer, iar formularul de retur, listat pe site, răspunde cu o pagină de eroare. Rămâne doar varianta unui telefon sau a unui email.

Pe scurtNicio cale online de a cere returul: formularul de retur afișează „pagina nu există”.

Pagina formularului de retur afișează «404 Page Not Found»
ÎnaintePagina listată în sitemap răspunde cu 404.
DupăO coloană, câmpuri de 48 px, link din produs, footer și Contact.

De ce contează

Cererea de retur e cel mai sensibil moment de încredere după plată, iar clientul care ezită înainte să cumpere caută exact această promisiune. Persona Ioana se întreabă aici: „pot să returnez dacă e un cadou dublat?”.

Ce recomandăm

  • Publicarea paginii „Formular de retur”, pe o coloană, cu câmpuri de 48 px și butonul „Trimite cererea de retur”.
  • Linkuri către formular din footer, meniul mobil, pagina de retur, Contact și produs.
  • Opțiunea formularului standard de retragere, ca PDF, sub buton.

06 Planul de modernizare

De la fix-uri critice la rafinare, în 3 trepte

Ordinea ține cont de impact și de efort: ce se poate livra repede și deblochează conversia vine primul.

  1. Începe aiciEtapa 1

    Fix-uri critice

    Impact mare, efort mic–mediu

    Primul pasValidarea completă din checkoutAjută clienții care au decis deja să cumpere și se poate face înaintea oricărei alte etape.
    • Transport și retur în zona de cumpărare
    • Ierarhia prețului și stoc fără contradicții
    • Formular de retur publicat și linkuit
    • Titluri de card pe 2 rânduri, cu atribute
    • Hero cu text HTML
    • Informații unificate: program, prag de transport, termene
  2. Etapa 2

    Modernizare structurală

    Impact mare, efort mediu–mare

    • Homepage reordonat, cu grid de categorii
    • Meniu pe un singur rând și grup „Ajutor”
    • Primul ecran de produs pe mobil și bară fixă de cumpărare
    • Checkout cu pași, livrare ca variante cu preț și cont opțional
    • Filtre de preț și dificultate
    • Căutare cu autocomplete pe categorii
  3. Etapa 3

    Rafinare

    Impact mediu, efort mic

    • Sistem de ierarhie: tipografie, spațiere pe grila de 4 px, roluri cromatice
    • Contraste secundare și paginare cu ținte de 44 px
    • Bannere mici ca carduri HTML
    • Footer cu coloana „Ajutor” completă
    • Fără distrageri în coș și checkout

07 Livrabilul

Cum arată raportul pe care îl primește clientul

Un raport de 97 de pagini, cu capturi reale, măsurători și soluții cu valori exacte (dimensiuni, culori, texte), gata de dat dezvoltatorului.

Pagina de sinteză executivă a raportului, cu nota generală 4,3 și cele patru categorii Pagină din raport despre titlurile trunchiate, cu captura reală, cauza și soluția Pagină din raport despre validarea formularului de checkout, cu soluție pas cu pas
  1. Sinteza executivă. Nota, ponderile și verdictul, pe o singură pagină.
  2. Captură, cauză, soluție. Fiecare constatare vine cu dovada reală și corecția exactă.
  3. Soluția pas cu pas. Ordinea comportamentului, textele exacte și stilurile.

08 Despre rezultate

Ce livrăm și ce rămâne în mâna clientului

Un audit este un diagnostic măsurat și un plan prioritizat. Ce se întâmplă după depinde de ce, când și cum implementează clientul.

Livrăm

Diagnostic și plan

Constatări verificate în pagină, cu cauză, principiu UX și soluție exactă, ordonate după severitate și efort.

Clientul decide

Implementare și măsurare

Ordinea implementării, calendarul și măsurarea efectului asupra vânzărilor rămân în responsabilitatea clientului.

Cum privim impactul

Repere, nu promisiuni

Nu promitem creșteri de vânzări. Recomandările pornesc de la ce se știe despre felul în care cumpără oamenii online: de exemplu, mulți renunță la coș când află abia la final cât costă transportul. Efectul real asupra vânzărilor se vede doar după implementare, la fiecare magazin în parte.

09 Întrebări frecvente

Ce ne întreabă cine citește studiul

Ce a primit Happy Art în urma auditului?

Un raport de 97 de pagini cu 62 de constatări numerotate. Fiecare are captura reală, cauza, principiul UX încălcat și soluția cu valori exacte: dimensiuni, culori și texte. Raportul se încheie cu nota generală pe formula fixă de ponderare și cu un plan de modernizare în trei etape.

Cum s-a calculat nota de 4,3 din 10?

Cu ponderarea fixă pe care o folosim la toate auditurile: Design vizual 20%, UX și navigare 30%, Accesibilitate și mobil 25%, Formulare și conversie 25%. Pentru Happy Art: 4,50×0,20 + 4,75×0,30 + 3,75×0,25 + 4,25×0,25 = 4,325. Fiecare categorie este media a două evaluări independente: traseul de descoperire și suport, respectiv traseul de cumpărare.

De unde vin cifrele din studiul de caz?

Toate valorile, de la dimensiuni și contraste la ținte tactile și poziția blocurilor în pagină, au fost extrase programatic din pagină. Măsurătorile s-au făcut pe desktop la 1440×900 și pe mobil la 375×812, cu User-Agent de iPhone real. Nu s-a plasat nicio comandă.

Înseamnă nota 4,3 că site-ul e unul prost?

Nu. Nota măsoară, pe o formulă fixă, cât de bine sprijină interfața clientul în acest moment, nu calitatea magazinului sau a produselor. Happy Art are o platformă solidă și un catalog bogat; nota vine din stratul de conținut adăugat în timp, care se corectează fără redesign.

Trebuia refăcut site-ul de la zero?

Nu. Platforma oferă deja un coș și un checkout disciplinate ca structură. Problemele vin din stratul de conținut adăugat peste ea, așa că recomandările sunt corecții de șablon și de text, nu un redesign.

Care este prima modificare recomandată?

Validarea completă din checkout: toate câmpurile greșite semnalate la prima trimitere, un rezumat de erori cu linkuri și focus pe primul câmp invalid. Modificarea privește exact clienții care au decis deja să plătească și se poate livra înaintea oricărei alte etape.

Pot primi un audit ca acesta pentru magazinul meu?

Da. Poți începe cu Quick Scan-ul gratuit, care îți arată primele probleme în maximum 24 de ore lucrătoare. Auditul complet acoperă homepage, categorie, produs, coș și checkout, pe desktop și pe mobil.

Pasul următor

Vrei să știi ce să îmbunătățești întâi în magazinul tău?

Îți spunem exact ce să modifici, în ce ordine și de ce, pornind de la ce funcționează deja. Fără promisiuni de vânzări, cu dovezi măsurate în pagină. Cum arată concret un asemenea plan vezi în exemplul de raport.

Vreau un audit gratuit Hai să vorbim

Prioritizarea noastră – recomandare