Înțelegerea aspectului Z în Web Design

Z-Layout-ul este o modalitate foarte bună de a începe aproape orice proiect de web design deoarece se adresează cerințelor de bază pentru orice site eficient: branding, ierarhie, structură și apel la acțiune. În timp ce clasicul "Z-Layout" nu va fi soluția perfectă pentru fiecare site web acolo, este cu siguranță un aspect suficient de eficient pentru a garanta includerea în arsenalul oricăror designeri web de idei de aspect.

Obținerea unei mai bune înțelegeri a modului în care diferitele aspecte pot schimba comportamentul utilizatorilor este unul din principiile centrale ale creării unei experiențe eficiente a utilizatorului.

Acest post marchează primul într-o serie în care vom examina o mare varietate de paradigme de aspect care există în lumea designului web. Scopul: o mai bună înțelegere De ce ați putea alege un concept de aspect față de altul. În această serie, vom analiza, de asemenea, modelul în formă de "F", aspectul deschis și câteva aspecte ale casetei, care vă vor oferi cu siguranță câteva idei minunate. Obținerea unei mai bune înțelegeri a modului în care diferitele aspecte pot schimba comportamentul utilizatorilor este unul dintre principiile centrale ale creării unei experiențe eficiente a utilizatorului.

Introducerea Z-Layout

Premisa Z-Layout-ului este de fapt destul de simplă: super-impuneți litera Z pe pagină. Plasați elementele pe care doriți ca cititorul să le vadă mai întâi de-a lungul vârfului Z. Ochiul va urma în mod natural calea lui Z, astfel încât obiectivul este să plasați "apelul la acțiune" la sfârșit. Pe tot parcursul căii puteți include biți de informații care se construiesc în funcție de solicitarea de acțiune. Să aruncăm o privire la diagrama:

Observați că am numerotat punctele cheie de-a lungul căii - acestea reprezintă ordinea în care un cititor poate vedea conținutul paginii. Să vedem cum se traduce acest lucru într-un aspect actual:

Acum să acoperim diagrama Z deasupra aspectului:

Simplu, nu? Cu siguranță nu este nimic complicat în ceea ce privește această structură - dar aceasta mișcă rapid și eficient ochiul de la punctul 1 la punctul 4 într-o ordine logică - încheind cu un apel puternic la acțiune. Există încă câteva lucruri pe care le putem face pentru a împrospăta această dispunere până sus ... deci să adăugăm câteva lucruri la design:

  • Decuparea fundalului pentru a focaliza mișcarea ochilor în cadrul designului nostru.
  • O siglă de stil pentru a atrage atenția utilizatorului la punctul # 1.
  • Un buton colorat "înscrieți-vă" la punctul # 2: aceasta va întări mișcarea dorită a ochilor.
  • Un slider de imagine recomandat în centrul paginii: acesta va separa partea de sus a desenului din partea de jos și va facilita deplasarea ochilor în jos.
  • Pictogramele de la punctul # 3 și de-a lungul axei inferioare: aceasta va încuraja "scanarea titlurilor", pe măsură ce ochiul se va deplasa la apelul la acțiune.
  • O mare "chemare la acțiune" la punctul # 4 - datorită noii separări de fundal, această caracteristică ar trebui să iasă mai mult.

Aici puteți vedea că noul buton "Înscrieți-vă" în navigație se remarcă mai mult; "Glisorul" pe care l-am adăugat în zona clasamentului ajută la menținerea atenției utilizatorului în centrul cadrului; Cele două icoane de lângă blocurile de conținut de la punctul 3 ajută, de asemenea, să le facă un pic mai interesant din punct de vedere vizual. Din nou - aceste lucruri sunt simple, deoarece pot fi simple, dar pot fi buni atunci când vine vorba de designul site-ului! Aveți posibilitatea să faceți straturi în complexitate, pe măsură ce vă rog, dar nu treceți cu vederea puterea unui aspect simplu și eficient.

De ce funcționează

Z-Layout nu trebuie să fie soluția finală pentru toate locațiile, dar, așa cum am menționat mai devreme, este adesea un excelent punct de plecare pentru orice proiect de proiectare, deoarece abordează cele 4 mari principii ale unui design eficient:

  • Branding
  • Ierarhie
  • Structura
  • Un apel la acțiune

