Proiectarea pentru noul Fold Web Design Post Monitorism

Proiectarea pentru "fold" a fost mult timp o prioritate pentru mulți Web Designeri, dar cu atât de multe dispozitive capabile să afișeze site-ul dvs., cât de pe pământ știți unde este? Ar trebui să fim îngrijorați? Acest articol întreabă cât de important este de fapt "foldul", variabilele la joc, schimbarea obiceiurilor de navigare și ce poți să faci. Moartea dansului este peste noi, în sfârșit!

Moartea dansului

Navigarea pe World Wide Web nu mai este o sarcină limitată la computerele desktop. Navigarea pe mobil pare să fie în creștere zi de zi și multe alte dispozitive, cum ar fi televizoarele pregătite pe Internet devin disponibile imediat. Brandon a menționat-o pentru prima oară în marele său post webtrends anual, "Trendul de stat al designului web: Ediția anuală 2011"? "Moartea dansului" așa cum a numit-o, este în sfârșit pe noi.

Dar ce înseamnă cu adevărat asta?

Deoarece ecranul tradițional? că oamenii vizualizează pe web prin care a suferit o explozie de varietate? nu ne putem aștepta ca surferii web să se afle pe ceva aproape de un monitor de 19 ", cu o rezoluție undeva între 1024 - 768 și 1280 - 700. Ecranele de astăzi vin în toate formele și dimensiunile, de la iPhone (și telefoane mai mici) la 60" HDTV-uri. Nu este doar o rezoluție care poate varia în mod sălbatic; chiar raportul de aspect al unui ecran (chiar pe același dispozitiv ca iPhone) se poate schimba odată cu mișcarea încheieturii mâinii. Desigur, designerii de web vor fi întotdeauna sfătuiți să păstreze cele mai importante mesaje ale unui site aproape de partea de sus, dar cu atât de multe modalități noi pentru web-surferi pentru a vizualiza web-ul, nu mai există o înălțime definită pentru locul în care trebuie să fie deasupra conținutului.

Înainte de a ne da înainte de noi insine, totuși, să începem acest articol cu ​​o călătorie înapoi la vechea școală, totuși?

Introducere: The Old Fold

"Zona ideală de a introduce introduceri îndrăznețe, informații esențiale, imagini îndrăgite și elemente de apel la acțiune sunt deasupra ori?"

Dacă ați avut o educație de design grafic, probabil veți fi familiarizat cu termenul "deasupra ori“. Dacă nu, să facem un scurt moment pentru a ne explica.

Termenul a fost folosit pentru prima oară în ceea ce privește mass-media tradițională, ziarele fiind precise. Gândirea este că ziarele sunt adesea livrate sau afișate pliate, iar zona "deasupra ori" va fi prima pe care cititorul o vede și, prin urmare, este o locație proeminentă și importantă. Capturile atrăgătoare și imaginile izbitoare sunt adesea afișate pentru a atrage atenția cititorului.

Sintagma a fost transferată în mod natural în domeniul Web Design, când a devenit popular în ultimii 90. Este mai mult sau mai puțin același concept, cu excepția zonei deasupra ori este în schimb zona pe care utilizatorul o poate vedea imediat fără derulare (nu la fel de atrăgătoare, nu?). Această zonă este zona ideală pentru a introduce introduceri îndrăznețe, informații esențiale, imaginație atrăgătoare și elemente de apel la acțiune. Este, de asemenea, spațiul preferat pentru orice reclame.

Zona de deasupra ori este partea superioară a unui design web pe care utilizatorul o poate vedea imediat fără derulare.

Importanța zonei de deasupra ori pare a fi susținută de "regula de cinci secunde" care este frecvent citată în Web Design; care afirmă că utilizatorii judecă un site în primele cinci secunde de vizitare. Expertul în utilizare Jakob Nielsen a sugerat, de asemenea, că utilizatorii cheltuiesc până la 80% din timpul lor de vizionare a informațiilor de mai sus.


Cele trei linii tradiționale de pliere la 570, 590 și 600 de pixeli, arătate suprapuse pe site-ul Webdesigntuts + (redus pentru a se potrivi postului).

