Principii de proiectare – O introducere în ierarhia vizuală

Pe măsură ce tehnologiile și interfețele utilizatorului se schimbă, nevoia de abilități de design în designul vizual continuă să crească. Cu exemple noi de interfață tipică de utilizator care apar în fiecare an, s-a schimbat înțelegerea noastră fundamentală a ierarhiei vizuale, percepției și compoziției?

Conceptul modern de percepție vizuală își are rădăcinile nu numai în știință, ci și în psihologie. În consecință, indiferent de interfețele utilizator în continuă schimbare, modul în care vedem și percepem informațiile vizuale va rămâne același. Având în vedere acest lucru, este posibil ca designul de interacțiune contemporan să se îmbunătățească pe bazele compoziției grafice și ale ierarhiei vizuale?

Regulile fundamentale ale percepției vizuale sunt esențiale pentru orice design vizual, deoarece indică modul în care informațiile cu un sens încorporat pot fi transmise cât mai repede posibil. Cu toate acestea, deoarece designul vizual este un verișor apropiat al designului grafic, aceste standarde au fost stabilite pentru media tipărită și încă nu au fost redefinite pentru digital.

Ceva ca o „școală digitală Bauhaus” care ar putea stabili noi principii de design încă nu s-a format. Pe măsură ce oamenii experimentează o interfață de utilizare într-un mod complet diferit de cel tipărit, regulile de ierarhie vizuală și compoziție nu sunt doar datate, ci pur și simplu se prăbușesc într-o interfață cu utilizatorul.

În cea mai mare parte, designerii încă tind să trateze ecranul ca pe un obiect static, bidimensional, iar provocarea pentru designerii interactivi este să inoveze dincolo de simpla aplicare a formatelor de imprimare la proiectele lor media digitale. Dar înainte ca noile modele să poată avansa, o înțelegere fundamentală a ierarhiei vizuale, percepției și compoziției trebuie revizuită.

Ierarhia vizuală: o nouă înțelegere a compoziției vizuale pentru interfețele interactive

Ce este ierarhia vizuală și de ce este importantă? Ierarhia vizuală este așezarea conținutului într-o compoziție pentru a comunica eficient informațiile și a transmite sens. Ierarhia vizuală direcționează spectatorii mai întâi către cele mai importante informații, apoi către conținutul secundar.

Stabilit prin utilizarea adecvată a mărimii, culorii, formei, distanței, proporției și orientării, semnificația, conceptul și starea de spirit a unei compoziții sunt transmise prin utilizarea creativă a elementelor grafice care determină ierarhia vizuală.

Ierarhia vizuală este critică pentru fiecare tip de design vizual, fie că este o pagină de destinație care trebuie să ghideze privirea vizitatorului sau navigarea într-o interfață de utilizare mobilă. Înțelegerea de către utilizator a fiecărui element se bazează pe celelalte elemente din compoziție și contextul lor. Elementele compoziționale sunt tratate în consecință pentru a forma relații vizuale și, astfel, pentru a stabili o ierarhie vizuală într-un design.

Culoare în ierarhia vizuală

Multe dintre regulile ierarhiei vizuale pot părea destul de simple și chiar banale, dar ele reprezintă o bază esențială pentru un design vizual bun. De exemplu, culoarea este elementul creativ cu cel mai mare impact în designul vizual.

Luați în considerare conotațiile imediate ale unei cruci roșii față de una monocromă. Aproape universal, crucea roșie înseamnă neutralitate și protecție. Acesta este potențialul de comunicare imediată cu utilizarea culorii. Culoarea este, de asemenea, adesea folosită pentru a identifica grupuri, ca atunci când o cruce roșie dintre trei monocromatice iese cumva în evidență ca fiind mai semnificativă.

Culorile strălucitoare și bogate ies în evidență mai mult decât cele atenuate și, prin urmare, au un impact vizual mai mare. Într-o interfață, culoarea ar putea fi folosită pentru a prezenta un sentiment de structură și pentru a indica interacțiunile disponibile. O singură culoare dintr-o interfață monocromatică poate distinge o selecție și chiar poate sugera ce se află dincolo de un buton peste care trece cu mouse-ul.

