Ce înseamnă UX și UI design pentru site-ul firmei tale

Când primești o ofertă pentru un site, undeva în ea scrie „design”. Uneori e un rând, alteori jumătate din preț. Întrebarea corectă nu e „cât costă designul”, ci „ce primesc concret pentru banii ăștia”. Articolul de față răspunde exact la asta: ce înseamnă UX și UI design pentru site-ul unei firme, cum recunoști lipsa lor pe site-ul tău și ce livrabile ai dreptul să ceri înainte să plătești.

Pe scurt, ca să avem termenii pe masă: UX (user experience) înseamnă cum funcționează site-ul pentru vizitator, adică structura, fluxurile și ușurința cu care omul ajunge la rezultat. UI (user interface) înseamnă cum arată: culori, fonturi, butoane, spațieri. Dacă vrei comparația detaliată dintre cele două, am scris-o separat în UX vs UI: diferențele cheie. Aici nu repetăm teoria. Aici vorbim despre banii și clienții tăi.

Ce cumperi de fapt când plătești design

Nu cumperi „un site frumos”. Cumperi o serie de decizii care transformă vizitatori în cereri de ofertă sau în comenzi. Ce pagini există și de ce. Ce scrie în meniu. Ce vede omul în primele secunde pe pagina de serviciu. Câte câmpuri are formularul de contact. Unde stă numărul de telefon pe mobil. Fiecare dintre aceste decizii e design, chiar dacă niciuna nu arată spectaculos într-o prezentare.

Partea vizuală (UI) cumpără încredere. Un site îngrijit, cu tipografie lizibilă și butoane clare, spune „firma asta e serioasă” înainte ca vizitatorul să citească un rând. Partea de experiență (UX) cumpără drumul: de la „am ajuns din Google pe pagina asta” până la „am trimis cererea”. Un site poate arăta impecabil și totuși să piardă clienți la fiecare pas al drumului. De aceea le plătești pe amândouă, nu doar pe prima.

Semne de UX prost pe site-ul tău, verificabile azi

Nu ai nevoie de un audit plătit ca să vezi problemele mari. Uită-te în trei locuri.

1. Formularul din care se pleacă

Deschide formularul tău de contact sau de comandă și numără câmpurile. Cere cont obligatoriu? Cere CUI, adresă și „de unde ați aflat de noi” înainte ca omul să fi primit măcar un preț? Fiecare câmp în plus e un motiv de abandon. Semnul cel mai clar: ai vizite, dar primești puține mesaje. Dacă ai Google Analytics, compară câți oameni deschid pagina de contact cu câți trimit efectiv formularul. Diferența dintre cele două cifre e problema ta de UX numărul unu.

2. Meniul care ascunde serviciile

Multe site-uri de firmă au în meniu „Acasă, Despre noi, Servicii, Galerie, Contact”. Serviciile, adică exact ce caută clientul, stau înghesuite pe o singură pagină generală. Omul care caută montaj de centrale termice vrea o pagină despre montajul centralelor termice, nu o listă cu tot ce faci. Dacă serviciile tale principale nu au fiecare pagina lui, vizibilă din meniu, pierzi de două ori: vizitatorul nu se regăsește, iar Google nu are ce pagină să afișeze la căutarea lui.

3. Pagina de serviciu fără pas următor

Deschide cea mai importantă pagină de serviciu și derulează până jos. Cu ce se termină? Dacă se termină cu text și atât, fără „cere o ofertă”, fără telefon apelabil dintr-un singur tap pe mobil, fără un formular scurt, pagina informează, dar nu vinde. Vizitatorul nu se întoarce în meniu ca să caute cum să te contacteze. Pleacă.

Un test simplu și gratuit: roagă pe cineva din afara firmei să îți ceară o ofertă prin site, de pe telefonul lui, în timp ce te uiți. Nu îi explica nimic. Locurile unde ezită sau întreabă „unde apăs?” sunt lista ta de probleme de UX, în ordinea în care merită reparate.

Livrabilele reale ale unui proces de design

„Design modern și responsive” nu e un livrabil, e o promisiune. Un proces serios produce documente concrete, pe care le vezi și le aprobi pe rând:

• Arhitectura informației: lista completă a paginilor și legăturile dintre ele, construită pornind de la ce caută clienții tăi, nu de la organigrama firmei.
• Wireframe: schița alb-negru a fiecărei pagini importante. Aici se decide ce stă sus, ce stă jos, unde sunt butoanele. Fără culori, tocmai ca să discutăm structura, nu gusturile.
• Prototip: paginile legate între ele, pe care poți da click ca pe un site real, înainte să existe o linie de cod.
• Design vizual (UI): paleta de culori, tipografia, butoanele cu toate stările lor, versiunea de mobil pentru fiecare ecran în parte.
• Testare: verificare pe dispozitive reale și corecturi acolo unde utilizatorii se blochează.

