Social Smarts

Web Usability
Essentials
Olivia Vereha
contact@oliviavereha.ro
www.oliviavereha.ro
0729990546
Scopul și
durata vizitei
 1.0
Read-only

 2.0
Social sharing

 3.0
Internet of Things

 4.0
Internet of Everything
 The Internet

 936.362.535 website-uri active

 3.216.458.338 useri în lume
 11,178,477 utilizatori de internet in România

(internetlivestats.com)
 Arhitectură web

Modul în care construim o

soluție web care să ne ajute
în îndeplinirea obiectivelor
de business.
 Arhitectură web

 web usability
 information architecture
 user experience design
 interaction design
 user interface design
 human-computer interaction
 information design
 web & graphic design
 User experience

”User experience” face referire la modul în care un produs se

comportă și este folosit în lumea reală. O experiență pozitivă este
una în care atât obiectivele utilizatorului cât și cele ale companiei
care realizează produsul sunt atinse.

Jesse James Garrett, The Elements of User Experience

 Usability

 Conceptul de usability face referire la ușurința cu care un utilizator

învață să folosească și folosește pe termen scurt, mediu sau lung un
produs.

 Usability face referire la unul dintre procesele componente ale

experienței utilizatorului, dar nu este singurul de care trebuie să țineți
cont.
 Usability

Usability este despre Și depinde de

 Eficacitate  Tipul utilizatorilor

 Eficiență  Scopurile utilizatorilor
 Satisfacție  Contextul utilizării
 Definirea obiectivelor

 De ce ne trebuie?
 Cine vrem să ajungă pe site?
 Ce vrem să facă pe site?
 Poate face deja pe alt site ce face la noi? Cine e concurența?
 Care este elementul care ne diferențiază?
 Are sens produsul nostru online în contextul în care îl vom lansa? (Vor
mai avea nevoie utilizatorii de el când va fi gata?)
 Avem resursele necesare pentru a-l dezvolta?
 Definirea obiectivelor

 Termen scurt  Termen lung

 Landing page  Website

 Microsite  Magazin online
 Aplicatie one-time-only  Revista online
 etc  etc
 Ce fac utilizatorii?

 Percep conform așteptărilor

 Pe baza trecutului: experiența proprie
 Pe baza prezentului: contextul actual
 Pe baza viitorului: care este scopul lui
Ce vedeți aici?
 Obișnuința

Dacă nu e stricat, nu îl repara.

•Utilizatorii de software și cei

cu experiența în navigarea pe
web dau click pe butoane fără
să le acorde aceeași atenție de
fiecare dată.

•Percepția lor asupra a ceea ce

văd pe un ecran este condusă
mai degrabă de ceea ce
experiența i-a învățat în trecut
decât de ceea ce există de fapt
pe ecran.
Unde este
logo-ul YouTube
în imagine?
 Importanța scopului

Cel de Skype
unde era?
 Importanța scopului

Când oamenii navighează printr-un

website sau printr-o interfață, ei
caută anumite informații și
anumite funcțiuni, prin urmare, tot
ce nu este de interes rămâne
necitit.

Oamenii știu că atenția lor este

limitată și se comportă în
consecință. Când urmăresc un
scop, ei vor alege acele căi care le
sunt familiare, când este posibil, și
vor evita să descopere altele noi.
Ce faci când nu ai un scop?
Ce faci când nu ai un scop?
 Cum se formează obiceiurile?

 ”Obiceiurile se formează atunci când creierul o ia pe o scurtătură și

nu mai deliberează asupra acțiunilor pe care trebuie să le facă în
continuare”
 Modelul Hook

 Cârligul

 Acțiunea

 Recompensa

 Investiția
Birocrația în online
Meniurile

WYSIWYG
WHAT YOU SEE IS WHAT YOU GET
 Meniurile

 Meniurile ne spun ce găsim, unde găsim

 Ne învață cum să folosim un site
 Dau credibilitate proprietarilor site-ului, dacă sunt bine făcute și de
ajutor
 Meniurile ne urmăresc peste tot în site, mai puțin în pagina în care
