Progettazione per la nuova piega: Web Design Post Monitorism

() translation by (you can also view the original English article)

Progettazione per la 'piega' è da sempre una priorità per molti Web designer, ma con così tanti dispositivi in grado di visualizzare il tuo sito, come diavolo sai dov'è? Dovremmo essere preoccupati? Questo articolo chiede quanto sia importante la 'piega' in realtà è, le variabili in gioco, cambiando le abitudini di navigazione e cosa può fare su di esso. La morte della piega è su di noi, finalmente!

La morte della piega

Navigazione del World Wide Web non è più un'attività confinata ai computer desktop. Navigazione mobile sembra essere in aumento giorno per giorno e molti altri dispositivi come televisori Internet-ready sono sempre prontamente disponibili. Brandon è menzionata nel suo grande annuale webtrends post, The stato of Web Design Trends: edizione annuale 2011... "La morte del popolare" come lo chiamava lui, è finalmente su di noi.

Ma che cosa significa veramente?

Perché il tradizionale "screen" che la gente Mostra sul web attraverso ha subito un'esplosione di varietà... non possiamo aspettarci navigatori del web per essere su qualcosa di simile a un monitor 19 ″ con una risoluzione da qualche parte tra 1024 × 768 e 1280 × 700. Gli schermi oggi vengono in tutte le forme e dimensioni, da iPhone (e più piccoli telefoni) a 60 ″ HDTV. Non è solo ad alta risoluzione che possa variare selvaggiamente però; il rapporto di aspetto molto di uno schermo (anche sullo stesso dispositivo come l'iPhone) può cambiare con il movimento del polso. Certo, web designer sarà sempre consigliato di mantenere i messaggi più importanti di un sito nella parte superiore, ma con così tanti nuovi modi per navigatori web visualizzare il web, non esiste più un'altezza definita per il cui contenuto deve essere di sopra.

Prima di arrivare davanti a noi però, prendiamo a calci fuori questo articolo con un viaggio indietro alla vecchia scuola però...

Introduzione: La vecchia piega

"È la zona ideale per posto Grassetto introduzioni, informazioni essenziali, seducenti immagini e chiamata a elementi di azione sopra la piega..."

Se avete avuto alcuna formazione di progettazione grafica, sarà probabilmente familiarità con il termine 'above the fold'. Se così non fosse, prendiamo un breve momento di spiegare.

Il termine fu usato in riferimento alla media tradizionali, quotidiani per essere precisi. Il pensiero è che i quotidiani sono spesso consegnati o visualizzati ripiegati e l'area 'above the fold' sarà il primo che vede il lettore ed è quindi una posizione prominente e importante. Titoli accattivanti e sorprendenti immagini appaiono spesso per attirare l'attenzione del lettore.

La frase naturalmente è stata trasferita al campo del Web Design, quando è diventato popolare negli ultimi anni 90. È più o meno lo stesso concetto, tranne la zona sopra la piega è invece l'area che l'utente può vedere immediatamente senza necessità di scorrimento (non come accattivante, vero?). Questa zona è la zona ideale per posto Grassetto introduzioni, informazioni essenziali, immagini seducenti e chiamata a elementi di azione. È anche lo spazio comodo per qualsiasi pubblicità.

La zona sopra la piega è il lato superiore di un web design che l'utente può vedere immediatamente senza scorrere.

L'importanza della zona sopra la piega sembra essere supportata dalla 'cinque seconda regola' che è comunemente citato all'interno di Web Design; Gli utenti che stati esprimere un giudizio su un sito entro i primi cinque secondi di visita. Esperto di usabilità Jakob Nielsen ha anche suggerito che gli utenti trascorrono fino all'80% del loro tempo di visualizzazione delle informazioni sopra la piega.

