Design & UX

Viziunea de Design

Design General și UX

Designul este ceea ce face magazinul și brandul tău să se diferențieze față de restul pieței; este ceea ce construiește atașamentul clienților față de brandul tău. Dar designul pe web nu este doar legat de frumusețe, ci este legat și de experiența utilizatorului.

Efectul Aesthetic-usability spune că utilizatorii au tendința să perceapă produsele atractive ca fiind mai ușor de utilizat: Oamenii tind să creadă că lucrurile care arată mai bine, funcționează mai bine, chiar dacă ele nu sunt mai bune sau mai eficiente . Asta nu înseamnă că ușurința de utilizare nu este un factor cheie, dar întârește faptul că un design frumos contribuie la percepția că magazinul online este ușor de utilizat.

Când am început dezvoltarea acestei noi generații de produs, designul a fost unul dintre elementele cele mai importante. Am pornit cu o viziune complet nouă, iar principalele puncte din viziunea noastră sunt:

  • Luăm decizii bazat pe date, nu pe opinii

  • Construim un sistem de design care să fie flexibil și customizabil, încât magazinele să poată ieși în evidență față de concurență

  • Aderăm la standarde și oferim consistență

  • Construim interfețe care sunt ușor de utilizat și cresc conversia

Decizii Bazate pe Date

Primul lucru pe care am vrut să-l incorporăm în viziunea noastră de design a fost decizia bazată pe date solide și nu pe preferințe personale.

Este un scenariu frecvent ca designerii mai puțin experimentați sau comercianții să se uite la ce fac alți jucători de pe piață și să încerce să-i copieze cât de exact pot, în speranța că vor copia și succesul lor.

Deși inspirația este o parte cheie din procesul de design, copierea fără înțelegerea detaliilor și a principiilor este ca și copiatul de la colegul de bancă, deși acesta are un subiect diferit.

În procesul de design este critic să înțelegi motivul pentru care ceva funcționează sau nu, pentru a înțelege când trebuie aplicat și când nu.

Echipa de design Zento studiază constant lucrările de cercetare în design eCommerce publicate de Baymard Institute , precum și alte surse, cu scopul de a înțelege cu rigoare științifică ce funcționează și de ce. Această abordare permite echipei să propună cele mai potrivite concepte de design în construirea fiecărui magazin online.

În plus, echipa monitorizează constant experimente A/B testing pe diferite componente de design pentru a strânge noi informații care să permită decizii viitoare și mai bune.

Sistem Design Atomic

Magazinele online au nevoi de design diferite, deci la Zento a trebuit să construim un sistem de design care să ofere flexibilitatea necesară pentru a putea satisface toate personalizările de design. Răspunsul este Sistemul de design atomic (Atomic Design System).

Această metodologie spune că: Designul atomic nu este un proces linar, ci mai degrabă un model mental care ne permite să gândim interfețele atât ca un ansamblu, cât și ca o colecție de componente.

Atomic Design Methodology

Designul atomic este compus din 5 nivele care împreună alcătuiesc un sistem de design într-o ierarhie coerentă:

  • Atomi : componente de bază ale interfeței care nu pot fi sparte în componente mai mici care să aibă sens (exemple: iconițe, texte sau imagini, căsuțe de text, butoane etc.)

  • Molecule : grupuri de atomi care împreună alcătuiesc o componentă funcțională (exemplu: căsuțe de produs)

  • Organisme : componente de interfață relativ complexe, compuse din grupuri de molecule, atomi sau chiar alte organisme (exemple: listă de produse, header, footer, cart)

  • Template-uri : pagini care combină într-un layout definit și coerent conținut complet (exemple: layout-ul unei pagini întregi)

  • Pagini : o instanță specifică a unui template care alcătuiește o pagină finală

Atomic Design System Examples

Sistemul de design Zento are multiple versiuni pentru fiecare atom; acești atomi sunt grupați în componente cu mai multe variații, care la rândul lor sunt grupate în variații de organisme și așa mai departe. Este ca un Lego pentru design.

Consistență & Standarde

Beneficiul implicit al sistemului de design atomic este că interfețele sunt consistente: din moment ce aceeași variație a unui atom este folosită în tot magazinul, utilizatorul va avea o experiență consistentă.

