Ergonomia unui Website

8/7/2019 Ergonomia unui Website

1/17

REFERAT LA ERGONOMIE

Website-ul ergonomic

Indrumtor:

Prof. univ. dr. ing. NEDEFF VALENTIN

Student:

SIMION DUMITRU

Grupa: 342 B

-2011-


2/17

2

1.IntroducereComunicareae prezent peste tot n jurul nostru. Comunicarea este

legatde existena noastr ca oameni, mai apoica societate, fiindc fiineleumane i comunicarea sunt interdependente. Fr comunicare i limbaj noi cafiine ce interacionm i relaionm n cea mai mare parte, sau chiarnntregime prin actul comunicrii, existena noastr pe pmnt ar fi inutil.

Comunicarea este un proces dinamic, aflat ntr-o permanenttransformare. Societatea exist datorit comunicrii, ea nseamn comunitatei este vzut ca un proces care implic participare din partea membrilor uneisocieti. Comunicarea mbrac forme variate i diverse, dintre care ne vomopri la comunicarea mediatizat i la comunicarea de mas, care este de fapt o

form a comunicrii mediatizate, destinat unor mase mari de indivizi i poateavea o form subiectiv, care are ca scop manipularea opiniei publice, iforma obiectiv, care dorete simpla informare a persoanelor. (1)

Pentru a face un schimb de idei, sau pentru a mprti cunotine cupersoane aflate departe, e nevoie de mijloacele cu ajutorul crora s setransmit informaiile la distan: acestea sunt mijloacele de comunicare inmas sau mass-media. Internetul este o cale de a transmite informaia ntr-unmod rapid i eficient. Dezvoltarea acestei reele a reelelor a condus ladenumirea secolului n care trim era informaiei.

Internetul, care nu trebuie confundat cu serviciul World Wide Web, serefer la reeaua mondial unic de computere interconectate prinprotocoalele (regulile) de comunicare Transmission Control Protocol iInternet Protocol, numite pe scurt stiva TCP/IP. Precursorul Internetuluidateaz din 1965, cnd Defence Advanced Research Projects Agency(en:DARPA) (Agenia pentru Proiecte de Cercetare naintate de Aprare - aMinisterului Aprrii, Department of Defense sau DoD din SUA) a creatprima reea de computere interconectate sub numele ARPAnet. Super-reeaua

din zilele noastre a rezultat din extinderea reelei Arpanet. World Wide Webeste doar unul din multele servicii oferite prin Internet. (2)

n ziua de astzi Internetul este susinut i ntreinut de o mulime defirme comerciale. El se bazeaz pe specificaii tehnice foarte detaliate, ca deexemplu pe aa-numitele "protocoale de comunicaie", care descriu toateregulile i protocoalele de transmitere a datelor n aceast reea. (2)

Aplicaiile Internetuluisunt numeroase: n primul rnd afiarea deinformaii mai mult sau mai puin statice cu form de text, imagini i sunete

(aa-numitele pagini web), apoi pota electronic e-mail, transferul de fiierede date i informaii, chat, video i video on demand, telefonie i telefonie cu
http://societatea/http://societatea/


3/17

3

imagine prin Internet, televiziune prin Internet, e-commerce, sondri deopinie, mediu pentru rspndirea tirilor, mediu pentru toate genurile degrafic i muzic, deschiderea unei sesiuni de lucru de la distan, grupuri dediscuii pe teme prestabilite, jocuri interactive prin reea, operaii bancare

(Internet banking) i multe, multe altele. Printre ele, World Wide Web,prescurtat WWW, deseori numit numai "web", este la loc de vrf, deoareceeste o aplicaie multimedial i integrativ, cu o interfa de utilizator(Graphic User Interface, GUI) foarte atrgtoare din punct de vedere grafic,practic i simplu de folosit. WWW a fost inventat de ctre Tim Berners-Leen anul 1993. (2)

Pentru folosirea tuturor aplicaiilor din web este nevoie n general doarde un singur program multifuncional numit browser (cuvnt englez).Exemple de browsere: MS Internet Explorer, Mozilla Firefox (provenit din

Netscape Navigator), Opera, Apple Safari .a. (2)

