fotografie reală
★★★★★
✓ Achiziție verificată
12 martie 2026
Machetă DIY, kit RolifeStudiu de caz · Audit UX/UI complet · Septembrie 2026
Happy Art, înainte și după
Happy Art (happyart.ro) e un magazin online de kituri creative și de hobby. Auditul a arătat că site-ul are deja tot ce i-ar crește conversia: vârsta produselor, termenul de livrare, recenzii, datele firmei, logo-urile de plată. Doar că nu le arată unde se ia decizia. Mai jos, 23 de comparații din raport.
4,5/10
- Design vizual 4,9
- UX & navigare 4,8
- Accesibilitate 4,2
- Conversie 4,0
HEROCRITIC1,87:1 contrastul butonului desenat în JPEG
ÎNAINTEDUPĂ
Trage de mâner. Stânga: hero-ul real, cu tot textul desenat în imagine. Dreapta: aceeași imagine, cu titlul și butoanele scrise ca text real, peste un fundal întunecat, și două butoane separate pentru copii și pentru adulți.
01
Homepage
Singura pagină care trebuie să servească ambele publicuri. Pică testul de 3 secunde pe desktop și pe mobil.
ORDINEA PAGINIIMAJOR
Dovada socială era îngropată la 74,3% din pagină
ÎNAINTE · 6.265px
Header + meniu 10 categorii
Hero (imagine cu text)
Beneficii + 3 bannere
6 carusele · 81 produse
Părerile clienților74,3%
Întrebări frecvente
Text SEO
Footer · logo-uri de plată96,2%
DUPĂ · ~3.800px
Header, meniu, hero, Alege după vârstă
Bandă de încredere~12%
Cele mai cumpărate · 8
Ce spun clienții~40%
Noutăți · 8
Pentru adulți: machete DIY
Întrebări frecvente
Despre Happy Art + footer
Schemă la scară, după pozițiile măsurate. Încrederea urcă de la 96,2% la ~12%, testimonialele de la 74,3% la ~40%, iar pagina scade de la 6.265px la ~3.800px.
CARUSELECRITIC
81 de produse în carusele, 73% din ele ascunse
ÎNAINTE
DUPĂ
De la 81 de produse la 20, fără carusele. Două grile statice de 8, primul card dublu. Nu se pierde nimic din catalog, doar obligația de a-l parcurge integral.
RECENZIICRITIC5/5 recenzii „Acum 5 ani”
Recenziile vechi și imaginile goale confirmă suspiciunea „mai e activ magazinul?”
ÎNAINTE
Secțiunea reală de recenzii: imaginile nu se încarcă și lasă ~1000×250px de alb.
DUPĂ
Structura propusă. Conținutul vine din platformă: auditul nu propune cifre sau recenzii.
Doar recenzii din ultimele 12 luni, imagini care se încarcă, dată reală sub fiecare recenzie. Fără recenzii mai noi de 12 luni, blocul nu se afișează deloc.
MENIUMAJOR10 categorii de nivel 1, pe două rânduri
Meniul organizat pe tehnică, nu pe ce caută cumpărătorul
ÎNAINTE
DUPĂ
02
Pagina de produs
Locul unde se ia decizia. Azi fără vârstă, fără încredere, fără acțiune în primul ecran pe mobil.
MOBILCRITIC1.189px până la butonul de cumpărare
Pe mobil, nicio acțiune în primul ecran
ÎNAINTEDUPĂ
Bară de cumpărare fixă jos, de 68px, care apare când butonul iese din ecran: miniatură, preț, buton de 176×52px.
ÎNCREDERECRITIC0 semnale de încredere lângă buton
Vârsta și garanțiile, mutate înainte de decizie
ÎNAINTE
DUPĂ · adăugirile punctat
PREȚCRITIC1,98:1 prețul vechi pe alb5,33:1 după
Prețul era al treilea cel mai greu element din zona de decizie
ÎNAINTE · la scară reală
Preț 18px normal, „IN STOC” 18px bold în roșu: ochiul merge la stoc.
DUPĂ · la scară reală
Preț 32px bold #CB0000, economia scrisă, stocul în verde: roșul înseamnă acțiune, nu disponibilitate.
03
Categorie
Cel mai bine construit ecran al site-ului. Problemele sunt în card și în filtre.
CARD DE PRODUSCRITIC26,4% din titlu vizibil
Cardul de produs, de la titlu tăiat la decizie completă
ÎNAINTE
Titlu tăiat la 175px, titlu și preț identice ca tipografie.
DUPĂ
Titlu pe 2 rânduri după formula din raport, vârstă, cod, preț 22px bold.
FILTREMAJOR13×13px singurul filtru de vârstă
Criteriul #1 al părintelui, cel mai mic element din pagină
ÎNAINTE · scară reală
DUPĂ · scară reală
Rânduri de 44px, checkbox de 20px, contor #5F5F5F (7,00:1). Vârsta urcă pe prima poziție, cu benzi reale: 3-6 · 7-10 · 11-14 · 14+.
BADGE-URIMINOR1,99:1 badge-ul „NOU”
Două badge-uri în același colț
ÎNAINTE
DUPĂ
Un singur badge colorat per card. „NOU” coboară la 56px, pastilă #1A1A1A cu text alb: 17,40:1.
04
Coș & checkout
Arhitectura e peste media pieței: o pagină, comandă ca oaspete, ramburs. Lipsesc încrederea, ierarhia și ergonomia.
BUTOANECRITIC+14,3% acțiunea secundară, mai lată
În coș, „Continuă cumpărăturile” bătea „Finalizează comanda”
ÎNAINTE · scară reală
DUPĂ · scară reală
#CB0000 devine singura culoare de acțiune. Primarul pe rând propriu, 48px, cu totalul în buton; secundarul devine link.
FORMULARCRITIC0/20 câmpuri care se completează automat
Checkout tastat de mână, pe câmpuri de 30px
ÎNAINTE · scară reală
DUPĂ · scară reală
Completare automată, câmpuri obligatorii marcate corect și etichete legate de câmp, pe toate cele 20 de câmpuri. Câmpuri de 48px cu text de 16px, butoane radio de 24px în rânduri de 48px.
PROGRESMAJOR0 indicatori de progres
Un formular de 2.810px fără lungime vizibilă
ÎNAINTE
DUPĂ
Indicator pe 4 pași (Coș · Date livrare · Plată · Confirmare) și bandă spre transportul gratuit.
ȘTERGEREMAJOR16px înălțimea lui „ȘTERGE”, fără posibilitate de anulare
Ștergerea accidentală, ireversibilă
ÎNAINTE · scară reală
DUPĂ · scară reală
Iconiță de 20px în zonă de 44×44px, cu „Produs șters. Anulează” timp de 6 secunde.
05
Sistem vizual
Cauza-rădăcină: nicio valoare de design nu e sistem. Fiecare fix punctual reintroduce inconsistența.
CULOAREMAJOR0,00% nivel intermediar
Culoarea avea două stări: alb sau accent saturat
ÎNAINTE · distribuția măsurată pe homepage
DUPĂ · paleta pe 3 niveluri, țintă 60 / 30 / 10
Dacă e roșu, se poate da click pe el sau e un preț. Dacă e coral, nu. Paleta e derivată integral din culorile existente.
TIPOGRAFIEMAJOR16 niveluri, bază 13px
Tipografie fără scară
ÎNAINTE · mărimile măsurate
0,4px între H1 și H2; patru mărimi în 1,8px.
DUPĂ · scară proporțională, bază 16px
SPAȚIERECRITIC0px pe toate cele 11 tranziții
Secțiuni lipite, un singur fundal
ÎNAINTE
DUPĂ
80px între secțiuni pe desktop, 48px pe mobil, cu alternanță #FFFFFF / #FAF7F5.
TITLURICRITIC5 H1 pe homepage
Primul H1 apărea după 44 de H2 și 3.054px
ÎNAINTE
(niciun H1 în primul ecran) <h2> × 44 nume de produs <p> PROMOTII ← titlu real <h1> GOBLENURI CU DIAMANTE <h1> PUZZLE 3D <h1> MACHETE CASUTE <h1> PARERILE CLIENTILOR <h1> MAGAZIN CREATIV…
DUPĂ
<h1> Cadouri creative care țin copilul departe de ecran <h2> Alege după vârsta copilului <h3> × 4 benzi de vârstă <h2> Cele mai cumpărate <h3> × 8 nume de produs <h2> Ce spun clienții un singur H1 · H1 → H2 → H3
06
Accesibilitate
Două eșecuri WCAG AA categorice, pe un site citit mai ales pe mobil.
ȚINTE TACTILECRITIC285 / 367 ținte sub 44×44px pe mobil
Țintele tactile, la scară reală, față de pragul de 44px
ÎNAINTE · măsurat · conturul punctat = 44×44px
DUPĂ · 48px la implementare
FOCUSCRITIC0 indicatori de focus
Navigarea cu tastatura, fără să vezi unde ești
ÎNAINTE · al doilea element are focus
DUPĂ · același focus, vizibil
ZOOMCRITIC6/6 pagini cu zoom blocat
O linie de template închide un eșec WCAG AA
ÎNAINTE
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
user-scalable=no">
DUPĂ
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
viewport-fit=cover">
CONTRASTCRITIC8 perechi text/fundal sub prag
Contrastul, corectat punctual pe valori din aceeași paletă
| Element | Înainte | După |
|---|---|---|
| Badge „NOU” | NOU1,99:1 | NOU17,40:1 |
| Preț vechi tăiat | ||
| Telefon, bara de sus | 07582494992,98:1 | 075824949910,10:1 |
| Subtext beneficii | în 24/48 de ore.3,53:1 | în 24/48 de ore.7,33:1 |
| Contor de fațetă | (16)3,54:1 | (16)7,33:1 |
| Data recenziei | Acum 5 ani3,54:1 | 12 martie 20267,33:1 |
| „Informații conformitate” | Informații conformitate3,58:1 | Informații conformitate5,93:1 |
| „Achiziție verificată” | Achizitie verificata3,78:1 | ✓ Achiziție verificată5,37:1 |
Paleta nu se reconstruiește, se corectează punctual. Textul de bază are deja 12,63:1.
Planul de modernizare
Fără rebranding, fără altă platformă
- Etapa 1 · 1–2 săptămâni
Fix-uri critice
Zoom și focus, titlurile cardurilor, blocul de încredere, completarea automată în checkout, ținte de 44px, contrastele corectate.
- Etapa 2 · 3–6 săptămâni
Structural
Hero cu text real, bară de cumpărare fixă pe mobil, homepage în 12 blocuri, grile în loc de carusele, meniu nou, sisteme unitare de tipografie, spațiere și culoare.
- Etapa 3 · 1–2 săptămâni
Rafinare
„Despre noi”, stări de hover reale, o singură familie de iconițe, SEO de bază.
Ce merită păstrat, din raport
- Fotografie de produs reală
- Descrieri cu date verificabile
- Contrast 12,63:1 pe text
- Alt text pe 94/96 imagini
- Checkout pe o singură pagină, ca oaspete
- Pagina de categorie
- Date structurate valide
Ce a primit Happy Art în urma auditului?
Un raport de 44 de pagini: nota generală pe formula fixă de ponderare, persona și publicul țintă, findingurile măsurate pe fiecare ecran, fiecare cu soluția specificată complet, un sistem de ierarhie propus și un plan de modernizare în trei etape.
Cum s-a calculat nota de 4,5 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,9×0,20 + 4,8×0,30 + 4,2×0,25 + 4,0×0,25 = 4,47.
De unde vin cifrele din studiul de caz?
Toate sunt măsurate programatic în browser, pe desktop la 1440×900 și pe mobil la 375×812 în condițiile unui iPhone real. Nota consolidată vine din trei treceri de audit independente pe același site.
Trebuia refăcut site-ul de la zero?
Nu. Diagnosticul a fost că materia primă e bună: fotografie reală, descrieri cu substanță, un checkout peste media pieței. Lipsea sistemul. Tipografia, spațierea și paleta se definesc o singură dată, în CSS, peste tema existentă de pe Gomag.
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.