Kā cilvēki aplūko weblapu? Kā izvietot informāciju!

Kā pārvietojas cilvēku acu skatiens interneta vidē

Vēlaties izveidot veiksmīgu pārdošanas lapu? Vai viekārši sagādāt apmeklētājiem sprotamu un ērti lietojamu dizainu?

Lai gan ir daudzi pētījumi, kas skaidro kā, lielākā daļa, cilvēku lieto un uztver weblapu, vizuālo informāciju, tomēr mājas lapu īpašnieki topošie un esošie to neizprot, un palaiž garām daudzas iespējas, iegūt jaunu klientus.

Vispazīstamākais pētījums ir Google mājas lapa.

Lūk ar viena karsto punktu karte:

kasrto punktu karte - ekrānšāviņš

Šeit var uzskatāmi redzēt uz kurieni visvairāk vērsti skatieni. Tādu informāciju iegūst no peles kursora atrašānās vietas. Kā pētījumos pierādījies, tad pastāv aptuveni 80% korelācija starp peles kursoru un acu skatīšanās virzienu.

Kā var novērot, tad jo zemāk, jo mazāk cilvēku acu ir ieraudzījušas informāciju. Nemaz nerunājot par to, ka tikusi pāršķirta lapa. 92%  interneta lietotāju nemaz neapmeklē Google 2. un 3. lapu.

Tieši tādēļ SEO speciālisti, kā es, tiek algoti, lai kāpinātu apmeklētību weblapās.

Noderīgi fakti par to kā cilvēki aplūko web lapas

1. Teksts ir svarīgāks par attēliem

Lai cik dīvaini tas neliktos cilvēki tomēr parasti gatavojas lasīt tekstu, tādēļ vairāk koncentrējas uz to, bieži vien pat nepamanot attēlu. Lai nu kā attēli informāciju atsvaidzina un rada lielāku interesi, labāk spēj izskaidrot, tādēļ nevajag aizmirst arī par tiem. Vai arī var izvietot tekstu uz bildēm. Attēli arī pievērš uzmanību.

Patiesībā, jau kopš interneta pirmsākumiem pastāv tāda lieta kā banneru neredzēšana, kas ir liela problēma, mūsdienās tas ir vēl izteiktāk.
Vienīgais, kad attēli iedarbojas vislabāk ir bilžu apmaiņas vietnēs, reddit un varētu būt arī youtube, ja vien izkārtojums būtu savādāks.

2. Cilvēki vispirms apskata augšējo kreiso stūri

Lielākoties, cilvēki sāk skatīties no augšējā kreisā stūra, izpētot informāciju, no kreisās uz labo pusi un tad virzās uz leju. Tas mimicē F burta formu, kas ir pavisam atšķirīgs veids kā tiek lasītas grāmatas (vairāk info).

f formas cilvēku acu kustība3. Bildēm jāatrodas kreisajā pusē

acu-kustibas-virziensKā attēlā redzams, tad nav visai ērti skatīties uz ekrānu, aplūkot, bildi un tad aizbraukt uz tekstu un lasīt. Loģiskāk ir attēlam atrasties pa kreisi – kā sava veida skaidrojošam ievadam. Vai arī augšpusē. Tas ir saprotamāk, lai arī ne vienmēr iespējams to tā realizēt. info

4. Neparasti fonti tiek ignorēti

Kad tiek izmantoti neordināri fonti – vidējam lapas apmeklētājam tie nepavisam neinteresē. Tradicionāli to vieta ir reklāmās un logo noformējumā.

5. Lapas apakša tiek apskatīta virspusēji

Lai gan, lielākā daļa cilvēku lapas apakšu apskata vai neapskata vispār, tomēr aktīvākie interneta lietotāji pieraduši  lapas apakšā meklēt dizainera/uzņēmuma informāciju vai kontaktinformāciju (tas ir interneta standarts).

6. Cilvēki dod priekšroku īsiem tekstiem

Cilvēki visticamāk izlasīs īsus un viegli saprotamus tekstus, kā garus un pa punktiem neorganizētus. Nekad nevajag aizmirst, ka lai arī Tev pašam var būt laba izglītība un augsts intelekts – lielai daļai tautas tāds var nebūt, vai arī, vienkārši, cilvēkiem nav laika un vēlmes iedziļināties garos gabalos.

7. Brīvais laukums strādā!

Necenties piepildīt mājas lapu ar visādiem baneriem un nevajadzīgiem fiņķikiem, tikai tādēļ, ka tā izskatās patukša. Brīvais laukums strādā kā palīgs apmeklētājam koncentrējoties uz to, kas ir primārais, jo īpaši tas ir būtiski pārdošanas lapās. Minimālisms rullē!