2.Pagina webO pagin webeste o resurs aflat n spaiul web (WWW) din Internet,

de obicei n format HTML sau XHTML (extensia numelui fiierului fiind decele mai multe ori .html sau .htm) i avnd hiperlink-uri (hiperlegturi) pentrunavigarea simpl (cu un singur clic de maus)de la o pagin sau seciune depagin la alta. Pagina web se numete astfel deoarece ea se poate afia pe unmonitor sau ecran de calculator i se aseamn ntr-o oarecare msur cu opagin de ziar. Limea paginii web este de obicei astfel fcut ca ea s ncapn ntregime pe limea ecranului disponibil. n schimb nlimea ei poatedepi cu mult pe cea a ecranului. n aceste cazuri browserul i mausul permitde 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 conine :texten cele mai diferite formate (forme, mrimi, culori, poziii etc.)imagini(fiiere cu formatele .gif, .jpeg, .png .a.)audio(fiiere n formatele .mid, .wav .a.)coninut multimedial interactivcare, pentru a fi vzut i utilizat,

necesit de obicei un plugin ca de ex. cu formatul Adobe Flash sauAdobe Shockwave

miniaplicaii(aa-numite "applets") subprograme care ruleaz lachemarea paginii i care deseori ofer filme, imagini, interaciune i

sunete. (3)


4/17

4

Paginile web mai pot conine i elemente care nu sunt fcute pentru a fiafiate de browser, cum ar fi (3) :

scripturi (de obicei n formatul JavaScript), care adaug paginiifuncionalitate suplimentar (de exemplu creeaz efecte vizuale sauverific datele introduse intr-un formular web),

meta-etichetefurnizeaz informaii despre pagin, instruciuni pentruroboii motoarelor de cutare, etc. Cuvintele cheie i celelalte descrieridin meta-etichete ajut motoarele de cutare s catalogheze paginacorect i, n cazul aciunilor de cutare, s ofere rapid informaii irezultate.

foi de stil(aa-numite "Cascading Style Sheets" sau "CSS"), carestabilesc modul cum este formatat pagina

comentariiPaginile web mai pot conine i aa-numii virui informatici precum i

alte funciuni duntoare (maliioase) dar greu de vzut/recunoscut.

3.Website-ul i ergonomiaCapacitatea creativ a omului i capacitatea de calcul a computerului

pot colabora pentru a produce rezultate excepional n materie de webdesign.Ideea de echip i de cooperare are noi valene n prezent cnd Internetulface comunicarea i interaciunea mult mai uoare i accesibile n ntreagalume.

Primul webdesigner a fost chiar inventatorulWWW-ului,Tim BernersLee, care a publicat primul site din istorie n anul 1991. La nceput siturile nuerau nici pe departe att de complexe i ncrcate grafic cum sunt n prezent,limbajul utilizat -HTML- fiind nu prea puternic i permind numai o serielimitat de formatri, precum i inserarea delink-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, deveniteputernice instrumente publicitare i comerciale, justific n ntregimedenumirea de "webdesign", iar tehnologiile utilizate s-au diversificat i audevenit din ce n ce mai complexe. Firmele care produc situri lucreaz cuangajai specializai pentru fiecare etap a dezvoltrii unui sit, de la stadiul deconcepie grafic la programare i editare de coninut pentruSEO(SearchEngine Optimization - optimizarea siturilor pentru motoarele de cutare).

Siturile actuale sunt din ce n ce mai mult axate pe animaie interactiv idinamism, aceste deziderate fiind ndeplinite de exemplu de cunoscutul


5/17

5

programAdobeFlash, precum i de alte programe aprute dup acesta, carepot genera automatfiiereanimate cu extensia.swf. (4)

3.1.Website-uldefinireNoiunea sit webprovine din expresia englez web sitei desemneaz

o grup de pagini web multimedia (coninnd texte, imagini fixe, animaii.a.), accesibile n Internet n principiu oriicui, de obicei pe o tem anume, icare sunt conectate ntre ele prin aa-numite hiperlink-uri. Diversele situriweb pot fi create de ctre o organizaie, o persoan particular, instituiipublice etc. Noiunea apare n limba romn scris sub trei forme (fr aexista o poziie 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, ntreinut i actualizat) de

