• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)
 

Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)

on

  • 5,095 views

El acelerado acceso a la tecnología a través de PCs, notebooks, tablets y smartphones, entre otros dispositivos, ha dado origen a una nueva disciplina de gran importancia y no siempre explorada por ...

El acelerado acceso a la tecnología a través de PCs, notebooks, tablets y smartphones, entre otros dispositivos, ha dado origen a una nueva disciplina de gran importancia y no siempre explorada por los profesionales de la web: el diseño de interacción (IxD, por sus siglas en inglés).

En la charla se presenta un caso hipotético de creación de una aplicación en la que se repiten algunos de los problemas comunes a los que enfrentan diseñadores, programadores y emprendedores.

Se muestra cómo se resolvería el mismo encargo desde el diseño de interacción y tomando en cuenta la experiencia de usuario, exponiendo las diferencias de criterio y proceso, y la aplicación de un modelo cuantificado para comparar los resultados y lograr calidad.

Statistics

Views

Total Views
5,095
Views on SlideShare
1,461
Embed Views
3,634

Actions

Likes
3
Downloads
59
Comments
0

21 Embeds 3,634

http://eurekahoy.blogspot.com.ar 2668
http://eurekahoy.blogspot.com 320
http://www.keikendo.com 275
http://www.tucumanvalley.com 142
http://eurekahoy.blogspot.com.es 83
http://eurekahoy.blogspot.mx 73
http://10.0.0.11 20
http://eurekahoy.blogspot.com.br 12
http://eurekahoy.blogspot.cz 8
http://eurekahoy.blogspot.in 8
http://eurekahoy.blogspot.fr 5
http://eurekahoy.blogspot.be 4
http://eurekahoy.blogspot.de 3
http://eurekahoy.blogspot.co.uk 3
http://us-w1.rockmelt.com 3
http://eurekahoy.blogspot.pt 2
http://eurekahoy.blogspot.tw 1
http://eurekahoy.blogspot.ru 1
http://eurekahoy.blogspot.se 1
https://twimg0-a.akamaihd.net 1
http://www.eurekahoy.blogspot.com.ar 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012) Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012) Presentation Transcript

    • Diseño de Interacción:usabilidad aplicadaSantiago Bustelo @sbusteloDirector de diseño, KeikendoIxDA Central and South America Regional CoordinatorTucumán Valley: Diseño de Interfaces16 de mayo, 2012 Presentación bajo licencia Creative Commons Atribución 2.5 Argentina MEMBER http://creativecommons.org/licenses/by/2.5/ar
    • Me presento…• Santiago Bustelo, diseñador de interacción.• Director de diseño, Keikendo.• Coordinador IxDA Buenos Aires y Coordinador Regional de IxDA en Latinoamérica. Fundador Movimiento de Diseño Inclusivo.• Desde 1997 he participado en proyectos de diseño y desarrollo para Intel, Microsoft, Staples, Coca-Cola, HP, TetraPak, MetLife, Banco Santander, HSBC, Techint, Mercado Libre, Grupo Clarín, Molinos, Bumeran.com y Universidad de Stanford, entre otros.• He dictado presentaciones y talleres sobre Usabilidad, Diseño de Interacción y Diseño Centrado en el Usuario en CAI, UBA, UTN, UP y UAI desde el año 2001. Diseño de Interacción • 2 MEMBER
    • IxDA (Interaction Design Association)• Red global dedicada a la práctica profesional del Diseño de Interacción • Comunidad • Educación • Evangelismo • Profesionalismo • Innovación• Foro global, más de 30.000 miembros, 120 grupos locales, 25 grupos en América Latina• En Argentina: • Buenos Aires: ixda.com.ar • Córdoba: ixdaCba.com.ar ixda.org Diseño de Interacción • 3 MEMBER
    • UX y Diseño: definir cómo es, cómo funcionay cómo luce un producto digital ABSTRACTO • Diseño de Experiencias (UX) • Diseño de Interacción (IxD) • Define el modelo de operación de productos interactivos para lograr mejores experiencias para más usuarios. • Diseño de Interfaces • Define los elementos concretos empleados en la interacción. • Diseño visual CONCRETO • Define lenguaje, carácter e identidad visual del producto. Diseño de Interacción • 4 MEMBER
    • Funciones del diseño Presentación Información Uso Diseño de Interacción • 5 MEMBER
    • Sitios inspiradores vs. sitios que usamos Diseño de Interacción • 6 MEMBER
    • Forma versus Función 16   17   18   19   15   20     13   14 2   3   4   21     2 1 5   6   7 2   23   12     8 1     9   10   1 24   25   2 1   6   2   3 7   28   29   30 Diseño de Interacción • 7 MEMBER
    • Forma y Función D L M M J V S 26 27 28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 2 3 4 5 6 Diseño de Interacción • 8 MEMBER
    • Usabilidad • La usabilidad de una interfaz es una medida de la efectividad, eficiencia y satisfacción con la cual determinados usuarios pueden alcanzar determinados objetivos en un entorno particular con dicha interfaz. (ISO 9241, Requerimientos ergonómicos para trabajo de oficina con terminales visuales, Parte 11 - 1997) Diseño de Interacción • 9 MEMBER
    • Efectividad: Incorporando al usuario
    • Eficiencia: análisis y cuantificación Diseño de Interacción • 11 MEMBER
    • Satisfacción: experiencia óptima !"#$%"&()* !+#,*(& -,$&./0 32#""(4(,*%0 1&2(+(-&- Simplificación del modelo de Mihaly Csikszentmihalyi Diseño de Interacción • 12 MEMBER
    • Proceso de diseñoy caso de ejemplo Diseño de Interacción • 13MEMBER
    • Caso de ejemplo Iconos: FastIcon• Producto: Software de administración de un videoclub• Nuestros personajes: Programador Diseñador Emprendedor cavernario cavernario cavernario Diseño de Interacción • 14 MEMBER
    • Programador cavernario • 3 entidades • Películas: Datos • Clientes: Datos • Alquileres: Relaciones • Operaciones • Alta, baja, modificación y consulta para cada entidad Ejemplo desarrollado por Diego González, Fundador Lagash Systems Diseño de Interacción • 15 MEMBER
    • 1234
    • 1234
    • Gonzalez 1234
    • 760 Diego Gonzalez Rivadavia 5000 11 B Buenos  Aires 12
    • 7601234
    • No  hay  stock.
    • 760
    • 7601235
    • Diseñador cavernario • Metáforas • Películas: DVDs • Clientes: Fichas • Alquileres: Ficha + DVD • Representación • Experiencia inmersiva • Fotorealismo Diseño de Interacción • 31 MEMBER
    • Emprendedor cavernario• Relevamiento competitivo• Definición del mercado• Especificación• Recursos y plan de trabajo• ????• Profit! Diseño de Interacción • 43 MEMBER
    • freemiumRelevamiento competitivo Diseño de Interacción • 44MEMBER
    • screencastRelevamiento competitivo Diseño de Interacción • 45MEMBER
    • Relevamiento competitivo amigable touch Diseño de Interacción • 46 MEMBER
    • Definición del mercado Foto: Ned Raggett Foto: Andrés Rueda Diseño de Interacción • 47 MEMBER
    • “Especificación” para diseño y desarrollo✓ Más potente y con más funciones que la ✓ Soporte de lectores de códigos de competencia. barras.✓ Gestión de uno o múltiples locales. ✓ Módulo de diseño de catálogos.✓ Informes y estadísticas. ✓ Módulo de diseño de páginas web.✓ Cálculo automático de recargos. ✓ Control de envíos y retiros a domicilio✓ Módulo avanzado de búsquedas. (delivery) con emisión de ticket de retiro.✓ Tipos de artículos y formatos ✓ Creación de abonos de alquiler con fecha configurables. de vencimiento.✓ Módulo de Promociones. ✓ Módulo de envío de catálogo por e-mail a socios.✓ Sistema de premios y puntos de cliente. ✓ Interfaz amigable y fácil de usar. Diseño de Interacción • 48 MEMBER
    • Recursos y “metodología” Ej n sió er ce re rp rp re ce sió er Ej n Diseño de Interacción • 49 MEMBER
    • Foto: Wikipedia En 3 meses Expectativa Diseño de Interacción • 50MEMBER
    • Foto: Wikipedia Después de 1 año Resultado Diseño de Interacción • 51MEMBER
    • ¿Qué tienen estos tres casos en común? • Diseño sin intención / autoreferencial • El usuario final no participa del proceso • Proceso lineal • Falta de metodología • Falta de política de calidad Diseño de Interacción • 52 MEMBER
    • Diseño y Usabilidad• Siempre ocurren • A un producto no le “falta” diseño o usabilidad. En todo caso, su diseño o usabilidad son malos.• Son atributos cualitativos intrínsecos al producto • Como la performance, no se pueden “agregar”. • Son definidos por el elemento más débil y afectados por todos los que construyen el producto. Diseño de Interacción • 53 MEMBER
    • Proceso lineal1. Definición de requerimientos.2. Diseño y desarrollo a nivel de producción.3. Entrega. Diseño de Interacción • 54 MEMBER
    • Proceso lineal interminable1. Definición de requerimientos.2. Diseño y desarrollo a nivel de producción.3. Entrega.4. No es lo que el cliente o el usuario querían, retrocede tres casilleros.5. Se repite hasta el hartazgo de una o ambas partes. Diseño de Interacción • 55 MEMBER
    • ¿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 • 56 MEMBER
    • Entender el tipo de problema• Problemas bien definidos • Problemas dinámicos • Algoritmos • Heurísticas • Resolución lineal • Resolución asintótica • Metodología estructurada • Metodología ágil • Foco en análisis y documentación • Foco en entregables El proceso modela el resultado. Diseño de Interacción • 57 MEMBER
    • Proceso convergente1. Objetivos y análisis inicial.2. Diseño y desarrollo en iteraciones avanzando y validando progresivamente: • Funcionalidad • Estructura y elementos • Lenguaje visual3. Entrega y puesta en producción.4. Iteración de todo el proceso. Diseño de Interacción • 58 MEMBER
    • Incorporando UX anuestro ejemplo Diseño de Interacción • 59MEMBER
    • Diseño Centrado en el Usuario• Filosofía de diseño: • Creación de productos que resuelvan necesidades concretas de sus usuarios finales, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el mínimo esfuerzo de su parte.• Proceso de diseño: • Conocer a fondo a los usuarios finales reales. • Diseñar un producto que resuelva sus necesidades y se ajuste a sus capacidades, expectativas y motivaciones. • Poner a prueba lo diseñado. Diseño de Interacción • 60 MEMBER
    • Caso Centrado en el Usuario• Proceso de diseño y desarrollo convergente e iterativo• Evaluación competitiva, identificación de oportunidades• Definición preliminar del modelo• Validación y ajuste del modelo con usuarios• Priorización y estrategia de versiones• Prototipado de la interfaz• Pruebas con usuarios y ajuste de prototipos• Metodología ágil• Pruebas de usabilidad y QA antes de Usaurio cada lanzamiento Diseño de Interacción • 61 MEMBER
    • ¿Qué es Calidad? • “La Calidad de un producto es una función del bien que hace al mundo” (Tom DeMarco) • Calidad = Resultados del esfuerzo / Costos totales (W. Edwards Deming) • “Calidad es lo que nuestros usuarios valoran. Todo lo demás es desperdicio” (Lean Software Development) Diseño de Interacción • 62 MEMBER
    • Calidad y Cuantificación • “Si no medimos, no hay calidad. Punto y aparte” (Sebastián Fernández Quezada, Keikendo) • “Mide lo que sea medible y haz medible lo que no lo sea” (Galileo Galilei) • Cuantificar nos permite: • Comparar alternativas de manera objetiva • Análisis en lugar de opiniones • Identificar áreas de oportunidad Diseño de Interacción • 63 MEMBER
    • Cuantificación: KLM-GOMS Cada operación del usuario tiene un costo. Key 0,2 seg. Tecla / mouse click & release Hover 0,4 seg. Paso mouse  teclado Point 1,1 seg. Apuntar con el mouse Mental 1,35 seg. Preparación mental nueva tarea Response ? Respuesta del sistema Más información: Artículo en Wikipedia sobre KLM-GOMS (en inglés) Diseño de Interacción • 64 MEMBER
    • Cuantificación:Buscar cliente (v. programador) Inicio tarea: 1,35 Mover mano al teclado: 0,40 Recuperación: Mover mano al mouse: 0,40 Proxima tarea: 1,35 Mover mano al mouse: 0,40 Proxima tarea: 1,35 Tipear apellido: 1,60 Proxima tarea: 1,35 Apuntar menu Clientes: 1,10 Mover mano al mouse: 0,40 point Cancel: 1,10 click menu Clientes: 0,20 Proxima tarea: 1,35 click Cancel: 0,20 Apuntar menú Clientes » point OK: 1,10 Volvemos a abrir el cuadro, Modificación: 1,10 click OK: 0,20 Tipeamos apellido otra vez: 12,32click menú Clientes » Modificación: Mover mano al mouse: 0,40 0,20 Obtuvimos (o no) el dato: Proxima tarea: 1,35 Próxima tarea: 1,35 14.75 segundos apuntarOK: 1,10 Apuntar campo texto: 1,10 click OK: 0,20 click campo texto: 0,20 Total con recuperación: 32,55 segundos Diseño de Interacción • 65 MEMBER
    • Cuantificación:Buscar cliente (v. diseñador) Inicio tarea: 1,35 Proxima tarea: 1,35 Obtuvimos la ficha: Apuntar al fichero home: 1,10 Leer etiquetas x 4: 5,40 28.10 segundos Click Fichero home: 0,20 Proxima tarea: 1,35 Animación "files, lots of files¨: 4 Apuntar GON: 1,10 Beneficio eliminar animaciones: Proxima tarea: 1,35 Click GON: 0,20 9 segundosApuntar boton prox serie ficheros: Animación Cajón GON: 2 1,10 Proxima tarea: 1,35 Total sin animaciones: Click proxima serie ficheros: 0,20 Leer Apellido, Nombre x 5: 6,75 19,1 segundos Animación serie de ficheros: 1 Proxima tarea: 1,35 Prox tarea: 1,35 Apuntar Gonzalez, Diego: 1,10 Apuntar fichero "G": 1,10 Click Gonzalez, Diego: 0,20 Click fichero "G": 0,20 Animación fichero G: 2 Diseño de Interacción • 66 MEMBER
    • Casos de uso: hipótesis inicial • Modalidad de atención: mostrador, teléfono y buzón • Búsqueda de clientes y títulos • Alta de un cliente • Alta de nueva película • Cliente alquila más de una película • Cliente devuelve películas y alquila otras • Carga de devoluciones de buzón • Copia dañada • Reporte de atrasos Diseño de Interacción • 67 MEMBER
    • Resultados del Relevamiento(un videoclub, dos usuarios) • No tomamos requerimientos de los usuarios. Nos enfocamos en lo que los usuarios hacen. • Procesos y problemas reales del negocio • Gestión actual, áreas de mejora • Aprox. 5000 clientes y 5000 películas • Los clientes casi nunca saben el Nro. de Cliente, menos aún cuando no son titulares • Se dan de alta 10 a 20 títulos por día, con datos mínimos • Cargar devoluciones de buzón puede llevar toda la mañana • Muchas copias para una película • No se dan clientes de baja Diseño de Interacción • 68 MEMBER
    • Priorización y estrategia de versiones v. 1.0 v. 2.0 v. 3.0 v. 4.0 v. 5.0 v. 6.0 Diseño de Interacción • 69 MEMBER
    • Casos de uso reales y priorizados• Modalidad de atención: mostrador, • Alta de 20 nuevos títulos, asignación de teléfono copias• Búsqueda de clientes: por nombre del • Modalidad de atención: buzón titular, dirección o teléfono. • Carga de 40 devoluciones de buzón• Búsqueda de copias: por título o código • Copia dañada• Alta o modificación de un cliente • Listado de películas por géneros /• Editar película: ABM copias, “baja” si no estrenos hay copias • Reporte de atrasos• Cliente alquila hasta 3 películas • ¿Qué temporadas vio el cliente?• Cliente devuelve hasta 3 películas • Se desordena fila en mostrador• Cliente devuelve hasta 3 películas y alquila hasta 3 Diseño de Interacción • 70 MEMBER
    • Idea: Sistema centrado en la Búsqueda • ¿Un campo con dos botones? • ¿Un campo con dos radio buttons y botón “Buscar”? • ¿Dos campos de búsqueda? • Tal vez funcione, empezamos un prototipo… Diseño de Interacción • 71 MEMBER
    • Sistema con dos campos de búsqueda Diseño de Interacción • 72 MEMBER
    • Sistema con dos campos de búsqueda Diseño de Interacción • 73 MEMBER
    • Sistema con dos campos de búsqueda Diseño de Interacción • 74 MEMBER
    • Sistema con dos campos de búsqueda Diseño de Interacción • MEMBER
    • Propuesta: un solo campo de búsqueda • Resultado dependiente del contenido. No hace falta especificar el tipo de dato. • Ventajas del patrón Instant Search • Mínimo input • Corrección sobre la marcha • Podemos usar [enter] para próxima acción: el proceso es predecible en base a los datos • Necesitamos prueba de concepto Diseño de Interacción • 76 MEMBER
    • Prueba de concepto Diseño de Interacción • 77 MEMBER
    • Cuantificación: Búsqueda 2.0 Inicio tarea: 1,35 Tipear 3 caracteres nombre: 0,60 Mover mano al mouse: 0,40 Proxima tarea: 1,35 Total: 10,25 segundos apuntar Buscar: 1,10 click Buscar: 0,20 Beneficio de mantener foco en búsqueda: Mover mano al teclado: 0,40 4,80 segundos Proxima tarea: 1,35 Tipear 3 caratacteres apellido: 0,60 Total manteniendo Proxima tarea: 1,35 foco en búsqueda: Tipar espacio: 0,20 5,45 segundos Proxima tarea: 1,35 Diseño de Interacción • 78 MEMBER
    • Bases del diseño • Evitar uso del mouse • Modelo unificado y consistente • Metáforas / Referencias: Mail, address book • Sujeto + verbo • No intrusivo • Diseño respetando Guías de diseño de interfaz de Windows Vista / Windows 7 diseño de interacción • 79 MEMBER
    • Esquema Buscar peliculas o clientes Funciones secundarias listado detalle película listado películas clientes Seleccionar película listado copias Seleccionar copia Ficha Cliente Copias + Cliente = alquiler Diseño de Interacción • 80 MEMBER
    • Buscar peliculas o clientesPelículas Clientes La Rosa Púrpura del Cairo (1985)La Rosa Púrpura del Cairo The Purple Rose of Cairo Santiago Bustelo 32 añosWoody Allen 4123-4567 Actores Mia FarrowLa Rosa Púrpura del Cairo Jeff Daniels Diego González 32 añosWoody Allen Danny Aiello 4123-4567 Irving MetzmanLa Rosa Púrpura del Cairo Stephanie Farrow Santiago Bustelo 32 añosWoody Allen Director Woody Allen 4123-4567La Rosa Púrpura del Cairo Géneros Sátira, Comedia, Woody Allen Diego González 32 añosWoody Allen Duración 1 hora 22 minutos 4123-4567 Relacionadas Reservar 78079 78079 78079 78079 78079 78079 78079 78079 78079 78079 78079 78079 78079 + Activar Cliente Alquiler: 3 películas Diego González 32 años reservada 4123-4567 Juan de los Palotes 1638 Deuda $67 La Rosa Púrpura La Rosa Púrpura La Rosa Púrpura El ciudadano del Cairo del Cairo del Cairo #78909 #78909 Eterno resplandor de una mente...+ Alquilar a Diego González Yo sé que tu sabes que yo sé Mockup avanzado Diseño de Interacción • 81 MEMBER
    • Mockup final Diseño de Interacción • 82MEMBER
    • Caso: Cliente devuelve y alquila • Anticipación, no es necesario buscar al cliente • Minimizar input y pasos • Permitir operaciones en cualquier orden Diseño de Interacción • 83 MEMBER
    • Cliente devuelve y alquila Diseño de Interacción • 84 MEMBER
    • Cliente devuelve y alquila Diseño de Interacción • 85 MEMBER
    • Cliente devuelve y alquila Diseño de Interacción • 86 MEMBER
    • Cliente devuelve y alquila Diseño de Interacción • 87 MEMBER
    • Caso: Devolución de 40 películas • Soportar un proceso de lotes con el mismo modelo de interacción Diseño de Interacción • 88 MEMBER
    • Devolución de 40 películas Diseño de Interacción • 89 MEMBER
    • Devolución de 40 películas Diseño de Interacción • 90 MEMBER
    • Devolución de 40 películas Diseño de Interacción • 91 MEMBER
    • Devolución de 40 películas Diseño de Interacción • 92 MEMBER
    • ResultadosTarea 1.0 2.0 %Búsqueda 15 a 33 seg. 5.45 seg. 175 a 500 %Alta de 20 nuevas películas 1.543 seg. 204 seg. 656%Cliente devuelve y alquila 52 a 87 seg. 7.80 seg. 566%Buzón 40 devoluciones 636 seg. 156 seg. 300%Notificación de 9 atrasos 10 a 15 min.? 7 seg. 8400% Diseño de Interacción • 93 MEMBER
    • Conclusiones • No hay Experiencia de Usuario sin usuarios • Proceso iterativo de análisis y diseño centrado en la operación del usuario • Bases racionales, cuantificación, calidad • Obtener producto como resultado de un proceso, y satisfaciendo metas Diseño de Interacción • 94 MEMBER
    • Diseño de Interacción en América LatinaOportunidades• Interés creciente en Usabilidad• Diseño y UX como requerimientoDesafíos• Baja integración del diseñador con Desarrollo y Negocios deseable • Falta de visión y lenguaje común usable • Falta de percepción de valor confiable• Baja madurez del mercado• Poco apoyo académico funcional Diseño de Interacción • 95 MEMBER
    • www.keikendo.comSumate a la Asociación de Diseño de Interacción:Buenos Aires Córdoba Interaction Designixda.com.ar ixdaCba.com.ar Association