Diseño de interacción y usabilidad en móviles

Santiago Bustelo • Federico Campo Piombi

Presentación bajo licencia Creative CommonsAtribución 2.5 Argentina

IxDA (Interaction Design Association)

• Red global dedicada a la práctica profesional del Diseño de Interacción

• Foro global, 20.000 miembros

• En Buenos Aires:

• Encuentros

• Charlas

• Congresos

• Cursos

Diseño de Interacción

Define el modelo de operación de

productos interactivos para lograr

mejores experiencias para la

mayor cantidad de usuarios.

¿Cuándo está terminado nuestro trabajo?

• Cuando nos gusta a nosotros

• Cuando funciona como queríamos

• Cuando le gusta al cliente

• Cuando el usuario logra lo que esperábamos

Diseño de Interacción:Proceso

IxD: Proceso

Proceso

LinealProceso

Convergente

IxD: Proceso

Proceso

Lineal

• Definición de requerimientos.

• Diseño y desarrollo a nivel de producción.

• Entrega.

IxD: Proceso

Proceso

Lineal

• Definición de requerimientos.

• Diseño y desarrollo a nivel de producción.

• Entrega.

• No funciona como se esperaba, o no resuelve la problemática detectada.

• Se modifica la funcionalidad.

• No se modifican los deadlines.

IxD: Proceso

Proceso

Convergente

• Objetivos y análisis inicial.

Analizar el requerimiento y determinar la mejor solución.

Identificar definiciones faltantes al inicio u ongoing del proyecto, y no al final.

Asignar responsables de definiciones faltantes.

IxD: Proceso

Proceso

Convergente

• Objetivos y análisis inicial.

• Diseño y Desarrollo en iteraciones

Cada etapa es validada antes de continuar con la siguiente.

Detección temprana de errores.

Visibilidad sobre tiempos y scope.

IxD: Proceso

Proceso

Convergente

• Objetivos y análisis inicial.

• Diseño y Desarrollo en iteraciones avanzando progresivamente en:

• Funcionalidad

• Estructura y elementos

• Lenguaje visual

• Entrega y puesta en producción.

IxD: Proceso

Iteraciones delProceso

Convergente 1. Planeamiento de la iteración

Definición del problema. Qué queremos aprender de esta iteración y cómo vamos a hacerlo.

2. ImplementaciónCreación del prototipo con la fidelidad correcta

3. PruebaObtenemos información que valida o descarta la solución.

4. Conclusiones y aprendizajeQué funcionó o no, y por qué.

Jared Spool, Anatomy of an Iteration

IxD: Objetivos del Proceso

1. Externalizar y comunicar ideas para reflexionar sobre ellas.

2. Poner a prueba las ideas en contexto.

3. Validar requerimientos con stakeholders.

4. Validar la funcionalidad en el contexto de uso de la aplicación (mobile scenario).

5. Descubrir problemas y explorar nuevas direcciones.

6. Hacer esto en una fase del proyecto donde aún sea viable realizar cambios en el alcance.

IxD: Entregables del Proceso

Sketch Wireframe Prototipo Interactivo Diseño gráfico dela interfaz

IxD: Entregables del Proceso

Sketch

• Características:- Fidelidad muy baja- Permiten opinar sin restricciones- Colaborar- Probar rápidamente conceptos generales

• Objetivo:- Proponer Estructura espacial- Proponer Interactividad- Proponer Funcionalidad

IxD: Entregables del Proceso

Wireframe

• Características:- Fidelidad baja a media- Realizar anotaciones - Documentar las definiciones

• Objetivo:- Definir estructura espacial- Definir áreas de contenido- Definir funcionalidad (caso puntual mobile)- Definir flow de navegación - Permitir pruebas con usuarios

IxD: Entregables del Proceso

Prototipo Interactivo

• Características:- Fidelidad media a alta- Testear experiencia de uso sin haber desarrollado la aplicación

• Objetivo:- Proveer mecanismo para validar flow + interacción- Permitir pruebas con usuarios

IxD: Entregables del Proceso

Diseño gráfico de la interfaz

