Cómo diseñamos las vistas previas de páginas para Wikipedia, y qué se podría hacer con ellas en el futuro

Imagen de Nirzar Pangarkar / Fundación Wikimedia, CC BY-SA 3.0.

Hoy, lanzamos una nueva función para los lectores de Wikipedia en el escritorio: vistas previas de página. Aquí hay algunos matices de diseño detrás de él.

La madriguera del conejo

La gente ama Wikipedia. La gente ama Wikipedia por razones específicas. Aquí está uno de los más populares, como lo explica XKCD:

Dice

A esto lo llamamos la "madriguera del conejo" alrededor de los pasillos de la oficina de la Fundación Wikimedia. (Enchufe desvergonzado para la camiseta de Rabbit-hole de Wikipedia).

Este es uno de los patrones de usuario más icónicos y populares que vemos en Wikipedia. La gente comienza con un artículo y luego se dirige a otro lugar, y luego a otro lugar, aprendiendo sobre muchos temas diferentes en el camino.

El diseño es tan bueno para lo que está optimizado. Diseñamos para estos lectores, optimizando no para las visitas a la página o el compromiso, sino para el aprendizaje. Y resulta que el contexto es una parte clave del aprendizaje.

El contexto importa, pero el cambio de contexto es costoso

Las vistas previas de página, como característica, es un patrón de interacción utilitario que ha existido desde la invención de Javascript.

Así es como Twitter usa las vistas previas para obtener contexto sobre un usuario. Captura de pantalla / GIF a través de Twitter, uso justo.

No es una solución innovadora para proporcionar contexto sin perder el hilo. Sin embargo, incluso los cambios de interacción más básicos en Wikipedia vienen con sus propios desafíos únicos. Vamos a arrojar algo de luz sobre por qué esto es un gran problema:

Unos cuantos números para ayudarte a asimilar

  • Casi una cuarta parte del tráfico de Wikipedia proviene de hacer clic en los enlaces azules internos. a.k.a bajando por la madriguera del conejo
  • Los enlaces azules representan 4 mil millones de visitas al mes
  • más de 10,000 enlaces se ciernen cada segundo en todas las Wikipedias

En otras palabras, los enlaces azules son los elementos interactivos más utilizados en Wikipedia. Esto hace que jugar con o cambiar cualquier característica relacionada con los enlaces azules sea un poco más ... delicado y desafiante.

Agregue valor, no dolor

Modificar ese comportamiento frecuente es difícil. Comenzamos utilizando ideas cualitativas y cuantitativas para concluir la línea de tiempo de interacción para mostrar una vista previa:

La línea de tiempo muestra eventos después de que un usuario se desplace sobre un enlace azul. Gráfico de Nirzar Pangarkar / Fundación Wikimedia, CC BY-SA 3.0.

Dada la escala de Wikipedia, un cambio menor en cualquiera de estas variables siempre podría tener un impacto masivo en las experiencias del usuario final, así como en nuestra infraestructura. Mediante la investigación evaluativa, aprendimos que algunas personas leen textos en línea al pasar el mouse sobre las oraciones, lo que hace que las vistas previas de páginas sean potencialmente molestas para esta audiencia.

La creación de retrasos artificiales antes de que aparezca la vista previa de la página, aproximadamente 650 milisegundos, nos permitió reducir la cantidad de vistas previas no deseadas. También simplificamos la desactivación de esta función sin tener que saltar por los aros.

Representando el contexto

El siguiente desafío fue representar un artículo con información disponible e información que no está disponible. ¿Cómo se explica el contenido desconocido? Bueno, diseñas para todas las posibilidades.

Casos de borde, casos de borde y casos de borde

No me gusta el término, personalmente. Principalmente porque se usa mal para tomar decisiones de diseño. Es aún más inexacto cuando se trata de diseñar para Wikipedia.

El contenido de Wikipedia está escrito por más de 200,000 humanos y bots en 300 idiomas. Difiere en tono, formato, disponibilidad, nivel de detalle y tema. Todo es un caso límite, por lo tanto, nada lo es.

Diseñar la vista previa fue como jugar Tetris sin saber cuál será la próxima pieza. Aquí hay diferentes variaciones de vistas previas presentadas:

Gráfico de Nirzar Pangarkar / Fundación Wikimedia, CC BY-SA 3.0.

Este conjunto diverso de casos de uso da como resultado diferentes representaciones de un artículo que van desde imágenes de paisajes, vistas previas de retratos altos, vistas previas de derecha a izquierda para enlaces que conducen a la lista de artículos. Ajustar el alto de línea para las páginas relacionadas con las matemáticas en las vistas previas de páginas Tamil para que el recorte de oraciones funcione correctamente es parte del diseño de vistas previas de páginas.

Gráfico de Nirzar Pangarkar / Fundación Wikimedia, CC BY-SA 3.0. Texto e imágenes de los artículos de Wikipedia indicados en varios idiomas.

Futuro de las vistas previas de página

Esto es solo el comienzo: la página muestra una vista previa de las posibilidades abiertas en múltiples áreas, ya que el contexto se está volviendo cada vez más importante no solo en Wikipedia sino también en Internet en general. (Tenga en cuenta que estas son solo ideas y no están en desarrollo activo).

Soporte para más tipos de contenidos.

Actualmente, las vistas previas están destinadas solo a artículos, pero las hemos creado de tal manera que podrían usarse para diferentes tipos de contenido y formatos.

Gráfico de Nirzar Pangarkar / Fundación Wikimedia, CC BY-SA 3.0. Texto de las páginas indicadas en Wikimedia wikis.

Vistas previas potentes para editores

A partir de ahora, las vistas previas de las páginas están diseñadas para lectores, pero podrían adaptarse para editores avanzados al alojar información completa y acciones útiles que son más relevantes para los editores.

Hoy en día, muchos editores usan una herramienta llamada Popups de navegación diseñada para el mismo propósito. Las características de las ventanas emergentes de navegación se pueden adaptar fácilmente a Vistas previas de página:

Gráfico de Nirzar Pangarkar / Fundación Wikimedia, CC BY-SA 3.0. Texto de Mona Lisa.

Wikipedia fuera de Wikipedia

Llamamos a Wikipedia como segunda fuente de material. Al igual que se usa un diccionario para explicar el significado de una palabra mientras lee un libro, Wikipedia se usa a menudo como una segunda fuente para conocer el contexto para leer incluso fuera de Wikipedia.

Gráfico de Nirzar Pangarkar / Fundación Wikimedia, CC BY-SA 3.0. Incluye texto de Wikipedia de una nutria de nariz peluda, y está basado en Jeremy Coles,

Las previsualizaciones de Wikipedia podrían ser adoptadas por otros editores como un medio para proporcionar un contexto rápido en torno a los temas.

Envolviendolo

Las vistas previas de página allanan el camino para otra forma de interactuar con Wikipedia. La experiencia de lectura de Wikipedia se puede dividir en partes más pequeñas. Esperamos más formas de alejarnos de la noción tradicional de artículos monolíticos individuales hacia un aprendizaje más modular y contextual.

No dude en enviarnos sus comentarios sobre nuestra página de proyectos.

¡Gracias!

Nirzar Pangarkar, Gerente de Diseño, Diseño de Audiencias
Fundación Wikimedia

También puedes leer esta publicación en el blog de Wikimedia.