Brīvā laukuma izmantošana web bāzētā lietotāju interfeisa dizainā

  • 19.06.2015
  • Autors: Efumo

Brīvais laukums, baltā zona jeb baltstarpa (white space) ir tukšais laukums apkārt web lapas elementiem. Brīvā laukuma korekta izmantošana palīdz akcentēt lietotāja interfeisa elementus un reizē arī uzlabot lietojamību. Šajā rakstā koncentrēsimies uz vienu no efektīvākajiem dizaina instrumentiem dizainera bagāžā – absolūtu tukšumu.

^CF567A2F51BB1D97EEB7764CCEBAD13EE35B9BD1F4EB5B0A8A^pimgpsh_fullsize_distr

Daudziem tas varētu šķist kā ekrāna laukuma lieka izšķērdēšana, tomēr brīvais laukums ir neatņemama web dizaina un lietotāju pieredzes sastāvdaļa. Bieži vien tas tiek raksturots kā aktīvs elements, nevis vienkārši tukšums. Tam ir jāpilda funkcionāla loma elementu hierarhiskai sadalīšanai, lietotāja uzmanības orientēšanai un vieglākai informācijas uztveramībai.

Brīvā laukuma ietekme uz mājaslapu

Uzlabota pārskatāmība

Telpa starp lielākiem elementiem (makro white space) ietekmē, kā lietotājs caurskata lapu, – tas vada lietotāja skatienu un ļauj vieglāk pamanīt elementus, kurus vēlaties izcelt. 

Uzlabota lasāmība

Attālums starp mazākiem elementiem (mikro white space), piem., burtiem, rindstarpām, saraksta joslām, ikonām u. c. ietekmē, cik viegli un ātri iespējams izlasīt informāciju.

Šajā piemērā skaidri redzama atšķirība starp slikti izkārtotu saturu un saturu, kurā ir uzlabota lasāmība ar palielinātu rindstarpas lielumu, malu platumiem starp virsrakstiem. Šo darbību kopumu sauc par pasīvo brīvo laukumu (passive white space), tas veido gaisīgāku, līdzsvarotāku kopskatu. Informāciju ir vieglāk uztvert. Lai lasītāja uzmanību koncentrētu uz kādu svarīgu ziņu, viens teikums ir īpaši izcelts ar treknāku šriftu un atdalīts. Tiek izmantots aktīvais brīvais laukums (active white space), kas vedina lasītāju no viena elementa uz citu.

whitespace_01

Vērtības pievienošana

Bagātīgs brīvais laukums un gaisīgs dizains ievieš Jūsu lapai eleganci un izsmalcinātību. Piemēram, BEO play zīmola mājaslapā tas tiek izmantots kā rīks zīmola pozicionējumam luksusa audio iekārtu tirgū. 

Tomēr jāpiebilst, ka pārāk bagātīga brīvā laukuma izmantošana nenozīmē, ka saturs kļūs lasāmāks, tas var sagraut Geštalta (kopainas uztveres) principus un elementu savstarpējās attiecības. Tāpat brīvā laukuma izmantošanas iespējas atšķirsies mājaslapās atkarībā no to darbības veida un satura apjoma. Piemēram, piezemējuma lapas var saturēt vairāk brīvā laukuma, jo tām primāri ir jānodod viena centrālā ziņa un aicinājums rīkoties jeb “call to action” poga.

Ieteikumi, kā lietderīgi izmantot brīvo laukumu

Necentieties pateikt pārāk daudz vienā reizē!

Viens no iemesliem, kādēļ brīvais laukums tiek izskausts, ir vēlme nodot vienlaikus pārāk daudz vēstījumu. Mūsdienu informācijas pārbagātajā laikmetā noturēt uzmanību lietotājiem ir grūti, tāpēc ir vērtīgi “tērēt” lietotāju uzmanību prātīgi. Kā redzams piemērā, meklētājs Yahoo cenšas nodot lietotājam maksimāli daudz informācijas vienlaikus, turpretim Google koncentrējās uz primāro – meklētāja funkcionalitāti.

whitespace_02

Strukturējiet un grupējiet informāciju!

Piemērā redzams, kā, pamainot attālumu starp elementiem, rodas kontekstuāla saikne starp tiem, un tos ir vieglāk uztvert.

whitespace_04

^811E80B3D379E2D4107699682401AD03CE6D6B644E4584B291^pimgpsh_fullsize_distr

Avots: http://www.nngroup.com/articles/form-design-white-space/

Vienkāršojiet!

Ja nav iespējams noņemt informāciju, samaziniet to vai pārvietojiet. Līdzīgi labā prakse e-komercijas mājaslapās ir no lapas galvenes noņemt mazāk svarīgu informāciju, piemēram, sadaļu par uzņēmumu, kontaktus, sociālo tīklu kontus un novietot tos lapas apakšā, tādējādi atbrīvojot vietu augšpusē primāro funkciju pildīšanai – preču pārdošanai.

whitespace_05

Nav šaubu, ka brīvais laukums ir vērtīgs dizaina instruments, kas var padarīt mājaslapas vēl efektīvākas. Varētu pat šķist, ka tā izmantošana ar saturu un funkcionalitāti blīvās lapās varētu būt neiespējama, tomēr, izvērtējot kontekstu, ir iespējams atrast zelta vidusceļu starp ieturētu dizainu un mājaslapas biznesa mērķiem.

Ja vēlaties plašāk uzzināt par mājaslapas dizaina izveidi, sazinieties ar mums!

Komentāri (0)