8. Reklāmas iekš satura strādā daudz veiksmīgāk par tām, kas novietotas atstatus

Praksē pierādījies, ka uz reklāmām, kas ievietotas starp saturu cilvēki var uzklikšķināt līdz pat 90% biežāk kā uz tām, kas atrodas galvgalī vai sānos. Ir pat sarakstīta grāmata par to.

9. Lielākā daļa lasītāju ignorē garus tekstus

Es ar to mēdzu darīt, gadījumos, ja informācija man nav tik ļoti noderīga vai vēlos tikai gūt priekšstatu par tematu. Un tādēļ viss tas teksts, kas stundām tiek radīts priekš gala lietotāja bieži vien ir nevērtīgs. Tādēļ, lai tas kļūtu interesantāks jāiesaista attēli, virsraksti un jāsadala saturs uz vairākām lapām, kas palielina ziņkāri, klikšķu skaitu un uzturēšanās laiku.

Toties GoogleRobotam tas viss interesē un tā mājas lapas tiek atrastas.

Noderīgi rīki ideālu krāsu salikumu radīšanai

Darbošanās ar krāsām web dizainerim un citiem radošajiem var aizņemt visai daudz laika, jo iesākumā ir jāizvēlas krāsu palete konkrētajam projektam balstoties uz daudz dažādiem aspektiem – krāsu nozīmes, simboliem utt.. Un tad vēl ir krāsu hex kodi kuri jāatceras un jākonvertē uz RGBa. Lai paātrinātu šo procesu un padarītu dizainera dzīvi daudz vieglāku ir radīti daudz lieliski rīki krāsu saderību salikumu radīšanai. Šie rīki palīdz gan izvēlēties, gan konvertēt izvēlētās krāsas web dizaina izstrādei un ne tikai.

Krāsu paletes rīki

Ja jāuzsāk projekta izstrāde no nekā, bez esošām uzņēmuma krāsām un bez iedvesmas avota, var būt visai pagrūti salikt kopā krāsu paleti, kas ir veiksmīga. Tādēļ zemāk apkopoju dažus rīkus, kas ļauj salikt skaistas krāsu kombinācijas, kuras arī labi izskatās.

ColourLovers krāsu paletes rīki

Krāsu mīļotāji

ColourLovers  jeb krāsu mīļotāji ir sociālais portāls, kurā atrodamas miljoniem lietotāju uzģenerētas krāsu paletes. Šo kolekciju var caurlūkot, novērtēt un izvēlēties krāsu savienojumus daudzos veidos, kas Tevi uzrunā vai atrast citas krāsas, kas noder vajadzīgā noskaņojuma radīšanai. Izvēlnē Tools ir pieejami arī citi rīki krāsu paletes radīšanai.

Kuler krāsu paletes

adobe-kuler

Adobe Kuler ir viens no retajiem uzņēmuma bezmaksas produktiem, kas ļauj meklēt, lejuplādēt un novērtēt krāsu salikumus kā arī iespējams radīt paletes pašu spēkiem no 0 vai attēla.

Real Colors krāsu paletes ģenerātors

krāsu paletes ģenerātors applikācija

Viens no visērtākajiem rīkiem šeit, viennozīmigi, ir Real colors android mobīlā applikācija, ar kuru var nobildēt bildi un uzreiz no tās izdabūt krāsu paleti un pēcāk eksportēt šo paleti uz Photoshop. Applikācija dod informāciju par dažādiem krāsu kodiem (HEX, RGB, HSB). Ieteicams nēsāt kabatā visiem web, grafiskajiem un interjera dizaineriem.

Pictalulous

krāsu savācējs

Lūkojies pēc konkrētas noskaņas un ir iepaticies kāda attēla stils un radītā atmosfēra? Pictaculous ir vienkārš rīks, kas ļauj izvēlēties krāsas no augšuplādētā attēla.

Design Seeds krāsu paletes

design seeds blogs

Ja Tev gluži vienkārši patīk skaisti krāsu salikumi, tad ir arī blogs, kas katru dienu publicē skaistus krāsu savienojumus un ļauj meklēt lapā pēc krāsām, gadalaikiem un noskaņām.

Krāsu izvēles rīki

Photoshopam ir savs iebūvētais krāsu izvēles rīks (color picking tool) ar kuru esmu pārliecināts,ka visi web dizaineri ir sastapušies. Bet tikai iedomājies cik daudz nākas pārslēgties no vienas programmas uz otru,lai nokopētu krāsas hex kodu vai atcerētos to. Vajadzetu būt taču kaut kam vienkāršākam, vieglākam un patiesībā ir gan.