ctre un aa-numit webmaster, dar exist i alte posibiliti:

situl web se actualizeaz automat i permanent pe baza unei baze dedate;

paginile sale se creeaz n mod dinamic i automat n funcie deaciunea utilizatorului n cadrul unei aplicaii web;

situl web se creeaz i e administrat chiar de ctre utilizatorii si - veziWeb 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 fiiere HTML , legate prinhyperlink-uri, stocate pe un server web , adic un computer conectat inpermanen la Internet ce gzduiete paginile web. (6)

Siturile, n forma n care ele se afieaz n browsere, sunt de faptinterpretri vizuale, menite s fie nelese de orice persoan, fr s fienecesare cunotinte n domeniul informaticii sau al secvenelor de cod

redactate de programatori. Acetia lucreaz ori n diverse limbaje din careapoi se genereaz limbajul specific de script al internetului HTML(HyperText Markup Language), ori direct in HTML. Dac nu ar existabrowserele care tiu s interpreteze limbajul de script i s afieze rezultatulpe ecran, siturile ar fi doar niruiri de texte neformatate i, cel mai probabil,fr imagini. n principiu, limbajul HTML indic locul n care s se afiezediversele elemente vizibile, dimensiunea, culoarea, precum i ali parametricare confer unei pagini web att aspectul dorit ct i funcionalitate optim.(4)


6/17

6

3.2.Obiectivele unui websiteCrearea unui site este motivat de urmtoarele:

Nevoia de vizibilitate : un site web, n cazul n care este un mijloc depromovare buna, poate fi o modalitate de cretere a vizibilitii uneiinstituii sau unei organizaii;

mbuntire a cunotinelor: prin intermediul unui site instituional saual unui minisite, un profesor, de exemplu, ipoate crete popularitatea;

Culegerea de date : Internet poate deveni pentru ntreprinderi o mareoportunitate de a colecta date despre clienii lor sau de a solicita noiperspective;

Vnzri online : timizi la nceputurile Internetului, utilizatorii au ntelesrepede interesul Internet pentru achiziionarea produselor de consum . Unsite web poate fi o oportunitate pentru unele companii, n termeni demarketing;

nlocuirea suportului pentru utilizatori : din ce n ce mai mult, companiileutilizeaz Internetul ca pe un suport privilegiat pentru servicii pre-vnzarei post-vnzare. Prin intermediul unui site Internetul poate oferiimportante informaii tehnice i comerciale, cu un cost minim. (6)

3.3.Etapele de creare a unui siteOrice website are mai multe faze prin care trece pentru a ajunge ntr-o

form final ct mai atractiv i ergonomic:

Concretizarea ideilorSchiarea elementelor vizuale i compunerea structurii situluiProgramarea paginilor web n (HTML, CSS, Javascript etc.)Testarea situluiSchimbarea prilor care nu corespund inteiPublicarea sitului pe Internet sau intranetModificarea ulterioar i relansarea pe Internet, dup nevoile clienilor sau

ale timpului. (4)

Dup stabilirea structurii sitului se intr n etapa conceperii uneiinterfee grafice care, pe lng scopul pur estetic, trebuie s faciliteze accesulvizitatorilor la toate seciunile publice ale sitului, s fie comprehensiv i, nun ultimul rnd, s asigure i ncrcarea rapid a paginilor, prin modul n carevor fi realizate diversele elemente grafice. (4)

Din punctul de vedere al designului, siturile sunt n mare parte alctuitedin tabele cu linii invizibile n care se insereaz imagini (sigl, imagini-simbol, butoane etc.) i texte, n aa fel nct aspectul s fie unitar i s nu se

sesizeze vizual organizarea tabelar. Celulele tabelelorpot avea fundaluricolorate, pot fi alctuite din imagini i desene care se repet pe orizontal sau


7/17

7

pe vertical,pot fi umplute cu texturi mai mult sau mai puin neregulate (capietriul, frunziul etc.)sau pot rmne i albe. (4)

