Caso de estudio 02 · SPORT · Prensa Ibérica · 2023—2026
Producto creía que las tarjetas eran demasiado altas. Yo empecé por medirlas.
La pregunta parecía visual: ¿podían las tarjetas móviles mostrar más contenido en el primer scroll? La respuesta útil necesitaba evidencia, y una visión clara de lo que podíamos perder al comprimirlas.
En 30 segundos
- La tensión
- Producto creía que las tarjetas de noticias en móvil eran demasiado altas, y no había una forma compartida de comprobarlo.
- Mi decisión
- Medir antes de rediseñar: 279 tarjetas de producción contra tres criterios, y después 51 tarjetas en una alternativa 16:9.
- La evidencia
- El 86 % de las tarjetas Type A superaba el umbral de altura de texto; el 81.88 % conservaba un encuadre significativo, y el 100 % lo conservó en la prueba 16:9.
- Qué cambió
- La tarjeta 16:9 se adoptó, y los criterios de altura, densidad de texto y encuadre alimentaron la tarjeta de noticias de 42DS.
- Rol
- Product Designer — benchmark, criterios y medición
- Pregunta
- ¿Pueden las tarjetas móviles ser más densas sin perder valor editorial?
- Métodos
- Benchmark · Figma · Google Sheets · muestreo medido
- Evidencia
- 279 tarjetas de producción + 51 tarjetas en una alternativa 16:9
La pregunta de producto
«¿Estas tarjetas son simplemente demasiado altas?»
En SPORT había una cultura de producto muy fuerte alrededor del primer scroll y de cuánto contenido editorial ve un usuario en móvil. La preocupación era que las tarjetas de noticia de entonces consumían demasiado espacio vertical.
En lugar de partir de un rediseño, convertí la preocupación en criterios medibles: altura del texto, altura de la imagen y si el recorte dañaba el significado informativo de la fotografía.
¿El texto cruza el umbral de altura definido?
¿El texto se extiende más allá de la altura de la imagen?
¿El recorte conserva el significado informativo de la fotografía?
| Muestra | Imagen | Observación | Resultado |
|---|---|---|---|
| Tipo A | 1:1 | Texto por encima del umbral | 86% |
| Tipo A | 1:1 | Texto más allá de la altura de la imagen | 40.86% |
| Tipo A | 1:1 | Encuadre significativo conservado | 81.88% |
| Tipo B | 16:9 | Encuadre significativo conservado | 100% |
El estudio original en Figma/Sheets sigue siendo la evidencia de origen; el portfolio reconstruye los datos útiles como contenido front-end legible.
A qué apuntaba
El objetivo no era una tarjeta más corta. Era un argumento mejor.
Las dos cosas se confunden con facilidad, así que conviene separarlas antes de que aparezca ningún número.
- Lo que me propuse cambiar
- Cómo se tomaba la decisión. Producto tenía una postura firme sobre la altura de la tarjeta y no había forma compartida de comprobarla, así que lo que buscaba era un vocabulario —altura del texto, altura de la imagen, si el recorte destruye el significado de la fotografía— con el que cualquiera pudiera discutir usando evidencia en vez de gusto.
- Lo que deliberadamente no hice
- Empezar por un rediseño. Comprimir era la respuesta propuesta, no el problema. Abrir con una tarjeta más corta habría zanjado por opinión justo la pregunta que la medición existía para abrir.
Quién estuvo
La medición la hice yo. No la hice en el vacío.
El benchmark, los criterios y la medición fueron míos: eso está en la ficha y lo sostengo. Lo que había alrededor, no. Un estudio así solo merece la pena si lo que sale tiene dónde aterrizar, y estas son las personas con las que aterrizó.
- Juan Francisco MolineraProduct Design LeadLinkedIn ↗
- Susana CabadoDesign System EngineerLinkedIn ↗
- Tania DomínguezDiseño, y apoyo con Figma durante el estudioLinkedIn ↗
Diseño de la investigación
Definir el problema antes de cambiar el componente.
Hice un benchmark de otras marcas editoriales y productos digitales, y después medí la tarjeta de producción contra criterios explícitos. La muestra de tipo A usó la proporción de imagen 1:1 existente, con una altura mínima de 140px, en tres portadas de SPORT.
Hallazgo
La preocupación era real, pero «más pequeño» no era automáticamente «mejor».
El informe documentó que el 86% de las tarjetas analizadas superaba el umbral de altura de texto definido. En el 40.86% de la muestra total, el texto se extendía más allá de la altura de la imagen. Al mismo tiempo, se consideró que el 81.88% de las imágenes conservaba un encuadre aceptable o significativo.
en el Tipo A
279 tarjetas analizadas · un punto por tarjeta
Alternativa
Probar una imagen 16:9 sin dar por hecho el compromiso.
Creé una alternativa de tipo B con una imagen 16:9 y sin altura mínima de imagen, y después probé 51 tarjetas con criterios comparables.
En esta segunda muestra, el 100% de las imágenes mantuvo un encuadre informativo aceptable, aunque el texto cruzaba el punto medio de la tarjeta en todos los casos, con un exceso medio del 29.26%.
Compromiso
La tarjeta más compacta mejoró el encuadre en la prueba, sin eliminar la pregunta sobre la densidad de texto.
Importante: las muestras y los layouts eran distintos —279 tarjetas de producción frente a 51 en la alternativa—. El gráfico comunica el criterio documentado dentro de cada prueba; no es una afirmación de conversión ni causal.
Qué cambió esto
La alternativa no se quedó en alternativa.
La tarjeta 16:9 se adoptó. Y los criterios que salieron del estudio —altura, densidad de texto, encuadre— entraron en la tarjeta de noticia de 42DS, uno de los patrones nucleares del sistema, que es lo que hizo el cambio consistente en todo el grupo en vez de local a una portada.
También cambió cómo se tomaba la decisión, que era el objetivo de verdad: Producto ganó una forma común de hablar de altura de tarjeta, densidad de texto y significado de la imagen, con la evidencia pegada a cada compromiso.
El objetivo nunca fue hacer las tarjetas más pequeñas a cualquier precio. Era entender qué ganamos, y qué nos arriesgamos a perder, cuando comprimimos contenido editorial.
Qué me llevo
Medir la creencia antes de pulir la respuesta.
Este proyecto reforzó un hábito que hoy define cómo enfoco el Product Design: traducir preocupaciones subjetivas en criterios observables, hacer visibles los compromisos y dejar que la evidencia mejore la calidad de la conversación de diseño.