Kako se tehnologije i korisnička sučelja mijenjaju, potreba za vještinama dizajna u vizualnom dizajnu i dalje raste. Sa svježim primjerima tipičnog korisničkog sučelja koji se pojavljuju svake godine, je li se promijenilo naše temeljno razumijevanje vizualne hijerarhije, percepcije i kompozicije?

Suvremeni koncept vizualne percepcije ukorijenjen je ne samo u znanosti već i u psihologiji. Slijedom toga, bez obzira na kontinuirano mijenjanje korisničkog sučelja, način na koji vidimo i opažamo vizualne informacije ostat će isti. S obzirom na to, je li moguće da se suvremeni dizajn interakcija poboljša na temeljima grafičke kompozicije i vizualne hijerarhije?

Temeljna pravila vizualne percepcije presudna su za bilo koji vizualni dizajn, jer upućuju kako se informacije s ugrađenim značenjem mogu prenijeti što je brže moguće. Međutim, budući da je vizualni dizajn bliski rođak grafičkog dizajna, ti su standardi uspostavljeni za tiskane medije i tek trebaju biti redefinirani za digitalne.

Nešto poput 'digitalne škole Bauhaus' koja bi potencijalno mogla uspostaviti nove principe dizajna još se nije stvorilo. Kako ljudi doživljavaju korisničko sučelje na posve drugačiji način od ispisa, pravila vizualne hijerarhije i kompozicije nisu samo datirana, već se jednostavno urušavaju u korisničkom sučelju.

Najvećim dijelom, dizajneri i dalje imaju tendenciju tretirati zaslon kao statičan, dvodimenzionalni objekt i izazov za interaktivni dizajneri je inovacija, osim jednostavne primjene formata ispisa na njihove projekte digitalnih medija. No, prije nego što novi dizajni mogu napredovati, potrebno je preispitati temeljno razumijevanje vizualne hijerarhije, percepcije i kompozicije.

Vizualna hijerarhija: novo razumijevanje vizualne kompozicije za interaktivna sučelja

Što je vizualna hijerarhija i zašto je važna? Vizualna hijerarhija predstavlja polaganje sadržaja u kompoziciji radi učinkovite komunikacije informacija i prenošenja značenja. Vizualna hijerarhija usmjerava gledatelje prvo na najvažnije informacije, a zatim na sekundarni sadržaj.

Uspostavljeno odgovarajućom uporabom veličina, boja, oblik, udaljenost, omjer i orijentacija, značenje, koncept i raspoloženje skladbe prenose se kreativnom uporabom grafičkih elemenata koji određuju vizualnu hijerarhiju.

Vizualna hijerarhija presudna je za svaku vrstu vizualnog dizajna, bilo da se radi o odredišnoj stranici koja treba voditi posjetiteljevo oko ili za navigaciju mobilnim korisničkim sučeljem. Korisničko razumijevanje svakog elementa temelji se na ostalim elementima u kompoziciji i njihovom kontekstu. Kompozicijski se elementi tretiraju na odgovarajući način kako bi se stvorili vizualni odnosi i time uspostavili vizualna hijerarhija u dizajnu .

Boja u vizualnoj hijerarhiji

Mnoga pravila vizualne hijerarhije mogu se činiti prilično jednostavnima, pa čak i banalnima, ali ključni su temelj za dobar vizualni dizajn. Na primjer, boja je najutjecajniji kreativni element u vizualnom dizajnu.

Razmotrite neposredne konotacije crvenog križa naspram jednobojnog. Gotovo univerzalno, crveni križ označava neutralnost i zaštitu. Takva je mogućnost neposredne komunikacije korištenjem boje. Boja se također često koristi za identificiranje skupina, kao kad se jedan crveni križ među tri jednobojne nekako istakne kao značajniji.

Svijetle, bogate boje ističu se više od prigušenih i stoga imaju veći vizualni učinak. U sučelju se boja može koristiti za predstavljanje osjećaja strukture i ukazivanje na dostupne interakcije. Jedna boja unutar jednobojnog sučelja može razlikovati odabir, pa čak i sugerirati što je dalje od gumba nad kojim korisnik lebdi.

