Cum să faci o ședință foto într-un câmp de grâu. Sedinta foto in teren: ce idei pot fi implementate? Idei pentru o sedinta foto in natura: crearea unei imagini si crearea unei povesti

Dacă pantofii sunt componenta finală a oricărei ținute, atunci subsolul unui site de comerț electronic este elementul final al designului său de vânzare. Concentrându-se pe elementul de jos, subsolul, site-urile web moderne sunt gata să-și arate personalitatea în toate modurile posibile. Într-un mediu competitiv de comerț electronic, există suficient idei originale, creativitate și tendințe de design. Înainte de a diversifica subsolul unui site de comerț electronic, merită luat în considerare punctele importante. Ce să plasezi primul și care este cel mai bun mod de a o face? Rezumatul nostru de modele inspiratoare de subsol are câteva opțiuni interesante.

Citeste si: 13 tendințe de marketing în e-commerce 2019

Statistici interesante de la Chartbeat. Un studiu al comportamentului a 25 de milioane de utilizatori a arătat cât de adânc navighează pe pagini. Se pare că atenția utilizatorului este atrasă de spațiul de sub linia de pliere. Devenind mai practic informatii utile, vizitatorii zăbovesc cel mai mult în zona de 1200 px din partea de sus a paginii (cu un ecran vertical mediu de 700 px în browser) sau în spatele celui de-al doilea ecran.

Vizualizare timp (sec.) / Distanța de la partea de sus a paginii (pixeli)

Există un decalaj mare în ceea ce privește durata de vizualizare a primului și celui de-al doilea ecran. TOP-ul este de 4 secunde, durata atinge un maxim (16 secunde) la 1200 pixeli de sus și odată cu derularea în continuare, scade încet.

Ponderea vizitatorilor (%) / Distanța față de partea de sus a paginii (pixeli)

O parte semnificativă a vizitatorilor (mai mult de 25%) nici măcar nu așteaptă să se încarce conținutul și să înceapă derularea paginii. Acest lucru înseamnă că doar 75% vor vedea primul foarte sus. Zona cea mai vizualizată a paginii este de 550 px (chiar deasupra liniei de pliere).

Studiul înlătură mitul potrivit căruia utilizatorii nu derulează în partea de jos a paginii și nu urmăresc tot conținutul. Subsolul este, de asemenea, important pentru un site de comerț electronic modern și chiar are propriile sale avantaje.

Idei despre cum să proiectați un „subsol” (subsol), exemple de vânzare a modelelor

Aceste 10 sfaturi vă vor spune cum să proiectați frumos subsolul pentru un site web - conform regulilor de compunere în design web și rezolvarea sarcinilor prioritare. Aplicați cele mai potrivite tactici pentru a îmbunătăți gradul de utilizare, UX (experiența utilizatorului) și chiar pentru a crește vânzările.

1. Informații necesare

În mod tradițional, problemele organizatorice și legale necesare sunt acoperite în subsolul site-ului. Notificările sunt concepute cu text mai puțin vizibil, ceea ce eliberează alte zone ale paginilor pentru elemente mai semnificative. Iată un exemplu de listă de luat în considerare:

• Notificări privind drepturile de autor
• Declinări legale
• Informații de facturare
• Notificare privind cookie-urile

Site-ul web care vinde produsul trebuie să îndeplinească cerințele legale și să ofere informații despre procedură și perioadele de returnare. Locația sa în subsol este convenabilă atât pentru resursa de vânzare, cât și pentru vizitatori.

Exemplu de subsol: Yves Rocher

Magazin online marcă comercială Yves Rocher: subsol pe ecran complet cu un design frumos de straturi alternative. Informează despre companie, infrastructura site-ului de vânzare - de la urmărirea comenzilor până la politica de date cu caracter personal. Există, de asemenea, sfaturi despre utilizarea produsului, bonusuri, promoții

Exemplu de subsol: Lumity

Dealerii de suplimente nutritive sunt supuși unor cerințe legale sporite. responsabilitate. Există destul de multe lucruri pe care ar trebui/nu ar trebui să le spună pe site-ul lor de vânzări. Link-uri către informatii juridice evidențiate cu caractere aldine pentru o mai bună vizibilitate.

Un subsol cu ​​o imagine frumoasă de fundal se potrivește foarte organic în designul general al site-ului. Nu există o limită clară, mai degrabă conținutul în sine servește ca separator

Exemplu de subsol: Saddleback Leather Co

Un site web de vânzare cu un design retro frumos pentru antet și subsol. 100 de ani garanție împotriva defectelor de material și finisaj. Condițiile de retur sunt însoțite de povesti interesante... nu totul este atât de trist cu informațiile necesare de comerț electronic, se pare

2. Spațiu negativ – distanță vizuală suficientă