L'importanza della "piega" nell'ultimo decennio non può essere eccessivamente enfatizzato nel suo contesto storico... Contestatissima dibattiti si sono svolti in molti studi di design e marketing agenzie su dove, appunto, la piega era. Grandi quantità di denaro sono stati spesi su dati di mercato per prevedere il posizionamento ottimo degli annunci, e disegni intero sono stati gettati fuori dalla finestra, perché essi non massimizzare l'uso dello spazio "above the fold". La piega onnipotente, al culmine della sua importanza, è stata definita come una delle tre linee orizzontali a 570, 590 a 600 pixel.

Era tutto sotto 600 pixel contenuto irrilevante, secondo livello... non vale la pena per un dignitoso web designer per preoccupazione essi stessi con.

Phooey.

Ora, a questo punto alcuni di voi può essere pensiero, o anche urlando (data la quantità di discussione di questo tema sembra causare) che la 'piega' è irrilevante e qualsiasi discussione di esso dovrebbe essere limitato ai libri di storia. La nozione che un web designer è trattenuto ad una piccola parte nella parte superiore dello schermo è assurda. Vorremmo credere che tutti gli utenti web scorrere e che abbiamo la libertà di esprimere noi stessi e creare un design in tanto spazio come ci vuole. Alcuni hanno anche ottenuto piuttosto creativi nel dimostrare che le persone sono disposte a scorrere.

Senza dubbio c'è stato molti una discussione fra un web designer e il loro cliente per quanto riguarda l'importanza della 'piega' e questo può aver contribuito per un po' cattiva reputazione che ha. Un client, sopravvalutare l'importanza della piega, può chiedere tutto e il lavello della cucina per essere spremuto e ammassati in quello spazio relativamente ristretto e il web designer sarà rimasto frustrato che non possono dimostrare la loro abilità per posizione, allineamento e sottile uso dello spazio bianco.

La chiave per questo problema, come con molti altri aspetti di progettazione, è raggiungere un equilibrio. Ovviamente, confinare se stessi per una piccola parte dello schermo potrebbe limitare le opzioni di creatività e design. D'altra parte, di ignorare completamente l'idea della 'piega' sarebbe un errore, e si sarebbe perdere su una tecnica di progettazione potenzialmente potente come vedremo più avanti.

La piega in azione

Il sito Web splendidamente artigianale per l'app di caleidoscopio è un ottimo esempio di progettazione con 'piega' in mente. Il grande titolo, un paragrafo introduttivo, un'immagine accattivante e chiamata a elementi di azione sono tutti immediatamente visibili e disponibili per l'utente. Si noti come complementare informazioni sotto la voce 'ulteriori informazioni' cade sotto il punto di cut-off. La 'piega' chiaramente è stata considerata nella progettazione di questo sito Web, ma scorrendo verso il basso si rivelerà una grande quantità di informazioni e molti elementi di design più dettagliati. È evidente che i progettisti del sito Web si aspettano ancora agli utenti di scorrere.

Troverete simili modelli di progettazione implementati attraverso molti grandi siti web. È riconosciuta l'importanza di quella prima impressione, ma un'area molto più grande viene utilizzata completamente per raccontare una storia e comunicare le informazioni di per che cui hanno bisogno. L'area 'above the fold' è spesso utilizzato per guidare e condurre l'utente ulteriormente verso il basso la pagina e le aree che il designer vuole all'utente di vedere. È infatti un'abilità importante di avere, per essere in grado di catturare l'attenzione di un utente, ancora tenerli incuriosito abbastanza per rimanere sul sito e in realtà cercare contenuti e nuove informazioni.

Sarà sempre seconda natura per includere i messaggi chiave e call-to-action materiale nella parte superiore di un design del sito... ma dogmaticamente cercando di spremere il contenuto sopra la piega non è più una strategia che dovrebbe catena giù i vostri disegni.

Se si visita il sito di caleidoscopio per te stesso, tuttavia, si apre più probabilmente sarà una visione un po' diversa. Si può essere in grado di vedere più o meno del sito – e qui è il problema che affronta ogni web designer. Come si può progettare per la piega se non sai dove è per qualsiasi visitatore particolare? Ci sono diversi fattori che concorrono a determinare la dimensione fisica della zona 'above the fold'.

Il problema della piega 'Nuovo'