Importanța "falimentului" din ultimul deceniu nu poate fi accentuată prea mult în contextul său istoric? Discuții foarte dezbătute au avut loc în numeroase studiouri de design și agenții de marketing despre unde, exact, a fost. Sume mari de bani au fost cheltuite pe baza datelor de pe piață pentru a prezice plasarea optimă a anunțurilor, iar modelele au fost aruncate pe fereastră, deoarece nu au reușit să maximizeze utilizarea spațiului "deasupra ori". Pliantul atotputernic, la înălțimea importanței sale, a fost definit ca una dintre cele trei linii orizontale la 570, 590 și 600 de pixeli.

Totul sub 600 de pixeli era conținut irelevant, de nivel secundar? nu merita efortul pentru un web designer demn de a se preocupa.

drace.

Acum, în acest moment, unii dintre voi ar putea să gândească sau chiar să strige (având în vedere volumul dezbaterii pe care acest subiect pare să o cauzeze) că "foldul" este irelevant și orice discuție despre el ar trebui să se limiteze la cărțile de istorie. Ideea că un designer de web este restrânsă la o mică porțiune în partea superioară a ecranului este absurdă. Am dori să credem că toți utilizatorii web navighează și că avem libertatea de a ne exprima și de a crea un design în același spațiu cât este necesar. Unii au ajuns destul de creativi în a demonstra că oamenii sunt dispuși să parcurgă.

Fără îndoială, au existat multe argumente între un designer de web și clientul lor cu privire la importanța "ori" și acest lucru ar fi putut contribui la reputația oarecum rea. Un client care supraestimează importanța fold-ului poate cere ca totul și chiuveta de bucătărie să fie stoarse și înghesuiți în spațiul relativ mic, iar designerul web va fi lăsat frustrat că nu-și poate demonstra abilitățile pentru poziția, alinierea și utilizarea subtilă a albului spaţiu.

Cheia acestei chestiuni, ca și în multe alte aspecte de proiectare, este realizarea unui echilibru. Evident, limitarea dvs. la o mică parte a ecranului ar limita creativitatea și opțiunile de design. Pe de altă parte, ignorarea în întregime a ideii de "fold" ar fi o greșeală și veți pierde o tehnică de proiectare potențial puternică după cum vom vedea mai jos.

Fold în acțiune

Site-ul frumos artizanal pentru aplicația Kaleidoscope este un exemplu excelent de proiectare cu gândul "îndoit". Titlul mare, un paragraf introductiv, o imagine captivantă și elementele de apel la acțiune sunt toate vizibile instantaneu și disponibile pentru utilizator. Observați cum informațiile suplimentare de la rubrica "Aflați mai multe" se încadrează sub punctul de decupare. "Foldul" a fost în mod clar luat în considerare în proiectarea acestui site web, dar derularea în jos va dezvălui o cantitate mare de informații și multe elemente de design mai detaliate. Este evident că designerii site-ului încă așteaptă ca utilizatorii să navigheze.

Veți găsi modele de design similare implementate în multe site-uri web mari. Importanța acelei prime impresii este recunoscută, totuși o zonă mult mai largă este utilizată pe deplin pentru a spune o poveste și pentru a comunica informațiile de care au nevoie. Zona "deasupra ori" este adesea folosită pentru a conduce și a îndruma utilizatorul mai departe în jos pe pagină și la zonele pe care designerul le dorește să le vadă. Este într-adevăr o abilitate importantă de a avea, pentru a putea atrage atenția unui utilizator, totuși să-i păstrați suficient de entuziasmați pentru a rămâne pe site și de a căuta de fapt noi informații și conținut.

Întotdeauna va fi a doua natură includerea mesajelor-cheie și a materialelor de chemare la acțiune în partea de sus a unui design al site-ului? dar încercarea dogmatică de a stoarce conținutul de deasupra ori nu mai este o strategie care ar trebui să lanseze desenele tale.

Dacă vizitați site-ul Kaleidoscope pentru dvs., cu toate acestea, va fi mai mult decât probabil va fi prezentat o viziune oarecum diferită. Este posibil să puteți vedea mai mult sau mai puțin din site-ul web - și aici este problema cu care se confruntă fiecare designer web. Cum puteți proiecta pentru fold dacă nu știți unde este pentru un anumit vizitator? Există mulți factori diferiți care se combină pentru a determina dimensiunea fizică a zonei "deasupra ori".

Problema de "New" Fold