Este de notat c actualmente locul tabelelor a fost luat de popularulmod de formatare CSS, care reprezint o soluie mai "curat" din punctul devedere al programrii dect utilizarea tabelelor. (4)

3.4.Definirea conceptului de website ergonomicReferindu-ne la ergonomie putem spune c aceasta are ca obiectiv

adaptarea website-ului la preteniile vizitatorilor si, astfel nct s fie uor iconfortabil de utilizat i s creeze dorina de revenire. (7)

Ergonomia este o disciplin, deci regulile depind de context i variazn funcie de site-ul studiat, de obiectivele sale strategice i de vizitatori.

Exist cteva principii pe care trebuie s le respectm atunci cnd construimun website:

Fiecare proiect este unic: Acestea trebuie s fie citite i utilizate nfuncie de specificul fiecrui proiect, cel mai important fiindcunoaterea vizitatorilor lor. De aceea trebuiesc efectuate studii decercetare a vizitatorilor, ale cror rezultate trebuiesc luate nconsiderare cnd ne construim website-ul. (7)

Site-ul meu este ergonomic dac poate fi utilizat i de bunica.

Un site ergonomic, nu este neaprat un site utilizabil dectretoinceptorii, ci un site adaptat la preteniile vizitatorilor. (7)

3.5.Organizarea corespunztoare a paginilor webPentru ca un website s rspund cerinelor ergonomice, paginile pe

care le va ncorpora vor trebui s ndeplineasc unele cerine ca:

Stergerea a tot ce este inutil: cu ct o paginconine mai multe obiecte, cuatt este mai dificil de integrat mental.

Limitarea ncrcrii paginilor: banda larg nu a rezolvat problema deateptare la ncrcarea anumitor pagini web. Optimizai fiecare obiect alpaginii, n special imaginile i animaiile.

Crearea unei ierarhii de lectur clar: trebuie s se disting cel maiimportant mesaj pe care doreti s-l transmii. Acest mesaj trebuie s sedisting vizual de restul paginii.

Prevederea unor template-uricare s creeze "un aer familial", comuntuturor paginilor sitului. Aceast coeren faciliteaz nelegerea sitului.

Adaptarea la rezoluia de ecran utilizatde majoritatea vizitatorilorsite-ului, care n general nu sunt aceleai ca cea folosit de ctre proiectant.


8/17

8

Evitarea scroll-ului orizontal. Acesta poate fi rezervat pentru blocuri prearestrnse n pagina. Acesta ar trebui s sugereze, atunci prezena deconinut ascuns, i a facilita utilizarea de butoanele de defilare.

Scroll-ul vertical este permispe scar larg, dar nu trebuie sobstrucioneze vizibilitatea elementele critice ale paginii, pentru ca le plasadeasupra pragului de parcurgere.

Evitarea "stop scroll-ului". Cu alte cuvinte, nu daiimpresia c pagina s-aterminat cnd nu este gata nc. Acest lucru se poate ntmpla, n prezenaunui mare gol, mai ales dac el se ntinde pe toatlimea paginii.

Utilizarea unui design semi-elastic n locul unuia pe deplin elastic. ntinderea doar a coloanelor de coninut, setnd limea maxim

acceptabil. Elasticitatea poate crete confortul (profitndde spaiuldisponibil pe ecran), dar, de asemenea, poate scade confortul n cazul ncare nu este limitat.

Utilizarea culorii albe pentru aerarea paginii i a permite vizitatorilor sneleag mai uor, dar nu excesiv: limitarea albului faciliteaz activitateade scanare vizual i mental a unei pagini web.

Distingerea clar a diferitelor zone ale paginii (barele de navigare,coloanele de coninut, informaii suplimentare, etc.) variind formatul deprezentare idelimiteaz n mod clar zonele. (8)

3.6.Textele lizibile i clarePrezena textelor trebuie s faciliteze lecturarea ecranului. Ele trebuie

s fie ct mai lizibile posibil, de aceea e preferat XHTML-ul pentru imaginide prezentare a textului sau informaii importante. (9)

Este bine sse renune la imaginilede fundal, mai ales dac informaiae valoroas. Informaia este important i pentru clasamentul website-ului.

