Best practice per la progettazione di un sito Web di notizie sociali
Come ricevi le tue notizie quotidiane in questi giorni? Beh ... potresti visitare i tuoi siti e blog preferiti, ma questo è inefficiente dal momento che quei blog potrebbero non avere aggiornamenti. Forse ti iscrivi a loro usando RSS , che ti fornisce tutti i nuovi articoli direttamente, ma in questo caso dovrai ordinare tutte le novità per trovare ciò che ti interessa. Un'altra opzione oggi sarebbe visitare un sito di notizie sociali .
I siti di notizie sociali sono aggregatori di link, il che significa che la loro funzione principale è quella di raccogliere e condividere link interessanti. Questo può essere fatto tramite l'invio degli utenti, o può essere fatto automaticamente dal sistema. L'aspetto di aggregazione è solo una parte di esso anche perché questi siti ordinano anche i collegamenti. Di nuovo, questo può essere fatto attraverso il voto dell'utente o qualche algoritmo meccanico (sebbene in questo caso, possiamo davvero chiamarlo un sito di notizie "social"?). Il risultato finale è lo stesso comunque: i link più interessanti salgono in alto . Questa particolare caratteristica rende i siti di social news un'ottima alternativa agli RSS.
In questo articolo mostrerò alcuni dei principali siti di notizie sociali attuali, identificherò le tendenze e i modelli nei loro progetti e suggerirò alcune best practice da seguire durante la progettazione di tali siti. Iniziamo guardando quattro famosi siti di social news e vediamo come si confrontano i loro progetti.
Digg
Digg è il sito di notizie sociali più popolare e presenta un design utilizzabile che viene spesso adattato da molti dei suoi concorrenti. Digg usa un layout a due colonne : un elenco di storie a sinistra e altre cose a destra, come la casella dei 10 piani più importanti. Nella parte superiore, Digg mostra un elenco di categorie di storie e proprio sotto di esse i controlli di ordinamento. Quindi un utente può selezionare una categoria, diciamo ... "Tecnologia", e poi ordinarla con "In arrivo" per vedere tutte le ultime presentazioni.
Elica
Elica è un buon esempio di un sito che segue il layout Digg abbastanza da vicino. Si tratta di un layout a due colonne con un elenco di storie a sinistra e contenuti secondari a destra , come i tweet più recenti su Propeller o un elenco delle storie più commentate.
A differenza di Digg, Propeller utilizza separatori di linee orizzontali tra ciascuna delle storie, oltre a uno sfondo zebrato per rendere più semplice la scansione della lista. Questo può aiutare, anche se devo notare che lo zebra striping è usato tradizionalmente per facilitare la lettura su più tabelle di colonne, specialmente quelle con molte colonne. Questo perché vuoi leggere un pezzo di dati in una colonna che è molto lontana dall'etichetta originale sulla sinistra e usare la striscia zebra come guida ti aiuta a muovere l'occhio senza perdere traccia della riga . Nel contesto di Propeller, che ha essenzialmente una sola colonna di dati, l'effetto della striscia di zebra è discutibile.
Reddit è un esempio di design diverso da quello di Digg. Reddit si concentra molto sui contenuti, in particolare sui titoli. L'attenzione è così forte che tutto a parte i titoli è ridotto al minimo e si allontana per lasciare che le storie prendano il posto di guida. Questo design minimalista consente un consumo di informazioni molto veloce in quanto il visitatore può scansionare rapidamente molti titoli per trovare una storia interessante per loro. Poiché Reddit non ha campi descrittivi, ogni storia occupa meno spazio, quindi sullo schermo possono essere visualizzate più storie .
Reddit ha anche un elemento unico in cima alla prima pagina: una storia a venire a caso. Come su altri siti di social news, le ultime storie di Reddit sono tenute nella sezione "imminente". Poiché questa sezione ottiene meno traffico rispetto alla prima pagina, alcune storie interessanti potrebbero andare perse. Per rimediare a questo, Reddit mostra storie imminenti casuali in prima pagina per dare loro un breve momento di esposizione che potrebbe potenzialmente aiutare a spingerli verso l'alto.
Newsvine
Newsvine adotta un approccio diverso nel suo design. A differenza di altri siti di notizie sociali che sembrano un elenco di titoli, Newsvine utilizza l' aspetto rivista / giornale . Le storie sono accompagnate da una grande foto e descrizione e in alcuni casi il contenuto della storia può anche essere trovato sulla sua pagina dei dettagli / commenti.
Un elemento interessante di Newsvine è la heatmap di impatto:
Il grafico mostra due strisce: le storie più votate e le storie più discusse. Ciascuno mostra una serie di blocchi, tutti di diversi colori e dimensioni. Blocchi più grandi significa che ci sono più commenti su di loro o più voti, a seconda del grafico in cui si trovano. Il colore indica l'età della storia: il verde è fresco e il rosso è vecchio. Questa visualizzazione consente un modo unico per esplorare il contenuto su Newsvine .
Ora diamo un'occhiata ad alcuni degli elementi di interfaccia comuni presenti nei siti Web di notizie sociali:
Caselle di voto
Tutti i siti di notizie sociali hanno un metodo di voto sugli articoli, ad eccezione dei siti che utilizzano algoritmi di ordinamento automatico per calcolare i ranghi. Questo rende l'area di voto molto importante. Vuoi che resti abbastanza per garantire che le persone non lo perdano , ma allo stesso tempo devi farlo sbiadire abbastanza bene nel design dell'interfaccia per assicurarti che non distragga durante la scansione di elenchi di titoli .
Ecco alcuni esempi di caselle di voto dei siti di notizie popolari:
Ogni casella è composta da un massimo di quattro elementi: il grado di sottomissione, la somma dei voti, un link per votare la storia e un link per votare la storia . La maggior parte dei siti non mostra il rango e mostra solo la somma dei punteggi, ovvero i voti positivi e negativi sommati. Parlando di voti, la maggior parte dei siti di notizie sociali hanno un modo di votare una storia in più o in su, anche se alcuni scelgono di avere solo il pulsante "su". Nei casi in cui viene mostrato solo il pulsante su, un link per "seppellire" (o giù per votare) una storia viene solitamente fornito altrove.
Dettagli della storia
Ogni storia ha più di un titolo per accompagnarla. Le storie generalmente mostrano la loro data, l'utente che le ha pubblicate, una breve descrizione, un link alla sezione dei commenti e forse anche un'immagine.
Ecco alcuni esempi di aree dei dettagli di invio dei siti di notizie popolari:
La casella di voto si trova spesso sulla sinistra. Ciò gli consente di rimanere in una posizione coerente per ogni storia. Il link dei commenti, così come ogni altro extra come "condividi questa storia" sono posti sotto la descrizione (se presente) o il titolo. Rendendo il testo dei dettagli attorno al titolo grigio, i dettagli svaniscono e si concentrano sui titoli , rendendo così la scansione dell'elenco delle storie molto più facile in quanto i nostri occhi possono saltare rapidamente da uno all'altro.
La maggior parte dei siti di notizie sociali mostra il tempo come relativo - ad es. 10 ore fa. Questo ha senso perché le persone vogliono vedere quanto è fresca una storia e non sono particolarmente interessate alla data e all'ora esatte in cui è stata pubblicata.
Noterai inoltre che alcuni siti visualizzano il dominio in cui il link di invio conduce a lato del titolo, solitamente dopo di esso tra parentesi. Questo è utile perché consente ai visitatori di giudicare quale tipo di contenuto dovrebbero aspettarsi . Ad esempio, se vedono "youtube.com" come fonte, sapranno che è un video. Fonti di spicco come 'nytimes.com' possono anche essere un indicatore della qualità e della lunghezza della storia. Mentre l'utente sarà in grado di vedere la fonte mentre si passa il mouse su un link, visualizzarlo in ogni momento aiuta a scansionare velocemente i titoli.
paginatura
I siti di notizie sociali hanno migliaia, o in alcuni casi milioni, di collegamenti inviati dall'utente. Mostrare tutti questi collegamenti contemporaneamente è ovviamente impossibile; devi mostrare un piccolo set alla volta per consentire agli utenti di digerirlo . I collegamenti sono solitamente suddivisi in pagine utilizzando l' impaginazione . L'impaginazione è il metodo per suddividere il contenuto in più pagine e fornire un insieme di collegamenti che di solito vedi nella parte inferiore o superiore di una pagina che ti consente di andare alla pagina successiva o precedente, o scegliere un numero di pagina che desideri manualmente.
Ecco alcuni esempi di paginazione dei siti di notizie popolari:
Esistono naturalmente alternative all'impaginazione. Reddit mostra solo i link della pagina successiva e precedente:
Questo metodo semplifica la navigazione in quanto non devi pensare a quale pagina vuoi o devi localizzare il link "successivo" - ci sono solo due link, quindi la maggior parte delle volte vorrai solo la pagina successiva. Detto questo, a volte fa un po 'di confusione poiché è difficile dire su quale pagina si sta lavorando.
Slashdot carica più storie su richiesta. Basta fare clic sul pulsante "Altro" e più storie vengono caricate di seguito usando AJAX:
Caricare le cose con AJAX significa che non esiste una "prima pagina", ma solo storie in alto e storie in basso.
Qualunque impaginazione tu scelga, ci sono alcune cose che dovresti tenere a mente per assicurarti che questo elemento dell'interfaccia sia utilizzabile. Le aree di clic dovrebbero essere grandi : non solo fornire un elenco di collegamenti, ma aggiungere un attributo padding CSS a ciascun link per facilitare l'accesso. Identifica chiaramente la pagina corrente con uno stile personalizzato: i tuoi utenti devono sapere dove si trovano adesso. Infine, fornisci i link "precedenti" e "successivi" . La maggior parte delle volte i tuoi visitatori vorranno sfogliare storie nella pagina successiva, così facendo questi link ti stai togliendo ogni pensiero coinvolto nella ricerca della prossima pagina.
Commenti
L'ultimo oggetto che esaminerò è un commento. I commenti sono un elemento importante dei siti di notizie sociali perché consentono di discutere le discussioni attorno a ciascuna storia. Il sito web a cui punta il link della storia potrebbe non avere funzionalità di commenti, quindi la sezione commenti dei siti di notizie sociali funge da piattaforma di discussione .
Ecco come appaiono i commenti su Digg:
I commenti possono essere votati, proprio come le storie individuali. I controlli di voto si trovano sulla destra di ogni commento, come pollici in su o pollici in giù. I commenti più votati si collocano in cima alla lista , il che significa che una discussione di qualità superiore sarebbe sempre al top, e qualsiasi commento privo di valore verrebbe annullato.
C'è un'altra caratteristica che Digg fornisce per rendere i commenti migliori: il threading. Ogni commento può iniziare una discussione propria se si risponde ad essa . Questi thread sono "compressi", ma è possibile aprirlo utilizzando il link delle piccole risposte nella parte inferiore del commento del thread. Tutte le risposte vengono quindi memorizzate sotto il commento principale e possono anche essere votate in alto o in basso. Ciò consente risposte interessanti per generare le proprie discussioni.
Ecco come appaiono i commenti di Reddit:
Funzionalità simili qui: votazioni e threading. I controlli di voto sono posizionati a sinistra di ogni commento e assomigliano a frecce, su e giù. Reddit consente il deep threading, il che significa che le risposte a un commento possono anche contenere le proprie serie di risposte relative solo a loro . In effetti, questo crea un albero di commenti in quanto molti singoli commenti generano rami e sotto-rami di risposte.
Infine, vediamo i commenti di Newsvine:
Newsvine ha la stessa struttura di Digg: ogni commento è in grado di ospitare una serie di risposte, ma le risposte stesse non possono ospitare ulteriori risposte. Ciò mantiene la vista pulita, ma la discussione diventa un po 'più rigida . Che questa sia una cosa buona o meno dipende dalla quantità di libertà che vuoi vedere nelle discussioni.
L'aspetto visivo è leggermente diverso. Invece di aggiungere un margine sinistro a ogni commento, i commenti di Newsvine sono racchiusi in riquadri. Le risposte sono anche avvolte in scatole e poste all'interno della casella genitore. Questo fornisce un chiaro indicatore di relazione. Newsvine consente anche di votare solo sui commenti principali.
Penso che i due elementi, la votazione dei commenti e il threading dei commenti, siano ingredienti essenziali di cui hai bisogno per facilitare le discussioni sui siti di notizie sociali. Il voto agisce come un filtro per rimuovere tutti i commenti di basso valore o di spam dall'alto e persino rimuoverli del tutto (alcuni siti nascondono i commenti con punteggi negativi); e il threading consente alla discussione di virare in diverse aree di interesse. Più aree di discussione significa più cose di cui parlare e più commenti - qualcosa che una rigida struttura a un livello non sarà in grado di fornire.
Scritto esclusivamente per WDD da Dmitry Fadeyev. Gestisce un blog sull'usabilità chiamato Post di usabilità .
Utilizzi attualmente i siti di notizie sociali per ottenere la tua dose giornaliera di notizie e, in caso contrario, perché no? Ci sono cose che vorresti migliorare o funzionalità che potresti aggiungere a tali siti?