userul are treabă cu adevărat: în pagina în care face achiziția, după ce a
apăsat ”Cumpără”.
 Meniurile

 Home
 - About
 - Category 1
 - Subcategory 1.1
 - Subcategory 1.2
 - Category 2
 - Subcategory 2.1
 - Subcategory 2.2
 - Category 3
 - Contact
Convenții
Hansel și Gretel
DESIGN & USABILITY
The first website
Google (1996)
Google (1998)
Google (2015)
Apple (1996)
Apple (2015)
Facebook (2004)
Facebook (2015)
 Tipuri de siteuri

 Motoare de căutare
 Siteuri informaționale
 Siteuri personale
 Bloguri
 Siteuri de companie
 Magazine online
 Rețele sociale
 Siteuri de file sharing
 Platforme colaborative
 Ce nu lipsește niciodată dintr-un website

 - Identitatea vizuală
 - Despre business
 - Contact și căutare
 - Butoane de sharing în rețelele sociale
 - Conținut
 - Call-to-action
 Scopul meu vs scopul userului

Cum facem utilizatorul să îndeplinească acțiunile pe care ni le dorim?

Play Time
 Principiile Gestalt

• Sistemul nostru vizual impune în mod automat o structură

asupra a ceea ce percepem.

• Suntem obișnuiți să vedem figuri complete, figuri familiare

și obiecte reale, înainte să ne gândim la forme neregulate,
margini discontinue și regiuni deschise.
 Proximitate

• Distanța relativă dintre elemente într-un display ne

afectează percepția și ne face să organizăm elementele
de pe ecran în grupuri și subgrupuri.

• Obiectele care sunt apropiate unele de altele formează

un grup în mintea noastră, în timp ce elementele aflate
la o distanță suficient de mare unele de altele sunt
individualizate sau încadrate în grupuri diferite.
Formularele online
 Continuitate

 Vederea umană este antrenată să vadă forme continue și

unde este cazul, pune ea din buzunar.
 Închidere

 Sistemul nostru vizual încearcă mereu să închidă figurile

deschise pentru a le putea percepe astfel ca obiecte
întregi și nu ca piese separate.
Junior Jazz Dance Class
 Simetrie

• Avem tendința de a simplifica mereu contextele vizuale.

De cele mai multe ori informațiile din câmpul nostru
vizual au mai multe posibile interpretări, dar vederea
noastră organizează în mod automat informația și
interpretează datele de așa natura încât să le simplifice
și să le dea o simetrie.
 Obiect/fundal

 Mintea noastra separă în mod automat obiectele de

fundalul lor.
 Soarta comună

 Obiectele care se mișcă împreună sunt percepute ca un

grup, implicit cele statice formează și ele grupul lor
 Cum ne folosim de principiile Gestalt

 Puneți pe hârtie elementele pe care le vreți cuprinse în

siteul vostru și analizați imaginea finală având în minte
principiile Gestalt:

Proximitate, Similaritate, Continuitate, Închidere, Simetrie,

Obiect/Fundal și Soartă Comună

pentru a vă asigura că nu lăsați loc de interpretări și că nu

creați legături între elemente între care nu ar trebui ca ele
să existe.
 Ierarhia vizuală
Unul dintre cele mai importante scopuri de urmărit în structurarea
informațiilor prezentate este crearea unei ierarhii prin care:

● Să spargeți informația în secțiuni distincte și secțiunile mari în

subsecțiuni
 Ierarhia vizuală
Unul dintre cele mai importante scopuri de urmărit în structurarea
informațiilor prezentate este crearea unei ierarhii prin care:

● Să spargeți informația în secțiuni distincte și secțiunile mari în

subsecțiuni

● Să etichetați fiecare secțiune și subsecțiune în mod corect pentru a

ajuta userul să identifice conținutul pe care îl va găsi acolo
 Ierarhia vizuală
Unul dintre cele mai importante scopuri de urmărit în structurarea
informațiilor prezentate este crearea unei ierarhii prin care:

● Să spargeți informația în secțiuni distincte și secțiunile mari în

subsecțiuni

● Să etichetați fiecare secțiune și subsecțiune în mod corect pentru a

ajuta userul să identifice conținutul pe care îl va găsi acolo

● Să prezentați secțiunile și subsecțiunile consistent, dar în

conformitate cu importanța fiecăreia
 Cu toții putem vorbi, nu toți știm să citim