3.6.1.Tipografia i culorileMrimea 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 fonddeschis.Niveluri de contrast, culoare i luminozitate suficiente pentru a distinge

caracterele. Aceste reguli se aplic la toate elementele ce conin text:titluri, link-uri, meniuri, butoane sau imagini.

Limitarea numrului de culori diferite. Acest lucru poate ajuta laconstruirea ierarhic a coninutului.

Evitarea mono-cazurilor(toate majuscule sau toate cu litere mici) iutilizarea cazurilor mixte.

Utilizarea majusculelornumai pentru a atrage atenia.


9/17

9

Limitarea utilizrii majusculelorpentru fraze foarte scurte. Majusculelesunt mai dificil de citit din cauza modelelor mentale (suntem maiobinuii s vedem acelai cuvnt scris cu minuscule dect cu majuscule)i a formelor caracterelor scrise cu majuscule: e mai dificil de distins

fiecare liter cnd au aceeai nlime.Evitarea formatului italic, dificil de citit pe ecran. Utilizarea acestuia seva face n cazul citrilor.

Textul ne-clickabil trebuie s se diferenieze de cel clickabil.Evitarea sublinierii textului pentru a scoate n eviden o ideepoate s

induc n eroare cititorul care va crede c textul subliniat este un link. (9)

3.6.2.Managementul paragrafelor i liniilorde textPentru paragrafeeste recomandat utilizarea unui font sans-serif sau

baton, frgravare, mai uor de citit.Evitarea explicaiilor n cazul liniilor scurte.Este de preferat alinierea stnga, 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. Atentiela template-urile elastice, care pot crea linii ilizibile din cauza lungimii.(9)

3.6.3.Scrisul pe web trebuie s faciliteze scanareaTrebuie reinut faptul c vizitatorii scaneaz paginile.Majoritatea paginilor nu sunt citite cu adevratci sunt scanate sau

mturate vizual. Vizitatorul caut ceea ce l intereseaz, de aceea trebuieajutat s citeasc pe diagonal.

Utilizarea limbajului familiar cititorilor, evitnd discursurile saulimbajul tehnic, cu excepia cazurilor n care aceasta se face n moddeliberat.

Un paragraf trebuie s conin o singur idee.

Frazele s fie scurte.

Evidenierea cuvintelor cheie, prin ngroare, ns este exclus abuzulpentru anu ngreuia citirea pe diagonal.Utilizarea ct mai des a divizrii ideilor n liste cu marcatori.Utilizarea diatezei active n locul celei pasive.n Internet coninutul este rege, deci el poate face diferenierea.Pentru textele lungi trebuie s se fac posibil imprimareadin care s

lipseasc ns bara de navigare.Un concept nseamn un cuvnt. Fiecare element al paginii trebuie s

primeasc o denumire. (9)


10/17

10

3.6.4.Titlurile i etichetareaCrearea unei dimensionri ierarhice a textului titlurilorn funcie de

importana conceptual, ns un titlu ngroat va fi mai mic dect unul detalie mijlocie.

Limitarea lungimii titlurilor i etichetelorvizitatorii 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 navigri reuite3.7.1.Link sau buton

Linkul se utilizeaz mai ales pentru navigare (trecerea de la oinformaie la alta) iar butoanele pentru lansarea aciunilor (acceptarea unorschimbri, trimiterela...). Butoanele sunt rezervate pentru aciunileprincipale. Link-uri au n acest caz, avantajul c ncarc mai puin interfaa.(10)

3.7.2.Link-uri vizibile i folosite cu nelepciunePentru ca vizitatorii s gseasg link-ul i s-l identifice ca i clickabil,

trebuiesc respectate urmtoarele:

Un format rezervat doar pentru textul clickabil,Un format difereniat 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. Diferenierea culorii i textulsubliniat fac ca textul s apar ca i clickabil. (10)

3.7.4.Formatul i dimensionarea link-uluiTrebuie evitat formatul diferit la link-urilor pe aceeai pagin.Adaptarea nivelului de vizibilitate a link-ului n funcie de importan;

legturile din josul paginii pot fi mai puin accentuate dect cele dinmijlocul paginii.

