Advertisement
  1. Web Design
  2. UX

3 Principios para Crear una Consistente Experiencia de Usuario a Través de la Navegación

by
Read Time:5 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

¿Estás evaluando un producto digital y no estás seguro por dónde empezar? ¿Quizá necesitas un poco de orientación sobre cómo planificar una experiencia de usuario a través de la navegación?

En este artículo se revisan los tres principios de la navegación que utilizo en mi trabajo díario como consultor UX. Estos incluyen:

  • Arquitectura de la Información (IA) que se alinea con los modelos mentales de los usuarios (es decir, cómo esperaran que estén estructuradas las características y el contenido).
  • Que los medios para navegar por la estructura sean fácilmente reconocibles, consistentes y coherentes en toda la navegación.
  • Que el número de opciones de navegación proporcionadas sea razonable.

¡No dudes en incorporar los siguientes fundamentos en tu propio flujo de trabajo UX!

¿Qué es la "Navegación" en un producto digital?

La "Navegación" describe los medios a través de los cuales un usuario se mueve a través de los sitios web y las aplicaciones. Forma parte de lo que comprende con mayor amplitud la Arquitectura de la Información de la estructura y las funcionalidades.

Un componente importante de la navegación lo forma también la "las ayudas para encontrar" o la "señalización", que hace referencia a la forma en que permitimos que la gente intuya o descubra dónde están gracias a diferentes señales y métodos. Cada página del sitio web o software puede ser la única visitada por el usuario, de modo que es importante proporcionar algún contexto relacionado con sus objetivos.

Principio #1

  • La arquitectura de la información se alinea con los modelos mentales de los usuarios y cómo esperan que las características y contenido estén estructurados en el sitio o la aplicación.

Definir la Estructura

Es importante definir la Arquitectura de la Información antes de diseñar la navegación. Se pueden usar tarjetas para organizar las diferentes páginas en distintas categorías. Usted puede hacer esto con un usuario de grupo, donde solicitar un número de usuarios y les pedimos que organizar las etiquetas diferentes en grupos – o utilizar el diseño experto,

Hay una serie de herramientas que puedes utilizar para definir la estructura de tu sitio web o software.

¿Dirigen los CTA o las llamadas a la acción al usuario a dónde él espera?

La confianza y la credibilidad de tu sitio se se articula y depende de pequeños detalles como puedan ser los errores ortográficos, sino también en cosas como la correspondencia entre los botones y/o enlaces y a dónde dirigen estos.

Por ejemplo, si el usuario está en una página de producto con una llamada a la acción que dice "Comprar Ahora" esperará ser llevado a una página con un carrito para adquirir el producto.

Deberías minimizar el número de llamadas a la acción por página, o al menos otorgarles un peso visual diferenciado.

Im feeling lucky is an example of a vagueunnecessary call to actionIm feeling lucky is an example of a vagueunnecessary call to actionIm feeling lucky is an example of a vagueunnecessary call to action
"¿Me siento afortunado?" es un ejemplo de llamada a la acción vaga/innecesaria

¿Están los Menús Ubicados en Lugares Familiares?

Contempla el contexto de lo que estás diseñando. La gente está acostumbrada a ver la navegación, a modo de menús en lugares consistentes.

Por ejemplo, los móviles iOS tienen el menú en la parte inferior de la pantalla, mientras que Android tiende a mostrar las opciones de navegación en un menú de estilo hamburguesa. Puede que quieras ver un sitio como pttrns.com para ver patrones de navegación diseñados para una plataforma específica.

Principio #2

  • Los medios para navegar a través de la estructura son fácilmente reconocibles y están siempre disponibles en todo el sitio o aplicación.

¿Están los elementos allí donde era de esperar? ¿Es la estructura clara y coherente?

La experiencia del usuario está formada en su conjunto a partir de todo lo que el usuario va encontrando. Crear basándonos en lo que sabemos sobre la navegación y todos los diferentes elementos que la componen.

Por ejemplo, los sitios web, cuando están bien diseñados, adoptan convenciones estándar.

Entre los diferentes componentes, tomando un sitio web como ejemplo se podrían incluir, un Logotipo y Branding, Cambios en la Navegación/Cambios del Diseño Visual, Claves Contextuales, Asistentes/Indicadores de Pasos, Migas de Pan, URLs, Titulares, ¡e incluso el Título de la Página situado en la ventana del navegador!

The Economist indica donde está ubicado el lector mediante

  1. Un logotipo y branding
  2. Interacciones de la barra de navegación
  3. El Titular de la página
  4. Encabezado del artículo
  5. Pistas o claves de ayuda en el contexto

Principio #3

  • El número de opciones proporcionadas es razonable (es decir, es preferible no excederse en más de 5-7 elementos en cada situación)

En cualquier producto que disponga de una interfaz, ya sea una aplicación o sitio web, debe tener el número mínimo y proporcionado de opciones.

Porque lo que no deseas es que el usuario se pierda, se sienta abrumado o se se sienta confuso respecto a la estructura de tu sitio Web. Por esto el número de opciones o posibilidades debe ser razonable y limitado.

En mi experiencia, ofrecer demasiadas opciones puede sobrecargar al usuario y resultar contraproducente a la hora de conseguir el objetivo que estés persiguiendo para tu negocio. Deberías tener un número de opciones pequeño, con objetivos concretos y habitualmente o familiar al usuario.

A menudo pido al propietario del producto, o a quien domine la materia, cuales serían las opciones que el usuario usa más y daría prioridad a estas mostrándolas primero.

En el ejemplo anterior puedes ver el desplegable con las opciones disponibles en la web de la BBC. Las opciones de nivel superior se componen de ocho elementos. La opción del menú desplegable que a su vez proporciona (más) opción dispone de un cierto número de enlaces diferentes para que el usuario pueda acceder si es necesario a otro contenido.

En sitios como este no tiene sentido ordenar las cosas alfabéticamente, sino ordenarlas según su frecuencia de uso o acceso. Si tienes un sitio web existente, podrías configurar algunos análisis para determinar cómo ha funcionado, o establecer algún tipo de tarjetas para clasificar las actividades que se supone deben realizar los usuarios.

Un sitio común, debería ser bastante sencillo colocar siete enlaces en cada página de manera consistente. Si estás trabajando en un sitio de mayor escala, que tiene una arquitectura de información importante, tendrás que considerar con cuidado cómo vas a estructurar tus enlaces.

Conclusión

Hay varios principios que determinan la experiencia de usuario respecto a la navegación. Debes identificar y comprender los principios la heurística que se usan para definir la navegación. En primer lugar, como recordatorio de las buenas prácticas en el diseño y en segundo lugar para evaluar los productos existentes.

La estructura fundamental de una página web, la arquitectura de la información y las distintas páginas que la componen, las etiquetas y los enlaces deben ser coherentes con lo que espera el usuario. Más aun, conviene prestar atención al contexto al que pertenece tu sitio/producto y considerar cualquier convención y patrones de la plataforma en la se enmarca con los que los usuarios estén familiarizados.

Usa esto como guía para construir una experiencia consistente e intuitiva. Además, deberías considerar las páginas u opciones más importantes e incluirlas en la parte superior de la página. Según mi experiencia, proporcionar más de siete opciones visibles de navegación es sobrecargarla. El resto de opciones de menos importancia, como los "ajustes" pueden mostrarse cuando sea necesarios.

¿Perteneces a la profesión que se dedica a definir la navegación y/o la arquitectura de la informació? ¿Existen otros principios que utilizas para dirigir la experiencia del usuario? ¡Cuéntanos tu opinión en los comentarios!

Recursos Adicionales

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.