7 sfaturi de proiectare despre cum să alegeți, să modificați și să îmbunătățiți imaginea cursorului

În ultimii 7 ani, glisoarele (sau caruselele, dacă doriți) sunt ceva ce are aproape fiecare site web. Este o practică comună. Ceva cu care suntem cu toții obișnuiți. Este primul lucru pe care îl va vedea vizitatorul tău pe site-ul tău. Este momentul de a face sau de a sparge. Imaginile slider trebuie să facă o primă impresie excelentă, altfel veți pierde vizitatorul pentru totdeauna.

Când mă uit prin site-urile web pe care clienții noștri le-au creat cu temele noastre WordPress, văd adesea imagini de glisare prost pregătite. De cele mai multe ori fotografiile sunt prea mari sau prea mici. Textul de pe glisor nu este suficient de vizibil, iar imaginile nu sunt optimizate, astfel încât pagina în sine se încarcă extrem de lent.

Mi se rupe inima un pic când văd un site web general bun, cu o copie bună, dar imagini cu slider proaste. Am decis să opresc această nebunie împărtășind câteva trucuri simple.

1. Alegeți fotografia potrivită

Primul si cel mai important. Alege fotografia potrivită. Alegeți o imagine suficient de descriptivă și care are suficient spațiu alb. Aruncă o privire unde apare textul de pe glisor și alege imaginea care are cât mai puțin zgomot vizual în zona respectivă.

2. O fotografie de înaltă rezoluție este obligatorie

Utilizați rezoluția recomandată de creatorul temei. În ultimii 4 ani, am văzut o mulțime de site-uri web cu fotografii cu rezoluție mică întinse pe tot ecranul. Nu puteți rata dacă alegeți o imagine cu o lățime de 1920 px. Nimic nu-ți descurajează vizitatorul mai mult decât o fotografie pixelată în glisor. O resursă excelentă de fotografii gratuite de înaltă calitate este Unsplash. Dacă aveți un buget, vă recomand să cumpărați fotografii premium de pe Shutterstock. Investiția va da roade.

3. Întunecă sau luminează fotografia

Un truc bun pentru a face un text de pe glisor mai vizibil este întunecarea (sau luminarea) fotografiei. Acest lucru se poate face în Photoshop sau în orice alt program de editare foto. Pentru acest tutorial, voi folosi aplicația de design gratuită numită Canva. După ce vă înscrieți la Canva, faceți clic pe „Creați un design” în colțul din stânga sus. Apoi, în colțul din dreapta sus, faceți clic pe „Utilizați dimensiuni personalizate” și introduceți dimensiunile recomandate de dezvoltatorul temei. Dacă nu există o rezoluție recomandată, accesați site-ul demonstrativ al temei WordPress și inspectați fotografia (sau schimbați furnizorul de teme WordPress cu noi).
Faceți clic pe „Design!” și accesați „Încărcări” din meniul din stânga. Încărcați imaginea cursorului și trageți-o pe tablă. În meniul de sus, faceți clic pe „Filtru” și reduceți „Luminozitatea” și „Contrastul” cu 10-20%. Dacă culoarea textului de pe glisor este albă, doriți să vă faceți fotografia puțin mai închisă pentru a îmbunătăți contrastul. Dacă aveți text negru pe glisor, doriți să faceți invers.

Fă un pas mai departe. Colorează-ți fotografia în culorile mărcii tale mutând caruselul „Nuanță” (Nuanță) puțin la stânga sau la dreapta.

4. Suprapunere de culoare semi-transparentă

Uneori pur și simplu nu poți găsi o fotografie cu suficient spațiu alb pentru text sau clientul tău dorește să folosești o imagine suprasaturată în care textul tău nu ar fi suficient de vizibil. În această situație, cel mai simplu lucru pe care îl puteți face este să faceți o suprapunere de culoare semi-transparentă.

