Ghid User Experience in Web Design

Ghid User Experience in Web Design

Elemente de web design de succes – cum sa iti transformi site-ul intr-o magnet de clienti

Dupa cum vezi in diagrama de mai sus toate elementele de web design sunt la fel de importante:

1. Utilitatea – imi rezolva produsul/serviciul problemele?

2. Folosinta – este usor de folosit?

3. Dorinta – este placut de utilizat?

4. Valoarea – ofera produsul valoare afacerii?

5. Usurinta de gasire – pot userii sa gaseasca produsul?

6. Accesibilitatea – este usor de folosit produsul de clientii mei?

7. Credibilitatea – este de incredere firma, produsul?

Dupa cum poti vedea toate aceste principii sunt in egala masura la fel de importante.

CAPITOLUL 1 – EXPERIENTA UTILIZATORILOR IN WEB DESIGN – UTILITATEA
Primul element de care sa tii cont este – utilitatea – site-ul tau web este util pentru vizitatori. Utilitatea unui site se rasfrange pe toate elementele de pe site incepand cu design-ul, meniul, culorile, structura, continut, imagini etc.

Celelalte principii nu mai conteaza daca site-ul tau nu este util pentru vizitatori.

Iata 2 elemente importante care determina daca un site este util pentru vizitatori – raspunde intrebariilor din mintea vizitatorului, ii ofera informatii relevante. Facebook, Instagram nu sunt platforme care sa se bazeze pe informarea utilizatoriilor ci pe dezvoltarea unui obicei despre care vom discuta in capitolul 3. Dezvolta diversi declansatori care sa motiveze vizitatorii sa faca o actiune anume.

Deci daca site-ul tau rezolva o problema atunci el este util.

Web Design bazat pe obiectiv – Evitarea durerii si cautarea placeriilor sunt 2 obiective pe care site-ul tau trebuie sa le rezolve. De indata ce ai stabilit ce obiective ai vrea sa indeplinesti pe site trebuie sa dezvolti un site care sa te ajute sa le atingi.

Tot procesul de web design trebuie sa fie centrat pe asistarea vizitatoriilor in satisfacerea nevoilor lor.

Gandirea web design-ului pe baza obiectivelor se imparte 5 etape:

1. Empatizarea cu vizitatorii – pune-te in mintea vizitatoriilor tai – ce sentimente au pe site-ul tau, ce comportament au, ce vor sa gaseasca pe site-ul tau.

2. Definirea – alege 3 probleme importante pe care site-ul tau le rezolva.

3. Idealizarea – impreuna cu echipa ta priveste problema din mai multe unghiuri. Dezvolta o sesiune de brainstorming.

4. Prototip – dezvolta o schita site-ului tau fie pe o coala A4 fie in Adobe Photoshop cu elementele fiecarei pagini. Astfel vei avea o idee despre cum va arata site-ul tau.

5. Prototip final – dupa ce ai dezvoltat schita, apuca-te de dezvoltat PROTOTIPUL.
Inainte de a lansa online site-ul tau trebuie sa TESTEZI DES pentru a gasii erorile de pe site. Pe langa aceasta dezvolta des teste de tip A/B pentru a vedea la cele elemente de pe site reactioneaza mai bine userii. Din experianta noastra ( STAR MARKETING) recomandam sa ai mereu pe site activ un test A/B si o analiza calitativa pe site prin surveys, heat maps, dar si o analiza cantitativa – Google Analytics.
CAPITOLUL 2 WEB DESIGN PENTRU FOLOSINTA

Deci acum ca ai aflat ce mindset sa ai atunci cand dezvolti un site web este timpul sa vezi cum pui toate elemente sa “lucreze pentru tine”.

Este o vorba in lumea de afaceri americana ” dezvolta produsul potrivit, apoi dezvolta cat mai bine acel produs”. Folosirea site-ului tau nu trebuie sa ii faca pe vizitatori sa gandeasca prea mult si sa iti verse nervii. Site-ul tau trebuie sa fie usor de utilizat de vizitatori.

