UX / conversie
Majoritatea vizitatorilor unui site de firmă din România vin de pe telefon, nu de pe desktop, și decid în câteva secunde dacă rămân sau plecă. Principiile de design mobil-first care contează efectiv pentru conversie, plus o listă rapidă de verificare.
Vali Neagu
Fondator & Design Lead · FirmaWeb
25 iulie 2026 · 11 min citire
Mulți proprietari de firme văd site-ul propriu în etapa de design pe un monitor mare, de birou, în condiții perfecte — ecran calibrat, lumină controlată, mouse precis. Realitatea e diferită: majoritatea vizitatorilor unei firme din România caută soluția pe telefon, adesea afară, cu semnal mobil variabil, decid rapid dacă pagina merită atenția lor și continuă sau abandonează în câteva secunde.
Diferența dintre a proiecta „pentru desktop, adaptat la mobil” și a proiecta „mobil-first, extins la desktop” se simte direct în rata de conversie. Cinci principii concrete separă un site care funcționează bine pe telefon de unul doar „vizibil” pe telefon.
Principii
Un buton proiectat pentru mouse (mic, precis) devine frustrant pe telefon, unde ținta e un deget cu precizie mult mai mică. Standardul funcțional e minim 44x44px pentru orice element interactiv (buton, link, câmp de formular), cu spațiu suficient între elemente ca să nu apeși accidental pe vecin.
Ce face firma și pentru cine, vizibil imediat, fără să fie nevoie de scroll pentru a-l descoperi. Nu titlu vag de tip „Bun venit”, ci mesaj concret: ce serviciu, pentru ce problemă, pentru cine. Vizitatorul de pe telefon nu are răbdare să „exploreze” pagina ca să înțeleagă oferta.
Butonul de acțiune (cerere ofertă, apel, formular) trebuie să fie vizibil sau la un singur scroll scurt de distanță, nu îngropat sub 4-5 ecrane de conținut. Pe categorii cu intenție de contact rapidă (servicii locale, urgențe), un buton sticky (fix, vizibil constant) de „Apel” sau „Cerere ofertă” crește accesibilitatea acțiunii.
Un ecran de telefon are spațiu limitat — fiecare element decorativ (iconițe fără scop, chenare inutile, umbre exagerate) concurează pentru atenția limitată a vizitatorului. Pe desktop, spațiul generos absoarbe decorul; pe telefon, decorul concurează direct cu informația esențială.
Corpul de text sub 16px pe telefon forțează zoom manual, o fricțiune care descurajează citirea. Formularele de contact trebuie să aibă cât mai puține câmpuri obligatorii și tastatura corectă activată automat (numerică pentru telefon, email pentru adresă).
Listă de verificare
Înainte de lansare, treci site-ul prin această listă, pe un telefon real, nu doar în modul „responsive preview” dintr-un browser de desktop.
Un design mobil-first bine construit reduce, ca efect secundar, și timpul de încărcare — pentru că prioritizarea conținutului esențial înseamnă, de regulă, mai puține elemente vizuale grele (imagini decorative mari, scripturi de animație complexe) pe primul ecran. Invers, un site care încarcă tot conținutul deodată, indiferent de prioritate, plătește dublu: încărcare mai lentă și, în plus, un ecran mic supraîncărcat vizual cu informație care nu contează în primele secunde.
Recomandăm o ordine clară de încărcare vizuală: mesajul principal și CTA-ul apar primele, instant, indiferent de ce se încarcă în fundal (imagini mai grele, secțiuni secundare). Această tehnică — încărcare progresivă cu prioritate pe conținutul critic — face diferența între un vizitator care percepe pagina drept „rapidă” chiar dacă tehnic încărcarea completă durează câteva secunde, și unul care percepe pagina drept „lentă” pentru că a fixat un ecran gol până la afișarea completă a tot conținutul.
Din perspectivă tehnică, construim fiecare proiect cu acest principiu în minte de la început, nu ca optimizare adăugată ulterior — structura HTML, ordinea de încărcare a imaginilor și greutatea scripturilor de animație sunt decise încă din etapa de design UI, nu corectate după ce site-ul e deja construit greșit.
Pentru Antem Star, un operator de tâmplărie PVC în județul Constanța, majoritatea căutărilor vin cu intenție locală imediată de pe telefon — de aceea hero-ul are CTA dublu vizibil imediat (cerere ofertă și click-to-call), fără să fie nevoie de scroll pentru a găsi numărul de telefon. Pentru Înlocuire Acoperiș, calculatorul de preț integrat funcționează cu câmpuri minime, optimizate pentru completare rapidă de pe telefon, exact pentru a califica lead-uri fără să adauge fricțiune inutilă în procesul de cerere de deviz.
O spălătorie auto e un exemplu clasic de business unde decizia se ia chiar în momentul respectiv, de pe telefon — motiv pentru care CTA-ul, programul de funcționare și locația trebuie vizibile fără scroll, exact principiul de mai sus.
Vezi mai multe exemple concrete în portofoliul nostru, sau citește despre cum un design slab scade conversiile chiar dacă site-ul funcționează tehnic corect.
Fereastra de 3 secunde nu e o cifră arbitrară de marketing — reflectă cât timp are, în medie, un vizitator de pe telefon înainte să decidă subconștient dacă pagina „pare” relevantă și de încredere. Această decizie inițială nu e analitică (vizitatorul nu citește conștient fiecare cuvânt din hero), e mai degrabă o impresie vizuală rapidă: pagina pare profesionistă sau amatoare, pare relevantă pentru ce caută sau pare din altă categorie, pare că se încarcă normal sau pare blocată.
Dacă impresia inițială e pozitivă, vizitatorul continuă să scaneze pagina și, abia apoi, începe procesarea conștientă a informației (citește titlul complet, evaluează oferta). Dacă impresia inițială e negativă sau neclară, cele mai multe decizii de abandon se iau chiar înainte ca vizitatorul să citească efectiv textul — pur din senzația vizuală de confuzie, lentoare sau lipsă de profesionalism. De aceea primele 3 secunde nu sunt despre conținut, sunt despre claritate vizuală imediată.
Această fereastră scurtă explică și de ce optimizările tehnice de viteză (timp de încărcare) și cele de design (claritate vizuală imediată) trebuie tratate împreună, nu separat. Un site rapid tehnic, dar confuz vizual, pierde vizitatori la fel de eficient ca unul lent — diferența e doar în care moment exact are loc abandonul.
Cea mai frecventă greșeală: un hero cu imagine de fundal mare, decorativă, cu titlul scris peste ea în contrast slab — pe desktop pare cinematic, pe telefon imaginea se comprimă, titlul devine ilizibil pe zone ale imaginii cu culoare variabilă, și mesajul principal se pierde complet în primele secunde exact când contează cel mai mult.
A doua greșeală: meniul de navigare complex, cu multe niveluri de submeniu, construit pentru un cursor precis de desktop, dar imposibil de folosit confortabil cu degetul pe un ecran mic. Vizitatorul de pe mobil nu vine, de regulă, să „exploreze” structura site-ului — vine cu o intenție specifică, și un meniu complicat adaugă fricțiune exact unde nu ai nevoie de ea.
A treia greșeală: pop-up-uri sau ferestre modale (newsletter, cookie banner agresiv, reducere „doar acum”) care apar imediat la încărcare și blochează conținutul principal înainte ca vizitatorul să înțeleagă măcar ce oferă site-ul. Pe telefon, unde spațiul e deja limitat, un pop-up prematur poate consuma exact fereastra critică de 3 secunde cu un element complet secundar față de mesajul principal.
Testarea în „modul responsive” dintr-un browser de desktop e un prim pas util, dar insuficient — simulează dimensiunea ecranului, nu condițiile reale de utilizare. Testăm fiecare proiect direct pe telefoane reale, în condiții variate: afară, cu lumină puternică pe ecran, pe o conexiune mobilă medie (nu Wi-Fi rapid de birou), și cu persoane care nu au context prealabil despre proiect.
Această testare „la firul ierbii” descoperă frecvent probleme invizibile în etapa de design pe monitor mare: un buton care pare suficient de mare în Figma, dar e greu de apăsat precis cu degetul mare; un text care pare lizibil pe ecranul de dezvoltator, dar devine dificil de citit afară, la soare direct; o animație care rulează fluid pe un telefon performant, dar se blochează vizibil pe un model mai vechi, folosit încă de mulți utilizatori din România.
Completarea unui formular pe telefon e mai costisitoare mental decât pe desktop — fiecare câmp adițional, fiecare tastatură greșit configurată (alfabetică în loc de numerică pentru un câmp de telefon) adaugă fricțiune vizibilă. Configurăm explicit tipul corect de input pentru fiecare câmp — numeric pentru telefon, email pentru adresă — ca tastatura potrivită să apară automat, fără efort suplimentar din partea vizitatorului.
La fel de important: mesajele de eroare trebuie să fie clare și vizibile imediat lângă câmpul problematic, nu generice, la finalul formularului. Un vizitator de pe telefon care nu găsește rapid ce a completat greșit abandonează formularul, chiar dacă intenția inițială de a-l completa a fost reală.
Nu tot conținutul trebuie eliminat pentru varianta mobilă — trebuie doar reordonat corect. Informația secundară (istoricul detaliat al firmei, liste extinse de certificări, secțiuni de context adițional) rămâne perfect valabilă mai jos pe pagină, la un scroll mai departe. Diferența e prioritizarea: primul ecran conține strict ce decide dacă vizitatorul continuă, restul conținutului susține și întărește decizia deja luată, nu o determină.
Această reordonare, aplicată consecvent, transformă frecvent pagini care „nu încăpeau” pe mobil în pagini complet funcționale, fără să elimini efectiv conținut valoros — mută doar accentul vizual către ce contează în fereastra critică de 3 secunde.
Întrebări frecvente
Variază pe categorie, dar pentru majoritatea firmelor de servicii locale și retail, traficul mobil reprezintă frecvent 60-80% din vizite, în special pentru căutări cu intenție locală imediată („termopane Constanța”, „reparații acoperiș aproape de mine”). De aceea design-ul mobil-first nu e opțional, e prioritar.
Responsive înseamnă că site-ul se adaptează tehnic la orice dimensiune de ecran. Mobil-first înseamnă că design-ul e conceput inițial pentru ecranul mic, cu prioritizare clară a conținutului esențial, iar varianta desktop extinde acel design, nu invers. Diferența se vede în ce apare primul și ce e omis pe ecranul mic.
Nu întotdeauna. Recomandăm testare pe dispozitiv real, în condiții reale — lumină puternică de exterior, conexiune mobilă medie (nu Wi-Fi rapid de birou), și cu utilizatori care nu cunosc deja site-ul, nu doar echipa internă care e familiarizată cu structura.
Foarte mult. Rata de abandon crește semnificativ pentru fiecare secundă adițională de încărcare pe mobil, mai ales pentru vizitatori cu intenție comercială imediată care compară rapid mai multe oferte în paralel, pe rețea mobilă, nu pe Wi-Fi stabil.
Funcționează cel mai bine pentru servicii cu intenție de contact rapidă (urgențe, servicii locale, programări). Pentru branduri unde decizia de achiziție e mai lentă (produse premium, proiecte complexe B2B), un buton sticky prea agresiv poate părea presant — alegerea corectă depinde de comportamentul real al audienței tale.
În etapa de design UI, folosim un grid de referință cu dimensiunea minimă de 44x44px pentru orice element interactiv, verificat direct în instrumentele de design (Figma) înainte de implementare — nu ghicit vizual după ce site-ul e deja live.
De regulă, da, în bine — prioritizarea conținutului esențial pe mobil clarifică și ce e cu adevărat important pe desktop, unde spațiul generos permite adăugarea de context suplimentar, nu diluarea mesajului principal cu elemente secundare.