Primele trei sunt partea de UX, al patrulea e UI, iar ultima le verifică pe amândouă. Despre primele două am scris detaliat în articolul despre wireframe și prototip înainte de cod: acolo găsești și de ce e mult mai ieftin să muți un buton pe o schiță decât într-un site deja programat.

Ce întrebări pui unei agenții înainte să semnezi

Nu trebuie să te pricepi la design ca să cumperi design bine. E suficient să pui întrebări la care un proces serios are răspunsuri concrete:

• Pe ce vă bazați structura paginilor? Răspunsul corect pomenește de clienții și căutările tale, nu doar de „experiența noastră”.
• Văd wireframe-uri înainte de designul final? Pot cere modificări pe ele?
• Câte câmpuri are formularul de contact și unde ajung mesajele trimise prin el?
• Cum arată fiecare pagină pe un telefon obișnuit, nu pe laptopul din prezentare?
• Ce se întâmplă după lansare: cine urmărește dacă site-ul aduce cereri și cine face modificările?

Dacă vrei să înțelegi și meseria din spatele acestor livrabile, adică ce face concret omul care le produce, am descris-o în ce face un UI/UX designer. Te ajută să deosebești un designer de produs de cineva care doar „face să arate bine”.

Cum arată procesul într-un proiect real

La un site de prezentare

Munca de UX se concentrează în câteva ecrane cu miză mare: pagina principală, paginile de servicii și fluxul de contact. Arhitectura pleacă de la serviciile pe care le vinzi și de la zonele în care le vinzi. Wireframe-urile stabilesc ce argumente apar și în ce ordine, iar fiecare pagină de serviciu se termină cu un pas următor clar. La DCL, un asemenea site de prezentare custom pornește de la 399 € și ajunge la 2.990 € pentru varianta premium, cu panou de administrare propriu inclus; pașii sunt descriși la creare site.

La un magazin online

Volumul de UX crește serios: structura categoriilor, filtrele, pagina de produs, coșul și finalizarea comenzii. Abandonul se poate măsura la fiecare pas, iar o decizie aparent mică, de exemplu comanda fără cont obligatoriu, se simte direct în vânzări. Un exemplu din lucrările noastre publice: pentru climatizare.net, o firmă de climatizare din București, am construit un site de servicii cu magazin integrat, gândit să aducă cereri de ofertă din căutări, nu să arate bine și atât. Site-ul e live și poate fi verificat oricând.

Când merită investiția și când nu

Merită când site-ul e un canal de vânzare: ai vizite din căutări sau din recomandări, dar puține cereri. Atunci designul lucrează pe un trafic pe care îl ai deja și fiecare procent recuperat se vede în mesaje primite. Merită și când lansezi un produs sau un serviciu și plătești reclame: fiecare vizitator adus cu bani trebuie convertit, nu irosit pe un formular greoi.

Să luăm un exemplu pur ilustrativ, cu presupunerile la vedere: zicem că site-ul tău are 300 de vizite pe lună și 1 vizitator din 100 trimite o cerere, adică 3 cereri. Dacă repararea formularului și a paginilor de serviciu ar duce rata la 2 din 100, din aceleași vizite ai avea 6 cereri. Cifrele sunt alese doar pentru calcul, pe ale tale le găsești în Analytics, dar mecanismul e real: la trafic egal, designul poate dubla sau înjumătăți rezultatul.

Nu merită, sau nu încă, în două situații. Prima: site-ul aproape nu are trafic. Un redesign nu aduce vizitatori; întâi rezolvi vizibilitatea, apoi conversia. A doua: testezi o idee nouă și îți ajunge o pagină simplă cu un formular; investiția serioasă vine după ce ideea se confirmă. Ca să pui sumele în context, am detaliat prețurile și ce primești pentru ele în cât costă un site.

Pasul următor

Fă în seara asta cele trei verificări de mai sus pe site-ul tău: formularul, meniul, finalul paginilor de serviciu. Notează ce găsești, în primul rând cu capturi de pe telefon. Dacă vrei o părere aplicată pe ce ai găsit, trimite-ne linkul site-ului: răspundem cu o cotație fixă în 48 de ore. Construim în React, Laravel și Next.js, fără WordPress, iar designul și dezvoltarea le facem împreună, tocmai ca să nu rămâi cu un site frumos care nu vinde.