Daca ne luam dupa un sablon de web design facut de Nielsen Norman Group putem imparii usurinta de utilizare a site-ului tau in cateva componente:

1. Usurinta de invatare – un user nou care ajunge pe site trebuie sa isi dea seama rapid unde se gasesc informatiile utile.

2. Eficienta – userii de pe site trebuie sa isi indeplineasca obiectivele rapid si usor.

3. Lipsa erorilor – site-ul tau web nu trebuie sa aiba erori care sa fie afisate vizitatoriilor.

4. Satisfactia – design-ul site-ului trebuie sa fie satisafacator din punct de vedere vizual.

Sa vedem cele 4 elemente in detaliu.

USURINTA DE INVATARE – toti cand intram pe un site web stim ca in partea de sus se afla meniul, in footer informatiile de contact. De aceea daca vrei un site cat mai simplu este recomandat sa ai un sablon care sa fie usor de amintit si de invatat de vizitatori. Aceste sabloane sunt usor de recunoscut.

Dezvoltarea de elemente mari care sa le spuna vizitatoriilor de pe site ce ofera site-ul tau/afacerea ta. Aceste elemente mari trebuie sa fie si usor de amintit.

Foloseste spatiile albe – spatiile albe pot sa iti creasca conversiile rapid si sa imbunatateasca experienta de utilizare pe site.

EFICIENTA – sunt 2 parti cand vine vorba de eficienta unui site – cat de usor si rapid isi indeplinesc vizitatorii obiectivele si cati pasi trebuie sa parcurga userii pentru a-si indeplinii obiectivele.

Urmeaza pasii de mai jos pentru a dezvolta eficienta site-ului tau web:

– foloseste diverse culori pentru a seta o ierarhie vizuala – culoriile saturate sunt mai vibrante si atrag mai usor atentia.

– dezvolta elemente usor de accesat – meniu, categorii, galerii

– viteza site-ului este foarte importanta in ziua de azi pentru ca vizitatorii nu mai au atat de multa rabdare pentru a astepta ca site-urile sa se incarce

– reorganizea elementele de pe site pentru a reduce timpul de gandire pentru o actiune anume

LIPSA ERORILOR – nu vrei nici tu sa intri pe un site si sa vezi erori de programare afisate nu-i asa? De aceea trebuie ca toate elementele de pe site sa fie functionale.

SATISFACTIA – cand analizam tabelul lui Maslow in web design functionalitatea si usurinta de utilizare sunt al baza. Iata cateva elemente de care sa tii cont pentru a oferii un sentiment placut userilor cand intra pe site:

– microinteractiuni – cele mai mici interactiuni pe site adunate ofera o experienta placuta. Adauga animatii pe site, Gifs.

6 Pasi pentru a imbunatatii experienta de utilizare pe site:

1. Dezvolta un user research

Usability-ul unui site este dezvoltat pe schita nr 1. Afla cat cat mai multe despre piata ta tinta, vizitatorii de pe site prin:

1. Analiza datelor – noi, la Star Marketing, folosim KissMetrics pentru a dezvolta evenimente precum – landing page, click pe un element samd. Dupa o perioada de testare vedem care elemente au atras cel mai mult atentia si care segmente de site/pagina sunt mai performante.

2. Sondaje de opinie – cand vorbesti direct cu userii tai trebuie sa te concentrezi mai mult pe comportament decat pe opinii. Opiniile pot varia si sunt influentate de elemente interioare/exterioare.

3. User recording – analizeaza unde stau cu mouse-ul vizitatorii de pe site, ce actiuni fac pe site pentru a vedea unde sa actionezi.
2. Dezvolta continut si o harta

De exemplu poti rapid sa schitezi traseul pe care vrei ca vizitatorii de pe site sa il urmeze pentru a indeplinii o actiune pe care tu o doresti cum ar fi – sa te sune, sa te contacteze sau sa faca o comanda daca ai un site de ecommerce.

3. Structura efectiva a site-ului

