s

HAIDEŢI SĂ NE

CUNOAŞTEM!!!

FACEŢI FIECARE CÂTE

O PREZENTARE ÎN

CARE SĂ INCLUDEŢI:

CINE SUNTEŢI, CÂŢI

ANI AVEŢI, CE STUDII

AVEŢI, DE CE SUNTEŢI

AICI???!!!!

aprilie 2011

Contraexemplu

2012

Comunicare

Realizarea prezentărilor:

Suportul vizual

UB, FPSE, master

Curs: Blended Learning

2012

1. Organizare vizuală

2. Utilizarea culorilor

3. E-reading

4. Sugestii de design vizual

5. Exerciţii

2012

• Claritate şi eleganţă

Atenţia acordată esteticii conţinutului constă în prezentarea acestuia într-o formă accesibilă celui care învaţă

Un aspect elegant şi un aranjament ordonat şi logic denotă profesionalism, consideraţie pentru utilizatori şi sporesc valoarea conţinutului.

1. Organizare vizuală

Curs: Blended Learning

2/34

2012

• Predictibilitate

O data stabilită, structura de prezentare a materialului trebuie să

rămână constantă de la o pagină/secvenţă la alta.

În cazul când apar variaţii de structură, modificările se vor justifica prin necesităţi de tip funcţional.

Nu vor fi făcute schimbări nici chiar dacă ţintesc către un design mai performant.

1. Organizare vizuală

Curs: Blended Learning

3/34

2012

• Standardizare şi consistenţă în folosirea unui stil

Acest principiu se referă la producerea unui aranjament care să

permită focalizarea rapidă şi fără ezitări pe elementele importante.

Aranjamentul va fi păstrat identic pentru toate secvenţele unei prezentări/ aplicaţii.

1. Organizare vizuală

Curs: Blended Learning

4/34

2012

• Orientare facilă în material/ aplicaţie

Meniul, prezent în fiecare pagină, va permite accesul direct sau

foarte rapid la secţiunile majore din site.

Într-o serie mai lungă de ecrane până la informaţia de conţinut, este binevenită o modalitate de indicare a poziţiei curente în structura materialului - un "fir al Ariadnei“ (location bar).

1. Organizare vizuală

Curs: Blended Learning

5/34

2012

• Simplitate

Autorii conţinuturilor au tendinţa să includă prea multe detalii.

Este indicat ca o pagină să conţină ideile principale şi linkuri de acces de tip "pentru mai multe informaţii...".

Câteva cercetări care au analizat comparativ textele 'dense' si cele conţinând doar ideile principale (prin eliminarea a 40% din conţinutul primelor) au ajuns la concluzia ca nivelul de reţinere a informaţiilor rămâne acelaşi, în timp ce durata unei sesiuni de lucru/ învăţare se scurtează semnificativ în cazul textelor 'prelucrate'.

1. Organizare vizuală

Curs: Blended Learning

6/34

2012

• Includerea listelor şi tabelelor

Tabelele şi listele rezumă informaţii complexe şi structurează

conţinutul într-o manieră ce favorizează înţelegerea.

Sugestii utile pentru un aranjament vizual eficient:

• folosirea numerotării sau a 'bulinelor' de marcare a fiecărui item

• aranjarea listelor se va face vertical, într-o singură coloană

• alinierea va fi la stânga

1. Organizare vizuală

Curs: Blended Learning

7/34

2012

• Poziţionarea în ordinea importanţei

Informaţiile vor fi poziţionate în pagină în ordinea importanţei şi

relevanţei lor, locul privilegiat fiind în stânga, sus (pentru indivizii din culturile europeană, americană - care sunt obişnuiţi să parcurgă vizual materialele într-o forma de Z).

1. Organizare vizuală

Curs: Blended Learning

8/34

2012

• Gruparea elementelor după semnificaţie

Acest principiu include câteva sugestii de 'topografia' paginii.

Elementele subsumate aceleiaşi idei trebuie sa fie demarcate de alte elemente sau grupuri de elemente prin folosirea spaţiilor libere, casetelor cu cadru, culorilor diferite şi altor modalităţi de grupare-etichetare.

