Pautas para el formato de listas con viñetas en productos digitales

Experiencia de usuario
28/4/2017
|
Samuel Gimeno Artigas
Escritorio redondo con laptop, gafas, planta, celular, lápices y unas manos de mujer tecleando.

Presentar información mediante listas separadas con viñetas que faciliten la exposición y la comprensión de información para los usuarios es algo esencial en un producto digital, y  más ahora que la redacción de textos se ha vuelto a poner de moda.

2017 04 28 original
Foto de kleneway1379

Para ello, Norman Nielsen ha publicado unas pautas para que mejoremos nuestras listas con viñetas destinadas a productos digitales, donde nos dan 7 pautas para optimizar la legibilidad y la comprensión.

Las 7 pautas que nos dan desde Norman Nielsen para nuestras listas con viñetas son:

  1. Escribe los elementos de la lista con aproximadamente el mismo tamaño
  2. Usa sólo listas numeradas cuando sea importante la numeración o la secuencia de los elementos
  3. Usa frases con estructura paralela para los elementos de las listas
  4. Evita la repetición del mismo elemento al principio
  5. Introduce una lista con una frase clara o descriptiva
  6. Mantén un formato consistente
  7. No uses excesivamente las listas con viñetas porque pierden efectividad

A continuación, os vamos a detallar un poco cada una de ellas.

Elementos de la lista del mismo tamaño

Para facilitar la comprensión y el escaneo del contenido de una lista lo mejor es que todos los elementos tengan aproximadamente el mismo tamaño.

Ejemplo de lo que se debe hacer:

Cosas que debes traer al albergue de montaña:

  • Candado
  • Toalla
  • Saco

Ejemplo de lo que no se debe hacer:

Cosas que debes traer al albergue de montaña:

  • Candado para cerrar la taquilla
  • Toalla para la ducha (aunque si te olvidas tenemos también en alquiler por 2€)
  • Saco de dormir

Listas numeradas sólo cuando sea importante la numeración o la secuencia

Sólo se deben usar listas numeradas cuando sea importante la numeración o la secuencia de los pasos como en una receta de cocina o un proceso secuencial.

Ejemplo de lo que se debe hacer:

Para darte de usuario en nuestra plataforma necesitas:

  1. Tener DNI electrónico o certificado electrónico válido de alguna de estas entidades
  2. Validarte en la siguiente página
  3. Dar de alta un usuario nuevo con la opción “Usuario nuevo”

Ejemplo de lo que no se debe hacer:

Cosas que debes traer al albergue de montaña:

  1. Candado
  2. Toalla
  3. Saco

Frases con estructura paralela para elementos de listas

El uso del paralelismo o de estructuras paralelas es muy útil para la elaboración de listas con viñetas, ya que facilita al usuario la comprensión del contenido al usar estructuras similares.

Ejemplo de lo que se debe hacer:

Sigue las normas que están en los postes del parque:

  • Pon la basura en los cubos señalados a lo largo del parque
  • No hagas mucho ruido
  • Mantente en las áreas señaladas con marcas amarillas
  • Colabora para mantener el parque limpio

Ejemplo de lo que no se debe hacer:

Por favor sigue las siguientes reglas de los postes del parque:

  • Pon la basura en los cubos señalados a lo largo del parque
  • Los animales pueden asustarse de los ruidos fuertes
  • Las líneas amarillas marcan donde puedes estar
  • Es responsabilidad de todos mantener limpio el parque

Evita la repetición del mismo elemento al principio

Cuando hacemos una lista un error muy común es repetir el principio al comentar elementos comunes. Es un error que debemos evitar ya que crea confusión en los usuarios.

Ejemplo de lo que se debe hacer:

En nuestra tienda encontrarás los juegos clasificados en las siguientes categorías:

  • Acción
  • Aventuras
  • Lucha
  • RPG
  • Shoot ‘em Up

Ejemplo de lo que no se debe hacer:

En nuestra tienda los juegos están clasificados en:

  • Juegos de acción
  • Juegos de aventuras
  • Juegos de lucha
  • Juegos de rol
  • Juegos de Shoot ‘em Up

Introduce la lista con una frase clara o descriptiva

La frase que encabece la lista debe ser una frase clara o descriptiva que le ayude al usuario a conocer el contenido de la lista y al escaneo del contenido. Esta frase no tiene que ser completa si el resto de elementos la completan de una manera.

Ejemplo de lo que se debe hacer:

Unas vacaciones en la Columbia Británica pueden incluir:

  • Senderismo
  • Visitas a museos
  • Viajes en canoa por el lago

Mantén un formato consistente

Sigue la guía de estilo de tus productos digitales si la tienes, además de unas mínimas reglas.

Si la frase es completa, pon mayúscula al principio de cada elemento y usa puntos al final.

Si son fragmentos, no hace falta poner mayúsculas al principio de cada elemento ni usar puntos u otra puntuación al final.

Evita el uso excesivo de listas con viñetas

Como cualquier elemento de ayuda visual al diseño, si se usan excesivamente pierden su eficacia así que Norman Nielsen no recomienda usar en exceso este recurso, sólo lo justo y lo imprescindible.

Esperemos que todos estos consejos os sirvan para hacer unas buenas listas con viñetas en vuestro producto digital y mejorar su comprensión y legibilidad.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.
Mastodon