Arquitectura de Información Diseñando experiencias de usuario con bases sólidas
Juan David Saab Arquitecto de Información
Arquitecto de Informaciรณn y Consultor UX
@juansaab
¿En quién se centra el diseño?
“Hemos logrado un diseño realmente innovador”
DiseĂąo Centrado en el DiseĂąador
“Cumplimos con los casos de uso�
Lo anterior es un sĂntoma de...
DiseĂąo Centrado en el Desarrollador
“Yo quiero algo más dinámico. ¿No le podemos poner musiquita?”
“Ninguno de los 30 campos del formulario de registro sobra, necesitamos recopilar datos” “Es que si usamos vínculos externos en una misma ventana perdemos usuarios” “¿Cómo?... El área de Desarrollo, Macro Gestión y Posicionamiento Socio-estratégico no está en el menú principal”
Lo anterior es un sĂntoma de...
DiseĂąo centrado en el Cliente
ÂżPlanes... de estudio?
ÂżPlanes... de estudio?
El cliente NO siempre tiene la razรณn
DiseĂąo Centrado en el Usuario
DCU
Un enfoque en el cual se ubica al usuario en el centro de cualquier decisión de diseño.
Organización
Usuarios
Un enfoque en el cual se ubica al usuario en el centro de cualquier decisión de diseño.
Organización
Usuarios Personas
¿Qué hace realmente bueno a un sitio web?
Una definiciรณn basada en una serie de capas o niveles...
Jesse James Garret (2000) - http://www.jjg.net/elements/pdf/elements.pdf
Los elementos de la Experiencia de Usuario (UX)
Una definiciรณn basada en la convergencia de facetas...
Peter Morville (2004) - http://semanticstudios.com/publications/semantics/ 000029.php
Panel de Morville
Arquitectura de Informaciรณn y su aporte a la Experiencia de usuario
ÂżCuĂĄnto afecta una mala AI a los usuarios?
Jakob Nielsen (2009) - http://www.useit.com/alertbox/ia-failures.html
¿Qué es Arquitectura de Información?
Arquitectura de InformaciĂłn
“
Una disciplina que trata de organizar contenidos y objetos, describirlos claramente y brindar a las personas mecanismos para poder encontrarlos
El arte de hacer la informaciรณn fรกcil de encontrar
¿Porqué es importante la Arquitectura de Información?
¿Qué debemos conocer?
Usuarios
Contexto
Contenido
¿Cómo hacer una AI?
Una de las tantas formas...
En 7 Pasos
Documento GuĂa
1
El fundamento Antecedentes Objetivos del sitio Objetivos de conversiĂłn Usuarios y sus necesidades Lluvia de ideas Usuarios
Contexto
DiseĂąo emocional
DiseĂąamos para personas
Seres humanos con motivaciones, necesidades y temores.
Seres emocionales
INCORPORANDO LO HUMANO A LOS OBJETIVOS
Escasez
Tendencia a coleccionar
Opciones limitadas
Reciprocidad
Pequeños detalles
Efecto estético-usable
Benchmarking Conociendo el contexto Selecci贸n de sitios
2
Definici贸n de criterios Evaluaci贸n cuantitativa Evaluaci贸n cualitativa Comparativo y conclusiones Contenido
Contexto
User research Conociendo profundamente a los usuarios
3
Definiciรณn de perfiles Definiciรณn de escenarios Tareas clave Motivaciones Factores de riesgo Contenido
Usuarios
Contexto
http://wwff.thespacer.net/blog/template-de-personajes-personas/
Estudio SEO Posicionamiento desde la perspectiva UX
4
Inventario inicial de palabras clave Determinaciรณn de potencial Palabras clave principales Contenidos sugeridos
Contenido
Usuarios
Contexto
Inventario de contenidos ¿Qué tenemos y qué necesitamos?
5
Contenidos actuales Objetivos de los usuarios Contenidos sugeridos por sitios pares Inventario final
Contenido
Blueprints Entender claramente la dimensi贸n del sitio web
6
Estructuraci贸n y rotulado inicial Definici贸n de mapa provisional Pruebas sobre mapa provisional Propuesta final de mapa de navegaci贸n
Sistemas de organizaciรณn
Qué es Arquitectura de Información Sistemas de Organización: Alfabético
Qué es Arquitectura de Información Sistemas de Organización: Cronológico
Qué es Arquitectura de Información Sistemas de Organización: Geográfico
Qué es Arquitectura de Información Sistemas de Organización: Temático
Qué es Arquitectura de Información Sistemas de Organización: Orientado por perfiles*
Qué es Arquitectura de Información Sistemas de Organización: Facetado
Qué es Arquitectura de Información Las personas exploramos…
QuĂŠ es Arquitectura de InformaciĂłn o preguntamos
Qué es Arquitectura de Información Sistemas de Navegación
Sistemas de Navegaciรณn: Jerรกrquico
Sistemas de Navegaciรณn: Global y local
http://www.uc.cl/es/futuros-alumnos
Sistemas de Navegaciรณn: Global y local
Sistemas de Navegaciรณn: Contextual
Sistemas de Etiquetado
Qué es Arquitectura de Información Sistemas de Etiquetado
http://www.udd.cl/admision/
Obtener esquemas de catalogación más acertados
Card Sorting A. Abierto: el usuario puede agrupar las categorías libremente. B. Cerrado: Los grupos o conjuntos están predefinidos. El usuario deberá colocar cada categoría en el grupo que corresponda. http://uxpunk.com/websort/ http://www.syntagm.co.uk/design/syncapsv2.shtml http://www.uxsort.com/
Métodos de Arquitectura de Información Sitemap
Muestra la agrupación, clasificación y jerarquía de los contenidos.
Probar un sitemap
Tree testing A. Se solicita al usuario que realice tareas sobre una estructura de navegaciรณn. B. Se mide cualitativamente el nivel de comprensiรณn de las personas frente a la estructura y la efectividad de nuestra propuesta.
Wireframes Las maquetas o bocetos Necesidades de los usuarios
7
Estructuras de navegaciรณn Prototipos de baja resoluciรณn Pruebas con usuarios Prototipos finales
AnatomĂa de una visita
Convenciones de navegaciรณn
¿Dónde estoy?
Patrón de lectura en “F”
Wireframe de baja
Algunas directrices importantes
MĂŠtodos de investigaciĂłn con usuarios
[Practical IA - Donna Spencer; 2012]
Caso de estudio
Parques Nacionales Naturales de Colombia
Investigadora y Bióloga
Colombiana
¿Cuáles son los parques que tienen lagunas? ¿Cómo obtengo un permiso para tomar muestras?
Documentalista
Extranjero
¿Cómo puedo obtener un permiso de grabación? ¿Cuáles son los parques con mayor diversidad de especies?
Profesor
Colombiano
¿Cómo puedo llegar al parque desde el colegio y a qué distancia está? ¿Hay recorridos guiados para colegios?
Madre de familia
Colombiana
¿Cómo puedo llegar al parque? ¿Es posible acampar, hay parqueadero, cuánto cuesta?
Auditor de Gobierno
Colombiano
¿En qué invirtió esta entidad el presupuesto del año pasado? ¿En qué lugar están los servicios al ciudadano?
¥A trabajar! •
Formen grupos de 2, 3 o 4 personas.
•
Elaborar un personaje
Tiempo de trabajo: 15 minutos
Consejos 1. Entiendan todo el contenido y armen agrupaciones de alto nivel 2. Definan el menú principal del sitio y cualquier otro menú o estructura de navegación que vaya a existir. 3. Valoren la propuesta en función de objetivos de negocio y hallazgos.
¡A trabajar! •
Formen grupos de 2, 3 o 4 personas.
•
Elaborar las estructuras de navegación (en papel)
Tiempo de trabajo: 30 minutos
Contenido adaptativo
Fragmentar nuestro contenido en diferentes experiencias “optimizadas por dispositivo� es una mala propuesta, o al menos una insostenible. — Ethan Marcotte Responsive Web Design
Content everywhere!
Contenido + Presentaciรณn = Un matrimonio fallido
Create Once Publish Everywhere
El modelo de contenido (Content Model)
Relaciones y estructura
¿Cómo comenzar a construirlo? • Definición de entidades (tipos)
• Definición de relaciones:
Requiere, puede tener • Definición de multiplicidades
1, muchos
ÂżCĂłmo comenzar a construirlo?
Especificar la estructura
• Definición de atributos
• Trozos en lugar de estructuras monolíticas
Especificar la estructura
¡A trabajar! •
Formen grupos de 2, 3 o 4 personas.
•
Elaborar un modelo de contenido (en papel)
•
Generar el detalle de 1 parque
Tiempo de trabajo: 15 minutos
“Mobile first design�
Graceful degradation Progressive enhancement
User context!
Necesidades y contexto
Necesidades y contexto
Patrones de diseĂąo Layouts
Fluido
http://mediaqueri.es/ala/
Colocaciรณn de columnas
https://modernizr.com/
Layout shifter
http://foodsense.is/
Tiny tweaks
http://futurefriendlyweb.com/
Off canvas
http://www.html5rocks.com
¡A trabajar! •
Formen grupos de 2, 3 o 4 personas.
•
Elaborar wireframes de baja para las 5 páginas. Escoger una estrategia mobile.
Tiempo de trabajo: 1 hora
Patrones de diseĂąo NavegaciĂłn
Navegación en pestañas
✓
Separan el contenido en secciones claramente definidas y brindan información sobre la ubicación actual del usuario.
✓
Usarlas preferiblemente para nombres de categorías cortos.
✓
No ofrecer más de 9 categorías.
NavegaciĂłn en pestaĂąas
Barra de navegación
✓
Recomendada si el usuario requerirá cambiar entre pestañas con frecuencia
Menú hamburguesa
✓
Permite ahorrar espacio y su uso se encuentra muy extendido.
✓
Usar cuando el cambio entre opciones sea poco frecuente.
MenĂş hamburguesa > dashboard
Pophover
✓
Presentar accesos rápidos al usuario sin que tenga que abandonar su ubicación actual.
Overflow menus
✓
Presentar accesos rápidos al usuario sin que tenga que abandonar su ubicación actual.
Menús desplegables
✓
El usuario debe moverse entre estructuras de navegación muy amplias en un espacio reducido.
✓
Es útil si las categorías son claramente diferenciables y el usuario puede encontrar rápidamente su camino a su objetivo.
✓
Es importante aumentar el área de interacción para evitar que se colapse y generar dificultades de uso.
Ruta de migas
✓
Muestra al usuario su ubicación actual y le permite desplazarse a un nivel superior en la jerarquía.
Footer “amplio”
✓
Útil para brindar acceso a las subsecciones del árbol de navegación.
✓
Permite resaltar opciones de navegación frecuentes o proveer esquemas de navegación adicionales al principal.
Paginadores
✓
Permite navegar grandes volúmenes de información recortándolos en grupos.
✓
Tiene mayor sentido cuando existe un criterio de ordenamiento y se puede mejorar con información adicional sobre el paginador.
Patrones de diseĂąo PresentaciĂłn de contenido
Módulo de pestañas
✓
Existe contenido que puede ser separado en conjuntos que guardan algún tipo de relación.
✓
Permite mostrar información extensa en un espacio pequeño.
✓
No debería refrescar la página al cambiar de opción.
Carousel
✓
Permite mostrar muchos items de estructur similar en un espacio reducido.
✓
Utilizar principalmente en elementos altamente visuales.
✓
Tener en cuenta que se dará prioridad a los elementos visibles.
Miniaturas
✓
Permite mostrar imágenes al usuario en un espacio reducido.
✓
Evita la carga de la imagen a tamaño completo.
Galerías
✓
Permite navegar secuencialmente imágenes.
✓
Se presentan botones de avance y se usan las miniaturas como elemento de navegación.
Revelación progresiva
✓
Permitirle al usuario enfocarse en la tarea principal eliminando distracciones.
✓
Ofrecer opciones para acceder a tareas secundarias.
Tarjetas (cards)
Tarjetas (cards)
✓
Permite presentar estéticamente contenidos de diversos tipos.
✓
Exhibe los atributos más importantes para la decisión del usuario.
✓
Puede tener un comportamiento al hover o el tap.
Tablas con filtros
✓
Usar cuando la información se pueda entender mejor al separarla por ciertos atributos.
✓
Usar la parte superior para asociar filtros dinámicos.
✓
Resaltar la información crítica del tipo de contenido mostrado.
✓
Se pueden obviar en diseño las filas.
Ordenar por columna
✓
Usar en tablas de más de 10 elementos.
✓
Utilizar una flecha junto al nombre de la columna y convención de “hover” para dar contexto al usuario.
Alternar colores de fila
✓
Reduce la carga cognitiva al momento de buscar elementos.
Scroll infinito
Scroll infinito
Scroll infinito
✓
Usar cuando el foco del la interacción sea un mismo tipo de contenido.
✓
Debe anticiparse al usuario para que tenga sentido.
✓
Según la implementación puede afectar el views/visits
Filtros y bĂşsqueda facetada
Filtros y búsqueda facetada
✓
Cuando hay muchos filtros usar disposición vertical.
✓
Filtros para a atributos continuos, pueden volverse sliders.
✓
Tener en cuenta si el usuario aplicará muchos o pocos, para decidir el estado inicial.
✓
Informar claramente los filtros activos.
dashboard
✓
Condensa grupos de información importante
✓
De mayor utilidad cuando es personalizable.
✓
Tienen gran peso los criterios de tamaño y ubicación.
Patrones de diseĂąo InteracciĂłn y formularios
Validación dinámica de campos
✓
Indicar al usuario dinámicamente si los datos ingresados son correctos.
Validación dinámica de campos Verificaciones a realizar ✓
Presencia de datos obligatorios
✓
Datos no permitidos
✓
Confirmación doble (contraseñas)
✓
Validación de formato
✓
Validación de unicidad
¿Qué informar? ✓
¿Ocurrió un error?
✓
¿Dónde ocurrió el error?
✓
¿Cómo reparar el error?
Medidor de contraseña
✓
Debe actualizarse dinámicamente
✓
Debe ofrecer pistas en como mejorar el nivel de seguridad de la contraseña.
“Good defaults”
✓
Presentar valores por defecto que se ajustan a lo “más probable”
Selector de fechas
✓
Considerar el escenario más probable
✓
Ofrecer opciones por defecto que guarden lógica.
Sugerencia de entrada
✓
Usar el campo para mostrar un ejemplo de entrada.
✓
Diferenciar claramente del contenido real.
✓
Eliminar una vez el usuario interactúa con el campo.
Selector de fechas
Panel de preferencias
✓
Mostrar el estado de la preferencia de forma estándar.
✓
Presentar categorías principales en pestañas
✓
Presentar sub-categorías con subtítulos
✓
Proveer retroalimentación al guardar
Formato estructurado
✓
Facilitar al usuario la introducción de datos en un formato específico.
✓
Apoyarse en el uso de controles estándar.
Previsualización en vivo
✓
Usar cuando para el usuario es difícil imaginarse el resultado final.
✓
Utilizar preferiblemente cuando los campos tengan correspondencia real con el resultado.
Drag and drop
✓
Útil en el contexto de agregar archivos o imágenes.
✓
Ofrecer una explicación clara y una alternativa
Campos expandibles
✓
Expandir cuando el usuario realice over sobre el campo.
✓
Permite ahorrar espacio y sugerir un formato determinado.
Deshacer
MutaciĂłn de botones y controles
✓
Proveen feedback inmediato y a la vez informan.
Anticipación y flexibilidad en datos
✓
Intuir los datos a partir de una entrada del usuario que se encuentra en un formato más entendible para el y generalmente flexible.
“Llenar un vacío”
✓
Usar cuando la explicación de un campo puede ser difícil de reducir a una sola frase de etiqueta.
Autocompletado
Autoguardado
✓
La idea es prevenir perdidas de datos accidentales
✓
El patrón se puede extender a formularios de captura de datos.
Wizard
✓
Enfocar la interacción en la meta del usuario.
✓
Plantear la interacción en términos de lenguaje del usuario.
✓
Orientar paso a paso.
Indicador de progreso
Pasos por realizar
Experience maps
La experiencia no es sรณlo online
2 claves para un buen “experience map” 1. Se entiende por sí mismo (puede ser interpretado por cualquier persona)
2. Lleva a una acción clara y guía decisiones de diseño.
ÂżCĂłmo hacerlo?
The adaptive path way
1. Definir flujos y puntos de contacto
2. Definir los principios de experiencia (the lens)
2. Definir los principios de experiencia (the lens)
2. Definir los principios de experiencia (the lens)
3. Definir el “costumer journey�
3. Definir el “costumer journey�
4. Anotar los hallazgos cualitativos
4. Anotar los hallazgos cualitativos
4. Anotar los hallazgos cualitativos
5. Anotar los hallazgos cuantitativos
5. Anotar los hallazgos cuantitativos
6. Definir las posibles acciones
6. Definir las posibles acciones
6. Definir las posibles acciones
ยกGracias! @juansaab Juan David Saab www.usabilidadaldia.com
juansaabvanegas@gmail.com Skype: juan.saab www.juansaab.co