Jargonul de proiectare a fost explicat: modelul Z.

Imagine oferită de Karyn Christner, www.flickr.com/photos/toofarnorth/

Imagine oferită de Karyn Christner, www.flickr.com/photos/toofarnorth/

În Jargonul de proiectare a fost explicat: modelul F , am vorbit despre cum studii de urmărire a ochilor arată că utilizatorii scanează ecranele în moduri similare și previzibile.

Pentru un designer UI, aceste modele de scanare dezvăluie aspectul optim al elementelor pentru anumite tipuri de site-uri. Această știință rece și dură, atunci când este aplicată corect, creează în utilizator un sentiment magic de familiaritate. Interfața pare intuitivă și personală, cu totul la locul potrivit.



Articolul nostru anterior s-a axat pe unul dintre aceste modele de scanare, modelul F, iar acesta va explora un alt model, la fel de important: modelul Z.

Mai jos, vom explica ce este aceasta, cum să o aplicăm și apoi vom arăta câteva exemple reale despre cum s-a făcut bine.

Pentru mai multe detalii despre modelul Z, modelul F și multe alte tehnici vizuale de proiectare web, consultați cărțile electronice gratuite Design web pentru ochiul uman și Cele mai bune practici pentru interfața de utilizare web .

Deconstruirea modelului Z.

În timp ce modelul F este ideal pentru site-uri cu conținut ridicat de text sau conținut, modelul Z funcționează mai bine pentru site-uri mai slabe și mai rare.

Site-urile minimaliste, sau site-urile care se concentrează în principal pe unul sau două elemente principale, pot implementa modelul Z pentru a anticipa și încuraja utilizatorii să urmeze această metodă naturală.

În acest fel, designerii pot asigura, sau cel puțin crește probabilitatea, că sunt văzute cele mai importante elemente.

Imagine oferită de Wunderlist

Imagine oferită de Wunderlist

Ca și în cazul modelului F, în culturile occidentale care citesc de la stânga la dreapta și de sus în jos, utilizatorul începe aproape întotdeauna în colțul din stânga sus și scanează deasupra. Caracteristica distinctivă a modelului Z este forma „Z” pe care o urmează în continuare. În loc să se întoarcă la stânga și apoi să coboare, vederea utilizatorului merge în stânga și în jos în același timp și apoi scanează din nou o linie orizontală de la stânga la dreapta.

Interesantul și utilul lucru de știut despre modelul Z este că se repetă, uneori ad infinitum dacă conținutul este suficient de atrăgător.

Acest lucru creează o structură nesfârșită în zig-zag care se extinde în jos atât timp cât puteți atrage atenția utilizatorului, făcând acest model perfect pentru a crea narațiuni vizuale cu defilare lungă, defilare infinită și defilare în paralaxă.

cum pot împiedica publicul să-mi vadă pozele pe facebook

Imagine oferită de Wunderlist

Imagine oferită de Wunderlist

Spre deosebire de modelul F, care funcționează bine pentru site-urile care necesită organizarea unui mix de conținut vizual și text, modelul Z funcționează bine pentru site-urile cu o agendă clară și directă (de exemplu, o pagină de destinație cu un singur apel principal către ... acțiune).

Modelul Z creează o structură și o ierarhie clare și, dacă este făcut corect, creează un impuls care culminează cu un îndemn final la acțiune.

Dezavantajul este că poate fi dezorientant pentru site-urile cu mult conținut.

Aplicarea modelului Z

Modelul Z constă de obicei din rânduri de conținut luminos, intercalate cu grafică mare sau alt conținut care atrage atenția.

Imagine oferită de UXPin prin MailChimp

Imagine oferită de UXPin prin MailChimp