Pentru a face asta, accesați aplicația Canva > Elemente > Forme și trageți și plasați primul dreptunghi alb sau al doilea întunecat pe panoul dvs. (unde scrie gratuit). Redimensionați acel dreptunghi de la o margine la alta și colorați-l în negru în colțul din stânga sus. Apoi, în colțul din dreapta sus, setați transparența dreptunghiului dvs. la ~50%, depinde de cât de mult contrast aveți nevoie.

5. Adaugă strălucire interioară fotografiei tale

Un alt truc grozav pentru a vă face fotografia cu glisor mai interesantă este adăugarea unei străluciri interioare semi-transparente negre. Această metodă va face site-ul dvs. să arate și mai profesionist. Acesta va pune accentul pe centrul ecranului. În aplicația Canva, acest efect se numește „Vigneta” și îl puteți găsi în meniul de sus „Filtru” > „Opțiuni avansate”. Când sunteți mulțumit de fotografia cu glisor, o puteți salva făcând clic pe butonul „Descărcați” din colțul din dreapta sus.

6. Alegeți tipul de fișier potrivit

Când salvați imaginea glisorată editată, este important (din cauza dimensiunii fișierului) să alegeți tipul de fișier potrivit. Nu vă faceți griji; regula este simpla. Dacă imaginea cursorului este o fotografie reală, salvați-o ca .jpg. Dacă este altceva decât o fotografie (de exemplu, model, pictogramă, doodle), salvați-o ca .png. Acest lucru este important pentru că doriți să aveți imaginile glisante cât mai ușoare și optimizate posibil.

7. Viteza paginii contează foarte mult

Atât pentru Google, cât și pentru vizitatorul dvs. Imaginile slider sunt cele mai mari imagini (poate chiar fișiere) ale site-ului dvs., așa că este important să le aveți optimizate. Instrumentul excelent pentru a reduce dimensiunea unei imagini este TinyPNG. Interfața lor simplă drag & drop vă permite să micșorați dimensiunea imaginii fără a pierde calitatea. Consultați ghidurile finale pentru optimizarea imaginilor și optimizarea vitezei paginii.

Sfat bonus: Folosiți dimensiunea recomandată a imaginii slider

Când dezvoltăm teme WordPress, depunem un efort suplimentar pentru a alege dimensiunea și raportul potrivit pentru fotografia glisorului. Fotografia în sine trebuie să funcționeze bine pe orice dimensiune de ecran. Văd o mulțime de cazuri în care utilizatorii folosesc dimensiuni diferite de cele recomandate. De cele mai multe ori, fotografiile din glisor ocupă prea mult spațiu vertical.

Aceasta nu este o problemă pentru funcționalitatea glisorului în sine, dar dacă vizitatorul dvs. trebuie să deruleze mult pentru a ajunge la conținut, nu face nimic bun în ceea ce privește experiența utilizatorului.

Dacă tot doriți să utilizați imagini mai mari decât cele recomandate, vă rugăm să aveți în vedere cel puțin un vechi bun deasupra regulii de pliere.

Glisorul este primul lucru pe care îl va vedea vizitatorul dvs. pe site-ul dvs. web. Îmbunătățiți experiența utilizatorului prin implementarea unora dintre trucurile de mai sus. Nu îți va lua mult timp, dar va îmbunătăți fericirea ta, a clientului tău și a vizitatorului clientului tău.

Așa că acum că aveți o idee despre cum să vă îmbunătățiți imaginile cu glisoare, să discutăm avantajele și dezavantajele utilizării glisoarelor. După cum se dovedește, există o mulțime de cercetări care spun că glisoarele vă pot afecta site-ul mai mult decât îl pot ajuta. Chiar și autorii pluginului Yoast SEO spun că glisoarele ar trebui să fie interzise de pe site-ul tău, așa că merită să discutăm despre avantajele și dezavantajele slide-urilor, precum și când sunt adecvate și când este cel mai bine să le eviți.

