Approcci progettuali ai siti web degli editori

Che cos'è un "sito web di un editore digitale?" È un sito Web che si concentra sulla pubblicazione di molti articoli su base giornaliera. È un livello superiore a un "blog". È fondamentalmente un sito di notizie o una piattaforma di pubblicazione virale come BuzzFeed.

C'è una differenza nell'approccio alla progettazione di un sito Web di questo tipo rispetto a un prodotto di vendita, attività commerciale, blog personale o qualsiasi altro tipo di sito Web. Il suo layout è spesso noto come lo stile "Magazine", che è anche una categoria abbastanza satura nei mercati a tema.

Cosa rende diverso un sito web di editori?

Esistono due differenze principali tra un sito web di un editore e uno più regolare.

Il primo ovvio è la quantità di contenuto. Ora, ovviamente, ci sono enormi siti Web, in particolare quelli di e-commerce come Amazon o eBay che molto probabilmente hanno molti più contenuti, ma quelle sono piattaforme che ottengono contenuti dagli utenti del sito. Gli editori hanno team editoriali che lavorano a tempo pieno per produrre contenuti in base a un programma. Proprio come fa un giornale.

L'altra grande differenza è la fonte di reddito. Un sito web aziendale come Coca Cola non genera entrate dal sito , ma proviene dai suoi prodotti. La maggior parte dei siti Web aziendali ha lo scopo di essere semplicemente una presenza digitale.

Sapendo questo, è probabilmente ovvio che il reddito del sito web di un editore proviene dal sito stesso. Come? Annunci! Che è più o meno il modo in cui Google o Facebook generano la maggior parte del loro reddito.

Gli annunci, decisamente, gestiscono il Web e sono la priorità principale di molti siti Web. Il loro contenuto è incentrato sul coinvolgere il maggior numero di lettori possibile in modo che possano vedere gli annunci sui loro layout.

Dal punto di vista del design, questa è la priorità principale dei siti web di editori e riviste.

Progettazione di siti web con molti contenuti

Diamo un'occhiata ad alcuni grandi editori come Variety:

La prima cosa che si vede è un grande annuncio in alto. Approfondiremo questo aspetto tra un secondo, prima ancora: il layout dei contenuti. Una grande intestazione con molti link: hamburger in alto, ricerca, invito all'azione e ancora più voci di menu. L'obiettivo è dare un facile accesso a tutte le categorie di contenuti. Ciò è in netto contrasto con molti siti aziendali che hanno meno di 10 pagine (escluse le pagine del blog).

Dopodiché, una grande scatola per l'articolo principale. Questa è una buona decisione di progettazione. Rende più facile per i tuoi visitatori decidere cosa fare. Se ci sono 10 elementi ugualmente importanti, lo sforzo mentale di sceglierne uno piuttosto che un altro potrebbe far rimbalzare alcuni utenti fuori dalla pagina. Con una chiara gerarchia visiva degli elementi importanti e meno importanti, un designer può far rimanere gli utenti più a lungo su una pagina web.

A destra - un altro annuncio e un widget "I più popolari", che è proprio quello che la maggior parte degli utenti vorrebbe vedere. Per adattarsi a così tanti contenuti, Variety ha deciso di trasformarlo in un'area scorrevole.

Questo è il tipo di layout che preferiresti per gli editori più grandi.

BuzzFeed è un altro esempio di layout progettato per funzionare con quantità maggiori di testo. Qui però il design è più giocoso con colori vivaci e forme che attirano l'attenzione (come i tre pulsanti nell'angolo in alto a destra).

C'è più "classifica" come l'1, 2, 3 sul Trend a destra, l'etichetta rossa brillante per le notizie "Ultime" e così via. Una delle principali tendenze in un design simile è quella di attirare l'attenzione dell'utente. Quell'attenzione deve essere ben diretta, tuttavia, poiché non la vorresti dividere tra due elementi ugualmente importanti.

Ecco un esempio dell'approccio sbagliato in cui tutto cerca di essere al top:

Siamo ben consapevoli che lo scopo è completamente diverso e il sito sopra potrebbe in effetti generare un buon profitto, ma illustra bene il principio del "tutto cerca di attirare la tua attenzione"

Editori digitali e pubblicità

Progettare intorno alla pubblicità è un altro argomento importante per gli editori. Considerando che è la principale fonte di reddito, è anche la massima priorità. Ci sono alcune cose che un designer dovrebbe considerare qui, prima delle quali ottenere feedback o buone informazioni dal team di AdOps che comprende bene i requisiti e la funzionalità di questi annunci.

Esempi di ciò sono le dimensioni degli annunci. Ci sono 300 × 250, 300 × 600, 728 × 90 e 300 × 50.

• Alcuni potrebbero rimanere su un lato dello schermo dove puoi scorrere oltre diversi punti
• Alcuni potrebbero rimanere nel loro angolino, altri rimanere sempre in cima alla pagina.
• Altri si presenterebbero a coppie di due 300 × 250 o uno 720x90px.

Come fai a sapere tutto questo e quali sono i requisiti?