Culoarea este, de asemenea, sămânțată cu semnificație și emoție care poate transmite informații explicite subconștientului privitorului. În branding, s-au făcut o mare parte de cercetări psihologice asupra culorii, deoarece creează un răspuns visceral consumatorilor înainte ca aceștia să aibă vreo interacțiune semnificativă cu o marcă. De exemplu, albastrul este adesea perceput ca fiind de încredere, sigur și calmant, în timp ce roșul este stimulant și se știe că mărește ritmul cardiac al oamenilor. Cu toate acestea, culorile pot avea o semnificație diferită în funcție de cultură.

Un bun exemplu de utilizare semnificativă și structurală a culorii în design web este site-ul The Names for Change. Site-ul își comunică imediat structura prin utilizarea culorii; organizația este împrăștiată în mod implicit, dar poate fi rearanjată după subiect și/sau culoare.

Cu toate acestea, tonurile alese ajută la depășirea uneia dintre potențialele dificultăți pentru sensul site-ului. Strângerea de fonduri pentru articole zilnice, cum ar fi șosete sau tampoane, nu este suficient de interesantă pentru a se vinde, așa că tonul grafic radical al site-ului crește valoarea perceptivă a articolelor de zi cu zi, stabilind în același timp structura organizațională necesară.

Dimensiunea în ierarhia vizuală

Să ne imaginăm o ilustrare a unei păsări mari așezate lângă trei mai mici. Fără alte informații, acest grafic simplu comunică imediat relația dintre elementele sale: un părinte și copii, care comunică colectiv o familie.

În designul grafic tradițional, o strategie tipică este de a face elementele cele mai importante cele mai mari și apoi de a reduce dimensiunile elementelor ierarhic. Mărimea stabilește ierarhia vizuală deoarece cele mai mari elemente atrag atenția mai întâi și, prin urmare, par a fi cele mai importante.

Dimensiuni diferite de font sunt adesea folosite în corpurile de text pentru a indica diferențe semnificative, cum ar fi antete, secțiuni și ghilimele. Conținutul secundar, cum ar fi legendele imaginilor, sunt de obicei mai mici pentru a nu concura cu corpul principal de text.

Luați în considerare unele dintre cele mai utilizate interfețe vizuale, cum ar fi Instagram. Nimic de pe ecran nu concurează cu imaginile și videoclipurile – acestea ocupă mai mult de 60% din majoritatea ecranelor. Scopul UI este imediat.

Un exemplu de schimbare a structurii tipice a ierarhiei vizuale în web design este site-ul portofoliu pentru studioul de artă/design Ro/Lu. Site-ul lor neobișnuit poate să nu fie cel mai intuitiv, dar provoacă aranjarea vizuală a portofoliului tipic de creație online. Datorită randomizării intenționate a proiectelor lor variate, unul diferit apare ca dominant de fiecare dată când un vizitator vine pe site, ceea ce face ca fiecare vizită să fie unică și interesantă.

Munca nu este organizată ierarhic în portofoliile celor mai multe studiouri de design creativ deoarece fiecare proiect este unic și considerat la fel de important. Designul site-ului Ro/Lu creează o compoziție dinamică cu diferite niveluri de interes la fiecare vizită și încurajează spectatorii să investigheze portofoliul extins al studioului. În consecință, natura eclectică, interdisciplinară a studioului de design este reprezentată de afișarea randomizată a conținutului.

Alinierea în ierarhia vizuală

Alinierea în ierarhia vizuală comunică un sentiment de ordine prin conectarea elementelor în spațiu. Ca și în cazul capitolelor dintr-un roman neliniar, imaginați-vă un pătrat care iese din linie într-o compoziție grafică. Atunci când un singur element rupe o structură stabilită, el iese în evidență din compoziție și astfel capătă sens în raport cu restul.

