• Like
  • Save
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Upcoming SlideShare
Loading in...5
×
 

Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)

on

  • 1,330 views

Diseño de Interacción: Usabilidad aplicada - Presentación en el Día de la Usabilidad en Bogotá, Colombia, el 11 de noviembre de 2011 (www.diadelausabilidad.com.com)...

Diseño de Interacción: Usabilidad aplicada - Presentación en el Día de la Usabilidad en Bogotá, Colombia, el 11 de noviembre de 2011 (www.diadelausabilidad.com.com)

El Diseño de Interacción es una nueva disciplina de diseño, relacionado con la Usabilidad y la Ingeniería de Software.

En la charla se presentan diferencias y puntos en común del Diseño de Interacción con el Diseño Gráfico y Diseño Industrial, qué nuevas habilidades requieren los profesionales del diseño para desempeñarse dentro de estas disciplinas, y técnicas y metodologías de trabajo específicas.

Se muestra cómo un programador, un diseñador visual y un diseñador de interacción tomarían el mismo encargo, 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
1,330
Views on SlideShare
1,327
Embed Views
3

Actions

Likes
3
Downloads
41
Comments
0

2 Embeds 3

https://twitter.com 2
http://www.linkedin.com 1

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 (Día de la Usabilidad 2011 - Bogotá, Colombia) Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia) Presentation Transcript

    • Diseño de Interacción:Usabilidad aplicadaSantiago Bustelo @sbusteloIxDA Central and South America Regional CoordinatorDía de la Usabilidad • Bogotá, Colombia11 de noviembre, 2011 Presentación bajo licencia Creative Commons Atribución 2.5 Argentina MEMBER http://creativecommons.org/licenses/by/2.5/ar
    • 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, 28.000 miembros• 20 grupos en América Latina y creciendo!• ixda_bogota@googlegroups.com ixda.org Asociación de Diseño de Interacción Diseño de Interacción • 2 MEMBER
    • Diseño de Interacción 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 la mayor cantidad de usuarios • Diseño de Interfaces • Define los elementos concretos empleados en la CONCRETO interacción Asociación de Diseño de Interacción Diseño de Interacción • 3 MEMBER
    • UX DISEÑO DE EXPERIENCIAS AI ARQUITECTURA ARQ ARQUITECTURA DE INFORMACIÓN Diseño de DI Información EntornosPRODUCCIÓNDE CONTENIDO Señalética Interactivos(Texto, Imagen, Navegación Computación DISEÑOVideo, sonido) ubicua INDUSTRIAL Diseño de Controles Interfaces DG DISEÑO IxD DISEÑO DE GRÁFICO INTERACCIÓN Ingeniería de DISEÑO Usabilidad DE SONIDO HCI INTERACCIÓN Dan Saffer, Designing for Interaction HUMANO-COMPUTADOR
    • Funciones del diseño Presentación Información Uso Asociación de Diseño de Interacción Diseño de Interacción • 5 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 Asociación de Diseño de Interacción Diseño de Interacción • 6 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 Asociación de Diseño de Interacción Diseño de Interacción • 7 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) Asociación de Diseño de Interacción Diseño de Interacción • 8 MEMBER
    • Efectividad: Incorporando al usuario
    • Eficiencia: análisis y cuantificación Asociación de Diseño de Interacción Diseño de Interacción • 10 MEMBER
    • Satisfacción: experiencia óptima !"#$%"&()* !+#,*(& -,$&./0 32#""(4(,*%0 1&2(+(-&- Simplificación del modelo de Mihaly Csikszentmihalyi Asociación de Diseño de Interacción Diseño de Interacción • 11 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 Asociación de Diseño de Interacción Diseño de Interacción • 12 MEMBER
    • Entendiendo al usuario• Su fin es realizar una tarea.• Nuestra interfaz es sólo un medio que puede ser transparente, o un impedimento.• Nuestra interfaz no debe ocupar lugar en la mente del usuario. • Cuando el usuario tiene que pensar en nuestra interfaz, es porque se está preguntando lo que espera o necesita que sea evidente. Y eso, es señal de que no hicimos bien nuestro trabajo. Asociación de Diseño de Interacción Diseño de Interacción • 13 MEMBER
    • Sitios que te inspiran vs. sitios que usás Asociación de Diseño de Interacción Diseño de Interacción • 14 MEMBER
    • Proceso de diseño y caso de ejemplo Asociación de Diseño de Interacción Diseño de Interacción • 15MEMBER
    • Caso de ejemplo• Administración de un videoclub• Requerimientos: • Alquilar una pelicula • Devolver una pelicula • Cargar una película • Cargar un nuevo cliente Ejemplo desarrollado junto con Diego González (Lagash Systems, fundador) Asociación de Diseño de Interacción Diseño de Interacción • 16 MEMBER
    • Programador cavernario • 3 entidades • Películas: Datos • Clientes: Datos • Alquileres: Relaciones • Operaciones • Alta, baja, Prototipo de interfaz publicado en modificación y http://icograma.com/raf08/caveman.zip consulta para (ejecutable para Windows) cada entidad Asociación de Diseño de Interacción Diseño de Interacción • 17 MEMBER
    • 1234
    • 1234
    • Gonzalez 1234
    • 760 Diego Gonzalez Rivadavia 5000 11 B Buenos  Aires 12
    • 7601234
    • No  hay  stock.
    • 7601235
    • Diseñador cavernario • Metáforas • Películas: DVDs • Clientes: Fichas • Alquileres: Ficha + DVD • Representación • Experiencia inmersiva • Fotorealismo Asociación de Diseño de Interacción Diseño de Interacción • 31 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) Asociación de Diseño de Interacción Diseño de Interacción • 43 MEMBER
    • 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 Asociación de Diseño de Interacción Diseño de Interacción • 44 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) Asociación de Diseño de Interacción Diseño de Interacción • 45 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 Asociación de Diseño de Interacción Diseño de Interacción • 46 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 Asociación de Diseño de Interacción Diseño de Interacción • 47 MEMBER
    • ¿Qué estamos tratando de resolver?• 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 Asociación de Diseño de Interacción Diseño de Interacción • 48 MEMBER
    • Proceso lineal1. Definición de requerimientos.2. Diseño y desarrollo a nivel de producción.3. Entrega. Asociación de Diseño de Interacción Diseño de Interacción • 49 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 quería, retrocede tres casilleros.5. Se repite hasta el hartazgo de una o ambas partes. Asociación de Diseño de Interacción Diseño de Interacción • 50 MEMBER
    • Proceso convergente1. Objetivos y análisis inicial.2. Diseño y desarrollo en iteraciones avanzando progresivamente en: • Funcionalidad • Estructura y elementos • Lenguaje visual3. Entrega y puesta en producción. Asociación de Diseño de Interacción Diseño de Interacción • 51 MEMBER
    • Diseño Centrado en el Usuario:Hipótesis inicial de casos de uso • 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 Asociación de Diseño de Interacción Diseño de Interacción • 52 MEMBER
    • Resultados del Relevamiento(un videoclub, dos usuarios) • 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 • No tomamos requerimientos del usuario. Nos enfocamos en lo que el usuario hace. Asociación de Diseño de Interacción Diseño de Interacción • 53 MEMBER
    • Casos de uso reales priorizados • Modalidad de atención: • Carga de 40 devoluciones de mostrador, teléfono y buzón buzón • Búsqueda de clientes: por • Alta o modificación de un nombre del titular, dirección o cliente teléfono. • Editar película: ABM copias, • Búsqueda de copias: por título “baja” si no hay copias o código • Copia dañada • Cliente alquila hasta 3 películas • Listado de películas por • Cliente devuelve hasta 3 géneros / estrenos películas • Reporte de atrasos • Cliente devuelve hasta 3 • ¿Qué temporadas vio el películas y alquila hasta 3 cliente? • Alta de 20 nuevos títulos, • Se desordena fila en mostrador asignación de copias Asociación de Diseño de Interacción Diseño de Interacción • 54 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… Asociación de Diseño de Interacción Diseño de Interacción • 55 MEMBER
    • Sistema con dos campos de búsqueda Asociación de Diseño de Interacción Diseño de Interacción • 56 MEMBER
    • Sistema con dos campos de búsqueda Asociación de Diseño de Interacción Diseño de Interacción • 57 MEMBER
    • Sistema con dos campos de búsqueda Asociación de Diseño de Interacción Diseño de Interacción • 58 MEMBER
    • Sistema con dos campos de búsqueda Asociación de Diseño de Interacción Diseño de Interacción • MEMBER
    • Propuesta: un solo campo de búsqueda • Resultado dependiente del contenido • 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 Asociación de Diseño de Interacción Diseño de Interacción • 60 MEMBER
    • Prueba de concepto Prueba de concepto publicada en http://icograma.com/raf08/ Asociación de Diseño de Interacción Diseño de Interacción • 61 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 Asociación de Diseño de Interacción Diseño de Interacción • 62 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 • 63
    • 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 Asociación de Diseño de Interacción Diseño de Interacción • 64MEMBER
    • 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 Asociación de Diseño de Interacción Diseño de Interacción • 65 MEMBER
    • Mockup final Asociación de Diseño de Interacción Diseño de Interacción • 66MEMBER
    • Ejemplos de 4 casos de uso • Alta diaria de 20 nuevas películas • Cliente devuelve y alquila en mostrador • Carga de 40 devoluciones por buzón • Reporte de atrasos Asociación de Diseño de Interacción Diseño de Interacción • 67 MEMBER
    • Alta diaria de20 nuevas películas • Caso 1 / 4 • Reducción de input y pasos • Eliminar tareas repetitivas • Aplicación 2.0 • Mejores datos Asociación de Diseño de Interacción Diseño de Interacción • 68 MEMBER
    • Alta diaria de 20 nuevas películas Asociación de Diseño de Interacción Diseño de Interacción • 69 MEMBER
    • Alta diaria de 20 nuevas películas Asociación de Diseño de Interacción Diseño de Interacción • 70 MEMBER
    • Alta diaria de 20 nuevas películas Asociación de Diseño de Interacción Diseño de Interacción • 71 MEMBER
    • Alta diaria de 20 nuevas películas Asociación de Diseño de Interacción Diseño de Interacción • 72 MEMBER
    • Alta diaria de 20 nuevas películas Asociación de Diseño de Interacción Diseño de Interacción • 73 MEMBER
    • Cliente devuelve y alquila • Caso 2 / 4 • Anticipación, no es necesario buscar al cliente • Minimizar input y pasos • Permitir operaciones en cualquier orden Asociación de Diseño de Interacción Diseño de Interacción • 74 MEMBER
    • Cliente devuelve y alquila Asociación de Diseño de Interacción Diseño de Interacción • 75 MEMBER
    • Cliente devuelve y alquila Asociación de Diseño de Interacción Diseño de Interacción • 76 MEMBER
    • Cliente devuelve y alquila Asociación de Diseño de Interacción Diseño de Interacción • 77 MEMBER
    • Cliente devuelve y alquila Asociación de Diseño de Interacción Diseño de Interacción • 78 MEMBER
    • Devolución de40 películas • Caso 3 / 4 • Soportar un proceso de lotes con el mismo modelo de interacción Asociación de Diseño de Interacción Diseño de Interacción • 79 MEMBER
    • Devolución de 40 películas Asociación de Diseño de Interacción Diseño de Interacción • 80 MEMBER
    • Devolución de 40 películas Asociación de Diseño de Interacción Diseño de Interacción • 81 MEMBER
    • Devolución de 40 películas Asociación de Diseño de Interacción Diseño de Interacción • 82 MEMBER
    • Devolución de 40 películas Asociación de Diseño de Interacción Diseño de Interacción • 83 MEMBER
    • Reporte de atrasos • Caso 4 / 4 • Comprensión del caso de uso: Lo importante no es el listado, sino la notificación Asociación de Diseño de Interacción Diseño de Interacción • 84 MEMBER
    • Reporte de atrasos Asociación de Diseño de Interacción Diseño de Interacción • 85 MEMBER
    • Reporte de atrasos Asociación de Diseño de Interacción Diseño de Interacción • 86 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% Asociación de Diseño de Interacción Diseño de Interacción • 87 MEMBER
    • Conclusiones • No hay User Experiencie sin usuarios (Verónica Traynor) • 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 Asociación de Diseño de Interacción Diseño de Interacción • 88 MEMBER
    • Diseño de Interacción en América LatinaOportunidades• Interés creciente en Usabilidad• Diseño 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• Poca madurez del mercado • Alto riesgo de innovación funcional Asociación de Diseño de Interacción Diseño de Interacción • 89 MEMBER
    • www.ixda.org Convocando para conformar IxDA Bogotá: ixda_bogota@googlegroups.comEn línea en ixda.com.co a partir de diciembre 2011