Boja je također zasijana značenje i osjećaje koji mogu prenijeti eksplicitne informacije u podsvijest gledatelja. U brendiranju je provedeno mnogo psiholoških istraživanja na boji jer ona stvara visceralni odgovor kod potrošača prije nego što su imali bilo kakvu značajnu interakciju s markom. Primjerice, blues se često doživljava kao pouzdan, siguran i smirujući, dok crveni stimuliraju i poznato je da ljudima povećava broj otkucaja srca. Međutim, boje mogu imati različito značenje ovisno o kulturi.

Dobar primjer smislene, strukturne upotrebe boja u web dizajnu je Imena za promjene web mjesto. Stranica odmah komunicira svoju strukturu korištenjem boja; organizacija je prema zadanim postavkama raštrkana, ali se može preurediti prema temi i / ili boji.

Međutim, odabrani tonovi pomažu u prevladavanju jedne od potencijalnih poteškoća u značenju mjesta. Prikupljanje sredstava za dnevne predmete poput čarapa ili tampona nije dovoljno uzbudljivo za prodaju, pa radikalni grafički ton stranice podiže percepcijsku vrijednost svakodnevnih predmeta uspostavljajući potrebnu temeljnu organizacijsku strukturu.

Veličina u vizualnoj hijerarhiji

Zamislimo ilustraciju jedne velike ptice koja sjedi pored tri manje. Bez ikakvih dodatnih informacija, ova jednostavna grafika odmah komunicira odnos između svojih elemenata: roditelja i djece, koji zajednički komuniciraju obitelj.

U tradicionalnom grafičkom dizajnu tipična je strategija učiniti najvažnije elemente najvećim, a zatim hijerarhijski smanjiti elemente. Veličina uspostavlja vizualnu hijerarhiju jer najveći elementi prvo privlače pozornost, pa se stoga čine najvažnijima.

Različite veličine fontova također se često koriste u tijelima teksta kako bi ukazale na značajne razlike, poput zaglavlja, odjeljaka i citata. Sekundarni sadržaj, poput natpisa na slici, obično je manji kako se ne bi nadmetao s glavnim dijelom teksta.

Razmotrimo neka od najčešće korištenih vizualnih sučelja, kao što su Instagram . Ništa na zaslonu se ne natječe sa slikama i videozapisima - oni zauzimaju više od 60 posto većine zaslona. Svrha korisničkog sučelja je neposredna.

Primjer koji nadmašuje tipično struktura vizualne hijerarhije u web dizajnu je web mjesto portfelja za art / design studio Ro / Lu . Njihova neobična stranica možda nije najintuitivnija, ali dovodi u pitanje vizualni raspored tipičnog internetskog kreativnog portfelja. Zbog namjerne nasumične odabire njihovih različitih projekata, svaki drugi posjetitelj dolazi kao dominantan svaki put kada posjetitelj dođe na stranicu, što svaki posjet čini jedinstvenim i zanimljivijim.

Posao nije organiziran hijerarhijski u portfeljima većine kreativnih dizajnerskih studija, jer je svaki projekt jedinstven i smatra se jednako važnim. Dizajn stranice Ro / Lu stvara dinamičnu kompoziciju s različitim razinama interesa pri svakom posjetu i potiče gledatelje da istraže opsežni portfelj studija. Slijedom toga, eklektična, interdisciplinarna priroda dizajnerskog studija predstavljena je slučajnim prikazom sadržaja.

Poravnanje u vizualnoj hijerarhiji

Poravnanje u vizualnoj hijerarhiji komunicira osjećaj reda prostornim povezivanjem elemenata. Kao i kod poglavlja u nelinearnom romanu, zamislite kvadrat koji stoji izvan crte u grafičkoj kompoziciji. Kad jedan element razbije ustaljenu strukturu, on se izdvaja iz sastava i time dobiva značenje u odnosu na ostatak.

