Krypton Solid

Patrones de navegación esenciales en 2016

Patrones de navegación esenciales en 2016

Su menú de navegación hace o rompe la UX de su sitio web, que es para lo que debe diseñar principalmente en todo momento. No hay mejor servicio que pueda brindar a sus clientes como diseñador que asegurarse de que los sitios que cree para ellos cuenten con una experiencia de usuario asombrosa y altamente funcional.

Una espléndida experiencia de usuario garantiza que los sitios de sus clientes obtengan más clientes potenciales, visitantes y lectores, sin mencionar la retención de visitantes habituales. Es la parte más importante de la creación de un sitio y usted tiene un gran control sobre él en función de cómo diseñe el menú de navegación de su sitio.

Desafortunadamente, no todos los diseñadores dan una alta prioridad al diseño para una excelente navegación, lo que perjudica a los clientes y visitantes.

Para crear una reputación muy creíble como diseñador, y para ser un diseñador en demanda, debe dominar uno de los aspectos más básicos del diseño web. Eso está creando una navegación estelar para los sitios de sus clientes.

Así es cómo.

Navegación pegajosa

Navegación pegajosa es un componente esencial de la navegación, ya que permite a sus usuarios acceder instantáneamente al menú y encontrar fácilmente lo que buscan en su sitio. La navegación fija permanece bloqueada mientras los usuarios se desplazan hacia abajo en una página. No hay nada más frustrante, especialmente en el caso de páginas de desplazamiento largo, que tener que desplazarse hacia arriba nuevamente para navegar a otra página del sitio.

Recuerde que, en la Web, la velocidad lo es todo (cargar páginas, encontrar el contenido deseado, etc.), por lo que permitir que los usuarios accedan al menú de navegación más rápidamente es una buena práctica.

Al incluir una barra de navegación adhesiva, también está ayudando a reducir la carga cognitiva de sus usuarios al poner constantemente sus opciones de navegación frente a ellos.

Prensa alternativa presenta un buen ejemplo de cómo incorporar navegación fija en sus páginas. Observe cómo todas las secciones más importantes son fácilmente accesibles e identificables, mediante un contraste de color efectivo, en la barra de navegación, sin importar cuánto se desplace hacia abajo en la página.

Hipertexto obvio

El hipertexto es cualquier referencia de texto en sus páginas en la que los usuarios pueden hacer clic para obtener información adicional, generalmente en otra página, ya sea en el mismo sitio o fuera del sitio. Los hipervínculos son probablemente el ejemplo más identificable de hipertexto.

Dado que el hipertexto contiene información que ayudará a la experiencia del usuario al proporcionar más información, es lógico que estas referencias útiles sean muy notorias. En general, esto se suma a la navegabilidad del sitio que construye.

Recomiendo hacer que el hipertexto sea evidente mediante dos características de diseño simples:

  • Subrayado
  • Cambiando el color

Cuando subraya cualquier palabra en el contenido de su página, digamos que es un hipervínculo a la página de información de su cliente, inmediatamente llama la atención de los visitantes del sitio, lo que les ayuda a navegar hacia información importante con mayor facilidad.

Del mismo modo, cuando hace que el color de los hipervínculos sea diferente del texto y el fondo de sus páginas, nuevamente lo hace destacar en la página, para que los usuarios puedan identificarlo fácilmente y hacer clic en él.

Sitio de marketing El huevo diario utiliza tanto subrayado como colores diferentes para su hipertexto, lo que facilita a los usuarios la identificación de enlaces.

La-captura-de-pantalla-diaria-del-huevo

Mega menús

Mega menús son una gran idea para la navegación, especialmente si el sitio que está diseñando para su cliente tiene una gran cantidad de contenido y categorías. Me vienen a la mente las tiendas de comercio electrónico. Se trata esencialmente de enormes paneles desplegables que abren capas adicionales de navegación para ayudar a sus usuarios a encontrar específicamente lo que buscan más rápidamente.

