Share
Progettare per la "piega" è stata a lungo una priorità per molti Web Designer, ma con così tanti dispositivi in grado di visualizzare il tuo sito web, come diavolo sai dove si trova? Dovremmo essere preoccupati? Questo articolo chiede quanto sia importante la "piega" in realtà, le variabili in gioco, le abitudini di navigazione che cambiano e cosa puoi fare al riguardo. La morte del piega è alle porte, finalmente!
La navigazione nel World Wide Web non è più un compito limitato ai computer desktop. La navigazione mobile sembra aumentare di giorno in giorno e molti altri dispositivi come i televisori pronti per Internet stanno diventando facilmente disponibili. Brandon l'ha menzionato per la prima volta nel suo post annuale di Webtrends, The State of Web Design Trends: 2011 Annual Edition? "The Death of the Fold", come lo chiamava, è finalmente su di noi.
Ma cosa significa veramente??
Perché lo schermo tradizionale? che la gente vede il web attraverso ha subito un'esplosione di varietà? non possiamo più aspettarci che i navigatori del web si trovino su qualcosa di simile a un monitor da 19 "con una risoluzione compresa tra 1024? 768 e 1280? 700. Gli schermi oggigiorno sono disponibili in tutte le forme e dimensioni, da iPhone (e telefoni più piccoli) a 60" televisori ad alta definizione. Non è solo la risoluzione che può variare selvaggiamente; lo stesso aspetto di uno schermo (anche sullo stesso dispositivo come l'iPhone) può cambiare con il movimento del polso. Certo, i web designer saranno sempre consigliati di mantenere i messaggi più importanti di un sito vicino alla cima, ma con così tanti nuovi modi per i navigatori del web di visualizzare il web, non c'è più un'altezza definita per cui il contenuto deve essere sopra.
Tuttavia, prima di anticipare noi stessi, diamo il via a questo articolo con un viaggio di ritorno alla vecchia scuola?
"L'area ideale per inserire introduzioni audaci, informazioni essenziali, immagini allettanti e elementi call to action è al di sopra dell'ovile?"
Se hai avuto una formazione in graphic design, probabilmente avrai familiarità con il termine 'Sopra la piega'. In caso contrario, prendiamo un breve momento per spiegare.
Il termine fu usato per la prima volta in riferimento ai media tradizionali, i giornali per la precisione. Il pensiero è che i giornali vengono spesso consegnati o visualizzati piegati e l'area "above the fold" sarà la prima a essere vista dal lettore ed è quindi una posizione importante e importante. I titoli accattivanti e le immagini impressionanti vengono spesso visualizzati per attirare l'attenzione del lettore.
La frase è stata naturalmente trasferita nel campo del Web Design quando è diventato popolare negli anni '90. È più o meno lo stesso concetto, tranne l'area Sopra la piega è invece l'area che l'utente può immediatamente vedere senza scorrere (non così orecchiabile, vero?). Questa area è l'area ideale per inserire introduzioni audaci, informazioni essenziali, immagini allettanti e elementi call to action. È anche lo spazio preferito per qualsiasi pubblicità.
L'area above the fold è la sezione superiore di un web design che l'utente può immediatamente vedere senza scorrere.
L'importanza dell'area above the fold sembra essere supportata dalla "regola dei cinque secondi" che è comunemente citata all'interno del Web Design; che dichiara che gli utenti giudicano un sito entro i primi cinque secondi di visita. L'esperto di usabilità Jakob Nielsen ha anche suggerito che gli utenti spendono fino all'80% del loro tempo visualizzando le informazioni above the fold.
L'importanza della "piega" nell'ultimo decennio non può essere eccessivamente enfatizzata nel suo contesto storico? In molti studi di progettazione e agenzie di marketing si sono svolti dibattiti molto dibattuti su dove, appunto, c'era la piega. Grandi quantità di denaro sono state spese per i dati di mercato per prevedere il posizionamento ottimale degli annunci, e interi progetti sono stati buttati fuori dalla finestra perché non hanno massimizzato l'uso dello spazio "above the fold". L'onnipotente, al culmine della sua importanza, era definita come una delle tre linee orizzontali a 570, 590 e 600 pixel.
Tutto sotto i 600 pixel era irrilevante, contenuto di secondo livello? non vale lo sforzo per un web designer dignitoso di occuparsi di.
Ora, a questo punto, alcuni di voi potrebbero pensare, o addirittura gridare (data la quantità di dibattito che questo argomento sembra causare) che la "piega" è irrilevante e qualsiasi discussione su di essa dovrebbe essere limitata ai libri di storia. L'idea che un web designer sia limitato a una piccola porzione nella parte superiore dello schermo è assurda. Ci piacerebbe credere che tutti gli utenti del web scorrano e che abbiamo la libertà di esprimerci e creare un design nello spazio che ci vuole. Alcuni sono persino diventati piuttosto creativi nel dimostrare che le persone sono disposte a scorrere.
Indubbiamente ci sono state molte discussioni tra un web designer e il loro cliente sull'importanza della "piega" e questo potrebbe aver contribuito alla sua cattiva reputazione. Un cliente, sopravvalutando l'importanza della piega, può richiedere tutto e il lavello della cucina per essere schiacciato e stipato in quello spazio relativamente piccolo e il web designer rimarrà frustrato dal fatto che non è in grado di dimostrare la propria abilità per la posizione, l'allineamento e l'uso sottile del bianco spazio.
La chiave di questo problema, come per molti altri aspetti del design, sta raggiungendo un equilibrio. Ovviamente, limitarsi a una piccola parte dello schermo potrebbe limitare la creatività e le opzioni di progettazione. D'altra parte, ignorare completamente l'idea della "piega" sarebbe un errore e ti perderebbe una tecnica di progettazione potenzialmente potente come vedremo in seguito.
Il sito Web ben realizzato per l'app Kaleidoscope è un eccellente esempio di progettazione con "la piega" in mente. Il grande titolo, un paragrafo introduttivo, un'immagine accattivante e elementi call to action sono tutti immediatamente visibili e disponibili per l'utente. Notare come le informazioni supplementari sotto il titolo "Ulteriori informazioni" rientrano sotto il punto limite. La "piega" è stata chiaramente considerata nel design di questo sito Web, tuttavia scorrere verso il basso rivelerà una grande quantità di informazioni e molti altri elementi di design più dettagliati. È evidente che i progettisti del sito Web si aspettano ancora che gli utenti scorrano.
Troverete modelli di design simili implementati su molti siti Web di grandi dimensioni. L'importanza di questa prima impressione è riconosciuta, tuttavia un'area molto più ampia è completamente utilizzata per raccontare una storia e comunicare le informazioni di cui hanno bisogno. L'area 'above the fold' è spesso utilizzata per guidare e guidare l'utente più in basso nella pagina e nelle aree che il progettista vuole che l'utente veda. È davvero un'abilità importante da avere, essere in grado di catturare l'attenzione di un utente, eppure tenerli intrigati abbastanza da rimanere sul sito e in realtà cercare nuove informazioni e contenuti.
Sarà sempre una seconda natura includere i messaggi chiave e il materiale di invito all'azione nella parte superiore del design di un sito? ma cercare dogmaticamente di spremere i contenuti above the fold non è più una strategia che dovrebbe incatenare i tuoi progetti.
Se visiti il sito Web di Kaleidoscope per te stesso, probabilmente ti verrà presentata una visione leggermente diversa. Potresti riuscire a vedere più o meno il sito Web - ed ecco il problema che si trova ad affrontare ogni web designer. Come puoi progettare per la piega se non sai dove si trova per un particolare visitatore? Esistono molti fattori diversi che si combinano per determinare la dimensione fisica dell'area 'above the fold'.
I web designer sono ben abituati a progettare con i browser in costante considerazione. Le molte stranezze e incoerenze ci hanno frustrato per anni e hanno anche un ruolo in questo enigma. Ogni singolo browser occuperà una proporzione diversa dello schermo a seconda delle dimensioni del browser U.I e di eventuali barre degli strumenti aggiuntive. La tendenza con i browser moderni sembra essere comunque positiva in quanto sembrano occupare meno spazio rispetto al passato. Gli sviluppatori di Google Chrome, Safari e Internet Explorer 9 hanno capito che c'è una migliore esperienza di navigazione quando c'è poco da distrarre dagli utenti dal sito stesso.
Oggi c'è anche una moltitudine di combinazioni di dimensioni e risoluzione dello schermo del monitor che risulta quasi impossibile per un design web "one-size fits all". Molti anni fa, è stato stabilito che 1024x768 era la risoluzione dello schermo più comune e questo sembra essere quello per cui la maggior parte dei designer ancora progetta. Le statistiche sulla risoluzione di WebDesigntuts dimostrano da sole la portata del problema per i progettisti.
Diamo una rapida occhiata alle statistiche sulla risoluzione del browser per il sito Webdesigntuts + per un rapido caso di studio:
"Non puoi garantire che stiano utilizzando uno schermo monitor tradizionale."
Il grafico mostra che esiste un'ampia varietà di risoluzioni attualmente in uso con una maggioranza di utilizzo distribuita su sei diverse dimensioni. Come puoi vedere la risoluzione dello schermo 1024x768 ora conta solo per una piccola percentuale, anche se questo potrebbe essere aumentato di recente a causa dell'IPad che decide di usare questa risoluzione.
Se non fosse sufficiente non avere un'idea di quale dimensione monitoresse un utente Web, ora non si può garantire che stiano utilizzando uno schermo monitor tradizionale. L'età della navigazione mobile è buona e sincera su di noi e ci sono molti dispositivi diversi attualmente in uso. Rivediamo le statistiche analitiche per Webdesigntuts:
Come puoi vedere ci sono molti diversi sistemi operativi usati e piattaforme come Android possono essere incorporate in vari dispositivi. La navigazione basata su tablet, che è esplosa con il rilascio di IPad, diventerà più popolare con il rilascio di molti tablet PC di dimensioni diverse. Anche i dispositivi mobili di tutti i tipi rappresentano una sfida unica per i web designer, in quanto possono essere utilizzati sia in modalità orizzontale che verticale: una decisione che cambierebbe enormemente la posizione della linea "piega". Molti siti Web stanno facendo lo sforzo di essere "ottimizzati" per dispositivi come l'Ipad.
Quindi con tutte queste variabili, com'è possibile sapere dove si trova la "piega"?
La verità è che non puoi. Con così tante variabili in gioco è quasi impossibile sapere esattamente dove sarà la linea di piega. Avanza rapidamente solo uno o due anni e probabilmente vedremo ancora più cambiamenti nell'ambiente dello schermo. Tutto ciò significa solo che il precedente consiglio di progettare entro il primo 600px non può più essere invocato in sicurezza. Sembrerebbe che lottare per la perfezione dei pixel ti lascerà solo frustrato.
Un approccio più ragionevole sarebbe quello di progettare pieghe generali, basate sul rapporto, che prenderebbero in considerazione sia la navigazione orizzontale che verticale?
Ciò comporterebbe la progettazione non solo per la piega tradizionale, ma anche a seconda piega più in basso nella pagina. Una tale piegatura non toglierebbe nulla a un design convenzionale, ma avrebbe un vantaggio in più per chi utilizza dispositivi mobili e tablet. Utilizzando un rapporto approssimativo piuttosto che fare affidamento su misurazioni fisse di pixel, mentre sarà sicuramente meno accurato, dovresti comunque essere relativamente sicuro.
Riteniamo che la chiave qui non sia concentrarsi troppo sulla "piega" stessa, ma piuttosto cercare di mantenere il tuo messaggio principale all'interno di una "zona sicura" mantenendo nel contempo un design di qualità generale. Idealmente dovresti testare i progetti sui dispositivi mobili, ma ci sono molti simulatori disponibili se ciò non è sempre possibile.
Le migliori strategie di progettazione possibili che si adattano a una vasta gamma di monitor saranno quelle che hanno un consolidato senso di gerarchia in tutto il progetto. Ciò significa che il messaggio principale di un sito dovrebbe essere evidente da qualsiasi "ridimensionamento" di quel sito - e informazioni e contenuti più dettagliati dovrebbero essere leggibili in base alla sua importanza nella pagina.
Anche altri principi di design come Tipografia, Teoria dei colori, Layout e Gestalt giocano un ruolo enorme in questo, quindi i web designer farebbero bene a perfezionare queste pratiche consolidate. Anzi, forse una delle grandi nuove opportunità che la "morte della piega tradizionale" offre ai designer è un ritorno ai principi fondamentali del design? tralasciare le nozioni rigide, dogmatiche e prive di senso del layout a favore delle teorie del design secolari.
"Nello studio, hanno scoperto che il 76% degli utenti scorreva e che una buona parte di essi scorreva fino in fondo, nonostante l'altezza dello schermo."
Le statistiche per il sito Webdesigntuts da sole sono utili da guardare (soprattutto perché abbiamo dati così dettagliati su di esso), ma certamente non rappresentano l'intero internet, giusto? Anche quando guardiamo le statistiche ufficiali del display del browser del sito ufficiale W3 Schools, una tendenza simile comincia a emergere.
Certamente, i dati di questi due siti non rappresentano la totalità del pubblico di navigazione in Internet? ma guardando la scritta sul muro, è facile determinare che questo non è solo un evento marginale, è un nuovo modello che sta emergendo. Combina questo con le vendite di nuovi dispositivi e la crescita dell'industria dei monitor, ed è una munizione solida come roccia per chi cerca di dissipare il mito della tradizionale piega.
Inoltre, sono stati condotti molti studi di ricerca che hanno ridimensionato l'importanza della piega, anche quando esisteva. Le conclusioni: anche quando usi una dimensione fissa del monitor (ad esempio: 1024 x 768), le persone che navigano sul Web non guardano solo sotto la piega? spesso trascorrono la maggior parte del loro tempo lì!
Abbiamo discusso molto in questo articolo, quindi cerchiamo di raccogliere alcuni punti chiave.
Il tradizionale concetto di progettazione per la "piega" sembra essere un po 'obsoleto quando si tratta di web design moderno. Abbiamo visto che una combinazione di variabili e un cambiamento nei metodi di navigazione di molte persone significa che una posizione fissa della linea 'fold' non può essere stabilita in modo sicuro. Anche gli utenti Web sono molto disposti a scorrere; specialmente con dispositivi multi-touch come IPad che rendono l'attività molto intuitiva.
Tuttavia, ciò non significa che la "piega" dovrebbe essere completamente ignorata. La "piega" può ancora essere un elemento efficace in qualsiasi progetto. Non c'è dubbio che le prime impressioni contano davvero nel web design e questo spazio può essere usato non solo per catturare il pubblico ma anche per attirarlo più in basso nella pagina. Prenota questa zona per le tue informazioni più importanti mentre rassicuri i tuoi clienti che i visitatori vedranno ancora quel paragrafo nella loro cronologia più in basso nella pagina.
Senza segni di rallentamento della navigazione da dispositivo mobile, può essere anche proposto un argomento per la progettazione di una seconda linea di "piega" per coloro che navigano utilizzando un dispositivo orientato al ritratto. Non dovrebbe essere dannoso per il tuo design in alcun modo e darà a chi usa tali dispositivi un ulteriore vantaggio.
Che cosa ne pensate? Cerchi ancora di progettare per la piega? È un caso che noi progettisti siamo già consapevoli di tali cambiamenti e sono i clienti che abbiamo bisogno di educare?
Accentsconagua