Lecţia 4: Principii de organizare vizuala

Chiar daca materialele proiectate pentru Internet includ imagini, sunet sau chiar scurte filme,
textul va continua sa joace rolul major, dupa cum vom vedea si în lectia 6 - "Design pentru Web".

DE RETINUT:

Aplicarea în design a câtorva principii de organizare a textului va conduce la orientarea mai

usoara în pagina, la structurarea mentala usoara a continutului. Se vor crea astfel conditii pentru
a spori capacitatea vizitatorului de a manipula si retine informatia transmisa.

Majoritatea principiilor de structurare a continutului paginilor Web se bazeaza pe regulile

gestaltiste de organizare perceptiva. Foarte pe scurt, aceste principii de organizare vizuala, de
care trebuie sa se tina cont în proiectare, sunt urmatoarele:

Claritate si eleganta

O atentie corespunzatoare acordata esteticii continutului, prezentarea sa într-o forma accesibila

cititorului - sunt obiectivele majore care confera textului atributele unei componente eficiente a
proiectarii paginilor pentru Internet. Un aspect elegant si un aranjament ordonat si logic arata
consideratie pentru vizitatorii sitului.

Predictabilitate si regularitate

O data stabilita, structura de prezentare a materialului trebuie sa ramâna constanta de la o

pagina din site 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.

Standardizare si consistenta în folosirea unui stil

Acest principiu se refera la producerea unui aranjament care sa permita focalizarea rapida si fara
ezitari pe elementele importante. Acesta va fi pastrat identic pentru toate secventele unei
prezentari.

Orientare facila în continut

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). Prin încarcarea rapida a informatiei
relevante, utilizatorul va putea decide daca doreste sa citeasca, sa revada sau sa abandoneze
pagina curenta.
Î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":

EXEMPLU:

Pe situl 1educat.ro, pagina în care sunt prezentati furnizorii de solutii de elearning are în antet tot
sirul de pagini, începând cu indexul, care ajuta vizitatorul sa se orienteze în site:
1educat.ro > resurse > eLearning > furnizori de solutii

Unitate si simplitate

Autorii de continuturi si designerii materialelor pentru web 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 navigare se scurteaza
semnificativ în cazul textelor 'prelucrate'.

Pozitionarea în ordinea importantei

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).

Gruparea elementelor dupa semnificatie

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 faciliteaza distingerea lor.

Includerea listelor si tabelelor pentru structurarea continutului

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

Spatiere

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.
Echilibru si 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 vizitatorilor.

EXERCITII:

1. Î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.
Multe situri anunta un tip de informatie, pentru a atrage vizitatorii, si abia dupa ce ai deschis zece
pagini din site, îti dai seama ca nu este nici pe departe ceea ce cauti. Îti poti închipui ce efecte au
aceste tehnici, pe termen mediu si lung. Probabil ai deja o lista de situri pe care stii ca nu are
sens sa le vizitezi...

2. În cadrul Seminarului Online, da exemple de situri bine realizate, care tin cont de principiile de
organizare vizuala pe care le-ai învatat în aceasta lectie.

3. Justifica propozitia: "siturile bune sunt siturile vizitate"!

4. Observa un site. In Internet Explorer, alegeti un site (propun www.egale.ro). Faceti click pe
suprafata alba din stanga sau dreapta. Apoi tineti apasat si faceti drag cu mouse-ul, incet, inainte
si inapoi, stanga si dreapta, pentru a observa care sunt imagini, pana unde se intind si cum se
imbina pentru a crea aspectul general. Comunica observatiile in Seminarul Online.

În Lectia 6 - Design pentru web, dupa lectia referitoare la semnificatiile culorilor, vom continua
prezentarea începuta aici.