O compoziție rigidă poate părea stagnantă și neinteresantă din punct de vedere vizual, cu excepția cazului în care un element iese în evidență din grila vizuală, adică dintr-un sentiment de ordine. Alinierea greșită sau „ruperea rețelei” este o oportunitate de a da unui element grafic mai multă greutate vizuală. Acest concept este fundamental pentru ierarhia vizuală în design.

Conform unui principiu din designul vizual tradițional, elementele care sunt plasate în centrul unui cadru par a fi mai semnificative. De exemplu, conținutul principal sau elementele de interfață pot fi plasate în centru, în timp ce navigarea, meniurile și alt conținut secundar sunt adesea ținute în lateral.

Dar designerilor de pionierat le place să conteste status quo-ul. Când designul interactiv aplică principiile fundamentale ale ierarhiei vizuale și apoi împinge granițele în compoziții vizuale inovatoare, se creează noi experiențe interesante. Folosind o aliniere diferită, se fac noi asocieri și semnificații între elemente.

De exemplu, proiectul DNA este un site care folosește o serie de ierarhii disjunse pentru a comunica construcția creativă a albumului muzicianului. Structura site-ului este complexă, la fel ca și construcția albumului.

În primul rând, vizitatorii sunt invitați să asculte muzica făcând clic pe melodiile albumului, care sunt în mod tradițional aliniate într-un format de album. Totuși, permițând vizitatorilor să realinieze elementele ADN ale site-ului, conceptul albumului este comunicat, nu doar ca o serie de piese, ci ca o construcție neliniară a elementelor fragmentate în timp.

Forme în ierarhia vizuală

Când vine vorba de forme, să luăm în considerare cât de imediat o formă simplă de inimă comunică utilizarea potențială pentru „like” în majoritatea interfețelor de utilizare a rețelelor sociale. Pentru a stabili importanța sau grupurile, luați în considerare o inimă din patru cercuri. Formele geometrice sunt ca culorile prin aceea că formele poartă anumite conotații care conferă elementelor personalitate sau semnificație.

În designul interactiv, formele geometrice sunt esențiale pentru o comunicare eficientă, deoarece transmit un sens mai rapid și mai universal decât textul. În loc de text, pictogramele (simbolurile), care sunt adesea forme geometrice simple, au devenit analogul pentru majoritatea sistemelor de navigație și a interfețelor de utilizare.

Obiectivul din spatele „aprecierii” unei imagini, descărcarea unui fișier, efectuarea unui apel telefonic sau verificarea unui mesaj este transmis simplu și direct cu pictograme (forme geometrice). Această formă de comunicare vizuală eficientă devine din ce în ce mai importantă pe o piață globală în care produsele digitale deservesc adesea un public vast internațional cu mai multe limbi.

Pentru a evidenția diferitele moduri de interacțiune dintre media tradițională tipărită și cea digitală, luați în considerare diferența dintre căutarea într-un ziar real pentru secțiunea Arte și utilizarea pictogramei de căutare în majoritatea aplicațiilor. Până de curând, majoritatea site-urilor web ale ziarelor își așezau paginile la fel ca și cum ar fi fost tipărite, iar experiența de a verifica conținutul a fost stângace și dezorientatoare.

Rupând layout-urile web tradiționale, site-ul Signes du Quotidien folosește forme de bază pătrate și cerc într-un mod subtil pentru a prezenta o ierarhie vizuală unică care ghidează vizitatorii prin conținut. Meniul se află în centrul paginii, iar atunci când vizitatorii dau clic pe el, apar patru puncte colorate reprezentând cele patru secțiuni ale site-ului. Vizitatorii trage apoi unul dintre puncte în pătrat pentru a merge la acea secțiune.

Mișcarea în ierarhia vizuală

Un element în mișcare va avea o greutate vizuală mai mare într-un grup de elemente stagnante, iar mișcarea în ierarhia vizuală este un principiu care este imposibil de utilizat în tipărire, dar poate fi inclus cu siguranță în setul de instrumente al designerului vizual.

