REFERAT LA ERGONOMIE

Website-ul ergonomic

Indrumător:
Prof. univ. dr. ing. NEDEFF VALENTIN
Student:
SIMION DUMITRU
Grupa: 342 B

-2011-
 1. Introducere

Comunicarea e prezentă peste tot în jurul nostru. Comunicarea este

legată de existența noastră ca oameni, mai apoi ca societate, fiindcă ființele
umane și comunicarea sunt interdependente. Fără comunicare și limbaj noi ca
ființe ce interacționăm și relaționăm în cea mai mare parte, sau chiar în
întregime prin actul comunicării, existența noastră pe pământ ar fi inutilă.
Comunicarea este un proces dinamic, aflat într-o permanentă
transformare. Societatea există datorită comunicării, ea înseamnă comunitate
și este văzută ca un proces care implică participare din partea membrilor unei
societăți. Comunicarea îmbracă forme variate și diverse, dintre care ne vom
opri la comunicarea mediatizată și la comunicarea de masă, care este de fapt o
formă a comunicării mediatizate, destinată unor mase mari de indivizi și poate
avea o formă subiectivă, care are ca scop manipularea opiniei publice, și
forma obiectivă, care dorește simpla informare a persoanelor. (1)
Pentru a face un schimb de idei, sau pentru a împărtăşi cunoştinţe cu
persoane aflate departe, e nevoie de mijloacele cu ajutorul cărora să se
transmită informaţiile la distanţă: acestea sunt mijloacele de comunicare in
masă sau mass-media. Internetul este o cale de a transmite informaţia într-un
mod rapid şi eficient. Dezvoltarea acestei reţele a reţelelor a condus la
denumirea secolului în care trăim – era informaţiei.
Internetul, care nu trebuie confundat cu serviciul World Wide Web, se
referă la rețeaua mondială unică de computere interconectate prin
protocoalele (regulile) de comunicare Transmission Control Protocol și
Internet Protocol, numite pe scurt stiva TCP/IP. Precursorul Internetului
datează din 1965, când Defence Advanced Research Projects Agency
(en:DARPA) (Agenția pentru Proiecte de Cercetare Înaintate de Apărare - a
Ministerului Apărării, Department of Defense sau DoD din SUA) a creat
prima rețea de computere interconectate sub numele ARPAnet. Super-rețeaua
din zilele noastre a rezultat din extinderea rețelei Arpanet. World Wide Web
este doar unul din multele servicii oferite prin Internet. (2)
În ziua de astăzi Internetul este susținut și întreținut de o mulțime de
firme comerciale. El se bazează pe specificații tehnice foarte detaliate, ca de
exemplu pe așa-numitele "protocoale de comunicație", care descriu toate
regulile și protocoalele de transmitere a datelor în această rețea. (2)
Aplicațiile Internetului sunt numeroase: în primul rând afișarea de
informații mai mult sau mai puțin statice cu formă de text, imagini și sunete
(așa-numitele pagini web), apoi poșta electronică e-mail, transferul de fișiere
de date și informații, chat, video și video on demand, telefonie și telefonie cu
2
imagine prin Internet, televiziune prin Internet, e-commerce, sondări de
opinie, mediu pentru răspândirea știrilor, mediu pentru toate genurile de
grafică și muzică, deschiderea unei sesiuni de lucru de la distanță, grupuri de
discuții pe teme prestabilite, jocuri interactive prin rețea, operații bancare
(Internet banking) și multe, multe altele. Printre ele, World Wide Web,
prescurtat WWW, deseori numit numai "web", este la loc de vârf, deoarece
este o aplicație multimedială și integrativă, cu o interfață de utilizator
(Graphic User Interface, GUI) foarte atrăgătoare din punct de vedere grafic,
practică și simplu de folosit. WWW a fost inventat de către Tim Berners-Lee
în anul 1993. (2)
Pentru folosirea tuturor aplicațiilor din web este nevoie în general doar
de un singur program multifuncțional numit browser (cuvânt englez).
Exemple de browsere: MS Internet Explorer, Mozilla Firefox (provenit din
Netscape Navigator), Opera, Apple Safari ș.a. (2)

2. Pagina web

O pagină web este o resursă aflată în spațiul web (WWW) din Internet,
de obicei în format HTML sau XHTML (extensia numelui fișierului fiind de
cele mai multe ori .html sau .htm) și având hiperlink-uri (hiperlegături) pentru
navigarea simplă (cu un singur clic de maus) de la o pagină sau secțiune de
pagină la alta. Pagina web se numește astfel deoarece ea se poate afișa pe un
monitor sau ecran de calculator și se aseamănă într-o oarecare măsură cu o
pagină de ziar. Lățimea paginii web este de obicei astfel făcută ca ea să încapă
în întregime pe lățimea ecranului disponibil. În schimb înălțimea ei poate
depăși cu mult pe cea a ecranului. În aceste cazuri browserul și mausul permit
de obicei vizionarea simplă și rapidă a întregii pagini, și anume prin
"tragerea" ei în sus și în jos, după dorință. (2)
O pagină web poate conține :
 texte în cele mai diferite formate (forme, mărimi, culori, poziții etc.)
 imagini (fișiere cu formatele .gif, .jpeg, .png ș.a.)
 audio (fișiere în formatele .mid, .wav ș.a.)
 conținut multimedial interactiv care, pentru a fi văzut și utilizat,
