Consideraciones en el diseño de una

aplicación multiplataforma@Jorge__Galindo de @47deg_es

¿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...

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.

¿Eso que quiere decir?

Peleas continuas entre UX y desarrolladores por el planteamiento de las interfaces

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

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...

Esta imagen es un Fake

para no herir sensibilidades

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.

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.

Navegación

• Vamos a hablar de distintos conceptos para navegar entre las funcionalidades principales de tu aplicación y la diferencia entre iPhone y Android

Este sketch posiblemente no tenga gracia

Navigation Drawer VS Tab Bar Controller

• Esto es el Top One de cagadas multiplataforma y hay que recalcarlo...

VS

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.

Malas practicas

• 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.

Roman Nurik es un robot

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.

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!

• Las tablets y los móviles tienen distinta usabilidad e incluso funcionalidades distintas. No hagas trampa. Adapta. 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)

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

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

Jugar en PrimeraHay 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)

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

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.

•

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

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!

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.

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)

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!

¡Gracias!

@Jorge__Galindo | @47deg_es

Recordad, Roman Nurik es un robot