Diseña tus aplicaciones multiplataforma

27
22.02.2017 Desarrollo y gestión de aplicaciones móviles corporativas

Transcript of Diseña tus aplicaciones multiplataforma

Page 1: Diseña tus aplicaciones multiplataforma

22.02.2017

Desarrollo y gestión de aplicaciones móviles corporativas

Page 2: Diseña tus aplicaciones multiplataforma

Qué veremos 1. Los conceptos: UX-UI2. Como trabajamos3. Qué sabemos4. Tipos de App5. El tamaño sí importa6. La resolución7. Áreas sensibles8. Uso de patrones9. Flujo de la App10. Trabajar la interfaz11. Trabajar la usabilidad12. Diseño visual13. Tendencias actuales14. Material entregado15. Recomendaciones

Page 3: Diseña tus aplicaciones multiplataforma

3

Natural de Menorca, me licencié en diseño digital en Barcelona, después en diseño gráfico en París y finalmente en dirección de arte aquí en Madrid.

Por el camino…Londres, Tesalónica, Santiago de Chile o Zúrich me han permitido aprender diferentes idiomas y considerarme ciudadana del mundo.

Apasionada del diseño, la arquitectura y el motor.Actualmente soy diseñadora UI UX en Plainconcepts. Podéis contactarme en:

Paloma Celaá

@plainconcepts

@PalomaCelaa y [email protected]

UX Design

Page 4: Diseña tus aplicaciones multiplataforma

4

UX : (User Experience Design) o “Diseño de Experiencia de Usuario”Es una práctica de diseño que tiene por objetivo satisfacer al usuario final de un producto. Definir que experiencia se quiere lograr. Definimos, qué interfaz, qué contenidos, que interacciones lograrán el resultado buscado. (pruebas con usuarios, entrevistas cualitativas, heat maps, AB testing…).

UI : (User interface) o “Diseño de interfaz”Parte del proceso de diseño donde se seleccionan y se distribuyen los elementos de la interfaz. Consistencia entre dispositivos o plataformas. Puede o no incluir diseño gráfico. (Wireframes, Mockups).

Final Design : “Diseño final”Daremos estilo gráfico, color, forma a la interfaz definida.

Los conceptos

@plainconcepts

INTRODUCCIÓN

IxD

UI

UXDelante de la

pantalla

En la pantalla

Page 5: Diseña tus aplicaciones multiplataforma

5

Considerar al otro como un complemento, comunicarse siempre que haya duda, tenemos un objetivo común, el mejor producto final posible.

Como trabajamos

@plainconcepts

INTRODUCCIÓN

Conceptualización Definición Diseño Desarrollo Publicación App final

Diseñador Programador

Carga de trabajo

Page 6: Diseña tus aplicaciones multiplataforma

6

Conceptualización y definición

Page 7: Diseña tus aplicaciones multiplataforma

7

• Sobre cliente• Quién es la competencia, que han hecho? • En que podemos diferenciarnos. Ser mejores.

• Sobre los usuarios, quién va usar mi producto?• Edad? Sexo?• Que OS usan? • En qué dispositivos?

• Sobre el contexto. Un usuario podría estar casi en cualquier sitio utilizando el móvil. Y aunque es gracioso uno de los sitios donde más se utiliza el móvil es…el baño ;)

• Caminando?• Sentado?• En el coche?

Todas estas preguntas nos ayudarán a definir qué App vamos a trabajar, una App sólo para niños en Android, un App sólo para chicas en iOS, etc…no tendrá más éxito porque esté en mas formatos y plataformas. Hay que ajustarse al usuario final.

Qué sabemos

@Plainconcepts

CONCEPTUALIZACIÓN Y DEFINICIÓN

Page 8: Diseña tus aplicaciones multiplataforma

8

NativaSon aplicaciones desarrolladas con el lenguaje de programación nativo del dispositivo, Objetive C o Swift para iOS, Java para Android y .Net para Windows Phone.

