Share
Astăzi vom examina "Modelul de model F". În loc să încerce să forțeze fluxul vizual al spectatorului, F-Layout-ul oferă comportamentele naturale ale majorității surferilor de web și folosește studii științifice pentru a-l susține. Acest tutorial vă va îndruma prin principiile F-Layout-ului, de ce funcționează și cum vă puteți crea propriul.
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ă al doilea dintr-o serie în care vom examina o mare varietate de paradigme de aspect care există în lumea designului web. Scopul: pentru a înțelege mai bine de ce ați putea alege un concept de aspect față de altul. În această serie, vom analiza, de asemenea, aspectul în formă de "Z", aspectul deschis și unele aspecte care ar putea să vă ofere 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.
F-Layout-ul se bazează pe diferite studii de eyetracking pentru conceptul său fundamental. Aceste studii științifice arată că surferii web citesc ecranul într-un model "F" - văd mai întâi colțul din stânga sus, stânga sus și partea stângă a ecranului ... doar că privesc ocazional spre partea dreaptă a ecranului. Aceste studii sunt în favoarea plasării celor mai importante elemente ale site-ului dvs. (branding, navigare, apel la acțiune) pe partea stângă a proiectului.
Să aruncăm o privire la o căldură folosind Webdesigntuts + ca exemplu:
Această diagrama de căldură arată forma abstractă F pe care utilizatorul o gravitează în general. Punctele fierbinți (roșu / portocaliu / galben) reprezintă locul în care atenția utilizatorului persistă cel mai mult. Permiteți-mi să vă trec prin modelul general de comportament:
Să facem un moment pentru a transforma acest tipar într-un cadru de barebare:
Ia-ți un moment pentru a observa câteva tipare de comportament cheie; Citirea se face în mare măsură în același mod în care se citește o carte: de sus în jos, de la stânga la dreapta; Conținutul din bara laterală este deseori respins sub "fold" și, de obicei, este scanat doar pentru scurt timp. Cea mai mare parte a atenției rămâne în coloana principală a conținutului, în cazul în care, în acest caz, lista de articole este localizată.
O inspecție strictă dezvăluie o ierarhie vizuală pe care ați putea să o așteptați logic:
Ca exercițiu, hai să mergem prin crearea unui design folosind F-Layout. În primul rând, să schițăm plasarea aspre a principalelor noastre elemente de conținut utilizând o metodă wireframe:
Observați că încercăm să facem declarația de misiune principală cât mai aproape posibil de partea de sus a paginii, în încercarea de a comunica rapid scopul scopului site-ului. De asemenea, oferim vizitatorilor dorința de a "scana" conținut prin ruperea designului nostru în două coloane principale ... una pentru conținutul nostru principal, cealaltă pentru informații auxiliare (bara laterală).
Apoi, să adăugăm un anumit conținut la design pentru a vedea cum arată:
Este dur, dar ingredientele cheie sunt acolo. Veți observa că intenția principală a site-ului este acum comunicată în câteva secunde ... primul rând de conținut își îndeplinește acum datoria de a "orienta" vizitatorul; Dacă navigația dvs. este aici, ei știu de asemenea unde pot merge.
Sub rândul de sus, folosim imagini și titluri "atrăgătoare" pentru a atrage atenția surferilor ... chiar dacă aceștia sunt interesați doar de scanarea conținutului, există șanse mari să găsească ceva interesant.
De asemenea, încercăm să valorificăm cel de-al doilea rând al "F" plasând aici un anunț sau o "chemare la acțiune" (# 4).
Acum, să acoperim layout-ul original F pentru a vedea cum se potrivește:
Nu-i rău? S-ar putea să ne dăm mai bine detaliile (stilul, formularea titlurilor etc.), dar în cea mai mare parte permitem comportamentul de scanare a tiparului F să dicteze designul.
Un lucru de observat aici este că înălțimea fiecăreia dintre cele două rânduri deasupra "F" poate fi variabilă. Unii designeri ar putea opta să le lase cât mai subțiți pentru a încuraja utilizatorii să înceapă scanarea imediat; alții ar putea alege să o facă o parte mult mai dominantă a designului.
Ce se întâmplă când vrei să spargi surferul din "modelul de scanare"? Cu siguranță, nu beneficiați de un utilizator plictisit dacă încep să scadă totul, deci să adăugăm un element "ciudat" în zona de scanare pentru a păstra utilizatorul interesat.
Această tehnică de "spargere a așteptărilor" layout-ului poate fi utilă atunci când aveți într-adevăr spații verticale lungi de conținut care se simt plictisitoare sau plictisitoare odată ce parcurgeți primele titluri de cuplu. Prin aruncarea privitorului în curbe, puteți păstra utilizatorii care se deplasează în jurul site-ului dvs., oferind elemente interesante vizuale 1000, 2000, chiar 3000 pixeli deasupra ori.
F-Layout funcționează deoarece permite surferilor web să scaneze conținutul în mod natural. Aspectul se simte confortabil, deoarece oamenii au citit de sus în jos, de la stânga la dreapta pentru întreaga lor viață. Implicațiile acestui model comportamental sunt de fapt o sabie cu două tăișuri:
Dacă suna totul ca și cum ați proiecta un site mai mult ca un agent de publicitate decât un designer, ați avea dreptate. Majoritatea site-urilor care se bazează în mare măsură pe F-Layout se bazează de asemenea pe reclame sau pe alte pasaje de apel la acțiune în bara laterală pentru a genera venituri sau alt fel de implicare a utilizatorilor. Acest lucru nu este neapărat un lucru rău (hei, sunt reclamele de acolo pe bara noastră laterală ?!), dar subliniază relația dintre conținut și bara laterală ... conținutul este rege, bara laterală este de obicei acolo pentru a vă implica în ceva care te va duce la un alt nivel.
Deci ce înseamnă asta pentru o bară laterală? O relație eficientă între coloana de conținut și coloana din bara laterală într-un design va utiliza bara laterală în unul din două moduri:
Deci, care a venit primul? F-Layout-ul a fost conceput ca răspuns la scanarea site-urilor din F-Pattern, sau surferii web au început să scaneze paginile din F-Pattern ca răspuns la atât de multe site-uri proiectate în acest fel ... Personalul meu este că este un puțin din ambele. Da, oamenii au citit întotdeauna de sus în jos, de la stânga la dreapta; dar prevalența aspectului site-ului cu 2 coloane încurajează vizitatorii site-ului să scaneze modul în care aceștia fac.
Simplul fapt este că modelul F este susținut de cercetare, deci dacă doriți sau nu ca aspectul dvs. să adere strâns la el, merită cel puțin să luați în considerare modul în care vizitatorii vor reacționa la site-ul dvs. dacă preferă să "F-scan" internetul.
Ok, deci înainte de a le lista de fapt, merită spus că doar despre orice setare a site-ului pe structura tradițională a blogurilor pe două coloane se utilizează un aspect "F-Pattern", deci este aproape prea previzibil să vă arătați mai multe site-uri care folosesc standardul F-model.
Ce noi sunteți să vedem în aceste exemple este modul în care fiecare dintre aceste modele excelează la manipularea fluxului de ochi F-model ... observați că cele mai eficiente modele sunt acelea care anticipează comportamentul de scanare a tiparului F și apoi îl folosesc în avantajul lor.
DesignSnack.com nu numai că vă spune despre ce sunt toate acestea în partea de sus a "F", ei te implică de fapt, înainte de a începe chiar de defilare. 
Site-ul LAtimes.com este unul dintre site-urile mele preferate de ziare. Veți dori să observați cât de greu ele "încalcă așteptările de aspect" odată ce începeți să derulați. 
Kickstarter oferă o declarație de misiune eficientă în partea de sus, dar se rupe de la mucegai prin prăbușirea bara laterală complet în favoarea unei bune bunătăți de scanare,. 
Fototuturile (sau oricare dintre site-urile din rețeaua Tuts +) se bazează puternic pe fluxul de ochi de tip F. Luați seama de bara laterală acolo. Este plictisitor? Nu ... fiecare widget bara laterală include un pic de design personalizat care îl păstrează interesant și relevant. Oh, și notați cât de ușor pot fi scanate titlurile ... uneori un model de design simplu și simplu este cea mai bună abordare. 
CollegeHumor ar putea fi ultimul loc unde te gândești la o lecție de design formal, dar aruncă o privire bună la prima pagină. Ei o pun pe THICK în partea superioară a porțiunii F ... atât de mult încât să poți numi acest aspect FFFFF. Motivația acestui lucru este simplă: dacă nu puteți să învingeți dorința unui utilizator de a vă deplasa rapid conținutul în căutarea unui lucru tantalizator, puteți să vă alăturați. 
GigaOm este un alt site care excelează la "ruperea așteptărilor de aspect". Pe măsură ce vizitați site-ul, parcurgeți în jos pentru a vedea cum furnizează conținut interesant până la subsol. 
Magazinul de produse SquareSpace arată că nu este nevoie să aveți bara laterală pe partea dreaptă ... de fapt, puteți utiliza faptul că utilizatorii vor gravita spre stema lui F plasând o sub-navigație acolo. 
Am salvat CreativeSessions pentru ultima dată pentru că fac ceva complet diferit. Ele folosesc în mod esențial partea de sus a lui F ca o teaser uriașă (observați că nu există branding sau mesaj sus acolo). Făcând acest lucru, vă încurajează să citiți cu adevărat ce este mai jos. Există neajunsuri care se bazează prea mult pe modelul "F" ca fundație de proiectare. Pentru unul, desenele care se lipesc prea mult de layout-ul F se pot simți plictisitoare și previzibile ... pentru a combate acest lucru, tu, ca designer, va trebui să aduci un anumit nivel de inovare la masă. Gadgeturile bara laterală bine proiectate, titlurile atrăgătoare și imaginile angajate sunt toate trucuri utile, dar probabil că veți dori să o faceți un pas mai departe.
Odată ce scufundați sub primele două rânduri ale "F", devine adesea o provocare pentru un designer pentru a păstra lucrurile interesante. Am descoperit că o mulțime de designeri vând clienților săi cele mai bune 600 de pixeli ale unui site ... asta este bine și bine (ceea ce vizitatorii văd mai întâi), dar lecțiile din structura F sunt de asemenea importante pentru păstrarea lucrurilor interesant pe măsură ce începeți să derulați în jos.
La fel ca o melodie care are o bătaie unică, ar putea să vă dau o durere de cap, o pagină poate deveni de multe ori plictisitoare și repetitivă dacă nu vă deranjează să aruncați un element interesant din când în când. Ruperea ritmului unui design prin limitarea elementelor repetitive este o tehnică crucială pe care veți dori să o proiectați în site-urile dvs. pentru a vă aduce munca la nivelul următor.
Asigurați-vă că ați verificat și postul "Z-Layout"!
Aveți propriile dvs. gânduri sau comentarii? Împarte-le jos!
Accentsconagua