Când limitați numărul de link-uri de subsol, nu vă zgâriți cu spațiul negativ - acest lucru va avea un efect uimitor asupra percepției vizuale și va îmbunătăți lizibilitatea. Regula generală: Prin menținerea ierarhiei vizuale, elementele centrale sunt observate mai rapid (pot fi folosite în avantajul dumneavoastră!).

Exemplu de subsol: QUAY AUSTRALIA

Cu un stil minimalist și un meniu derulant fix, magazinul online își poate permite un subsol spațios

Exemplu de subsol: Incase

DESPRE cantitati mari spațiul micronegativ (între elementele mici) se poate spune astfel: atâta timp cât toate informațiile necesare sunt prezente, acestea sunt lizibile și percepute rapid - totul este în regulă

Exemplu de subsol: Stumptown Coffee Roasters

Subsolul spațios al unui site de cafea este o completare excelentă a unei compoziții de design curate, în care există mult spațiu macro-negativ („aer” între secțiuni/secțiuni)

3. Îndemn final la acțiune

Citeste si: Peste 30 de exemple și idei pentru proiectarea butoanelor de acțiune țintă

Designul elegant al subsolului spune multe despre resursa în sine. Este important de reținut: cumpărătorul rămâne aici puțin mai mult decât în ​​alte părți ale paginii. O oportunitate convenabilă pentru încă un apel final la acțiune. Adesea, acesta este un abonament/buletin informativ, dar puteți conecta și un apel CTA la înregistrarea contului.

Exemplu de subsol: Greetabl

Greetabl are o parte de jos a paginilor sale, care include un apel pentru abonare. Cu un minim de elemente, apelul devine vizibil și, în armonie cu fundalul turcoaz, se transformă într-un decor al site-ului

Exemplu de subsol: Ecwid

Design frumos cu îndemnuri în partea de jos a paginilor. Structura constructorului de site-uri web de vânzare este universală. A fost tradus în 35 de limbi pentru milioanele săi de clienți.

4. Cărucior plutitor – creșterea disponibilității funcționalității de vânzare

Accesarea coșului de cumpărături din partea de jos a site-ului este o modalitate excelentă de a îmbunătăți gradul de utilizare și calitățile de vânzare ale site-ului.

Exemplu de subsol: Lemonadela

Site-ul de vânzare al companiei de catering este plăcut la vedere și convenabil pentru cumpărător

5. Navigare subsol

Partea de jos a site-ului este ideală pentru informații care nu sunt vizualizate des: despre companie, termeni de utilizare și politica de confidențialitate. În acest caz, funcția subsolului este de a salva pe toată lumea. Simțindu-se pierdut în mediul eCommerce, cineva devine interesat de infrastructură magazin electronic, derulând instinctiv mai departe...

