Patrones de navegación esenciales en 2016
Su menú de navegación crea o interrumpe el UX de su sitio web, que es lo que debe diseñar principalmente en todo momento. No hay mejor servicio que pueda ofrecer a sus clientes como diseñador que asegurarse de que los sitios que construye para ellos cuenten con una experiencia de usuario impresionante y altamente funcional.
Un UX espléndido garantiza que los sitios de sus clientes obtengan más clientes potenciales, visitantes y lectores, sin mencionar la retención de visitantes regulares. 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 le dan una alta prioridad al diseño para una navegación excelente, 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 fija
Navegación fija es un componente esencial de la navegación, ya que permite a los usuarios acceder instantáneamente al menú y encontrar fácilmente lo que desean 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 otra vez para navegar a otra página en el sitio.
Recuerde que, en la Web, la velocidad lo es todo (cargar páginas, encontrar el contenido deseado, etc.), lo que permite 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 en 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 adhesiva a sus páginas. Tenga en cuenta que 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 por 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 pensar que tales referencias útiles se hacen muy notables. En general, esto se suma a la navegabilidad del sitio que construyes.
Recomiendo hacer hipertexto flagrante con dos características de diseño simples:
- Subrayando
- 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 su cliente, inmediatamente llama la atención de los visitantes del sitio, lo que les ayuda a navegar a la información importante con mayor facilidad.
Del mismo modo, cuando hace que el color de los hipervínculos sea diferente al texto y al fondo de sus páginas, nuevamente, haga que se destaque en la página, para que los usuarios puedan identificarlo fácilmente y hacer clic en él.
Sitio de marketing The Daily Egg usa subrayado y diferentes colores para su hipertexto, lo que facilita a los usuarios la identificación de enlaces.
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 muchos contenidos y categorías. Las tiendas de eCommerce vienen a la mente. Estos son esencialmente paneles desplegables enormes que abren capas adicionales de navegación para ayudar a los usuarios a encontrar específicamente lo que quieren más rápidamente.
Dichos menús mejoran la experiencia del usuario al incluir beneficios como:
- eliminación del desplazamiento;
- información sobre herramientas;
- estructura ordenada de contenido por iconos, diseño o tipografía.
En total, estas características hacen que sea mucho más fácil usar el menú de navegación.
Para un ejemplo sólido de un mega menú, vaya a Red de alimentos El sitio de. Observe cómo el menú desplegable muestra una de las piezas más buscadas del contenido del sitio, las recetas, en un formato fácil de ver que permite a los usuarios elegir de inmediato dónde quieren ir en lugar de desplazarse o paginar para obtener más opciones.
Patrones y posibilidades de idioma
Un patrón de aceptación es el uso de un símbolo convencional que la mayoría de los visitantes del sitio entenderán de inmediato, como un icono de la 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 accederán a la página de inicio del sitio.
Affordances comunican a los usuarios cómo pueden interactuar con los elementos en su diseño. Si bien esto es sin duda Design Basics 101, sigue siendo tan importante practicar hoy como lo era 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. Mientras que algunos diseñadores pueden optar por incluir el logotipo de una empresa como el ícono o botón "de inicio", eso deja demasiado espacio para el error del usuario.
eTailer Frame Warehouse demuestra este principio de diseño a la perfección, con su uso de "casa" para no dejar lugar a dudas sobre dónde llevará esa pestaña a los visitantes del sitio.
Tiempo de carga rápida
Velocidad = gran experiencia de usuario. Los diseñadores de todas las tendencias deben anotar eso como una de las reglas de diseño más cruciales que simplemente no pueden ni deben relegar. De acuerdo con la revista Wired , casi el 50% de los compradores quiere 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 ... es muy probable que abandonen los sitios de sus clientes y nunca regresen, lo que ocasiona 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 proporcionar un rendimiento de página de alta calidad a sus clientes. Simplemente pruebe la velocidad de página 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:
- PageSpeed Insights - Desarrolladores de Google
- Prueba de velocidad del sitio web de Pingdom
- WebPagetest.org
Para 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 usar algo de trabajo, pero la página se carga en poco más de un segundo, de acuerdo con la barra de herramientas de análisis de Alexa.
Gran navegación es excelente UX
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 piensas en ello. 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 de prisa. Por lo tanto, una navegación excelente debería facilitar a las personas el uso de cualquier sitio que crees; ese es el punto de referencia de una excelente experiencia de usuario.
Si bien puede ser tentador dejar de lado 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 lo notarán, al igual que sus clientes. Para complacer a sus clientes, debe complacer a sus usuarios. Solo puede hacer eso cuando diseña para una gran experiencia de usuario antes que nada, con un énfasis principal en obtener la navegación desde el primer momento.