Designerii de Web sunt bine folosiți la proiectarea cu browsere în mod constant. Numeroasele ciudățenii și neconcordanțele ne-au frustrat de ani de zile și, de asemenea, joacă un rol în acest joc. Fiecare browser individual va ocupa o proporție diferită a ecranului, în funcție de mărimea browserului U.I și a oricăror bare de instrumente suplimentare. Tendința cu browserele moderne pare a fi pozitivă, însă, deoarece pare să ocupă mai puțin spațiu decât înainte. Dezvoltatorii Google, Chrome, Safari și Internet Explorer 9 și-au dat seama că există o experiență mai bună de navigare atunci când nu există prea multe pentru a distrage utilizatorii de pe site-ul în sine.

Astăzi, există, de asemenea, o multitudine de combinații de dimensiuni ale monitorului și de rezoluție a ecranului, care se dovedesc a fi aproape imposibile pentru un design web de tip "one size fits all". Cu mulți ani în urmă, sa stabilit că 1024x768 a fost cea mai comună rezoluție a ecranului și acest lucru pare să fie ceea ce majoritatea designerilor încă proiectează. Statisticile de rezoluție de la WebDesigntuts în sine demonstrează amploarea problemei pentru designeri.

Să analizăm rapid statisticile privind rezoluția browserului pentru site-ul Webdesigntuts + pentru un studiu de caz rapid:


Statisticile de rezoluție pentru Webdesigntuts + dezvăluie un spectru mult mai larg de rezoluții decât oricare altă linie de pliere ar putea să o reprezinte vreodată.

"Nu puteți garanta că ei folosesc deloc un ecran de monitorizare tradițional".

Graficul arată că există o mare varietate de rezoluții utilizate în prezent, cu o majoritate de utilizare răspândită în șase dimensiuni diferite. După cum puteți vedea rezoluția ecranului de 1024x768 acum contează doar pentru un procent mic, deși acest lucru s-ar putea să fi crescut recent datorită deciziei IPad de a utiliza această rezoluție.

Dacă nu a fost de ajuns că nu aveți cu adevărat o idee despre ce dimensiune a monitorizat un utilizator web, acum nu puteți garanta că ei folosesc un ecran tradițional de monitorizare. Vârsta navigării pe mobil este binevenită și există multe dispozitive diferite utilizate în prezent. Să revizuim statisticile analiști pentru Webdesigntuts:

După cum puteți vedea, există multe sisteme de operare diferite și platforme precum Android pot fi încorporate în diverse dispozitive. Navigarea pe bază de tablete, care a explodat odată cu lansarea iPad-ului, va deveni mai populară numai cu lansarea multor computere comprimate de dimensiuni diferite. Dispozitivele mobile de tot felul reprezintă, de asemenea, o provocare unică pentru designerii de web, deoarece pot fi utilizați fie în modul peisaj, fie în modul portret - o decizie care ar schimba foarte mult poziția liniei "fold". Multe site-uri web fac acum efortul de a fi "optimizate" pentru dispozitive precum Ipad.

Strategii pentru proiectarea noului model

Deci, cu toate aceste variabile, cum este posibil pe pământ să știm unde este "foldul"?

Adevărul este că nu poți. Cu atât de multe variabile în joc este aproape imposibil să știți exact unde va fi linia de pliere. Derulați înainte cu doar unul sau doi ani și este posibil să vedem și mai multe modificări în mediul ecranului. Toate acestea înseamnă că sfatul anterior de a proiecta în primele 600 de pixeli nu mai poate fi întemeiat în siguranță. Se pare că lupta pentru perfecțiunea pixelilor vă va lăsa doar frustrat.


Distribuția dispozitivelor mobile pentru cititori pe Webdesigntuts.

O abordare mai sensibilă ar fi proiectarea pentru pliuri generale, bazate pe rapoarte, care ar lua în considerare atât peisajul, cât și orientarea portretului?

Acest lucru ar implica proiectarea nu numai pentru foldul tradițional, ci și pentru a în al doilea rând în jos în jos. O astfel de pliu nu ar lua nimic de la un design convențional, dar ar avea un bonus suplimentar pentru cei care folosesc dispozitive mobile și computere comprimate. Folosind un raport aproximativ, mai degrabă decât bazându-te pe măsurătorile fixe ale pixelilor, în timp ce va fi cu siguranță mai puțin exactă, ar trebui să fiți în continuare relativ sigur.

Credem că cheia aici nu este să vă concentrați prea mult pe "fold" în sine, ci mai degrabă să încercați să păstrați mesajul dvs. de bază într-o "zonă sigură", menținând în același timp un design de calitate general. În mod ideal, ar trebui să testați modelele pe dispozitivele mobile, dar există multe simulatoare disponibile dacă acest lucru nu este întotdeauna posibil.

