Post on 24-Dec-2015
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