Fue un placer participar en el Google Developer Festival de Barcelona con esta charla y compartir cartel y evento con tanto crack. Además desarrollé un tema que llevaba tiempo dandole vueltas a la cabeza. Las diferencias en el diseño de la misma aplicación para distintos sistemas. En 47 Degrees la mayoría de aplicaciones que realizamos son desarrollos nativos para plataformas iOS y Android. Vemos importante a nivel de interfaz partir de cero en el prototipado de cada una para poder utilizar los controladores nativos del sistema en el diseño. La usabilidad de la aplicación viene impuesta en cierta medida por las guías de buen uso del sistema ya que es, a lo que están acostumbrados los usuarios por medio de las aplicaciones nativas. En esta charla doy algunos ejemplos buenos usos y errores. ¡Espero que os guste!

1. Consideraciones en
el diseño de una
aplicación
multiplataforma
@Jorge__Galindo de @47deg_es

2. ¿De que va esta
movida?
• Más bien de que no va a ir la cosa.
• No va de aplicaciones como videojuegos ya que aquí se
pueden permitir licencias de interfaz diferentes.
• No va de aplicaciones con una interfaz y unas
funcionalidades mínimas. Por ejemplo, una sola pantalla.
• De que si va a ir esta movida... De aplicaciones Old Style.
Apps con varias pantallas con navegación entre ellas
• Siempre en base a nuestra experiencia propia en 47
Degrees...

3. Pequeña introducción
• En 47 Degrees nos dedicamos al desarrollo nativo en las
plataformas iOS y Android. Pertenecemos a un grupo
masónico llamado los Multiplataformas.
• Normalmente las aplicaciones que realizamos las
lanzamos para los dos.
• Vivimos de primera mano las incoherencias y diferencias
de los dos sistemas.

4. ¿Eso que quiere decir?
Peleas continuas entre UX y desarrolladores por el
planteamiento de las interfaces

5. Ahora viene la lluvia
de tomates...
• Estoy en el lado del Dr Scorpio. Soy usuario iPhone
• Pero ahí esta lo bonito! En 47 Degrees la mitad somos
iPhone y la mitad Android
• En desarrollo en un mundo muy bonito nos
especializariamos pero el mercado manda la multiplataforma

6. Yo antes vivía en el
mundo de la piruleta
• Creía en la utopía de diseño de una misma interfaz para
todas las plataformas.
• Cada plataforma tiene su usabilidad y eso es lo primero
que tienes que tener en cuenta. Pensar en el usuario.
• O de verdad
quieres que ocurra algo como esto...

7. Esta imagen
es un Fake
para no herir
sensibilidades

8. Las apps como churros
son un churro
• Si quieres hacer apps complejas con varias interfaces no
te metas en un framework que no te permita currarte una
diferenciación de la interfaz ya que saldrás escaldado.
• El usuario móvil es muy sensible cuando mezclan
conceptos de usabilidad de otras plataformas y el
rechazo negativo es casi inmediato.

9. Vamos a la manteca
•Vamos a desarrollar un ejemplo de un concepto
gráfico común en las dos plataformas para ver como
varían de forma nativa.
• Índice de buenas y malas practicas
• Excepciones en la guía de estilo nativa de cada
sistema y el porqué de las mismas.

10. Navegación
Este sketch posiblemente no tenga gracia
• Vamos a hablar de distintos conceptos para navegar
entre las funcionalidades principales de tu aplicación y
la diferencia entre iPhone y Android

11. Navigation Drawer VS
Tab Bar Controller
• Esto es el Top One de cagadas multiplataforma y hay
que recalcarlo...
VS

12. Venga, hablemos de
iOS7
• Los multiplataformas (refuerzo el concepto secta)
debemos de estar MUY agradecidos a iOS7
• La adaptación gráfica del “sobrecarga de detalle” a los
colores planos y minimalismo era una de las cosas más
difíciles de contemplar a nivel de diseño.

13. Malas practicas
Roman Nurik es
un robot
• Hay un video de Roman Nurik que lo he apodado “LO
PUTO MEJOR” y que es ahora mismo lo mejor que podéis
ver si queréis corregir errores en Android derivados con
el mal uso de la multiplataforma
• Se llama Android Design in Action: Common UX Issues
y vamos a pegar un rápido repaso de lo que dicen aunque
recomiendo (y casi obligo) verlo con tranquilidad.