Prevederea unui format specific la trecerea cu mouse-ul pe deasupralink-ului care s-i dea posibilitatea vizitatorului de a alege.

Ideal este ca formatul survolat s mbunteasc lizibilitatea. Nu esterecomandat trecerea de la normal la ngroat pentru c produce un efectde deplasare.

Diferenierea formatului link-urilor vizitatefa de cele vizitate, deobicei cele vizitate trebuie s ias mai puin n eviden.


11/17

11

Integrarea legturilor propriului coninut n paragrafe. Nu trebuierezervat navigarea pentru bara de meniu.

Dimensionarea link-ului. O legtur mai lung este mai vizibil i maiuor de accesat.

Atunci cnd link-ul este compus dintr-un simbol sau pictogram i text,zona clickabilar trebui s cuprind toate elementele.Evitarea ca linkul s depeasc o linie.(10)

3.7.5.Distingerea diferitelor tipuri de link-uriLink-uri interne/externe.Diferenierea se poate face ntr-un mod ct mai

convenional prin reprezentarea link-urilor externe printr-o icoan cu ofereastr nou sau o sgeat spre exterior.

Este necesar ca utilizatorul s tie din timp spre ce se ndreapt, deaceea se pot utiliza pictograme sau indicaii textuale (PDF, WORD),precum i dimensiunea documentului. Acestea i cresc ncredereavizitatorului.

Linkurile intra-pagin i confer mai mult ncredere vizitatorului dectcele inter-pagin.

Link-urile de tip ancor trebuie s fie prezentate n aa fel nct ssugereze c ele conduc la o zon mai jos pe pagina (de exemplu, sgeatan jos). (10)

3.7.6.Legturi (link-uri) expliciteUn link trebuie s declare ct mai precis posibil ceea ce subliniaz

aceast (atenie la sindromul click aici), de exemplu vom folosi Vezifotografii n locul Pentru poze click aici.

Link-urile de tipul: Citete mai mult, a se vedea articolul, Detalii,ncarc inutil pagina.

Trebuie s se in cont delimbajul Web i de limbajul utilizatorilor.Link-uri coerente: link-urile ctre acelai loc trebuie s aib aceeai

etichet. (10)

3.8.Template-uri simple i eficiente3.8.1.Elementele template-ului adaptate sarcinii

Elementele utilizate n template trebuie s se potriveasc tipului de datepe care utilizatorii le cer de exemplu: caseta radio cu mai multe opiuni,ascunde, band derulant ... (11)

Dimensiunea cmpului trebuie s fie adaptat la numrul de caractereateptat.


12/17

12

3.8.2.Formulare uorde completatReglarea vizibilitatea de campuri n funcie de importana lor. Pentru a evidenia un cmp de intrare, aceasta trebuie s fie de culoare

alb pe unfond colorat, i gol. Un cmp gol este mai vizibil dect unul

prea plin.Indicarea de la nceput a unei legende n care s se specifice importana

unor domenii.tergerea":" de la sfritul etichetei. Dac formularul conine multe domenii, acestea trebuiesc grupate pe

teme.Alinierea etichetelor n partea stnga, n cazul n care etichetele nu

depesc 6-8 caractere. n caz contrar, aliniat dreapta.n cadrul constrngerilor de aliniere, distana dintre etichet i cmp nu

trebuie s fie prea mare. (11)3.8.3.Ajuta utilizatorul s evite i s corecteze greelile Indica formatul de informaii de ateptat n cazul n care aceasta ar

genera erori (de exemplu, zz / ll / aaaa).Ajutarea internautului s completeze formularul prin oferirea unor

indicaii.Salvarea datelor pe parcursul completrii, pentru a se evita reluarea

scrierii tuturor datelor n cazul unei greeli.Nu tergei informaiile greite pentru a facilita munca de corecie. Mai presus de toate, trebuiesc pstrate intrrile valide. (11)

3.8.4.Semnalarea erorilorMesajul ce anun eroarea trebuie s apar deasupra formularului.

Trebuie s atrag atenia prin form culoare i sunet i s indicegreeala/eroarea.

Atragerea atenie poate fi sporit i prin schimbarea culorii de fundal sauprin introducerea unor pictograme de pericol.

