Patrones de navegación para diez tipos comunes de sitios web
La navegación es uno de los aspectos más importantes de cualquier sitio web. Sin una buena navegación, un sitio se vuelve inútil para los visitantes. No pueden encontrar la información que necesitan y luego buscan sitios de la competencia. Es vital que sus sitios sean fáciles de navegar si desea ser un diseñador exitoso.
iPero no hay soluciones únicas para la navegación. Lo que funciona bien en un sitio de noticias podría no funcionar bien para un sitio personal. Algo que es increíblemente fácil de usar en un blog puede ser frustrante en un sitio de comercio electrónico.
A continuación hay diez tipos de sitios comunes, con sugerencias sobre los tipos de patrones de navegación que funcionan bien para cada uno.
También hay ejemplos para darle una mejor idea de lo que estamos hablando. ¡Siéntete libre de compartir más ejemplos geniales en los comentarios!
Todos los sitios
Existen ciertos patrones de navegación que funcionan virtualmente en todos los sitios. En lugar de volver a mezclar la misma información en cada una de las categorías a continuación, las incluiré aquí.
El primer patrón es navegación con pestañas. Las pestañas son perfectamente adecuadas para la navegación, ya que psicológicamente recuerdan a los visitantes las pestañas de papel y navegan a una nueva sección de un cuaderno o carpeta, algo que los botones o los enlaces de texto plano no hacen. Las pestañas son casi siempre el método preferido para diseñar sus enlaces de navegación principales, aunque, por supuesto, funcionan mejor cuando hay un número limitado de enlaces en un menú.
El segundo patrón es la navegación del encabezado. Si su sitio web tiene un encabezado (y la mayoría de los sitios web lo hacen), entonces la navegación del encabezado es una buena idea. Los visitantes están acostumbrados a mirar el encabezado de los enlaces de navegación. Este comportamiento predeterminado le facilita la tarea de hacer que su sitio web sea más fácil de usar ubicando su navegación en el encabezado o cerca del mismo.
El patrón final que se aplica a prácticamente todos los sitios es la navegación de pie de página. Muchos usuarios (aunque no todos) buscarán en el pie de página un enlace si no pueden encontrar lo que están buscando en su otra navegación. Muchas páginas básicas a menudo están vinculadas desde un pie de página, incluidos los vínculos "sobre", "contacto" y "mapa del sitio", ya sea que estén vinculados en algún otro lugar de la navegación o no.
1. Blogs
Los blogs generalmente tienen un gran volumen de contenido, en orden cronológico inverso. Esto presenta un marco lógico para su navegación, así como algunos desafíos únicos, según el tipo de blog.
La mayoría de los blogs utilizará una combinación de paginación (o desplazamiento continuo), una página de archivo, navegación de barra lateral para categorías y / o etiquetas, y posiblemente navegación de encabezado y pie de página también. Es importante pensar exactamente cómo es probable que sus visitantes quieran acceder al contenido de su blog.
Por ejemplo, un blog personal puede no necesitar categoría o navegación de etiquetas fuera de los enlaces en la metainformación para cada publicación. En estos casos, desea que los visitantes accedan al contenido en orden cronológico inverso, en lugar de saltarse por tema. Por otro lado, un blog de temas debe tener navegación por categorías y etiquetas, ya que es probable que los visitantes busquen información sobre temas específicos dentro del tema general.
Como mínimo, los blogs deben incluir navegación para moverse cronológicamente a través del contenido (ya sea paginación, enlaces siguiente / anterior o desplazamiento continuo), así como navegación en encabezado o barra lateral para páginas específicas fuera de la página principal del blog.
Los blogs de temas (y algunas veces corporativos) también deben incluir menús de categorías o etiquetas en su navegación, ya sea en el encabezado o en la barra lateral. Los blogs particularmente grandes también deberían considerar la implementación de una función de búsqueda, para que sea más fácil para los usuarios encontrar rápidamente lo que están buscando. Solo asegúrate de que la función de búsqueda funcione según lo previsto y realmente muestre todos los resultados relevantes.
Ecoki A continuación, se incluyen categorías de nivel superior en su navegación de encabezado, con navegación a páginas importantes en una barra de navegación de encabezado secundaria. Es un diseño eficaz que claramente pone énfasis en los enlaces más utilizados.
2. sitios de noticias
Los sitios de noticias son similares a los blogs, ya que generalmente presentan historias en orden cronológico inverso. Los sitios de noticias a menudo están muy categorizados y tienen una arquitectura de información más compleja que muchos otros tipos de sitios. Debido a esto, sus patrones de navegación a menudo son más complejos.
La clave no es hacer que la navegación sea más complicada de lo que debe ser. Los menús desplegables y desplegables son buenas maneras de manejar menús más grandes sin ocupar demasiado la página. Si nos fijamos en los sitios de noticias más grandes (como Google News, por ejemplo, a continuación), desglosan las noticias en categorías amplias como Política, Local, Mundial, Deportes, Entretenimiento, etc. Las categorías que use dependerán de si el sitio es un sitio de noticias general o un sitio de noticias temáticas.
Las etiquetas también pueden mejorar la navegación sustancialmente. Al etiquetar cada historia, facilita a los usuarios encontrar historias relacionadas, sin crear una estructura de categoría complicada o inflada. Es una buena idea no solo incluir enlaces de etiquetas en cada artículo, sino también incluir una lista de etiquetas o una nube de etiquetas en algún lugar (solo incluir etiquetas populares puede ser una buena idea para sitios con cientos de etiquetas).
Vincular en línea dentro de los artículos mejora la experiencia del usuario en gran medida. Muchos de los sitios de noticias más grandes hacen esto, permitiendo a los usuarios obtener acceso inmediato a todos los artículos sobre un tema. Es muy similar a incluir etiquetas, pero en lugar de una lista al principio o al final del artículo, los enlaces están dentro del texto mismo.
3. Sitios de comercio electrónico
Los sitios de comercio electrónico a veces son increíblemente complejos y tienen cientos (o miles) de páginas individuales para productos y otra información. Por esta razón, la forma en que se maneja la navegación es vital tanto para la experiencia del usuario como para el resultado final. Sin una estructura de navegación excelente, los visitantes de un sitio de comercio electrónico tendrán más dificultades para encontrar los productos que están buscando, lo que significa que hay una gran posibilidad de que recurran a la competencia por frustración.
Lo principal que necesita cada sitio de comercio electrónico con más de un puñado de productos es un buen sistema de búsqueda. La búsqueda asistida es clave, donde los usuarios no solo pueden buscar por palabra clave, sino también refinar sus resultados en función de precios, tamaño, categoría u otras métricas (dependiendo de sus productos específicos).
La navegación de categoría también es obligatoria para los usuarios que desean navegar. Dependiendo de si usa subcategorías, la navegación de ruta de navegación también puede ser una buena idea (si su sitio tiene más de dos o tres niveles de profundidad, las migas de pan pueden mejorar la usabilidad).
Ofrecer a los visitantes varias formas de encontrar los productos que desean es una gran manera de aumentar las ventas, pero asegúrese de que cada método muestre todos los productos relevantes. Si los visitantes descubren que la búsqueda devuelve un conjunto de productos mientras navega devuelve un conjunto diferente, solo generará frustración.
los Blik El siguiente sitio web es un excelente ejemplo de un sitio que utiliza una barra lateral con filtros para refinar los resultados del producto. Es el patrón de búsqueda guiada, sin aparición de búsqueda.
4. Sitios informativos y de referencia
Los sitios de referencia generalmente tienen algo en común: una tonelada de información en muchas páginas. Esto hace que sea difícil crear cualquier tipo de menú estándar. Las categorías pueden ser útiles para navegar, pero cuando comienzas a tener miles, decenas de miles o incluso millones de páginas (como Wikipedia), el sistema de categorías se rompe. Además, la mayoría de las personas acuden a sitios de referencia para un propósito específico y no para navegar, lo que hace que las categorías no sean especialmente útiles.
Es vital que los sitios de referencia tengan excelentes capacidades de búsqueda. La búsqueda dirigida, al igual que las utilizadas en los sitios de comercio electrónico, también puede ser útil, especialmente si se utiliza junto con una buena organización de categorización y etiquetado.
Es obvio que Reference.com , a continuación, quiere que los visitantes usen la búsqueda para encontrar lo que estén buscando, ya que se coloca prominentemente en la parte superior de la pantalla.
Las páginas en un sitio de referencia también deben hacer uso de enlaces en línea a la información relacionada. Esto facilita que los visitantes encuentren todo el material que necesitan para comprender lo que están leyendo, sin tener que realizar búsquedas múltiples. La necesidad de enlaces en línea es la razón por la cual las plataformas wiki generalmente tienen una sintaxis estándar para vincular dentro del texto de un artículo, de modo que los creadores de contenido no tengan que perder el tiempo para buscar los enlaces relevantes.
Wikipedia , debajo y otros sitios wiki hacen un buen uso de los enlaces en línea para agregar contexto a los artículos.
5. Sitios corporativos
Hay una gran variedad en la estructura y el tamaño de los sitios corporativos. Algunos son simplemente para atraer a nuevos clientes. Otros se crean para mantener informados a los clientes actuales. Aún otros deben servir como un incentivo para nuevos clientes, un portal de noticias para clientes existentes y el front-end para una intranet de la compañía.
Independientemente del propósito del sitio corporativo, la navegación clara es clave. No desea que los usuarios tengan que perder tiempo buscando su navegación o tratando de averiguar en qué enlace hacer clic para llegar a donde necesitan ir. Asegúrese de que los enlaces estén organizados lógicamente, que cada uno de ellos tenga un significado fácil de entender y que estén ubicados en lugares lógicos (el encabezado y la barra lateral son sus amigos aquí).
Todos los sitios a continuación muestran que el hecho de que la navegación se encuentre en los lugares más comunes no significa que no pueda ser creativo. Siempre y cuando sea utilizable y fácil de encontrar, siéntete libre de crear algo único.
En sitios de más de una docena de páginas, es una buena idea incluir la funcionalidad de búsqueda. También es una buena idea incluir un mapa del sitio para que los usuarios que tengan problemas con su navegación habitual encuentren exactamente lo que están buscando.
6. Sitios de redes sociales o comunitarias
En general, con los grandes sitios de redes sociales, la búsqueda es el principal medio de navegación. Tiene sentido cuando hay millones (o incluso miles de millones) de páginas en el sitio. La navegación estándar basada en menús no tiene ningún sentido cuando se trata de ese volumen de información.
Así que la búsqueda se ocupa de la navegación general del sitio. Pero eso aún deja páginas de perfil de miembro. Aquí, es importante que haya coherencia en todo el sitio. Independientemente de si su sitio permite a los miembros personalizar sus perfiles o no, es imperativo que los enlaces estén ubicados en el mismo lugar en todas las páginas.
Tome Facebook, por ejemplo: cada perfil de miembro y cada página tiene enlaces a cosas como fotos e información en el lado izquierdo. Las notificaciones, los mensajes y las solicitudes de amistad siempre están vinculadas en la parte superior, al igual que los enlaces a la configuración de la cuenta y a la salida. Una barra de navegación superior estándar como esa, que siempre se vincula a la cuenta e información del visitante se ha convertido en un pilar de las redes sociales bien diseñadas.
Los enlaces en línea también deben ser consistentes. Por ejemplo, cada vez que un nombre de usuario aparece como un enlace, debe vincularse al perfil de ese usuario, independientemente del contenido al que esté asociado. Piense a través de qué información debe vincularse lógicamente a qué páginas, y luego asegúrese de que sea consistente independientemente de dónde aparezcan esos enlaces.
7. Sitios de eventos
Los sitios de eventos son generalmente simples y no tienen una gran cantidad de páginas. Pero es importante pensar en cómo usarán el sitio los visitantes. Lo más probable es que deseen hacer una de las siguientes cosas: registrarse para el evento, ver quién asiste o habla, obtener información sobre asistencia (incluidos los costos y cosas como ubicación y hoteles del área) y ver el calendario del evento.
Registrarse en el evento, incluso si es un evento gratuito, debe considerarse como una transacción de comercio electrónico. Por ese motivo, desea un botón destacado de llamada a la acción para suscripciones.
El encabezado estándar y / o la barra lateral de navegación es una excelente opción para enlaces a otras páginas. La navegación local también puede ser necesaria si va a incluir páginas individuales para cosas como talleres específicos o altavoces. Los menús desplegables o desplegables solo pueden funcionar en este caso si tiene un número limitado de enlaces secundarios. De lo contrario, es mejor utilizar la navegación secundaria en una barra lateral o dentro de una página principal.
los Hull Digital Live 10 El sitio web tiene una navegación de encabezado concisa y fácil de usar que hace que sea fácil encontrar exactamente lo que un visitante podría estar buscando.
Sugerencia: si el sitio de su evento va a incluir un área para asistentes o una intranet, consulte las sugerencias de navegación en una red social o en un sitio de la comunidad para conocer las pautas de navegación.
8. Revisar sitios
Los sitios de revisión generalmente se usan de dos maneras. El primero es cuando los usuarios están interesados en un producto específico y desean ver reseñas de ese artículo. En este caso, una excelente función de búsqueda es la mejor navegación. Permite a los usuarios acceder rápidamente al producto que están buscando.
El segundo uso es investigar ciertos tipos de productos. Para este uso, la búsqueda sigue siendo un método de navegación valioso. Pero las categorías y la búsqueda guiada son igual de importantes. Permitir que los usuarios examinen las reseñas por categoría y subcategoría les permite encontrar una variedad de productos que se ajustan a sus necesidades. Al permitirles refinar esos resultados basados en cosas como precio o marca, permite una mejor experiencia de usuario.
Blippr , a continuación, incluye la navegación de categoría (con menús desplegables para la navegación secundaria) y una barra de búsqueda prominente.
9. sitios personales
Los sitios personales son realmente comodines del mundo del diseño web. Puede usar casi cualquier tipo de patrón de navegación que desee. Mainstays como el encabezado y la barra lateral de navegación seguirán siendo los más útiles, pero no hay nada de malo en hacer algo completamente diferente.
Los sitios personales deben ser un reflejo del propietario del sitio. Si algo inesperado encaja dentro de la personalidad del sitio, entonces por supuesto: apúrate. Sin embargo, puede ser una buena idea incluir un enlace de mapa de sitio en algún lugar, si usa navegación no estándar, para facilitar que los visitantes que no lo "obtengan" encuentren lo que están buscando.
Daniel Mall's La página de cartera tiene uno de los patrones de navegación más únicos que he visto. Es fácil de usar sin dejar de ser muy diferente de la norma.
10. Galerías
Galerías de imágenes y los sitios de portafolio generalmente deberían usar una combinación de navegación con encabezado estándar o barra lateral, etiquetado y categorías. Permitir que los visitantes restrinjan las imágenes que se muestran según una etiqueta o categoría es importante para una buena experiencia del usuario, especialmente a medida que crece el volumen de imágenes.
La paginación también será vital para sitios más grandes. El desplazamiento continuo puede parecer una buena idea, pero como las galerías y los sitios de cartera, por su propia naturaleza, están llenos de medios, el desplazamiento continuo puede terminar usando muchos recursos del sistema. Lo recomendaría en contra de cualquier sitio con más de unas pocas docenas de imágenes (aunque en sitios más pequeños de galerías y carteras puede ser realmente agradable).
Exhibición mínima utiliza categorías, búsqueda y paginación.
La comida para llevar
Si hay un concepto de navegación que es absolutamente necesario, independientemente del tipo de sitio que diseñe, es esto: ¡consistencia!
Puede salirse con la mayoría de las opciones de navegación lógica, siempre y cuando sea coherente en todo su sitio. No comience con la barra lateral de navegación para la mitad de su sitio, y la navegación del encabezado para la otra mitad, sin ninguna razón lógica para hacerlo. Si el enlace de inicio está siempre en la esquina superior izquierda, asegúrese de que se mantenga en la esquina superior izquierda. Esto se aplica a todos los elementos de su navegación y se vuelve exponencialmente más importante a medida que aumenta el tamaño del sitio.
Aparte de la coherencia, lo más importante que debe hacer al diseñar sus patrones de navegación es pensar cómo los visitantes realmente van a utilizar su sitio. No tenga miedo de las pruebas A / B o multivariadas para averiguar si sus patrones de navegación funcionan realmente como deberían.
Independientemente de cuán fresca o nueva sea su navegación, si no cumple su función básica de permitir que los visitantes se trasladen de un área a otra de la manera que lo deseen, su navegación ha fallado.
¡Siéntase libre de compartir ejemplos de grandes patrones de navegación en acción en los comentarios a continuación! También avísenos si tiene otros consejos sobre patrones de navegación adecuados para tipos específicos de sitios.