Contra utilizării glisoarelor pe site-ul dvs. web

În primul rând, să aruncăm o privire la cele mai importante dezavantaje ale glisoarelor.

Foarte puține pluginuri de glisare sunt cu adevărat receptive pentru mobil

Ați întâlnit vreodată un site web care folosește un glisor și ați încercat să îl vizualizați pe telefon? Deși este adevărat că telefoanele devin mai mari, simplul fapt este că majoritatea glisoarelor se redimensionează pentru a se adapta la dimensiunea mai mică a ecranului.

Astfel, atât imaginile, cât și textul sunt prea mici pentru a fi citite și vizualizate pe ecrane mai mici. În cele din urmă, slider-ul tău frumos va fi mai mult ca sigur ignorat pe telefoane, așa că gândește-te de două ori la conținutul pe care îl adaugi în prezentarea de diapozitive.

Dacă sunteți suficient de norocos să utilizați un plugin de glisare receptiv precum Soliloquy, fiți pregătit să petreceți ceva timp personalizându-vă glisoarele pentru a vă asigura că arată bine pe toate dispozitivele. În timp ce sunteți la asta, asigurați-vă că testați glisorul și vedeți cum arată pe o varietate de dimensiuni de ecran și dispozitive.

Majoritatea vizitatorilor nu vor rămâne peste primele două diapozitive

Dacă țineți cont de faptul că durata noastră de atenție este din ce în ce mai scurtă, este sigur să presupunem că majoritatea vizitatorilor nu vor rămâne peste primele două diapozitive.

Când vizitatorii ajung pe site-ul tău, vor să știe instantaneu ce faci și cum îi poți ajuta. Dacă diapozitivele tale nu răspund la aceste întrebări, sunt șanse să treacă mai departe.

Comenzile glisante pot fi ușor ratate

Comenzile glisante sunt de obicei pictograme discrete, concepute și stilate astfel încât să nu afecteze conținutul real al diapozitivei. Ca atare, acele săgeți folosite pentru a naviga prin glisor pot fi ușor ratate.

Această problemă este și mai evidentă pe ecranele mai mici, ceea ce înseamnă că vizitatorii dvs. de pe mobil vor avea dificultăți să meargă înainte și înapoi între diapozitive sau să facă clic pe butonul care îi duce către o altă parte a site-ului dvs.

Glisoarele vă pot încetini site-ul

Dacă nu sunteți atent la optimizarea imaginilor pentru glisoare și web în general, glisoarele vă pot încetini site-ul. În plus, glisoarele folosesc adesea fișiere JavaScript care necesită multe resurse.

Fiecare dintre aceste fișiere JavaScript este o altă solicitare pe care un browser trebuie să o facă serverului de găzduire pe care se află site-ul dvs. În timp ce browserul face aceste solicitări, vizitatorii dvs. așteaptă să se încarce site-ul dvs., deoarece browserul nu poate continua până când fișierele JavaScript necesare (precum și fișierele de stil pentru glisoare și site-ul dvs.) nu au fost încărcate.

Ca urmare, vizitatorii pot deveni frustrați și pot pleca pe un alt site web care se încarcă mult mai repede și le oferă aceeași soluție pentru care au venit pe site-ul dvs.

De asemenea, merită menționat faptul că, din cauza impactului asupra timpilor de încărcare a site-ului web, glisoarele ar putea afecta negativ SEO.

Ochiul uman reacționează la mișcare

În cele din urmă, rețineți că ochii noștri sunt atrași în mod natural de mișcare. Dacă utilizați glisoare pe site-ul dvs. web, acestea pot distrage atenția utilizatorilor și îi pot determina să nu mai acorde atenție restului conținutului de pe site.

De fiecare dată când se schimbă un slide, riscați ca vizitatorul dvs. să facă clic pe butonul de rezervare pentru a se concentra pe altceva. Acest lucru ar putea duce la o pierdere a conversiilor, care apoi duce la mai puține vânzări și mai puțin profit în general.

