Reguli de Elaborare A Suporturilor Vizuale

Curs: Instruire Asistată de Calculator
Tema: Suportul vizual pentru prezentări

1/44
Realizarea prezentărilor:
Suportul vizual
2/44
3/44
1. Organizare vizuală
2. Utilizarea culorilor
3. E-reading
4. Sugestii de design vizual
5. Exerciţii
4/44
• Claritate şi eleganţă
- prezentarea conținutului într-o formă ”estetică” -> accesibilă

celui care învaţă
Un aspect elegant şi un aranjament ordonat şi logic denotă

profesionalism și consideraţie pentru audiență, sporind valoarea
conţinutului.
5/44
• Gruparea elementelor după semnificaţie
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
• altor modalităţi de grupare-etichetare
6/44
• Standardizare, consistență, predictibilitate
- aranjament care să permită focalizarea rapidă pe ideile cheie
- structura constantă de la o pagină/ secvenţă la alta
ușurează distingerea/ recunoașterea grupurilor de elemente

7/44
• Orientare facilă în material/ aplicaţie
a) Meniul, prezent în fiecare pagină, permite accesul direct sau

foarte rapid la secţiunile majore.
b) Î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).
c) Includeți indicatori de progres.

8/44
• Poziţionarea în ordinea importanţei
Locul privilegiat este în stânga, sus

pentru audiența din culturile europeană, americană –
obişnuiţi să parcurgă vizual materialele într-o forma de Z.

9/44
• Spaţiere
Este indicat ca textul propriu-zis să ocupe între 25 şi 50% din

spaţiul total al paginii.
Distanţa dintre linii va fi proporţională cu mărimea corpului de

literă.
10/44
• Echilibru şi simetrie
Textul trebuie distribuit echilibrat în pagină şi ponderat prin

includerea de grafice şi imagini asociate semantic.
11/44
• Includerea listelor, schemelor şi tabelelor
- sintetizează informaţii complexe; oferă ”ancore cognitive”
- structurează conţinutul; pot constitui ”hărți conceptuale”
- facilitează retenția, înțelegerea, aplicarea, analiza, evaluarea

12/44
• Simplitate
Autorii suporturilor vizuale au tendinţa să includă prea multe detalii.
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'.
"pentru mai multe informaţii..."

Contraexemplu
Utilizat în scop didactic
MARIA MONTESSORI
Omul din spatele ideii…
• Se naste in 1870 in Chiaravalle, provincia Ancona.
• Este prima femeie care a practicat medicina in Italia, dupa absolvirea Facultatii de
Medicina a Universitatii din Roma in 1896.
• In urma unei cercetari atente si minutioase, ea a realizat ca micutii isi construiesc
propriile lor personalitati pe masura ce interactioneaza cu mediul inconjurator.
• In 1907 deschide prima Casa dei Bambini (Casa Copiilor) intr-unul dintre cele mai
sarace cartiere din Roma, pe atunci notoriul Quartiere di San Lorenzo.
• Dr. Montessori a fost convinsa ca educatia incepe la nastere si ca primii ani din viata
unui copil, fiind cei care-l slefuiesc pe acesta cel mai mult, sunt si cei mai
importanti, atat fizic, cat si mental. In acesti primi ani, copilul are asa-numitele
“perioade senzitive”, in timpul carora este in mod particular receptiv la anumiti
stimuli.
• Moare in 1952 in Olanda la varsta de 81 de ani. Dupa moartea ei, Mario, fiul ei, a
devenit succesor la conducerea Asociatiei Internationale Montessori (AMI),
organizatie cu sediul in Amsterdam.
Materialele de dezvoltare
Contraexemplu
MONTESSORI
- un curriculum materializat
• organizate pe arii de dezvoltare, concepute special pentru
utilizarea lor de către copil (individual sau în grup), după ce i-au
fost prezentate (introduse în activitatea copilului printr-un tip de
lecţie concepută riguros ştiinţific şi realizată tehnic cu precizie şi
în mod atractiv).
 Aria pentru “viaţa practică”, cuprinde toate seturile care servesc
