Experiencia de Usuario y Arquitectura de Información

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