Funcționează deoarece majoritatea cititorilor occidentali vor scana un site în același fel în care vor scana o carte - de sus în jos, de la stânga la dreapta. De la această fundație simplă puteți merge destul de mult oriunde: adăugați mai multe apeluri la acțiune, micșorați înălțimea lui Z, extindeți-l, faceți tot ce vă place că are sens la scopul site-ului.

Să aruncăm o privire la câteva modele minunate de site-uri care utilizează Z-Layout ca structură de bază. Un lucru pe care veți dori să îl notați în aceste exemple este modul în care z-layout-ul este capabil să se adapteze. Apelul la acțiune poate să nu fie întotdeauna același (unele site-uri ar putea să vă ducă la portofoliul lor mai mult decât doresc să vă "înscrieți"); conținutul de-a lungul căii poate arăta foarte diferit decât exemplul nostru. Lucrul pe care trebuie să-l observați este modul în care aspectul povestirii este transmis: 1, 2, 3, Acțiune! Prin mișcarea ochiului de-a lungul Z-Path, șansele pe care un vizualizator le va face să facă ce vreți să facă sunt mai mari.

În timp ce vedeți aceste exemple, încercați să găsiți calea Z pe care designerul dorește să o urmați.

Exemple ale planului Z în acțiune

Evernote pare complex la prima vedere, însă o inspecție mai detaliată dezvăluie o cale de z-terminare cu butonul "descărcare". Mult mai simplu, site-ul Daina Reed furnizează un cuplu rapid de informații, apoi solicită o acțiune "a lua legătura". Calea de pe CodeMonkey începe de la logo și se termină pe "Get Started". Este un pic mai greu de văzut aici datorită paletei duo-crom, dar z-layout creează cadrul general. Acest exemplu se termină cu o etichetă de preț strălucitoare și îndrăzneață. Probabil una dintre cele mai clare utilizări ale Z-Layout, designul Blue Acorn atinge fiecare punct de-a lungul căii. Campania Monitorului combină aspectul, însă pașii 1, 2, 3, 4 sunt intacte.

Caveats Worth Mentioning

Este important să rețineți că Z-Layout nu este singura paradigmă de aspect care este acolo. Heck, sunt cam atâtea machete ca și literele din alfabet. Z-Layout-ul este unul dintre aspectele principale, deoarece este atât de simplu de utilizat ca fundație, dar veți dori întotdeauna să aveți încredere în instinctele dvs. atunci când este timpul să faceți o decizie finală privind aspectul.

... Indiferent de designul specific al aspectului, spectatorii au mai multe șanse să privească mai întâi cele mai mari, mai stralucitoare și cele mai contrastate elemente dintr-o pagină.

Au fost o grămadă de studii interesante realizate cu privire la urmărirea ochilor, care sugerează că încercați să anticipați mișcarea ochilor pe un site web, este la fel de nehotărât ca trimiterea a 1000 de copii într-un magazin de bomboane. Mai multe studii au arătat, de asemenea, că aspectul în formă de "F" (pe care îl vom revizui în continuare în această serie) este mai eficient în controlul mișcării ochiului privitorului pe o pagină. Adevărul simplu este că, indiferent de designul specific al aspectului, spectatorii au mai multe șanse să privească mai întâi cele mai mari, mai stralucitoare și cele mai contrastate elemente dintr-o pagină. Țineți cont de acest lucru; dacă obiectivul dvs. este de a ghida un spectator prin Z-Layout, nu le oferiți nici o șansă de a fi distrasi de-a lungul drumului decât au deja.

În cazul în care Z-Layout cu adevărat straluceste este în proiecte de design în cazul în care simplitatea și un apel la acțiune sunt principiile cele mai importante. Încercarea de a forța un Z-Layout pe o structură complicată a conținutului probabil că nu va funcționa bine, dar permiterea modelului Z de a forma un cadru pentru un site foarte de bază poate aduce un sentiment de ordine care vă poate ajuta să creșteți rata de conversie.

Verificați postul de model în formă de "F"!

Oh! Consultați o listă de șabloane stoc care utilizează Z-Layout aici.