El diseño será acorde al OS elegido, los controles y animaciones vienen dados en la herramienta de desarrollo. Fácil aproximación. El UX es acorde a patrones establecidos. Nos ayudará la Guía de Estilo que nos da la plataforma elegida, colores fuentes e iconos están determinados. Tomarse el tiempo en customizar estos patrones a mi marca y estilo para que tenga personalidad la App final.

Tipos de App

@Plainconcepts

CONCEPTUALIZACIÓN Y DEFINICIÓN

No existe una posición única respecto a qué alternativa usar. Dependerá del tipo de aplicación y sobre todo los recursos humanos y económicos con que cuente el proyecto.

HíbridaSon aplicaciones desarrolladas usando HTML5, CSS y JavaScript, desplegadas dentro de un contenedor nativo como Phonegap/Cordova el cual brinda acceso a las capacidades del dispositivo.

Estética definida por el diseñador. A veces también es hibrida ya que se intenta usar el mismo diseño para varias plataformas. No es recomendable. Lo ideal es trabajar cada plataforma independientemente, mejorará el UX ya que los usuarios utilizan de diferente forma cada OS y tienen lenguajes adquiridos.

WebSon aplicaciones desarrolladas usando herramientas como Xamarin o Genexus (entre muchas otras), donde el desarrollo se realiza usando técnicas y lenguajes específicos de la herramienta elegida y luego se genera la App en el lenguaje de la plataforma destino.

Aquí también es libertad del diseñador, y como en la anterior se puede usar el mismo trabajo con pocas variaciones para cada plataforma. Pero siempre deberemos trabajar un mínimo individualmente.

Page 9: Diseña tus aplicaciones multiplataforma

9

La plataforma y dispositivos elegidos nos darán el escenario de trabajo sobre el que empezar a trabajar.Partimos del tamamño minimo para ir escalando hacia arriba los elementos o mostrar mas.

Considerar que mínimos utilizan los segmentos de usuarios elegidos.

La teoría del MOBILE FIRST, defiende empezar a diseñar por el dispositivo mas pequeño, que es también el que mas usamos.

El tamaño sí importa

@Plainconcepts

CONCEPTUALIZACIÓN Y DEFINICIÓN

iOS: 640x960 px , 200% HDPIAndroid: 720x1280 px, 200% HDPIWindows : 480x800 px, 150% HDPI iOS: 1024x768px (iPad), 100% MDPIAndroid: 600x1024, 100% HDPIWindows: Surface 1366x768/1080x1920 px 150%HDPI

iOS: 2560x1600 (13”)Windows: 1366x768 (portátiles) 1920x1080px (sobre mesa) xBox o Playstation comparten el mismo resultado final ya que dependerá de la TV del usuario1280x720 px (conocido como HD ready) muchos ya son Full HD, 1920x1080

móvil

tablet

dektop

tv

Page 10: Diseña tus aplicaciones multiplataforma

@Plainconcepts 10

MDPI: 1 X (Medium Density per Inch o Densidad por Pulgada Media 160 DPI)HDPI: 1,5X (High Density per Inch o Densidad por Pulgada Alta 240 DPI)XHDPI: 2X ( Extra High Density per Inch Densidad por Pulgada Extra Alta 320 DPI)XXHDPI: 3X (XX High Density per Inch 480 DPI)XXXHDPI: 4X (XXX High Density per Inch 640 DPI)

Que aplicándolo, si estamos trabajando en una imagen de 48×48 pixeles sería:

MDPI: 48 X 48HDPI: 72 X 72XHDPI: 96 X 96XXHDPI: 144 X 144XXXHDPI: 192 X 192

La resoluciónCONCEPTUALIZACIÓN Y DEFINICIÓN

Tener en cuanta la resolución de los dispositivos elegidos para preparar el material de diseño que se entregará al equipo de desarrollo.

Un material a baja resolución en un dispositivo de alta hará que se vean los elementos gráficos borrosos y con mala calidad.

Page 11: Diseña tus aplicaciones multiplataforma

11

Trabajamos el Diseño UX

Page 12: Diseña tus aplicaciones multiplataforma