Un alt lucru de reținut este că, dacă utilizați un glisor, nu utilizați opțiunea de glisare automată, deoarece poate înrăutăți rapid experiența utilizatorului pentru vizitatori. Imaginați-vă dacă cineva începe să citească textul de pe diapozitiv și apoi imaginea se schimbă înainte de a termina de citit-o. Acest lucru ar putea lăsa utilizatorii dvs. frustrați și îi poate determina să părăsească site-ul dvs.

Avantajele utilizării glisoarelor pe site-ul dvs. web

Acum că am acoperit dezavantajele utilizării glisoarelor, să aruncăm o privire la motivul pentru care ați dori să luați în considerare utilizarea unuia.

Puteți prezenta mai mult conținut în mai puțin spațiu

Datorită naturii lor, glisoarele facilitează afișarea mai multor conținut deasupra pliului sau oriunde altundeva pe site-ul dvs., fără a crea pagini lungi. Puteți folosi câte diapozitive doriți pentru a partaja mesajul dorit prin diapozitive și pentru a-l prezenta într-un mod atrăgător din punct de vedere vizual.

Acest lucru vă permite să vă păstrați pagina de pornire scurtă și dulce, concentrându-vă pe cele mai importante elemente în loc să utilizați tot acel spațiu pentru a spune o poveste vizuală despre un singur produs sau serviciu.

Glisoarele facilitează adăugarea de text la imagini fără a utiliza Photoshop

Majoritatea pluginurilor de glisare vă permit să vă încărcați imaginea și să adăugați text la aceasta fără a utiliza Photoshop sau alt program de editare a imaginilor. Unele glisoare fac chiar posibilă adăugarea de butoane și îndemnuri sau link-uri către alte părți ale site-ului dvs.

Datorită interfeței de administrare a glisorului, puteți scrie și formata cu ușurință textul folosind instrumente similare cu cele găsite în editorul de postări sau Word. Puteți chiar personaliza designul diapozitivului adăugând culori sau fonturi personalizate, ajustând tipul de tranziție și durata și multe altele.

Glisoarele îi obligă pe utilizatori să interacționeze cu site-ul dvs

Oricât de grosolan ar suna, glisoarele fac imposibil ca utilizatorii să nu interacționeze cu site-ul tău. Dacă nu doresc să aștepte să apară următorul diapozitiv, pot pur și simplu să facă clic pe săgeți pentru a merge înainte și înapoi prin toate diapozitivele.

Dacă ați inclus linkuri sau butoane care le duc la o altă pagină, aceștia pot face clic pe butoane și pot explora tot ce aveți de oferit pe site-ul dvs. Cu alte cuvinte, slide-urile oferă mai multă implicare pentru utilizatorii dvs., așa că dacă doriți ca vizitatorii să interacționeze cu site-ul dvs. de la prima dată când ajung pe el, glisoarele ar putea fi răspunsul.

Glisoarele sunt o modalitate excelentă de a vă împărtăși munca

Dacă ești un designer, un ilustrator, un fotograf sau un artist, glisoarele sunt o modalitate excelentă de a-ți prezenta munca fără ca portofoliul tău să ocupe întreaga pagină. Puteți crea o expunere de diapozitive cu cele mai bune lucrări ale dvs. și o puteți partaja ca diapozitiv pe pagina dvs. de pornire sau chiar pe pagina de portofoliu.

Glisoarele sunt utile și dacă vindeți produse, deoarece pot fi folosite pentru a prezenta cele mai populare produse, noi sosiri sau categorii specifice.

Verdictul: Ar trebui să folosiți glisoare?

Cu avantajele și dezavantajele la o parte, este timpul să luați o decizie: ar trebui să utilizați glisoare pe site-ul dvs.? Răspunsul la această întrebare poate fi rezumat în două cuvinte: depinde.