Spațiul negativ este esențial pentru lizibilitatea conținutului. În general, „subsolul” nu este în scop de navigare, spre deosebire de un meniu sau o hartă a site-ului. Doar în cazuri rare, site-urile de comerț electronic se plasează în subsol categorii separate bunuri (

Îmi amintesc că în momentul în care am început să trec de la aspectul tabelelor la aspectul div, una dintre dificultățile pe care le-am întâlnit a fost următoarea - cum să împingeți subsolul site-ului în partea de jos a ferestrei browserului, astfel încât pagina să apară alungită la înălțimea sa completă, indiferent de volumul de text, iar dacă înălțimea paginii este mai mare decât înălțimea ferestrei browserului (când apare un scroll), subsolul ar rămâne la locul său.

Dacă cu ajutorul tabelelor această problemă este rezolvată doar prin specificarea înălțimii pentru tabel și/sau celula imbricată în acesta, atunci când se folosește CSS în aspectul bloc, se folosește o abordare complet diferită.

În procesul de practică, m-am identificat pentru mine 5 moduri de a strânge subsolul în partea de jos a ferestrei browserului folosind CSS.

Codul HTML al tuturor metodelor prezentate are următoarea structură (singura diferență este codul CSS):

Codul CSS de mai jos include numai acele proprietăți care sunt minim necesare pentru implementarea metodei corespunzătoare. Pentru fiecare dintre ele puteți vedea un exemplu viu.

Prima cale

Subsolul este apăsat în jos, poziționându-l absolut și extinzând înălțimea blocurilor părinte (html , body și .wrapper) la 100%. În acest caz, conținutul block.content trebuie să specifice o marjă de jos care este egală sau mai mare decât înălțimea subsolului, altfel subsolul va acoperi o parte din conținut.

* ( margine: 0; padding: 0; ) html, body ( înălțime: 100%; ) .wrapper ( poziția: relativă; min-height: 100%; ) .content ( padding-bottom: 90px; ) .footer ( poziția : absolut; latime: 100%;

A doua cale

Subsolul este apăsat trăgând blocul de conținut și „părinții” acestuia la înălțimea completă a ferestrei browserului și ridicând subsolul printr-o marjă negativă (margin-sus) pentru a scăpa de defilarea verticală care apare. În acest caz, este necesar să se indice înălțimea subsolului și trebuie să fie egală cu cantitatea de indentare.

* ( margine: 0; umplutură: 0; ) html, corp, .wrapper ( înălțime: 100%; ) .conținut ( dimensiunea casetei: border-box; min-height: 100%; padding-bottom: 90px; ) . subsol (înălțime: 80px; margine-sus: -80px; )

Datorită proprietății box-sizing: border-box, împiedicăm cutia cu clasa .conținut să depășească 100% înălțime. Adică, în acest caz, înălțimea minimă: 100% + padding-bottom: 90px este egal cu 100% din înălțimea ferestrei browserului.

A treia cale

Este bine pentru că, spre deosebire de alte metode (cu excepția celei de-a 5-a), înălțimea subsolului nu contează.

* ( margine: 0; padding: 0; ) html, body ( înălțime: 100%; ) .wrapper ( afișare: tabel; înălțime: 100%; ) .conținut ( afișare: masă-rând; înălțime: 100%; )

Aici emulăm comportamentul unui tabel transformând blocul .wrapper într-un tabel și blocul .content într-un rând de tabel (afișare: tabel și, respectiv, afișare: proprietăți table-row). Datorită acestui fapt și faptului că blocul .content și toate containerele sale părinte sunt setate la 100% înălțime, conținutul este întins la înălțimea sa maximă, minus înălțimea subsolului, care este determinată automat - emularea tabelului împiedică extinderea subsolului. dincolo de înălțimea ferestrei browserului.

Ca urmare, subsolul este apăsat în partea de jos.

A patra metodă

Această metodă este diferită de oricare dintre cele anterioare, iar particularitatea ei este utilizarea funcției CSS calc() și a unității de măsură vh, care sunt acceptate doar de browserele moderne. Aici trebuie să știți înălțimea exactă a subsolului.

* ( marja: 0; umplutură: 0; ) .conținut ( înălțime minimă: calc(100vh - 80px); )

100vh este înălțimea ferestrei browserului, iar 80px este înălțimea subsolului. Și folosind funcția calc() scădem a doua valoare din prima, apăsând astfel subsolul în partea de jos.

Puteți afla ce browsere acceptă calc() și vh pe caniuse.com folosind următoarele link-uri: suport pentru funcția calc(), suport pentru unitatea vh.

A cincea metodă (cea mai relevantă)

Acest cel mai bun mod dintre toate cele prezentate, însă, funcționează doar în browserele moderne. Ca și în a treia metodă, înălțimea subsolului nu contează.

* ( margine: 0; umplutură: 0; ) html, corp ( înălțime: 100%; ) .wrapper ( afișare: flex; direcție flex: coloană; înălțime minimă: 100%; ) .conținut ( flex: 1 0 auto ; .footer ( flex: 0 0 auto; )

Puteți afla despre compatibilitatea browserului pentru proprietatea flex.

Subsolul este blocul de jos al paginii unui site web, ultimul, dar nu cel mai puțin important. Faptul că subsolul sau „subsolul” site-ului, așa cum se mai numește, este situat în partea de jos a paginii, nu înseamnă deloc că conține informații neimportante și puțini oameni „accesează” la el. Dar, în același timp, această parte a paginii nu ar trebui să fie supraîncărcată cu date inutile. Ce este cel mai bine să includeți în subsol și cum să îl faceți cât mai funcțional posibil?

Am parcurs recent site-urile a 50 de magazine online ucrainene și le-am evaluat subsolurile pe baza mai multor parametri, inclusiv numărul de link-uri, prezența link-urilor către conturile de rețele sociale sau abonamentele la newsletter. Site-urile au fost alese aleatoriu, dar am încercat să acoperim o varietate de domenii de vânzări online, de exemplu: electronice și aparate electrocasnice, moda, cosmetice si parfumuri, produse pentru copii, alimente, materiale de constructii, piete, cluburi de cumparaturi etc. Lista magazinelor online pe care am studiat-o includea atât lideri din industriile lor, cât și nou-veniți.

Link-uri utile

Numărul mediu de link-uri conținute în subsolurile pe care le-am analizat a fost de 21.

Am numărat cel mai mic număr de link-uri active pentru magazinul online PARFUMS.UA - 5 link-uri, fără a număra butonul „Sus”.

Am numărat cel mai mic număr de link-uri pe site-ul companiei PARFUMS.UA: paginile magazin în rețelele socialeși informații de contact.

Am numărat cel mai mare număr de link-uri, până la 86, de la un alt magazin online de cosmetice și parfumuri, MakeUp.com.ua. Aici, pe lângă linia de abonare la newsletter, există link-uri către categorii și subcategorii, contacte, informații de livrare, știri, articole și profiluri pe rețelele de socializare etc.

Majoritatea site-urilor pe care le-am parcurs au folosit subsolul ca un bloc de informații utile pentru vizitatorul care este interesat să afle mai multe despre magazin și despre cum funcționează acesta. Multe site-uri au inclus în subsol, de exemplu, link-uri către politica de confidențialitate, reguli de utilizare a site-ului etc.

88% dintre site-urile pe care le-am examinat au inclus un link către pagina „Despre noi” din subsol. Și încă 88% - un link către o pagină cu contacte sau contactele în sine. Doar 22% dintre site-uri au link-uri în subsol prin care utilizatorul ar putea, într-o măsură sau alta, să primească servicii de la companie. 56% din toate site-urile pe care le-am analizat au inclus linkuri către informații de expediere și plată și/sau politici de returnare în subsol.

Drepturi de autor. Protectia drepturilor

Pictograma este prezentă în subsolurile a 76% dintre magazinele online pe care le-am analizat.

Pe site-ul magazinului online de gadgeturi și accesorii „Citrus”, la fel ca pe multe alte site-uri, există un semn de protecție a drepturilor de autor.

Conform regulilor, pictograma este urmată de numele deținătorului dreptului de autor și de perioada de valabilitate a dreptului de autor. Deși conținutul unic care apare pe site este supus în mod implicit legii dreptului de autor și nu este necesar să fie instalat, majoritatea webmasterilor adaugă în continuare această pictogramă la subsolul site-ului.

Pe site-ul magazinului online materiale de constructii„StroyMAG” a folosit expresia „Toate drepturile rezervate” lângă semnul dreptului de autor.

În plus, împreună cu simbolul dreptului de autor, multe site-uri folosesc și expresia „Toate drepturile rezervate”, ceea ce înseamnă că au dovada de paternitate pe care o pot prezenta dacă se întâmplă ceva. În acest fel, proprietarii de site-uri încearcă să se asigure că pastorii de copii sunt avertizați că furtul este greșit.

Rețele sociale și alte activități de marketing

După cum arată practica, subsolul este, de asemenea, un loc în care un vizitator poate găsi link-uri către paginile unui magazin online de pe rețelele sociale sau o altă modalitate de a interacționa în continuare cu acesta.

În totalitate 92% din subsolurile studiate conțineau link-uri către conturi de social media. Acesta este cel mai popular element dintre subsolurile site-urilor pe care le-am analizat.

De exemplu, subsolul site-ului web al magazinului de flori online „Kviter”, la fel ca subsolul majorității site-urilor pe care le-am uitat, conține link-uri către conturile lor de pe rețelele sociale populare.

34% dintre magazinele online au inclus în subsolul lor o linie de abonare la buletine informative prin e-mail sau SMS. Unii promit bonusuri plăcute pentru abonare, cum ar fi un cupon pentru o anumită sumă.

De exemplu, în magazinul online de îmbrăcăminte Answear, un abonament este schimbat la 300 UAH. pentru cumpărare.

30% din subsolurile analizate au inclus și linkuri către o anumită formă de conținut de marketing. Cel mai adesea acestea erau link-uri către un blog, articole, recenzii video etc.

Locuri vacante

Joburile sunt un alt element de subsol destul de popular. 40% dintre site-urile pe care le-am analizat au inclus link-uri către aceste informații în partea de jos a paginilor lor. Aparent, aici utilizatorii pot căuta potențiale oportunități de angajare în cadrul companiei.

Observații neașteptate

Am găsit un astfel de element aparent potrivit pentru un subsol, cum ar fi o hartă a site-ului, în doar 30% dintre magazinele online.

Semnele de încredere, de exemplu, o pictogramă de garanție a achiziției în condiții de siguranță, au fost incluse în subsol de doar 4 magazine online din toate cele 50.

În subsolul site-ului clubului de cumpărături BonPrix puteți găsi o pictogramă care promite o achiziție în siguranță.

Pictogramele metodei de plată din subsol au fost folosite și de un număr mic de magazine online - doar 18%.

Subsolul dvs

Această analiză modestă a 50 de subsoluri ale magazinelor online selectate aleatoriu nu este, desigur, un studiu științific. Iar cifrele pe care le-am primit cu greu pot fi aplicate industriei comerțului electronic în ansamblu. Dacă, conform analizei noastre, 54% dintre magazinele online includ numere de telefon în subsolul lor, asta nu înseamnă că 54% dintre toate site-urile de comerț electronic fac la fel.

Dar aceste informații sunt un aliment valoros pentru gândire care vă poate ajuta să decideți ce să adăugați la subsolul site-ului dvs. Cu toate acestea, este cel mai logic să plasați unele elemente în blocul de jos al site-ului, deoarece acolo se va aștepta utilizatorul să le vadă.