coala de var SIVECO DrobetaTurnu Severin Designul vizual
Şcoala de vară SIVECO Drobeta-Turnu Severin Designul vizual al softului educaţional Olimpius Istrate 17 august 2004 - Severin
Designul vizual al SE 1/34 1. 2. 3. 4. 5. Organizare vizuală Folosirea culorilor E-reading Sugestii de design vizual Exerciţii 17 august 2004 - Severin
Designul vizual al SE 2/34 1. Organizare vizuală • Claritate şi eleganţă Atentia acordata esteticii continutului consta în prezentarea acestuia într-o forma accesibila cititorului Un aspect elegant si un aranjament ordonat si logic denota profesionalism, consideratie pentru utilizatori si sporesc valoarea continutului. 17 august 2004 - Severin
Designul vizual al SE 3/34 1. Organizare vizuală • Predictabilitate şi regularitate O data stabilita, structura de prezentare a materialului trebuie sa ramâna constanta de la o pagina/secventa la alta. În cazul când apar variatii de structura, modificarile se vor justifica prin necesitati de tip functional, dar nu vor fi facute schimbari de dragul schimbarilor, chiar daca vor tinti catre un design mai performant. 17 august 2004 - Severin
Designul vizual al SE 4/34 1. Organizare vizuală • Standardizare şi consistenţă în folosirea unui stil Acest principiu se refera la producerea unui aranjament care sa permita focalizarea rapida si fara ezitari pe elementele importante. Aranjamentul va fi pastrat identic pentru toate secventele unei prezentari/ aplicatii. 17 august 2004 - Severin
Designul vizual al SE 5/34 1. Organizare vizuală • Orientare facilă în material/ aplicaţie Meniul, prezent în fiecare pagina, va permite accesul direct sau foarte rapid la sectiunile majore din site. Textul principal de prezentare (sinteza continutului unei pagini) se recomanda sa fie relativ scurt, pe cât posibil sa încapa într-un singur ecran (fara derulare). Într-o serie mai lunga de ecrane pâna la informatia de continut, este binevenita o modalitate de indicare a pozitiei actuale în structura materialului - un "fir al Ariadnei“ (location bar). 17 august 2004 - Severin
Designul vizual al SE 6/34 1. Organizare vizuală • Simplitate Autorii de continuturi au tendinta sa includa prea multe detalii. Este indicat ca o pagina sa contina ideile principale si linkuri de acces de tip "pentru mai multe informatii. . . ". Câteva cercetari care au analizat comparativ textele 'dense' si cele continând doar ideile principale (prin eliminarea a 40% din continutul primelor) au ajuns la concluzia ca nivelul de retinere a informatiilor ramâne acelasi, în timp ce durata unei sesiuni de lucru/ invatare se scurteaza semnificativ în cazul textelor 'prelucrate'. 17 august 2004 - Severin
Designul vizual al SE 7/34 1. Organizare vizuală • Includerea listelor şi tabelelor pentru structurarea conţinutului Un tabel poate rezuma informatii complexe într-o maniera ce favorizeaza întelegerea. Sugestiile de aranjare a listelor sunt utile pentru un aranjament vizual eficient: • • • folosirea 'bulinelor' de marcare a fiecarui item sau numerotarii identate aranjarea listelor se va face vertical alinierea va fi la stânga 17 august 2004 - Severin
Designul vizual al SE 8/34 1. Organizare vizuală • Poziţionarea în ordinea importanţei Informatiile vor fi pozitionate în pagina în ordinea importantei si relevantei lor, locul privilegiat fiind în stânga, sus (pentru indivizii din culturile europeana, americana - care sunt obisnuiti sa parcurga vizual materialele într-o forma de Z). 17 august 2004 - Severin
Designul vizual al SE 9/34 1. Organizare vizuală • Gruparea elementelor dupa semnificaţie Acest principiu include câteva sugestii de 'topografia' paginii. Elementele subsumate aceleiasi idei trebuie sa fie demarcate de alte elemente sau grupuri de elemente prin folosirea spatiilor libere, casetelor cu cadru, culorilor diferite si altor modalitati de grupare-etichetare. Constanta pozitiei acestor grupuri de elemente în contextul vizual general al aplicatiei faciliteaza distingerea/ recunoasterea lor. 17 august 2004 - Severin
Designul vizual al SE 10/34 1. Organizare vizuală • Spaţiere Este indicat ca textul propriu-zis sa ocupe între 25 si 50% din spatiul total al paginii. Evidentierea unitatilor de text prin folosirea atributelor: text subliniat, îngrosat sau caractere aldine. O culoare diferita scoate în evidenta anumite informatii considerate importante. Spatierea dintre linii va tine cont de marimea corpului de litera. 17 august 2004 - Severin
Designul vizual al SE 11/34 1. Organizare vizuală • Echilibru şi simetrie Textul trebuie distribuit echilibrat în pagina si ponderat prin includerea de grafice si imagini. Avalansa de informatii brute, neprelucrate din punct de vedere vizual, este contraindicata, conducând la dezorientarea utilizatorilor. 17 august 2004 - Severin
Designul vizual al SE 12/34 2. Culori • Utilizarea adecvată a culorilor Constatarea ca utilizarea unui câmp cromatic variat sporeste randamentul activitatii intelectuale a propulsat si diversificat cercetarile despre influenta culorilor asupra psihicului uman. O îmbinare adecvata de culori este un element important al materialelor de prezentare. Culorile se pot utiliza la nivelul textului, la nivelul ilustratiilor si pentru fundal. Utilizarea culorii se justifica în primul rând functional, însa determina în mare masura estetica (caracterul si tinuta) materialelor, si implicit prestanta întregului software. 17 august 2004 - Severin
Designul vizual al SE 13/34 2. Culori A. La nivelul textului În cazul utilizarii corespunzatoare a contrastelor cromatice, precizia si rapiditatea perceptiei si memorarii informatiilor transmise creste cu 40 -50% comparativ cu contrastele simple în alb-negru. 17 august 2004 - Severin
Designul vizual al SE 14/34 2. Culori Cercetarile psihologice asupra contrastelor cromatice au stabilit urmatoarea ordine descrescatoare de intensitate a contrastelor cromatice pentru text din punct de vedere al lizibilitatii de la distanta si al preferintei în procesul de retinere de informatii: 1. 2. 3. 4. 5. 6. 7. 8. 9. negru pe galben; verde pe fond alb; rosu pe fond alb; albastru pe fond alb; alb pe fond albastru; negru pe fond alb; galben pe fond negru; alb pe fond rosu; alb pe fond verde. 17 august 2004 - Severin
Designul vizual al SE 15/34 2. Culori B. La nivelul ilustraţiilor Utilizarea culorilor sporeste valoarea de semnificatie. Cititorul recepteaza, prelucreaza si interpreteaza o ilustratie color mult mai rapid si mai eficient decât o ilustratie în tonuri de gri. Simbolurile indiciale care semnaleaza vizual prezenta unui continut de un anumit tip (meniu, informatii utile, linkuri recomandate, atentionari etc. ) îsi vor îndeplini mai bine functia orientativa prin apelul la culori folosite constant si tinând seama de semnificatiile conventionale (galben - precautie, rosu - atentie etc. ). 17 august 2004 - Severin
Designul vizual al SE 16/34 2. Culori Exista, desigur, si imagini care au efect mai mare daca sunt în tonuri de gri. Fotografiile alb-negru sunt deseori (când reprezinta actiuni) mai pregnante, mai elocvente si mai sugestive, mai dramatice decât cele color; portretele alb-negru pun mai bine în valoare expresia unei persoane. Însa un grafic, o histograma, o schema sau o harta vor fi mult mai bine puse în evidenta prin culori si devin astfel mai usor lizibile, mai putin obositoare. 17 august 2004 - Severin
Designul vizual al SE 17/34 2. Culori Ordinea contrastelor cromatice recomandate pentru grafice si scheme este urmatoarea: 1. 2. 3. 4. 5. albastru pe alb; negru pe galben; verde pe alb; negru pe alb; verde pe rosu. 17 august 2004 - Severin
Designul vizual al SE 18/34 2. Culori C. Fundalul (background-ul) Diferentierea cromatica a paginilor fiecarei sectiuni sau teme se poate dovedi foarte utila în orientarea generala în materialul de prezentare pe Internet. Dar cel mai important aspect al utilizarii culorii pentru fond se refera la functia culorilor de influentare a conduitei, prin declansarea de trairi afective, intentii, atitudini pozitive. 17 august 2004 - Severin
Designul vizual al SE 19/34 2. Culori Semnificaţiile şi efectele culorilor Efectele principalelor culori asupra psihicului le recomanda pentru folosirea în diverse situatii de prezentare a unui material: 17 august 2004 - Severin
Designul vizual al SE 20/34 2. Culori Rosu: stimulator general, provoaca, incita la actiune, îndeosebi în plan psihomotor, stimulator intelectual, activare, mobilizare, faciliteaza asociatiile de idei. Este specifica tipului activ, autonom, locomotor, competitiv, operativ. Portocaliu: stimulator emotiv, senzatie de apropiere, culoare sociabila, mai activa decât galbenul, lasa impresia de optimism, veselie; pe suprafete întinse poate fi iritant. 17 august 2004 - Severin
Designul vizual al SE 21/34 2. Culori Galben: stimuleaza si întretine starea de vigilenta, sporeste capacitatea de mobilizare si concentrare a atentiei, predispune la comunicativitate; da senzatia de caldura si intimitate. Caracteristica tipului activ, proiectiv, expansiv, investigativ si cu un nivel ridicat de aspiratie. Privita mult timp, da senzatia de oboseala, dar în tonuri palide este suportabila. Verde: efect de liniste, buna dispozitie, relaxare, meditatie, echilibru, siguranta; faciliteaza deconectarea nervoasa. Caracterizeaza tipul pasiv, defensiv, autonom, retinut. Exprima concentrare, siguranta, introspectie, autoevaluare. 17 august 2004 - Severin
Designul vizual al SE 22/34 2. Culori Albastru: favorizeaza dezvoltarea proceselor de inhibitie si de încetinire a ritmului activitatii; îndeamna la calm si reverie, concentrare si liniste interioara, seriozitate, meditatie. În exces, conduce la depresie. Se caracterizeaza prin "profunzimea trairilor si sentimentelor". Caracteristica pentru tipul pasiv, senzitiv, perceptiv. Violet: efect stimulator, nelinistitor si descurajator; da senzatia de gravitate. Semnificatia psihologica este de tristete, melancolie, penitenta. 17 august 2004 - Severin
Designul vizual al SE 23/34 2. Culori Negru: efecte psihologice de neliniste, retinere, depresie, introversie; impresie de adâncime, plinatate si greutate; semnificatie psihoafectiva de tristete, sfârsit, singuratate, despartire, doliu. Poate fi utilizata ca element de delimitare, contrast sau fond pentru celelalte culori. Alb: efecte de expansivitate, usurinta, suavitate, robustete, puritate, raceala; exprima pace, împacare, liniste, inocenta, curatenie, sobrietate. 17 august 2004 - Severin
Designul vizual al SE 24/34 2. Culori Notă: Efectul psihologic al culorilor variază în funcţie de cantitatea de culoare folosită. 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 ale retinei. 17 august 2004 - Severin
Designul vizual al SE 25/34 3. E-reading Comportamentul utilizatorilor de Internet Cercetatorii de la Institutul Poynter, într-un studiu recent având drept scop relevarea modului în care utilizatorii de Internet citesc noutatile pe Web, au ajuns la urmatoarele concluzii: 17 august 2004 - Severin
Designul vizual al SE 26/34 3. E-reading • Se realizeaza o lectura de suprafata combinata cu aprofundari selective. 3/4 din cititori îsi limiteaza lectura la parcurgerea cuprinsului si scurtei descrieri a articolului (modalitate de prezentare foarte utilizata pe Internet). Chiar si atunci când se angajeaza în lectura unui articol întreg, de obicei parcurg efectiv doar 75% din text. 17 august 2004 - Severin
Designul vizual al SE 27/34 3. E-reading Cel mai întâlnit comportament vizeaza "vânarea" informatiilor si ignorarea detaliilor. Dar, odata ce informatia semnificativa a fost identificata, cititorii trec adesea la o lectura de profunzime. Continutul prezentat pe ecran trebuie sa sustina ambele aspecte, ce tin de accesul la informatii. Textul trebuie sa se preteze la baleiaj rapid si sa furnizeze în acelasi timp raspunsuri substantiale la cautarile cititorilor. De altfel, o prezentare în modul hipertext permite organizarea continutului în structuri ierarhice multinivelare, navigarea realizându-se facil orizontal, vertical sau în salturi de la o unitate de informatie la alta. 17 august 2004 - Severin
Designul vizual al SE 28/34 3. E-reading • Textul atrage atentia înaintea imaginilor si graficelor. La prima vizita pe pagina, privirea baleiaza pe text, oprindu-se asupra titlurilor, subtitlurilor si sumarelor de articole. 17 august 2004 - Severin
Designul vizual al SE 29/34 3. E-reading • Titlurile si intertitlurile simple sunt preferate celor cu corp de litera diferit, culoare diferita sau în general caracterizate de un stil (font + culoare + marime) ce contrasteaza cu aspectul paragrafelor cu informatii de continut. O variatie neexagerata a corpului de litera (fontului) este permisa. Însa schimbarea culorii folosite pentru continut si marimea disproportionata a literelor din titluri si intertitluri vor determina dificultati de întelegere (rapida) prin discontinuitati perceptive. 17 august 2004 - Severin
Designul vizual al SE 30/34 4. Sugestii de design vizual • Vizitatorul poate fi ajutat sa se orienteze/ reorienteze prin introducerea unor organizatori vizuali: o o titluri si intertitluri din pagina simple si clare ce permit o orientare rapida în continut; titluri de pagina semnificative ce ajuta la recunoasterea unitatii de continut si mai ales la construirea unei harti cognitive sau a unei scheme mnezice; simboluri indiciale (indicatori) în culori adecvate; grafice, ilustraţii, tabele în locul unor conţinuturi descriptive. 17 august 2004 - Severin
Designul vizual al SE 31/34 4. Sugestii de design vizual • Designerul trebuie sa porneasca de la premisa ca vizitatorul nu îsi mai aminteste pasii de navigare ce l-au adus în fata unui anumit material/ continut: o o se dovedeste utila inserarea în antet a unui "fir al Ariadnei" (location bar) care indica pozitia actuala în succesiunea sau în structura ierarhica a sitului web; pastrarea culorilor standard pentru legaturile active (albastru pentru linkuri nevizitate si rosu închis pentru linkuri vizitate) usureaza orientarea, recunoasterea si structurarea mentala a continutului informational ce se parcurge. 17 august 2004 - Severin
Designul vizual al SE 32/34 4. Sugestii de design vizual • Folosirea unei terminologii standard (cel puţin pentru textele de asistenţă în navigare) elimina timpul suplimentar acordat de utilizator pentru manipularea aplicatiei. 17 august 2004 - Severin
Designul vizual al SE 33/34 4. Sugestii de design vizual • Este recomandată evitarea “erorilor” de design: peste 2 corpuri de litera pe pagina, peste 3 culori, variaţia de stil şi poziţionare a elementelor în cadrul aceluiaşi ecran sau întregului material, introducerea de continut ilizibil (aglomeratie de elemente, ilustratii de slaba calitate), text putin lizibil (contrast slab, corp de litera prea mic, mai mult de 1 -2 cuvinte bold/ italic/ underline per paragraf) etc. 17 august 2004 - Severin
Designul vizual al SE 34/34 5. Exerciţii 1. Analizează softul educational cu care lucrezi, sub aspectele evidentiate în acest curs. 2. Observa culorile dominante folosite de designerii siturilor pe care le vizitezi. Încearca sa determini daca mesajul textului unei pagini corespunde cu starea transmisa subliminal, prin culoare. 3. Încearca sa constientizezi propriul comportament în navigarea pe Web. Atunci când abandonezi o pagina web, încearca sa determini motivul: informatia nestructurata si dificil de parcurs, designul inadecvat, dezamagirea la contactul cu informatia. 17 august 2004 - Severin
Designul vizual al SE - end of show, thanks - Contact Olimpius Istrate olimpius@1 educat. ro 17 august 2004 - Severin
- Slides: 36