Share
Ca designeri web, urmărim o mulțime de paradigme de design și principii de aspect: grile, consistență verticală, F-Layout, Z-Layout, regulă de treimi, Golden-Ratio și așa mai departe. Acordarea atenției acestor principii va crea un design atrăgător și funcțional vizibil - să analizăm acum divizarea simplă a unei pagini în două jumătăți egale.
În timp ce acest lucru s-ar putea părea un pic prost și evident la început, acest aspect fundamental poate fi foarte eficient. Ochii noștri tind să urmeze o mișcare zig-zag în timp ce trec printr-o pagină. Dacă ochiul urmează o linie orizontală dreaptă - ca în planul Z, el se concentrează (sau încearcă). Din moment ce 90% din traficul web care vine pe site-ul dvs. nu acordă o atenție deosebită paginii dvs., făcând designul dvs. "prietenos".
Din studiile de urmărire a ochilor Yahoo!:
Utilizatorii de Web se grăbesc întotdeauna. Ei au și alte lucruri de făcut și rămânând în urmă pentru a aprecia frumusețea și estetica site-ului dvs. este ultimul lucru pe care vă puteți aștepta să-l facă. Chiar dacă designul bun are o mare importanță, acesta nu inspiră pe deplin un vizitator să acționeze - să facă clic pe butonul "Cumpărați acum" sau "Află mai multe".
Nu putem să-i învinovățim. Ți-ai amintit vreodată când vrei să cauți ceva? Vă grăbiți la primul rezultat al căutării în Google și apoi "puteți" rapid prin sau, mai degrabă, treceți prin pagina generală. De cele mai multe ori, parcurgeți chiar până la capăt, fără a acorda o atenție deosebită. După această fază, dacă decideți că pagina este în valoare de timpul dvs., derulați înapoi în partea de sus și apoi luați efortul real pentru a citi și a acorda atenție.
Care este scopul scufundării inițiale? Pentru a obține informațiile maxime pe care le puteți obține despre pagină la prima vedere. Dacă într-un fel "codificăm" acest tipar, ar trebui să fim capabili să atragem atenția mai multor vizitatori. Din observațiile din filele de căldură ale diferitelor site-uri, am realizat o tendință comună.
Veți observa că puteți privi fără nici un efort spoturile roșii. În mod ciudat, din experiența noastră, putem spune că ochii noștri ar trebui să urmeze cu ușurință linii drepte, mai degrabă decât unghiuri - din moment ce citim în linii drepte. Rețineți că vorbesc despre faza inițială de absorbție, nu despre partea în care acordați atenție fiecărui detaliu al site-ului.
Ori de câte ori nu acordați prea multă atenție, aceasta este tendința naturală a ochilor dvs. - zig-zag-ul. Dacă nu există elemente care au un contrast și o greutate mai mare care vă strigă la voi, probabil că veți urma modelul de mai sus. Veți observa, de asemenea, că acest model arată asemănător cu aspectul F și că punctele roșii de sfârșit sunt în cazul în care utilizatorii iau o pauză momentană.
Aceste momente de pauză instantanee sunt locul în care creierul dvs. obține un instantaneu. Într-o schemă zig-zag cu elemente care conțin piese importante de informații la "Punctele pauze", Brainul absoarbe în mod natural mai multe detalii, deoarece asociază fiecare punct final de zig-zag ca entități separate.
Designul nu este doar ceea ce arată și simte. Designul este modul în care funcționează. -Steve Jobs
Ați putea (de exemplu) să utilizați această caracteristică a layout-ului Half Split pentru a vă poziționa eficient previzualizările din portofoliul de lucru sau caracteristicile importante ale produsului sau serviciului dvs., astfel încât vizitatorii să observe repede. În cele din urmă, acestea îi încurajează să stea mai mult timp pe site-ul dvs. și astfel îi convingă să întreprindă acțiuni. Rezultatul? Rata de conversie mai bună pentru dvs. și o experiență mai bună pentru utilizatori.
Efectuarea design-ului și a aspectului "zig-zag compatibil" este foarte simplă. De fapt, este la fel de ușor ca împărțirea paginii dvs. în două jumătăți egale! Jumătate egale funcționează bine, deoarece punctele finale ale Zig-Zag sunt aliniate mai mult sau mai puțin spre centrul acestor jumătăți. Folosite în suprapunere, ele merg bine împreună. Plasați elemente de importanță la pozițiile roșii ale punctelor finale ale paginii dvs. Zig-Zag. Acesta este conceptul de bază din spatele Half Split, sau 1/2-Layout.
Recent am lucrat la o pagină de destinație "Coming Soon". Am experimentat diferite modele, dar nimic nu a funcționat bine. Am încercat totul - Grile, Raportul de Aur, F-Layout. Momentul Eureka a venit când am împărțit pagina în două jumătăți egale. Soluția a fost la fel de simplă! Arăta elegant și elegant și mi-a amintit de faptul important că simplu nu este neapărat rău. Ați văzut noul logo Microsoft?
Simplitatea este sofisticarea ultimă. -Leonardo Da Vinci
Puteți vedea cum jumătățile oferă o frumoasă ierarhie vizuală. În primul rând, se observă panglica roșie "Coming Soon" din partea de sus. Apoi, logo-ul este văzut. Acum, urmând Zig-Zag-ul pe care l-am menționat mai devreme, vizitatorul ajunge să privească cursorul Imagine pe jumătatea dreaptă și, în cele din urmă, formularul de trimitere prin e-mail.
Acum, să vedem cât de bine funcționează structura split pentru o pagină de Portofoliu a unui Designer Web. Scopul paginii Galeriei într-un portofoliu este de a arăta rapid potențialii clienți un corp de lucru. Există o mulțime de opțiuni pentru ei, deoarece această industrie este destul de saturată chiar acum. De ce ar trebui să vă plătească? A face o primă impresie mare ar putea sfârși balanțele în direcția voastră. Să vedem ce putem face în legătură cu asta.
Aspectul de mai sus este împărțit în două jumătăți, dar nu respectă principiul "zig-zag" pe care l-am menționat mai devreme.
În timp ce se pare că are un aspect bun și ușor pe ochi, devine destul de plictisitor după primele două elemente. Spargerea fluxului pentru a spori interesul vizual va ajuta. Nu numai asta; dar când încercați să eliminați aspectul de mai sus, ochii dvs. ar trebui să vadă prima imagine și apoi să sară la textul celui de-al doilea element. Având în vedere că vizitatorii dvs. nu au intenții de a citi în această fază, aceștia sare într-un alt punct sau părăsesc site-ul în întregime!
Dacă ați făcut o simplă schimbare ca asta?
Mai interesant, nu? Simpla schimbare a pozițiilor textului și a imaginii fiecărui element mărește interesul vizual astfel încât consistența să nu-i facă pe vizitatori să se simtă plictisiți. De asemenea, puteți plasa un buton de apel la acțiune urmând modelul Zig-Zag.
Butonul "Contactați-mă" va avea acum o șansă mai mare de a fi observat și de a da clic pe mai mulți vizitatori (de ce nu efectuați un test A / B pentru a verifica acest lucru?)
Designul este un plan pentru aranjarea elementelor în așa fel încât să se realizeze cel mai bine un anumit scop. -Charles Eames
Schema divizată a intrat în lumina reflectoarelor cu noul design Timeline al Facebook. Observați cum ochii dvs. "curg" cu ușurință de la un post la altul.
De asemenea, Apple urmează o structură divizată. Aici este pagina mini iPad, vezi cât de ușor este să asociați fiecare imagine ca și caracteristici separate ale iPad mini? Se simte bine.
Microsoft a fost creditat cu pavaje multe noi moduri cu rebranding lor recente, aici, după un aspect divizat pe pagina lor de informații Surface.
Stacey este un portret minimalist al modelului 1/2-Layout.
Îmi place pagina lui Quora. Poate fi demonstrat aspectul divizat mai simplu?
Consumerbarometer.com duce la nivelul următor cu animațiile și o variație triunghiulară a Zig-Zag.
Deci, ce am învățat?
Acest articol este doar un memento blând că utilizarea unor modele de bază și a metodelor fundamentale de proiectare nu ar trebui să fie uitate niciodată. De fapt, acesta poate crește ratele de conversie, dacă este utilizat corespunzător.
Accentsconagua