Kitabı oku: «Integración de la funcionalidad en productos multimedia. ARGN0110», sayfa 3
3.2. Navegación
Cuando un usuario abre una aplicación multimedia, tendrá un número determinado de páginas o pantallas estructuradas de algún modo y accesibles desde la pantalla de inicio. La forma de acceder a estas pantallas se denomina navegación y es uno de los puntos principales que determinan el grado de interactividad de la aplicación.
Recuerde
Se considera página o pantalla, a la unidad informativa integrada en un interfaz interactivo donde se exponen unos determinados contenidos como imágenes, textos, controles de navegación, reproductores, etc.
Existen distintas formas de estructurar la aplicación en función de la navegación; estas se describen a continuación.
Lineal
Se accede a las pantallas a partir de una inicial, secuencialmente, una detrás de otra y permitiendo en muchos casos, volver a la pantalla anterior. Esta estructura obliga al usuario a seguir un camino predefinido y por tanto recibir la información en el orden adecuado. Está indicada para aplicaciones multimedia de tipo pedagógico, como cursos de idiomas, mecanografía, etc.
Lineal ampliada
Permite realizar una navegación lineal, pero con la posibilidad de visitar pantallas anteriores, saltar pantallas, acceder a pantallas alternativas, y lo que es más importante, volver en cualquier momento a la pantalla inicial.
Jerárquica o en árbol
Se basa en el concepto de estructura de árbol, donde el acceso a las distintas pantallas se realiza desde una pantalla inicial, también llamada pantalla “raíz”, a través de la cual los caminos van bifurcándose. Esto ofrece como ventaja dar al usuario la libertad de acceder ordenadamente a un contenido muy amplio.
Tiene como principal desventaja que en función del contenido, cuanto más profundo sea, el usuario tendrá que pulsar más veces en los enlaces para acceder a una determinada pantalla.
Existe la posibilidad de ampliar el número de enlaces en la página de inicio, con lo cual el usuario tendrá que hacer menos “clicks” para llegar a una determinada pantalla, aunque en su detrimento este sistema tiende a recargar la pantalla de inicio. Esta idea se denomina árboles anchos.
Malla y malla completa
La estructura de tipo malla permite múltiples accesos entre las distintas pantallas, siendo una combinación entre la estructura jerárquica y la lineal. Si la aplicación permite una navegación donde cada página está vinculada con todas las demás, se dice que usa una estructura de tipo malla completa. El número de vínculos totales, resultará de multiplicar el total de páginas, por el total de páginas menos una.
Hipertextual
Tiene como principal característica el uso de enlaces de texto (hipertexto) para acceder a los distintos contenidos. Un ejemplo son las enciclopedias on-line con un amplio número de enlaces. El usuario puede navegar siguiendo distintos caminos, como se ha explicado en los tipos anteriores.
Nota
En las enciclopedias on-line el hipertexto permite reunir un amplio conocimiento, estructurándolo y relacionándolo en grupos temáticos diferentes, mediante enlaces que dan al usuario la posibilidad de navegar libremente, en función de las relaciones que se establezcan.
Por tanto, siguen unas estructuras de navegación mucho más complejas que las que hemos visto, y en todo caso se aproximan a usar estructuras de tipo malla completa.
Cuando se utiliza el texto como sistema de navegación es necesario definir las etiquetas con el fin de estructurar el recorrido por los distintos temas de la aplicación, tal y como ha sido especificado por el cliente y que esta cumpla con los objetivos de accesibilidad y usabilidad.
Nota
Las etiquetas son entendidas en este ámbito como el texto que tiene atribuida la función de poder dirigir al usuario a un determinado contenido una vez que se pincha en él.
Por otro lado se habla de “etiquetas” en el contexto de la programación web, para referirse al “lenguaje de marcado” o de “etiquetas” que es aquel que permite diseñar documentos con un contenido formateado y visualizado de una determinada manera mediante etiquetas.
El lenguaje de etiquetas más conocido hoy día es el HTML (“HyperText Markup Language”, Lenguaje de marcado de hipertexto), base del World Wide Web.
Cada etiqueta tendrá un nombre, un texto o la palabra o frase en sí, un estilo y el vínculo que es la pantalla de la aplicación a la que se accede al pulsar en ella.
Las etiquetas se clasifican en:
1 Etiquetas principales: son las que definen el acceso a las pantallas o temas más importantes de la aplicación. Es buena práctica que estos elementos estén etiquetados a través de hipertexto, aparte de los sistemas tradicionales como los menús de navegación.
2 Etiquetas alternativas: son las que permiten de manera alternativa a los enlaces principales, acceder a un determinado contenido, como por ejemplo las etiquetas “Anterior”, “Siguiente”, “Volver”, “Leer más”, etc.
3 Etiquetas hipertextuales: es el hipertexto propiamente dicho, que permite acceder a cualquier contenido de la aplicación mediante vínculos. Por regla general suelen tener el estilo de texto azul que se subraya automáticamente cuando el usuario pasa el puntero del ratón sobre ella.
4 Etiquetas de cabeceras o títulos: tienen el formato de título, por lo que además de cumplir la función semántica, permiten mostrar el contenido completo de aquellas pantallas que aparecen resumidas. Es similar a la función de la etiqueta “Leer más”.
5 Etiquetas funcionales: son aquellas etiquetas que tienen asignada una determinada función, distinta de las comentadas anteriormente. Por ejemplo, en una pantalla donde aparece un formulario, una etiqueta que sirva para enviar el formulario.
6 Etiquetas del sistema de índice de ayuda: son las etiquetas que presentan la ruta desde la página o pantalla inicial hasta la que nos encontramos. Normalmente aparecen en la parte superior de la pantalla, o en un lugar visible. Son muy comunes en las páginas web, ya que además permiten la navegación a pantallas o contenidos anteriores.Ejemplo de etiquetas del sistema de índice de ayuda
7 Etiquetas embebidas: una etiqueta embebida es aquella cuyo enlace direcciona a un contenido existente en la misma pantalla, página o nodo, de forma que se produce una relación entre contenidos relacionados semántica o contextualmente.
Definición
Nodo
Elemento que posee entidad propia, dentro de un conjunto interconectado de iguales o similares y que puede ser accedido a través de un elemento superior (padre), inferior (hijo) o del mismo nivel (hermano). Los nodos permiten estructurar un árbol de contenido, y al menos debe existir un nodo inicial llamado también nodo raíz.
Actividades
13. ¿En qué se diferencian las etiquetas de títulos de las etiquetas principales?
14. ¿Puede definirse un sistema de navegación jerárquico mediante hipertexto? ¿Es recomendable?
Hay un concepto reciente, denominado hipermedia, que se define como la unión de sistemas hipertextuales con contenidos multimedia. Una página web actual que incluya contenidos multimedia cumple con esta idea, aunque no todas las páginas web son de tipo hipermedia.
El hipertexto requiere unos conocimientos adicionales por parte de los usuarios, pues la información que se muestra aparte de su sentido didáctico o informativo, tiene como funcionalidad añadida que permite la navegación.
Por tanto, cuando se diseña un producto editorial multimedia que use el concepto de hipertexto (hipermedia) es necesario planificar el sistema de navegación de manera que el usuario no se desoriente en un espacio súper conectado.
El hipertexto, en sus distintas variantes, es una buena forma de ofrecer una alternativa, accesible y usable, a la navegación tradicional construida a partir de botones, menús, etc., aunque normalmente una aplicación implementa su estructura de navegación mediante botones o menús de navegación y la estructura de hipertexto se construye adicionalmente.
Independientemente del diseño de dichos botones o menús, estos deben presentar tres estados que identifican las acciones interactivas permitidas.
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).
3.3. Árbol de contenidos
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”).
Actividades
15. Si una aplicación multimedia tiene una pantalla de inicio desde la que se puede acceder, por estructura de malla completa, a 10 páginas más, ¿cuántos vínculos o enlaces se necesitan para interconectar todas las pantallas?
Dependiendo de la complejidad del proyecto multimedia, hay varias formas alternativas al dibujo con lápiz y papel, de esbozar el árbol de contenido, antes de implementarlo.
Se pueden usar herramientas gráficas incluidas en programas tales como Microsoft Word, Micrososft Powerpoint, Microsoft Visio, ABC Flowchart, Adobe Illustrator, SmartDraw, CMapTools, etc. Algunas herramientas son gratuitas como EDraw. Otras son on-line, como Draw.io, Creately, Mindomo o Gliffy, es decir han de ser usadas con un navegador web y con conexión a internet. La mayoría de estas aplicaciones son muy fáciles de manejar.
Ejemplo de árbol de contenido diseñado con la aplicación CREATELY
Sabía que...
Hoy día están apareciendo muchas herramientas de diseño y creación multimedia on-line. Se usan con un ordenador conectado a internet, accediendo a la página web de dicha herramienta y usándola desde el mismo navegador. En algunos casos hay que registrarse y en otros se pueden usar directamente, incluso de manera gratuita.
Aplicación práctica
Tras aceptar la elaboración de un proyecto editorial multimedia sobre un pequeño país de África, nos reunimos con el cliente que nos encarga la aplicación, el cual nos especifica que los contenidos que se van a incluir son:
Una pantalla principal desde la cual se puede acceder a las áreas de “Un poco de historia”, “Mitos y leyendas”, “Galería”, “Recetas” y “App”. La “Galería” tendrá disponible el acceso a una zona de “Imágenes” y otra de “Vídeos”. De la sección “Un poco de historia” se puede acceder a los temas (conectados entre sí por parejas) de: “Ubicación geográfica” y “Organización económica”, “Viviendas” y “Lenguaje”, “Organización social” y “Arte y artesanías”.
Dibuje el árbol de contenidos que permite acceder a los temas solicitados. ¿Qué tipo de navegación es la que mejor se adapta al proyecto?
SOLUCIÓN
El árbol de contenidos sería el siguiente:
Este árbol puede implementarse mediante un menú fijo que permita una navegación jerárquica, donde del submenú “Un poco de historia” se desprenda una malla de contenidos –puede ser un submenú con seis opciones– y del submenú “Galería” se desprendan las opciones de “Imágenes” y “vídeos”.
3.4. Sistema de mensajes y ayudas
Los conceptos de interactividad, accesibilidad, usabilidad y retroalimentación descritos anteriormente son reforzados en una aplicación multimedia por el sistema de mensajes y ayudas. El objetivo de estos es ofrecer al usuario una comunicación útil sobre el uso de la aplicación y la resolución de determinados problemas. Son totalmente interactivos, pues se mostrarán en función de las acciones realizadas por el usuario o bien por la demanda de asistencia.
Ejemplo de ventana de ayuda que ocupa la parte central de la aplicación.
Estos sistemas han de seguir el estilo visual, funcional e interactivo de la aplicación. Son de especial importancia en algunos tipos de diseños multimedia, como las aplicaciones didácticas, programas infantiles, guías de viaje, etc. Pueden ser de dos tipos: activos o interactivos, y pasivos o no interactivos.
Activos o interactivos
Los mensajes y ayudas surgen de manera pseudo-inteligente, en respuesta a las acciones de los usuarios. Por ejemplo, si un usuario está realizando una acción incorrecta en el manejo de la aplicación o solicita ayuda.
Pasivos o no interactivos
No dependen de las acciones de los usuarios. Por ejemplo, un texto informativo al lado de un botón: “Pulse aquí para ver el vídeo”.
Para diseñar el sistema de mensajes y ayudas hay que considerar las siguientes cuestiones:
1 Implementar el sistema de mensajes y ayuda de la aplicación tiene un determinado coste (tiempo de trabajo, uso de recursos, etc.). Se reduce considerablemente la necesidad de hacerlo, diseñando la aplicación multimedia de forma que sea lo más intuitiva posible y que cumpla los aspectos básicos de accesibilidad y usabilidad.
2 En caso de tener que implementar un mensaje de ayuda asociado a un determinado elemento, puede ser suficiente con una información iconográfica o un texto muy conciso cerca del mismo.
Por otro lado, estos sistemas se diseñan mediante los siguientes elementos:
1 Evento que abre el elemento de mensaje o ayuda, en función de un determinado comportamiento por parte del usuario.
2 Marcos o ventanas contenedoras del mensaje o botón de ayuda.
3 Botón de acción que sirva para cerrar la ayuda.
4 Textos muy claros, concisos y fáciles de aprender.
5 Iconos o representación gráfica de ayuda.
6 Secuencia sonora que represente el mensaje o la ayuda, para mejorar la accesibilidad a la misma.
7 Secuencia de vídeo que represente el mensaje o la ayuda, para mejorar la accesibilidad a la misma.
8 Acción que cierra la ayuda transcurrido un tiempo.
Nota
El concepto de evento es una de las “piezas” fundamentales de la programación de aplicaciones interactivas, en las que se define la ejecución de una determinada acción, en función de la ocurrencia de un evento.
Un ejemplo muy claro lo observamos a la reproducción de un vídeo, que sucede cuando el usuario pulsa sobre el botón de reproducir. El evento es la captura de esta acción realizada por el usuario.
Actividades
16. Describa al menos qué cuatro elementos pueden componer una sencilla ventana de ayuda.
17. ¿Cuál es la principal diferencia entre los sistemas de mensajes y ayuda interactivos y los no interactivos?