Modelul Z începe la fel ca modelul F, deci cel mai important punct este colțul din stânga sus (punctul # 1). Acesta este unul dintre puținele puncte de pe ecran pe care utilizatorul dvs. este aproape sigur să le privească și, ca atare, deține de obicei sigla companiei.

Din nou, ca și modelul F, utilizatorul va scana cel mai probabil de la stânga la dreapta în partea de sus a paginii (punctul # 2). Acest lucru înseamnă două lucruri pentru designer.

  • În primul rând, acel rând superior este o proprietate imobiliară principală, motiv pentru care este de obicei umplut cu o bară de navigare orizontală. Aproape imediat după aterizarea pe site-ul dvs., utilizatorii știu ce pagini sunt disponibile și unde să le găsească.
  • În al doilea rând, înseamnă că colțul din dreapta sus este un loc minunat pentru un îndemn, deoarece vederea utilizatorului se va întrerupe o clipă înainte de a trece mai departe.

Urmăriți ochiul

Ochiul utilizatorului cade apoi în jos, spre mijloc. Aici veți găsi un grafic mare sau uneori o notificare. O altă strategie este de a menține această zonă relativ goală: un spațiu gol aici va muta utilizatorul mai repede și va încuraja o transă repetitivă.

În ambele strategii, partea importantă a mijlocului este că nu distrage atenția utilizatorului și nici nu le abate de la calea modelului Z. Asta înseamnă că nu sunt recomandate substituenții grele sau complicate din punct de vedere vizual.

Vederea utilizatorului merge apoi în colțul din stânga jos (punctul # 3) și scanează din nou spre dreapta (punctul # 4). În partea de jos a ecranului, în mod obișnuit găsiți conținut orientat pe orizontală, uneori chiar și un meniu de bare care îl reflectă pe cel din partea de sus.

Veți observa, de asemenea, că punctele de la capătul liniei din dreapta, punctele # 2 și # 4, sunt cele mai bune pentru îndemnuri, cum ar fi butoanele „Înscrieți-vă gratuit” din exemplu. Gândiți-vă la aceste puncte, cum ar fi liniile de sosire, unde ochiul se oprește înainte de a merge mai departe.

Repetarea tiparului

După punctul # 4, modelul continuă să se repete. Puteți extinde modelul Z atât timp cât doriți, repetând sau introducând îndemnuri noi în fiecare dintre punctele din partea dreaptă.

În general, modelul Z este mai relaxat decât modelul F. Permite spațiu de respirație și versatilitate - atât în ​​cât timp poate deține atenția utilizatorului, cât și în cât de larg puteți face golurile din mijloc. Acest lucru îl face favorabil povestirii sau prezentărilor de vânzări, dar ineficient în organizarea conținutului divers.

Datorită accentului pus pe îndemnuri, modelul Z nu este neobișnuit pentru paginile de start și paginile de destinație, influențând subtil utilizatorul pe unde ar trebui să meargă mai departe. Este un aspect popular în diferite industrii și îl puteți recunoaște adesea din barele sale de navigație de sus și de jos. Aici sunt cateva exemple...

01. Pagina Harta AirBnB

Imagine oferită de Air BnB Map

Imagine oferită de Air BnB Map

Așa cum este descris în Design web pentru ochiul uman (cartea 2) , modelul începe de la sigla tradițională a companiei din colțul din dreapta sus. Deoarece nu există o bară de navigare sus, ochiul probabil va trage direct în colțul din dreapta sus, cu îndemnuri înapoi la site-ul original și opțiuni de partajare, plus o opțiune de control al sunetului.

Ochiul scanează apoi harta - conținutul real al paginii, dar deocamdată doar un fundal - înainte de a se așeza în colțul din stânga jos. Vederea utilizatorului urmează apoi meniul de navigare din partea de jos în colțul din dreapta jos, unde se află unul dintre cele mai importante controale: zoom-ul.

În timp ce conținutul relevant este în centru, utilizatorii vor scana probabil întreaga pagină înainte de a interacționa. Dispunând totul într-un model Z, AirBnB ajută la asigurarea faptului că utilizatorul va vedea comenzile paginii și locațiile lor în primele momente, permițându-le să interacționeze cel mai bine cu pagina. Aspectul modelului Z simplifică pur și simplu acest proces.

02. căile aeriene britanice

Imagine oferită de British Airways

Imagine oferită de British Airways

O altă mare companie care profită de modelul Z este site-ul British Airways pentru prezentarea noilor lor avioane. În mod previzibil, sigla companiei se află la punctul de plecare și, ca și Airbnb, lipsa unui meniu de navigare superior înseamnă că ochiul merge rapid în colțul din dreapta. Aici compania a ales să promoveze doar cele mai importante link-uri pentru paginile Galerie și Trasee.

Apoi, ochiul trece peste imaginea mare - superb pentru a privi, dar în cele din urmă fără sens pentru interfața din afara esteticii. Utilizatorul poate citi sau ignora mesajul de salut, în funcție de intervalul de timp sau dacă știe unde a aterizat.

Deoarece punctul 3 este cel mai puțin semnificativ, British Airways (și multe alte companii) au ales să își pună cerința legală aici. Dar aceasta este de fapt o decizie strategică - linia orizontală a textului încurajează site-ul utilizatorului să se deplaseze chiar de-a lungul aceluiași plan.

După cum sa explicat în Web UI Design pentru ochiul uman (Cartea 1) , principiul Gestalt al liniilor arată că site-ul utilizatorului va călători de-a lungul liniilor clare și va căpăta avânt pe măsură ce o face. Această plasare a liniei legale susține de fapt modelul Z și direcționează privirea către conținut mai relevant ... culminând cu butonul Partajare de la punctul 4.

03. Irregulart

Imagine oferită de Irregulart

Imagine oferită de Irregulart

Irregulart folosește și modelul Z, dar demonstrează o variație importantă pe care am dori să o subliniem.

După cum am menționat în exemplul anterior, punctul 3 este cea mai puțin importantă locație de pe pagină. De aceea, unii designeri aleg să o omită complet din modelul Z (așa cum a făcut echipa de la Irregulart). Modelul Z este încă eficient, cu toate acestea, partea inferioară / mijlocie devine noul punct 3. Acest lucru face ca prima privire vitală să devină mai rapidă și să ajusteze site-ul pentru o senzație mai simplistă și minimalistă.

Amintiți-vă că, la fel ca majoritatea principiilor de proiectare, modelul Z este doar o orientare. Nu trebuie să urmăriți fiecare punct, dar cu siguranță țineți cont de elementele fundamentale și modificați-le după cum este necesar.

Concluzie

Aportul important cu modelul Z este structura sa.

Poate îmbunătăți site-urile simpliste, dar cele câteva puncte structurale sunt vitale pentru eficiența sa, deci nu le subestimați. Structura este cea mai mare forță a modelului Z, dar este și slăbiciunea sa; un element de distragere deplasat va deraia calea utilizatorului și va învinge întregul scop al aspectului.

Cuvinte : Jerry Cao

Jerry Cao este un strateg de conținut la UXPin - aplicația wireframing și prototipare - unde dezvoltă conținut în aplicație și online pentru platforma wireframing și prototipare. Pentru a afla cum să utilizați machete de toate tipurile și fidelitățile, verificați Ghidul machetelor .

wacom cintiq 13hd creative styl & touch interactive display

Ca aceasta? Citiți acestea!