• Características:- Fidelidad alta- Documentar las decisiones

• Objetivo:

- Alinear estética de interfaz validada- Recursos gráficos para implementación

IxD: Conclusión

¿Qué ganamos incorporando IxD a nuestro workflow?

• Validar funcionalidad, interacción y flujo de la aplicación

• Identificar key issues en una etapa temprana del proyecto

• Documentar las definiciones

• Herramientas de testeo previas al desarrollo

• Salud

Pruebas con usuarios:Validación de la interacción

Diseño centrado en el Usuario versus:

• Diseño autoreferencial

• Diseño centrado en la tecnología

• Diseño centrado en el stakeholder

• Diseño centrado en la competencia

¿Qué es un Usuario?

• No está viciado por el ejercicio de la profesión ni por el proceso de conceptualización.

• Tiene o puede representar intención de usar la interfaz para lograr un objetivo.

• Tiene o puede representar el modelo mental del público al que está destinada la interfaz.

• No necesita ser una muestra demográfica.

“La prueba con el usuario no tiene que ser perfecta.Tiene que existir” (Jared Spool)

Incorporando al Usuario

• La diferencia entre probar nuestras hipótesis con cero usuarios, vs. hacerlo con un solo usuario, es infinita.

• Pruebas rápidas y de gran impacto cualitativo.

• No se toman requerimientos del usuario. Nos enfocamos en lo que el usuario hace.

Jakob Nielsen:Why You Only Need to Test with 5 Users

Prototipado iterativo

Rodolphe Courtier: Mobilist

Pruebas con usuarios

Lin Lin Designs: Explore Chicago

Prototipo funcional

Laboratorio de usabilidad

Fuentes: Usability Sciences, UserCentric, Design4Mobile

Consistencia

Mobile IxD

Aplicaciones móviles deben ser consistentes con:

• el Hardware del dispositivo/plataforma

• el GUI del dispositivo/plataforma

• el GUI de la misma aplicación

• el Contexto de Uso

Mobile IxD: Consistencia

Consistencia con el Hardware:

TouchscreenTeclado

QWERTY(físico, landscape)

GPSWiFi

Cámara

Teclado QWERTY

(físico, vertical)GPSWiFi

Cámara

TouchscreenWiFi

Cámara

Teclado EstándarGPSWiFi

Cámara

Mobile IxD: Consistencia

Consistencia con el Hardware:

En función del hardware de cada dispositivo soportado…

• ¿Habrá variaciones de interfaz?

• ¿Habrá variaciones en el flow?

• ¿Habrá variaciones de funcionalidad?

Mobile IxD: Consistencia

Consistencia con el Hardware:

¿Porqué podría variar la interfaz?

• Porque tengo mayor resolución de pantalla

• Porque varían los guidelines de UI del dispositivo

Mobile IxD: Consistencia

Consistencia con el Hardware:

¿Porqué podría variar el flow de navegación?

• Porque varía la interfaz y puedo resolver una mecánica en más o menos pasos.

• Porque varía el hardware, y necesito por ej. que el usuario ingrese su ubicación en vez de obtenerla por GPS.

Mobile IxD: Consistencia

Consistencia con el Hardware:

¿Porqué podría variar la funcionalidad?

• Porque no dispongo de un hardware determinado (GPS, cámara, acelerómetro, multitouch)

Mobile IxD: Consistencia

Consistencia con el GUI del dispositivo/plataforma:

Forum Nokia, Design and User Experience Library v2.0

Mobile IxD: Consistencia

Consistencia con el GUI de la propia Aplicación:

Mobile IxD: Consistencia

Consistencia con el Contexto de Uso

Mobile IxD: Conclusión

• No perder de vista el objetivo principal de la aplicación

• No perder de vista al usuario de esa aplicación

• No inventar la rueda:

• Utilizar patrones de diseño conocidos y probados

• Aplicar los guidelines de GUI de la plataforma

• Verificar los checklists de la plataforma

• En la medida de lo posible, testear con usuarios

¡Muchas gracias!

ixda.com.ar