El Genial Algoritmo de Layouts que usa Vox

Hace ya bastante tiempo que quería escribir sobre esto pero no había sacado el tiempo necesario. Pues, como todo plazo se cumple, llegó la hora de contarles un poco sobre el genial algoritmo que implementó el equipo de desarrollo de Vox.com.

¿Qué es Vox?

Vale aclarar que existe Vox Media y Vox. La primera es la empresa detrás de varios sitios de noticias como The Verge, Polygon, SB Nation y más. Por su parte, el segunda viene a ser el espacio de noticias especializadas en política, finanzas, noticias internacionales y otras que no tienen lugar en los otros blogs de la red de Vox Media.

¿Y qué tiene que ver un algoritmo en todo esto?

Pues resulta que soy lector habitual de Vox. No leo todo lo que publican pero sí hay noticias y contenido muy interesante. Incluso uno de sus contenidos me motivó a pedirle a un amigo que hiciera un componente HTML que llamamos Comparator Slider y publiqué en este blog.

Si hay algo que encuentro agradable de ver cuando visito Vox o The Verge es el orden que le dan al contenido publicado.

Todo esto nace hace casi un año, cuando haciendo un trabajo de benchmarking para Social Geek, me di a la tarea de analizar la distribución del contenido en sitios de noticias populares. El resultado final fue que debíamos tomar mucho ejemplo de lo que hacen en Vox.

Lo más llamativo de la página principal de este sitio no es solo la distribución sino algo que no daba por entendido hasta que leí el artículo del equipo técnico de Vox Media.

En tal publicación explican que la página inicial del sitio de noticias no cuenta con un solo layout sino con muchos más y que van cambiando según el contenido que esté disponible.

Wow, más despacio cerebrito

Sí, en el artículo comentan que el algoritmo, mediante una serie de puntos y restricciones para cada posible distribución (layout), acomoda el contenido de diferentes formas, garantizando un aspecto visual agradable para las 25 entradas que se cargan en la página principal.

El algoritmo en sí consta de tres partes. Antes de avanzar aclaremos que:

  • Hay varios tipos de entradas: artículos, vídeos, destacados, editorial, tarjetas, etc.
  • Cada tipo de entrada tiene predefinida una cantidad de columnas que puede ocupar.
  • Existe un sistema de grilla de 4 columnas.
  • Cada columna de cada fila debe contener algo.

La primera parte del algoritmo se encargar de buscar el layout que mejor se ajuste al contenido visible. O sea, encontrar todas las distribuciones según el contenido visible(esto teniendo en cuenta los 4 puntos anteriores).

algoritmo de layouts de vox

La segunda parte se encargar de asignar puntos a los layouts encontrados en el paso 1.

Finalmente, los layouts con mejores puntuaciones. Para esto el equipo de diseño se encargó de dar los criterios los cuales serían así:

  • Asignar más puntos donde los destacados y vídeos ocupen más espacio.
  • Quitar puntos si las filas adyacentes lucen igual, ya que se ven mal.
  • Dar más puntos si las filas adyacentes son inversas la una de la otra, esto por asimetría.
  • Dar más puntos donde haya filas que tengan poco contenido sean seguidas por filas con mucho contenido, esto por desequilibrio.

Como si fuera poco, el algoritmo también tiene en cuenta que el sitio debe ser responsive y los anuncios publicitarios que aparecen.


Toda una genialidad tal algoritmo.

Si quieres leer más en detalle sobre el algoritmo, puedes hacerlo en el artículo original [en inglés].

Anuncios

Autor: cesc1989

Ingeniero de Sistemas que le gusta escribir y compartir sobre recursos que considera útiles, además que le gusta leer manga y ver anime.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s