Cómo mostrar una colección creciente de pequeñas mascotas virtuales

Las mascotas pequeñas son ante todo elementos visuales, por lo que una cuadrícula regular constituye un buen punto de partida. Utilice celdas del mismo tamaño y mantenga un orden de lectura uniforme de izquierda a derecha y luego de arriba abajo. Esto hace que cada nueva mascota ocupe un lugar predecible y ayuda al coleccionista habitual a explorar la galería con rapidez. Apple recomienda diseños conocidos de filas o cuadrículas para colecciones visuales, mientras que Material Design describe las cuadrículas ligeras como idóneas para galerías de imágenes. (Apple Human Interface Guidelines: Collections; Material Design: Cards)

Proporcione a cada celda el espacio suficiente para la imagen de la mascota y su nombre. Si el nombre, el tipo o un estado breve deben mostrarse junto a cada mascota, utilice un mosaico sencillo con una jerarquía clara en lugar de agregar una tarjeta completa con bordes, botones y detalles decorativos. La guía de Material distingue las galerías de imágenes de las tarjetas, que resultan más útiles cuando los elementos tienen contenidos o acciones diversas. En el caso de un conjunto de mascotas mayormente uniforme, los elementos decorativos innecesarios de las tarjetas desvían la atención de la colección.

Una cuadrícula no puede mostrar todas las mascotas a la vez una vez que la colección sobrepasa el área visible de la pantalla. Elija un objetivo principal: ver la mayor cantidad posible de un vistazo, encontrar con rapidez una mascota por su nombre o disfrutar de un espacio destacado. Cada uno de estos objetivos requiere un diseño diferente.

Objetivo principal	Opción de visualización útil	Desventaja
Examinar muchas mascotas	Cuadrícula compacta y uniforme	Cada mascota dispone de menos espacio
Encontrar una mascota conocida	Cuadrícula con búsqueda u ordenación alfabética	Los controles ocupan parte del espacio en pantalla
Mostrar algunos favoritos	Fila destacada o área de visualización más amplia sobre la cuadrícula	Una parte mayor de la colección completa queda más abajo
Comparar detalles de mascotas	Vista de lista o de detalle	Caben menos mascotas en la vista inicial

Considere el área destacada como una pequeña ventana a la colección, no como un sustituto de ella. Por ejemplo, muestre un puñado de favoritos en la parte superior y mantenga la cuadrícula completa debajo. El ejemplo de galería de mascotas adaptable de Android utiliza un área destacada para mascotas y una cuadrícula que puede mostrar más elementos a medida que el diseño dispone de más espacio. Esto respalda la decisión general de diseño de otorgar prioridad visual a una zona destacada sin renunciar a una galería explorable debajo. (Android Developers: Furry friends and adaptive APIs)

Cuando la cuadrícula se vuelve demasiado extensa, divídala mediante categorías que coincidan con la forma en que el coleccionista piensa en sus mascotas. Algunas opciones posibles son la especie o el mundo, el conjunto de la colección, la gama de colores o el período de adquisición; use solo categorías que realmente existan en la colección. Comience con un número reducido de grupos. Demasiadas secciones pequeñas pueden hacer que la navegación se sienta como pasar de una colección independiente a otra.

Mantenga una vista predeterminada evidente, como «Todas las mascotas», y asegúrese de que el grupo activo sea visible. Si las mascotas pueden pertenecer a más de un grupo, aplicar un filtro suele ser más claro que duplicar la misma mascota en varias secciones. Si cada mascota pertenece exactamente a un grupo fijo, las secciones con etiquetas pueden facilitar la exploración de toda la colección. Estas son aplicaciones prácticas para organizar el contenido en función de su estructura; la mejor agrupación depende de las características reales de la colección, no de un esquema categórico universal.

La imagen de una mascota puede ser reconocible para su dueño, pero los nombres ayudan a gestionar una lista en crecimiento y a distinguir variantes de aspecto similar. Coloque un nombre breve justo debajo de cada miniatura. Si dos mascotas pueden compartir nombre, añada un identificador secundario conciso, como su conjunto o su forma. Evite incluir múltiples estadísticas, insignias y controles en cada mosaico: esos detalles compiten con la imagen y hacen que la cuadrícula quede demasiado saturada.