Constanţa poziţiei acestor grupuri de elemente în contextul vizual general al aplicaţiei facilitează distingerea/ recunoaşterea lor.

1. Organizare vizuală

Curs: Blended Learning

9/34

2012

• Spaţiere

Este indicat ca textul propriu-zis să ocupe între 25 şi 50% din

spaţiul total al paginii.

Spaţierea dintre linii va fi proporţională cu mărimea corpului de literă.

1. Organizare vizuală

Curs: Blended Learning

10/34

2012

• Echilibru şi simetrie

Textul trebuie distribuit echilibrat în pagină şi ponderat prin

includerea de grafice şi imagini asociate semantic.

Avalanşa de informaţii brute, neprelucrate din punct de vedere vizual, este contraindicată, conducând la dezorientarea utilizatorilor.

1. Organizare vizuală

Curs: Blended Learning

11/34

2012

Utilizarea culorilor

Culoarea reprezintă un element important al materialelor de prezentare. Utilizarea unui câmp cromatic adecvat sporeşte randamentul activităţii intelectuale.

Utilizarea culorii se justifica în primul rând funcţional, însă determină în mare măsură estetica materialelor şi implicit prestanţa întregului soft educaţional.

Culorile se pot utiliza la nivelul textului, la nivelul ilustraţiilor şi pentru fundal.

2. Culori

Curs: Blended Learning

12/34

2012

A. La nivelul textului

În cazul utilizării corespunzătoare a contrastelor cromatice, precizia şi rapiditatea percepţiei şi memorării informaţiilor transmise creşte cu 40-50% comparativ cu contrastele simple în alb-negru.

2. Culori

Curs: Blended Learning

13/34

2012

Ordinea de intensitate a contrastelor cromatice pentru text din punct de vedere al lizibilităţii de la distanţă şi al preferinţei în procesul de reţinere de informaţii:

1. negru pe galben;

2. verde pe fond alb;

3. roşu pe fond alb;

4. albastru pe fond alb;

5. alb pe fond albastru;

6. negru pe fond alb;

7. galben pe fond negru;

8. alb pe fond roşu;

9. alb pe fond verde.

2. Culori

Curs: Blended Learning

14/34

2012

B. La nivelul ilustraţiilor

Utilizarea culorilor sporeşte valoarea de semnificaţie. Cititorul receptează, prelucrează şi interpretează o ilustraţie color mult mai rapid şi mai eficient decât o ilustraţie în tonuri de gri.

Simbolurile indiciale care semnalează vizual prezenţa unui conţinut de un anumit tip (meniu, informaţii utile, linkuri recomandate, atenţionări etc.) îşi vor îndeplini mai bine funcţia orientativă prin apelul la culori folosite constant şi ţinând seama de semnificaţiile convenţionale (galben - precauţie, roşu - atenţie etc.).

2. Culori

Curs: Blended Learning

15/34

2012

Există, desigur, şi imagini care au efect mai mare dacă sunt în tonuri de gri. Fotografiile alb-negru sunt deseori (când reprezintă acţiuni) mai pregnante, mai elocvente, mai sugestive şi mai dramatice decât cele color; portretele alb-negru pun mai bine în valoare expresia unei persoane.

Însă un grafic, o histogramă, o schemă sau o hartă vor fi mult mai bine puse în evidenţă prin culori şi devin astfel mai uşor lizibile, mai puţin solicitante/ obositoare.

2. Culori

Curs: Blended Learning

16/34

2012

Ordinea contrastelor cromatice recomandate pentru grafice şi scheme este următoarea:

1. albastru pe alb;

2. negru pe galben;

3. verde pe alb;

4. negru pe alb;

5. verde pe roşu.

2. Culori

Curs: Blended Learning

17/34

2012

C. Fundalul (background-ul)

Diferenţierea cromatică a paginilor fiecărei secţiuni sau teme se poate dovedi foarte utilă pentru orientarea generală în materialul prezentat pe computer.

Dar cel mai important aspect al utilizării culorilor pentru fond se referă la funcţia culorilor de influenţare a conduitei, prin declanşarea de trăiri afective, intenţii, atitudini pozitive.

