% Vocabulario visual para arquitectura de información y diseño de interacción
Un vocabulario visual es un conjunto de símbolos usado para describir algo (usualmente un sistema, estructura o proceso; en nuestro caso, un sitio web).
- Compatible con pizarra blanca. Tan simple que los diagramas puedan ser dibujados rápidamente a mano.
- Independiente de herramientas. No requerir de software especializado.
- Pequeño y auto-contenido. El total de los elementos debe ser mantneido al mínimo posible, manteniendo una estricta relación uno a uno entre conceptos y símbolos, para que el vocabulario pueda ser aprendido y aplicado de forma rápida.
La página es la unidad básica
de la experiencia de usuario en la web.
Además de páginas, también podemos tener archivos o documentos, o parcelas de datos sin propiedades de navegación. Estos archivos son entregados al usuario para su uso fuera de un navegador web.
Las pilas de páginas o documentos se utilizan para indicar un grupo de elementos con las mismas funcionalidades y con el mismo acceso a través de la navegación, que pueden ser clasificadas como una entidad única (una colección de manuales de instrucciones en PDF, por ejemplo).
Usamos etiquetas en páginas y archivos para identificarlos. No hace falta que se correspondan exactamente con los títulos finales, pero sí es importante que sean un identificador único.
Las relaciones entre elementos se indican mediante líneas simples o conectores (con flechas). Es importante recordar que, aunque todas estas relaciones se traducirán en relaciones de navegación, no todas las relaciones de navegación aparecerán en el diagrama.
relación ≠ navegación
Cuando diagramamos diseño de la interacción, las líneas también deben indicar dirección para especificar cómo se moverá el usuario a través del sistema para una tarea específica.
. . .
Esto puede hacerse utilizando flechas, sin que la direccionalidad impida al usuario moverse en el sentido opuesto.
. . .
Los conectores y flechas también se pueden etiquetar, pero sólo en el caso de que sea imprescindible. Si las etiquetas son largas, son muchas y/o comienzan a sobrecargar el diagrama, se puede apuntar al lector hacia una nota al pie o una referencia en un anexo.
Se usan cuando una acción del usuario genera resultados múltiples simultáneamente, como abrir una ventana pop-up mientras se carga otra ventana en la página principal, o mostrar una página mientras se descarga un documento.
Permiten separar el diagrama en conjuntos que sean fáciles de comprender y asimilar.
. . .
Las áreas identifican un grupo de páginas que comparten uno o varios elementos comunes (que deberían ser identificados por etiquetas).
También puede ocurrir que queramos repetir la misma estructura básica porque se aplica a una serie de elementos funcionalmente idénticos (como un catálogo de productos con varias páginas asociadas a cada uno).
Los conectores y flechas no apuntan al área, que sirve solamente para encerrar una serie de páginas.
Algunos diseños de interacción requieren una secuencia de pasos que se repita en diferentes contextos (como un procedimiento de login, por ejemplo). Estas tareas reutilizables se denominan flujos (flow), y se representa en el diagrama mediante dos elementos:
- el área de flujo, que encierra el flujo mismo, y
- la referencia de flujo, que sirve para identificarlo.
Las áreas de flujo funcionan de manera muy similar a los puntos de continuación. La diferencia es que una referencia de flujo puede utilizarse como continúa desde y continúa hacia, mientras que un punto de continuación sólo puede ser una cosa o la otra.
En una estructura dinámica, el sistema decide qué opciones y resultados se le presentan al usuario en función de una o más condiciones (relativas al usuario, a la sesión, el contenido mismo, o de otro tipo).
Generalmente, para simplificar la visión de los diagramas, las condiciones se describen en notas al pie o anexos.
Cuando una acción del usuario puede generar uno de varios resultados (como por ejemplo, un error tras el envío de un formulario), el sistema debe decidir qué resultado presentar.
Cuando existen caminos que se presentan al usuario dependiendo de si se cumplen una o más condiciones. Por ejemplo, información visible sólo para usuarios logueados.
Cuando se debe seleccionar una serie de opciones mutuamente excluyentes.
Es parecido a los puntos de decisión pero se diferencia en que en este caso el sistema decide la opción que se mostrará al usuario antes de que éste realice ninguna acción.
No es fácil encontrar ejemplos de este tipo de elemento.
Es parecido a las rama condicionales salvo que en este caso las opciones no son mutuamente excluyentes; se le presentan al usuario todas las opciones que respondan a las condiciones establecidas.
. . .
La aplicación más común son los resultados de búsqueda.
Los racimos (más de un camino basado en ciertas condiciones) aparecen después de una rama condicional o un selector condicional.
También resulta difícil encontrar ejemplos en la vida real.
Cuando se aplican una o más condiciones a un grupo de páginas, se encierran en un área condicional.
Se usan generalmente para situaciones que requieren permisos de acceso (como un login o conexiones seguras).
A diferencia de otros tipos de áreas, se asocian con un resultado que se generará en el caso de que no se cumplan las condiciones para el acceso a ese área.
- Guías de referencia rápida: cheatsheet y quickref
- Ejemplo MetaFilter, IA de ejemplo
- Aplicaciones online: Gliffy, draw.io