Este un stadiu preliminar al procesului de web design prin care intaresti structura, layoutul, arhitectura site-ului. Poti incepe prin a explora fiecare pagina si sa vezi ce actiuni poate sa faca un vizitator pe acea pagina.

Structura unui site este ca un schelet. Aceasta te ajuta sa iti dezvolti continutul, locul in care diverse elemente vor fi pe site si sa iti faci o idee despre elementele vizuale.

4. Prototip

Dupa ce ai parcurs cele 3 elemente sau pasi de mai sus trebuie sa treci la urmatorul nivel acela de a dezvolta un prototip al site-ului. Nu pune foarte mare accent pe detaliile mici in aceasta faza ci concentreaza-te pe elementele importante.

5. Testeaza

Dezvolta un prototip functional si testeaza-l pe minim 5 useri. Astfel vei afla 5 pareri diferite despre site-ul tau in stadiul de pre-lansare.


CAPITOLUL 3 WEB DESIGN PRINCIPIUL 3- DORINTA

Fundamentele nevoilor umane se aplica si in web design – mancarea si adapostul sunt inlocuite de functionalitate si usurinta de utilizare. Ceilalti factori care au ramas tin de partea vizuala. Tine minte ca dorinta si placerea de utilizare a site-ului tau il vor diferentia fata de concurenta ta.

Astfel site-ul tau trebuie sa interactioneze cu vizitatorii si sa ii incante.

Site-urile mai placute vizual sunt mai atractive si dezvolta un sentiment de placere.

Studiile au aratat ca raspunsurile emotionale sunt cei mai importanti factori de decizie atunci cand logica este egala. Oamenii percep companiile care au site-uri mai placute vizual ca fiind mai de incredere.

Celebrul Don Norman a spus ca, cu cat site-ul tau necesita mai putin efort din partea vizitatoriilor cu atat mai mult timp stau oamenii pe site.

Dorinta este perceputa diferit. Suntem fiinte unice care au diverse nevoi si dorinte. Un design placut este mult mai mult decat vizual.

Designul web bazat pe dorinta se rasfrange la 2 nivele – suprafata si importanta.

Placerea la suprafata include design vizual de calitate, consistenta si profesionalism.

Partile intangibile ale UX – user experience este important daca vrei sa ai un site profesional care sa iti aduca clienti.


CAPITOLUL 4 WEB DESIGN PENTRU VALOARE

In timp ce web design-ul are nevoie de arta, creativitate si expresie personala la final site-ul tau web trebuie sa vanda si sa iti aduca clienti, nu-i asa?

In acest capitol vom vedea cum sa dezvolti o strategie de web design bazata pe obiective:

1. Cunoaste modelul de afacere

Afla ce vinde afacerea pentru care faci un site, afla care este piata tinta, ce nevoi, dorinte au clientii potentiali.

Afla care sunt segmentele de piata – ce grupuri de clienti aduc cei mai multi bani in afacere.

Care este propozitia de valoare a afacerii?

2. Intelege cele 5 obiective de afaceri

O afacere are 5 obiective:

– cresterea veniturilor
– scaderea costurilor
– atragerea mai multor clienti
– dezvoltarea gamei de produse/servicii
– cresterea brandului

3. Elimina elementele care nu aduc valore site-ului

Frictiunea este cel mai mare inamic cand vine vorba de experienta de utilizare. Elimina obstacolele care vin in fata vizitatoriilor.

Cateva elemente care dezvolta friciunea sunt:

– imagini neclare
– viteza de incarcare
– prea multe elemente de completat
– butoane prea mici
etc

4. Dezvolta experimente

Dupa ce ai aflat ce fac vizitatorii de pe site si ce actiuni fac pe paginile mai putin performante, trebuie sa dezvolti teste. Testeaza diverse elemente de pe paginile neperformante cum ar fi – structura, call to action, design-ul, butonul de CTA, pozitia elementelor.
CAPITOLUL 5 WEB DESIGN PENTRU USURINTA DE GASIRE A INFORMATIILOR