Web designer sono ben utilizzati per progettare con i browser in costante considerazione. Le molte stranezze e incongruenze sono frustrati per anni e hanno anche un ruolo in questo enigma. Ogni singolo browser assumerà una diversa proporzione dello schermo a seconda delle dimensioni del browser u. i e barre degli strumenti aggiuntive. La tendenza con browser moderni sembrano essere positivi tuttavia come sembrano essere che occupano meno spazio rispetto al passato. Gli sviluppatori di Google Chrome, Safari e Internet Explorer 9 hanno capito che c'è un'esperienza di navigazione migliore quando c'è poco da distrarre gli utenti dal sito stesso.

Oggi, c'è anche tale una moltitudine di combinazioni risoluzione schermo dimensione e monitor che risulta quasi impossibile per un 'one-size fits' web design. Molti anni fa, è stato stabilito che era 1024 x 768 risoluzione dello schermo più comune e questo sembra essere ciò che maggior parte dei progettisti ancora disegno per. Le statistiche di risoluzione da WebDesigntuts solo dimostrano la scala del problema per i progettisti.

Diamo una rapida occhiata alle statistiche di risoluzione browser per il sito di Webdesigntuts per un rapido case study:

"Non è possibile garantire che stanno usando un monitor tradizionale a tutti."

Il grafico mostra che c'è una vasta gamma di risoluzioni attualmente in uso con una maggioranza di utilizzo si sono diffuse attraverso sei diversi formati. Come si può vedere la risoluzione dello schermo di 1024 x 768 ora conta solo per una piccola percentuale, anche se questo può ultimamente sono aumentate a causa IPad decidendo di utilizzare questa soluzione.

Se non era sufficiente che non avete davvero un'idea di quali dimensioni monitorare un sito web utente aveva, ora non è possibile garantire che stanno usando un monitor tradizionale a tutti. L'età della navigazione mobile è veramente bene e su di noi e ci sono diversi dispositivi attualmente in uso. Rivediamo le statistiche analitiche per Webdesigntuts:

Come potete vedere ci sono molti diversi sistemi operativi utilizzati, e piattaforme come Android possono essere incorporati in vari dispositivi. Tablet basato su navigazione, che esplose con l'uscita del IPad, solo diventerà più popolare con il rilascio di molte diverse dimensioni tablet-PC. Dispositivi mobili di ogni genere anche rappresentano una sfida unica per i web designer nel senso che può essere utilizzato in modalità orizzontale o verticale – una decisione che avrebbe cambiato notevolmente la posizione della linea 'piega'. Molti siti Web sono ora fare lo sforzo di essere ottimizzato per dispositivi come l'Ipad.

Strategie per la progettazione per la nuova piega

Quindi, con tutte queste variabili, come sulla terra è possibile sapere dove si trova la 'piega'?

La verità è che non è possibile. Con così tante variabili in gioco è quasi impossibile sapere esattamente dove sarà la linea di piegatura. Fast-forward solo uno o due anni e siamo propensi a vedere anche altre modifiche all'ambiente di schermo. Tutto ciò significa che il precedente Consiglio di progettare all'interno il primo 600px non può essere tranquillamente invocato piu '. Sembra che alla ricerca della perfezione pixel solo vi lascerà frustrato.

Un approccio più sensato sarebbe progettare per pieghe rapporto basata generale, che avrebbero preso sia orizzontale e verticale orientato navigando in considerazione...

Ciò comporterebbe la progettazione non solo per la piega tradizionale, ma anche una seconda piega ulteriormente verso il basso la pagina. Tale una piega prenderebbe nulla tolgono un disegno convenzionale, ma avrebbe un vantaggio per coloro che utilizzano dispositivi mobili e tablet PC. Utilizzando un rapporto approssimativo, anziché fare affidamento più misurazioni pixel fissi, mentre sarà certamente meno accurata, che si dovrebbe comunque essere relativamente sicuro.