Quindi sì, il primo passo sarebbe raccogliere tutte quelle informazioni. Un modo più semplice per vederlo è in termini di layout. Un singolo post può avere più layout a seconda degli obiettivi dell'editore. A volte ci sono meno annunci, a volte ce ne sono di più. A volte gli annunci cambiano dimensione per carichi diversi, altre volte rimangono costanti. Tutto può cambiare rapidamente anche se con l'emergere di nuove tendenze e regole. Spesso su base giornaliera!

Alcune delle cose importanti da tenere a mente sarebbero:

• Gli annunci con altezza potrebbero essere caricati. Ciò significa che il contenuto verrebbe spinto verso il basso e il design che è fatto per adattarsi a un determinato widget above the fold fallirebbe.
• Gli annunci potrebbero aver bisogno di sfondi, questo potrebbe essere uno sfondo grigio chiaro che circonda l'annuncio, che tocca gli angoli dello schermo.
• Gli annunci spesso necessitano di spaziatura attorno ad essi per evitare tocchi accidentali. 20-30 pixel è una buona distanza tra gli annunci.
• Vorresti aggiungere un'etichetta "Pubblicità" prima / dopo con l'obiettivo di attirare maggiormente i fornitori di annunci.
• Non dovrebbero esserci troppe pubblicità! Il punto debole per questo è ciò che un team di AdOps lavorerebbe per capire per un editore specifico, una pagina specifica e persino un traffico specifico (come Facebook, Snapchat, ecc.)

Prestazioni del sito web dell'editore

Uno dei principali fattori che contribuiscono alle cattive prestazioni sono le configurazioni con più di 8 annunci che tentano di caricare con tonnellate di altri script in giro. Perché questa è la preoccupazione di un designer quando è tutto nel codice? Gli sviluppatori non possono semplicemente ottimizzarlo? Ebbene sì, ma questo è quasi un lavoro a tempo pieno da solo, e il designer potrebbe dare una mano. Per capire tutto questo, devi prima capire un po 'di browser

fonte

I browser possono utilizzare la CPU o la GPU di una macchina a seconda del modo in cui un determinato elemento viene codificato da uno sviluppatore front-end. A volte, azioni come animazioni e interazioni al passaggio del mouse, stampa potrebbero utilizzare la CPU o la GPU. Se un'animazione, ad esempio, utilizza la CPU, è molto probabile che ci sia un ritardo, se è la GPU, è possibile ottenere prestazioni migliori. I requisiti del progettista potrebbero essere la differenza tra i due.

Ecco alcuni suggerimenti generali:

• Usa poche o nessuna ombra. Il rendering delle ombre è molto costoso, soprattutto su dispositivi mobili e laptop di fascia bassa.
• Non utilizzare filtri di sfondo o sfocature (o filtri) in quanto sono anche molto costosi.
• Mantieni le forme il più semplici possibile per ridurre il calcolo aggiuntivo.
• Non richiedere animazioni di elementi che influenzano il layout (altri elementi). Progettare intorno a questo il più possibile. Tutto ciò che si sovrappone o è un popup è una scelta migliore.
• Mantieni le immagini relativamente piccole. Ciò consentirebbe agli sviluppatori di caricare immagini di dimensioni più piccole che farebbero risparmiare peso sul sito.
• Riduci al minimo le animazioni in generale, soprattutto durante il caricamento del sito. Lo stesso vale per i turni di layout. Il primo caricamento è il tempo più intensivo della CPU per un sito Web quando viene applicato tutto JavaScript.

fonte

Priorità del design

La maggior parte del traffico sui siti dei publisher proviene da dispositivi mobili. Quindi il tempo più speso per lucidare tutti i dettagli dovrebbe andare lì. Anche sui dispositivi mobili è necessaria la maggior parte delle ottimizzazioni poiché la maggior parte dei dispositivi non sono ammiraglie di fascia alta ma smartphone da $ 200 a $ 300.

Sui dispositivi mobili, il tuo obiettivo è mantenere i contenuti leggibili durante la presentazione degli annunci in modo chiaro. Mantieni la distanza tra qualsiasi elemento cliccabile e annunci di grandi dimensioni per rimuovere eventuali clic accidentali sugli annunci. Se possibile, riduci eventuali animazioni e sovrapposizioni che potrebbero rendere il sito meno scattante.

Sommario

Gli editori si concentrano su molti contenuti e molti annunci. In generale, le pagine di destinazione e gli archivi hanno meno priorità rispetto alle singole visualizzazioni poiché il traffico spesso arriva direttamente agli articoli da altri annunci. In qualità di designer, il tuo obiettivo è trovare il modo più ottimale per pubblicare annunci, aggiungere le giuste spaziature e separarli bene dal contenuto principale per mantenere tutto leggibile e utilizzabile.

Riduci al minimo gli elementi dell'interfaccia utente complessi per migliorare le prestazioni di velocità e richiedere il minor numero di animazioni possibile. Per definire bene tutto, gli editori spesso devono lavorare con agenzie di sviluppo che hanno una buona esperienza con AdOps, seguono le ultime tendenze e gli stack tecnologici nel settore come DevriX.