12

Según el tamaño del dispositivo el usuario lo utilizará más frecuentemente en una posición u otra. Aprovechar esa capacidad para ofrecer la mejor experiencia al usuario final. Artículo de referencia

Áreas sensibles

@Plainconcepts

DISEÑO UX

Page 13: Diseña tus aplicaciones multiplataforma

13

Aprovechar el leguaje de cada dispositivo. Ejemplos de patrones

Uso de patrones

@Plainconcepts

DISEÑO UX

Page 14: Diseña tus aplicaciones multiplataforma

14

Flujo de app: post it o card sorting.

Definiremos las secciones principales y escribiremos un post para cada acción que puede hacer el usuario.• Me registro• Busco un artículo• Mando un mail• Voy a mi perfil…Las iremos colocando en cada sección hasta finalizar todos los flujos posibles del usuario usando nuestra la App

Flujo de la app

@Plainconcepts

DISEÑO UX

Page 15: Diseña tus aplicaciones multiplataforma

15

Son esquemas sencillos que usamos para plantear la distribución de los elementos en la interfaz. Con ellos planteamos toda la UI y podemos empezar a ver problemas y soluciones de UX.

Esto es muy importatnte antes de generar el estilo gráfico, ya que habremos resuelto todos los problemas de navegación y de aparición de contenidos antes de trabajar nada de forma final.

Una opción rápida para pasar esto a digital, si no conocéis herramientas de diseño, es el uso de Apps como Marvel https://marvelapp.com/pop/?popref=1

Trabajamos la interfaz

@Plainconcepts

WIREFRAMES

Page 16: Diseña tus aplicaciones multiplataforma

16

Son prototipos a escala real que nos ayudarán a plantear el resultado final y a estudiar posibilidades o mejoras. La versión manual, es más sencilla si no tienes conocimientos de las herramientas de diseño. Se ve el resultado rápidamente y es facil hacerse una idea de tamaños y cantidad de pantallas.

Trabajamos la usabilidad

@Plainconcepts

MOCKUPS

Page 17: Diseña tus aplicaciones multiplataforma

17

Antes de ponernos a diseñar el estilo grafico final es importante hacer una revision global, incluyamos al desarrollador siempre que sea possible, para ver el alcance y funcionalidades juntos que se hayan cambiado o que hayamos pensado modificar.

Arquitectura de información: • Responde a esos post del inicio? Tiene sentido?

Que voy a trabajar de forma distinta en cada plataforma? Lo tengo identificado ya?• Recordemos los patrones de cada plataforma• Definamos aquellas variaciones que sean importantes en wireframes y mockup para cada

una. Hacerlo mas tarde nos puede suponer problemas de usabilidad importantes.

Punto de inflexión

@Plainconcepts

VISTA DE PÁJARO

Page 18: Diseña tus aplicaciones multiplataforma

18

Una vez nos pongamos manos a la obra tendremos que tener en cuenta las Guías de estilo para cada OS• iOS - https://developer.apple.com/design/• Android - https://developer.android.com/design/index.html• Windows - https://developer.microsoft.com/en-us/windows/apps/design

Es importante conocerlas para poder jugar con los límites y poder ofrecer cosas nuevas. Si no será una App más, igual a todas las demás. Busca como lo que ofrece la plataforma puede beneficiarte.

Acuerda las animaciones y transiciones con el equipo de desarrollo, si alguna no es posible ve como afecta eso a tu diseño y si hay que añadir elementos gráficos de apoyo en sustitución.

Diseño visual

@Plainconcepts

ESTÉTICA FUNCIONAL

Page 19: Diseña tus aplicaciones multiplataforma

19

Como en la moda existen tendencias anuales que varían en función del mercado, las últimas son:

• Flat design, nació con windows 8, se ha ido actualizando con colores pastel y el uso de linea.

• Material Design, elementos con profundiad, sombras y colores juegan el papel esencial• Transitions and animations, vienen dadas por casa OS y los usarios suelen tener