Dichos menús mejoran la experiencia del usuario al incluir beneficios como:

  • eliminación del desplazamiento;
  • información sobre herramientas;
  • Estructuración ordenada del contenido por iconos, diseño o tipografía.

En total, estas características facilitan mucho el uso del menú de navegación.

Para ver un ejemplo sólido de un mega menú, diríjase a Red alimentariasitio de. Observe cómo el menú desplegable muestra uno de los contenidos más buscados del sitio, las recetas, en un formato fácil de ver que permite a los usuarios elegir inmediatamente dónde quieren ir en lugar de desplazarse o paginar para obtener más opciones.

Captura de pantalla de Food Network

Prestaciones de patrones y lenguaje

Una oferta de patrón consiste en utilizar un símbolo convencional que la mayoría de los visitantes del sitio comprenderán de inmediato, como el icono de una casa para representar la página de inicio de su sitio. Una oferta de idioma es el uso explícito de una palabra, como «inicio», para aclarar que al hacer clic en esa pestaña, los usuarios irán a la página de inicio del sitio.

Los Affordances comunican a los usuarios cómo pueden interactuar con los elementos de su diseño. Si bien esto es sin duda Conceptos básicos de diseño 101, sigue siendo tan importante practicar hoy como lo fue en los primeros días de Internet.

Un menú de navegación funcional debe tener el símbolo de la casa o la palabra «casa» en la primera pestaña de navegación a la izquierda. Si bien algunos diseñadores pueden optar por incluir un logotipo de la empresa como el icono o botón de «inicio», eso todavía deja demasiado margen para el error del usuario.

eTailer Almacén de marcos demuestra este principio de diseño a la perfección, con su uso de «hogar» para no dejar dudas a dónde llevará esa pestaña a los visitantes del sitio.

Frame-Warehouse-Screen-Shot

Tiempo de carga rápido

Velocidad = gran experiencia de usuario. Los diseñadores de todo tipo deben anotar eso como una de las reglas de diseño más cruciales que simplemente no pueden ni deben relegar. Según la revista Wired, casi el 50% de los compradores desean que la página promedio se cargue en dos segundos o menos. Dicho de otra manera, si las páginas que diseña para sus clientes tardan más de dos segundos en cargarse … existe una gran posibilidad de que abandonen los sitios de sus clientes y no vuelvan nunca, provocando así graves pesadillas de conversión.

Esta es una estadística preocupante, sin duda, pero hay algo que los diseñadores pueden hacer al respecto para asegurarse de que están proporcionando un rendimiento de página de alta calidad a sus clientes. Simplemente pruebe la velocidad de las páginas que diseña. Hay una serie de herramientas confiables para ayudarlo a determinar los tiempos de carga de la página:

Para ver un ejemplo de un tiempo de carga de página muy rápido, vamos a Enchanted Learning’s ¿Qué es una ballena? página. El diseño podría necesitar algo de trabajo, pero la página se carga en poco más de un segundo, según la barra de herramientas de análisis de Alexa.

Captura de pantalla de aprendizaje encantado

Una gran navegación es una gran experiencia de usuario

Una gran parte de una gran experiencia de usuario es la navegación de su sitio. Es la base sobre la que descansa toda la experiencia del usuario, si realmente lo piensa. Cuando sus usuarios no pueden encontrar su camino en el sitio de su cliente con facilidad, entonces se vuelve frustrante para ellos, lo que hace que se vayan apresuradamente. Por lo tanto, una excelente navegación debería facilitar a las personas el uso de cualquier sitio que usted cree; ese es el punto de referencia de una excelente experiencia de usuario.

Si bien puede ser tentador darle poca importancia a la navegación en las etapas de diseño, debido a las nuevas tendencias de diseño que surgen todo el tiempo, no es aconsejable. Sus usuarios se darán cuenta, al igual que sus clientes. Para complacer a sus clientes, debe complacer a sus usuarios. Solo puede hacer eso cuando diseña para una excelente experiencia de usuario, ante todo, con un énfasis principal en obtener la navegación correcta desde el principio.

Deja un comentario