Usurinta de gasire a informatiilor importante pe site este un element diferentiator intre site-urile mediocre si cele performante.

Timpul, convenienta, intelegerea si design-ul vizual sunt factori determinanti. Arhitectura informatiilor, meniul si design-ul acestuia joaca un rol important.

Dezvolta o structura a informatiilor corecta

Este usor sa te pierzi in complexitatea site-urilor web. Te vom ghida printr-un proces utilizat de noi si de marile agentii de web design din Europa si SUA prin care sa afli cum sa dezvolti o arhitectura a informatiilor cat mai utila.

Meniu top down sau bottom up.

Sunt 2 ideologii de meniu dupa care sa construiesti structura meniului de pe site.

Meniul de tip top-down se concentreaza pe imaginea de ansamblu. Identifica obiectivele afacerii si a useriilor apoi organizeaza navigatia dupa acele obiective. De indata ce deciziile la nivel inalt sunt efectuate, designerii pot sa se concentreze pe alte detalii.

Pe de alta parte meniul de tip bottom up se focuseaza pe detalii in primul rand. Aceasta abordare se focuseaza pe persoane si pe research.

Cea mai buna strategie este sa incorporezi cele 2 abordari. Incepe cu meniul de tip top-down indeplineste obiectivele useriilor, apoi vino cu un meniu de tip bottom-up.

2. Meta Data si ” Categorii Cruciale”

Cand vine vorba de a organiza continutul de pe site, asigurarea meta datelor pentru fiecare pagina de pe site ajuta la o mai buna experienta de utilizare pentru ca userii deja stiu la ce sa se astepte pe pgina ta pentru ca meta datele ii dau cateva indicatii esentiale.

Meta datele sunt compuse din titlu, url si descrieri. Dar pe langa aceastea sunt si informatiile importante pentru useri cum ar fi caracteristicile produsului.

De indata ce ai pus cap la cap meta datele de pe site trebuie sa te ocupi de categoriile importante.
Iata 6 elemente cruciale care determina succesul arhitecturii informatiilot pe site-ul tau:

1. Link-uri si categorii descriptive – ofera detalii importante despre link-uri si categorii.

2. Evita navigarea in functie de format – Sa zicem ca ai 10 video-uri si vrei sa le clasezi in mod cat mai util pt userii. Nu pune toate video-urile intr-o categorie separata.

3. Fi onest – poti adauga link catre orice continut doresti dar daca userul nu ajunge pe pagina promisa va fi dezamagit.

4. Limbaj usor de inteles – de dragul claritatii foloseste un limbaj si cuvinte usor de inteles.

5. Referinte – daca prezinti o idee sau un concept, leaga-l cu alt continut relevant.

6. Ofera mostre – studii de caz, video-uri, imagini.
4 Sabloane de pagini pentru arhitectura informatiilor

Putem sa organizam structura unei pagini in 5 categorii de la cele mai simple la exemple mai complexe:

1. Single Page – cea mai de baza si usoara metoda de navigare. Daca tot site-ul tau se focuseaza pe o tema centrala – promovarea unui produs, organizatii, ii va salva timp userului. Totusi cu cat ai mai multe informatii intr-un singur loc cu atat mai putin eficienta va devenii.

2. Structura flat – este un pas mai in fata. Aceasta abordare trateaza fiecare pagina la fel, permitand navigarea intre pagini.

3. Pagini indexate – cea mai des intalnita forma de arhitectura a informatiilor – home page – ca factor central si restul paginilor.

4. Ierarhie stricta – pentru site-urile de ecommerce mai ales. Toate informatiile se leaga de homepage,apoi se rasfrange pe categorii si subcategorii.
CAPITOLUL 6 WEB DESIGN PENTRU ACCESIBILITATE

Accesibilitatea are o reputatie proasta in web design. Pare scumpa, grea de mentinut si efectuat, urata si putin necesara – dar nu este adevarat. Accesibilitatea nu este ceva extra pentru ca indeplineste conditiile unei interfete bune si unui design de calitate.

DESIGN UNIVERSAL