necesită de obicei un plugin ca de ex. cu formatul Adobe Flash sau
Adobe Shockwave
 miniaplicații (așa-numite "applets") – subprograme care rulează la
chemarea paginii și care deseori oferă filme, imagini, interacțiune și
sunete. (3)

3
 Paginile web mai pot conține și elemente care nu sunt făcute pentru a fi
afișate de browser, cum ar fi (3) :
 scripturi (de obicei în formatul JavaScript), care adaugă paginii
funcționalitate suplimentară (de exemplu creează efecte vizuale sau
verifică datele introduse intr-un formular web),
 meta-etichete – furnizează informații despre pagină, instrucțiuni pentru
roboții motoarelor de căutare, etc. Cuvintele cheie și celelalte descrieri
din meta-etichete ajută motoarele de căutare să catalogheze pagina
corect și, în cazul acțiunilor de căutare, să ofere rapid informații și
rezultate.
 foi de stil (așa-numite "Cascading Style Sheets" sau "CSS"), care
stabilesc modul cum este formatată pagina
 comentarii
Paginile web mai pot conține și așa-numiți viruși informatici precum și
alte funcțiuni dăunătoare (malițioase) dar greu de văzut/recunoscut.

3. Website-ul şi ergonomia

Capacitatea creativă a omului şi capacitatea de calcul a computerului

pot colabora pentru a produce rezultate excepţională în materie de webdesign.
Ideea de “echipă” şi de “cooperare” are noi valenţe în prezent când Internetul
face comunicarea şi interacţiunea mult mai uşoare şi accesibile în întreaga
lume.
Primul webdesigner a fost chiar inventatorul WWW-ului, Tim Berners
Lee, care a publicat primul site din istorie în anul 1991. La început siturile nu
erau nici pe departe atât de complexe și încărcate grafic cum sunt în prezent,
limbajul utilizat - HTML - fiind nu prea puternic și permițând numai o serie
limitată de formatări, precum și inserarea de link-uri, pentru a putea "lega"
paginile între ele, webdesignul fiind, de fapt, mai mult "programare" web. (4)
În prezent preocuparea pentru aspectul grafic al siturilor, devenite
puternice instrumente publicitare și comerciale, justifică în întregime
denumirea de "webdesign", iar tehnologiile utilizate s-au diversificat și au
devenit din ce în ce mai complexe. Firmele care produc situri lucrează cu
angajați specializați pentru fiecare etapă a dezvoltării unui sit, de la stadiul de
concepție grafică la programare și editare de conținut pentru SEO (Search
Engine Optimization - optimizarea siturilor pentru motoarele de căutare).
Siturile actuale sunt din ce în ce mai mult axate pe animație interactivă și
dinamism, aceste deziderate fiind îndeplinite de exemplu de cunoscutul
4
program Adobe Flash, precum și de alte programe apărute după acesta, care
pot genera automat fișiere animate cu extensia .swf. (4)

3.1. Website-ul – definire

Noțiunea sit web provine din expresia engleză web site și desemnează
o grupă de pagini web multimedia (conținând texte, imagini fixe, animații
ș.a.), accesibile în Internet în principiu orișicui, de obicei pe o temă anume, și
care sunt conectate între ele prin așa-numite hiperlink-uri. Diversele situri
web pot fi create de către o organizație, o persoană particulară, instituții
publice etc. Noțiunea apare în limba română scrisă sub trei forme (fără a
exista o poziție oficială care să o favorizeze pe vreuna dintre ele): sit web,
website (ca în limba engleză) și sait web (propusă de lingvistul prof. George
Pruteanu). (5)
De obicei un sit web este administrat (creat, întreținut și actualizat) de
către un așa-numit webmaster, dar există și alte posibilități:
 situl web se actualizează automat și permanent pe baza unei baze de
date;
 paginile sale se creează în mod dinamic și automat în funcție de
acțiunea utilizatorului în cadrul unei aplicații web;
 situl web se creează și e administrat chiar de către utilizatorii săi - vezi
