Consejos para simplificar la navegación de su sitio

Lo que sucede en los proyectos una vez que se inicia el camino equivocado es que, por lo general, somos reacios a dar marcha atrás, incluso si no nos sentimos bien con respecto a la dirección en la que nos dirigimos. El problema cobra impulso cuanto más tiempo o dinero tiene Ha invertido en seguir el camino equivocado.

Es imprescindible superar esa vacilación. Si una estructura de navegación deficiente va a introducir problemas de usabilidad (como en el caso del sitio de ejemplo para este artículo), debemos corregir esa estructura incorrecta en lugar de continuar desarrollando el sitio.

Si no lo hacemos, será más difícil reparar el daño más adelante. Al diseñar o rediseñar la navegación, debemos recordar que las necesidades del usuario son lo primero.

Las estructuras complejas de navegación rara vez son necesarias. Simplemente pensamos que son cuando los creamos por primera vez. Lo que siempre debe hacer es preguntarse si no hay una manera más sencilla de lograr el mismo objetivo.

Si hay una forma más sencilla, necesita usarla, porque cualquier otra cosa, sin importar lo impresionante que sea, le costará más de lo que le beneficia a largo plazo. En este artículo, usaremos un ejemplo de sitio web en vivo para simplificar una estructura de navegación compleja para mejorar la usabilidad.

Paso 1: Examina el diseño existente

El problema con el que estamos empezando es que el diseño de navegación existente tiene una complejidad excesiva. En el caso del sitio de ejemplo que estamos rediseñando para este proyecto, esa complejidad parecía Necesario, pero solo porque una forma mejor no era inmediatamente obvia.

Primero, ayudará a comprender por qué la navegación original era compleja en primer lugar. El sitio del sujeto es un sitio de tutoriales, y el tema de los tutoriales es para un sistema bastante complicado.

Debido a que el sitio utiliza un emulador en vivo del sistema de asignaturas para que el alumno pueda aprender, significa que no podemos (o no debemos) navegar de una página a otra. Necesitamos mostrar el contenido insertándolo en línea para evitar recargar el sistema constantemente y tener que guardar el estado del sistema.

Por lo tanto, los enlaces de navegación no siempre se redirigen a las páginas físicas, y la mayoría se redireccionará a las páginas virtuales. La navegación en este caso se puede considerar como dividida en lecciones, capítulos y temas.

La barra de navegación superior ya es bastante simple, aunque podría tener un aspecto actualizado. Cuando el usuario llega al sitio por primera vez, verá el menú en la columna izquierda.

El usuario debe elegir una lección de este menú antes de poder ver los capítulos y temas de las lecciones individuales, como se muestra en la Fig. 2.

Lo que hace que esta estructura sea demasiado compleja es que no debería ser necesario dividir la navegación de esta manera (el usuario no puede seleccionar elementos de navegación de nivel superior sin un paso de navegación adicional), y la paginación numérica no es ideal para la selección de temas.

Sin embargo, es fácil entender la lógica detrás de por qué la navegación se diseñó originalmente de esta manera. El dispositivo emulado se creó primero y tenía un cierto tamaño determinado por el código SVG.

Cambiar su tamaño con el código antes que el soporte universal del navegador para la función de zoom CSS3 hubiera significado cambiar todo el código JavaScript (sobre las líneas 10,000), lo que hubiera sido un desperdicio.

Por lo tanto, el diseño de navegación original es un intento de ahorrar espacio horizontal para que tanto la lección como el dispositivo emulado puedan caber en la pantalla simultáneamente.

Ahora que conocemos la falla en la estructura de navegación existente, facilita la planificación de un nuevo diseño de navegación en el siguiente paso.

Paso 2: Planea un nuevo diseño

Debido a que ahora hay un soporte más consistente (pero aún no excelente) para CSS3 Zoom en los navegadores de escritorio más populares, el dispositivo emulado puede ampliarse a un tamaño más pequeño sin requerir grandes cantidades de recodificación.

Si esto se hace correctamente, habrá más espacio disponible a la izquierda, lo que nos permitirá tener una columna adicional en el centro.

El cambio realmente obvio es que el cuerpo de la lección se ha alejado completamente del área de navegación, que es exactamente la forma en que debería ser.

Este cambio permitirá una mayor flexibilidad en el sistema de navegación y proporcionará más espacio para que se muestre el cuerpo de la lección.

Paso 3: Implementar el plan.

Recuerde que cada lección puede tener varios capítulos y cada capítulo puede tener múltiples temas. ¿Cómo podemos hacer frente a eso? La forma más fácil es hacer una pila plegable de elementos de menú. Expandir una lección revela sus capítulos, y expandir un capítulo revela sus temas.

En la figura 4 puede ver la lista no expandida de lecciones que se muestra en el menú de la izquierda.