Mesajele trebuie s explice de eroarea i s oferesoluii de rezolvare.(11)3.9.Meniulnavigarea fr a pierde Nordul

Se recomand utilizarea funciei Pagina precedent. Este foarte utilpunerea elementelor care ndeplinesc aceast funcie n calea mouse-uluiatunci cnd merge la bara de instrumente a browser-ului, deoarece acest lucruva crete probabilitatea lor de utilizare. (12)


13/17

13

3.9.1.Arhitectura uni meniuExist multe moduri de a organiza coninutul unui site web i inclusiv a

meniului su:

Organizare tematicOrganizarea pe activitiOrganizarea n funcie de inta utilizatorului Organizare n ordine alfabeticOrganizarea cronologicOrganizare bazat pe popularitatea paginilor(12)

n construirea arhitecturii website-ului trebuie s ne folosim deprincipiul lime n profunzime, adic puine niveluri cu multe opiuni.Aceasta are ca avantaj o privire de ansamblu rapid. Utilizatorul poate selecta

cu uurin elementul de interes la fiecare nivel. (12)Termenii ce definesc obiectele ce apartin aceluiai nivel al unui meniu

trebuie s fie:

Semnificani (am inteles termenii pe care le acoper)complementari (toate elementele acoper toate posibilitile de

navigare)exclusivi (nici o ambiguitate ntre elemente). (12)

Elementele din mijloc sunt mai puin vizibile dect cele de la nceputulsau la sfritul meniului, mai ales ntr-un drop jos vertical. Se evitelementelor generice ntr-un meniu. Se ofer un mijloc explicit pentru areveni la prima pagina. (12)

3.9.2.Prezentarea unui meniuMeniul de navigare ar trebui s ias n eviden fa de restul paginii

(nota, fr a deveni un "site-off").Meniurile sunt de obicei plasate pe "marginile" site-ului. Navigarea

principal este adesea plasatn partea de sus sau din stnga, locaia estemai puin convenional.

Nu schimba locaia sau aparena unei navigride 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 numrul de

articole este mare, deoarece apropierea de elementele asociate cu textulsubliniat genereaz prea mult zgomot vizual. Este suficient doarformatul tip meniu pentru evideniere. (12)


14/17

14

3.9.3.Funcionarea unui meniuUtilizarea meniurilur derulante care apar la folosirea mouse-ului, dac

utilizatorii trebuie s gseasc rapid pagina care i intereseaz. Evitarea meniurilot de tip cascad (mai multe niveluri succesive) list deoperare.Nu trebuie s i se cearutilizatorului s manipuleze mouse-ul pentru a

ajunge la vertical i orizontal pentru un element dintr-un submeniu.Nu se schimb ordinea rubricilor meniului n funcie de pagina accesat

de ctre utilizator. Evitarea plasrii ntr-un meniu de navigare a unui link ctre un site

extern care conine de asemenea rubrici interne. (12)

3.9.4.Butoane de acionareButoanele ar trebui s apar i s se comporte identic n interiorul site-ului.Butoanele de aciune trebuie s fie vizibile: ntr-un format clar i detaat

de fundal deasupra benzii de scroll dac este posibil.Trebuie prevzut un format specific de butoane la trecerea cu mouse-ul.Un buton de aciune ar trebui s sugereze s facei clic pe el: ar trebui s

arate "aciune". S aib un format clickabil i un text consolidat va firegizat de aciune (verb la infinitiv sau imperativ).

Butoanele trebuie s fie uor de clickabil, s fie destul de mare, iarsuprafaa clickabil s fie extins dincolo de textul etichetei.Limbajul butoanelor de aciune trebuie s fie alctuit din verbe, trebuies se eviteetichetele, iar aceeai aciune trebuie s aib ntotdeaunaaceeai formulare, aceeai etichet..

Evitarea butoanelor alctuite doar din imagini, cu excepia cazului ncare este extrem de convenional idac avei nevoie de spaiu pe ecran.(12)

3.10.Organizarea listelor i a tabelelorEvidenierea datelor n locul tipurilor de date. Afiarea doar a coloanelelor care conin informaiile necesare

