Procedimiento para la definición de los sistemas de navegación

 ¿Qué son los sistemas de navegación?

Son los elementos que permiten al usuario moverse dentro del sitio web de forma fácil y lógica (menús, enlaces, botones, migas de pan, buscador, etc.).

PROCEDIMIENTO PASO A PASO

Definir el objetivo del sitio web

Antes de diseñar la navegación debes tener claro:

  • ¿Qué quiere lograr el sitio?
  • ¿Qué acciones debe realizar el usuario? (comprar, consultar, registrarse, leer, contactar)

 La navegación debe facilitar ese objetivo.

Identificar el tipo de usuario

Determina:

  • Edad
  • Nivel de experiencia digital
  • Necesidades principales

Ejemplo:
Si es para adultos mayores, la navegación debe ser simple, con botones grandes y pocos niveles.

Analizar el mapa del sitio

Revisa la estructura jerárquica ya creada:

  • ¿Cuáles son las secciones principales?
  • ¿Cuáles son subsecciones?

Esto te ayudará a decidir qué irá en el menú principal y qué en submenús.

Definir el tipo de navegación principal

Selecciona el sistema más adecuado:

  •  Navegación horizontal (menú superior)
  •  Navegación vertical (barra lateral)
  •  Menú desplegable
  •  Menú hamburguesa (en móviles)

La más común es la horizontal en la parte superior.

Establecer la navegación secundaria

Incluye elementos complementarios como:

  • Submenús
  • Enlaces internos
  • Botones de acción
  • Migas de pan (breadcrumb)
  • Pie de página con enlaces importantes

Esto mejora la experiencia del usuario.

Definir la jerarquía y profundidad

Regla recomendada:

·         No más de 3 niveles de profundidad

·         El usuario debe llegar a cualquier sección en máximo 3 clics

Ejemplo:

Inicio
→ Servicios
→ Reparación
→ Cita en línea

Establecer criterios de diseño

Define:

  • Nombres claros y cortos
  • Orden lógico
  • Ubicación fija del menú
  • Adaptabilidad a dispositivos móviles

Comentarios

Publicar un comentario

Entradas populares de este blog

CSS

Imagen
   Uso de elementos CSS en HTML ¿Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes. Al crear una página web, se utiliza en primer lugar el lenguaje HTML, para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza...
Leer más

Repaso de etiquetas HTML

  Resumen de etiquetas HTML para poner texto en una web   Resaltar textos   <strong> Texto de mayor importancia</strong> Normalmente devuelve el texto en negrita, pero fundamentalmente se usa para dar mayor importancia a ciertas palabras o frases dentro de un texto.    <b>texto en negrita</b> La etiqueta que convierte el texto en negrita, simplemente. Para darle a un texto mayor importacia es más correcto usar <strong>.   <em> texto en cursiva </em> Crea énfasis en el texto seleccionado, normalmente mostrando el texto en cursiva. Es una manera de resaltar parte del texto. Usa esta etiqueta en lugar de <i>.   <h1> títulos y encabezados</h1> Crea títulos, para dar más o menos importancia a frases de tu texto y establecer orden dentro de la narración. Hay 6 niveles de mayor a menor importante, de H1 a H6. Estas etiquetas título son importantes para el SEO.   <big>texto más grande</b...
Leer más

Actividad 11

Imagen
 Una cafetería local quiere publicar su menú en su página web. Actualmente, el menú está organizado en una tabla HTML, pero los clientes se quejan de que: La tabla se ve desordenada El texto está mal alineado Es difícil distinguir los precios No hay separación clara entre los productos El diseño no es atractivo El dueño te contrata como desarrollador web para mejorar la presentación usando CSS . Situación inicial (tabla sin estilo) <table> <tr><th> Producto </th><th> Precio </th><th> Descripción </th></tr> <tr><td> Café </td><td> $25 </td><td> Caliente </td></tr> <tr><td> Té </td><td> $20 </td><td> Natural </td></tr> <tr><td> Pastel </td><td> $30 </td><td> Chocolate </td></tr> </table> Problema a resolver Diseña los estilos CSS en un archivo externo, necesar...
Leer más