¿Qué es Keikendo?<br />Arquitectura de proyectos digitales<br />Diseño de Interacción<br />Generación de tecnología y cono...
¿Cómo lo hacemos?<br />Usuario<br />
Diseño de la Experiencia<br />
¿Cómo organizamos esto?<br />Aceite<br />Agua<br />Cacerola<br />Carne<br />Cuchillo<br />Huevos<br />Pan<br />Papas<br />...
¿Pastel de carne?<br />
¿Milanesas con papas fritas?<br />
¿Carne ensobrada sobre huevo agitado y astillas de pan?<br />
¿Entonces…?<br />No hay una sola respuesta<br />No hay una única solución<br />Depende del contexto<br />Pasamos de ingred...
Experiencias diseñadas<br />
¿Casos deExperiencias Diseñadas?<br />
Restaurantetradicional<br />
El caso McDonalds<br />Modelo de negocios de comida rápida:bajocosto, altarotación<br />Optimización de procesos<br />Ofer...
Restaurante de comida rápida<br />
El usuario en rol activo<br />Modelo de negocios de comida rápida:bajocosto, altarotación<br />Optimización de procesos<br...
Sillas anti-sobremesa<br />“El comportamiento es función de la persona y su entorno” (Lewin, 1936)<br />Diseñando el entor...
Experiencias en software<br />
Diseño Centrado en el Usuario: un enfoque opuesto a..<br /><ul><li>Diseñoautoreferencial
Diseñocentrado en la tecnología
Diseñocentrado en sponsors
Diseñocentrado en la competencia</li></li></ul><li>WPF Workflow<br />Fuente: www.WPFTutorial.net<br />
Diseño de interacción<br />Define el modelo de operaciónde los productos y sistemas con los queinteractúa el usuario<br />...
Diseño de interacción<br />
CASO ejemplo:Resto PresentationFoundation<br />
PrimerosPasos<br />Plantearhipótesissobre los casostípicos<br />Identificarpartescríticas.<br />Identificarrelaciones y de...
Definimosalcance<br />Administración de Mesas<br />Abrir mesa.<br />Cargarpedido.<br />Cerrar mesa.<br />Reservas<br />
Evaluarmodelo<br />Evaluacióncompetitiva<br />Evaluacióncualitativa y funcional<br />Features queno consideramos<br />Feat...
Validación del Modelo CON USUARIOS<br />Ejemplo<br />
¿Queoperaciones se registran?<br />¿Se registra cuando se abre una mesa?<br /><ul><li>No, se registra con el primer pedido...
El mozo avisa por control.
De ahí en adelante, se refiere al conjunto usando el número de una de las mesas.</li></li></ul><li>Se manejan "slots“.<br ...
Diseño del Modelo<br />Ejemplo<br />
Prototipos<br />
Metáforas para Reservas<br />
Colorinche (Caso real)<br />Redundancia en identificación de botón por posición y color<br />
Slots de reservas<br />Juntar y Seleccionar<br />Juntar y Seleccionar<br />Versiónbasada en drag&drop<br />Versiónbasada e...
Card Sorting<br />Agrupar funcionalidades sobre modelo mental del usuario<br />
Prototipo Final<br />
Aplicación web<br /><ul><li>La aplicación que hicimos no tiene sentido como aplicación web.
Lo quetienesentidocomoaplicación web
Publicar el menú
Tomar pedidos de delivery
Tomar reservas</li></li></ul><li>Aplicación web: Delivery<br /><ul><li>Version 1.0:
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</li></li></ul><li>Aplicación Web: wireframes<br />
Mobile: wireframes<br />
Búsqueda de estilo<br />
Opciones de menú / submenú<br />A)<br />A +B)<br />A+C)<br />auto scroll up<br />
Mobile: Version final<br />
Revisión de la web en base a la version mobile final<br />
Responsive web design<br />Consiste en diseñaraplicaciones de maneratalque el contenido se adapte a los distintos disposit...
Responsive web design<br />El mismo HTML responde de diferentes maneras según el dispositivo.<br />
Responsive web design – Media Queries<br />
Ejemplos basados en sitios reales<br />
¿Cómo podemos hacereste trabajo repetible?<br />
IxD en el proceso de desarrollo<br />
¿Quién desarrollasoftware?<br />
¿Quién incorpora diseño de interacción?<br />
“<br />Hay un punto en el que sólo se puede mover la complejidad de un lugar a otro.<br />”<br />Larry Tesler.Pionero de I...
10001010010010<br />11101010010100<br />10010010100011<br />01010010100100<br />11100101010010<br />10001001001111<br />10...
¿Qué es un Diseñador de Interacción?<br />“<br />Aquel que facilita lo que una persona quiere lograr con otra a través de ...
“<br />Hay diseños intencionales y otros que se cometen.<br />”<br />Santiago Bustelo.Filósofo Contemporáneo.<br />
Ya están diseñando la experiencia del usuario.<br />
Sólo resta que elijan cómo quieren hacerlo.<br />
Modelo de Madurez<br />
Calidaden <br />Ingeniería del Software<br />
𝐶𝑎𝑙𝑖𝑑𝑎𝑑<br /> <br />∞<br />𝐶𝑜𝑠𝑡𝑜<br /> <br />0<br />
𝑅𝑒𝑞𝑢𝑒𝑟𝑖𝑚𝑖𝑒𝑛𝑡𝑜𝑠<br /> <br />
𝐶𝑎𝑙𝑖𝑑𝑎𝑑<br /> <br />Portabilidad<br />Reusabilidad<br />Interoperabilidad<br />Facilidad de recibir mantenimiento<br />Fle...
𝐶𝑎𝑙𝑖𝑑𝑎𝑑<br /> <br />∞<br />𝐶𝑜𝑠𝑡𝑜<br /> <br />0<br />
Etapas del proceso deDiseño de Interacción<br />Objetivos y análisisinicial<br />Decisiones de diseño<br />iteraciones<br ...
5 Fases de adopción de Metodologías Agiles para Diseñadores<br />Craig Villamor.Gurú de IxD.<br />
Paradoja<br />Niveles 4 y 5<br />Equipo de Desarrollo<br />Diseñador de Interacción<br />Una<br />La<br />Solución<br />So...
...y los tipos de problemas.<br />AlfonsCornella<br />
Bien Definidos<br />Algoritmo<br />Perversos<br />Heurísticas<br />
∞<br />𝑖/𝑡<br /> <br />AlfonsCornella.Especialista en Gestión de las Org.<br />𝑡/𝑖<br /> <br />0<br />
Tecnología<br />Psicología<br />∞<br />𝑡/𝑖<br /> <br />𝑖/𝑡<br /> <br />0<br />
Tecnología<br />𝑖/𝑡<br /> <br />𝑡/𝑖<br /> <br />E-<br />S-<br />Smart<br />Electronic<br />
Repasando Agile<br />Manifiesto<br />
Repasando Agile<br />En Scrum…<br />
7 Razones por las Cuales Recomendamos Metodologías Agiles<br />
Estrategia de Integración al Sprint: Dentro del Desarrollo<br />Desarrollo y IxD<br />Tiempo<br />
Estrategia de Integración al Sprint: Fuera del Desarrollo<br />Investigación<br />IxD<br />Diseño<br />Desarrollo<br />Tie...
El Diseñador de Interacción en la Organización<br />Centralizada<br />
Upcoming SlideShare
Loading in...5
×