Ce poate comunica mișcarea decât o traducere literală a ei însăși? Mișcarea este adesea folosită într-o interfață de utilizare ca un indiciu cu care un element poate fi interacționat. Utilizarea mișcării poate fi împinsă mai departe și folosită ca o modalitate de a comunica ceva unic? Dacă ierarhia vizuală nu se referă doar la eficiența comunicării, ci și la semnificația încorporată, cum ar putea fi folosită mișcarea ca instrument esențial de comunicare vizuală?

Pentru site-ul I Remember, interfața principală (care este animată) iese imediat în evidență deoarece invită la interacțiune. Deși mișcarea și interfața sunt instrumente funcționale de navigare, designerii vizuali au folosit potențiala pierdere a acestor elemente ca o modalitate de a comunica misiunea de bază a site-ului web: boala Alzheimer. La fel ca amintirile care se estompează ale pacienților pentru care organizația strânge fonduri, site-ul web dispare încet în nimic fără interacțiune activă.

Sunetul în ierarhia informației

Sunetul este un alt instrument imposibil de utilizat în presa scrisă, dar încă de dezvoltat în cadrul principiilor ierarhiei. Deoarece sunetul este în întregime non-vizual, nu există reguli la care să se facă referire. Dar sunetul poate fi și un instrument de design care comunică eficient conținutul, precum și starea de spirit sau sensul. Elementele de design care poartă anumite sunete pot fi grupate unul față de celălalt, iar cele care sunt cele mai îndrăznețe pot părea a fi cele mai importante sau pot semnifica separarea de grup.

Calitatea unui sunet atașat unui element ar trebui să identifice, să caracterizeze sau să ajute rapid la structurarea conținutului. Cum ar putea un sunet care contrastează cu elementul său vizual asociat să transmită un nou sens?

Sunetele în sine pot fi atât de complexe încât stabilesc o stare de spirit întreagă sau mesajul unui design înainte ca orice lucru vizual să fie perceput. Așa cum un fundal colorat stabilește o stare de spirit, un sunet poate sta în fundal sau poate oferi feedback într-o interfață de utilizare, cum ar fi răspunsul la atingerea unui buton de pe mobil. Principiul tehnicii este de bază, dar creativitatea cu care poate fi folosită este locul unde se poate întâmpla magia.

Datorită importanței sale în activitatea de creație a colectivului, site-ul creat pentru expoziția grupului de artiști germani ZERO la Guggenheim folosește sunetul ca fundal atmosferic, dar și ca formă de feedback atunci când navighează pe site. Tonurile de apel îndrăznețe stabilesc piesele care reprezintă începuturile unei teme, în timp ce proiectele terțiare fac clic pe fundal.

Conceptul de ierarhie vizuală

Ierarhia vizuală este un concept simplu, iar înțelegerea teoriei este de fapt mai ușoară decât capacitatea practică a unui designer de a executa o compoziție bine structurată. Cu toate acestea, a fi inventiv într-un mediu nou, menținând în același timp un design bun, este o provocare.

Noi medii apar tot timpul, iar situațiile provocatoare nu se vor atenua – dimpotrivă. Astăzi, sunt utilizate peste 200 de dimensiuni diferite de ecran. Și acestea sunt doar cele bidimensionale. În primul rând, a fost internetul, browserele desktop, apoi au apărut telefoanele mobile și tabletele, iar acum ne mutăm într-un nou teritoriu cu tehnologii precum TV interactiv, IoT, purtabile, virtuale și realitate augmentată.

Designul care depășește cu adevărat granițele media digitale este încă la început. Să sperăm că principiile ierarhiei vizuale și al designului bun vor ține pasul cu progresul rapid al tehnologiei, astfel încât experiența noastră cu media digitală să rămână plină de sens și plăcere.

Citiri suplimentare pe Blogul Toptal Design:

• Îmbunătățiți-vă UX cu o ierarhie vizuală clară
• Fundamente de proiectare – Un ghid pentru ierarhia vizuală (cu infografică)
• Principii de proiectare: Introducere în ierarhie
• Cele mai bune practici de proiectare a UI pentru o mai bună scanare
• Îmbunătățiți-vă UX cu aceste principii de design de interacțiune de succes