SlideShare una empresa de Scribd logo
1 de 104
¿Qué es Keikendo? Arquitectura de proyectos digitales Diseño de Interacción Generación de tecnología y conocimiento 経験方法
¿Cómo lo hacemos? Usuario
Diseño de la Experiencia
¿Cómo organizamos esto? Aceite Agua Cacerola Carne Cuchillo Huevos Pan Papas Plato Sartén Tenedor
¿Pastel de carne?
¿Milanesas con papas fritas?
¿Carne ensobrada sobre huevo agitado y astillas de pan?
¿Entonces…? No hay una sola respuesta No hay una única solución Depende del contexto Pasamos de ingredientes a producto, servicio y por último experiencia
Experiencias diseñadas
¿Casos deExperiencias Diseñadas?
Restaurantetradicional
El caso McDonalds Modelo de negocios de comida rápida:bajocosto, altarotación Optimización de procesos Ofertalimitada
Restaurante de comida rápida
El usuario en rol activo Modelo de negocios de comida rápida:bajocosto, altarotación Optimización de procesos Ofertalimitada Usuarioscomo parte del sistema Autoservicio No sobremesa
Sillas anti-sobremesa “El comportamiento es función de la persona y su entorno” (Lewin, 1936) Diseñando el entorno, influenciamos el comportamiento 16
Experiencias en software
Diseño Centrado en el Usuario: un enfoque opuesto a.. ,[object Object]
Diseñocentrado en la tecnología
Diseñocentrado en sponsors
Diseñocentrado en la competencia,[object Object]
Diseño de interacción Define el modelo de operaciónde los productos y sistemas con los queinteractúa el usuario Considera y modela: Comportamiento del usuario Respuesta del sistema ...paralograrmejoresexperienciaspara la mayor cantidad de usuarios
Diseño de interacción
CASO ejemplo:Resto PresentationFoundation
PrimerosPasos Plantearhipótesissobre los casostípicos Identificarpartescríticas. Identificarrelaciones y dependencias de funciones. El encargado de la caja solo cobra El mozo solo describe lo queentrega Buscar un restaurant quetengalascaracterísticasbuscadasparaevaluar.
Definimosalcance Administración de Mesas Abrir mesa. Cargarpedido. Cerrar mesa. Reservas
Evaluarmodelo Evaluacióncompetitiva Evaluacióncualitativa y funcional Features queno consideramos Features que son innecesarios o perjudiciales Features cuyo valor no entendemos Evitar un producto “Feature Rich, Quality Starved”
Validación del Modelo CON USUARIOS Ejemplo
¿Queoperaciones se registran? ¿Se registra cuando se abre una mesa? ,[object Object],¿Se registra el cierre de una mesa? ,[object Object],[object Object]
El mozo avisa por control.
De ahí en adelante, se refiere al conjunto usando el número de una de las mesas.,[object Object]
Diseño del Modelo Ejemplo
Prototipos
Metáforas para Reservas
Colorinche (Caso real) Redundancia en identificación de botón por posición y color
Slots de reservas Juntar y Seleccionar Juntar y Seleccionar Versiónbasada en drag&drop Versiónbasada en links
Card Sorting Agrupar funcionalidades sobre modelo mental del usuario
Prototipo Final
Aplicación web ,[object Object]
Lo quetienesentidocomoaplicación web
Publicar el menú
Tomar pedidos de delivery
Tomar reservas,[object Object]
Importarmenú (bajarcosto de adopción)
Exportarmenú a Excel (poor’s man sync)
Version 2.0:
Aplicaciónweb hosteada
Tomarpedidos de delivery
Customizable (ref.Yahoo! Store)
Version Mobile: responsive web design,[object Object]
Mobile: wireframes
Búsqueda de estilo
Opciones de menú / submenú A) A +B) A+C) auto scroll up
Mobile: Version final
Revisión de la web en base a la version mobile final
Responsive web design Consiste en diseñaraplicaciones de maneratalque el contenido se adapte a los distintos dispositivos. Media Queries: Declaraciones de CSS específicasparadeterminadascondiciones de contexto. @Media screen and (max-device-width: 480px) { 		header { display:none; } 		.main { width:100%; } 	} Viewport Meta: Para definir las condiciones iniciales de escala y ancho del dispositivo. <meta name="viewport" content="width=device-width; initial-scale=1.0">
Responsive web design El mismo HTML responde de diferentes maneras según el dispositivo.
Responsive web design – Media Queries
Ejemplos basados en sitios reales
¿Cómo podemos hacereste trabajo repetible?
IxD en el proceso de desarrollo
¿Quién desarrollasoftware?
¿Quién incorpora diseño de interacción?
“ Hay un punto en el que sólo se puede mover la complejidad de un lugar a otro. ” Larry Tesler.Pionero de IxD.
10001010010010 11101010010100 10010010100011 01010010100100 11100101010010 10001001001111 10000000000101
¿Qué es un Diseñador de Interacción? “ Aquel que facilita lo que una persona quiere lograr con otra a través de dispositivos y servicios. ” Dan Saffer.Gurú de IxD.
“ Hay diseños intencionales y otros que se cometen. ” Santiago Bustelo.Filósofo Contemporáneo.
Ya están diseñando la experiencia del usuario.
Sólo resta que elijan cómo quieren hacerlo.
Modelo de Madurez
Calidaden  Ingeniería del Software
𝐶𝑎𝑙𝑖𝑑𝑎𝑑   ∞ 𝐶𝑜𝑠𝑡𝑜   0
𝑅𝑒𝑞𝑢𝑒𝑟𝑖𝑚𝑖𝑒𝑛𝑡𝑜𝑠  
𝐶𝑎𝑙𝑖𝑑𝑎𝑑   Portabilidad Reusabilidad Interoperabilidad Facilidad de recibir mantenimiento Flexibilidad Susceptibilidad de someterse a pruebas REVISIÓN del PRODUCTO TRANSICIÓN del PRODUCTO OPERACIÓN del PRODUCTO Corrección   Confiabilidad   Usabilidad   Integridad   Eficacia
𝐶𝑎𝑙𝑖𝑑𝑎𝑑   ∞ 𝐶𝑜𝑠𝑡𝑜   0
Etapas del proceso deDiseño de Interacción Objetivos y análisisinicial Decisiones de diseño iteraciones Mantenimiento y validación 80
5 Fases de adopción de Metodologías Agiles para Diseñadores Craig Villamor.Gurú de IxD.
Paradoja Niveles 4 y 5 Equipo de Desarrollo Diseñador de Interacción Una La Solución Solución Metodologías Agiles
...y los tipos de problemas. AlfonsCornella
Bien Definidos Algoritmo Perversos Heurísticas
∞ 𝑖/𝑡   AlfonsCornella.Especialista en Gestión de las Org. 𝑡/𝑖   0
Tecnología Psicología ∞ 𝑡/𝑖   𝑖/𝑡   0
Tecnología 𝑖/𝑡   𝑡/𝑖   E- S- Smart Electronic
Repasando Agile Manifiesto
Repasando Agile En Scrum…
7 Razones por las Cuales Recomendamos Metodologías Agiles
Estrategia de Integración al Sprint: Dentro del Desarrollo Desarrollo y IxD Tiempo
Estrategia de Integración al Sprint: Fuera del Desarrollo Investigación IxD Diseño Desarrollo Tiempo
El Diseñador de Interacción en la Organización Centralizada

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Modelo sistemático de testeo con usuarios para startups
Modelo sistemático de testeo con usuarios para startupsModelo sistemático de testeo con usuarios para startups
Modelo sistemático de testeo con usuarios para startups
 