activităţilor de îngrijire personală, îngrijirea mediului, deprinderea
regulilor de convieţuire socială, (exerciţiile de “graţie şi
curtoazie”), locul de sevit masa (pentru câţiva copii, ei vor mânca
pe rând).
 Aria pentru “dezvoltare senzorială” cuprinde seturile destinate
exerciţiilor de rafinare a simţurilor, prin care se oferă “cheile”
pentru cunoaşterea lumii reale şi se antrenează spiritual de
observare, capacitatea de autocontrol.
 Aria pentru “dezvoltarea limbajului” cuprinde materiale speciale
pentru asimilarea şi dezvoltarea limbajului sub toate formele:
auzit, vorbit, scris, citit.
Contraexemplu
Materialele de dezvoltare
MONTESSORI
- un curriculum materializat
 Aria pentru “matematică” cuprinde materiale pentru însuşirea
numeraţiei, a scrierii cifrelor, pentru asimilarea şi utilizarea
bazelor sistemului zecimal, pentru operaţiile aritmetice ş.a.
 Aria pentru “stiinte si activitati culturale”: materiale care sunt

destinate cunoaşterii naturii (plantelor, animalelor); cunoaşterii
elementelor de geografie (formele de pământ şi apă, globul
pământesc, planiglobul cu continentele, puzzle cu ţările
continentului unde trăieşte copilul); materiale destinate
cunoaşterii unor aspecte din viaţa culturală şi socială (pictori şi
opera lor, compozitori şi compoziţiile lor etc). Pentru expresia
artistică sunt mai multe materiale care servesc exersării decupajului,
lipitului, diferitelor tehnici de expresie plastică, desen, pictură.
16/44
Avalanşa de informaţii brute, neprelucrate, este contraindicată,

forţând audienţa la eforturi suplimentare pentru:
• discriminarea textului/ lecturare;

• structurarea informaţiei şi identificarea informaţiei relevante;
• înţelegerea mesajului şi evaluarea informaţiei;
• fixare/ retenţie.
Exemplu de hartă conceptuală
Utilizat în scop didactic Curs: Instruire Asistată de Calculator
17/44
18/44
Procesele de gândire pot fi favorizate de utilizarea
hărților concepuale
(1) pentru a pune în evidență concepte cheie sau idei principale
(2) pentru a facilita înțelegerea relațiilor dintre concepte
(inclusiv cauză-efect și parte-întreg)
(3) pentru a permite o vedere de ansamblu asupra premiselor,
ierarhiilor și legăturilor multiple, într-o manieră riguroasă
(4) pentru revizuirea, fixarea sensului conceptelor
și integrarea lor în ansamblu
Exemplu de hartă conceptuală
Utilizat în scop didactic Curs: Instruire Asistată de Calculator
19/44
text2mindmap.com
bubbl.us
20/44
2. Culori
Utilizarea culorilor
În materialele de prezentare, utilizarea unui câmp cromatic adecvat

sporeşte randamentul activităţii intelectuale.
Culorile se pot utiliza

• la nivelul textului
• la nivelul ilustraţiilor
• pentru fundal
21/44
2. Culori
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.
22/44
2. Culori
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.
23/44
2. Culori
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.).
24/44
2. Culori
Unele imagini 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,
• 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.
25/44
2. Culori
Ordinea contrastelor cromatice recomandate pentru grafice şi

scheme:
1. albastru pe alb;
2. negru pe galben;
3. verde pe alb;
4. negru pe alb;
5. verde pe roşu.
26/44
2. Culori
C. Fundalul (background-ul)
Diferenţierea cromatică orientarea generală în materialul în

format digital
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.
27/44
2. Culori
Semnificaţiile şi efectele culorilor
Efectele principalelor culori asupra psihicului le recomandă pentru