Web 2.0. (5)
Un site web, website (numit, de asemenea prin abuz de limbaj , site de
Internet) sau mai simplu SITE, este un set de fişiere HTML , legate prin
hyperlink-uri, stocate pe un server web , adică un computer conectat in
permanenţă la Internet ce găzduieşte paginile web. (6)
Siturile, în forma în care ele se afișează în browsere, sunt de fapt
interpretări vizuale, menite să fie înțelese de orice persoană, fără să fie
necesare cunoștinte în domeniul informaticii sau al secvențelor de cod
redactate de programatori. Aceștia lucrează ori în diverse limbaje din care
apoi se generează limbajul specific de script al internetului HTML
(HyperText Markup Language), ori direct in HTML. Dacă nu ar exista
browserele care știu să interpreteze limbajul de script și să afișeze rezultatul
pe ecran, siturile ar fi doar înșiruiri de texte neformatate și, cel mai probabil,
fără imagini. În principiu, limbajul HTML indică locul în care să se afișeze
diversele elemente vizibile, dimensiunea, culoarea, precum și alți parametri
care conferă unei pagini web atât aspectul dorit cât și funcționalitate optimă.
(4)

5
 3.2. Obiectivele unui website
Crearea unui site este motivată de următoarele:
 Nevoia de vizibilitate : un site web, în cazul în care este un mijloc de
promovare buna, poate fi o modalitate de creştere a vizibilităţii unei
instituţii sau unei organizaţii;
 Îmbunătăţire a cunoştinţelor : prin intermediul unui site instituţional sau
al unui minisite, un profesor, de exemplu, îşi poate creşte popularitatea;
 Culegerea de date : Internet poate deveni pentru întreprinderi o mare
oportunitate de a colecta date despre clienţii lor sau de a solicita noi
perspective;
 Vânzări online : timizi la începuturile Internetului, utilizatorii au înteles
repede interesul Internet pentru achiziţionarea produselor de consum . Un
site web poate fi o oportunitate pentru unele companii, în termeni de
marketing;
 Înlocuirea suportului pentru utilizatori : din ce în ce mai mult, companiile
utilizează Internetul ca pe un suport privilegiat pentru servicii pre-vânzare
şi post-vânzare. Prin intermediul unui site Internetul poate oferi
importante informaţii tehnice şi comerciale, cu un cost minim. (6)
3.3. Etapele de creare a unui site
Orice website are mai multe faze prin care trece pentru a ajunge într-o
formă finală cât mai atractivă şi ergonomică:
 Concretizarea ideilor
 Schițarea elementelor vizuale și compunerea structurii sitului
 Programarea paginilor web în (HTML, CSS, Javascript etc.)
 Testarea sitului
 Schimbarea părților care nu corespund țintei
 Publicarea sitului pe Internet sau intranet
 Modificarea ulterioară și relansarea pe Internet, după nevoile clienților sau
ale timpului. (4)
După stabilirea structurii sitului se intră în etapa conceperii unei
interfețe grafice care, pe lângă scopul pur estetic, trebuie să faciliteze accesul
vizitatorilor la toate secțiunile publice ale sitului, să fie comprehensivă și, nu
în ultimul rând, să asigure și încărcarea rapidă a paginilor, prin modul în care
vor fi realizate diversele elemente grafice. (4)
Din punctul de vedere al designului, siturile sunt în mare parte alcătuite
din tabele cu linii invizibile în care se inserează imagini (siglă, imagini-
simbol, butoane etc.) și texte, în așa fel încât aspectul să fie unitar și să nu se
sesizeze vizual organizarea tabelară. Celulele tabelelor pot avea fundaluri
colorate, pot fi alcătuite din imagini și desene care se repetă pe orizontală sau

6
pe verticală, pot fi umplute cu texturi mai mult sau mai puțin neregulate (ca
pietrișul, frunzișul etc.) sau pot rămâne și albe. (4)
Este de notat că actualmente locul tabelelor a fost luat de popularul
mod de formatare CSS, care reprezintă o soluție mai "curată" din punctul de
vedere al programării decât utilizarea tabelelor. (4)
3.4. Definirea conceptului de website ergonomic
Referindu-ne la ergonomie putem spune că aceasta are ca obiectiv
adaptarea website-ului la pretenţiile vizitatorilor săi, astfel încât să fie uşor şi
confortabil de utilizat şi să creeze dorinţa de revenire. (7)
Ergonomia este o disciplină, deci regulile depind de context şi variază
în funcţie de site-ul studiat, de obiectivele sale strategice şi de vizitatori.
Există câteva principii pe care trebuie să le respectăm atunci când construim
un website:
 Fiecare proiect este unic: Acestea trebuie să fie citite şi utilizate în
funcţie de specificul fiecărui proiect, cel mai important fiind
cunoaşterea vizitatorilor lor. De aceea trebuiesc efectuate studii de
cercetare a vizitatorilor, ale căror rezultate trebuiesc luate în
considerare când ne construim website-ul. (7)
Site-ul meu este ergonomic dacă poate fi utilizat şi de bunica.
 Un site ergonomic, nu este neapărat un site utilizabil de către toţi
