Eugenio Suñer - IxDA BA 17 mar 2011 - La relación del Diseño de Interacción con la publicidad
IxDA BA Mobile 20 julio 2010
-
Upload
santiago-bustelo -
Category
Design
-
view
107 -
download
1
description
Transcript of IxDA BA Mobile 20 julio 2010
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