folosirea în diverse situaţii de prezentare a unui material:
28/44
2. Culori
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.
29/44
2. Culori
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.
30/44
2. Culori
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ţă.
31/44
2. Culori
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.
32/44
2. Culori
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 fiziologice ireversibile la nivelul ochiului.
33/44
3. E-reading
Comportamentul consumatorilor de materiale în format digital
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:
Cercetătorii de la
Institutul Poynter,
Cercetătorii de la Institutul Poynter, într-un studiu
având drept scop
într-un studiu având drept scop relevarea modului
relevarea modului în care utilizatorii în care utilizatorii
de Internet citesc noutăţile pe Web, de Internet citesc
noutăţile pe Web,
au ajuns la următoarele concluzii: au ajuns la
următoarele
concluzii:
34/44
3. E-reading
• 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.
35/44
3. E-reading
• Cel mai întâlnit comportament vizează "vânarea" informaţiilor

relevante şi ignorarea detaliilor. Dar, odată ce informaţia
semnificativă a fost identificată, cititorii trec la o lectură de
profunzime.
Conţinutul prezentat 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. 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.
36/44
3. E-reading
• 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.
37/44
3. E-reading
• 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ă) cauzate de
„discontinuităţile” perceptive.
38/44
3. E-reading
Exemple de seturi de caractere (font-uri)
Fonturi serif Fonturi sans-serif

(preferate în tipar) (preferate în mediul digital)
Times New Roman Arial

Book Antiqua Verdana
Bookman Old Style Tahoma
39/44
• Cititorul poate fi ajutat să se orienteze/ reorienteze prin

introducerea unor organizatori vizuali:
 titluri de pagină semnificative ce ajută la recunoaşterea unităţii de

conţinut;
 intertitluri simple şi clare ce permit o orientare rapidă în continut şi
mai ales la construirea unei hărţi conceptuale sau a unei scheme
mnezice;
 simboluri indiciale (indicatori) în culori adecvate;
 grafice, ilustraţii, liste, tabele în locul unor texte dense.
40/44
• Premisa este că vizitatorul obişnuit nu îşi mai aminteşte paşii

de navigare care l-au adus la un anumit conţinut.
 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 întregului materialul.
 Păstrarea culorilor standard pentru legăturile active (albastru pentru
linkuri nevizitate şi roşu închis pentru linkuri vizitate/ estomparea în
gri a butoanelor/ paginilor vizitate) uşurează orientarea,
recunoaşterea şi structurarea mentală a conţinutului informaţional ce
se parcurge.
41/44
• Folosirea unei terminologii standard (cel puţin pentru textele

de asistenţă/ indicatori) elimină timpul suplimentar acordat de
utilizator pentru (re)organizarea informației.
42/44
Evitarea “erorilor” de design:

• mai mult de 2 corpuri de literă pe pagină
• mai mult de 3 culori
• variaţie de stil şi poziţionare a elementelor în cadrul aceluiaşi
ecran sau întregului material
• introducerea de conţinut redundant şi irelevant (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.
Contraexemplu
43/44
VIRUSOLOGIE: VIRUŞI ŞI
VIRUSURI
CONVERGENŢE BIO-TEHNO
MINIATURIZARE,
DETERMINĂRI BIOLOGICE ŞI
LIMITE TEHNOLOGICE
PROFESOR ION IONESCU
TEMELE CURSULUI DE
BIONANOTEHNOLOGII!!!
ANUNŢ IMPORTANT CONTACTAŢI
LABORANTUL PANĂ LA SFARSITUL
ANULUI!!!
44/44
5. Exerciţii
1. Analizați ultima prezentare pe care ați elaborat-o.
2. Analizaţi diverse materiale pentru învăţare în format electronic:

în format pdf, pagini web, suporturi vizuale pentru prezentări,
manuale digitale, soft educaţional etc.
Încercați să determinați:
• dacă mesajul textului este susţinut de elemente vizuale:
aranjament, structurare, culoare, grafică;
• cum ar putea fi ameliorată forma de prezentare pentru a
susţine mai bine învăţarea.
45/44
Temă
3. Creaţi un suport vizual (în ppt, prezi, doc) pentru o prezentare

de 20 de minute a unei teme la alegere.
Olimpius Istrate
olimpius.istrate@g.unibuc.ro

Reguli de Elaborare A Suporturilor Vizuale

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Reguli de Elaborare A Suporturilor Vizuale

Încărcat de

Drepturi de autor:

Formate disponibile

Curs: Instruire Asistată de Calculator

Tema: Suportul vizual pentru prezentări

- prezentarea conținutului într-o formă ”estetică” -> accesibilă

Un aspect elegant şi un aranjament ordonat şi logic denotă

• Gruparea elementelor după semnificaţie

Sugestii de 'topografia' paginii: elementele subsumate aceleiaşi

• Standardizare, consistență, predictibilitate

- aranjament care să permită focalizarea rapidă pe ideile cheie

- structura constantă de la o pagină/ secvenţă la alta

ușurează distingerea/ recunoașterea grupurilor de elemente

• Orientare facilă în material/ aplicaţie

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

b) Într-o serie mai lungă de ecrane până la informaţia de conţinut,

c) Includeți indicatori de progres.

• Poziţionarea în ordinea importanţei

Locul privilegiat este în stânga, sus

obişnuiţi să parcurgă vizual materialele într-o forma de Z.

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

Distanţa dintre linii va fi proporţională cu mărimea corpului de

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

• Includerea listelor, schemelor şi tabelelor

- sintetizează informaţii complexe; oferă ”ancore cognitive”

- structurează conţinutul; pot constitui ”hărți conceptuale”

- facilitează retenția, înțelegerea, aplicarea, analiza, evaluarea

Autorii suporturilor vizuale au tendinţa să includă prea multe detalii.

Câteva cercetări care au analizat comparativ textele 'dense' si cele

"pentru mai multe informaţii..."

 Aria pentru “stiinte si activitati culturale”: materiale care sunt

Avalanşa de informaţii brute, neprelucrate, este contraindicată,

• discriminarea textului/ lecturare;

Procesele de gândire pot fi favorizate de utilizarea

În materialele de prezentare, utilizarea unui câmp cromatic adecvat

Culorile se pot utiliza

În cazul utilizării corespunzătoare a contrastelor cromatice,

Ordinea de intensitate a contrastelor cromatice pentru text din

Utilizarea culorilor sporeşte valoarea de semnificaţie. Cititorul

Simbolurile indiciale care semnalează vizual prezenţa unui conţinut

Unele imagini au efect mai mare dacă sunt în tonuri de gri.

Fotografiile alb-negru sunt deseori (când reprezintă acţiuni)

Însă un grafic, o histogramă, o schemă sau o hartă vor fi mult mai

Ordinea contrastelor cromatice recomandate pentru grafice şi

Diferenţierea cromatică orientarea generală în materialul în

Dar cel mai important aspect al utilizării culorilor pentru fond se

Semnificaţiile şi efectele culorilor

Efectele principalelor culori asupra psihicului le recomandă pentru

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

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

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

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

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

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

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

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

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

• Se realizează o lectură de suprafaţă combinată cu aprofundări

3/4 din cititori îşi limitează lectura la parcurgerea cuprinsului

Chiar şi atunci când se angajează în lectura unui articol întreg,

• Cel mai întâlnit comportament vizează "vânarea" informaţiilor

Conţinutul prezentat trebuie să susţină ambele aspecte. Textul

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

La prima vizită pe pagină, privirea baleiază pe text, oprindu-se

• Titlurile şi intertitlurile simple sunt preferate celor cu corp de

O variaţie neexagerată a corpului de litera (fontului) este permisă.