Taller Agile Inception Deck
Taller Agile Inception DeckTaller Agile Inception Deck
Taller Agile Inception Deck
 
Pensamiento agil, un estilo de vida!
Pensamiento agil, un estilo de vida!Pensamiento agil, un estilo de vida!
Pensamiento agil, un estilo de vida!
 
Designer vs Front-end - DrupalCampES 2018 Alicante
Designer vs Front-end - DrupalCampES 2018 AlicanteDesigner vs Front-end - DrupalCampES 2018 Alicante
Designer vs Front-end - DrupalCampES 2018 Alicante
 
01. Prototipado rápido: teoría
01. Prototipado rápido: teoría01. Prototipado rápido: teoría
01. Prototipado rápido: teoría
 
Lean startup
Lean startupLean startup
Lean startup
 
Scrum ¿Qué es y porqué debería interesarme? - UNMSM
Scrum ¿Qué es y porqué debería interesarme? - UNMSMScrum ¿Qué es y porqué debería interesarme? - UNMSM
Scrum ¿Qué es y porqué debería interesarme? - UNMSM
 
Clase 02 Scrum
Clase 02 ScrumClase 02 Scrum
Clase 02 Scrum
 
User Story Mapping - Proceso de construcción
User Story Mapping - Proceso de construcciónUser Story Mapping - Proceso de construcción
User Story Mapping - Proceso de construcción
 
Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móvilesMobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
 
Agile Inception
Agile InceptionAgile Inception
Agile Inception
 
Diseño de interacción, Prototipado y Testing
Diseño de interacción, Prototipado y TestingDiseño de interacción, Prototipado y Testing
Diseño de interacción, Prototipado y Testing
 
