Design & UX

Design General & UX

Design General și UX

Designul este compus din toate elementele vizuale ale magazinului online care împreună constituie interfața utilizatorului (UI - User Interface), iar împreună cu fluxul în utilizare și cu modul de funcționare constituie experiența utilizatorlui (UX - User Experience).

Crearea unui design focusat pe cumpărător are câțiva pași pe care un designer profesionist îi urmează. Procesul tot timpul începe cu înțelegerea nevoilor de business, înțelegerea brandului, a viziunii și profilul cumpărătorului, înțelegerea domeniului și a competiției. Următorul pas este construirea unui plan legat de cum ar trebui magazinul să arate și ce feeling să transmită. După ce s-a făcut această documentare, procesul de design continuă cu deciderea stilului.

Style Guide

În acest pas, echipa de design decide font-urile utilizate, paleta de culori și regulile de spațiere care vor fi utilizate în întregul design. Acest pas nu doar crește eficiența în procesul de design, dar asigură și consistența designului.

Zento Banner

Style Guide-ul unui design Zento are următoarele componente:

  • Typography: tipul de font, grosimea, mărimea, înălțimea rândului și spațierea literelor pentru text de conținut și toate heading-urile

  • Culori: selectarea culorilor principale și secundare, precum și derivatele acestora și scala de gri utilizată

  • Iconițe: designul tuturor iconițelor utilizate în design

  • Layout: spațierea elementelor și grid-ul de afișare pe toate dispozitivele

  • Componentele UI și interactivitatea lor: Butoane, Link-uri, Elemente de formular, Notificări, Tab-uri & Pop-up-uri

Cu o varietate extinsă de stiluri pentru toate componentele dintre care să se aleagă sau să se customizeze de la zero, aspectul unui magazin poate fi personalizat pentru a oferi o experiență de utilizare excepțională, fără a compromite consistența vizuală.

Navigarea

Cu un style guide stabilit, primul pas în designul interfeței este deciderea asupra meniului. În funcție de categoriile disponibile în magazinul online și modul în care utilizatorii se așteaptă să navigheze prin magazin, prima decizie majoră este legată de modul de organizare și afișare a navigației.

Zento are un set de layout-uri în continuă creștere dintre care să se aleagă un layout potrivit în funcție de numărul de categorii la fiecare nivel de adâncime și adâncimea totală. În funcție de domeniul de activitate și așteptările utilizatorilor, poate este nevoie ca designul să permită o navigare rapidă la o categorie finală sau, din contră, să necesite o navigare ghidată în etape.

Mai jos sunt câteva exemple de navigări dintre zecile de opțiuni disponibile:

Mega Menu Mega Menu Tradiționalul mega-menu, este ideal pentru magazinele cu 3 nivele de categorii și un număr mare de categorii la fiecare nivel.
Meniu Simplu Meniu Simplu O navigație simplificată, fără deschiderea unui meniu, recomandat pentru categorii pe puține nivele.
Mega Menu cu Imagini Mega Menu cu Imagini Tradiționalul mega-menu, cu imagini pentru categorii, ideal pentru navigări cu 2 nivele de adâncime și puține categorii la nivelul 2.
Meniu Vertical Meniu Vertical O versiune verticală a meniului, ideal pentru navigări cu multe nivele de adâncime și multe categorii de nivel 1

Pe mobil, având în vedere dimensiunea ecranului și lipsa unui mouse (implicit și a acțiunii de trecere a cursorului peste un element), majoritatea navigărilor sunt ascunse în spatele unei iconițe de meniu; însă modul în care arată navigarea în spatele acelei iconiție are mai multe variații posibile.

Meniu simplu Meniu simplu Navigația tradițională care se deschide din lateral după apăsarea unui buton de tip hamburger
Meniu simplu cu iconițe Meniu simplu cu iconițe Navigația tradițională cu iconițe pentru categorii, util în scenariile în care vizualul ajută navigarea
Navigare toolbar Navigare toolbar Toolbar în partea de jos a ecranului, similar cu aplicațiile native iOS
Cu deschidere în jos Cu deschidere în jos Navigația cu buton hamburger care se deschide în partea de jos a ecranului

Header

