Diseñando un menú de navegación ganador Ideas e inspiraciones
El menú de navegación en un sitio web es como una señal de tráfico en una calle o un directorio de nivel en un centro comercial. No puedes llegar a tu destino sin saber primero dónde estás.. Al igual que en la vida real, la navegación en el diseño web es muy importante y juega un papel importante en la facilidad de uso de un sitio web, así como en la experiencia del usuario..
Hoy en día puedes ver muchos tipos diferentes de menús de navegación con diseños interesantes, creativos e inusuales. Pero, ¿qué tal la navegación efectiva en un sitio web, qué aspecto tendría? ¿Cómo debería ser??
Hoy me gustaría compartir mis observaciones y conocimientos sobre la importancia de la navegación en el diseño web. Revelaré algunos consejos simples que puede utilizar para mejorar la navegación y la facilidad de uso de su sitio web. También habrá algunos ejemplos de menús de navegación efectivos para darle una idea de cómo planificar su próximo diseño..
Arquitectura informacional
La planificación de la navegación debe comenzar con la arquitectura de la información. Es vital sentarse y una lluvia de ideas sobre la arquitectura de información de un sitio web. Debe averiguar qué tipo de características ofrece el sitio web, qué es lo más importante y qué podría colocarse en los niveles más bajos en la jerarquía de información..
La arquitectura de la información incluye Características, necesidades del usuario, mapa del sitio, pruebas y wireframes.. Puede leer más sobre la arquitectura de la información en el artículo de Cameron Chapman en Arquitectura de la información 101: Técnicas y mejores prácticas.
Usando tecnologías habilitadas por el usuario
Evite usar Flash, JavaScript, jQuery o cualquier otra cosa que pueda impedir el acceso a la navegación de su sitio web al construir su barra de navegación, o al menos asegúrese de que puedan degradarse correctamente..
Para más referencias sobre degradación agraciada de javascript, echa un vistazo a esta publicación en 10 métodos útiles de recuperación para CSS y Javascript.
Utilice términos simples y fáciles de usar.
Es mejor usar Simple, obvio y términos fáciles de entender. que cumplir con los términos exclusivos de la industria para su menú de navegación. Cualquier enlace que lleve a los usuarios más de uno o dos segundos para descifrar es probablemente inadecuado para su uso.
Si un usuario necesita hacer clic en un enlace para descubrir a qué conduce el enlace, esto contribuirá a una mala experiencia de usuario para sus visitantes..
Ejemplos
Los términos del menú de navegación del sitio web de Larissa Ness son fáciles de entender y lo suficientemente comunes. Los usuarios no lo encontrarán confuso porque ya tienen experiencia con menús como este.
Aquí hay otro buen ejemplo de un menú de navegación del sitio web limpio y claro con términos comunes utilizados, en csupport.
La agencia creativa Eighty8Four usa el término "sala de exposición" que puede ser confuso para los visitantes. Este término puede significar cartera o trabajo, pero no está claro y los visitantes no tienen más remedio que hacer clic para verificarlo..
Estandarizar el diseño de navegación.
Usa el mismo modelo de navegación. en todas tus paginas Es muy importante porque sin un diseño coherente, un usuario puede realmente pensar que está en otro sitio web. Asegúrese de utilizar el mismo modelo de navegación para que los usuarios puedan navegar fácilmente por su sitio web sin perderse.
Bluegg, que se muestra a continuación, utiliza un diseño de navegación simple y limpio que permanece igual en todas las subpáginas. La única diferencia es el indicador de color, que muestra la página en la que se encuentra actualmente el visitante..
Indica donde estas
Es crucial que el usuario sepa dónde está en todo momento. Puedes hacer esto por Cambiando el fondo del enlace, el color del nombre de la página. o poner el texto en negrita En el menú de navegación para hacerlo diferente a los demás..
Austin Eastciders utiliza un color y un fondo diferentes para indicar la página en la que se encuentra el usuario. Este indicador también puede funcionar como un cambio de diseño sutil, por ejemplo, utilizando un fondo de navegación diferente lo que crea la sensación de que otros elementos del menú están en profundidad.
Cirugía de medios utiliza un color más oscuro como indicador para una subpágina abierta. Simple pero efectivo.
Utilizar convenciones web.
Se trata de una navegación web intuitiva y fácil de usar. Las convenciones web hacen mucho más fácil para los diseñadores trabajar alrededor de sus diseños. La mayoría de los usuarios hacen clic en el logotipo del sitio web para volver a la página de inicio, así que diseñe su logotipo para hacerlo.
Si tu no, Les estás haciendo pasar tiempo para aprender algo nuevo. o, en algunos casos, incomodarlos al no proporcionar lo que ellos esperan que sean normas de navegación comúnmente aceptadas.
Puedes aprender más sobre las convenciones web aquí:
- 10 convenciones de diseño web
- No reinventar la rueda de diseño web
- Diseño Con Convenciones Web
Diseño de inyección coloca el logotipo en la esquina superior izquierda, que se ajusta a una de las convenciones web más utilizadas hoy en día.
Creación de adams utiliza uno de los convenios web más comunes: el logotipo se encuentra en la esquina superior izquierda del sitio web y en los enlaces a la página de inicio.
Pruébalo: Involucrar a un tercero
Siempre pruebe su diseño de navegación con cualquier persona que haya usado Internet antes. Es posible que desee incorporar a personas que no estaban relacionadas con el proceso de diseño para probarlo. Observe sus preferencias cuando navegan. a través de su sitio y analice el tiempo que tardaron en encontrar las páginas que buscaban.
Para mayor exactitud, Involucrar a más personas, recopilar los datos, analizarlos y resumirlos. para un mejor ajuste. Haga una encuesta después de la prueba si es necesario. Puede obtener algunas ideas y entradas inesperadas que de lo contrario no se detectarán sin esta ejecución de prueba.
Proporcionar contexto
Para ser coherente con su contenido y navegación, proporcione un contexto para que los usuarios del sitio web encuentren lo que necesitan rápidamente. Puede colocar pequeños íconos relacionados con el contenido al que se vincula o descripciones breves para brindar una descripción general de lo que trata la página..
Mi propia bicicleta utiliza íconos simples para brindar a los usuarios más información sobre lo que pueden encontrar en ciertas subpáginas.
Sarah Parmenter utiliza subtítulos cortos y agradables en la navegación principal para proporcionar información sobre las subpáginas a las que se vincula la navegación principal.
Propósitos de SEO
A Google le gusta la navegación consistente. Es bueno tener una navegación consistente no solo para que los usuarios entiendan y tengan la idea de cómo navegar a través de su sitio web, sino también para que los motores de búsqueda indexen su sitio web..
Los robots de los motores de búsqueda rastrearán su sitio web para indexar su sitio web y colocar los enlaces en la página de resultados del motor de búsqueda. Si desea ser visible, preste atención al buen diseño de navegación y obtenga más tráfico.
Scripts de navegación gratuitos (CSS, y jQuery)
Aquí hay una breve lista de los últimos menús de navegación que pueden resultarle útiles para sus proyectos. Estos scripts harán que la experiencia del usuario de su producto sea aún mejor agregando algunas características agradables y haciendo que sea un placer utilizarlo.
Script de Vertical News Scroller basado en XML utilizando HTML y jQuery: vScroller
Filtrar
Page Scroller
Línea de tiempo cartera
Horizontalnav
Menú de navegación minimalista CSS3
Efecto de navegación de círculo con CSS3
Efectos de navegación de cuadrícula con jQuery
Ascensor
Crear un menú de navegación CSS3 elegante
Vitrina de hermosa navegación horizontal.
Y por último, pero no menos importante, algunos inspiradores menús de navegación horizontal. Consulte estos increíbles sitios web y sus soluciones de menú de navegación para encontrar nuevas ideas para sus proyectos..
Ch3mical
Bloom Search Marketing Inc.
Alex Pérez
Libor Zezulka
Hauska!
Islas de oro
Neil carpintero
Marc Thomas
Polystyren 3d
Liechtenecker
Mundo de aventura
Fotografia de arbutus
OMDRL
4 pinos de cerveza
Vinos de cazadores
Esperemos que encuentre este artículo útil e informativo. Si tiene alguna opinión o no está de acuerdo, comparta su opinión en la sección de comentarios.