utilizatorilor n etapa paginii de listare. Detaliile vor aprea pe o paginnou, odat ce ai selectat un element.

n mod ideal, se plaseaz elementele de aciune ct mai aproape posibilde elementele la care se refer.

Pentru a facilita conectarea mental, trebuie s se prevad o schimbare aculorii liniei peste care trece mouse-ul.

Poate fi util prevederea unei funcii"Totul pe aceeai pagin" dacnumrul de elemente din list nu depete o sut.

n lista extins, se afieaz clar pagina accesat la momentul respectivprintr-un format specific, iar celelalte pagini ca link-uri. (13)


15/17

15

Nu se aliniazdatele centrat:

textul aliniat la stnga - pentru a da o impresie de coeren i uurinla citirea vertical.

cifrele aliniate la dreapta - pentru a sprijini activitatea de comparaiemintale. (13)

3.11.Feedback: Mesajele de informare pentru vizitatorii website-uluiEste imperios necesar furnizarea de feedback pentru orice aciune a

utilizatorului.

Reglarea vizibilitii paginilor de informare n funcie de importanalor. Pentru a mri vizibilitatea unui mesaj, poi s te joci cu mai multiparametri:

Folosii culori (pentru fundal i / sau pentru caractere) care se rup de celeutilizate n pagina.

nsoii mesajul de imagini.Modificarea dimensiunii casetei mesajului: cu ct va acoperi mai mult

ecranul cu att va fi mai vizibil.Animarea mesajului sau conferirea uniu aspect temporar pentru a atrage

atenia utilizatorilor. (14)

Mesajele confirm cererile vizitatorilor aciuniledistructive (tergereacontului, non-nregistrare de date, etc). Mesajele importante se scriu cu rou.

Se ofer asisten exact acolo unde are nevoie utilizatorul. n cazul ncare timpul de ncrcare este relativ lung de ateptat, se avertizeazutilizatorul i i se ofer o indicaie a progresului de ncrcare. (14)

Personalizarea paginii 404:

Evitai discurs tehnic, astfel nct utilizatorul s neleag ceea ce sentmpl.

Oferii oportuniti pentru navigare pentru a evita transformarea acesteiantr-o pagin moatr. (14)

4.ConcluziiWebsite-urile au ctigat pe piaa informaiei mai ales datorit

implementrii principiilor ergonomiei la construirea lor. Dac la construcia

acestuia se scap din ochi anumite puncte privind ergonomia, atunci anselesale de a avea ct mai muli vizitatori, care s fie mulumii de ceea ce gsesc


16/17

16

aici i care s doreasc s revin, scad imediat deoarece acum este oconcuren foarte mare. Website-ul cel mai ergonomic va fi ntotdeauna nfrunte. Degeaba ai informaia dac nu tii s faci n aa fel nct s fie ct maiuor de accesat de ctre cei crora te adresezi.

Sarcina unui specialist n ergonomia website-urilor sau a unuiwebdesigner este de a proiecta o interfa uor de utilizat, pentructigareautilizatorilor 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.


17/17

17

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 corespunztoare 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 ................................................. 93.6.3. Scrisul pe web trebuie s faciliteze scanarea ................................................... 9

3.6.4. Titlurile i etichetarea .................................................................................... 10

3.7. Hipertextele cheia unei navigri reuite.............................................................. 10

3.7.1. Link sau buton ............................................................................................... 10

3.7.2. Link-uri vizibile i folosite cu nelepciune ................................................... 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 ........................................................ 113.7.6. Legturi (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 uor de completat ......................................................................... 12

3.8.3. Ajuta utilizatorul s evite i s corecteze greelile ........................................ 12

3.8.4. Semnalarea erorilor........................................................................................ 12

3.9. Meniul navigarea fr a pierde Nordul .............................................................. 12

3.9.1. Arhitectura uni meniu .................................................................................... 133.9.2. Prezentarea unui meniu ................................................................................. 13

3.9.3. Funcionarea unui meniu ............................................................................... 14

3.9.4. Butoane de acionare ..................................................................................... 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

Ergonomia unui Website

Documents

Transcript of Ergonomia unui Website