DESIGNUL ȘI FUNCȚIONALITATEA

SITE-URILR WEB COMERCIALE

Acest material se bazează pe cartea: Albăstroiu Irina – e-Business: elemente fundamentale, Editura ASE, București, 2017

Designul site-ului web comercial

Designul site-ului web comercial trebuie să fie reprezentarea estetică a ofertei și atunci este
necesar să fie ales un design reprezentativ pentru organiza ție, dar totodată atractiv pentru
publicul/clientela căruia/căreia i se adresează. Designul unui magazin online trebuie să fie caracterizat
de unitate, armonie, echilibru, proporţie adecvată între elemente și un contrast care să permită, printre
altele, și o bună lizibilitate a textului și, astfel, să faciliteze navigarea, căutarea și găsirea informa țiilor
pe care utilizatorul le caută.
Există câteva aspecte privind designul web extrem de importante în conceperea unui site
comercial, anume:

 Configurația/macheta site-ului și dispunerea elementelor (layout-ul) poate fi realizată

ținând seama de rezultatele studiilor de eyetracking (urmărire a privirii - în acest caz, furnizează
informații privind modul în care urmărim cu privirea o pagină web pe un monitor) care ajută la
structurarea eficientă a paginilor web și la amplasarea corespunzătoare a elementelor site-ului. Astfel
de studii (Pernice, 2014) au indicat faptul că un site are „zone calde” (pe care se fixează mai mult
privirea utilizatorului la o vizualizare ini țială a paginii web, reprezentate, de cele mai multe ori, de
partea din stânga sus a unei pagini web) și „zone reci” (care prezintă mai puțin interes pentru
utilizator atunci când accesează pentru prima dată o pagină web, situate, de regulă, în partea dreaptă
jos a paginii). Rezultatele acelorași studii demonstrează că privirea utilizatorului urmăre ște liniile
literei „F” atunci când parcurge o pagină web, însă, aceste reguli sunt valabile în condi ții specifice:
dat fiind faptul că noi citim textul de la stânga la dreapta, regula literei F se aplică, în general, atunci
când pagina web conține preponderent text, organizat în paragrafe, însă mi șcările ochilor nu mai pot
forma un „F” atunci când parcurgem  o pagină de rezultate a unui motor de căutare (chiar daca
aceasta conține, evident, preponderent text), activitatea cumulată a ochiului putând duce la o urmărire
cu privire pe liniile unui triunghi, ceea ce accentuează ideea că modul nostru de a vizualiza pagini
web nu poate fi redus la un tipar.
Astfel, în faza de pre-testare a site-ului pot fi efectuate studii de eyetracking pentru a identifica
zonele pe care se fixează privirea utilizatorilor, oferind astfel cheia localizării celor mai importante
elemente ale site-ului, a celor care servesc drept elemente de captare a aten ției și de convingere a
utilizatorului să rămână pe site. Loсul obișnuit реntru рlasarеa mеniului рrinсiрal еstе în рartеa stân ɡa
a есranului sau în рartеa suреrioară a рaɡinii wеb.
În prezent există două tendințe majore în web design, diametral opuse, aceea de a construi
site-uri minimaliste, simple, cu structură intuitivă și aceea de a apela la anima ții și efecte speciale,
pentru a realiza site-uri neconvențiale, dar care spun o poveste, într-un mod aparte, surprinzător, prin
design-ul modular (aceasta fiind caracteristica site-urilor construite din module independente de
informație). În cazul site-urilor modulare și destructurate, este important până la ce nivel este
descompusă și fragmentată informația și cât de u șor îi este utilizatorului să o găsească, pentru că
depășirea anumitor limite și înțelegerea eronată a diferen țelor între comportamentul de navigare într-
un site comercial față de un site de prezentare, artistic sau personal pot conduce la site-uri cu o
interfață aparent atractivă, dar greu de utilizat pentru că generează confuzie prin link-urile și sec țiunile
ascunse (această deficiență a unui site poartă denumirea (metaforică) de „mystery meat navigation”
(MMN), acest termen fiind folosit prima dată de Vincent Flanders în 1998 penru a descrie site-uri cu
meniuri compuse doar din pictograme înlocuite cu textul explicativ numai atunci când cursorul
mouse-ului trece peste acestea. Acestor interfe țe le lipse ște un design centrat pe utilizator prin
ascunderea informațiilor relevante

Copyright © Irina Albăstroiu

Toate drepturile asupra acestui material aparţin autorului. Se interzice reproducerea integrală sau parțială și
distribuirea acestui material, fără acordul autorului.
 O problemă a timpurilor noastre care privește nu doar designul și layout-ul, cât și
utilizabilitatea site-urilor este legată și de particularitățile navigării de pe dispozitivele mobile. Odată
cu creșterea numărului internauților care utilizează telefonul mobil sau tableta, în detrimentul
sistemelor desktop PC, proiectanții site-urilor web au devenit preocupa ți de găsirea unor solu ții pentru
afișarea conţinutului paginilor utilizatorilor mobili astfel încât acesta să fie cât mai lizibil şi să
minimalizeze nevoia de a mări sau a deplasa imaginea. Astfel, a devenit necesară adaptarea
conţinutului paginii web la dimensiunile dispozitivelor mobile, ceea ce înseamnă „responsive web
design”. Acest termen se referă la respectarea cerinţelor ergonomice ale aparatelor mobile, prin
selectarea, gruparea şi ordonarea corespunzătoare a elementelor web care sunt cu adevărat importante.
Un website este responsive daca are capacitatea să-și adapteze layout-urile paginilor în funcție de
mediul de vizionare (mai precis de rezolutia ecranului – desktop, laptop, tableta, telefon mobil), fără a
suferi degradări majore, oferindu-le utilizatorilor o experiență excelentă de navigare web (Marcotte,
2011). Astfel, pe măsura ce rezoluția se schimbă, elementele din pagini se
redimensioneaza/rearanjează (acestea fiind griduri fluide), iar imaginile devin flexibile, își pot
modifica înălțimea sau lățimea în funcție de grid.

 Culoarea în cadrul site-ului web este extrem de importantă, cercetările în ceea ce priveşte
formele de comunicare indicând o eficienţă în transmiterea unui mesaj color cu 32% mai ridicată
decât în cazul unuia alb-negru, ceea ce a condus la ideea existenţei unui efect subliminal al culorii
(Onete, 2005). Percepţia umană în ceea ce priveşte culoarea nu poate fi considerată uniformă şi, de
aceea, trebuie ţinut cont de anumite principii cognitive și perceptuale, dar și de efectele fiziologice și
psihologice pe care culorile le pot avea (de exemplu, culoarea ro șie este asociat cu îndrăzneala,
puterea, focul, căldura etc., având drept efecte fiziologice cre șterea presiunii sanguine, a tonusului
muscular și activarea respirației, iar efectele neuro-psihice sunt legate de faptul că este o culoare caldă
ce acționează ca un stimulent general și oferă senza ția de apropiere în spa țiu). Având în vedere
caracteristicile culorii (tonalitatea cromatică, satura ția, luminozitatea, temperatura culorii), în alegerea
culorii trebuie avute în vedere și următoarele aspecte:
- gruparea culorilor în funcție de temperatura acestora în culori reci (albastru, violet, indigo -
asociate cu elemente ca apa şi aerul) și calde (portocaliu, galben, roşu şi maro - asociate cu pământul
şi focul) și faptul că tonurile calde sunt foarte uşor de remarcat, apropie spaţiul, în vreme ce culorile
reci creează senzaţia de spaţiu, depărtare, distanţă, iar aceste reguli î și pot găsi aplicabilea și în cazul
site-urilor – de pildă, poate fi util să se utilizeze culori reci pentru fundal și culori calde pentru
text/imagini pentru o mai bună lizibilitate și un contrast pronun țat. De asemenea, trecerea de la un
anumit tip de culoare la altul trebuie să indice niveluri de acţiune și modificarea culorii trebuie să fie
dependentă de importanţa informaţiei;
- luminozitatea şi saturaţia atrag atenţia (de exemplu, albastru saturat este un albastru pur,
care atrage atenția, pe când albastru amestecat cu pigmenţi gri sau negri devine mai întunecat);
- contrastul acaparează atenţia şi ajută la transmiterea informaţiei, dar se impune o aten ție
mărită în stabilirea culorilor ce vor oferi contrastul dorit pentru că este binecunoscut faptul că o
imagine prea contrastantă, construită prin culori intense, poate induce rapid senzaţia de oboseală
vizuală, distorsionarea imaginilor și chiar poate provoca migrene utilizatorilor. Diferen ța codurilor de
culoare între fundal și culoarea textului și bordurilor trebuie să fie de cel pu țin 40%. Evident, nu vor fi
utilizate culori apropiate ca tonalitate pentru realizarea contrastului pentru că acestea tind să se
amestece, contururile imaginilor devenind neclare, iar textele ilizibile;
- este necesară o anumită uniformitate și continuitate în trecerea de la o secțiune la alta, de la o
pagină web la alta a aceluiași site, în mod special în cazul acelor site-uri care nu sunt personale sau
artistice, ci își propun să-și prezinte clar și precis oferta și să- și vândă produsele și serviciile. De
aceea, este necesară adoptarea aceluiaşi sistem de utilizare a culorii în toate paginile site-ului astfel
încât elementele similare să fie grupate în acea și zonă a site-ului, utilizând acelaşi fundal, să fie
utilizate forme similare pentru culori similare, iar culorile similare (sau identice) trebuie să semnifice
înţelesuri similare (sau identice);

Copyright © Irina Albăstroiu

Toate drepturile asupra acestui material aparţin autorului. Se interzice reproducerea integrală sau parțială și
distribuirea acestui material, fără acordul autorului.
 - paginile web de prezentare a unei companii și cele comerciale sunt caracterizate de cele mai
multe ori de un număr limitat de culori, nu foarte intense, însă combinate urmând anumite reguli,
precum utilizarea combinaţiilor de culori opuse pe cercul cromatic (roşu-verde; portocaliu-albastru;
galben-violet), evitarea utilizării culorilor verde şi roşu în zonele extreme (periferice) ale paginii
(display-ului). De asemenea, este de preferat evitarea prezentării alăturate a culorilor saturate, aflate la
extremităţile spectrului cromatic, evitarea folosirii albastrului saturat pentru scrierea textului, a liniilor
subţiri şi pentru formele mici și a situaţiilor în care culorile alăturate diferă numai prin cantitatea de
albastru pe care o conţin.

 Textul și dispunerea sa sunt extrem de importante în captarea atenţiei internautului, mai

ales că acesta nu va citi niciodată întregul conținut informational al unei pagini web, a șa cum ar putea
proceda cu textul de pe o hârtie, ci deseori doar va scana rapid cu privirea pagina în căutarea
informației care îi este necesară. Astfel, pentru ca mesajul scris pe care organiza ția dore ște să-l
transmită să și ajungă la cel care vizitează site-ul său, pot fi aplicate câteva reguli în privin ța
dispunerii și structurării textului unei pagini web, precum:
- este bine să se utilizeze tehnica piramidei inverse, metodă ce presupune ca doar conținutul
important, relevant (concluzia) să fie prezentată la început, pentru ca apoi să fie prezentate explicaţiile
şi detaliile. Utilizarea acestei tehnici jurnalistice elimină timpii morţi şi riscul ca utilizatorii să
părăsească site-ul;
- informația trebuie să fie grupată atât semantic, cât și vizual prin utilizarea de titluri,
subtitluri, liste cu marcatori (bullets) sau numerotări și împărţirea textului în zone de text mai mici,
în paragrafe sau secţiuni, iar fiecare paragraf sau secțiune să con țină o singură idee, pentru ca textul
să nu pară o masă compactă și să se evite monotonia și posibila părăsire a paginii web de către
utilizator;
- este recomandată folosirea preponderentă a frazelor scurte, cu structură dinamică (subiect,
verb, predicat) și cu o așezare strategică a cuvintelor (astfel, cuvintele cele mai importante se găsesc
la începutul frazei, iar acest început trebuie să constituie o idee – nu se va începe cu „Deci”, „Prin
urmare”, „Și atunci” etc.). De asemenea, trebuie imprimat un anumit ritm textului, combinând fraze
de lungimi diferite. Lungimea rândurilor nu trebuie să depăşească 70 de caractere şi să cuprindă în
medie 7-15 cuvinte (Onete, 2005);
- trebuie să existe o consistență stilistică a site-urilor comerciale, asta neînsemnănd că toate
paginile trebuie să arate la fel, însă trebuie create de la început șabloane de structură bazate pe
aceleași culori și tonuri cromatice, fonturi, structuri de cadre, butoane de navigare etc. Trebuie
urmărită o anumită uniformitate și continuitate pentru că utilizarea unei multitudini de caractere,
fonturi, stiluri poate deruta și induce în eroare utilizatorul;
- layout-ul textului trebuie corelat cu aşezarea în pagină atât a butoanelor de navigare cât şi a
imaginilor şi icon-urilor, un rol important avându-l și natura textului prezentat. Modul tradiţional îl
constituie alinierea la stânga, partea dreaptă a textului nefiind ordonată, dar sunt utilizate şi textele
aliniate tip justify.

Funcţionalitatea site-ului web comercial

Una dintre principalele probleme cu care s-a confruntat dintotdeauna mediul online se referă
la „uzabilitatea” site-urilor (usability). Termenul nu îşi poate găsi o traducere exactă în limba
română, decât prin utilizabilitate, dar o formulare potrivită în contextul folosirii sale în legătură cu
paginile WEB ar fi „uşurinţa utilizării”. Venind astfel din termenul în limba engleză „usability”, o
prelungire a ideii de interfaţă prietenoasă (user friendly), acesta poate fi definit astfel: eficacitatea,
eficienţa (raportul dintre resursele consumate şi corectitudinea îndeplinirii sarcinilor), satisfacţia
(confortul şi acceptarea de care se bucură sistemul din partea utilizatorilor) şi uşurinţa cu care un
utilizator specificat realizează sarcini de lucru specificate în folosirea unei pagini de web sau a unei
interfeţe electronice (uneori, scopul în care e accesată o pagină web diferă de scopul pentru care a fost

Copyright © Irina Albăstroiu

Toate drepturile asupra acestui material aparţin autorului. Se interzice reproducerea integrală sau parțială și
distribuirea acestui material, fără acordul autorului.
creată aceasta). Utilizabilitatea reprezintă astfel măsura în care un produs poate fi utilizat de
utilizatori specifici pentru a atinge scopuri specifice. Motivele pentru care utilizatorii definesc un
element al interfeţei ca fiind problematic (adică, este, într-un anumit fel, neplăcut) se referă mai ales la
dificultatea folosirii sau învățării modului de utilizare a sistemului și la încetinirea îndeplinirii
sarcinilor ce trebuie sau se așteaptă să fie îndeplinite prin utilizarea sistemului.
Astfel, dacă în privinţa utilităţii site-ului, trebuie găsit răspuns la o întrebare legată de
funcţionalitate, adică „poate site-ul să facă ceea ce ar trebui să facă?”, în cazul termenului de usability,
întrebarea este „cât de simplu, facil, se poate folosi utilizatorul de această funcţionalitate?” (Nielsen,
1993, p.25).
Există câteva aspecte legate de construirea unui magazin online ce trebuie atent gestionate
astfel încât să-i ușureze utilizatorului navigarea, identificarea informa țiilor de care are nevoie și
completarea procesului de comandă, dat fiind faptul că aceasta ar trebui să fie finalitatea a șteptată de
către cei care dețin/administreză site-uri web comerciale. Printre aspectele ce trebuie avute în vedere
se numără (Boronat și Pallares, 2010):
 Alegerea unui nume simplu, scurt și sugestiv pentru magazinul online, care nu va fi
accesat și nu va avea posibilitatea de a vinde în cazul unui URL lung, complicat, greu de re ținut și
care nu transmite nimic din ceea ce l-ar putea asocia cu organizația, domeniul de activitate sau tipul
produselor/serviciilor vândute.
 Timpul de așteptare este esențial în interacțiunea cu clientul, stastisticile (Aberdeen
Group, 2015) arătând că o întârziere de o secundă a încărcării pagini web duce la o scădere cu pâna la
11% a numărului de vizualizări a paginii web, satisfac ția clien ților va scădea cu 16%, iar rata
conversiei va avea, evident, de suferit. Optimizarea codului site-ului, a imaginilor și a bazei de date,
evitarea conținutului redundant și a funcționalităților inutile, folosirea doar a plugin-urilor importante
și a unui server cu o configurație puternică pot ajuta în demersul de a reduce timpul de încărcare;
 Utilizarea judicioasă a spaţiilor albe, care uşurează citirea textului pentru că oferă zone în
care utilizatorul îşi poate odihni ochii. Unii specialişti (Onete, 2005) sunt de părere că este nevoie de
40–60% spaţiu alb în cadrul unei pagini pentru ca aceasta să fie considerată optimă din punct de
vedere al uşurinţei citirii textului. Dar această teorie nu este unanim acceptată, mulţi dintre cei
implicaţi în designul paginilor de Web considerând aceste procente ca fiind echivalente cu o irosire a
spaţiului de prezentare a informaţiilor şi o modificare continuă a ritmului în care utilizatorii parcurg
pagina.
 Construirea unei structuri logice a site-ului, cu design simplu, fără elemente grafice
inutile și informații redundante, cu o grupare coerentă și logică a sec țiunilor în cadrul meniului
principal al site-ului și includerea de legături și titluril descriptive pentru rela ționarea cu celelalte
pagini și pentru o scanare rapidă.
 Asigurarea lizibilității prin mărimea caracterelor și prin culorile folosite pentru fundalul
paginii și pentru text/imagini, care trebuie să asigure un bun contrast astfel încât cititorul să nu depună
efort în încercarea de a citi și a percepe mesajul.
 Indicarea clară a secțiunii/paginii/sub-paginii în care se află utilizatorul pentru orientarea
sa, prin maparea site-ului în fiecare pagină, includerea legăturii spre prima pagină (Home Page) pe
fiecare pagină a site-ului, includerea unei legături înapoi (Back to) pentru orice document care
depinde de cel precedent, existența unei secțiuni în care să fie prezentată Harta site-ului.
 Introducerea corectă a link-urilor astfel încât să simplifice navigarea, nu să deruteze
utilizatorul. Astfel, link-urile introduse în text nu trebuie să fie prea apropiate, să fie vizibile, să fie
inteligibile, scurte, să se înțeleagă clar că este o legătură către o altă pagină a site-ului sau către altă
resursă web (să fie clar diferențiat de restul textului, să se utilizeze culoarea standard – albastru) și să
direcționeze corect (către ceea ce ar trebui și către ceea ce s-ar a ștepta utilizatorul), să fie actualizate,
să înceapă cu un verb sau o întrebare prin care să reprezinte îndemnuri la ac țiune care să genereze
curiozitate și să stimuleze vânzarea, direc ționând spre pagini de produs;
 Acordarea controlului maxim utilizatorului, informându-l corespunzător cu privire la ceea
ce urmează;

Copyright © Irina Albăstroiu

Toate drepturile asupra acestui material aparţin autorului. Se interzice reproducerea integrală sau parțială și
distribuirea acestui material, fără acordul autorului.
  Acordarea de asistență și suport utilizatorului, prin folosirea chat-ului și a mesageriei
instant, prin răspunsuri rapide la întrebările/solicitările primite prin e-mail sau telefon, prin includerea
unor secțiuni de Ajutor și/sau Întrebări și răspunsuri (Q&A - Questions and Answers) sau Întrebări
frecvente (FAQ - Frequently Asked Questions) ;
 Facilitarea accesului la produsele și serviciile oferite , evitând însă încărcarea paginilor de
început cu o varietate de produse sau conținuturi, fără niciun tip de filtru anterior. Astfel, clasificarea
produselor în funcție de diferite criterii îl vor ajuta pe utilizator să capete încredere, iar puncte de
reper în gruparea produselor/serviciilor ar putea fi, în primul rând, referin țele generale ale produselor
(preț, brand) sau cele specifice (culoare, mărime, textură, ingrediente etc., în func ție de natura
produselor). Filtrele și criteriile de grupare a produselor/serviciilor din oferta online trebuie să aibă în
vedere: nevoile utilizatorilor; profilurile utilizatorilor (trebuie avute în vedere tipologia celor care
vizitează site-ul și segmentele de piață vizate); ofertele disponibile; produsele populare (o astfel de
listă le va fi utilă celor care nu știu ce caută și nu sunt familiariza ți cu acele produse, astfel încât
cunoașterea produselor achiziționate de alte persoane îi va ajuta să elimine teama de a se în șela);
produsele recomandate (oferind o referință demnă de luat în considerare în momentul demarării
procesului de informare tot pentru cei care nu știu exact ce doresc atunci când accesează site-ul. Una
dintre tehnicile benefice în acest caz este țintirea comportamentală („behavioral targeting”), prin care
poate fi cunoscut comportamentul unui utilizator pe baza navigării pe site și, astfel, îi pot fi propuse
diferite produse care i se potrivesc); modul de utilizare a produselor (în acest fel, utilizatorul poate fi
și ajutat să înțeleagă modul de utilizare/func ționare a produselor. De asemenea, pot fi prezentate și
pachete sau combinații de produse - procesul de navigare poate fi facilitat dacă sunt prezentate mix-
uri de produse care pot fi cumpărate împreună pentru că pot fi asociate în utilizare și consum).
 Includerea unui motor de căutare, care este util tot în direcția facilitării accesului la
produse și serviciile oferite, dar și la conținutul informațional al site-ului. Un motor de căutare îi poate
ajuta și pe cei care administează site-ul să în țeleagă logica comportamentului de navigare și căutare
pe site și să sporească relevanța rezultatelor. Un motor de căutare implementat în cadrul site-ului,
pentru a fi cu adevărat funcțional și util, trebuie: să fie rapid, relevant, actualizat permanent, fiabil și
poziționat într-un loc vizibil și fix al fiecărei pagini (de regulă, în partea din dreapta-sus, imediat sub
meniul de navigare); să fie intuitiv și să sugereze termeni de căutare și alternative atunci când nu
există rezultate; să corecteze greșeli de ortografie și să propună variante corecte și sinonim e (adică
recunoașterea erorilor comune de scriere - „search handling of common misspellings”); să aibă un
câmp de căutare de minimum 25 de caractere, care să permită căutări mixte, semantice (semantic
search); să permită personalizarea ordonării rezultatelor și a formatului de prezentare a rezultatelor
(listă, rezumat, în detaliu, cu/sau fără imagini etc.). În contextul utilizării inteligenței artificiale,
specialiștii sunt preocupați în prezent și de integrarea func țiilor de căutare vizuală în cadrul site-
urilor.
 Asigurarea unei proces simplu de check-out (descris/prezentat, de asemenea simplu,
etapizat) care să-i permită utilizatorului să se apropie u șor și rapid de obiectivul final (achizi ționarea).
Un proces de check-out facil se realizează prin: reducerea numărului de pași ce trebuie parcurși de
utilizator; indicarea fazei în care se află utilizatorul, dar și a celei care va urma – prin Intelligent
Breadcrumbs; permiterea revenirii oricând la orice fază întreruptă/amânată și reluarea procesului fără
pierderea informațiilor deja introduse; aplicarea unor metode de a-l determina să revină rapid, dacă
deviază de la ruta dorită (de exemplu, reamintire imediată cu privire la produsele pe care le-a
vizualizat anterior, însă nu le-a adus în coșul de cumpărături); existen ța coșului de cumpărături
informativ (GPeC, 2017), adică permiterea vizualizării în orice moment a descrierii și imaginilor
produselor comandate, a valorii coșului de cumpărături); oferirea opțiunii „continuă cumpărăturile”
după adăugarea unui produs în coș sau după finalizarea unei comenzi; oferirea de instrucțiuni și
asistență pentru a-l ajuta pe utilizator în completarea formularului de comandă evitând erorile
posibile; îndemnuri la acțiune cât mai vizibile în orice fază a procesului și stimularea revenirii rapide
la un process întrerupt/amânat (de exemplu, prin coșul de cumpărături persistent (GpeC, 2017) -
conținutul coșului de cumpăraturi se va salva automat și va fi complet la următoarea sesiune a
utilizatorului, acesta putând finaliza comanda în această sesiune ulterioară, dar și prin deschiderea

Copyright © Irina Albăstroiu

Toate drepturile asupra acestui material aparţin autorului. Se interzice reproducerea integrală sau parțială și
distribuirea acestui material, fără acordul autorului.
automată a unei ferestre prin care să se ofere diferite facilită ți pentru comenzi confirmate imediat
(precum o reducere de preț) după câteva minute de inactivitate pe o pagină de check-out ).

Copyright © Irina Albăstroiu

Toate drepturile asupra acestui material aparţin autorului. Se interzice reproducerea integrală sau parțială și
distribuirea acestui material, fără acordul autorului.