color.hailpixel.com krāsu izvēles rīks

color-hailpixel-com

Vienkāršs un vienlaicīgi ļoti noderīgs mazs rīks color.hailpixel.com , kas ļauj braukāt pa ekrānu un ar vienu klikšķi nokopēt hex kodu.

CSS Krāsu nosaukumi

css krasu nosaukumi

Ja Tev tomēr nepatīk darboties ar krāsu hex kodiem, kas sastāv no cipariem un burtiem un atgādina grūti uzlaužamas paroles, tad ir arī 147 CSS vārdiskie krāsu apzīmējumi, kursu varētu būt, ka ir vienkāršak atminēties un ierakstīt CSS failā. Tu vari aplūkot visu sarakstu vienlaicīgi vai katru krāsu atsevišķi jauktā secībā ar vienu peles klikšķi.

Krāsu teorijas rīki

Atceries kā mācījies visu par krāsu apli krāsu mācībā- pretkrāsas, siltums, vēsums, košs, neitrāls? To visu var izmantot arī ar šiem rīkiem un radīt akadēmiski pareizus krāsu salikumus, kā arī vienlaicīgi atkārtot krāsu teoriju.

Sphere krāsu teorijas rīks

krasu aplis

Krāsu teorijas vizualizācijas rīks Sphere ar visai vienkāršas saskarsmes vidi ļauj  iegūt krāsas un nokrāsas no krāsu apļa.

Color Scheme Designer

colorschemedesigner-com

Veido pats savus akadēmiskos krāsu salikumus ar Color Scheme Designer. Izvēlies vienu krāsu un aplūko piedāvātās krāsu paletes, kā arī ir iespējams aplūkot kā tas izskatās mājaslapā.

Nobeigumā

Tagad Tev nevajadzētu būt problēmām radīt lieliskas krāsu paletes priekš jebkā ko vēlies izveidot. Vai tas būtu intejers vai uzņēmuma stils ar logo un mājas lapu. Bet iespējams Tev pašam ir kādi citi noderīgi rīki un paņēmieni krāsu palešu veidošanai?

Kādēļ “adaptīvs” Web Dizains ir svarīgs tavai mājas lapai?

Viedtelefonu un planšetdatori ir mainījuši veidu kā mēs šodien skatāmies uz mājas lapu dizainu un lietojamību. Iepriekš web dizainerim bija tikai viens svarīgs uzdevums – uzturēt vienādu izskatu un lietošanas ērtību uz galda un piezīmjdatoriem. Lai nu kā pārlūkot un lietot mājas lapas uz viedtelefoniem un planšetdatoriem nav tas pats, kas uz datora. Klišķi ir aizstāti ar pieskārieniem, krietni atsķirīgs ekrāna izmērs, izšķirtspēja, flash atbalsts un daudzkas cits ir kļuvis ļoti būtisks radot adaptīvu web dizainu. Bet kādēļ gan adaptīvs web dizains ir tik svarīgs Tavai mājas lapai? Pirms mēs apjaušam to vispirms jāsaprot, kas tad ir adaptīvs web dizains.

Kas ir adaptīvais web dizains?

No kurienes tad uzradies termins adaptīvs” web dizains. Tas ir aizgūts no angļu valodas “responsive”, jeb tāds, kas pielāgojas vai adaptējas uz konkrētās ierīces ekrāna izmēram. Citiem vārdiem sakot, universāls dizains visām ierīcēm uzreiz – “visi zaķi ar vienu šāvienu.” Adaptīvs web dizains ir īpaša pieeja mājas lapas izkārtojumam un kodēšanai, kas nodrošina pēc iespējas vienkāršāku navigāciju un lasāmību ar pēc iespējas mazāku nepieciešamību skrullēt un zoomēt lapu uz plaša ierīču klāsta sākot no galda datora līdz pat viedtelefonam. Dizainerim veidojot atsaucīgu dizainu ir jānodrošina, lai lapas navigācijas josla, teksts, bildes audio/video atskaņotāji un citi elementi pielāgojas atkarībā no ekrāna lieluma, tajā pašā laikā ļaujot tam būt viegli saredzamam un lietojamam. Tas nozīmē, ka vairāk nav nepieciešamības tērēt papildu naudu radot un uzturot 2 dažādas lapas mobīlajām ierīcēm un datoriem. Tagad, kad ir radusies apjausma par to, kas ir “atsaucīgs” web dizains, jāsaprot arī kādēļ tas ir svarīgs mājas lapās.