începătorii, ci un site adaptat la pretenţiile vizitatorilor. (7)
3.5. Organizarea corespunzătoare a paginilor web
Pentru ca un website să răspundă cerinţelor ergonomice, paginile pe
care le va încorpora vor trebui să îndeplinească unele cerinţe ca:
 Stergerea a tot ce este inutil: cu cât o pagină conţine mai multe obiecte, cu
atât este mai dificil de integrat mental.
 Limitarea încărcării paginilor: banda largă nu a rezolvat problema de
aşteptare la încărcarea anumitor pagini web. Optimizaţi fiecare obiect al
paginii, în special imaginile şi animaţiile.
 Crearea unei ierarhii de lectură clar: trebuie să se distingă cel mai
important mesaj pe care doreşti să-l transmiţi. Acest mesaj trebuie să se
distingă vizual de restul paginii.
 Prevederea unor template-uri care să creeze "un aer familial", comun
tuturor paginilor sitului. Această coerenţă facilitează înţelegerea sitului.
 Adaptarea la rezoluţia de ecran utilizată de majoritatea vizitatorilor site-
ului, care în general nu sunt aceleaşi ca cea folosită de către proiectant.

7
 Evitarea scroll-ului orizontal. Acesta poate fi rezervat pentru blocuri prea
restrânse în pagina. Acesta ar trebui să sugereze, atunci prezenţa de
conţinut ascuns, şi a facilita utilizarea de butoanele de defilare.
 Scroll-ul vertical este permis pe scară largă, dar nu trebuie să
obstrucţioneze vizibilitatea elementele critice ale paginii, pentru ca le plasa
deasupra pragului de parcurgere.
 Evitarea "stop scroll-ului". Cu alte cuvinte, nu daţi impresia că pagina s-a
terminat când nu este gata încă. Acest lucru se poate întâmpla, în prezenţa
unui mare gol, mai ales dacă el se întinde pe toată lăţimea paginii.
 Utilizarea unui design semi-elastic în locul unuia pe deplin elastic.
 Întinderea doar a coloanelor de conţinut, setând lăţimea maximă
acceptabilă. Elasticitatea poate creşte confortul (profitând de spaţiul
disponibil pe ecran), dar, de asemenea, poate scade confortul în cazul în
care nu este limitat.
 Utilizarea culorii albe pentru aerarea paginii şi a permite vizitatorilor să
înţeleagă mai uşor, dar nu excesiv: limitarea albului facilitează activitatea
de scanare vizuală şi mentală a unei pagini web.
 Distingerea clară a diferitelor zone ale paginii (barele de navigare,
coloanele de conţinut, informaţii suplimentare, etc.) variind formatul de
prezentare şi delimitează în mod clar zonele. (8)
3.6. Textele lizibile şi clare
Prezenţa textelor trebuie să faciliteze lecturarea ecranului. Ele trebuie
să fie cât mai lizibile posibil, de aceea e preferat XHTML-ul pentru imagini
de prezentare a textului sau informaţii importante. (9)
Este bine să se renunţe la imaginile de fundal, mai ales dacă informaţia
e valoroasă. Informaţia este importantă şi pentru clasamentul website-ului.
3.6.1. Tipografia şi culorile
 Mărimea fontului suficient de mare: niciodată sub un Arial de 10 puncte
sau Verdana 9 puncte pentru corpul paginii.
 Niveluri de contrast pozitive, de preferinţă caractere închise pe fond
deschis.
 Niveluri de contrast, culoare şi luminozitate suficiente pentru a distinge
caracterele. Aceste reguli se aplică la toate elementele ce conţin text:
titluri, link-uri, meniuri, butoane sau imagini.
 Limitarea numărului de culori diferite. Acest lucru poate ajuta la
construirea ierarhică a conţinutului.
 Evitarea mono-cazurilor (toate majuscule sau toate cu litere mici) şi
utilizarea cazurilor mixte.
 Utilizarea majusculelor numai pentru a atrage atenţia.

8
 Limitarea utilizării majusculelor pentru fraze foarte scurte. Majusculele
sunt mai dificil de citit din cauza modelelor mentale (suntem mai
obişnuiţi să vedem acelaşi cuvânt scris cu minuscule decât cu majuscule)
şi a formelor caracterelor scrise cu majuscule: e mai dificil de distins
fiecare literă când au aceeaşi înălţime.
 Evitarea formatului italic, dificil de citit pe ecran. Utilizarea acestuia se
va face în cazul citărilor.
 Textul ne-clickabil trebuie să se diferenţieze de cel clickabil.
 Evitarea sublinierii textului pentru a scoate în evidenţă o idee poate să
inducă în eroare cititorul care va crede că textul subliniat este un link. (9)
3.6.2. Managementul paragrafelor şi liniilor de text
 Pentru paragrafe este recomandată utilizarea unui font sans-serif sau
