Master class: Mobile UI/UX. Como diseñar una App exitosa.

3,882 views

Published on

Introducción en el desarrollo de interfaces (UI) y experiencia (UX) en aplicaciones (móviles). 13 puntos claves para que tanto el desarrollo como la app tenga éxito. Impartido por Martin Redigolo, diseñador y co-fundador de Startup Astronauts* y del boletín semanal de innovación en negocios, diseño y tecnología ▅▅ stuff (youstuff.me)

Published in: Mobile

Master class: Mobile UI/UX. Como diseñar una App exitosa.

  1. 1. Masterclass ! Speaker @MartinRedigolo ! Tiempo +/- 3600 segundos MOBILE UI.UX. Slide to unlock
  2. 2. HOLA Martin Redigolo .de/.it/.es Diseño gráfico y medios interactivos Senior Innovation & Strategy Planner
  3. 3. @martinredigolo http://startupastronauts.com Experience Workshop Lanza tu Startup en 24h y emprende tu misión
  4. 4. @martinredigolo ¿Qué está pasando? / ¿Qué tengo que tener en cuenta para una App supermegachachi? / Últimas reflexiones /
  5. 5. @martinredigolo En el 2013, el móvil superará al PC como el dispositivo más común para acceder a internet a nivel mundial. / GARTNER
  6. 6. @martinredigolo Hay más móviles en el mundo que cepillos de dientes. / EL ECONOMISTA
  7. 7. @martinredigolo La economía global de APPs $53.000.000.000 /2012 ! $143.000.000.000 /2016 Fuente: Vision Mobile, App Economy Forecast 2013-2016
  8. 8. @martinredigolo http://humanfaceofbigdata.com
  9. 9. @martinredigolo
  10. 10. @martinredigolo 150xMiramos al día a nuestros móviles… 200x...si tienes un smartphone
  11. 11. @martinredigolo ¿QUÉ ES UN DISPOSITIVO MÓVIL? IPHONE? BLACKBERRY? TABLET? IPAD MINI? PORTÁTIL? PINCHO USB? …
  12. 12. @martinredigolo ¿Qué está pasando? ¿Qué tengo que tener en cuenta para una App supermegachachi? / Últimas reflexiones /
  13. 13. @martinredigolo 1/¿PARA QUÉ DISPOSITIVO DISEÑAMOS Y DESARROLLAMOS?
  14. 14. @martinredigolo 1/¿PARA QUÉ DISPOSITIVO DISEÑAMOS Y DESARROLLAMOS?
  15. 15. @martinredigolo 2/¿PARA QUÉ ORIENTACIÓN?
  16. 16. @martinredigolo 2/¿PARA QUÉ DISPOSITIVO DISEÑAMOS Y DESARROLLAMOS?
  17. 17. @martinredigolo 2/¿PARA QUÉ DISPOSITIVO DISEÑAMOS Y DESARROLLAMOS? Facebook Paper http://scotthurff.com/posts/facebook-paper-gestures
  18. 18. @martinredigolo 3/¿PARA IPHONE & IPAD LA MISMA APP?
  19. 19. @martinredigolo 3/¿PARA IPHONE & IPAD LA MISMA APP? iPad, iPhone 4/S 640x960px iPhone 3, 3G/S 320x480px
  20. 20. @martinredigolo 4/¿PARA QUÉ ESTADO 
 DEL USUARIO DESARROLLAMOS?
  21. 21. @martinredigolo 4/¿PARA QUÉ ESTADO DEL USUARIO DESARROLLAMOS?
  22. 22. @martinredigolo 4/¿PARA QUÉ ESTADO DEL USUARIO DESARROLLAMOS? Smartphone Tablet Portátil PC SmartTV App Seamless APP Experience
  23. 23. @martinredigolo 5/¿CUÁL DEBERÍA SER MI EQUIPO DE TRABAJO?
  24. 24. @martinredigolo 5/¿CUÁL DEBERÍA SER MI EQUIPO DE TRABAJO? Project Manager Diseñador UX Diseñador UI Maquetador Programador
  25. 25. @martinredigolo 6/¿CUÁL ES EL PROCESO DEL PROTOTIPADO Y DESARROLLO?
  26. 26. @martinredigolo 6/¿CUÁL ES EL PROCESO DEL PROTOTIPADO Y DESARROLLO? Project Manager Coordinación Cliente Organización Materiales Diseñador UX Arquitectura contenidos Árbol de contenidos Wireframe Diseñador UI Desarrollo elementos visuales Programador Programa la APP en base a pantallas del Maquetador/ UI y con flujos según UX Maquetador Programa pantallas estáticas en base a UI
  27. 27. @martinredigolo 7/WEBAPP VS NATIVE VS HIBRIDA VS RESPONSIVE
  28. 28. @martinredigolo 7/WEBAPP VS NATIVE VS HIBRIDA VS RESPONSIVE Navegar OfflineNO SI Navegación rápidaNO SI Tiempo ImplementaciónRÁPIDO LENTO AprobaciónNO SI UX GamingBAJA ALTA Funciones dispositivo Camera, Sensores, … NO SI Costes DesarrolloBAJOS ALTOS Aprobación VersionesNO SI WEBAPP NATIVE
  29. 29. @martinredigolo 7/WEBAPP VS NATIVE VS HIBRIDA VS RESPONSIVE VENTAJA Comparten contenido HTML La APP nativa carga contenidos HTML “UIWebView”
  30. 30. @martinredigolo 7/WEBAPP VS NATIVE VS HIBRIDA VS RESPONSIVE El contenido se adapta a las pantallas utilizando CSS, JS,… ! Ventajas • El mismo contenido • La misma programación • UI/UX optimizado ! Inconvenientes • Conexión • Hardware sin aprovechar ! • Página Web
  31. 31. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR?
  32. 32. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? Cuanto más puedas STAY ANALOG! ! Simplemente porque es más rápido.
  33. 33. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://www.uistencils.com Browser Whiteboard Stencil
  34. 34. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://www.uistencils.com iPhone Stencil Kit
  35. 35. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://www.omnigroup.com/omnigraffle/ Omnigraffle (Pro) Diagramas de flujo, Wireframes, árboles de contenido, interacción básica,…
  36. 36. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? https://www.graffletopia.com Graffletopia Plantillas para Omnigraffle
  37. 37. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://www.mockflow.com Mockflow Wireframes
  38. 38. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://www.mockflow.com Mockflow Pantallas enlazadas
  39. 39. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://www.axure.com Axure Protitipar y ver en el dispositivo. Wireframe en Word.
  40. 40. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? http://uxpin.com UXPin Wireframe. Prototipo. Responsive.
  41. 41. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? WIREFRAME
  42. 42. @martinredigolo 8/¿QUÉ HERRAMIENTAS PODEMOS UTILIZAR? WIREFRAME
  43. 43. @martinredigolo 9/¿QUÉ QUIERO QUE SE VEA ANTES?
  44. 44. @martinredigolo 9/¿QUÉ QUIERO QUE SE VEA ANTES? Recomendaciones para el Diseño • No intentes apiñar todo en la parte superior. Parte tus contenidos en trozos digeribles. • Incluye una descripción clara sobre lo que vas ofrecer en tu App/site. • Mantén una navegación lógica y clara. • Desarrolla un copy/texto interesante. • No olvides de incluir más contenido “útil” e interesante por debajo del “Fold” • Testea tu App/site en diferentes dispositivos para comprobar el diseño y la experiencia
  45. 45. @martinredigolo 10/¿QUÉ TENDENCIA SIGO EN MI DISEÑO?
  46. 46. @martinredigolo 10/¿QUÉ TENDENCIA SIGO EN MI DISEÑO? Skeumorfismo Flat Design VENTAJAS Eficiente Moderno Rápido + honesto Comfortable INCONVENIENTES Diferente No muy claro - Personalidad Aburrido? Ejecución difícil VENTAJAS + Entendible “Barniz” Familiar + Seguro Atractivo INCONVENIENTES + Desarrollo + Lento + PNG & - CSS Antiguado?
  47. 47. @martinredigolo 11/EL UI EMPIEZA CON UNA
  48. 48. @martinredigolo 11/EL UI EMPIEZA CON UNA HAMBURGUESA… MENU http://exisweb.net/mobile-menu-abtest MENU
  49. 49. @martinredigolo 11/EL UI EMPIEZA CON UNA HAMBURGUESA… http://exisweb.net/mobile-menu-abtest
  50. 50. @martinredigolo 11/EL UI EMPIEZA CON UNA HAMBURGUESA… http://exisweb.net/mobile-menu-abtest
  51. 51. @martinredigolo 12/¿CUÁLES SON MIS REFERENCIAS EN EL MERCADO? (AL FINAL ESTO ES UNA COMPETICIÓN. FAIR PLAY, PERO QUEREMOS GANAR.)
  52. 52. @martinredigolo 12/¿CUÁLES SON MIS REFERENCIAS EN EL MERCADO? PATH
  53. 53. @martinredigolo 12/¿CUÁLES SON MIS REFERENCIAS EN EL MERCADO? OVER
  54. 54. @martinredigolo 12/¿CUÁLES SON MIS REFERENCIAS EN EL MERCADO?
  55. 55. @martinredigolo 13/NO OLVIDES EL TIEMPO DE APROBACIÓN
  56. 56. @martinredigolo 13/NO OLVIDES EL TIEMPO DE APROBACIÓN 21 DÍAS 60 MINUTOS
  57. 57. @martinredigolo ¿Qué está pasando? ¿Qué tengo que tener en cuenta para una App Últimas reflexiones /
  58. 58. @martinredigolo ¿UI O UX?
  59. 59. @martinredigolo ¿UI O UX? DISEÑANDO EL PRODUCTO DISEÑANDO LA EXPERIENCIA
  60. 60. @martinredigolo ¿UI O UX?
  61. 61. @martinredigolo No tienes que ser un genio para crear una brillante user experience, tienes que ser un buen observador. / 
 STEVE HICKEY
  62. 62. @martinredigolo EVALUA > DECIDE >> IMPLEMENTA Es importante que evalúes las necesidades de tu negocio para tomar las decisiones correctas y generar un efecto WOW!
  63. 63. @martinredigolo http://youstuff.me Newsletter de innovación en negocios, diseño y tecnología Muchas Gracias :)

×