UX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticas
Upcoming SlideShare
Loading in...5
×
 

UX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticas

on

  • 1,896 views

En los últimos años, la demanda a los equipos de diseño y desarrollo está pasando del cumplimiento de requerimientos del cliente, a la creación de productos que satisfacen las necesidades de los ...

En los últimos años, la demanda a los equipos de diseño y desarrollo está pasando del cumplimiento de requerimientos del cliente, a la creación de productos que satisfacen las necesidades de los usuarios y objetivos del negocio.

En ese contexto, UX (User Experience) se establece como la visión, gestión y prácticas necesarias para cumplir con este desafío de manera efectiva y recurrente. Esta presentación brinda a los responsables de dirección y ejecución de proyectos de tecnología las distinciones fundamentales para iniciar el camino a su adopción.

Temario:

- Definición de UX y disciplinas. 
- Experiencias accidentales vs. experiencias diseñadas.
- La experiencia de usuario como identidad del producto.
- Roles y áreas típicos en proyectos de diseño y desarrollo.
- Impacto de UX en los equipos de diseño y desarrollo, su responsabilidad y relación con clientes y usuarios.
- Principios de gestión de UX. Anatomía de un proyecto. Calidad y cuantificación.
- Prácticas de UX: nuestras herramientas para resolver problemas complejos.
- Roles en un equipo de UX.
- El camino a la adopción de UX: Modelo de madurez Keikendo.

Statistics

Views

Total Views
1,896
Slideshare-icon Views on SlideShare
1,687
Embed Views
209

Actions

Likes
9
Downloads
70
Comments
1

2 Embeds 209

http://www.keikendo.com 208
https://twitter.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