Čvrsti sastav može izgledati stagnirajući i vizualno nezanimljiv, osim ako se element ne izdvaja iz vizualne mreže, tj. Iz osjećaja reda. Neusklađenost, ili 'razbijanje mreže', prilika je koja grafičkom elementu daje veću vizualnu težinu. Ovaj je koncept temeljni za vizualnu hijerarhiju u dizajnu.

Prema principu u tradicionalnom vizualnom dizajnu, čini se da su elementi koji su smješteni u središte okvira značajniji. Na primjer, primarni sadržaj ili elementi sučelja mogu se staviti u središte, dok se navigacija, izbornici i drugi sekundarni sadržaj često drže po strani.

Ali pionirski dizajneri vole osporavati status quo. Kada se primjenjuje interaktivni dizajn temeljni principi vizualne hijerarhije a zatim pomiče granice u inovativne vizualne skladbe, stvaraju se nova zanimljiva iskustva. Korištenjem drugačijeg poravnanja stvaraju se nove asocijacije i značenja između elemenata.

Na primjer, DNA projekt je stranica koja koristi niz razdvojenih hijerarhija za komuniciranje kreativne konstrukcije glazbenikova albuma. Struktura stranice je složena, kao i konstrukcija albuma.

Prvo, posjetitelji su pozvani slušati glazbu klikom na pjesme albuma, koje su tradicionalno usklađene u formatu albuma. Međutim, dopuštajući posjetiteljima da poravnaju DNK elemente stranice, koncept albuma se prenosi, ne samo kao niz pjesama, već kao nelinearna konstrukcija fragmentiranih elemenata tijekom vremena.

Oblici u vizualnoj hijerarhiji

Kad je riječ o oblicima, razmotrimo kako jednostavni oblik srca odmah objavljuje svoju potencijalnu upotrebu za 'sviđa mi se' u većini korisničkih sučelja za društvene mreže. Da biste utvrdili važnost ili skupine, uzmite u obzir jedno srce među četiri kruga. Geometrijski oblici slični su bojama u kojima oblici nose određene konotacije koje elementima daju osobnost ili značenje.

U interaktivnom dizajnu geometrijski su oblici bitni za učinkovitu komunikaciju jer prenose značenje brže i univerzalnije od teksta. Umjesto teksta, ikone (simboli), koji su često jednostavni geometrijski oblici, postali su analogni za većinu navigacijskih sustava i korisničkog sučelja.

Cilj koji stoji iza ‘lajkanja’ slike, preuzimanja datoteke, telefoniranja ili provjere poruke prenosi se jednostavno i izravno s ikonama (geometrijski oblici). Ovaj oblik učinkovite vizualne komunikacije postaje sve važniji na globalnom tržištu gdje digitalni proizvodi često služe širokoj međunarodnoj publici s više jezika.

Da biste istakli različite načine interakcije između tradicionalnih tiskanih i digitalnih medija, razmotrite razliku između pretraživanja stvarnih novina za odjeljak Umjetnost i upotrebe ikone pretraživanja u većini aplikacija. Donedavno je većina novinskih web stranica postavljala svoje stranice na isti način kao da su u tisku, a iskustvo prebiranja kroz sadržaj bilo je nespretno i dezorijentirajuće.

Razbijanje tradicionalnih web izgleda, Znakovi dnevnog web stranica koristi osnovne oblike kvadrata i kruga na suptilan način kako bi predstavila jedinstvenu vizualnu hijerarhiju koja posjetitelje vodi kroz sadržaj. Izbornik je u središtu stranice, a kada ga posjetitelji kliknu, pojavit će se četiri točke u boji koje predstavljaju četiri odjeljka stranice. Posjetitelji zatim povuku jednu od točaka na kvadrat da bi prešli na taj odjeljak.

Prijedlog u vizualnoj hijerarhiji

Pokretni element nosit će veću vizualnu težinu u skupini stajaćih elemenata, a kretanje u vizualnoj hijerarhiji načelo je koje je nemoguće koristiti u ispisu, ali se definitivno može uključiti u vizualni dizajner Priručnik.