aprendido su significado• Functional Animation, es aquella que ayuda al usuario a entender una acción.

https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/

Tendencias actuales

@Plainconcepts

NUEVOS ESTILOS QUE TRIUNFAN

Page 20: Diseña tus aplicaciones multiplataforma

20

Flat design

@Plainconcepts

NUEVOS ESTILOS QUE TRIUNFAN

Page 21: Diseña tus aplicaciones multiplataforma

21

Material design

@Plainconcepts

NUEVOS ESTILOS QUE TRIUNFAN

Page 22: Diseña tus aplicaciones multiplataforma

22

Sin infinitas las posibilidades con un poco de imaginación y con los recursos que tenemos aprendidos, girar, deslizar, mover…Intentar aprovechar estos para dar un uso distinto y mas visual. Eso dará un efecto WOW a tu App. Pero cuidado, puede parecer una feria y que sea incomprensible al usuario, no hay que abusar de estos efectos. Es sobre todo para Apps dedicadas a público joven que están acostumbrados a este lenguaje.

InsertarAnimación

@Plainconcepts

SE IMAGINATIVO

Page 23: Diseña tus aplicaciones multiplataforma

23

Las micro animaciones en iconos, menús y pequeños elementos que den información al usuario, ya darán un aporte distintivo a tu App a la vez que ayudarán al usuario a entender la interfaz. Son las mas recomendadas aunque un abuso de ellas también puede generar confusión. Elegirlas con criterio, quedándose sólo con aquellas que de verdad aportan información, ninguna que sea por estética ya que vuestro gusto no tiene porque coincidir con el resto.

Animaciónfuncional

@Plainconcepts

SE INTELIGENTE

Page 24: Diseña tus aplicaciones multiplataforma

24

Para una major comunicación con el equipo de desarrollo existen herramientas como Zeplin o Invision, donde se pueden ver las Guias de estilo (colores y tipografias usadas), así como el tamaño y posición de los elementos de la interfaz, estas herrameintas ayudarán a comunicar mejor entre equipos y obtener un mejor resultado final. Recordar que el tamaño y resoluciones elegidas hará que el diseñador deba preparer unos u otros assets para desarrollo ( slide 10)

Material entregado

@Plainconcepts

COMUNICACIÓN CON DESARROLLO

https://zeplin.io/https://www.invisionapp.com/

Page 25: Diseña tus aplicaciones multiplataforma

25

• Búsca y compara con la imagen de competencia. Se diferencial.• Usa los patrones communes para la resolución de problemas. No intententes reinventar

los usos estandarizados.• No te pierdas en decoraciones, que sea simple y usable• Las luces y sombras ya dan jerarquía, aprovechalas.• Da info con la interfaz sin que sea una feria, aprovecha las mini animaciones.• General un canal para recibir comentarios de los usuarios finales y úsalos para mejorar. • Una vez publicada tu App no la dejes ahí, actualiza y mejora lo que puedas.

Recomendaciones útiles

@Plainconcepts

QUE COSAS PUEDO HACER PARA MEJORAR

Page 26: Diseña tus aplicaciones multiplataforma

@plainconcepts

¡GRACIAS!@palomacelaa

Page 27: Diseña tus aplicaciones multiplataforma

www.plainconcepts.com

MADRIDPaseo de la Castellana 163, 10º

28046 Madrid. EspañaT. (+34) 91 5346 836

BILBAONervión 3 , 6º

48001 Bilbao. EspañaT. (+34) 94 6008 168

BARCELONAAv. Josep Tarradellas 10, 6º 1ª

08029 Barcelona. EspañaT. (+34) 93 3607 114

SEVILLAAvenida de la innovación s/nEdificio Renta Sevilla, 3º A

41020 Sevilla. España

DUBAIDubai Internet City. Building 1

73030 Dubai. EAUT. (+971) 4 551 6653

LONDONImpact Hub Kings Cross24B York Way, N1 9AB

London. UK

SEATTLE1511, Third Ave

Seattle WA 98101. USAT. (+1) 206 708 1285