2. Culori

Curs: Blended Learning

18/34

2012

Semnificaţiile şi efectele culorilor

Efectele principalelor culori asupra psihicului le recomandă pentru folosirea în diverse situaţii de prezentare a unui material:

2. Culori

Curs: Blended Learning

19/34

2012

Roşu: stimulator general, provoacă, incita la acţiune, îndeosebi în

plan psihomotor, stimulator intelectual, activare, mobilizare, facilitează asociaţiile de idei; este specifica tipului activ, autonom, locomotor, competitiv, operativ.

Portocaliu: stimulator emotiv, senzaţie de apropiere; culoare

sociabilă, mai activă decât galbenul, lasă impresia de optimism, veselie; pe suprafeţe întinse poate fi iritant.

2. Culori

Curs: Blended Learning

20/34

2012

Galben: stimulează şi întreţine starea de vigilenţă, sporeşte

capacitatea de mobilizare şi concentrare a atenţiei, predispune la comunicativitate; dă senzaţia de căldură şi intimitate. Caracteristică tipului activ, proiectiv, expansiv, investigativ şi cu un nivel ridicat de aspiraţie. Privită mult timp, dă senzaţia de oboseală, dar în tonuri palide este suportabilă.

Verde: efect de linişte, bună dispoziţie, relaxare, meditaţie,

echilibru, siguranţă; facilitează deconectarea nervoasă. Caracterizează tipul pasiv, defensiv, autonom, reţinut. Exprimă concentrare, siguranţă, introspecţie, autoevaluare.

2. Culori

Curs: Blended Learning

21/34

2012

Albastru: favorizează procesele de inhibiţie şi de încetinire a

ritmului activităţii; îndeamnă la calm şi reverie, concentrare şi linişte interioară, seriozitate, meditaţie. În exces, conduce la depresie. Se caracterizează prin "profunzimea trăirilor şi sentimentelor". Caracteristică pentru tipul pasiv, senzitiv, perceptiv.

Violet: efect stimulator, neliniştitor şi descurajator; dă senzaţia

de gravitate. Semnificaţia psihologică este de tristeţe, melancolie, penitenţă.

2. Culori

Curs: Blended Learning

22/34

2012

Negru: efecte psihologice de nelinişte, reţinere, depresie,

introversie; impresie de adâncime, plinătate şi greutate; semnificaţie psihoafectivă de tristeţe, sfârşit, singurătate, despărţire, doliu. Poate fi utilizată ca element de delimitare, contrast sau fond pentru celelalte culori.

Alb: efecte de expansivitate, uşurinţă, suavitate, robusteţe,

puritate, răceală; exprimă pace, împăcare, linişte, inocenţă, curăţenie, sobrietate.

2. Culori

Curs: Blended Learning

23/34

2012

Notă: Efectul psihologic al culorilor variază în funcţie de mărimea

suprafeţei pe care se foloseşte, de nuanţă şi de ton.

Ex.: Folosirea culorii roşu pentru mici elemente din pagină este stimulatoare, motivantă, incitantă; însă utilizarea ei pentru background este total contraindicată, putând determina chiar modificări la nivel fiziologic.

2. Culori

Curs: Blended Learning

24/34

2012

Comportamentul utilizatorilor de Internet

Cercetătorii de la Institutul Poynter, într-un studiu având drept

scop relevarea modului în care utilizatorii de Internet citesc noutăţile pe Web, au ajuns la următoarele concluzii:

3. E-reading

Curs: Blended Learning

25/34

2012

• Se realizează o lectură de suprafaţă combinată cu aprofundări selective. 3/4 din cititori îşi limitează lectura la parcurgerea cuprinsului şi scurtei descrieri a articolului (modalitate de prezentare foarte utilizată pe Internet). Chiar şi atunci când se angajează în lectura unui articol întreg, de obicei parcurg efectiv doar 75% din text.

3. E-reading

Curs: Blended Learning

26/34

2012

Cel mai întâlnit comportament vizează "vânarea" informaţiilor şi ignorarea detaliilor. Dar, odată ce informaţia semnificativă a fost identificată, cititorii trec adesea la o lectură de profunzime.