14. Y entrando fuerte en
el top 5..
• Los Modal loadings son feos HAMIJO, mejor cargar los datos en background
o pensar... realmente es necesario dejar al usuario “atado” en esta pantalla.
• Cuidadín con los elementos con interacción demasiado pequeños (se
recomienda un tamaño de 48dp)
• Cuidadín con no poner feedback en los elementos con interacción del usuario.
Destacar y diferenciar las áreas con feedback
• No abusar de recursos, por ejemplo, imágenes para los botones. “El usuario
no va a tu aplicación por lo bonito que son tus botones”
• Renovar conceptos gráficos y controladores. Se avanza, se mejora. No
mantengas a tus usuarios en el pasado.
• Respect la navegación definida por Android. Respect a las guías de estilo de
Android. Repect los Buttoms Tab Bar. Respect mi Android.

15. Seguimos con la lista
de exitos
• En Android el elemento de navegación esta a la izquierda de la barra de
navegación. Tu marca o tu icono no debe de ir en el centro ni ser navegable y
funcionalidades.
• La barra de navegación no es un estercolero, es la forma de navegar en las
funcionalidades principales de tu aplicación. No utilizar para el mal.
• Los INTENTS es desde el inicio de los tiempos una de las cosas más buenas
que tiene Android en comparación con iOS. Utilizarlo, no tirar de vuestro cortijo
digital.
• Vamos a llamarlos “Html5Zas!”. No simular comportamientos nativos de
android en una Webview. Si tu app es una web app dejala en la web, es en
donde mola, no vengas a jugar con los mayores.
• Típicas cosas que no molan: Splash, login sociales sin alternativa, apps
“barrocas” con mil movidas. Eso no mola y lo sabes!

16. Terminando con...
• Las tablets y los móviles tienen distinta usabilidad e incluso funcionalidades
distintas. No hagas trampa. Adapta el diseño. Tu identidad lo notará.
• Detalles que molan: El diablo esta en los detalles. Controla tus iconos, utiliza
las cosas molonas que Android ha hecho para ti (Widgets, Notificaciones
ampliadas, etc), mirate bien los recursos (que no se pixelen, utiliza el tamaño
que sea necesario para cada caso) y las guías de estilo (Que para eso están!)
CUIDADÍN! Esto no es un Dogma, siempre
hay licencias que dependen de tus usuarios

17. Como permitirse
licencias
Hay dos formas de permitirse licencias en este mundo
de diseño:
• Jugar en primera división. El top de usuarios, por
ejemplo. Real Madrid, Barcelona, Facebook... esa gente.
• Currarte tu propio chiringuito. Idear un controlador
que sea totalmente coherente en las dos plataformas

18. Jugar en Primera
Hay un caso que me flipa y es como se lo monta Facebook:
• Fue uno de los primeros en apostar por el Navigation
Drawer (Sliding menu)

19. Un caso curioso
• El diseño de Foursquare deriva de un diseño en iPhone
pero que es consistente en Android

20. Ejemplo de mal uso
• Instagram. Chicos, esto no es una adaptación, es una
chapuza.
• Así no se hace la navegación en Android. Un “cosqui” digital para vosotros.

21. Montarte tu chiringuito
• Se valiente y creativo pero sobre todo lógico con las
necesidades de tus usuarios
• Path es un ejemplo muy bueno de una adaptación de
una misma interfaz a varias plataformas
Este menú es
una maravilla

22. Pero eso es difícil...
• ¡Dejate de rollos, ¡nosotros lo hemos hecho con Swipe List View!
• ¿Sabéis de donde vino? De un concepto nativo de iOS. El Swipe
• ¡Dejaos de prejuicios y pensad en el usuario!

23. JaviSwipe
• @JavieLinux a parte de ser nuestro troll Android
particular es una de las personas que más contribuyen
al standard de calidad de 47 Degrees.
• Nuestras peleas hacen siempre contribuir al desarrollo
y el perfeccionamiento de la aplicación enfocado al
usuario.
• Él es el padre de Swipe List View y nosotros sus
abuelos orgullosos.

24. Movidas guapas
• Video de Roman Nurik y su equipo (Lo puto mejor)
• App en la que se aplica la guía de estilo Android
• Comunidad Google Plus de diseño Android
• Charla sobre prototipado de apps en 47 Degrees
• Github de 47 Degrees
• Github del proyecto Swipe List View (las estrellitas
son bienvenidas)

25. Tenéis una cerveza
pendiente
• En San Fernando están nuestros HQ, concretando
entre la peña Camarón y un freidor de bienmesabe.
• Estamos lejos pero somos muy hospitalarios!
• Si pasáis cerca nos tomamos una o siete cervezas y
hablamos de cosas fresquitas.
¡Gracias por venir y espero
que os haya gustado!

26. ¡Gracias!
@Jorge__Galindo | @47deg_es
Recordad, Roman Nurik es un robot