Cele mai bune strategii de proiectare posibile, care se adaptează la o gamă largă de monitoare, vor fi cele care au un sentiment de ierarhie stabilit pe întregul design. Acest lucru înseamnă că mesajul central al unui site ar trebui să fie vizibil de la aproape orice "scalare" a acelui site - iar informațiile și conținutul mai detaliat ar trebui citite în ordinea importanței pe care o are pagina.

Alte principii de design precum Tipografia, Teoria culorilor, Layout-ul și Gestalt joacă un rol foarte important și în acest domeniu, astfel încât designerii web ar face bine pentru ei înșiși să se folosească de aceste practici stabilite. Într-adevăr, poate una dintre marile noi oportunități pe care le oferă designerilor "moartea folatului tradițional" este revenirea la principiile de bază ale designului? lăsând în urmă noțiuni rigide, dogmatice și nonsensice de aspect în favoarea teoriilor vechi de design.

  • Citiți mai multe despre Înțelegerea ierarhiei vizuale în Web Design aici.
  • Vizualizați întreaga noastră Bibliotecă de teorii de design aici.

Imaginea cea mare


Datele de pe site-ul școlilor W3.

"În studiu, ei au descoperit că 76% dintre utilizatori s-au derulat și că o bună parte dintre ei s-au deplasat până la capăt, în ciuda înălțimii ecranului".

Statisticile pentru site-ul Webdesigntuts sunt utile pentru a le analiza (în principal pentru că avem date atât de detaliate despre acestea), dar cu siguranță nu reprezintă întregul internet, nu-i așa? Chiar și atunci când ne uităm la statisticile oficiale de afișare a browserului de pe site-ul oficial W3 Schools, o tendință similară începe să apară.

Cu siguranță, datele de pe aceste două site-uri nu reprezintă întregul public de navigare pe Internet? dar uitandu-se la scrisul de pe perete, este usor sa determinati ca aceasta nu este doar o aparenta, este un nou model care iese in evidenta. Combinați acest lucru cu vânzările de noi dispozitive și cu creșterea industriei monitorului și este o muniție solidă pentru oricine dorește să risipească mitul tradiționalului.

Mai mult, au fost realizate multe studii de cercetare care dezvăluie importanța pliului, chiar și atunci când a existat. Concluziile: chiar și atunci când utilizați o dimensiune fixă ​​a monitorului (adică: 1024 x 768), oamenii care navighează pe web nu numai că privesc sub fold? adesea își petrec cea mai mare parte a timpului acolo!

Concluzie

Am discutat foarte mult în acest articol, așa că permiteți-ne să rotunjim câteva puncte cheie.

Conceptul tradițional de proiectare pentru "fold" pare a fi oarecum depășit când vine vorba de designul web modern. Am văzut că o combinație de variabile și o schimbare în metodele de navigare a multor persoane înseamnă că o poziție fixă ​​a liniei "ori" nu poate fi stabilită în siguranță. Utilizatorii Web sunt, de asemenea, foarte pregătiți să deruleze; în special cu dispozitive multi-touch, cum ar fi IPad-ul care face sarcina foarte intuitivă.

Cu toate acestea, nu înseamnă că "foldul" ar trebui să fie ignorat complet. "Foldul" poate fi încă un element eficient în orice proiect. Nu există nici o îndoială că primele impresii într-adevăr contează în designul web și acest spațiu poate fi folosit nu doar pentru a vă capta publicul, ci și pentru a-i atrage mai departe pe pagină. Rezervați această zonă pentru informațiile cele mai esențiale, asigurându-vă clienților că vizitatorii vor vedea în continuare acel paragraf din istoricul lor în continuare în jos.

Cu nici un semn că încetinirea navigării pe dispozitive mobile, se poate face și un argument pentru proiectarea unei linii "fold" secundare pentru cei care navighează folosind un dispozitiv orientat spre portret. Acesta nu ar trebui să fie în detrimentul design-ului dvs. în nici un fel și va oferi doar celor care folosesc astfel de dispozitive un bonus suplimentar.

voi ce credeți? Încercați încă să proiectați pentru fold? Este un caz în care noi, designerii, suntem deja conștienți de astfel de schimbări și este vorba de clienții pe care trebuie să le educăm?