Što pokret može komunicirati osim doslovnog prijevoda samog sebe? Pokret se često koristi u korisničkom sučelju kao naznaka da element može komunicirati. Može li se upotreba pokreta dalje poticati i koristiti kao način komunikacije nečega jedinstvenog? Ako se vizualna hijerarhija ne odnosi samo na učinkovitost komunikacije, već i na ugrađeno značenje, kako se pokret može koristiti kao osnovni alat vizualne komunikacije?

Za Sjećam se web stranice , glavno sučelje (koje je animirano) odmah se ističe jer poziva na interakciju. Iako su pokret i sučelje funkcionalni navigacijski alati, vizualni dizajneri koristili potencijalni gubitak ovih elemenata kao način za priopćavanje osnovne misije web mjesta: Alzheimerove bolesti. Baš poput nestajanja sjećanja pacijenata za koje organizacija prikuplja sredstva, web mjesto polako nestaje u ništa bez aktivne interakcije.

Zvuk u hijerarhiji informacija

Zvuk je još jedan alat koji je nemoguće koristiti u tiskanim medijima, ali ga tek treba razviti u skladu s hijerarhijskim načelima. Budući da je zvuk u potpunosti vizualni, nema pravila na koja se treba pozivati. No zvuk također može biti alat za dizajn koji učinkovito komunicira sadržaj, kao i raspoloženje ili značenje. Elementi dizajna koji nose određene zvukove mogu se grupirati jedan prema drugome, a oni najsmjeliji mogu se činiti najvažnijima ili mogu značiti odvajanje od grupe.

Kvaliteta zvuka pričvršćenog na element trebala bi brzo identificirati, karakterizirati ili pomoći strukturiranju sadržaja. Kako zvuk koji je u kontrastu s pripadajućim vizualnim elementom može prenijeti novo značenje?

Sami zvukovi mogu biti toliko složeni da uspostavljaju cjelovito raspoloženje ili poruku dizajna prije nego što se išta vizualno opazi. Baš kao što šarene pozadine uspostavljaju raspoloženje, zvuk može sjediti u pozadini ili pružati povratne informacije u korisničkom sučelju, poput reagiranja na dodir gumba na mobitelu. Načelo je tehnike osnovno, ali magija se može dogoditi u kreativnosti kojom se može upotrijebiti.

Zbog svoje važnosti u kreativnom radu kolektiva, web stranica stvorena za izložbu njemačke umjetničke skupine NULA kod Guggenheima koristi zvuk kao atmosfersku pozadinu, a također i kao oblik povratne informacije prilikom navigacije web stranicom. Podebljana zvona uspostavljaju dijelove koji predstavljaju početke teme, dok tercijarni projekti klikću u pozadini.

Koncept vizualne hijerarhije

Vizualna hijerarhija izravni je koncept, a razumijevanje teorije zapravo je lakše od praktične sposobnosti dizajnera da izvede dobro strukturiranu kompoziciju. Ipak, izazovno je biti inventivan u novom mediju uz održavanje dobrog dizajna.

Stalno se pojavljuju novi mediji, a izazovne situacije neće jenjavati - upravo suprotno. Danas ih ima preko 200 različite veličine zaslona u uporabi. I to samo one dvodimenzionalne. Prvo su to bili internet, stolni preglednici, zatim mobiteli i tableti, a sada krećemo na novi teritorij s tehnologijama poput interaktivne televizije, IoT , nosivi , virtualna i proširena stvarnost .

Dizajn koji istinski pomiče granice digitalnih medija još je u povojima. Nadamo se da će principi vizualne hijerarhije i dobrog dizajna pratiti brzi napredak tehnologije tako da naše iskustvo digitalnih medija ostaje puno značenja i zadovoljstva.

• • •

Daljnje čitanje na blogu ApeeScape Design:

• Poboljšajte svoj UX pomoću jasne vizualne hijerarhije
• Temelji dizajna - Vodič za vizualnu hijerarhiju (s Infografikom)
• Načela dizajna: Uvod u hijerarhiju
• UI Dizajn najboljih praksi za bolju mogućnost skeniranja
• Poboljšajte svoj UX pomoću ovih uspješnih principa dizajna interakcije