• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013
 

Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013

on

  • 1,396 views

Presentación de Santiago Bustelo (IxDA BA: ixda.com.ar) para nivel 3 de la cátedra Salomone de Diseño Gráfico FADU / UBA (catedrasalomone.com), el 6 de mayo de 2013.

Presentación de Santiago Bustelo (IxDA BA: ixda.com.ar) para nivel 3 de la cátedra Salomone de Diseño Gráfico FADU / UBA (catedrasalomone.com), el 6 de mayo de 2013.

Statistics

Views

Total Views
1,396
Views on SlideShare
1,159
Embed Views
237

Actions

Likes
4
Downloads
57
Comments
1

2 Embeds 237

http://www.ixda.com.ar 225
https://twitter.com 12

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

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Una genialidad, gracias por compartir y enseñarnos algo que nos esta faltando aprender como es el diseño de interacción y q a futuro será más que importante saber
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013 Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013 Presentation Transcript

    • Santiago BusteloDirector de diseño, KeikendoIxDA Latin America Regional CoordinatorDG3 Salomone FADU/UBA6 de mayo, 2013MEMBERPresentación bajo licenciaCreative CommonsAtribución 2.5 Argentina@sbusteloDiseño de Interaccióny usabilidad
    • Santiago Bustelo, IxDA.com.ar •MEMBERMe presento…2• Santiago Bustelo, diseñador de interacción.• Director de diseño, Keikendo.• Coordinador IxDA Buenos Aires yCoordinador Regional de IxDA en Latinoamérica.Fundador Movimiento de Diseño Inclusivo.• Desde 1997 he participado en proyectos de diseño ydesarrollo para Microsoft, Staples, Coca-Cola, HP,TetraPak, MetLife, Banco Santander, HSBC, Techint,Mercado Libre, Grupo Clarín, Molinos, Bumeran.comy Universidad de Stanford, entre otros.• He dictado presentaciones y talleres sobre Usabilidad,Diseño de Interacción y Diseño Centrado en el Usuarioen CAI, UBA, UTN, UP y UAI desde el año 2001.
    • Santiago Bustelo, IxDA.com.ar •MEMBERIxDA (Interaction Design Association)• Organización abierta, voluntaria y gratuita, conla misión de liberar a la condición humana de lasmalas experiencias que la desafían, avanzando ladisciplina de Diseño de Interacción.• Foro global, más de 54.000 miembros, 144grupos locales, 33 grupos en América Latina.• En Argentina:• Buenos Aires: ixda.com.ar• Córdoba: ixdaCba.com.ar• Tucumán: ixdaTucuman.com.ar• La Plata: ixdaLaPlata.com.ar• Rosario: ixdaRosario.com.ar• Corrientes/Resistencia: iniciando actividades!3ixda.org
    • Santiago Bustelo, IxDA.com.ar •MEMBER1993-2013: Cada vez más interacciónSitios estáticosContenido estático con elque no se puede interactuar.Diseño GráficoAplicaciones webContenido dinámico privadomodificado por lainteracción con el usuario.Diseño de InteracciónSitios socialesContenido dinámico públicomodificado por lainteracción de mucha gente.Diseño de Interacción Social4
    • Santiago Bustelo, IxDA.com.ar •MEMBER• Diseño de Experiencias (User Experience, UX)• Dirigir la forma en que se siente una persona usando un producto, sistema oservicio.• Diseño de Servicios• Planificar y organizar personas, infraestructura, comunicación y componentesmateriales de un servicio para mejorar su calidad y relación con sus clientes.• Diseño de Interacción (Interaction Design, IxD)• Define el modelo de operación de productos interactivos para lograr mejoresexperiencias para más usuarios.• Diseño de Interfaces (User Interface Design, UID)• Define los elementos concretos empleados en la interacción.• Diseño visual (Diseño Gráfico, DG)• Define lenguaje, carácter e identidad visual del producto.ABSTRACTOCONCRETODisciplinas de Diseño: de DG a UX5
    • Santiago Bustelo, IxDA.com.ar •MEMBERFunciones del diseño6InformaciónPresentaciónUso
    • Santiago Bustelo, IxDA.com.ar •MEMBEREscala de las decisiones sobre la forma7
    • Santiago Bustelo, IxDA.com.ar •MEMBERDiseño que inspira versus diseño que usás8
    • Santiago Bustelo, IxDA.com.ar •MEMBERDiseñar: dirigir resultados con un propósito• Lograr un buen diseño visual:observar la pantalla y el soporte final.• Lograr una buena interacción:observar cómo la gente interactúa con el diseño.9
    • Santiago Bustelo, IxDA.com.ar •MEMBERForma versus Función12 3 45678910111213141516 17 18 1920212223242526272829303110
    • Santiago Bustelo, IxDA.com.ar •MEMBERForma y Función12D L M M J V S26 27 28 29 30 31 12 3 4 5 6 7 89 10 11 12 13 14 1516 17 18 19 20 21 2223 24 25 26 27 28 2930 31 2 3 4 5 6
    • Santiago Bustelo, IxDA.com.ar •MEMBER• La usabilidad de una interfaz es una medidade la efectividad, eficiencia y satisfacción conla cual determinados usuarios puedenalcanzar determinados objetivos en unentorno particular con dicha interfaz.(ISO 9241, Requerimientos ergonómicos paratrabajo de oficina con terminales visuales, Parte11 - 1997)Usabilidad14
    • Santiago Bustelo, IxDA.com.ar •MEMBERDiseñandopara el usuario15
    • Santiago Bustelo, IxDA.com.ar •MEMBER¿Cuándo está terminado el trabajo dediseño de interacción?16• Cuando nos gusta a nosotros• Cuando funciona como queríamos• Cuando le gusta al cliente• Cuando el usuario logra lo que esperábamos
    • Santiago Bustelo, IxDA.com.ar •MEMBEREntendiendo al usuario• Su fin es realizar una tarea.• Nuestra interfaz es sólo un medio que puede ser transparente, o unimpedimento.• Nuestra interfaz no debe ocupar lugar en la mente del usuario.• Cuando el usuario tiene que pensar en nuestra interfaz, es porquese está preguntando lo que espera o necesita que sea evidente. Yeso, es señal de que no hicimos bien nuestro trabajo.• No quiere perder tiempo. Se saltea instrucciones, presentaciones. Lanavegación se compone de señales de tránsito, no cartelespublicitarios.17
    • Efectividad: Incorporando al usuario
    • Santiago Bustelo, IxDA.com.ar •MEMBEREficiencia: análisis y cuantificación19Nombre y apellido:6 Juan Carlos Pérez4321512345Estado inicial: mano en el mouseEstado inicial: mano en el mouseM inicio tarea 1.35P Apuntar a primer campo 1.1M inicio tarea 1.35K click campo de texto 0.2M inicio tarea 1.35H pasar al teclado 0.4M pensar dato 1.35K 18 tipear dato 3.6Total 10.7Cuantificación KLM-GOMS
    • Santiago Bustelo, IxDA.com.ar •MEMBERSatisfacción: experiencia óptimaSimplificación del modelo de Mihaly CsikszentmihalyiFrustraciónFluenciadesafíohabilidadAburrimiento20
    • Santiago Bustelo, IxDA.com.ar •MEMBERAffordances:comunicando la interacción21
    • Santiago Bustelo, IxDA.com.ar •MEMBERAffordance• Una situación en la que las características sensoriales de un objeto comunicande forma intuitiva su funcionalidad y uso.• Un botón, al estar levemente elevado respecto a una superficie plana, sugiere laposibilidad de apretarlo. Una palanca, al tener el tamaño apropiado para seragarrada, sugiere la idea de tirar de ella. Una luz roja que parpadea junto conun zumbido sugiere un problema y demanda atención. Una silla, por sutamaño, curvatura, balance y posición, sugiere sentarse en ella.• Affordance es una propiedad deseable de una interfaz, que naturalmenteconduce a la gente a llevar a cabo los pasos correctos para cumplir susobjetivos.• El término psicológico es “compatibilidad estímulo-respuesta”.Usability First: Affordance22
    • Teapot Dome Service StationWikipedia article
    • Santiago Bustelo, IxDA.com.ar •MEMBERMensajes contradictoriosThe ADAHall of Shame24
    • Santiago Bustelo, IxDA.com.ar •MEMBERCamino del menor esfuerzoBad Designs.com:Path, Sidewalk25
    • Santiago Bustelo, IxDA.com.ar •MEMBER¿Cómo elijo Allegro?Bad Designs: How do I set allegro?26
    • Santiago Bustelo, IxDA.com.ar •MEMBEREsta pantalla no es táctilUX Errors (Flickr Group)27
    • Santiago Bustelo, IxDA.com.ar •MEMBER¿Para qué sirve esto?Mx44.2 Download Page28
    • Santiago Bustelo, IxDA.com.ar •MEMBERArtefacto físicofree-scores.com:MACKIE DFX1212 INPUT ANALOG MIXER29
    • Santiago Bustelo, IxDA.com.ar •MEMBERMetáfora como condicionanteBristol: Realtime Mixer30
    • Santiago Bustelo, IxDA.com.ar •MEMBERBalance metáfora / interfaz31Apple:GarageBand
    • Santiago Bustelo, IxDA.com.ar •MEMBERGamification: diseñandointeracciones divertidas32
    • Santiago Bustelo, IxDA.com.ar •MEMBER¿Qué es un juego?33• Definición formal:Un sistema en el que los jugadores participande un conflicto simulado, definido por reglas,que resulta en un producto cuantificable.Eric Zimmerman y Katie Salen: Rules of Play• Definición informal:Una experiencia estructurada con reglas yobjetivos que es divertidaAmy Jo Kim: Putting the Fun in Functional
    • Santiago Bustelo, IxDA.com.ar •MEMBER¿Qué los hace divertidos?34• Aprovechar nuestros patrones derespuesta primariosAmy Jo Kim: Putting the Fun in Functional
    • Santiago Bustelo, IxDA.com.ar •MEMBER¿Qué los hace divertidos?35FrustraciónFluenciadesafíohabilidadAburrimiento
    • Santiago Bustelo, IxDA.com.ar •MEMBER¿Qué los hace divertidos?• Universo limitado y consistente.• Interacciones estructuradas.• Balance entre esfuerzo y resultado.• Gratificación sensorial.• Permitir descubrimiento yaprendizaje por prueba y error.Chris Crawford: The Art of Computer Game Design36
    • Santiago Bustelo, IxDA.com.ar •MEMBERFeedback en juegos y aplicaciones37Bejeweled Google MapsAmy Jo Kim: Putting the Fun in Functional
    • Santiago Bustelo, IxDA.com.ar •MEMBERColecciones en juegos y aplicaciones38World of Warcraft MySpaceAmy Jo Kim: Putting the Fun in Functional
    • Santiago Bustelo, IxDA.com.ar •MEMBERPuntos en juegos y aplicaciones39Bejeweled eBayAmy Jo Kim: Putting the Fun in Functional
    • Santiago Bustelo, IxDA.com.ar •MEMBERNiveles en juegos y aplicaciones40Amy Jo Kim: Putting the Fun in FunctionalWorld of Warcraft eBayPowerSeller Tier Bronze Silver Gold Platinum TitaniumAnnual totals for each tier:Annual totals for each tier:Annual totals for each tier:Annual totals for each tier:Annual totals for each tier:Annual totals for each tier:Annual Sales $3,000 $36,000 $120,000 $300,000 $1,800,000And/or And or or or orTransactions 100 3,600 12,000 30,000 180,000
    • Santiago Bustelo, IxDA.com.ar •MEMBERProceso de diseñode interacción41
    • Santiago Bustelo, IxDA.com.ar •MEMBERProceso lineal1. Definición de requerimientos.2. Diseño y desarrollo a nivel de producción.3. Entrega.42
    • Santiago Bustelo, IxDA.com.ar •MEMBERProceso 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 o lo queel usuario necesitaba,retrocede tres casilleros.5. Se repite hasta el hartazgo de unao ambas partes.43
    • Santiago Bustelo, IxDA.com.ar •MEMBERProceso convergente1. Objetivos y análisis inicial.2. Diseño y desarrollo de prototiposen iteraciones avanzando y validandoprogresivamente aspectos del producto,de general a particular.3. Entrega.44
    • Santiago Bustelo, IxDA.com.ar •MEMBERObservando la interacción: pruebas de usabilidad45• Hasta que no testeamos, sólopodemos tener hipótesis.• Testear con 5 usuarios revela el 80%de los problemas de usabilidadpresentes en el producto.• Observación y análisis de operaciónpara resolver tareas solicitadas.• Pruebas rápidas y de gran impactocualitativo.• No se toman requerimientos delusuario. Nos enfocamos en lo queel usuario hace.Usabilityproblemsfound100%75%50%25%0%0 3 6 9 12 15Number of Test UsersJakob Nielsen: Why You Only Need to Test with 5 Users
    • Santiago Bustelo, IxDA.com.ar •MEMBERPrototipos• Permiten evaluar una propuesta (hipótesis) con...• nosotros mismos• equipo de desarrollo• cliente• usuarios reales• …de forma rápida y aplicando el esfuerzo correcto.• Son nuestro instrumento para realizar preguntas.46
    • Santiago Bustelo, IxDA.com.ar •MEMBERPrototipos e Iteraciones en el proceso471. Planeamiento de la iteración• Definición del problema. Qué queremos aprender deesta iteración y cómo vamos a hacerlo.2. Implementación• Creación del prototipo con la fidelidad correcta3. Prueba• Obtenemos información que valida o descarta lasolución.4. Conclusiones y aprendizaje• Qué funcionó o no, y por qué.Jared Spool, Anatomy of an Iteration
    • Santiago Bustelo, IxDA.com.ar •MEMBERInterfaz original48
    • Pruebas de usabilidad
    • Elaboración de prototipo
    • Prueba de usabilidad de prototipo en papel
    • Santiago Bustelo, IxDA.com.ar •MEMBERUn voluntario para mostrar…52Cómo es una prueba deusabilidad
    • Santiago Bustelo, IxDA.com.ar •MEMBERIntroducción previa• Describir las características y limitaciones de la interfaz.• Aclarar que el objetivo del test es evaluar la interfaz,no evaluar al usuario.• Explicar la metodología que se utilizará.• Solicitar al usuario que actúe normalmente y piense en vozalta mientras realiza las tareas.53
    • “Tenés que inscribirte a la materiaTaller de Expresión I, cátedra KleinPampillo, según los días y horarios quetengas disponibles para cursar.¿Cómo lo harías? Recordá contarnosen voz alta lo que vas pensando.
    • “Contanos qué cosas te parece quepodés hacer en esta pantalla.¿Cómo las harías?
    • “Ahora tenés que inscribirte a lamateria Teoría y Práctica de laComunicación II, cátedra Magnone,según los días y horarios que tengasdisponibles para cursar.¿Cómo lo harías? Recordá contarnosen voz alta lo que vas pensando.
    • ¡Un aplauso para el voluntario!
    • Santiago Bustelo, IxDA.com.ar •MEMBERDuración de una prueba de usabilidad45’ aprox.64
    • Rediseño SIU Guaraní: Diseño final
    • Santiago Bustelo, IxDA.com.ar •MEMBERDiseño de Interacción en América LatinaOportunidades• Interés creciente en Usabilidad• Diseño y UX como requerimiento• Creciente apoyo académicoDesafíos• Baja integración del diseñador conDesarrollo y Negocios• Falta de visión y lenguaje común• Falta de percepción de valor• Baja madurez del mercadodeseableusableconfiablefuncional66
    • ¡Muchas gracias!Sumate a la Asociación de Diseño de Interacción:ixda.com.ar