baton, fără gravare, mai uşor de citit.
 Evitarea explicaţiilor în cazul liniilor scurte.
 Este de preferat alinierea stânga, mai ales pentru paragrafele lungi.
Alinierea dreapta sau centrat complică lecturarea ţi compararea.
 Liniile de text să nu fie nici prea lungi, nici prea scurte.
Lungimea ideală pare a fi între 60 şi 100 de caractere pe linie. Atentie
la template-urile elastice, care pot crea linii ilizibile din cauza lungimii.
(9)
3.6.3. Scrisul pe web trebuie să faciliteze scanarea
 Trebuie reţinut faptul că vizitatorii scanează paginile.
 Majoritatea paginilor nu sunt citite cu adevărat ci sunt scanate sau
măturate vizual. Vizitatorul caută ceea ce îl interesează, de aceea trebuie
ajutat să citească pe diagonală.
 Utilizarea limbajului familiar cititorilor, evitând discursurile sau
limbajul tehnic, cu excepţia cazurilor în care aceasta se face în mod
deliberat.
 Un paragraf trebuie să conţină o singură idee.
 Frazele să fie scurte.
 Evidenţierea cuvintelor cheie, prin îngroşare, însă este exclus abuzul
pentru anu îngreuia citirea pe diagonală.
 Utilizarea căt mai des a divizării ideilor în liste cu marcatori.
 Utilizarea diatezei active în locul celei pasive.
 În Internet conţinutul este rege, deci el poate face diferenţierea.
 Pentru textele lungi trebuie să se facă posibilă imprimarea – din care să
lipsească însă bara de navigare.
 Un concept înseamnă un cuvânt. Fiecare element al paginii trebuie să
primească o denumire. (9)

9
 3.6.4. Titlurile şi etichetarea
 Crearea unei dimensionări ierarhice a textului titlurilor în funcţie de
importanţa conceptuală, însă un titlu îngroşat va fi mai mic decât unul de
talie mijlocie.
 Limitarea lungimii titlurilor şi etichetelor – vizitatorii le citesc adesea.
 Începereaa titlului cu acele cuvinte cheie.
 Conferirea unor titluri explicite pentru fiecare pagină, care să poată fi
utilizate şi ca etichete. (9)
3.7. Hipertextele –cheia unei navigări reuşite
3.7.1. Link sau buton
Linkul se utilizează mai ales pentru navigare (trecerea de la o
informaţie la alta) iar butoanele pentru lansarea acţiunilor (acceptarea unor
schimbări, trimiterela...). Butoanele sunt rezervate pentru acţiunile
principale. Link-uri au în acest caz, avantajul că încarcă mai puţin interfaţa.
(10)

3.7.2. Link-uri vizibile şi folosite cu înţelepciune

Pentru ca vizitatorii să găseasgă link-ul şi să-l identifice ca şi clickabil,
trebuiesc respectate următoarele:
 Un format rezervat doar pentru textul clickabil,
 Un format diferenţiat de textele nonclickabile,
 Un format care le face să iasă în evidenţă.. (10)
3.7.3. Nu este obligatoriu albastrul subliniat
Se poate alege în mod liber culoarea. Diferenţierea culorii şi textul
subliniat fac ca textul să apară ca şi clickabil. (10)
3.7.4. Formatul şi dimensionarea link-ului
 Trebuie evitat formatul diferit la link-urilor pe aceeaşi pagină.
 Adaptarea nivelului de vizibilitate a link-ului în funcţie de importanţă;
legăturile din josul paginii pot fi mai puţin accentuate decât cele din
mijlocul paginii.
 Prevederea unui format specific la trecerea cu mouse-ul pe deasupra
link-ului care să-i dea posibilitatea vizitatorului de a alege.
 Ideal este ca formatul „survolat” să îmbunătăţească lizibilitatea. Nu este
recomandată trecerea de la normal la îngroşat pentru că produce un efect
de deplasare.
 Diferenţierea formatului link-urilor vizitate faţă de cele vizitate, de
obicei cele vizitate trebuie să iasă mai puţin în evidenţă.

10
  Integrarea legăturilor propriului conţinut în paragrafe. Nu trebuie
rezervată navigarea pentru bara de meniu.
 Dimensionarea link-ului. O legătură mai lungă este mai vizibilă şi mai
uşor de accesat.
 Atunci când link-ul este compus dintr-un simbol sau pictogramă şi text,
zona clickabilă ar trebui să cuprindă toate elementele.
 Evitarea ca linkul să depăşească o linie. (10)
3.7.5. Distingerea diferitelor tipuri de link-uri
 Link-uri interne/externe. Diferenţierea se poate face într-un mod cât mai
convenţional prin reprezentarea link-urilor externe printr-o icoană cu o
fereastră nouă sau o săgeată spre exterior.
 Este necesar ca utilizatorul să ştie din timp spre ce se îndreaptă, de