Una dintre regulile lui Jakob Nielsen (co-fondator al Nielsen Norman Group) din Usability Heuristics este Consistență & Standarde: Utilizatorii nu trebuie să-și pună întrebări dacă diferite cuvinte, situații sau acțiuni înseamnă același lucru. Folosește convenții în platformă.

Acest lucru este critic pentru ca interfața să fie predictibilă și ușor de învățat.

Există 2 tipuri de consistență care se aplică designului:

  1. Internă : se referă la menținerea unei consistențe în interfață

  2. Externă : menținerea consistenței și în afara magazinului online; asta se referă la urmarea unor standarte cu care utilizatorul este deja obișnuit

Consistența internă este destul de simplă: dacă magazinul tău folosește anumite elemente de design, trebuie să le folsească în mod consistent; iconița de cart trebuie să arate la fel între pagini, formularele trebuie să fie stilizate la fel, culorile trebuie să fie consistente și așa mai departe.

Consistența externă poate fi descrisă cel mai simplu cu legea lui Jakob: Utilizatorii își petrec cel mai mult din timp pe alte site-uri decât al tău. Asta înseamnă cu utilizatorii preferă ca magazinul tău să funcționeze cum sunt obișnuiți cu alte magazine pe care le știu.

Cumpărătorii tăi au așteptări legate de modul în care o funcționalitate trebuie să se comporte și unde ar trebui să fie găsită. Dacă un design încalcă acele convenții, îi va forța pe utilizatori să învețe ceva nou. Asta nu înseamnă că nu se pot schimba convenții, ci doar să fie făcute cu un motiv bun, iar rezultatul să fie mai bun și mai ușor de folosit.

Usability Pentru Conversii Crescute

În ziua de azi, utilizatorii se așteaptă ca magazinele online pe care le vizitează să fie rapide și intuitive, indiferent de pe ce dispozitiv le accesează. Este deja bine cunoscut faptul că experiența slabă în utilizare este unul dintre motivele principale pentru care utilizatorii nu se convertesc în clienți, iar asta este adevărat în mod special de pe dispozitivele mobile. Uneori este o trecere directă la un competitor, dar alteori este mult mai subtil nu funcționează ok, revin mai târziu când sunt la calculator , ceea ce apoi nu se mai materializează; în aceste cazuri magazinul tău pierde o comandă după ce ai cheltuit bani și efort în achiziția clientului.

Având în vedere creșterea utilizării dispozitivelor mobile în cumpărăturile online și faptul că unii utilizatori folosesc exclusiv telefonul mobil, optimizarea magazinului online pentru mobil nu poate fi un demers secundar.

Viziunea de design la Zento pornește cu focus pe utilizatorul mobil: proiectăm componentele într-un mod optimizat pentru dimensiunea ecranului de mobil și pentru interacțiunea cu degetul; interfețele au elemente care să indice conținut care nu este vizibil; layout-urile adaugă sau elimină elemente comparativ cu ecranul de calculator pentru adaptare la dimensiunea ecranului.

Carousel Spillover Carousel Spillover Pentru indicarea faptului că sunt mai multe produse în slider, se afișează o parte din al doilea produs
Categorii pe Homepage Categorii pe Homepage Din moment ce navigarea este ascunsă în meniu, pe homepage este important să afișăm categoriile principale și să ajutăm utilizatorul să navigheze la ele
Filtrare optimizată touch Filtrare optimizată touch Filtrarea folosește componente similar celor native și ușor de apăsat cu degetul, din moment ce mai multe dropdown-uri sau checkbox-uri sunt dificil de utilizat fără mouse
Dimensionat pentru touch Dimensionat pentru touch Elementele sunt dimensionate și distanțate pentru a putea fi ușor apăsate fără riscul declanșării altei acțiuni

Proiectarea unor interfețe care sunt ușor de utilizat pe orice dispozitiv și în orice context este la baza viziunii noastre de design.

Designul nu este legat doar de frumusețea layout-urilor sau animațiile fluide, ci este și despre înțelegerea utilizatorului și a lucrurilor care îi fac navigarea mai ușoară și plăcută. Acesta este modul în care se optimizează rata de conversie ( Conversion Rate Optimization sau CRO pe scurt) și în consecință profitabilitatea magazinului.

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.