După alegerea unui layout pentru navigație, următorul pas este realizarea designului pentru restul header-ului. Pe lângă navigație și logo, headerul conține link-ul către coș astfel încât utilizatorul să poată vedea rapid ce produse are în coș, link către contul utilizatorului sau autentificare astfel încât utilizatorul să-și poată rapid accesa contul și istoricul de comenzi, link către wishlist, căutare, navigație secundară și principalul USP (unique selling proposition).

Layout-ul navigației permite apoi alte decizii legate de design: navigația compactă sau aerisită, cu iconițe, text sau ambele, să aibă câmpul de căutare sau doar iconiță, să fie în contrast sau nu cu restul site-ului și multe alte decizii legate de poziționare sau ordonare.

Pe mobil, headerul este mai compact și scopul este de a oferi utilizatorului acces la cele mai importante funcționalități, ocupând cât mai puțin spațiu vertical este posibil; decizii importate pot fi legate de faptul că search-ul este vizibil sau afișat la apăsarea unei iconițe, dacă iconița contului este vizibilă sau ascunsă în meniul de categorii și așa mai departe.

Conținut Homepage

Pentru vizitatorii care accesează magazinul prin homepage, această pagină este importantă în mod special, căci va oferi utilizatorului informații despre ce produse sunt vândute în magazin și cum se diferențiază acest magazin față de altele. Zento oferă o libertate completă în gestionarea conținutului folosind propriul Page Builder optimizat pentru manageri eCommerce și specialiști de marketing, încât gestionarea conținutului pe orice pagină de site, inclusiv homepage-ul, să fie la fel de ușor ca și crearea unui newsletter în tool-urile drag-drop.

Conținutul propus de designer în procesul de setup, se concentrează pe a oferi cumpărătorului scurtături către cele mai importante categorii (lucru important în special pe mobil), să prezinte cele mai importante produse și campanii pe care magazinul dorește să le comunice, și de asemenea să comunice mesajul brand-ului și USP-ul (unique selling proposition). Scopul homepage-ului este să capteze atenția vizitatorului care nu utilizează direct meniul sau căutarea și să-l ghideze către produse sau categorii care l-ar putea interesa.

Ce este important de ținut minte este că nu sunt decizii universal corecte sau greșite, ci depinde de la caz la caz în funcție de industrie, catalog și brand. Chiar și cu varietatea de componente pe care layout-ul Zento îl oferă, alegerea combinației câștigătoare este ce face ca designerii să fie cruciali în procesul de realizare a magazinlui online.

Scopul Utilizatorului

Drumul de la vizitator la cumpărător nu este tot timpul o linie dreaptă, deci ar trebui adresate nevoile a 5 tipuri principale de utilizatori eCommerce:

  • focusați pe produs (știu exact ce vor) ⇒ elemente cheie: căutare eficientă, acces rapid la produse anterior cumpărate, checkout rapid

  • doar răsfoiesc (accesează magazinele favorite în căutarea inspirației sau să petreacă timp) ⇒ elemente cheie: listarea de produse noi, populare și promoționale, acces rapid la disponibilitate și preț

  • în curs de documentare (strâng informații despre produse și prețuri) ⇒ elemente cheie: recenzii, compararea ușoară a produselor, wishlist și coș ușor de editat

  • vânătorii de chilipiruri (caută cel mai bun deal posibil) ⇒ elemente cheie: afișarea produselor la promoție, aplicarea de discount-uri automate când anumite condiții sunt îndeplinite

  • cumpărători one-time (au primit un cupon cadou sau cumpără un cadou) ⇒ elemente cheie: navigare eficientă, checkout fără înregistrare.

Designul care ține cont de tipurile de utilizatori și scopul lor în vizitarea site-ului poate ajuta echipa să ia decizii optimizate pentru experiența utilizatorului.

Vrei să afli mai multe detalii?

Contactează-ne

Acest site folosește cookie-uri

Folosim cookie-uri pentru a personaliza conținutul și publicitatea, pentru a oferi funcții de social media și să analizăm traficul. Partajăm informații despre utilizarea site-ului cu social media-ul nostru, publicitate și analitice parteneri, care se poate combina cu alte informații furnizate sau colectate folosind serviciile lor.