Se refera la faptul ca design-ul unui site este usor de folosit de oricine si de pe orice device.

Pe langa aceasta design-ul universal ajuta si pe cei cu dizabilitati sa isi dea seama unde sunt anumite elemente pe site. Toate aceste detalii sunt aplicate cu scopul de reducere a frictiunii.

Ce inseamna Accesibilitatea pentru experienta de utilizare pe site?

Inseamna ca site-ul tau trebuie sa fie usor de folosit de orice si de pe orice device. Exista un concept numit POUR – perceptibil, operabil, usor de inteles si robust.

– Perceptibil – este o gama de alternative de la experienta continutului preum text-alternative ale audio-ului.
– Operabil – userii trebuie sa inteleaga despre ce este vorba pe site in maxim 3 secunde.
– Usor de inteles – continutul este usor de inteles si citit.
– Robust – este usor de accesat de pe orice device.
CAPITOLUL 7 WEB DESIGN PENTRU CREDIBILITATE

Prima impresie conteaza

Ai doar 4 secunde pentru a face o prima impresie buna cu site-ul tau. Potrivit Nielsen Norma Group userii vor parasii site-ul tau in 10-20 de secunde daca nu le captezi atentia. Asta inseamna ca nu ai prea mult timp de pierdut pentru a face o prima impresie buna.

Un studiu facut la Standfort arata ca elementele vizuale au cel mai mare impact la crearea unei prime impresii bune.

O mare componenta a credibilitatii in online este sa eviti lucrurile care provoaca experiente proaste. Pe langa indeplinirea cerintelor accesiblitatii si performantelor vom vedea cele mai folositoare tactici:

1. Consistenta

O parte buna a consistentei este legata de modul in care prezinti informatiile. Consistenta se manifesta in diverse forme – prima – design-ul tau trebuie sa fie consistent in exterior cu cerintele userilor si experientele anterioare. In al doilea fel – designul intern trebuie sa fie consitent pe fiecare pagina.

Iata cateva elemente de consistenta interioara – acel stil de teme si paginatie pe diverse pagini si ecrane.

Layout-ul si navigatia consistenta inseamna ca toate elementele de pe site si de pe diverse pagini sunt in acelasi loc.

Consistenta functionala – inseamna ca vizualul reflecta aceeasi functie pe tot design-ul.

2. Asigurarea Calitatii

Este dificil sa despici toate problemele de calitate care pot aparea in design. Iata cele mai importante 2 elemente de care trebuie sa tii cont:

1. Functionalitatea – toate butoanele trebuie sa functioneze. Aceasta include functiile de click dar si alte elemente precum animatiile.

2. Proofreading – evita greselile gramaticale, textul prea mic.

3. Evita butoanele false – doar butoanele trebuie sa arate ca butoanele. Butoanele false fac ca frustrarea useriilor sa creasca.

Cum sa ai un site mai credibil prin dovada sociala:

Dovada sociala este un element care face ca site-ul tau sa fie mai credibil. In marketing multe companii colaboreaza cu vedete pentru a-si vinde produsele. Iata cum dezvolti dovada sociala pe site-ul tau:

1. Logo-uri ale clientiilor faimosi

Sablonul prin care afisezi logo-urile clientiilor potentiali este o metoda prin care sa dezvolti credibilitatea pe site.

2. Testimoniale

Daca nu ai recomandari de la clientii mari trebuie sa ai testimoniale de la clientii mici.

3. Numere si statistici

Arata cate produse ai vandut pana acum, cat produse ai pe site, cati clienti ai, samd.

4. Studii de caz

Foloseste un portofoliu de clienti si studii de caz cu metodele prin care i-ai ajutat sa isi indeplineasca obiectivele.

Summary
Article Name
Ghid User Experience in Web Design
Description
Ghid User Experience in Web Design - afla cum sa dezvolti site-uri puternice, interactive care sa ofere o experienta de utilizare placuta viziatoriilor pentru a genera mai multe vanzari!
Author
Publisher Name
Star Marketing