Pasar al contenido principal

Paginado

El paginado se utiliza para dividir contenido o datos en varias páginas, con un control para navegar a la página siguiente o anterior.

Tipos de paginado

Numerado

Se utilizan cuando hay un gran número de páginas. Cuando el número de páginas supera el límite máximo de visualización, se trunca uno de los botones con tres puntos suspensivos (…) para indicar que hay más páginas para navegar.

Ejemplo de paginado numerado inicialEjemplo de paginado numerado final

Cuando la primera y la última página están alejadas por más de cinco páginas de la página actual, se usa el truncamiento doble.

Descriptivo

Generalmente, se usan para páginas que poseen documentación sobre un tema particular. Los botones se pueden nomenclar según el contenido que haya hacia atrás o adelante.

Diseño y estructura (contexto de uso)

Ubicación

Los paginados siempre van centrados con respecto a la página. La cantidad máxima de botones a mostrar es de 9 páginas (incluidos los puntos suspensivos).

completar

Página inicial y final

Ocultar el botón "Anterior" en la página inicial y el botón "Siguiente" en la última página.

Ejemplo de paginado numerado inicial y final

Etiquetas

Puede usar descripciones dentro del paginado para dar más contexto a las personas usuarias.

Usabilidad

Buenas prácticas

Solo divida el contenido en páginas separadas si mejora el rendimiento o la facilidad de uso de su servicio.
Identifique claramente en qué página se encuentra el usuario mostrando el número de página actual. Al proporcionar contexto sobre cuántas páginas hay en total puede ayudar a proporcionar claridad sobre los datos que se muestran.
Incluir siempre la primera página, la anterior y la siguiente. Los usuarios deben poder navegar a cada una de estas páginas desde cualquier página del conjunto.

Malas prácticas

Mostrar todo el contenido en una sola página hace que la página tarde demasiado en cargarse.
Evite usar la técnica de "desplazamiento infinito" para cargar contenido automáticamente cuando el usuario se acerca al final de la página. Esto causa problemas a los usuarios de teclados.
No utilice este componente de paginación para recorridos lineales. Por ejemplo, cuando le pide al usuario que complete un formulario. En su lugar, use el componente Botón (generalmente un botón 'Continuar') para permitir que el usuario pase a la página siguiente, y un vínculo Atrás para permitirle pasar a la página anterior.
No muestre la paginación si solo hay una página de contenido.
No dividir los elementos en varias líneas. Mostrar los elementos de navegación en una sola línea para que sea más fácil de comprender y seleccionar.
Logo del sistema de diseño Obelisco
Los contenidos de buenosaires.gob.ar están licenciados bajo Creative Commons Reconocimiento 2.5 Argentina License.