Experiencia de Usuario y Arquitectura de Información

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.