AIO interneta veikals

Kādēļ adaptīvais web dizains ir nākotne mājas lapās?

Laiks un Nauda

Priekšstats, ka veidot adaptīvu web dizainu ir dārgi ir tikai priekšstats. Patiesībā, lai arī veidojot adaptīvu web dizainu ir dargāk kā ierastu mājas lapas dizainu, tomēr tas ir daudz lētāk kā veidot divas atsķirīgas lapas dažādām ierīcēm. Tas arī atvieglina lapas atjaunošanu, jo tas viss jādara tikai vienu reizi. Tādēļ domājot ilgtermiņā tas ir gudrākais risinājums.

Mobīlo ierīču invāzija

Interneta lietotāju skaits, izmantojot mobīlās ierīces pieaug katru dienu, citiem pat atsakoties no mājas datora pilnībā. Tākā arvien vairāk un vairāk pierod sērfot internetā caur viedtelefoniem un planšetdatoriem, lapas īpašniekam būtu muļķīgi ignorēt adaptīvo web dizainu, jo drīz vien viena lapa, kas darbojas uz visām ierīcēm būs norma.

Lietošanas ērtums

Kāmēr saturs ir pats svarīgākais un rada priekšnosacījumus atrast mājas lapu internetā, savukārt, lietošanas ērtums ir tas, kas ļauj apmeklētājiem iepazīties ar mājas lapas saturu, izmantojot jebkādu ierīci, jebkurā laikā un vietā. Un tādēļ adaptīvs web dizains piedāvā visērtāko lietošanu, neskatoties uz to kāda ierīce vai operētājsistēma tiek izmantota lapas pārlūkošanai. Tādejādi, ir samērā prātīgi izmantot adaptīvo web dizainu savas nākamās mājas lapas izstrādē, jo nav nepieciešams nodalīt saturu, katrai ierīcei atsevišķi. Lai pārbaudītu kā šī vai Tava web lapa izskatās uz dažādām ierīcēm var doties uz responsive.is mājaslapu.

Minimālisms mājas lapās

Minimālisma vēsture meklējama pagājušā gadsimta 60 gados, kad pirmoreizi tas izpaudās caur modernistu mākslu. Tas bija savā ziņā pēcreakcija uz abstrakcijas un ekspresionisma kultu pirms tam.

Lūk viens no piemēriem minimalismā:

pits-mondrians-minimalisms-dizaina

Minimālisms ir nogājis garu ceļu un radījis vienu no skaistākajām mākslas izpausmēm, kādas jebkad tapušas. Tajā laikā mākslinieki uzskatīja, ka noņemot vismazāk nepieciešamās detaļas no to mākslas darbiem, tas spēja daudz labāk attainot unikalitāti un būtību. Šī kustība strauji izpaltījās pārņemot daudzas citas radošās nozares kā arhitektūru, mūziku, rakstnicību udc.

Mūsdienās minimālisms ir viens no izplatītākajiem dizaina principiem un tiek izmantots visdažādākajos veidos sākot no plakātiem , modes, drukātās reklāmas un beidzot ar vizītkartēm un brošurām.

Minimālisms tiek bieži lietots arī mājas lapu dizainā pateicoties uzņēmumam Apple.

Apple ir palīdzējis popularizēt minimālismu jau sākot no 20.gadsimta caur savu veidu kā uzņēmuma mājas lapa un ražojumi ir dizainēti, izmantojot tikai pašus nepieciešamākos elementus, sauklis māzāk nozīmē vairāk nekad vēl nav bijis tik populārs.

apple.com

Ko var saukt par minimālismu?

Katram ir atšķirīgs uzskats cik minimālistiskai mājas lapai vajadzētu būt. Daži uzskata, ka dizains, kas izmanto kādu citu krāsu kā baltā vairs nav minimālisms, savukārt, citi uzskata, ka web dizainam ir jāsatur tikai pāris vizuāli elementi. Lai nu kam jūs vairāk pieslienaties tomēr minimālismam mājas lapas dizainā jāievēro vairāki būtiski principi, lai lapa būtu veiksmīga. Web lapas izstrādē jāšķiras tikai no nebūtiskākajām detaļām, līdz vairs nekas nevar tikt noņemts, neietekmējot lapas uztveramību un lasāmību. Tas ir tādēļ, lai web lapas apmeklētāji varētu pēc iespējas vieglāk un atrāk uztvert tās saturu, kas būtībā ir galvenais apmeklētāju mērķis.