aceea se pot utiliza pictograme sau indicaţii textuale (PDF, WORD),
precum şi dimensiunea documentului. Acestea îi cresc încrederea
vizitatorului.
 Linkurile intra-pagină îi conferă mai multă încredere vizitatorului decât
cele inter-pagină.
 Link-urile de tip ancoră trebuie să fie prezentate în aşa fel încât să
sugereze că ele conduc la o zonă mai jos pe pagina (de exemplu, săgeata
în jos). (10)
3.7.6. Legături (link-uri) explicite
 Un link trebuie să declare cât mai precis posibil ceea ce subliniază
această (atenţie la sindromul click aici), de exemplu vom folosi „Vezi
fotografii” în locul „Pentru poze click aici”.
 Link-urile de tipul: „Citeşte mai mult”, „a se vedea articolul”, „Detalii”,
încarcă inutil pagina.
 Trebuie să se ţină cont de limbajul Web şi de limbajul utilizatorilor.
 Link-uri coerente: link-urile către acelaşi loc trebuie să aibă aceeaşi
etichetă. (10)
3.8. Template-uri simple şi eficiente
3.8.1. Elementele template-ului adaptate sarcinii
Elementele utilizate în template trebuie să se potrivească tipului de date
pe care utilizatorii le cer de exemplu: caseta radio cu mai multe opţiuni,
ascunde, bandă derulantă ... (11)
Dimensiunea câmpului trebuie să fie adaptată la numărul de caractere
aşteptat.

11
 3.8.2. Formulare uşor de completat
 Reglarea vizibilitatea de campuri în funcţie de importanţa lor.
 Pentru a evidenţia un câmp de intrare, aceasta trebuie să fie de culoare
albă pe un fond colorat, şi gol. Un câmp gol este mai vizibil decât unul
prea plin.
 Indicarea de la început a unei legende în care să se specifice importanţa
unor domenii.
 Ştergerea":" de la sfârşitul etichetei.
 Dacă formularul conţine multe domenii, acestea trebuiesc grupate pe
teme.
 Alinierea etichetelor în partea stânga, în cazul în care etichetele nu
depăşesc 6-8 caractere. În caz contrar, aliniat dreapta.
 În cadrul constrângerilor de aliniere, distanţa dintre etichetă şi câmp nu
trebuie să fie prea mare. (11)
3.8.3. Ajuta utilizatorul să evite şi să corecteze greşelile
 Indica formatul de informaţii de aşteptat în cazul în care aceasta ar
genera erori (de exemplu, zz / ll / aaaa).
 Ajutarea internautului să completeze formularul prin oferirea unor
indicaţii.
 Salvarea datelor pe parcursul completării, pentru a se evita reluarea
scrierii tuturor datelor în cazul unei greşeli.
 Nu ştergeţi informaţiile greşite pentru a facilita munca de corecţie.
 Mai presus de toate, trebuiesc păstrate intrările valide. (11)
3.8.4. Semnalarea erorilor
 Mesajul ce anunţă eroarea trebuie să apară deasupra formularului.
Trebuie să atragă atenţia prin formă culoare şi sunet şi să indice
greşeala/eroarea.
 Atragerea atenţie poate fi sporită şi prin schimbarea culorii de fundal sau
prin introducerea unor pictograme de pericol.
 Mesajele trebuie să explice de eroarea şi să ofere soluţii de rezolvare.
(11)
3.9. Meniul – navigarea fără a pierde Nordul
Se recomandă utilizarea funcţiei „Pagina precedentă”. Este foarte utilă
punerea elementelor care îndeplinesc această funcţie în calea mouse-ului
atunci când merge la bara de instrumente a browser-ului, deoarece acest lucru
va creşte probabilitatea lor de utilizare. (12)

12
 3.9.1. Arhitectura uni meniu
Există multe moduri de a organiza conţinutul unui site web şi inclusiv a
meniului său:
 Organizare tematică
 Organizarea pe activităţi
 Organizarea în funcţie de ţinta utilizatorului
 Organizare în ordine alfabetică
 Organizarea cronologică
 Organizare bazată pe popularitatea paginilor (12)
În construirea arhitecturii website-ului trebuie să ne folosim de
principiul lăţime în profunzime, adică puţine niveluri cu multe opţiuni.
Aceasta are ca avantaj o privire de ansamblu rapidă. Utilizatorul poate selecta
cu uşurinţă elementul de interes la fiecare nivel. (12)
Termenii ce definesc obiectele ce apartin aceluiaşi nivel al unui meniu
trebuie să fie:
 Semnificanţi (am inteles termenii pe care le acoperă)
 complementari (toate elementele acoperă toate posibilităţile de
navigare)
 exclusivi (nici o ambiguitate între elemente). (12)
