Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Diseño de Interacciones

Diseño de Interacciones

Clase teórica para el Globant Design Center.

Segmento sobre Patrones de Diseño gracias a Yanina Guerzovich (@yguerzovich)

Fe3b58291daa8f6e9880ca4ba5f6da4e?s=128

Lionel Fernandez Roca

September 05, 2014
Tweet

More Decks by Lionel Fernandez Roca

Other Decks in Design

Transcript

  1. Diseño de Interacciones Lionel Fernandez Roca @fernandezroca

  2. ¿Qué es el diseño de interacciones?

  3. “Interaction design is the art of facilitating interactions between humans

    through products and services.” Dan Saffer, “Designing for Interaction”
  4. MOVIMIENTO ESPACIO TIEMPO Los Elementos del Diseño de Interacciones APARIENCIA

    TEXTURA SONIDO
  5. El tiempo que toma moverse de una posición inicial a

    un objetivo final es determinado por 2 factores: la distancia al objetivo y el tamaño de este último. Ley de Fitts Las Leyes del Diseño de Interacciones
  6. El tiempo que requiere a los usuarios tomar una decisión

    es determinado por el número de opciones posibles que tienen. Ley de Hick Las Leyes del Diseño de Interacciones
  7. En todo proceso, existen complejidades que son inherentes al mismo.

    Ley de Tessler sobre la Conservación de la Complejidad Las Leyes del Diseño de Interacciones
  8. Las interfaces visuales deben: • Usar propiedades visuales para agrupar

    elementos y crear una jerarquía clara • Proveer estructura visual y flujo en cada nivel de organización • Hacer uso de imágenes cohesivas, consistentes y contextualmente apropiadas • Integrar estilo y función de modo comprensivo y siguiendo un propósito • Evitar el ruido y desorden visual
  9. Usabilidad

  10. APRENDIBILIDAD EFICIENCIA RECORDABILIDAD La usabilidad se define en 5 componentes

    cualitativos ERRORES SATISFACCIÓN UTILIDAD
  11. UTILIDAD USABILIDAD ÚTIL Utilidad USABILIDAD + UTILIDAD cuán fácil y

    placentero es usarlo si provee las funcionalidades que necesitás
  12. Patrones de Diseño

  13. Patrones de Diseño Soluciones reusables y aplicables a problemas reales.

    Hay muchas formas de atender los requerimientos de un proyecto, es esencial seleccionar la “buena práctica” que mejor refleje las necesidades y expectativas de los usuarios y su contexto.
  14. Patrones de Diseño No pretenden: - Reemplazar la investigación centrada

    en el usuario - Imponer un diseño - Eliminar la creatividad
  15. Patrones de Diseño

  16. Patrones de Diseño Arquitectura de la información y Navegación Patrones

    para Apps Móviles
  17. Patrones IA & Nav Jerarquía de árbol Es una estructura

    de sitio estándar con una página de índice y una serie de sub-páginas. Este patrón suele seguirse en sitios responsivos si no se pensó en el móvil primero. Bueno para: La organización de estructuras complicadas que deben seguir la estructura de un sitio de escritorio. Ojo: Navegación. Estructuras de navegación multifacéticas pueden presentar un problema para las personas que utilizan las pequeñas pantallas.
  18. Tabbed views (vistas solapadas) Patrón familiar a los usuarios regulares

    de apps. Es una colección de secciones unidas por un menú de la barra de herramientas que permiten escanear y entender la funcionalidad completa de la app forma rápida al abrirla por primera vez. Bueno para: Apps con un tema similar. Multitasking. Ojo: Complejidad. Este patrón es el más adecuado para estructuras de contenido muy simples. iOS Patrones IA & Nav
  19. Tabbed views

  20. Hub & Spoke (centro y rayos) Este modelo da un

    índice central de la cual los usuarios navegar hacia afuera. Es el patrón por defecto en el iPhone. Los usuarios no pueden navegar entre las rayos, debiendo deben regresar al centro (home). Bueno para: Herramientas de múltiples funciones, cada uno con una navegación interna y el propósito particulares. Exponer el contenido y funcionalidades al inicio rápidamente. Ojo: Los usuarios que deseen realizar varias tareas en simultáneo. Patrones IA & Nav
  21. Hub & Scope

  22. Mamushka (Nested doll) Canaliza a los usuarios de forma lineal

    a contenidos más detallados. En un contexto difícil éste es un modelo de navegación rápida y fácil. Dá al usuario, fuerte sentido de dónde se encuentra en la estructura de los contenidos al moverse hacia adelante y atrás. Bueno para: Aplicaciones o sitios con un tema o temas estrechamente relacionados. Esto también se puede utilizar para una subsección dentro de otros patrones, como Hub&Spoke. Ojo: Los usuarios no podrán cambiar rápidamente entre secciones así que puede ser una barrera para explorar contenido. Patrones IA & Nav
  23. Mamushka

  24. Menú lateral (drawer) Se accede pulsando un icono o deslizando

    la pantalla hacia adentro que muestra la lista de opciones de menú. Esto puede tener categorías, además de ser desplazable. Es similar al menú expandible ticipo en sitios responsivos.. Bueno para: Apps con un gran número de opciones de menú.Crea un área separada para la navegación sin tomar una gran cantidad de espacio dando lugar al contenido. Ojo: Puede entrar en conflicto con otros patrones de navegación o de interacción, ya que el usuario puede perderse fácilmente, dificultando la posibilidad de encontrar una sección ya que se encuentra escondido. No visibiliza rápidamente el contenido de la app. Patrones IA & Nav Menú expandible Menú lateral
  25. Menú lateral

  26. Los patrones pueden ser flexibles

  27. Los patrones pueden ser flexibles

  28. Patrones de Diseño Patrón de diseño Práctica común Antipatrón

  29. Flows

  30. Flows

  31. Los flows pueden cumplir múltiples funciones en el mismo proyecto

  32. Los flows pueden cumplir múltiples funciones en el mismo proyecto

  33. Flows de interacción

  34. Sketching

  35. Sketches

  36. RÁPIDOS ECONÓMICOS DESCARTABLES ABUNDANTES VOCABULARIO CLARO Sketches GESTUALES DETALLE MÍNIMO

    FIDELIDAD APROPIADA SUGESTIVOS / EXPLORATORIOS AMBÍGUOS
  37. Sketches

  38. Wireframing

  39. ESTRUCTURA CONTENIDO JERARQUÍA INFORMACIONAL FUNCIONALIDAD COMPORTAMIENTO Los wireframes nos ayudan

    a trabajar en…
  40. Prototipado

  41. Prototipado en papel

  42. VERSÁTIL RÁPIDO BARATO FÁCIL Prototipado en papel MANIPULABLE COLABORATIVO SIN

    LIMITACIONES FLEXIBLE
  43. Prototipado en papel

  44. Prototipado digital

  45. Prototipado digital

  46. Prototipado Mobile First

  47. Por qué Mobile First? • El crecimiento mobile es una

    oportunidad inmensa para alcanzar a más usuarios • Las restricciones de los medios mobile nos permiten enfocarnos en aquello que realmente es importante • Las capacidades de los dispositivos móviles crean oportunidades para innovar • El contenido estructurado se convierte automáticamente en la base del diseño
  48. “What we do is for people, to make sure they

    have a good experience. In our business we get really excited about technology, but it’s important to always keep in mind (…) We don’t design for browsers. We don’t design for mobile devices. We don’t design for tablets and phablets and touchscreens and everything else: We design for people. Our stuff has to work in this places, but we design experiences for people.” Jeffrey Zeldman
  49. Contenidos Teóricos Designing for Interaction – Dan Saffer About Face:

    The Essentials of Interaction Design – Alan Cooper http://nngroup.com/articles/usability-101-introduction-to-usability http://blog.uxpin.co/5060/practical-look-using-wireframes/ The Elements of User Experience – Jesse James Garrett Prototyping: A Practitioner’s Guide – Todd Zaki Warfel Mobile First – Luke Wroblewski http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/ https://vimeo.com/104641191 Referencias
  50. Patrones de Diseño http://bradfrost.github.io/this-is-responsive/patterns.html http://www.pttrns.com/ http://uxarchive.com/ https://theresaneil.wordpress.com http://developer.android.com/design/patterns/index.html http://developer.apple. com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.

    html#//apple_ref/doc/uid/TP40006556-CH1-SW1 Referencias
  51. Herramientas http://www.axure.com http://www.infragistics.com/products/indigo-studio http://uxpin.com http://www.invisionapp.com https://popapp.in https://balsamiq.com https://wireframe.cc Referencias

  52. Preguntas? Lionel Fernandez Roca lionel@pulmon.co @fernandezroca

  53. Gracias! Lionel Fernandez Roca lionel@pulmon.co @fernandezroca