A vorbi și a înțelege limba vorbită este o abilitate naturală

a omului. Cititul nu este.
Folosiți:
Login again. / Reautentificare.

În loc de:
Sesiunea dumneavoastră a expirat, vă rugăm să vă reautentificați.
 Nu țipați la useri

TEXTELE SCRISE CU CAPSLOCK SUNT DIFICIL DE

CITIT PENTRU CĂ LITERELE SUNT FOARTE SIMILARE
ÎNTRE ELE. ÎN PLUS, PARE CĂ ȚIPAȚI LA USERI.
 Zgomotul vizual

• Zgomotul vizual din jurul textului poate afecta modul în care

percepem ceea ce citim. În plus, este foarte obositor și aveți multe
șanse ca userul să abandoneze textul foarte repede.

• În cazul siteurilor și nu numai, zgomotul vizual rezultă din

• imagini de fundal alese greșit,
• din lipsa contrastului între fundal și text și
• din alegerea unor culori pentru fonturi care nu ajută la sporirea lizibilității.
 Zgomotul vizual

Zgomotul vizual nu este doar fotografic.

Zgomotul vizual se referă în special la fundaluri.
Zgomotul vizual nu ține doar de fundaluri.
Zgomotul vizual poate fi cauzat și de text.
Zgomotul vizual poate fi cauzat și de repetiția inutilă a cuvintelor.
Zgomotul vizual este rău.
Scrieți fără zgomot vizual.
 Zgomotul vizual

Zgomotul vizual nu este doar fotografic.

Zgomotul vizual se referă în special la fundaluri.
Zgomotul vizual nu ține doar de fundaluri.
Zgomotul vizual poate fi cauzat și de text.
Zgomotul vizual poate fi cauzat și de repetiția inutilă a cuvintelor.
Zgomotul vizual este rău.
Scrieți fără zgomot vizual.
Mișcarea ochilor

Când citim de la stânga la dreapta

ni se pare că înțelegem
mai ușor ce
citim și ne ia mai puțin timp să
trecem prin
text și să îl analizăm.
 Mișcarea ochilor

...asta dacă nu suntem arabi

…sau din oricare alt stat căruia îi place
să își complice existența lingvistică.
 Alinierea

In cazul citirii automate (citirii rapide) ochii noștri sunt antrenați să

revină în același punct aliniat orizontal din care au început citirea și să
coboare un rând dupa finalul fiecărui alt rând terminat.

Dacă textul este centrat sau aliniat la dreapta, fiecare rând începe din alt
punct.
Mișcările automate ale ochiului trimit privirea în
punctul greșit
în aceste cazuri, avem nevoie să ne ajustăm
conștient punctul din care începem
și reîncepem citirea.

Dacă ieșim din modul automat, acțiunile noastre încetinesc foarte mult.
Folosiți-vă de :

● dimensiunea fonturilor
● spații
● bulleturi
● bold, italic, underline
● marcaje grafice
Fonturi
Fonturi bune pentru web
Fonturi nerecomandate pentru web
Forma contează

Jessica Hische (graphic designer)

Forma contează și mai mult în limba română

FATA
MAMA ARE O FATĂ
AI CEVA PE FAȚĂ
PISICA FĂTA
 Cum procedăm

● Cand concepeți un layout asigurați-vă că textele cuprinse în el

întrunesc condițiile pentru citirea automată. Nu folosiți fonturi
complexe sau fonturi greoaie, aveți grijă la fundaluri, folosiți aliniere
corectă etc

● Folosiți un vocabular consistent, dar accesibil

● Formatați textul de așa natură încât să facilitați scanarea rapidă:

utilizați liste, bold, underline și culori în mod corect.
 Capacitatea umană de a percepe culori este limitată

 Vederea este optimizată pentru a detecta contrast [margini] nu

strălucire
 Capacitatea noastră de a distinge culori depinde de modul în care ele
sunt prezentate
Care dintre cele două nuanțe
de verde este mai intensă?
 Capacitatea umană de a percepe culori este limitată

 Vederea este optimizată pentru a detecta contrast [margini] nu

strălucire
 Capacitatea noastră de a distinge culori depinde de modul în care ele