Keikendo

1,226

Published on

Presentación de Keikendo en el evento Palermo Valley AM/PM Tech en Microsoft Argentina. Abril de 2011.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,226
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • ¿Qué es Keikendo?
  • ¿Cómo organizamos esto?Repasemos la lista de elementos.
  • O sino un pastel de carne.
  • O porque no una milanesa con puré.
  • Y si queremos hacer complejo, podemos obtener carne ensobrada en astilla de pan con huevo agitado.
  • ¿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.
  • Que la experiencia sea un resultado intencional, implica diseñarla.
  • 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.
  • 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.
  • 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?
  • ¿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)
  • La clave al plantearcasostípicoses lo quenosotrospensamosque son casostípicos (Hipótesis).
  • Ejemplos de la vida real encontrados en Internet.
  • Ejemplos de la vida real encontrados en Internet.
  • 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.
  • Proceso de desarrollo de Wireframes y Prototipos.
  • 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.
  • En el prototipo final, se ajustaron los contrastes para lograr una visión clara de las mesas reservadas y ocupadas.
  • TODOS diseñamos la interacción.
  • Viaje en el Tiempo del IxDesigner.
  • Es necesario entender las características de cada organización/equipo.
  • Transcript of "Keikendo"

    1. 1.
    2. 2. ¿Qué es Keikendo?<br />Arquitectura de proyectos digitales<br />Diseño de Interacción<br />Generación de tecnología y conocimiento<br />経験方法<br />
    3. 3. ¿Cómo lo hacemos?<br />Usuario<br />
    4. 4. Diseño de la Experiencia<br />
    5. 5. ¿Cómo organizamos esto?<br />Aceite<br />Agua<br />Cacerola<br />Carne<br />Cuchillo<br />Huevos<br />Pan<br />Papas<br />Plato<br />Sartén<br />Tenedor<br />
    6. 6. ¿Pastel de carne?<br />
    7. 7. ¿Milanesas con papas fritas?<br />
    8. 8. ¿Carne ensobrada sobre huevo agitado y astillas de pan?<br />
    9. 9. ¿Entonces…?<br />No hay una sola respuesta<br />No hay una única solución<br />Depende del contexto<br />Pasamos de ingredientes a producto, servicio y por último experiencia<br />
    10. 10. Experiencias diseñadas<br />
    11. 11. ¿Casos deExperiencias Diseñadas?<br />
    12. 12. Restaurantetradicional<br />
    13. 13. El caso McDonalds<br />Modelo de negocios de comida rápida:bajocosto, altarotación<br />Optimización de procesos<br />Ofertalimitada<br />
    14. 14. Restaurante de comida rápida<br />
    15. 15. El usuario en rol activo<br />Modelo de negocios de comida rápida:bajocosto, altarotación<br />Optimización de procesos<br />Ofertalimitada<br />Usuarioscomo parte del sistema<br />Autoservicio<br />No sobremesa<br />
    16. 16. Sillas anti-sobremesa<br />“El comportamiento es función de la persona y su entorno” (Lewin, 1936)<br />Diseñando el entorno, influenciamos el comportamiento<br />16<br />
    17. 17. Experiencias en software<br />
    18. 18. Diseño Centrado en el Usuario: un enfoque opuesto a..<br /><ul><li>Diseñoautoreferencial
    19. 19. Diseñocentrado en la tecnología
    20. 20. Diseñocentrado en sponsors
    21. 21. Diseñocentrado en la competencia</li></li></ul><li>WPF Workflow<br />Fuente: www.WPFTutorial.net<br />
    22. 22. Diseño de interacción<br />Define el modelo de operaciónde los productos y sistemas con los queinteractúa el usuario<br />Considera y modela:<br />Comportamiento del usuario<br />Respuesta del sistema<br />...paralograrmejoresexperienciaspara la mayor cantidad de usuarios<br />
    23. 23. Diseño de interacción<br />
    24. 24. CASO ejemplo:Resto PresentationFoundation<br />
    25. 25. PrimerosPasos<br />Plantearhipótesissobre los casostípicos<br />Identificarpartescríticas.<br />Identificarrelaciones y dependencias de funciones.<br />El encargado de la caja solo cobra<br />El mozo solo describe lo queentrega<br />Buscar un restaurant quetengalascaracterísticasbuscadasparaevaluar.<br />
    26. 26. Definimosalcance<br />Administración de Mesas<br />Abrir mesa.<br />Cargarpedido.<br />Cerrar mesa.<br />Reservas<br />
    27. 27. Evaluarmodelo<br />Evaluacióncompetitiva<br />Evaluacióncualitativa y funcional<br />Features queno consideramos<br />Features que son innecesarios o perjudiciales<br />Features cuyo valor no entendemos<br />Evitar un producto<br />“Feature Rich, Quality Starved”<br />
    28. 28.
    29. 29.
    30. 30. Validación del Modelo CON USUARIOS<br />Ejemplo<br />
    31. 31. ¿Queoperaciones se registran?<br />¿Se registra cuando se abre una mesa?<br /><ul><li>No, se registra con el primer pedido.</li></ul>¿Se registra el cierre de una mesa?<br /><ul><li>Si, porque hay que cobrar.</li></li></ul><li>¿Es útil o necesaria la presentación<br />espacial de las mesas?<br />Cuando llegan varios comensales<br /><ul><li>Los comensales o el mozo juntan las mesas.
    32. 32. El mozo avisa por control.
    33. 33. De ahí en adelante, se refiere al conjunto usando el número de una de las mesas.</li></li></ul><li>Se manejan "slots“.<br />A la noche, por ejemplo, hay un "cena temprano" (8pm a 11 pm) y "cena tarde" (11pm a 1am).<br />De esta manera se resuelve de forma práctica cuando ir "echando gente".<br />¿Con qué precisión manejan las reservas?<br />Desde luego, importa registrar como texto <br />el horario y nombre de la reserva.<br />
    34. 34. Diseño del Modelo<br />Ejemplo<br />
    35. 35. Prototipos<br />
    36. 36. Metáforas para Reservas<br />
    37. 37. Colorinche (Caso real)<br />Redundancia en identificación de botón por posición y color<br />
    38. 38. Slots de reservas<br />Juntar y Seleccionar<br />Juntar y Seleccionar<br />Versiónbasada en drag&drop<br />Versiónbasada en links<br />
    39. 39.
    40. 40. Card Sorting<br />Agrupar funcionalidades sobre modelo mental del usuario<br />
    41. 41. Prototipo Final<br />
    42. 42. Aplicación web<br /><ul><li>La aplicación que hicimos no tiene sentido como aplicación web.
    43. 43. Lo quetienesentidocomoaplicación web
    44. 44. Publicar el menú
    45. 45. Tomar pedidos de delivery
    46. 46. Tomar reservas</li></li></ul><li>Aplicación web: Delivery<br /><ul><li>Version 1.0:
    47. 47. Importarmenú (bajarcosto de adopción)
    48. 48. Exportarmenú a Excel (poor’s man sync)
    49. 49. Version 2.0:
    50. 50. Aplicaciónweb hosteada
    51. 51. Tomarpedidos de delivery
    52. 52. Customizable (ref.Yahoo! Store)
    53. 53. Version Mobile: responsive web design</li></li></ul><li>Aplicación Web: wireframes<br />
    54. 54.
    55. 55.
    56. 56.
    57. 57. Mobile: wireframes<br />
    58. 58.
    59. 59. Búsqueda de estilo<br />
    60. 60. Opciones de menú / submenú<br />A)<br />A +B)<br />A+C)<br />auto scroll up<br />
    61. 61. Mobile: Version final<br />
    62. 62.
    63. 63.
    64. 64. Revisión de la web en base a la version mobile final<br />
    65. 65. Responsive web design<br />Consiste en diseñaraplicaciones de maneratalque el contenido se adapte a los distintos dispositivos.<br />Media Queries: Declaraciones de CSS específicasparadeterminadascondiciones de contexto.<br />@Media screen and (max-device-width: 480px) {<br /> header { display:none; }<br /> .main { width:100%; }<br /> }<br />Viewport Meta: Para definir las condiciones iniciales de escala y ancho del dispositivo.<br /><meta name="viewport" content="width=device-width; initial-scale=1.0"><br />
    66. 66. Responsive web design<br />El mismo HTML responde de diferentes maneras según el dispositivo.<br />
    67. 67. Responsive web design – Media Queries<br />
    68. 68. Ejemplos basados en sitios reales<br />
    69. 69.
    70. 70.
    71. 71. ¿Cómo podemos hacereste trabajo repetible?<br />
    72. 72. IxD en el proceso de desarrollo<br />
    73. 73. ¿Quién desarrollasoftware?<br />
    74. 74. ¿Quién incorpora diseño de interacción?<br />
    75. 75.
    76. 76. “<br />Hay un punto en el que sólo se puede mover la complejidad de un lugar a otro.<br />”<br />Larry Tesler.Pionero de IxD.<br />
    77. 77. 10001010010010<br />11101010010100<br />10010010100011<br />01010010100100<br />11100101010010<br />10001001001111<br />10000000000101<br />
    78. 78. ¿Qué es un Diseñador de Interacción?<br />“<br />Aquel que facilita lo que una persona quiere lograr con otra a través de dispositivos y servicios.<br />”<br />Dan Saffer.Gurú de IxD.<br />
    79. 79.
    80. 80.
    81. 81.
    82. 82. “<br />Hay diseños intencionales y otros que se cometen.<br />”<br />Santiago Bustelo.Filósofo Contemporáneo.<br />
    83. 83. Ya están diseñando la experiencia del usuario.<br />
    84. 84. Sólo resta que elijan cómo quieren hacerlo.<br />
    85. 85. Modelo de Madurez<br />
    86. 86. Calidaden <br />Ingeniería del Software<br />
    87. 87. 𝐶𝑎𝑙𝑖𝑑𝑎𝑑<br /> <br />∞<br />𝐶𝑜𝑠𝑡𝑜<br /> <br />0<br />
    88. 88. 𝑅𝑒𝑞𝑢𝑒𝑟𝑖𝑚𝑖𝑒𝑛𝑡𝑜𝑠<br /> <br />
    89. 89. 𝐶𝑎𝑙𝑖𝑑𝑎𝑑<br /> <br />Portabilidad<br />Reusabilidad<br />Interoperabilidad<br />Facilidad de recibir mantenimiento<br />Flexibilidad<br />Susceptibilidad de someterse a pruebas<br />REVISIÓN del PRODUCTO<br />TRANSICIÓN del PRODUCTO<br />OPERACIÓN del PRODUCTO<br />Corrección Confiabilidad Usabilidad Integridad Eficacia<br />
    90. 90. 𝐶𝑎𝑙𝑖𝑑𝑎𝑑<br /> <br />∞<br />𝐶𝑜𝑠𝑡𝑜<br /> <br />0<br />
    91. 91. Etapas del proceso deDiseño de Interacción<br />Objetivos y análisisinicial<br />Decisiones de diseño<br />iteraciones<br />Mantenimiento y validación<br />80<br />
    92. 92. 5 Fases de adopción de Metodologías Agiles para Diseñadores<br />Craig Villamor.Gurú de IxD.<br />
    93. 93. Paradoja<br />Niveles 4 y 5<br />Equipo de Desarrollo<br />Diseñador de Interacción<br />Una<br />La<br />Solución<br />Solución<br />Metodologías Agiles<br />
    94. 94. ...y los tipos de problemas.<br />AlfonsCornella<br />
    95. 95. Bien Definidos<br />Algoritmo<br />Perversos<br />Heurísticas<br />
    96. 96. ∞<br />𝑖/𝑡<br /> <br />AlfonsCornella.Especialista en Gestión de las Org.<br />𝑡/𝑖<br /> <br />0<br />
    97. 97. Tecnología<br />Psicología<br />∞<br />𝑡/𝑖<br /> <br />𝑖/𝑡<br /> <br />0<br />
    98. 98. Tecnología<br />𝑖/𝑡<br /> <br />𝑡/𝑖<br /> <br />E-<br />S-<br />Smart<br />Electronic<br />
    99. 99. Repasando Agile<br />Manifiesto<br />
    100. 100. Repasando Agile<br />En Scrum…<br />
    101. 101. 7 Razones por las Cuales Recomendamos Metodologías Agiles<br />
    102. 102. Estrategia de Integración al Sprint: Dentro del Desarrollo<br />Desarrollo y IxD<br />Tiempo<br />
    103. 103. Estrategia de Integración al Sprint: Fuera del Desarrollo<br />Investigación<br />IxD<br />Diseño<br />Desarrollo<br />Tiempo<br />
    104. 104. El Diseñador de Interacción en la Organización<br />Centralizada<br />
    105. 105. El Diseñador de Interacción en la Organización<br />Distribuida<br />
    106. 106. Qué opción elegir?<br />Centralizada<br />Distribuida<br />Fuera del Desarrollo<br />Dentro del Desarrollo<br />
    107. 107. Depende<br />
    108. 108. Influencia de la Suerte.<br />Replicabilidad de los Resultados.<br />
    109. 109. Por algún lugar hay que empezar. <br />Consejos para Mañana a la mañana.<br />
    110. 110. Por algún lugar hay que empezar. <br />Consejos para Mañana a la mañana.<br />Sincerar el Diseño<br />
    111. 111. Por algún lugar hay que empezar. <br />Consejos para Mañana a la mañana.<br />Diferenciar Claramente<br />
    112. 112. Pedido vs. Intención vs. Necesidad<br />
    113. 113. Por algún lugar hay que empezar. <br />Consejos para Mañana a la mañana.<br />La tecnología no es el fin. <br />Es un medio.<br />
    114. 114. Por algún lugar hay que empezar. <br />Consejos para Mañana a la mañana.<br />Analicen la competencia.<br />
    115. 115. Por algún lugar hay que empezar. <br />Consejos para Mañana a la mañana.<br />¿De qué se queja más tu usuario?<br />Ya tenés por dónde empezar…<br />
    116. 116. Por algún lugar hay que empezar. <br />Consejos para Mañana a la mañana.<br />No cambiar es más costoso.<br />Son males evitables.<br />
    117. 117. Por algún lugar hay que empezar. <br />Consejos para Mañana a la mañana.<br />¡No hace falta ser original!<br />MUCHA bibliografía.<br />MUCHAS (buenas) experiencias.<br />
    118. 118.
    119. 119. www.keikendo.com<br />

    ×