Veidojot lapas vizuālo tēlu minimālismā ir jāvelta diezgan liela piedomāšana un plānošana, lai dizains būtu funkcionāls un, tajā pašā laikā, tikai pašas nepieciešamākās detaļas būtu redzamas.

Kādēļ vajag izmantot minimālismu mājas lapas dizainā?

Izmantojot minimālisma konceptu web lapas dizainā iespējams ir tālredzīgi, jo minimālisms ir moderns un tas nenoveco, līdz ar to, mājas lapas dizains nebūs jāpārveido pēc pāris gadiem. Bet, galvenokārt, šāda veida pieeja ļauj labāk sasniegt lapas mērķi bez uzmanību traucejošiem elementiem. Priekšrocības minimālismam mājas lapas dizainā:

  1. Vieglāka satura pārskatāmība.
  2. Mazāk nepieciešama programmēšana.
  3. Ātrāka lapas ielāde un navigācija.

Šķiries no nevajadzīgajiem elementiem

Ir būtiski apjaust mājas lapas galveno mēŗķi pirms noņemt kādu no elementiem. Paturot šo prātā būs ir vienkāršāk izcelt lapas vēstījumu un funkcijas. Lai vieglāk izšķirtos ko noņemt  vajag pieturēties pie lapas pamatfunkcijām.

Brīvā laukuma loma minimālismā

Elementi, kas izvēlēti, lai attēlotu mājaslapā ir jābūt ar pietiekoši lielām atsstarpēm ,lai radītu mānīgu priekštatu, ka lapa ir lielāka nekā tas ir patiesībā, šis efekts ietekmē pārējos lapas elementus un ļauj lapu uztvert skaidrāk un saprotamāk.Brīvais jeb tukšais laukums ir arī viens no veidojošiem un definējušiem minimālisma pamatprincipiem.

Edija Majora Blogs

Edija Majora Blogs

Šis mājas lapas dizains izmanto režģi un lielas, vienādas atstarpes starp blokiem, tas piešķir dizainam lielisku balansu. Navigācija izvietota visātrāk pamanāmajā vietā un izcelta ar plašāku laukumu visapkārt – tas viss kopā veido veiksmīgu dizainu ar samērā maz detaļām.

Novietojuma izmantošana

Novietojums minimālismā organizē un sakārto lapas saturu. Tas palīdz izveidot līdzīgu daudzumu brīvā laukuma. Novietojumu var visefektīvāk panākt izmantojot režģi.

Piemērs zemāk parāda cik novietojuma princips ir nozīmīgs mājas lapu dizainā. Saturs ir sadalīts vienādās daļas un novietojums piešķir fantastisku balansu.

Krāsas izmantošana minimālisma web dizainā

Krāsa minimālismā palīdz pastiprināt atsevišķas detaļas, uzsverot to, kam jāpievērš lielāka uzmanība, atvieglinot lapas apmeklētājiem pārvietošanos. Ir svarīgi izmantot pēc iespējas mazāk krāsu toņu. Izmantojot tikai vienu papildu krāsu, bez pamata krāsām, tiks panākts ļoti spēcīgs gala efekts.

Galveno elementu uzsvēršana

Atstājot aiz svītras tik daudz detaļas cik vien iespējams ir būtiski uzsvērt galvenos elementus. To var panākt eksperimentējot ar fontiem un to stiliem, koncentrējoties uz to izmēru un krāsām. Kad tas ir salikts vienkopus šie elementi radīs unikālu lapas dizainu.

Šis paraugs demonstrē dažādu fontu izmantošanu. Lapas dizaineris ir koncentrējies piešķirot vairāk detaļas fontiem un satura izvietojumam, kas kopā strādā diezgan labi.

Atkārto!

Atkārtošana minimālismā ir vēlieviena pazīme, kas nodrošina konsekvenci dizainā. Šis princips ļauj arī uzsvērt/pastiprināt formas, turklāt, šo pieeju var pielietot gandrīz ikvienā jūsu lapas vietā.

Piemērs lieliski demonstrē atkārtošanu, kas nekļūst garlaicīga, jo izmanto dažādus fontus, krāsas un satura veidus, bet saglabā, fantastiski, vieglu uztveramību.

Kopsavilkums

Ja acij ir mazāk ko redzēt, tas nozīmē, ka ir vieglāk koncentrēties uz galveno. Minimālisma pamatprincipu izmantošana mājas lapu dizainā ir lielisks veids, lai lapa kalpotu tai uzstādītajam mērķim.

Pievēršot lielāku uzmanību galveno elementu balasnam lapā un izmantojot principus augstāk  jūs varat uzlabot savu produktu, pakalpojumu pārdošanas rezultātus.