sunt prezentate
 Unii oameni suferă de deficiențe de vedere și nu percep culorile corect
sau deloc
 Afecțiuni de vedere

Aproximativ 8% dintre bărbați și puțin sub 0.5% dintre femei au un deficit

de percepție a culorilor.

Daltoniștii nu pot distinge:

(A) Roșu închis de negru,
(B) Albastru de mov,
(C) Verde deschis de alb.
 Capacitatea umană de a percepe culori este limitată

● Vederea este optimizată pentru a detecta contrast [margini] nu

strălucire

● Capacitatea noastră de a distinge culori depinde de modul în care ele

sunt prezentate

● Unii oameni suferă de deficiențe de vedere și nu percep culorile corect

sau deloc

● Ecranul fiecărui user și condițiile de vizualizare afectează modul în

care percepem culorile.
http://snapsnapsnap.photos/iphone-6s-camera-comparison/
 Ce factori ne afectează abilitatea de a distinge culori

 Paloarea

 Dimensiunea petei
de culoare

 Separarea
culorilor
 Factori incontrolabili

 Variațiile de culoare ale ecranelor utilizatorilor

 Display-uri alb-negru
 Unghiul de vizualizare
 Iluminarea încăperii
 Tips&Tricks

• Pentru a putea testa dacă nuanțele folosite de voi sunt suficient de

diferite, vizualizați imaginea în grayscale.

• Dacă nu poți distinge tonurile când sunt randate ca tonuri de gri atunci
nici în realitate ele nu contrastează suficient
Căldura, iubire, pericol, îndrăzneală, entuziasm, viteza, energie, determinare, dorință, pasiune
(creează urgență – folosit adesea în vânzări)
Feminism, dragoste, îngrijire (folosit în vânzări pentru produse destinate femeilor)
Pofta de viață, ieftin, permisiv, entuziasm, creativitate, uneori agresivitate, mâncare (folosit pentru
cumpărături de impuls sau pentru anunțuri speciale)

Atenționare, confort, foame, optimism, vară, conflict (folosit pentru avertizări)

Eco, Prospețime, tinerețe, ajutor, bunătate (acțiuni umanitare, acțiuni pro-bono)

Pace, profesionalism, loialitate, onoare, încredere, plictiseală, stabilitate, conservator (recomandat
pentru instituții financiare sau medicale)

Putere, nobil, sofisticat, regalitate, eleganță, magie (vânzari pentru userii cu vârste înaintate)

Relaxare, eco, pământesc, solid, autenticitate, rezistență

Tradiționalism, seriozitate, plictisitor

Eleganță, putere, formalitate, depresie, morbiditate, noapte (produse luxury)

Puritate, pace, incocență, simplitate, răceală, curățenie

 Vederea periferică are puțini megapixeli

● Rezoluția vederii noastre scade din centru spre periferie și odată cu

vârsta

● Elementele vizuale prezentate în culori terne, localizate în periferia

vederii nu sunt observabile decât dacă ele se află în mișcare.
 Vederea periferică are puțini megapixeli

● Când cineva dă click pe un buton, acela este de obicei locul în care

focalizează cu vederea.

● Orice alt obiect situat la o distanță mai mare de doi centimetri față de
acest punct intră în vederea periferică unde rezoluția este scăzută. Dacă
după ce face un click userului îi apare un mesaj în altă zonă a paginii
este posibil să nu îl observe, dacă este static.
 Soluția?

● Așezați mesajul acolo unde userul îl vede

● Dacă este un mesaj de eroare, marcați-l corespunzător cu un
simbol generic
● Folosiți corect culorile (roșu pentru greșeli, orange pentru
impuls, verde pentru aprobare)

● SAU.....
Vederea periferică
detectează mișcarea. Dacă
vreți ca un element să sară
în ochi atunci folosiți un
efect de mișcare asupra lui.

Nu abuzați.
Conținutul dictează forma
Video
Foto/Portofoliu
Conținut scris
Wireframing
Usability testing
Build
USEFUL
websites*
Find me here:
www.oliviavereha.ro
contact@oliviavereha.ro
www.facebook.com/olivia.vereha
https://ro.linkedin.com/in/oliviavereha
*și variante mobile la fel de bune 0729 990 546