Elementele din mijloc sunt mai puţin vizibile decât cele de la începutul
sau la sfârşitul meniului, mai ales într-un drop jos vertical. Se evită
elementelor generice într-un meniu. Se oferă un mijloc explicit pentru a
reveni la prima pagina. (12)
3.9.2. Prezentarea unui meniu
 Meniul de navigare ar trebui să iasă în evidenţă faţă de restul paginii
(nota, fără a deveni un "site-off").
 Meniurile sunt de obicei plasate pe "marginile" site-ului. Navigarea
principală este adesea plasată în partea de sus sau din stânga, locaţia este
mai puţin convenţională.
 Nu schimba locaţia sau aparenţa unei navigări de la o pagină la alta.
 Vizitatorul trebuie să ştie în permanenţă unde se află în interiorul
website-ului.
 Nu se subliniază link-urile într-un meniu în cazul în care numărul de
articole este mare, deoarece apropierea de elementele asociate cu textul
subliniat generează prea mult „zgomot” vizual. Este suficient doar
formatul tip meniu pentru evidenţiere. (12)

13
 3.9.3. Funcţionarea unui meniu
 Utilizarea meniurilur derulante care apar la folosirea mouse-ului, dacă
utilizatorii trebuie să găsească rapid pagina care îi interesează.
 Evitarea meniurilot de tip cascadă (mai multe niveluri succesive) listă de
operare.
 Nu trebuie să i se ceară utilizatorului să manipuleze mouse-ul pentru a
ajunge la verticală şi orizontală pentru un element dintr-un submeniu.
 Nu se schimbă ordinea rubricilor meniului în funcţie de pagina accesată
de către utilizator.
 Evitarea plasării într-un meniu de navigare a unui link către un site
extern care conţine de asemenea rubrici interne. (12)
3.9.4. Butoane de acţionare
 Butoanele ar trebui să apară şi să se comporte identic în interiorul site-
ului.
 Butoanele de acţiune trebuie să fie vizibile: într-un format clar şi detaşat
de fundal deasupra benzii de scroll dacă este posibil.
 Trebuie prevăzut un format specific de butoane la trecerea cu mouse-ul.
 Un buton de acţiune ar trebui să sugereze să faceţi clic pe el: ar trebui să
arate "acţiune". Să aibă un format clickabil şi un text consolidat va fi
regizat de acţiune (verb la infinitiv sau imperativ).
 Butoanele trebuie să fie uşor de clickabil, să fie destul de mare, iar
suprafaţa clickabilă să fie extinsă dincolo de textul etichetei.
 Limbajul butoanelor de acţiune trebuie să fie alcătuit din verbe, trebuie
să se evite etichetele, iar aceeaşi acţiune trebuie să aibă întotdeauna
aceeaşi formulare, aceeaşi etichetă..
 Evitarea butoanelor alcătuite doar din imagini, cu excepţia cazului în
care este extrem de convenţională şi dacă aveţi nevoie de spaţiu pe ecran.
(12)
3.10. Organizarea listelor şi a tabelelor
 Evidenţierea datelor în locul tipurilor de date.
 Afişarea doar a coloanelelor care conţin informaţiile necesare
utilizatorilor în etapa paginii de listare. Detaliile vor apărea pe o pagină
nouă, odată ce aţi selectat un element.
 În mod ideal, se plasează elementele de acţiune cât mai aproape posibil
de elementele la care se referă.
 Pentru a facilita conectarea mentală, trebuie să se prevadă o schimbare a
culorii liniei peste care trece mouse-ul.
 Poate fi utilă prevederea unei funcţii "Totul pe aceeaşi pagină" dacă
numărul de elemente din listă nu depăşeşte o sută.
 În lista extinsă, se afişează clar pagina accesată la momentul respectiv
printr-un format specific, iar celelalte pagini ca link-uri. (13)
14
 Nu se aliniază datele centrat:
• textul aliniat la stânga - pentru a da o impresie de coerenţă şi uşurinţă
la citirea verticală.
• cifrele aliniate la dreapta - pentru a sprijini activitatea de comparaţie
mintale. (13)
3.11. Feedback: Mesajele de informare pentru vizitatorii website-ului
Este imperios necesară furnizarea de feedback pentru orice acţiune a
utilizatorului.
Reglarea vizibilităţii paginilor de informare în funcţie de importanţa
lor. Pentru a mări vizibilitatea unui mesaj, poţi să „te joci” cu mai multi
parametri:
 Folosiţi culori (pentru fundal şi / sau pentru caractere) care se rup de cele
utilizate în pagina.
 Însoţiţi mesajul de imagini.
 Modificarea dimensiunii casetei mesajului: cu cât va acoperi mai mult
ecranul cu atât va fi mai vizibil.
 Animarea mesajului sau conferirea uniu aspect temporar pentru a atrage