Crediamo che la chiave qui è di non concentrarsi troppo su 'piega' stesso, ma piuttosto tentare di mantenere il tuo messaggio di core all'interno di una "zona sicura" pur mantenendo un design di qualità complessivo. Idealmente si dovrebbero testare disegni sui dispositivi mobili, ma ci sono molti simulatori disponibili se che non è sempre possibile.

Le migliori strategie possibili design che si adattano ad una vasta gamma di monitor saranno quelli che hanno un senso stabilito della gerarchia attraverso l'intero disegno. Ciò significa che il messaggio fondamentale di un sito dovrebbe essere evidente da qualsiasi "ridimensionamento" di quel sito - e più dettagliate informazioni e il contenuto deve essere leggibile in ordine di importanza di esso nella pagina.

Altri principi di progettazione come tipografia, teoria dei colori, Layout e Gestalt che tutti giocano un ruolo enorme in questo pure, così web designer avrebbe fatto bene per se stessi lucidare su queste pratiche stabilite. Anzi, forse uno dei grandi opportunità nuove che la "morte della piega tradizionale" offre progettisti è un ritorno al nucleo principi di progettazione... lasciando dietro di sé nozioni rigide, dogmatiche e privo di senso del layout in favore di teorie di progettazione secolare.

L'immagine più grande

"... Nello studio, hanno trovato che il 76% degli utenti di scorrere e che una buona parte di essi scorre fino alla parte inferiore, nonostante l'altezza dello schermo. "

Le statistiche per il sito di Webdesigntuts da solo sono utile guardare (soprattutto perché abbiamo tali dati dettagliati su di esso), ma certamente non rappresenta l'intera internet, destra? Anche quando guardiamo le statistiche di visualizzazione del browser ufficiale dal sito ufficiale W3 Schools, una simile tendenza comincia ad emergere.

Certamente, i dati da solo questi due siti non rappresentano la totalità del pubblico navigazione internet... ma guardando la scritta sul muro, è facile da determinare che questo non è solo un avvenimento di frangia, è un modello nuovo che sta emergendo. Combinate questo con le vendite di nuovi dispositivi e la crescita del settore monitor e la roccia solida munizioni per i chi cerca di sfatare il mito della piega tradizionale.

Inoltre, sono stati condotti molti studi di ricerca che sfatare l'importanza della piega, anche quando essa esisteva. CONCLUSIONI: anche quando si utilizza una dimensione di schermo fisso (cioè: 1024 x 768), persone che navigano il web non solo uno sguardo sotto la piega... spesso trascorrono la maggior parte del loro tempo lì!

Conclusione

Abbiamo discusso molto in questo articolo cerchiamo quindi arrotondare alcuni punti chiave.

Il concetto tradizionale di progettazione per la 'piega' sembra essere un po' datato, 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 'piega' in modo sicuro non può essere stabilita. Gli utenti Web sono anche molto molto preparati a scorrere; soprattutto con dispositivi multi-touch come l'IPad che rendono il compito molto intuitivo.

Tuttavia ciò non significa che la 'piega' dovrebbe essere ignorata completamente. La 'piega' può ancora essere un elemento efficace in qualsiasi disegno. Può esserci alcun dubbio che le prime impressioni contano infatti nel web design e questo spazio può essere utilizzato non solo cattura il pubblico ma anche di attirarli ulteriormente verso il basso la pagina. Riserva di questa zona per le informazioni più essenziali durante la rassicurante ai vostri clienti che i visitatori vedranno ancora che il paragrafo sulla loro storia più in basso la pagina.

Senza segni quello navigazione mobile sta rallentando, un argomento può essere fatto anche per la progettazione per un secondo 'piega' linea per quelli navigazione utilizzando un dispositivo di orientamento verticale. Non dovrebbe essere dannoso per il vostro disegno in qualche modo e coloro che utilizzano tali dispositivi darà solo un ulteriore bonus.

Cosa ne pensate ragazzi? Cerca ancora di progettare per la piega? È un caso che noi progettisti sono già a conoscenza di tali cambiamenti ed è il client che abbiamo bisogno di educare?