Observe también la necesaria adición de un botón de navegación en el cuerpo de la lección. Esto es para eliminar la necesidad de que el usuario siempre use el menú de navegación para saltar al tema siguiente o anterior en el capítulo.

Esto es lo que verá el usuario si selecciona una lección del menú de la izquierda:

Es posible que estos enlaces de aspecto un tanto críptico no signifiquen mucho para ti, pero para alguien que se esté capacitando para ser un aviador se explica por sí mismo. Al expandir la lista al tercer nivel se mostrarán las páginas de temas individuales, como se muestra en la figura 6.

A medida que la lista de enlaces crece, se agrega una barra de desplazamiento vertical a la página. Podríamos hacer que la barra de desplazamiento se adjunte al menú mismo estableciendo una altura fija para el menú.

Cosas técnicas

Los scripts externos, los marcos de CSS y las fuentes utilizadas en el ejemplo anterior incluyen:

  • bootstrap v3.3.7
  • Fuente Awesome v4.7.0
  • Google Fonts: pompiere, concert one, varela round

Estos no son de ninguna manera la -sólo- Una forma de hacer que algo como esto funcione, pero se han utilizado en este proyecto como una forma de lograr rápidamente una solución segura para la web sin la necesidad de demasiada codificación o marcado adicional.

El constructor para el prototipo de menú es muy simple si está utilizando Bootstrap como marco de trabajo de CSS.

En el primer nivel de sangría, crea un div para el área de navegación (aquí con el ID de "leftSide") y un div de clase dentro de él para configurar qué propiedades debe tener el espacio que contiene. En este caso, solo estamos usando la clase estándar "well" que ya está predefinida en Bootstrap (fig 7).

Dentro de este conjunto, en el tercer nivel de sangría, agregamos un par de párrafos para ocultar y mostrar el menú (fig 8). La propiedad de visualización de cada uno es importante, ya que permitirá que los enlaces funcionen como un interruptor de palanca.

Como puede ver, al hacer clic en los enlaces se activarán las funciones de JavaScript para ocultar o mostrar la columna. En este caso, "ocultar" significa simplemente eliminar el contenido y reducir la columna a un tamaño más pequeño, como se muestra en la figura 9.

Lo que hace la función de ocultar es que reduce la columna izquierda al ancho 40px (lo suficiente como para mostrar el icono requerido para expandirlo nuevamente a la normalidad), y expande el ancho de la columna central al 50% de la ventana gráfica. Mostrando imágenes de todo a la forma en que fue originalmente.

Ahora necesitamos crear un contenedor para contener los elementos del menú.

Luego agregue el elemento de navegación, en este caso el panel de "instrucciones".

El colapso del elemento lo maneja el propio CSS y JavaScript de Bootstrap, por lo que todo lo que tenemos que hacer es agregar funciones para cambiar el contenido de la columna central cuando se hace clic en un elemento (l1s1 y l1s2).

Estos se manejan mediante una secuencia de comandos externa, pero se muestran en la figura 12 para completarlos.

Volver al menú en nuestro archivo HTML. Se agrega un salto de línea como un separador simple, luego los elementos restantes se agregarán como una serie de listas anidadas. El constructor inicial se muestra en la figura 13.

A partir de este momento, agregar los elementos de menú restantes es muy simple. En aras de la brevedad, solo se muestra la adición del primer conjunto de elementos, pero los conjuntos de elementos restantes se agregan exactamente de la misma manera.

Todos los elementos deben agregarse entre el par de etiquetas de lista, como se muestra.

El siguiente elemento del menú se agregaría al insertar una nueva línea en la línea 75, y luego seguir exactamente el mismo procedimiento para el elemento T1-L2, y así sucesivamente.

Una vez que se hayan agregado todos los elementos (capítulos) de T1-L1 a través de T1-L6, agregaremos un nuevo salto de línea y luego comenzaremos una nueva lista (como categoría T2), siguiendo los mismos procedimientos hasta que se complete el menú.

El paso final en la revisión de nuestro menú de navegación es agregar una secuencia de comandos para garantizar que los elementos de nuestro menú se muestren inicialmente sin dilaciones.

Si su sitio no está obteniendo los resultados que desea, una posible razón podría ser que su sistema de navegación es más complejo de lo que debería ser.

Reducir la complejidad del menú es un paso importante para mejorar la usabilidad del sitio. Al facilitar que los usuarios encuentren sistemas complejos, será recompensado por más visitantes recurrentes y posiblemente más referencias.

Bogdan Rancea

Bogdan es miembro fundador de Inspired Mag, habiendo acumulado casi 6 años de experiencia durante este período. En su tiempo libre le gusta estudiar música clásica y explorar artes visuales. También está bastante obsesionado con los fixies. Ya es dueño de 5.