En el entorno de Diseño Centrado en el Usuario, la información se organiza y estructura según: - Mapas de Contenido - Despliegue de Contenidos - Workflows de usuario

1. User Experience & Design Thinking
Máster en Diseño Multimedia
Organización de la información

2. Agenda
1. Estructura y organización de la información.
1. Documentación:
1. Mapas de contenido.
2. Inventario de contenido, despliegue de funcionalidades.
3. Workflows de usuario.

3. 3
Organización de la información
La comprensión del mundo está determinada en gran
medida por la capacidad que tenemos de organizar la
información

4. 4
Organización de la información
¿Por qué es tan difícil organizar la información de un sistema interactivo?
– Ambigüedad de la palabra sin discurso (menús).
– Difícil categorización de conceptos/objetos.
– Heterogeneidad de productos/contenidos.
• Diferentes granularidades.
• Formatos múltiples.
– Diversidad de modelos mentales en los usuarios.

5. 5
Organización de la información
Estructuras de organización
– Definen de manera primaria las formas de navegación.
– Las más utilizadas son las jerárquicas y lineales.
– Otras estructuras son:
– Circulares, en espiral, en red, dinámicas facetadas (se necesita una bbdd).

6. 6
Estructuras de organización de la información
Estructura jerárquica
• Es la más “natural” i por lo tanto la más comprensible. El usuario le es muy
fácil hacerse un modelo mental de la estructura del sistema y orientarse en
ella.
• La base de este sistema es la exclusión de categorías, y generación de
secciones, pero puede ser necesario (y no por ello contraproducente)
equilibrar la exclusión en el caso de esquemas ambiguos (temáticos, por
ejemplo) pero nunca en esquemas excluyentes (alfabético, cronológico,
geográfico…).

7. 7
Estructuras de organización de la información
Estructura lineal
• Es la típica audiovisual. El usuario visita los contenidos uno detrás de otro.
• Puede o no retroceder, dependiendo del diseño del sistema de interacción.

8. 8
Organización de la información
Estructuras de organización
– Difícilmente podremos solucionar la organización con un solo modelo.
Lo más efectivo en general es basarla en la jerárquica y complementar
con otras estructuras.
– Debemos conseguir un sistema de organización cohesivo.

9. 9
Organización de la información
Estructuras de organización
– Vamos a ver ejemplos de organizaciones cohesivas:
– Lineal + jerárquica
– http://especiales.elperiodico.com/connecting-africa-desarrollo/
– Jerárquica + lineal
– http://www.ariadnadoc.cat/https://www.ambtitol.cat
– http://histography.io/
– En red
– https://www.ambtitol.cat
– http://troubled-waters.net/index-EN.html

10. 10
Mapas de contenido
• Consiste en la representación de la estructura de contenidos, que debería
corresponder con el mapa mental del usuario.
• Se describen relaciones conceptuales entre los diversos items de contenido
(nivel de página), no la navegación en detalle entre ellos.

11. 11

12. 12
Mapas de contenido
Recomendaciones para la elaboración:
■ Preveer una simbología para cada tipo de ítem:
– Página estática, página dinámica, relación, elementos de contenido,
download, elementos interactivos, grupos de páginas...
– Aprovechar los atributos de color.
■ Ser consistentes con la simbología e incluir una leyenda.
■ Separar diferentes secciones lógicas en diferentes páginas si es
necesario, con el uso de conectores.
■ Utilizar referencias jerárquicas y mantener las mismas en el despliegue
de contenidos y prototipos.

13. 13
Mapas de contenido
El mejor mapa es el que representa de la manera más simple y completa la
organización conceptual entre las pantallas de la interfaz.
■ No existe un solo modelo, pero debemos tener en mente las personas
que lo tendrán que interpretar.

14. 14
Inventario o despliegue de contenidos y funcionalidades
■ El inventario de contenidos puede ser una simple lista o puede llegar a ser
una hoja donde se define:
– Contenido y funcionalidades.
– Referencia o identificador.
– Localización
• Jerarquia y chunking
• URL
– Audiencias y permisos.
– Clasificación a escenarios.
– Formato.
– Referencia al documento fuente.
– Información complementaria de cada item.
– ...

15. Workflows de usuario
■ La definición de procesos de usuario consiste en la descripción detallada
mediante diagramas de flujo, de cómo funcionarán las áreas donde existen
procesos de usuario, transacciones e interactividad.
■ Los diagramas de flujo son el eslabón necesario entre la estructura
conceptual de los mapas de contenido y el diseño estructural de las pantallas
de los wireframes.
■ El punto de partida es la identificación de escenarios que puedan albergar
transacciones o procesos interactivos con cierta complejidad para el usuario.
15

16. Workflows de usuario
Recomendaciones:
■ Recordar que se describen flujos de tareas de usuario, no flujos de datos
entre cliente-servidor, aunque en ocasiones se decide añadir alguna
información de este tipo.
■ Toda tarea tiene un principio y un final. Marcarlos.
■ Diferenciar pasos principales y secundarios cambiando algún atributo de los
símbolos o lineas.
Inicio final
Carrito Identificación
Inscripción
Revisión
pedido
Revisión
pedido Pago
Modificación
pedido
16

17. Workflows de usuario
■ Ciertas condiciones suelen representarse con un rombo. No seguir
necesariamente un sistema binario (si, no).
■ Cuando sea posible, nombrar los procesos y pasos con las referencias del
mapa de contenidos.
Carrito Identificación
Inscripción
Revisión
pedido
Revisión
pedido
Usuario identificado
0. inicio
1. Catálogo 2. Carrito
2.0 Carrito 2.1 Identificación
2.1.1 Inscripción
Revisión
pedido
2.2 Revisión
pedido
Usuario identificado
17

18. Workflows de usuario
■ Agrupar pasos en áreas funcionales.
■ No cruzar líneas. Como los mapas de contenido: completo pero simple.
18

19. 19
Workflows de usuario
■ Puede ser útil detallar errores de usuario y la información que requiere el
usuario.
0. Entrada
Inicio sesión
He olvidado mi contraseña
Es 1ª sesión
Hay datos
erróneos
NO
SI
Inicio
5. Mis Datos
SI
Formulario de Datos del Usuario y
Acceso.
Mensaje de error situado a la
cabecera del formulario:
Debe cambiar la contraseña
por una personal que le sea
fácil de recordar.
Ha cambiado
la contraseña
Ha escrito
pregunta y
respuesta
Mensaje de error situado a la
cabecera del formulario:
Debe seleccionar o escribir una
pregunta y su respuesta. Esta
pregunta se le hará en el caso
de que olvide su contraseña y
debe mantener la respuesta en
secreto.
NO
SI
NO
SI
1. Inicio
Fin
NO
0.0. Identificación
Entrar
ID usuario
Contraseña
Formulario de identificación de usuario y
acceso
Cancelar
Los datos de identificación no son
válidos
Tercer intentoNO
SI
He olvidado mi contraseña
0.1. Recuperación Contraseña
Fin
Proceso de petición de
contraseña temporal
El usuario debe
obligatoriamente
escoger una
pregunta, escribir la
respuesta y cambiar
la contraseña
temporal por una
personal