Mejores prácticas para diseñar un sitio web de noticias sociales
¿Cómo recibes tus noticias diarias en estos días? Bueno ... puede que esté visitando sus sitios y blogs favoritos, pero eso es ineficiente ya que esos blogs pueden no tener ninguna actualización. Tal vez te suscribas a ellos mediante RSS , que te ofrece todos los artículos nuevos directamente, pero en este caso tendrás que ordenar todo lo nuevo para encontrar lo que te interesa. Otra opción hoy sería visitar un sitio de noticias sociales .
Los sitios de noticias sociales son agregadores de enlaces, lo que significa que su función principal es recopilar y compartir enlaces interesantes. Esto puede hacerse a través de presentaciones de usuarios, o puede ser hecho automáticamente por el sistema. El aspecto de agregación es solo una parte porque los sitios también clasifican los enlaces. De nuevo, esto puede hacerse a través del voto del usuario o algún algoritmo mecánico (aunque en este caso, ¿podemos realmente llamarlo un sitio de noticias "social"?). El resultado final es el mismo sin embargo: los enlaces más interesantes suben a la cima . Esta característica particular hace que los sitios de noticias sociales sean una gran alternativa al RSS.
En este artículo mostraré algunos de los principales sitios de noticias sociales actuales, identificaré las tendencias y patrones en sus diseños y sugiero algunas mejores prácticas a seguir al diseñar dichos sitios. Comencemos por mirar cuatro sitios de noticias sociales populares y ver cómo se comparan sus diseños.
Digg
Digg es el sitio de noticias sociales más popular y presenta un diseño utilizable que a menudo es adaptado por muchos de sus competidores. Digg usa un diseño de dos columnas : una lista de historias a la izquierda y otras a la derecha, como el cuadro de las 10 mejores historias. En la parte superior, Digg muestra una lista de categorías de historias y justo debajo de ellas los controles de clasificación. Por lo tanto, un usuario puede seleccionar una categoría, por ejemplo ... "Tecnología", y luego ordenarla por "Próximos" para ver los últimos envíos.
Hélice
Propeller es un buen ejemplo de un sitio que sigue bastante de cerca el diseño de Digg. Es un diseño de dos columnas con una lista de historias a la izquierda y contenido secundario a la derecha , como los tweets más recientes sobre Propeller o una lista de las historias más comentadas.
A diferencia de Digg, Propeller utiliza separadores de líneas horizontales entre cada una de las historias, así como un fondo de rayas de cebra para facilitar la exploración de la lista. Esto puede ayudar, aunque debo señalar que el trazado de bandas de cebra se usa tradicionalmente para facilitar la lectura en tablas de columnas múltiples, especialmente aquellas con muchas columnas. Esto se debe a que desea leer un dato en una columna que está muy lejos de la etiqueta original de la izquierda y usar la franja de cebra como guía para ayudar a mover la vista sin perder la pista de la fila . En el contexto de Propeller, que tiene esencialmente solo una columna de datos, el efecto de las bandas de cebra es cuestionable.
Reddit es un ejemplo de un diseño diferente al de Digg. Reddit tiene un gran enfoque en el contenido, particularmente en los titulares. El enfoque es tan fuerte que todo, aparte de los titulares, se minimiza y se aleja para que las historias ocupen el asiento delantero. Este diseño minimalista permite un consumo de información muy rápido ya que el visitante puede escanear rápidamente muchos titulares para encontrar una historia interesante para ellos. Como Reddit no tiene campos de descripción, cada historia ocupa menos espacio, por lo que se pueden mostrar más historias en la pantalla .
Reddit también tiene un elemento único en la parte superior de la página principal: una historia al azar próxima. Al igual que en otros sitios de noticias sociales, las últimas historias de Reddit se mantienen en la sección "próxima". Debido a que esta sección recibe menos tráfico que la página principal, algunas historias interesantes pueden perderse. Para remediar esto, Reddit muestra historias futuras aleatorias en la página principal para darles un breve momento de exposición que podría ayudar a impulsarlos a la cima.
Newsvine
Newsvine toma un enfoque diferente en su diseño. A diferencia de otros sitios de noticias sociales que parecen una lista de titulares, Newsvine utiliza el aspecto de revista / periódico . Las historias se acompañan de una gran foto y descripción y, en algunos casos, el contenido de la historia también se puede encontrar en su página de detalles / comentarios.
Un elemento interesante de Newsvine es el mapa de calor de impacto:
El cuadro muestra dos rayas: las historias más votadas y las más comentadas. Cada uno muestra un conjunto de bloques, todos de diferentes colores y tamaños. Los bloques más grandes significan que hay más comentarios sobre ellos o más votos, según el gráfico en el que se encuentren. El color indica la edad de la historia: el verde es fresco y el rojo es viejo. Esta visualización permite una forma única de navegar por el contenido en Newsvine .
Ahora echemos un vistazo a algunos de los elementos comunes de la interfaz presentes en los sitios web de noticias sociales:
Cajas de voto
Todos los sitios de noticias sociales tienen algún método para votar artículos, con la excepción de los sitios que usan algoritmos de clasificación automatizados para calcular los rangos. Esto hace que el área de votación sea muy importante. Desea que sobresalga lo suficiente como para garantizar que las personas no se lo pierdan , pero al mismo tiempo necesita hacer que se desvanezca lo suficiente en el diseño de la interfaz para garantizar que no distraiga al escanear listas de titulares .
Aquí hay algunos ejemplos de casillas de votación de sitios de noticias populares:
Cada cuadro consta de hasta cuatro elementos: el rango de la presentación, la suma de los votos, un enlace para votar la historia y un enlace para votar la historia . La mayoría de los sitios no muestran el rango y solo muestran la suma de los puntajes, es decir, se suman los votos positivos y negativos. Hablando de votos, la mayoría de los sitios de noticias sociales tienen una manera de votar una historia tanto como subir, aunque algunos eligen tener solo el botón de subir una. En los casos en que solo se muestra el botón de subir, un enlace para "enterrar" (o votar abajo) una historia generalmente se proporciona en otra parte.
Detalles de la historia
Cada historia tiene más que un titular para acompañarla. Las historias generalmente muestran su fecha, el usuario que las publicó, una breve descripción, un enlace a la sección de comentarios y tal vez incluso una imagen.
Aquí hay algunos ejemplos del área de detalles de envío de sitios de noticias populares:
El cuadro de votación a menudo se encuentra a la izquierda. Esto le permite permanecer en una ubicación constante para cada historia. El enlace de comentarios, así como otros extras como "compartir esta historia" se colocan debajo de la descripción (si está presente) o en el título. Al hacer que el texto de los detalles aparezca gris en el título, los detalles se desvanecen y enfocan los titulares , haciendo que el escaneo de la lista de historias sea mucho más fácil ya que nuestros ojos pueden saltar rápidamente de una a otra.
La mayoría de los sitios de noticias sociales muestran el tiempo como relativo , por ejemplo, hace 10 horas. Esto tiene sentido porque la gente quiere ver qué tan fresca es una historia y no está particularmente interesada en la fecha y hora exacta en que se publicó.
También notará que algunos sitios muestran el dominio al que conduce el enlace de envío al lado de su título, por lo general después de entre corchetes. Esto es útil porque permite a los visitantes juzgar qué tipo de contenido deberían esperar . Por ejemplo, si ven 'youtube.com' como la fuente, sabrán que es un video. Fuentes destacadas como 'nytimes.com' también pueden ser un indicador de la calidad y duración de la historia. Si bien el usuario podrá ver la fuente mientras se desplaza sobre un enlace, mostrarla en todo momento ayuda a escanear rápidamente los titulares.
Paginación
Los sitios de noticias sociales tienen miles, o en algunos casos millones, de enlaces enviados por los usuarios. Mostrar todos estos enlaces a la vez es, por supuesto, imposible; tiene que mostrar un pequeño conjunto a la vez para permitir que los usuarios lo digieran . Los enlaces generalmente se dividen en páginas usando la paginación . La paginación es el método de dividir el contenido en varias páginas y proporcionar un conjunto de enlaces que generalmente ve en la parte inferior o superior de una página que le permite ir a la página siguiente o anterior, o elegir un número de página que desee de forma manual.
Aquí hay algunos ejemplos de paginación de sitios de noticias populares:
Por supuesto, hay alternativas a la paginación. Reddit solo muestra los enlaces de página siguiente y anterior:
Este método simplifica la navegación, ya que no tiene que pensar qué página quiere ni necesita ubicar el enlace "siguiente"; solo hay dos enlaces, por lo que la mayoría de las veces solo querrá la página siguiente. Habiendo dicho esto, a veces resulta un poco confuso ya que es difícil decir en qué página estás.
Slashdot carga más historias a pedido. Simplemente haga clic en el botón "Más" y más historias se cargan debajo usando AJAX:
Cargar cosas con AJAX significará que no hay una "primera página", solo historias en la parte superior e historias en la parte inferior.
Cualquiera que sea la paginación que elija, hay algunas cosas que debe tener en cuenta para asegurarse de que pueda utilizar este elemento de interfaz. Las áreas de clic deben ser grandes ; no solo proporcione una lista de enlaces, sino agregue un atributo de relleno de CSS a cada enlace para que sea más fácil hacer clic. Identifique claramente la página actual con un estilo personalizado: sus usuarios necesitan saber dónde están ahora. Finalmente, proporcione los enlaces "anterior" y "siguiente" . La mayoría de las veces, los visitantes querrán buscar historias en la página siguiente, de modo que al crear estos enlaces se deshace de cualquier pensamiento que implique localizar esa página siguiente.
Comentarios
El último elemento que examinaré son los comentarios. Los comentarios son un elemento importante de los sitios de noticias sociales porque permiten que surjan discusiones en torno a cada historia. El sitio web al que apunta el enlace de la historia puede no tener funcionalidad de comentarios, por lo que la sección de comentarios de los sitios de noticias sociales sirve como la plataforma de discusión .
Así es como se ven los comentarios en Digg:
Los comentarios se pueden votar, al igual que las historias individuales. Los controles de votación se encuentran a la derecha de cada comentario, como un pulgar hacia arriba o hacia abajo. Los comentarios mejor calificados flotan en la parte superior de la lista , lo que significa que la discusión de mayor calidad siempre estará en la parte superior, y cualquier comentario sin valor sería rechazado.
Hay otra característica que Digg proporciona para mejorar los comentarios: enhebrar. Cada comentario puede iniciar un hilo propio si responde . Estos hilos están 'contraídos', pero puede abrirlos usando el enlace de respuestas pequeñas en la parte inferior del comentario del hilo. Todas las respuestas se almacenan bajo el comentario principal y también se pueden votar hacia arriba o hacia abajo. Esto permite respuestas interesantes para engendrar sus propias discusiones.
Así es como se ven los comentarios de Reddit:
Funciones similares aquí: votación y enhebrado. Los controles de voto se colocan a la izquierda de cada comentario y se ven como flechas, arriba y abajo. Reddit permite el enhebrado profundo, lo que significa que las respuestas a un comentario también pueden contener sus propios conjuntos de respuestas relacionadas solo con ellos . De hecho, esto crea un árbol de comentarios ya que muchos comentarios individuales generan ramas y subramas de respuestas.
Finalmente, veamos los comentarios de Newsvine:
Newsvine tiene la misma estructura que Digg: cada comentario puede albergar un conjunto de respuestas, pero las propias respuestas no pueden albergar más respuestas. Esto mantiene la vista limpia, pero la discusión se vuelve un poco más rígida . Si eso es bueno o no, depende de la cantidad de libertad que desee ver en sus discusiones.
La apariencia visual es ligeramente diferente. En lugar de simplemente agregar un margen izquierdo a cada comentario, los comentarios de Newsvine están envueltos en cuadros. Las respuestas también se envuelven en cajas y se colocan dentro de la caja principal. Esto proporciona un claro indicador de relación. Newsvine también solo permite votar sobre los comentarios de los padres.
Creo que los dos elementos, el voto de comentarios y el enhebrado de comentarios, son ingredientes esenciales que necesita para facilitar las buenas discusiones en los sitios de noticias sociales. La votación actúa como un filtro para eliminar cualquier comentario de bajo valor o spam de la parte superior, e incluso eliminarlos por completo (algunos sitios ocultan comentarios con puntuaciones negativas); y el enhebrado permite que la discusión se desvíe hacia diferentes áreas de interés. Más áreas de discusión significa más cosas de qué hablar y más comentarios, algo que una estructura rígida de una sola capa no podrá proporcionar.
Escrito exclusivamente para WDD por Dmitry Fadeyev. Dirige un blog sobre usabilidad llamado Posibilidad de uso .
¿Actualmente usa sitios de noticias sociales para obtener su dosis diaria de noticias y, de no ser así, por qué no? ¿Hay cosas que mejorarías o características que agregarías a esos sitios?