atenţia utilizatorilor. (14)
Mesajele confirmă cererile vizitatorilor acţiunile distructive (ştergerea
contului, non-înregistrare de date, etc). Mesajele importante se scriu cu roşu.
Se oferă asistenţă exact acolo unde are nevoie utilizatorul. În cazul în
care timpul de încărcare este relativ lung de aşteptat, se avertizează
utilizatorul şi i se oferă o indicaţie a progresului de încărcare. (14)
Personalizarea paginii 404:
 Evitaţi discurs tehnic, astfel încât utilizatorul să înţeleagă ceea ce se
întâmplă.
 Oferiţi oportunităţi pentru navigare pentru a evita transformarea acesteia
într-o pagină moatră. (14)

4. Concluzii

Website-urile au câştigat pe piaţa informaţiei mai ales datorită

implementării principiilor ergonomiei la construirea lor. Dacă la construcţia
acestuia se scapă din ochi anumite puncte privind ergonomia, atunci şansele
sale de a avea cât mai mulţi vizitatori, care să fie mulţumiţi de ceea ce găsesc
15
aici şi care să dorească să revină, scad imediat deoarece acum este o
concurenţă foarte mare. Website-ul cel mai ergonomic va fi întotdeauna în
frunte. Degeaba ai informaţia dacă nu ştii să faci în aşa fel încât să fie cât mai
uşor de accesat de către cei cărora te adresezi.
Sarcina unui specialist în ergonomia website-urilor sau a unui
webdesigner este de a proiecta o interfaţă uşor de utilizat, pentru câştigarea
utilizatorilor fideli.

5. Bibliografie

1. ***http://ro.wikipedia.org/wiki/Comunicare.
2. ***http://ro.wikipedia.org/wiki/Internet.
3. ***http://ro.wikipedia.org/wiki/Pagin%C4%83_web.
4. ***http://ro.wikipedia.org/wiki/Web_design.
5. ***http://ro.wikipedia.org/wiki/Sit_web.
6. ***http://www.commentcamarche.net/contents/web/webintro.php3.
7. ***http://www.creation-site-vitrine.fr/ergonomie-definition.
8. ***http://www.creation-site-vitrine.fr/ergonomie-page.
9. ***http://www.creation-site-vitrine.fr/ergonomie-texte.
10. ***http://www.creation-site-vitrine.fr/ergonomie-liens.
11. ***http://www.creation-site-vitrine.fr/ergonomie-formulaire.
12. ***http://www.creation-site-vitrine.fr/ergonomie-menus.
13. ***http://www.creation-site-vitrine.fr/ergonomie-listes-tableaux.
14. ***http://www.creation-site-vitrine.fr/ergonomie-feedback.

16
 Cuprins
1. Introducere ..................................................................................................................... 2
2. Pagina web ..................................................................................................................... 3
3. Website-ul şi ergonomia................................................................................................. 4
3.1. Website-ul – definire .............................................................................................. 5
3.2. Obiectivele unui website ......................................................................................... 6
3.3. Etapele de creare a unui site ................................................................................... 6
3.4. Definirea conceptului de website ergonomic .......................................................... 7
3.5. Organizarea corespunzătoare a paginilor web ........................................................ 7
3.6. Textele lizibile şi clare ............................................................................................ 8
3.6.1. Tipografia şi culorile ....................................................................................... 8
3.6.2. Managementul paragrafelor şi liniilor de text ................................................. 9
3.6.3. Scrisul pe web trebuie să faciliteze scanarea ................................................... 9
3.6.4. Titlurile şi etichetarea .................................................................................... 10
3.7. Hipertextele –cheia unei navigări reuşite .............................................................. 10
3.7.1. Link sau buton ............................................................................................... 10
3.7.2. Link-uri vizibile şi folosite cu înţelepciune ................................................... 10
3.7.3. Nu este obligatoriu albastrul subliniat ........................................................... 10
3.7.4. Formatul şi dimensionarea link-ului .............................................................. 10
3.7.5. Distingerea diferitelor tipuri de link-uri ........................................................ 11
3.7.6. Legături (link-uri) explicite ........................................................................... 11
3.8. Template-uri simple şi eficiente ........................................................................... 11
3.8.1. Elementele template-ului adaptate sarcinii .................................................... 11
3.8.2. Formulare uşor de completat ......................................................................... 12
3.8.3. Ajuta utilizatorul să evite şi să corecteze greşelile ........................................ 12
3.8.4. Semnalarea erorilor........................................................................................ 12
3.9. Meniul – navigarea fără a pierde Nordul .............................................................. 12
3.9.1. Arhitectura uni meniu .................................................................................... 13
3.9.2. Prezentarea unui meniu ................................................................................. 13
3.9.3. Funcţionarea unui meniu ............................................................................... 14
3.9.4. Butoane de acţionare ..................................................................................... 14
3.10. Organizarea listelor şi a tabelelor ......................................................................... 14
3.11. Feedback: Mesajele de informare pentru vizitatorii website-ului......................... 15
4. Concluzii ...................................................................................................................... 15
5. Bibliografie................................................................................................................... 16

17