11 of 1

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

    UX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticas UX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticas Presentation Transcript

    • MEMBERPresentación bajo licencia Creative CommonsAtribución 2.5 Argentinahttp://creativecommons.org/licenses/by/2.5/arUX en proyectos dediseño y desarrolloGestión, procesos, roles yprácticasSantiago BusteloDirector de diseño, KeikendoIxDA Latin America Regional CoordinatorUniversidad Tecnológica de Tucumán13 de mayo, 2013@sbustelo
    • Santiago Bustelo (@sbustelo) •MEMBERMe presento…2• Santiago Bustelo, diseñador de interacción.• Director de diseño, Keikendo.• Coordinador IxDA Buenos Aires y CoordinadorRegional de IxDA en Latinoamérica. FundadorMovimiento 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 (@sbustelo) •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 (@sbustelo) •MEMBER¿Qué es User Experience (UX)?“Inventé el término porque pensé queinterfaz y usabilidad eran demasiadolimitados. Quise cubrir todos los aspectosde la experiencia de una persona con unsistema, incluyendo el diseño industrial,gráficos, la interfaz, la interacción física,y el manual.Don Norman4
    • Santiago Bustelo (@sbustelo) •MEMBERExperienciascotidianas5
    • Santiago Bustelo (@sbustelo) •MEMBERLa promesa6“¡Comprá tusentradas online!“¡Ahorrá tiempo!“¡Es fácil!
    • Santiago Bustelo (@sbustelo) •MEMBEREl “servicio”• El sitio presenta un largo listado de películas ordenadas porfecha, empezando por funciones de la semana anterior.• El formulario pide un montón de información que no tienerelación con el servicio ofrecido. En el mejor de los casos, espara obligarme a realizar un esfuerzo inútil. En el peor, parainundar mi casilla con publicidad.• La página es lenta y tiene errores de programación.• Después de 15 minutos, abandonaría y realizaría la operacióntelefónicamente. Si existiera esa posibilidad.7
    • Santiago Bustelo (@sbustelo) •MEMBER8
    • Santiago Bustelo (@sbustelo) •MEMBER9Traducción: el programador noprevió el ingreso de acentos en losdatos, ni separadores en números deDNI y teléfono…“Modificar”Faltan acentos
    • Santiago Bustelo (@sbustelo) •MEMBER10
    • Santiago Bustelo (@sbustelo) •MEMBER11Hipótesis: el programador tieneuna pésima ortografía, y el pasoanterior es parte de su plan paraobligar a los demás a aplicarla…“Cargo de admisión”“Impuestos” (¿cero?)“Debe” (innecesario)“Código de promoción” (innecesario)Subtotal
    • Santiago Bustelo (@sbustelo) •MEMBER12
    • Santiago Bustelo (@sbustelo) •MEMBER13Bueno, no me grite
    • Santiago Bustelo (@sbustelo) •MEMBER14
    • Santiago Bustelo (@sbustelo) •MEMBER15Este botón nos envía devuelta a la home, a iniciartodo el proceso desde cero
    • Santiago Bustelo (@sbustelo) •MEMBER16Atiende contestadorinformando horario deatención
    • Santiago Bustelo (@sbustelo) •MEMBEREl insulto17“¡Comprá tusentradas online!“¡Ahorrá tiempo!“¡Es fácil!
    • Santiago Bustelo (@sbustelo) •MEMBERExperiencia de usuario• La forma en que se siente una personausando un producto, sistema o servicio.• Incluye las percepciones de utilidad, facilidadde uso y eficiencia.• Satisfacción de las promesas de la marca y lapuesta en práctica de sus valores.18
    • Santiago Bustelo (@sbustelo) •MEMBERLas malas experiencias ya forman parte dela cultura popular19XKCD: University WebsiteOffice Space (1999)
    • Santiago Bustelo (@sbustelo) •MEMBER¿Por qué las malas experiencias son tanfrecuentes?20“Nadie quiere creer que ofrece un producto demala calidad o deficiente, porque nadie sepropone un mal diseño como meta. Essiempre un riesgo. Los malos diseños ymalas experiencias suceden”.(Kaleem Khan, consultor de UX)
    • Santiago Bustelo (@sbustelo) •MEMBERUX y QA: ¿Quién absorbe los defectos?• Decidir quién encontrará losproblemas:si el usuario final, o el equipo.• Todo es perfectible: UX y QAterminan cuando se termina eltiempo o el presupuesto.21
    • Santiago Bustelo (@sbustelo) •MEMBERUX: ¿Quién absorbe la complejidad?22SQL consoleUsuario SistemaBúsqueda avanzadaBúsqueda facetadaMe siento con suerteComplejidad
    • Santiago Bustelo (@sbustelo) •MEMBER¿A quién le toca“hacer UX”?23
    • UX: áreas depercepciónSimplicidadConsistenciaMarketingInterfazOfertaPerformanceUX
    • UX: áreas depercepciónSimplicidadConsistenciaMarketingInterfazOfertaPerformanceUXNo se pueden“agregar”
    • TecnologíaUXNegocio DiseñoUX: CamposSimplicidadConsistenciaMarketingInterfazOfertaPerformanceUX
    • UX: CamposSimplicidadConsistenciaMarketingInterfazOfertaPerformanceUXInvolucrar a Cliente y UsuariosInvolucrar aCliente y UsuariosInvolucrar aCliente y UsuariosTecnologíaUXNegocio DiseñoTecnologíaUXNegocio Diseño
    • UX: Áreasde trabajoPrototipadoProcesosfront-endArquitecturade InformaciónIng. deUsabilidadComunicacionesde MarketingDiseñoestéticoDiseño deidentidadDiseño deInteracciónDiseño deInformaciónUXDiseño deInteracciónAnálisisde negocioDesarrolloVisualTecnologíaUXNegocio Diseño
    • El universode UXFuncionalidadPrototipadoVersión candidataa definitivaProcesosfront-endArquitecturade InformaciónIng. deUsabilidadSimplicidadConsistenciaMarketingComunicacionesde MarketingDiseñoestéticoDiseño deidentidad Aspecto ycomportamientoInterfazGuía deestiloPlan denegociosOfertaArgumentocomercialPerformanceDiseño deInteracciónDiseño deInformaciónDiseño deInteracciónAnálisisde negocioDesarrolloVisualUX
    • Diseñar laexperienciaFuncionalidadPrototipadoVersión candidataa definitivaProcesosfront-endArquitecturade InformaciónIng. deUsabilidadSimplicidadConsistenciaMarketingComunicacionesde MarketingDiseñoestéticoDiseño deidentidad Aspecto ycomportamientoInterfazGuía deestiloPlan denegociosOfertaArgumentocomercialPerformanceDiseño deInteracciónDiseño deInformaciónDiseño deInteracciónAnálisisde negocioDesarrolloVisualUXTecnologíaUXNegocio Diseño
    • Santiago Bustelo (@sbustelo) •MEMBERUX y Calidad31UsaurioRepasando algunasdefiniciones deDiseño de Interacción:usabilidad aplicada (2012)
    • Santiago Bustelo (@sbustelo) •MEMBERUX como Calidad• Atributos cualitativos intrínsecos al producto• No se pueden “agregar”.• Son afectados por todos los que construyen elproducto.• Siempre ocurren• A un producto no le “falta” UX.En todo caso, su experiencia de usuario es mala.• Experiencias diseñadas vs experiencias accidentales32
    • Santiago Bustelo (@sbustelo) •MEMBER¿Qué es Calidad?• “La Calidad de un producto es una funcióndel bien que hace al mundo” (Tom DeMarco)• Calidad = Resultados del esfuerzo / Costostotales (W. Edwards Deming)• “Calidad es lo que nuestros usuarios valoran.Todo lo demás es desperdicio” (LeanSoftware Development)33
    • Santiago Bustelo (@sbustelo) •MEMBERCalidad 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 loque no lo sea” (Galileo Galilei)• Cuantificar nos permite:• Comparar alternativas de manera objetiva• Análisis en lugar de opiniones34
    • Santiago Bustelo (@sbustelo) •MEMBERMidiendo la calidad de un diseño12 3 45678910111213141516 17 18 1920212223242526272829303135
    • Santiago Bustelo (@sbustelo) •MEMBERMidiendo la calidad de un diseño37D 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 (@sbustelo) •MEMBERComparar alternativas de manera objetiva3912 3 45678910111213141516 17 18 19202122232425262728293031D 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 1 2 3 4 5
    • Santiago Bustelo (@sbustelo) •MEMBERCuantificación: Usabilidad• 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)40
    • Efectividad: Incorporando al usuario
    • Santiago Bustelo (@sbustelo) •MEMBERv1 v2 v1 v2 v1 v2 v1 v2Cuantificando efectividad42v1 v2 v1 v2 v1 v2 v1 v2
    • Santiago Bustelo (@sbustelo) •MEMBEREficiencia: análisis y cuantificación43
    • Santiago Bustelo (@sbustelo) •MEMBERUn modelo para cuantificar eficiencia:KLM-GOMSCada operación del usuario tiene un costo.44Key 0,2 seg. Tecla / mouse click & releaseHover 0,4 seg. Paso mouse  tecladoPoint 1,1 seg. Apuntar con el mouseMental 1,35 seg. Preparación mental nueva tareaResponse ? Respuesta del sistemaMás información: Artículo en Wikipedia sobre KLM-GOMS (en inglés)
    • Santiago Bustelo (@sbustelo) •MEMBERSatisfacción: experiencia óptimaSimplificación del modelo de Mihaly CsikszentmihalyiFrustraciónFluenciadesafíohabilidadAburrimiento45
    • Santiago Bustelo (@sbustelo) •MEMBERCuantificando Satisfacción46RecommendGoodMeanv1: 66,3v2: 73,8SUS - SystemUsability Scale
    • Santiago Bustelo (@sbustelo) •MEMBERGestión: lograrcalidad en un equipo47
    • Santiago Bustelo (@sbustelo) •MEMBERLa Calidad se declara en un equipo48Política de CalidadProcesosTécnicasHerramientas
    • Santiago Bustelo (@sbustelo) •MEMBERAnatomía de un proyecto:definiciones fundamentales• ¿Qué es un proyecto?• Triple restricción y gestión del proyecto• Calidad y cuantificación• Procesos y tipos de problema• Objetivos y requerimientos49
    • Santiago Bustelo (@sbustelo) •MEMBER¿Qué es un proyecto?• Esfuerzo que se realiza por única vez:tiene principio y fin• Para crear algo nuevo:tiene un propósito• Tiene recursos asignados:Consumir más que lo proyectado escondición de fracaso50
    • Santiago Bustelo (@sbustelo) •MEMBERUn proyecto se enmarca en latriple restricción51COSTOTIEMPOALCANCELo que el equipo se compromete a lograrRecursos y esfuerzoque deben seraplicados oasignadosTiempo calendariorequerido paracompletar todaslas tareasCalidad
    • Santiago Bustelo (@sbustelo) •MEMBERNo se puede tocar una variable sola…52TIEMPOCOSTOALCANCE extensión de alcanceCalidad
    • Santiago Bustelo (@sbustelo) •MEMBER…a menos que estiremos creativamente…53TIEMPOCOSTOALCANCECalidad
    • Santiago Bustelo (@sbustelo) •MEMBER– =…y tengamos la suerte de que nadie lo note54Gestión delproyecto:• Andamiaje,soporte• Observar latriple restriccióndurante laduración delproyectoCalidad perdidaTIEMPOCOSTOALCANCECalidad
    • Santiago Bustelo (@sbustelo) •MEMBERProceso lineal1. Definición de requerimientos.2. Diseño y desarrollo a nivel de producción.3. Entrega.55
    • Santiago Bustelo (@sbustelo) •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 o el usuario querían,retrocede tres casilleros.5. Se repite hasta el hartazgo de unao ambas partes.56
    • Santiago Bustelo (@sbustelo) •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ábamos57
    • Santiago Bustelo (@sbustelo) •MEMBER• Problemas bien definidos• Algoritmos• Resolución lineal• Metodología estructurada• Foco en análisis y documentación• Problemas dinámicos• Heurísticas• Resolución asintótica• Metodología ágil• Foco en entregablesEntender el tipo de problema58El proceso modela el resultado.
    • Santiago Bustelo (@sbustelo) •MEMBERProceso convergente1. Objetivos y análisis inicial.2. Diseño y desarrollo en iteracionesavanzando y validando progresivamente:• Funcionalidad• Estructura y elementos• Lenguaje visual3. Entrega y puesta en producción.4. Iteración de todo el proceso.59
    • Santiago Bustelo (@sbustelo) •MEMBERObjetivos vs. RequerimientosObjetivos: para quéejecutamos el proyecto• Foco en los problemas aresolver, no enfuncionalidades nisoluciones.• Medibles de forma objetiva.• Parámetro temporal definidopara el cumplimiento.Requerimientos: qué noscompromemos a hacer• Especifican una función oatributo visible de unproducto.• Son propuestas de cómosatisfacer un objetivo.• Son por definiciónlimitantes.60
    • Santiago Bustelo (@sbustelo) •MEMBERProceso iterativo Keikendo61InicioPruebaAnálisisElaboraciónUsuario NegocioContexto
    • Santiago Bustelo (@sbustelo) •MEMBERMétricas durante el proceso Keikendo62Resultados (%)Efectividad+15Eficiencia+20Satisfacción+65UsabilidadRiesgos+50-30efectividadeficienciasatisfacciónusabilidadRiesgoMétricasPRUEBAInicio Etapa 1 Etapa 2 Etapa 3,4,5…prototipoprototipo prototipo
    • Santiago Bustelo (@sbustelo) •MEMBERDiseñar la experiencia vs. soluciones mágicas63“ La mayoría de los clientes espera que diseñar la experienciasea una actividad discreta, que resuelva todos sus problemascon una única especificación o estudio.Debe ser un esfuerzo constante, un proceso de aprendizajecontinuo sobre los usuarios, respondiendo a suscomportamientos, y mejorando el producto o servicio”.Dan Brown, consultor de UX
    • Diseño de Interacción •MEMBERModelo de madurez Keikendo64Influencia de la Suerte.Replicabilidad de los Resultados.
    • Santiago Bustelo (@sbustelo) •MEMBERModelo de madurez Keikendo1. Sin intención: la experiencia de usuario no se diseñaintencionalmente.2. Autoreferencial: quien diseña considera que representa alusuario.3. Experto: experiencia de una persona, no hay método.4. Centralizado: hay un responsable del diseño de la experiencia,hay método.5. Distribuido: todos los miembros del equipo son conscientes desu aporte en el diseño de la experiencia.65
    • Santiago Bustelo (@sbustelo) •MEMBERDisciplinas yprácticas66
    • Santiago Bustelo (@sbustelo) •MEMBERNiveles de decisión67Jared Spool: Anatomy of design decisionsTrucosTécnicasProcesosMetodologíaDogmaToma de decisionesinformalToma de decisionesbasada en reglas y fe
    • Santiago Bustelo (@sbustelo) •MEMBERFactores que componen UX68time pressure,pressure of success and fail,explicit and implicit requirements, etc.sex, fashion,habits, norms, language,symbols, religion, etc.time, place,accompanying persons,temperature, etc.cultural factorssocial factorsvalues,emotions,expectations,prior experiences,physical characteristics,motor functions,personality,motivation,skills,age, etc.userusability,functions,size, weight,language, symbols,aesthetic characteristics,usefulness,reputation,adaptivity,mobility,etc.productcontext of useINTERACTIONUser ExperienceArhippainen, L., Tähti, M. (2003). Empirical Evaluation of User Experience in Two Adaptative Mobile Application Prototypes. Proceedings of the 2ndInternational Conference on Mobile and Ubiquitous Multimedia, 10–12 December, 2003, Norrköping, Sweden.Espacio de diseñoEspacio de relevamiento
    • Santiago Bustelo (@sbustelo) •MEMBER• Diseño de Experiencias (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 (IxD)• Define el modelo de operación de productos interactivos para lograr mejoresexperiencias para más usuarios.• Diseño de Interfaces• Define los elementos concretos empleados en la interacción.• Diseño visual• Define lenguaje, carácter e identidad visual del producto.ABSTRACTOCONCRETODisciplinas de Diseño en UX69
    • Santiago Bustelo (@sbustelo) •MEMBERArquitectura de Información(IA, Information Architecture)70DISEÑO INTERACTIVOPARA TODOS:USABLE Y ACCESIBLE• Organizar, jerarquizar y nombrar lainformación presente en sitios Web,dispositivos e interfaces en general.• 75% de los problemas de UXinvolucran IA.IAJakob Nielsen, Hoa Lorenger: Prioritizing Web Usability
    • Santiago Bustelo (@sbustelo) •MEMBERRelevamiento: entender al usuario,mucho más que simplemente preguntar71• Lo que pide no eslo que quiere• Lo que quiereno es lo que necesita
    • Santiago Bustelo (@sbustelo) •MEMBEREntender al usuario:mucho más que simplemente escuchar72PideReactivoQuiereProactivoNecesitaCreativoSebastián Fernández Quezada, Keikendo
    • Santiago Bustelo (@sbustelo) •MEMBER¿Qué necesitamos saber para lograr unbuen producto?73• lo que el usuario pide• lo que el usuario quiere• lo que el usuario necesitaMalcolm Gladwell, The Ketchup Conundrum:Cómo Howard Moskowitz encontró que la genterealmente no sabe qué quiere hasta que loprueba, y reinventó la salsa de tomate.
    • Santiago Bustelo (@sbustelo) •MEMBERTécnicas de relevamientoEntrevistas, Focus groupCard sortingMapeo ConceptualConstrucción de Personas/ArquetiposPruebas de usabilidadPrototipado iterativoRelevamiento Contextual74PIDE QUIERE NECESITA
    • Santiago Bustelo (@sbustelo) •MEMBERAnalizar el comportamiento, no el discurso75XFoto: National Chiao Tung University
    • Santiago Bustelo (@sbustelo) •MEMBERCard Sorting76
    • Santiago Bustelo (@sbustelo) •MEMBERMapeo conceptual77Foto: Craig Duncan, United Nations
    • Santiago Bustelo (@sbustelo) •MEMBERConstrucción de Personas o Arquetipos• Herramienta muy discutida: es difícilevaluar si lo hicimos bien.• Permite generar empatía en el equipocon los usurios finales.• Basar las personas en relevamiento ydatos reales.• Poner foco en objetivos y actividades,no en detalles personales.• Relacionadas con el producto. No sereusan.• Es más importante el relevamiento que elentregable.78Inés, Contadora (73 años)• Lleva una vida activa. Para mantenerlas expensas bajas para todos, se hacecargo de la administración de suedificio.• Trabajó con computadoras las últimasdécadas. Las considera herramientas,no le interesa cómo funcionan.• Como millones de adultos mayores,Inés sufre de degeneración macularasociada a la edad. Tiene dificultad enleer textos pequeños o con pococontraste. Sabe ampliar el texto enExplorer, pero no funciona en todoslos sitios.• Tiene un ligero temblor en la manoderecha. Usar el mouse a vecesresulta un desafío, particularmentecon links o botones muy pequeños.Prefiere usar el teclado.• Las páginas que Inés puede leer y usarsin problemas, funcionan muy bien enla pantallita de nuestro celular.Foto kellyCDB (CC)“La otra noche fuimos al teatro conlas chicas. ¡Qué buenos actores!Hacía tiempo que no me reía tanto”.
    • Santiago Bustelo (@sbustelo) •MEMBERPruebas de usabilidad79
    • Santiago Bustelo (@sbustelo) •MEMBERPruebas de usabilidad: usuarios reales• Hasta que no testeamos, sólopodemos tener hipótesis.• Testear con 5 usuarios revela el 80%de los problemas de usabilidadpresentes en el producto.• Pruebas rápidas y de gran impactocualitativo.• Observación y análisis de operaciónpara resolver tareas solicitadas.• No se toman requerimientos delusuario. Nos enfocamos en lo queel usuario hace.80Usabilityproblemsfound100%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 (@sbustelo) •MEMBERPrototipado iterativo81
    • Santiago Bustelo (@sbustelo) •MEMBERPrototipado iterativo82
    • Santiago Bustelo (@sbustelo) •MEMBER83Netbook escolarBebéRelevamiento contextualllamadas alfijo y celularFuera de cámara:hijos (4 y 7 años)
    • Santiago Bustelo (@sbustelo) •MEMBERLo que siempre necesita el usuario• El objetivo del usuario es realizar una tarea.• Nuestro producto es sólo un medio entremuchos posibles para lograr ese objetivo.• No quiere realizar tareas repetitivas: para esoestán las computadoras, no los usuarios.• Nuestro producto siempre se compara conotros productos digitales, productos nodigitales, y soluciones que el usuario puededesarrollar por sus propios medios.• Accesibilidad: si tenemos suerte, nosotrostambién seremos viejos el día de mañana.84Caso típico de un software que no lograsuperar y absorber las alternativas.
    • Santiago Bustelo (@sbustelo) •MEMBERRoles y áreas85
    • Santiago Bustelo (@sbustelo) •MEMBERClienteÁrea ComercialJefes de proyectoDesarrolladoresUsuariosModelo clásico86
    • Santiago Bustelo (@sbustelo) •MEMBERRoles en un proyecto simple87RequerimientosEntregablesCliente Proveedor
    • Santiago Bustelo (@sbustelo) •MEMBER…y la forma en que frecuentemente escalan88“Esa manga de inútiles”“Esos cretinos”
    • Santiago Bustelo (@sbustelo) •MEMBERProductoque se infligeal mercadoMientras tanto, fuera de la burbuja…89“Esa manga deinútiles”“Esos cretinos”Clientes y usuariosOperan todos los díasel producto del proyectofinalizadoBurbuja del ProyectoSe rompe una vez finalizadoel proyecto
    • Santiago Bustelo (@sbustelo) •MEMBERRecuperando la cordura90Interlocutor delEquipoDesarrolladoresDiseñadoresContenidistasRequerimientosEntregablesInterlocutordel ClientePatrocinadoresClientesUsuarios
    • Santiago Bustelo (@sbustelo) •MEMBERManifiesto por el Desarrollo Ágil (2001)• Valoramos…• Individuos e interacciones• Software funcionando• Colaboración con el Cliente• Responder al Cambio• Sobre…• Procesos y herramientas• Documentación extensiva• Negociación contractual• Aferrarse a un plan“Esto es, aunque valoramos los elementos de la derecha,valoramos más los de la izquierda.”91
    • Santiago Bustelo (@sbustelo) •MEMBERRazones para adoptar metodologías Agiles• Ciclos cortos de desarrollo.• Comunicación abierta,necesaria y diaria con elcliente / usuario.• El progreso del desarrollo esmedido.• Todos los miembros delequipo pueden influenciar elresultado final.• El proceso se adaptaconstantemente al equipo.• Todos los impedimentosson visibles.92
    • Santiago Bustelo (@sbustelo) •MEMBERScrum• Hirotaka Takeuchi y Ikujiro Nonaka, 1986.• Enfoque para el desarrollo de productos que incrementa velocidad yflexibilidad.• Basado en casos de industria automotriz, fotocopiadoras eimpresoras.• Utilizado en Xerox, Canon, Honda, NEC, Epson, 3M, HP.• Equipos capacitados, típicamente 5 a 9 personas.• Comunicación entre miembros del equipo, confianza con el cliente.• Hoy es un estándar aceptado en proyectos de desarrollo de software.93
    • Santiago Bustelo (@sbustelo) •MEMBERScrum: aspectos centrales para UX• Separar el proyecto en sprints: iteraciones, mini-proyectos detiempo fijo.• Repriorizar tareas al principio de cada sprint.• Cada sprint genera entregables.• Intervención necesaria y estructurada del cliente en el proceso(rol Product Owner)• Reducción del riesgo.94
    • Santiago Bustelo (@sbustelo) •MEMBERInterlocutores en ScrumClientesUsuariosPatrocinadoresGerenciaProductOwnerEquipo ExtendidoScrumMasterAnalistaArquitectoDesarrolladorDiseñadorTesterEquipoStakeholdersModelo: Sebastián Fernández Quezada, Keikendo95
    • Santiago Bustelo (@sbustelo) •MEMBEREquipo de diseño y desarrollo de UX:roles con áreas solapadas96Ben Melbourne: Thedifference between a UXDesigner and UI Developer
    • Santiago Bustelo (@sbustelo) •MEMBERRoles en ScrumScrumMasterClientesUsuariosPatrocinadoresGerenciaProductOwnerRequerimientosno articuladosRequerimientosPriorizados(Backlog)Riesgos eImpedimentosAnalistaArquitectoDesarrolladorDiseñadorTesterModelo: Sebastián Fernández Quezada, Keikendo97
    • Santiago Bustelo (@sbustelo) •MEMBERAlgunos riesgos e impedimentosque debe manejar el Scrum Master• Afectando alcance• Cambio de requerimientos• Nuevos requerimientos• Afectando tiempos• Estimaciones no realistas• Desvíos• Afectando costos• Del proceso• Problemas de comunicación• No hay o no se respetan roles ymetodología• De miembros del equipo• Pérdida de miembros del equipo• De stakeholders• Cambio de mapa político• Del producto final• Defectos y rechazo98
    • Santiago Bustelo (@sbustelo) •MEMBERReuniones en Scrum• Sprint planning meeting:Al principio de cada sprint.Equipo + PO. Máximo 8h.• Seleccionar el trabajoque se realizará.• Desagregar tareas,dependencias.• Estimacion de esfuerzoen equipo.• Pririozar tareas porrelación costo/impacto(ROI).• Daily Scrum: Cada díadurante el sprint. 15 min.Cada miembro del equipocontesta tres preguntas:• ¿Qué hiciste desde ayer?• ¿Qué planeás hacer hoy?• ¿Qué obstáculos oimpedimentosidentificás?• Sprint review: Al final delsprint. Equipo + PO +Stakeholders. Máximo 4h.• Repasar el trabajo quese ha completado y elque no.• Presentar losentregables al cliente.• Sprint retrospective: Alfinal del sprint. Máximo 3h.• ¿Qué anduvo biendurante el sprint?• ¿Qué podemos mejorar?99
    • Santiago Bustelo (@sbustelo) •MEMBERCaso real:Rediseño de Guía Oleo100
    • Santiago Bustelo (@sbustelo) •MEMBERProblemática inicial• Diseño “viejo”.• El sitio había crecido de forma desorganizada a lo largo deltiempo: inconsistencia, problemas de mantenibilidad.• Como producto de diseño autoreferencial, no se conocía elimpacto real de muchas decisiones sobre la interfaz.• Muchas ideas de mejora sin priorizar, de difícil aplicación dadala falta de consistencia y solidez del sitio.• Nuevas amenazas en el mercado.101
    • Santiago Bustelo (@sbustelo) •MEMBERInterfaz original102
    • Santiago Bustelo (@sbustelo) •MEMBERInterfaz original103
    • Santiago Bustelo (@sbustelo) •MEMBERInterfaz original104
    • Santiago Bustelo (@sbustelo) •MEMBERInterfaz original105
    • Santiago Bustelo (@sbustelo) •MEMBERDiseño y desarrollo en sprintsSprint 0RelevamientoPruebas usabilidadAnálisisExploraciónSprints 1 - NIxDDiseño de interfazArq. de InformaciónPruebas usabilidadSprints 1-N: desarrolloDesarrollo de la interfaz:HTML, CSS, JavaScript• Kickoff Marco del proyecto: alcance, plazos y responsablesNivel de detalle de las decisionesUXEstrategiaDesarrollo106
    • Santiago Bustelo (@sbustelo) •MEMBERPlan general• Sprint 0• Relevamiento del sitio y modelo denegocios.• Análisis de analíticas.• Análisis FODA.• Revisión experta de usabilidad.• Entrevistas cualitativas conusuarios: posicionamiento demarca, modelo mental de usuarios.• Definición de instancias en laExperiencia del Usuario.• Proyección a futuro: brainstormingy exploración de hipótesis.• Selección de hipótesis para sudesarrollo durante el proyecto.• Sprints 1, 2 y 3:• Diseño de prototipos.• Diseño visual.• Pruebas de usabilidad.• Ajustes luego de las pruebas.• Desarrollo front-end.• Cada sprint genera entregables.107
    • Santiago Bustelo (@sbustelo) •MEMBERCierre sprint 0: planeamiento inicial sprints• Sprint 1: lo crítico• Prototipos de baja fidelidad.• Diseño de: Buscador, Ficha del restaurante (como inicio de tareas, en lugar defin), Registración, Votación, Obtención de descuentos.• Sprint 2: lo importante• Prototipos con diseño, no operables.• Diseño de: Home, otras a definir al cierre de sprint 1.• Sprint 3: lo deseable, cierre del proyecto• Prototipos HTML.• Diseño de: Propuestas de mejora de interfaces back-end. Otras a definir al cierrede sprint 2.108
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 1: prototipos iniciales109
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 1: prototipos iniciales110
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 1: pruebas de usabilidad, prototipo en papel111
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 1: conclusiones pruebas usabilidad• Aciertos• Facetado con mapa• AJAX• Mapa integrado a la ficha• Buscar relacionados• Iniciar una búsqueda chequeando muchascosas• Fotos del lugar con prox/anterior• Saltearse listado si sólo hay un resultado• Que estén claras las especialidades y cosasbásicas del menú• Cosas a mejorar• Mapa muy chiquito en resultados• Alta densidad de datos• Se confunde promoción AmEx con tarjetascon las que se opera, pareciera que noaceptan otras en el restauranta• No se interpreta “poner en la mira”• No tener como opción “no aplica” o“ninguna”• Tener que ingresar nombre, apellido y DNI,es una barrera demasiado alta• Lo que se extrañaba• Precio día vs. noche• Autocomplete de campo de búsqueda112
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 2• Home: definición de estructura y funcionalidades propias (“wall”)• Diseño de la interacción social (ej: comentar, compartir)• ¿Qué lleva a los usuarios a hacerlo efectivamente?¿Qué oportunidades se pueden explotar?• Diseño: ficha de usuario. Propuestas de game mechanics.• Es necesario seguir trabajando sobre la ficha del restaurante.• Aumento de fidelidad del diseño.113
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 2: Prototipos avanzados114
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 2: Prototipos avanzados115
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 2: Prototipos avanzados116
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 2: pruebas de usabilidad117
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 2: conclusiones pruebas usabilidad• Home• No molesta el cambio general• Uso de links de listas, búsquedaavanzada, por zona• Buscador en header puedellevar a bares y restaurantes;vinos es un escenario aparte• Algunos preferirían integrar MiOleo con Home, a otros lesresultaría confuso• Buscar restaurantes• Buena recepción de minimapa• Guardar… mejor que “en lamira”.• “Lo recomiendo” en lugar de “loconozco”• Descuentos aplicados al precio,sólo si corren hoy• Ficha de restaurante• Muy buena recepción depositivo y negativo más votados• Buena recepción de tags• OK barras, código colorcalificaciones muy bajas• Formas de pago en encabezado• El puntaje de cada usuario noaporta tanto al comentario• Calificar• Se completan los campos• Cuándo fui: poder ingresarfecha con menos precisión.• Perfil• Más que premios, construcciónde perfil, posibilidad dedescubrirse. Tooltips condescripciones.• No soy un “experto”.• Ficha de usuario• Control de privacidad. No sequiere mostrar que usastedescuento, que no salís de unbarrio, nivel de consumo.• Valoración general• No hay cambios quedesorienten, se mantiene elcarácter.• Mejora general, no se extrañanfeatures o procesos.• “Está más claro”, “Másamigable que ahora”, “Losdatos están más a la vista”.• Casi no se ven los contenidosde la columna derecha.118
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 3• Rediseño del blog.• Propuestas de mejora de interfaces back-end.• Diseño de modelos de mail a enviar al usuario.• Diseño de interacciones sociales más complejas.• Rediseño no funcional de Tienda para el caso en que elnegocio decida mantenerla.• Ajustes a todas las páginas diseñadas en sprints anteriores.• Coordinación final para implementación.119
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 3: Diseño final120
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 3: Diseño final121
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 3: Diseño final122
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 3: Pruebas de usabilidad, prototipo HTML123
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 3: Diseño final124
    • Santiago Bustelo (@sbustelo) •MEMBERSprint 3: Diseño final125
    • Santiago Bustelo (@sbustelo) •MEMBERConclusiones del proyecto• Se cumplieron todos los compromisos asumidos en tiempoy forma, y a satisfacción del cliente.• El equipo de diseño y desarrollo estuvo enfocado, motivadoy orgulloso de su trabajo durante todo el proyecto.• “El trabajo que hicieron es excelente. Estoy feliz. Gracias!”Esteban Brenman, Guía Oleo.• Guía Oleo triplicó su facturación.• Continuamos trabajando con el cliente en nuevos proyectosy desafíos durante un año.126
    • www.keikendo.comInteraction DesignAssociationSumate a la Asociación deDiseño de Interacción: ixda.com.ar