Diseño basado en datos y el rol del UI en un proyecto CRO
Diseño basado en datos y el rol del UI en un proyecto CRODiseño basado en datos y el rol del UI en un proyecto CRO
Diseño basado en datos y el rol del UI en un proyecto CRO
 
Lean UX
Lean UXLean UX
Lean UX
 
Taller Prototipos EngineUp Peru
Taller Prototipos EngineUp PeruTaller Prototipos EngineUp Peru
Taller Prototipos EngineUp Peru
 
La priorización de historias de usuario (versión ampliada)
La priorización de historias de usuario (versión ampliada)La priorización de historias de usuario (versión ampliada)
La priorización de historias de usuario (versión ampliada)
 
Historias de usuario: todo lo que querías saber y no te atreviste a preguntar
Historias de usuario: todo lo que querías saber y no te atreviste a preguntarHistorias de usuario: todo lo que querías saber y no te atreviste a preguntar
Historias de usuario: todo lo que querías saber y no te atreviste a preguntar
 
Agile Inception
Agile InceptionAgile Inception
Agile Inception
 

Similar a Keikendo

Escenarios y Storyboards en el proceso UCD con Roberto Hernández (Sr UX/UI De...
Escenarios y Storyboards en el proceso UCD con Roberto Hernández (Sr UX/UI De...Escenarios y Storyboards en el proceso UCD con Roberto Hernández (Sr UX/UI De...
Escenarios y Storyboards en el proceso UCD con Roberto Hernández (Sr UX/UI De...
Omar Corona
 
Responsive web design - diseño sensible
Responsive web design - diseño sensibleResponsive web design - diseño sensible
Responsive web design - diseño sensible
Carlos Zapata
 

Similar a Keikendo (20)

Charla Design Thinking + Experiencia de Servicios
Charla Design Thinking + Experiencia de ServiciosCharla Design Thinking + Experiencia de Servicios
Charla Design Thinking + Experiencia de Servicios
 
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...
 
Escenarios y Storyboards en el proceso UCD con Roberto Hernández (Sr UX/UI De...
Escenarios y Storyboards en el proceso UCD con Roberto Hernández (Sr UX/UI De...Escenarios y Storyboards en el proceso UCD con Roberto Hernández (Sr UX/UI De...
Escenarios y Storyboards en el proceso UCD con Roberto Hernández (Sr UX/UI De...
 
Product discovery con frameworks de ux y agile inception
 Product discovery con frameworks de ux y agile inception Product discovery con frameworks de ux y agile inception
Product discovery con frameworks de ux y agile inception
 
Transformación digital en Retail con Google
Transformación digital en Retail con GoogleTransformación digital en Retail con Google
Transformación digital en Retail con Google
 
ExperTIC
ExperTICExperTIC
ExperTIC
 
ENCAMINA: ¿Quiénes somos y como trabajamos? - UPV noviembre 2013
ENCAMINA: ¿Quiénes somos y como trabajamos? - UPV noviembre 2013ENCAMINA: ¿Quiénes somos y como trabajamos? - UPV noviembre 2013
ENCAMINA: ¿Quiénes somos y como trabajamos? - UPV noviembre 2013
 
Construyendo software de clase mundia
Construyendo software de clase mundiaConstruyendo software de clase mundia
Construyendo software de clase mundia
 
Netfriday 2023 - Conéctate a las tendencias
Netfriday 2023 - Conéctate a las tendenciasNetfriday 2023 - Conéctate a las tendencias
Netfriday 2023 - Conéctate a las tendencias
 
GUIA_DE_CLASE_DE_C3_-_TEMA_1.pptx
GUIA_DE_CLASE_DE_C3_-_TEMA_1.pptxGUIA_DE_CLASE_DE_C3_-_TEMA_1.pptx
GUIA_DE_CLASE_DE_C3_-_TEMA_1.pptx
 
Presentaciones Ramiro Alvarez - eCommerce IT Camp
Presentaciones Ramiro Alvarez - eCommerce IT Camp Presentaciones Ramiro Alvarez - eCommerce IT Camp
Presentaciones Ramiro Alvarez - eCommerce IT Camp
 
Diseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaDiseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataforma
 
Responsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarciaResponsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarcia
 
Responsive web design - diseño sensible
Responsive web design - diseño sensibleResponsive web design - diseño sensible
Responsive web design - diseño sensible
 
El diseñador a medias (con notas). UX Spain 2013
El diseñador a medias (con notas). UX Spain 2013 El diseñador a medias (con notas). UX Spain 2013
El diseñador a medias (con notas). UX Spain 2013
 
¿Cuándo utilizar prototipos digitales?
¿Cuándo utilizar prototipos digitales?¿Cuándo utilizar prototipos digitales?
¿Cuándo utilizar prototipos digitales?
 
Valor Agregado en las TI: Herramientas, Metodologías y Frameworks
Valor Agregado en las TI: Herramientas, Metodologías y FrameworksValor Agregado en las TI: Herramientas, Metodologías y Frameworks
Valor Agregado en las TI: Herramientas, Metodologías y Frameworks
 
Encamina - Products Everywhere
Encamina  - Products EverywhereEncamina  - Products Everywhere
Encamina - Products Everywhere
 
Front End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaFront End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest Merida
 
9 pasos para un exitoso machine learning
9 pasos para un exitoso machine learning9 pasos para un exitoso machine learning
9 pasos para un exitoso machine learning
 

Último

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 

Último (11)

EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 

Keikendo

Notas del editor

  1. ¿Qué es Keikendo?
  2. ¿Cómo organizamos esto?Repasemos la lista de elementos.
  3. O sino un pastel de carne.
  4. O porque no una milanesa con puré.
  5. Y si queremos hacer complejo, podemos obtener carne ensobrada en astilla de pan con huevo agitado.
  6. ¿Cuál es el principio de orden que usás? No hay un único principio, no hay una única solución, y dependen del contexto.En los negocios tenemos un elemento muy importante que es el usuario y cliente, que no resulta ser el principio de orden más usado.
  7. Que la experiencia sea un resultado intencional, implica diseñarla.
  8. Pero no solamente se diseña experiencia en tecnología, también en otros negocios, como en McDonalds. Se diseña la experiencia de compra y el recorrido que tienen que hacer sus usuarios. Porqué? McNegocio (original, no el financiero): alta rotación. Servir rápido es valor para el cliente.
  9. Pero no solamente se diseña experiencia en tecnología, también en otros negocios, como en McDonalds. Se diseña la experiencia de compra y el recorrido que tienen que hacer sus usuarios. Porqué? McNegocio (original, no el financiero): alta rotación. Servir rápido es valor para el cliente.
  10. Cuando el usuario está en rol activo, tenemos que lograr que participe correctamente del modelo.Si logramos que deje la mesa libre en cuanto termina de comer, es valor para nosotros también.¿Cómo logramos que el usuario lo haga por su propia voluntad?
  11. ¿Y en software? Contrastemos el ejemplo de McDonalds con el recorrido que tienen que hacer los usuarios con el mouse ¿Ven las mediciones?Fuente: The Science Behind Great User Interfaces, presentación de Alex Souza,Designer Marketing Manager – Microsoft Latam (- http://ppgplaces.com/asouza/?p=3)
  12. La clave al plantearcasostípicoses lo quenosotrospensamosque son casostípicos (Hipótesis).
  13. Ejemplos de la vida real encontrados en Internet.
  14. Ejemplos de la vida real encontrados en Internet.
  15. Lo q se me ocurre: los slots nos permiten mostrar en la mesa, en qué turno o turnos estaría reservada. En el ejemplo, uso ubicación y colores (redundancia) para marcar qué slots están ocupados, de un conjunto de 6:Habia contado 6 slots, pero me faltaba el nuevo &quot;brunch&quot;. Los siguientes 7 slots serían bastante estándar, podemos suponer q el boliche customice cantidad y código de colores:- Desayuno- Brunch- Almuerzo 1- Almuerzo 2- Merienda / Café- Cena 1- Cena 2También puede ser piola para el restobar tener registrado quién trabaja en cada turno, pero creo q  excede nuestro alcance.
  16. Proceso de desarrollo de Wireframes y Prototipos.
  17. Planteamos diversas posibilidades, incluidas metáforas como el TimeMachine. Consideramos cuanto aportaba cada posibilidad. El problema era resolver los distintos modos de operación (sujeto / verbo / objeto), y lograr elementos y lenguaje de operación coherentes e integrados en toda la aplicación. Para reservas, consideramos la idea de seleccionar una mesa y luego cargarle la fecha. Pero en el caso de uso, la prioridad está invertida: primero necesito ver cómo será el restaurant en esa fecha, qué lugares tengo disponibles, y recién después indicar la mesa.Para reservas, consideramos la idea de seleccionar una mesa y luego cargarle la fecha. Pero en el caso de uso, la prioridad está invertida: primero necesito ver cómo será el restaurant en esa fecha, qué lugares tengo disponibles, y recién después indicar la mesa.
  18. En el prototipo final, se ajustaron los contrastes para lograr una visión clara de las mesas reservadas y ocupadas.
  19. TODOS diseñamos la interacción.
  20. Viaje en el Tiempo del IxDesigner.
  21. Es necesario entender las características de cada organización/equipo.