Si la presentación forma parte de un sitio web o una aplicación, asegúrese de que la identidad de la mascota esté disponible tanto en texto como en imagen. Las pautas del W3C señalan que las imágenes informativas necesitan texto alternativo que transmita la información relevante; cuando una etiqueta adyacente ya aporta esa misma información, repetirla en el texto alternativo de la imagen puede ser innecesario. En la práctica, combine un nombre visible con una etiqueta accesible adecuada y evite que una mascota distintiva solo pueda identificarse por su color o imagen. (W3C WAI: Images Tutorial)

Aproveche el ancho disponible para modificar el número de columnas en lugar de imponer una cantidad fija en todas las pantallas. Un teléfono compacto puede mostrar dos columnas; una pantalla más ancha puede mostrar más, siempre que las imágenes y los nombres se sigan leyendo con claridad. Mantenga un espaciado uniforme y conserve el mismo orden básico a medida que el diseño se redistribuye. El ejemplo de diseño adaptable de Android describe una galería de dos columnas en pantallas compactas que muestra más contenido cuando hay más espacio disponible. (Android Developers: Furry friends and adaptive APIs)

Compruebe la visualización en el tamaño más estrecho que probablemente vayan a usar los usuarios y en el ancho propio de un monitor de escritorio. Preste atención a nombres cortados, imágenes que pierden sus detalles característicos, alturas desiguales de los mosaicos o controles que se reorganizan de forma forzada. Si una mascota necesita un nombre más largo, contemple intencionadamente una segunda línea o aplique un truncamiento coherente con una opción para ver el nombre completo; no permita que una entrada inusual distorsione sin previo aviso toda la cuadrícula.

En el caso de una colección pequeña, desplazarse por una única cuadrícula puede ser suficiente. Añada una función de búsqueda cuando sea necesario localizar una mascota concreta en una lista más extensa. Añada opciones de ordenación cuando el orden resulte relevante (por ejemplo, alfabéticamente o por fecha de incorporación). Añada filtros únicamente para los atributos que ayuden a diferenciar los elementos. Sitúe estos controles encima de los resultados y muestre la ordenación o el filtro seleccionados para que la vista actual resulte comprensible. Las directrices de colecciones de Material ubican el filtrado y la ordenación fuera de las propias tarjetas, lo que mantiene la atención de los elementos en su contenido. (Material Design: Cards)

Evite depender de un desplazamiento infinito que no ofrezca sensación de avance. Un contador visible de la colección, encabezados de sección o una acción clara de «mostrar más» pueden ayudar a indicar cuánto contenido queda por ver. Se trata de indicadores opcionales y no de requisitos obligatorios; elija la solución más ligera que ayude a orientarse sin añadir sobrecarga visual.

Añada algunas mascotas representativas, incluidas aquellas de apariencia similar y la que tenga el nombre más largo, y luego revise la colección en anchos de teléfono móvil y de escritorio. Pregúntese: ¿puede alguien reconocer a cada mascota, leer su nombre, entender el grupo o el orden actual y acceder a la colección completa sin dar nada por sentado? ¿Es posible encontrar una mascota conocida sin tener que examinar cada uno de los elementos? ¿Siguen siendo las imágenes el elemento central?

Si resulta difícil reconocerlas, aumente el tamaño de los mosaicos o reduzca los detalles visibles. Si cuesta encontrar los elementos, agregue una búsqueda por nombre o un criterio de ordenación adecuado. Si la primera pantalla parece saturada, reserve un área destacada pequeña y mantenga la colección completa debajo. Aplique los cambios de uno en uno y repita la comprobación conforme la colección aumente; el diseño acertado es aquel que continúa facilitando la tarea del usuario en el tamaño y la densidad que realmente utiliza.

• Apple Developer, «Collections» — https://developer.apple.com/design/human-interface-guidelines/collections
• Material Design, «Cards» — https://m1.material.io/components/cards.html
• Android Developers, «Furry friends and adaptive APIs» — https://developer.android.com/design/ui/gallery/social/pawparazzi
• W3C Web Accessibility Initiative, «Images Tutorial» — https://www.w3.org/WAI/tutorials/images/