Când este folosirea unui glisor o alegere bună?

Lăsând deoparte argumentele pro și contra, există încă câteva scenarii bune când folosirea unui glisor este o idee bună și o alegere solidă.

• Utilizați un glisor când doriți să vă prezentați lucrarea sau o galerie. După cum am menționat mai devreme, glisoarele se pretează bine pentru a afișa galerii foto sau articole din portofoliu. Dacă site-ul dvs. aparține acestei categorii, atunci cu toate mijloacele, folosirea unui glisor este o modalitate excelentă de a vă prezenta munca fără a vă copleși vizitatorii.
• Utilizați un glisor pentru a prezenta un produs. Într-o notă similară, dacă lansați un nou produs sau un serviciu; un glisor ar putea fi o modalitate excelentă de a demonstra produsul în acțiune sau de a-i evidenția beneficiile și caracteristicile.
• Utilizați un glisor pentru a împărtăși o poveste coerentă. Aceasta ar putea fi povestea mărcii și a companiei tale sau ai putea evidenția membrii echipei și expertiza acestora. Indiferent ce fel de poveste decideți să împărtășiți în glisorul dvs., asigurați-vă că povestea are sens, în caz contrar, vizitatorii dvs. se vor uita la o grămadă de diapozitive fără legătură și care nu au sens. În același timp, asigurați-vă că fiecare diapozitiv generează anticipare pentru următorul diapozitiv și îi intrigă pe vizitatori, astfel încât să rămână până la ultimul.

Când nu ar trebui să utilizați glisoare?

Este de la sine înțeles că, dacă site-ul dvs. web nu aparține uneia dintre categoriile de mai sus sau dacă nu utilizați glisoare pentru a le adăuga pe site-ul dvs., ar trebui să evitați glisoarele. Iată câteva scenarii în care utilizarea glisoarelor nu este o idee bună.

• Dacă folosești doar un tobogan pentru că este șold. Doar pentru că toți ceilalți o fac, asta nu înseamnă că trebuie să o faci și tu. Nu numai că riscați să nu adăugați nimic valoros la site-ul dvs. cu ajutorul unui glisor, dar și riscați să vă amestecați și să arătați la fel ca concurența dvs.
• Dacă site-ul dvs. este deja lent, abțineți-vă de la utilizarea glisoarelor. După cum am spus mai sus, glisoarele pot fi destul de grele în resurse, așa că ultimul lucru pe care trebuie să-l faceți este să vă încărcați site-ul și mai lent. Lucrați mai întâi la fixarea vitezei site-ului, apoi luați în considerare adăugarea unui glisor.
• Dacă nu știți ce să puneți în glisor, nu adăugați unul. Un glisor funcționează cel mai bine atunci când există o poveste în spate. Fără o poveste, aveți o mizerie de imagini care nu adaugă nicio valoare site-ului dvs. și vă pot chiar deruta vizitatorii.
• Dacă puteți partaja conținutul într-un mod mai simplu, faceți-o. Nu are rost să complici prea mult designul site-ului tău sau să sacrifici viteza de dragul celor mai noi tendințe de design. O soluție mai simplă înseamnă de obicei site-ul dvs. va fi mai ușor de actualizat și întreținut, ca să nu mai vorbim de încărcare mai rapidă. Ca atare, renunțarea la un glisor în favoarea unei soluții mai simple este o alegere mult mai bună.

Concluzie

Acum că cunoașteți avantajele și dezavantajele utilizării glisoarelor, puteți lua o decizie informată dacă folosirea unui slider este o alegere bună pentru site-ul dvs. web. Iar cu sfaturile despre optimizarea imaginilor cu glisoare, veți fi pe cale de a crea diapozitive atractive, care nu vor afecta experiența utilizatorului, dar vă vor ajuta să obțineți mai multe conversii.