Conţinutul prezentat pe ecran trebuie să susţină ambele aspecte. Textul trebuie sa se preteze la baleiaj rapid şi să furnizeze în acelaşi timp răspunsuri substanţiale la căutările cititorilor. De altfel, o prezentare în modul hipertext permite organizarea conţinutului în structuri ierarhice multinivelare, navigarea realizându-se facil orizontal, vertical sau în salturi de la o unitate de informaţie la alta.

3. E-reading

Curs: Blended Learning

27/34

2012

• Textul atrage atenţia înaintea imaginilor şi graficelor.

La prima vizită pe pagină, privirea baleiază pe text, oprindu-se asupra titlurilor, subtitlurilor şi sumarelor de articole.

3. E-reading

Curs: Blended Learning

28/34

2012

• Titlurile şi intertitlurile simple sunt preferate celor cu corp de literă diferit, culoare diferită sau în general caracterizate de un stil (font + culoare + marime) ce contrastează cu aspectul paragrafelor cu informaţii de conţinut.

O variaţie neexagerată a corpului de litera (fontului) este permisă. Însă schimbarea culorii folosite pentru conţinut şi mărimea disproporţionată a literelor din titluri şi intertitluri vor determina dificultăţi de înţelegere (rapidă) prin discontinuităţi perceptive.

3. E-reading

Curs: Blended Learning

29/34

2012

• Vizitatorul poate fi ajutat să se orienteze/ reorienteze prin introducerea unor organizatori vizuali:

o titluri şi intertitluri din pagina simple şi clare ce permit o orientare rapidă în continut;

o titluri de pagină semnificative ce ajută la recunoaşterea unităţii de conţinut şi mai ales la construirea unei hărţi cognitive sau a unei scheme mnezice;

o simboluri indiciale (indicatori) în culori adecvate;

o grafice, ilustraţii, tabele în locul unor conţinuturi descriptive.

4. Sugestii de design vizual

Curs: Blended Learning

30/34

2012

• Designerul trebuie să pornească de la premisa că vizitatorul nu îşi mai aminteşte paşii de navigare ce l-au adus în faţa unui anumit material/ conţinut:

o se dovedeşte utilă inserarea în antet a unui "fir al Ariadnei" (location bar) care indică poziţia actuală în succesiunea sau în structura ierarhica a sitului web;

o păstrarea culorilor standard pentru legăturile active (albastru pentru linkuri nevizitate şi roşu închis pentru linkuri vizitate) uşurează orientarea, recunoaşterea şi structurarea mentală a conţinutului informaţional ce se parcurge.

Curs: Blended Learning

31/34

4. Sugestii de design vizual

2012

• Folosirea unei terminologii standard (cel puţin pentru textele de asistenţă în navigare) elimină timpul suplimentar acordat de utilizator pentru manipularea aplicaţiei.

Curs: Blended Learning

32/34

4. Sugestii de design vizual

2012

• Este recomandată evitarea “erorilor” de design: mai mult de 2 corpuri de literă pe pagină, mai mult de 3 culori, variaţia de stil şi poziţionare a elementelor în cadrul aceluiaşi ecran sau întregului material, introducerea de conţinut ilizibil (aglomeraţie de elemente, ilustraţii de slabă calitate), text puţin lizibil (contrast slab, corp de literă prea mic, mai mult de 1-2 cuvinte bold/ italic/ underline per paragraf) etc.

Curs: Blended Learning

33/34

4. Sugestii de design vizual

2012

1. Analizează ultima prezentare pe care ai elaborat-o, sub aspectele evidenţiate în acest curs.

2. Observă culorile dominante folosite de designerii siturilor pe care le vizitezi. Încearcă să determini dacă mesajul textului unei pagini corespunde cu starea transmisa de context, prin culoare.

3. Încearcă să conştientizezi propriul comportament în navigarea pe Web. Atunci când abandonezi o pagina web, încearcă să determini motivul: informaţia nestructurată şi dificil de parcurs, designul inadecvat, dezamăgirea la contactul cu informaţia...

5. Exerciţii

Curs: Blended Learning

34/34