Juan Luis Perles García - Integración de la funcionalidad en productos multimedia. ARGN0110

Así un botón o elemento de menú puede estar activado –puede usarse-, desactivado –no puede usarse– y encendido –se ha colocado el puntero del ratón en él y transmite al usuario la idea de que está activado–.

Ejemplo de cuatro botones de navegación donde los tres primeros están activos, y el cuarto está desactivado. El segundo botón y tercer botón están encendidos pues el puntero del ratón se sitúa en ellos.

Nota

Algunos autores usan los términos habilitado o deshabilitado cuando un botón o elemento de menú está activado o desactivado respectivamente.

Cuando se diseña la interfaz, en lo que se refiere a los elementos de navegación, es necesario que la función de cada botón esté perfectamente indicada, que no sea ambigua y que sea comprendida por el usuario fácilmente, retroalimentando el uso y conocimiento de la misma.

Aplicación práctica

Se nos encarga diseñar una sencilla interface para la visualización de contenidos multimedia que básicamente, es un curso sobre el programa Microsoft Excel, a través de texto, video-tutoriales e imágenes y optamos por diseñar una pantalla en la que la navegación será hipertextual.

Teniendo en cuenta que se usará un menú de navegación principal en la parte izquierda, basado en texto, etiquetas del sistema de índice de ayuda, etiquetas alternativas, hipertextuales y de cabeceras o títulos, realice un boceto del interface usando el procesador de texto. Ofrecer una solución que permita la navegación de tipo “malla completa”.

SOLUCIÓN (Posible solución)

Con la interface que se muestra en la siguiente imagen, puede accederse a todos los contenidos de la aplicación, por tanto posibilita la navegación de tipo “malla completa”.

Solución del ejercicio donde se muestra la interfaz que cumple con los requisitos pedidos (Realizada en Microsoft Word).

Un árbol de contenidos es un gráfico o esquema diseñado para definir la estructura de un determinado producto multimedia. En él se especifican las secciones principales del proyecto y qué camino(s) sigue la navegación desde la pantalla de inicio hasta cualquiera de las pantallas que lo forman. Es especialmente útil para proyectos grandes o complejos que contienen muchas partes o temas y no debe confundirse jamás con el diseño de la interfaz.

En la foto anterior cada rectángulo se considera un nodo. El nodo de “Inicio” es la primera pantalla mostrada una vez que acaba la “animación inicial” o “intro” (la cual no debe considerarse nodo). Se aprecia la estructura jerárquica donde “inicio” es el padre de los demás nodos: significa que para acceder a “productos” habrá que pulsar sobre el enlace correspondiente situado en la pantalla de “Inicio”, y de igual forma para acceder a “Aplicaciones” hay que pulsar antes en “Productos”.

“Productos” se dice que es un nodo hijo de “Inicio” y a su vez “Aplicaciones” es un nodo hijo de “Productos”. “Inicio” es un nodo padre de “Productos” y “Productos” es un nodo padre de “Aplicaciones”. “Empresa”, “Productos” y “Contacto” son entre sí, nodos hermanos.

El árbol de contenidos de la foto nº 30 puede también especificarse de manera textual, usando la tabulación. El resultado sería:

Nota

Se puede diseñar cualquier árbol de contenido usando un simple procesador de texto. Mediante tabulaciones, es decir, posiciones fijas hacia las que se mueve el cursor cuando se pulsa el tabulador, se establece el orden jerárquico de dicho árbol.

Si en este ejemplo, hacemos que desde “Empresa” se pueda navegar a los apartados de “Quienes somos”, “Nuestra historia” y “Delegaciones”, y desde “Delegaciones” a los apartados o pantallas de “Andalucía”, “Cataluña” y “Madrid”, el árbol de contenidos queda como se muestra en la siguiente imagen.

Árbol de contenido del ejemplo, generado mediante la aplicación on-line “ http://cssmenumaker.com” mediante la cual se ha desarrollado el menú de navegación que sirve para implementar dicho esquema (en el menú se despliega el submenú productos hacia arriba para facilitar su interpretación, pero lo normal siempre es hacerlo hacia abajo o de izquierda a derecha).

La principal utilidad de un árbol de contenidos es que permite diseñar la organización de la información y su acceso, de modo que su implementación, normalmente a través de un menú de navegación y sus respectivos submenús –como se ha visto en la imagen anterior–, sea clara y no tenga errores. El problema más frecuente que se da cuando se diseña un árbol de contenidos, es el desequilibrio entre su amplitud y profundidad.

Definición

Submenú

Un submenú es cualquier menú desplegado a partir de un menú principal o de otro submenú –es decir un menú dentro de otro menú–. Sirve para agrupar de manera ordenada los diferentes accesos a los múltiples contenidos de la aplicación.

Una estructuración jerárquica de contenidos se implementa mediante un menú de navegación compuesto por los enlaces a los temas principales, y los submenús que permiten enlazar al resto de páginas o pantallas.

Amplitud es el número de pantallas de igual jerarquía (nivel o nodos) a las que se puede acceder desde la pantalla de inicio y se valora horizontalmente. Una gran amplitud implica tener muchos enlaces en la pantalla de inicio lo que puede “marear” y confundir al usuario, y estos enlaces, por lo general tendrán también mucha información que ofrecer.

Profundidad es, contrariamente, el concepto vertical que indica el número máximo de pantallas de distinta jerarquía, al que se puede llegar. Cuanta más alta sea la profundidad, mayor será el número de “clicks” que el usuario tendrá que hacer para llegar a un determinado contenido.

Ejemplo de árbol de contenido implementado en un menú superior, donde la amplitud es seis (“Home”, “About us”, “Products”, “FAQ’s”, “Privacy” y “Contact us”) y la profundidad máxima es cinco (despliegue del menú que más elementos tiene: “products”).