ADN SURA

SURA es la marca que acompaña a los latinoamericanos con un portafolio de soluciones en Seguros, Pensiones, Ahorro e Inversión, con presencia en 10 países de la región.

Seguros SURA Argentina Seguros

Aplicaciones móviles

Última actualización : 28 Mayo 2020

Introducción

Antes de comenzar con la construcción de una aplicación móvil, se recomienda analizar las necesidades de los usuarios y de llegar a encontrarle sentido a una aplicación, buscar integrar la solución con una de las aplicaciones de SURA ya existentes. Recomendamos seguir los siguientes pasos:

Descubrir

Es importante determinar correctamente si una aplicación es la mejor alternativa para lograr el objetivo propuesto. Es necesario hacerse estas preguntas antes de aventurarse en la construcción de un nuevo canal para los usuarios. 

Consideraciones que se deben tener en cuenta antes de decidir construir una aplicación:

1. El presupuesto para la mantención de una aplicación es un 50% más alto que el de una web. Con una aplicación móvil nos enfrentamos a regulaciones y adaptaciones para nuevos dispositivos cada año. 

2. La rapidez con la que se puede liberar una nueva funcionalidad es mayor en web que en una aplicación móvil, ya que en esta se debe pasar por validaciones más exhaustivas por las store, principalmente la de Apple. 

3. ¿Qué pasa con los usuarios que no usan aplicaciones? Se debe considerar que puedan querer acceder a las mismas funcionalidades a través de un sitio web, a menos que se esté dispuesto a perder una porción de usuarios y solo liberar un punto de contacto a través de la aplicación móvil. 

4. La audiencia a la que se puede llegar a través del sitio web, es mucho más alta que la de una aplicación, en una web nos enfrentamos al posicionamiento en Google mientras que en la Store a una búsqueda mucho más dirigida.

¿Es necesaria o no una app?

Una app no siempre es la mejor manera de satisfacer las necesidades de los usuarios, y en ocasiones, el desarrollo de una aplicación podría resultar en una inversión del negocio sin retorno suficiente en términos de experiencia de cliente, aumento de satisfacción, ventas o cualquier otro objetivo que se haya propuesto.

Es recomendable revisar el listado de aplicaciones disponibles actualmente, tal vez una de ellas ya preste el servicio y pueda integrarse o robustecer el nuevo servicio. Revisar aquí el listado.

Definir

Antes de comenzar a desarrollar una aplicación, es necesario determinar cuáles serán los objetivos del negocio y las necesidades de los usuarios. En SURA entregamos una herramienta que permite definirlo de manera fácil en un equipo de trabajo.

Es importante que el equipo de trabajo esté alineado y conectado con las necesidades de los usuarios y los objetivos del negocio que se desean cumplir. 

Primeras definiciones:

1.  Iniciar desde los usuarios, identificando aquellos dolores, deseos, necesidades y oportunidades que se buscan satisfacer con la aplicación.

Ej: Ahorrar tiempo pagando el SOAT de mi auto.

2. Luego, enfocarse desde en el negocio, identificando y definiendo qué es lo que se quiere lograr con este proyecto, objetivos medibles que deben satisfacer una necesidad concreta del negocio.

Ej: Reducir un 50% el tiempo promedio de compra de SOAT.

¿Por qué es importante?

Las aplicaciones deben ser construidas con propósito, deben generar un impacto en la experiencia de los clientes al interactuar con servicios, herramientas, eventos o ser parte de una plataforma de comunicación.

El Scope Canvas es una herramienta que permite realizar definiciones que se podrán compartir con el equipo y proveedores para estar alineados. Tiene 5 casillas, cada una de ellas con una finalidad distinta.

 

Tipos de aplicaciones:

Con los objetivos y necesidades de los usuarios claros, se debe definir qué tipo de solución tiene más sentido en términos del esfuerzo y la tecnología que se deberán invertir e implementar.

Aplicación pre-construida por un tercero: 

Es un tipo de aplicación genérica ya construida anteriormente, donde se paga una licencia de uso para poder tenerla, con cierto tipo de personalización y libertades como: cambio de colores y logos.

Ventajas: Costo bajo, menor tiempo de desarrollo y menor esfuerzo de cara a la liberación de la aplicación.

Desventajas: Menor personalización. La experiencia de usuario podría no ser la mejor debido a problemas de diseño de interacción, menor diferenciación frente a la competencia. Este tipo de desarrollo se recomienda implementar principalmente para la gestión de eventos, aquellas soluciones de poco impacto y alcance.

Aplicación a la medida:

Son aquellas soluciones móviles que nacen y se construyen desde cero. Este tipo de desarrollos se recomienda para aplicaciones que resuelven necesidades clave de los usuario del negocio, aquellas que les permite una mayor satisfacción, una mejor percepción del servicio, eficiencia a la hora de realizar transacciones.

Aplicación web construida por un proveedor o inhouse:

Es la opción más sencilla y menos costosa. Es un sitio web al que se accede desde el navegador del teléfono y al ser “responsive design” se adaptada a todo tipo de dispositivos. Sin embargo, no se pueden activar notificaciones, esto depende de lo que ofrezca el navegador por lo que la experiencia en desempeño e interacción podría no ser tan buena ya que no se usan elementos nativos del sistema.

Aplicación híbrida (iOS y Android) construida por un proveedor o inhouse:

Es un tipo de aplicación que requiere de internet para funcionar, aprovecha al máximo la versatilidad de un desarrollo web y la adaptación a dispositivos como una app nativa. Permite utilizar los estándares de desarrollo web (HTML, Javascript y CSS) y aprovechar las funcionalidades de dispositivos como acceso a la cámara, GPS o acceso a los contactos. Además, presenta un menor costo que una aplicación nativa y una mejor experiencia de uso que una aplicación web. Sin embargo, tiene un menor rendimiento al de una aplicación nativa debido a que cada página debe ser renderizada desde el servidor y supone una mayor dificultad de desarrollo.

Aplicación nativa: 

Es un tipo de aplicación que para algunas funcionalidades no requiere de internet para el despliegue de datos. Este tipo de aplicaciones son desarrolladas única y exclusivamente para sistemas operativos móviles (Android, iOS, etc) y se adaptan al 100% con las funcionalidades y características del dispositivo obteniendo así una mejor experiencia de uso, también beneficios como un mejor rendimiento, menor consumo de memoria y mayor velocidad. Sin embargo, tiene un mayor costo de desarrollo, puesto que si se desea realizar una aplicación multiplataforma se ha de realizar una versión por cada sistema operativo.

Se recomienda que antes de construir una aplicación a medida se realice un prototipo navegable que permita validar si las funcionalidades planeadas resuelvan las necesidades de los usuarios.

Para comenzar, se deben construir los flujos e identificar aquellos clave que respondan al propósito de la aplicación, prototipar, construir hipótesis y validarlas con los usuarios.

Para la construcción de un prototipo recomendamos herramientas como:

Sketch
Invision
Marvel
Proto.io

Integrar o construir

Antes de construir una aplicación móvil, es necesario identificar otras aplicaciones de SURA a las que se pueda integrar, es importante ayudarle al usuario a tener centralizadas sus principales funcionalidades.

Si definitivamente se debe construir una aplicación desde cero, en SURA entregamos los lineamientos, las consideraciones que se deben tener en cuenta para crear el icono y las descripciones de la store, recomendaciones sobre usabilidad en los formularios, contrastes, tipos de espacios funcionales y consideraciones para publicar en las store.

Si definitivamente la aplicación es completamente independiente de las ya existentes se debe construir teniendo en cuenta los siguientes lineamientos y recomendaciones de diseño, contenidos, directrices en configuraciones del store, recomendaciones de frameworks, librerías y buenas prácticas en políticas de uso de datos.
 

Mantener

Cada año ocurren cientos de actualizaciones relacionadas con sistemas operativos, stores, frameworks, tendencias de diseño, desarrollo, interacción y herramientas. Una vez se lance la aplicación, el trabajo no termina ahí, en SURA recomendamos monitorear el desempeño y gestionar una mejora continúa.

¿Cómo gestionar la mejora continua de la aplicación?

Se recomienda utilizar metodologías ágiles que permitan realizar actividades de priorización para identificar aquellas que agregan valor y deben considerarse cuanto antes. Para partir, se pueden tomar insights e información proveniente de métricas, zonas de calor, puntos de quiebre de la experiencia en la aplicación, lo que dicen los usuarios en puntos de contacto físicos y digitales, ideas de equipo, tendencias, alertas del equipo de desarrollo sobre nuevas actualizaciones de sistemas.

Para ordenar en un listado, es posible usar Trello, una herramienta que permite visualizar las tareas y el estado en el que se encuentran.

Etapas

1. Oportunidades identificadas: insights
2.  Prototipos: ¿cómo validar con usuarios que la implementación que se desea hacer tiene sentido? Pueden ser prototipos de baja, media y alta fidelidad, es recomendable usar los que más faciliten el trabajo y permitan entregar información de valor. 
3. Validar con usuarios: Aquellas ideas que se pueden implementar ya que fueron validadas con usuarios, por lo tanto tiene sentido que el equipo de desarrollo empiece a trabajar en llevarlas a cabo.
4. Desarrollo: Aquí se tiene el work in progress de implementación, se podrán visualizar aquellas tareas que pronto estarán disponibles en una nueva actualización de la aplicación.
5. Finalizadas: Es posible ver el avance y la transformación que ha tenido la aplicación desde su primer lanzamiento.

El ciclo de mejora continua no termina hasta que se decida bajar la aplicación de las store. 

Color

Cuando se trata de diseño de aplicaciones móviles, se recomienda hacer una buena utilización de colores, con la intención de:

-Apoyar el reconocimiento y la conciencia de la marca SURA
-Fortalecer la llamada a la acción
-Mejorar la interacción intuitiva
-Crear un estilo claro y armónico

Los colores de la paleta corporativa deben estar presentes en todo material de comunicación. Siempre debe predominar el color del negocio correspondiente, usando acentos de los otros colores.

Azul SURA

Clic para copiar ¡Copiado!
  • Pantone: 286 C
  • RGB: 0, 51, 160
  • CMYK: 100, 75, 0, 0

Aqua SURA (oscuro)

Clic para copiar ¡Copiado!
  • Pantone: 3125 C
  • RGB: 0, 174, 199
  • CMYK: 84, 0, 18, 0

Amarillo SURA

Clic para copiar ¡Copiado!
  • Pantone: 809 C
  • RGB: 227, 232, 41
  • CMYK: 10, 0, 92, 0

Blanco

Clic para copiar ¡Copiado!
  • Pantone: White
  • RGB: 255, 255, 255
  • CMYK: 0, 0, 0, 0

Aqua SURA (claro)

Clic para copiar ¡Copiado!
  • Pantone: 637C
  • RGB: 78, 195, 224
  • CMYK: 62, 0, 8, 0

Contraste en el color

El contraste es uno de los factores clave que influyen en la navegación de una app ya que es efectivo para captar la atención del usuario mediante el color y mejorar la legibilidad.

Se recomienda usar una buena herramienta de contraste de color, para probar combinaciones de colores de fondo.

Contrast Ratio
Es una herramienta en línea diseñada por Lea Verou, experta en CSS que ha participado en varias especificaciones W3C.

El propósito de esta herramienta es calcular el contraste entre el color del texto y el color de fondo, para cumplir con las reglas de accesibilidad de la especificación WCAG 2.0. Visita el sitio aquí: https://contrast-ratio.com/

Contraste-Ratio toma en cuenta:
-Tamaño de letra y grosor
-Nombres de colores en notación hexadecimal, RGB, HSL y palabra clave
-Colores semitransparentes

Tipografías de la marca SURA

La tipografía es uno de los elementos más importantes de cualquier diseño. Es el medio que utilizamos para trasmitir nuestras ideas a los usuarios, es por este motivo recomendamos utilizar tipografías que representen el diseño y contenido de la manera más clara y eficiente.

Se debe utilizar las tipografías de la marca que son FS Joey para los títulos principales y Barlow para los contenidos.

Fotos e ilustraciones

Recomendaciones para las fotos

Tono y estilo

La primera recomendación es seguir el tono y el estilo de la marca SURA y adaptar el peso de la foto a los estándares mobile, conoce los criterios para seleccionar imágenes aquí.

Tamaño y peso

- Todas las imágenes deben tener 72 ppp en formato RGB (archivos .jpg y .png).
- Usar el formato .jpg para fotos y el formato png solo para logotipos y gráficos de arte lineal.
- Si no está utilizando una herramienta especial para comprimir las imágenes elija una calidad jpg entre 75 y 85%. Las imágenes no deben tener un tamaño mayor que unos 250 a 300 KB al final.
- La medida del píxel debería ser, idealmente, exactamente el tamaño máximo en el que aparece la imagen en la pantalla (en caso de duda, haga que la imagen sea un poco más grande, nunca más pequeña.

Recomendaciones para las ilustraciones

Tono y estilo

La primera recomendación es seguir el tono y el estilo de la marca SURA y adaptar el peso del archivo o ilustración o los estándares mobile, conoce los criterios para seleccionar archivos aquí.

Tamaño y peso

Se debe priorizar el formato SVG en las aplicaciones móviles, debido que es un formato escalable sin perdida de calidad.

Botones

El tamaño y la forma de un botón pueden aumentar o disminuir la probabilidad de interacción del usuario. Si el usuario no puede identificar que un elemento es cliqueable, no va a interactuar con él.

1. Principios de diseño de la interfaz de usuario para diseñar botones

Lo más importante es centrarse en el propósito del botón, es por esto que se recomienda un diseño que llame la atención del usuario brindando impacto visual, siendo el tamaño, forma y relleno de gran importancia para ayudar al usuario a encontrarlos.

Tamaño
Como todos sabemos, el toque es el principal método de interacción con nuestra aplicación móvil, es por esto que los botones deben tener un tamaño y separación adecuadas para asegurarnos que todos los usuarios puedan hacer uso de ellos sin ningún problema. De tal manera recomendamos que los botones sean al menos de 48 x 48 píxeles, de esta forma cumplimos con los lineamientos impuestos por Material Design de Android, 48 x 48 píxeles y 44 x 44 píxeles de Apple. Esto es para asegurar la densidad de la información equilibrada y la usabilidad.

Los botones/CTA no deben tener un ancho de más de 300 píxeles para que la densidad de la información sea equilibrada.

Los labels (textos contenidos dentro del botón) deben tener un espacio mínimo para seguir con los lineamientos estéticos.

Iconos ilustrativos
Los iconos como las ilustraciones difieren en estilo y función. Mientras que las ilustraciones llevan al usuario a una narrativa, capturando varias ideas y contando una historia, los iconos tienen un propósito más funcional.

Los iconos representan contenido en lugar de complementarlo. Los iconos son mucho más simples y más adecuados para describir conceptos muy específicos. A diferencia de las ilustraciones, los iconos pueden vivir dentro de un grupo de otros iconos porque son menos complejos estructuralmente y no requieren tanto espacio. Por separado, los iconos y las ilustraciones se pueden usar en las mismas páginas, se pueden usar en diagramas o dibujos técnicos y, en ocasiones, se pueden usar como una insignia en las ilustraciones.

Forma
La forma del botón depende de tu linea gráfica general, así que la recomendación sería que sean parte de tu linea de diseño.

Relleno del botón
Al igual que la forma, determinar si un botón debe llevar relleno depende de tu linea gráfica y el estilo de los demás componentes que uses.

2. Uso del color en los botones

Se debe usar el color para ayudar a los usuarios a identificar e interpretar el contenido de la aplicación e interactuar con los elementos correctos.

Siempre se debe recordar que la paleta de colores que se elija determina cómo los usuarios reconocen y recuerdan los elementos en la interfaz de usuario.

Apple tiene esquemas de colores claros y oscuros, que utilizan contraste y translucidez para evitar que los elementos de la interfaz se vuelvan abrumadores o poco atractivos. Observe el uso de alto contraste para la selección activa de los botones switch en el siguiente ejemplo:

3. Botones principales y secundarios

Con un fondo perfectamente emparejado, los botones fantasma actúan como contenido secundario, atrayendo la atención del usuario hacia el contenido principal o los botones sin abrumar al usuario.

En respuesta, el botón “continuar como nicolas@prueba.com” se ha resaltado.

4. Ubicación de los botones

Está muy bien diseñar botones que destaquen y proporcionen retroalimentación visual. Pero si el usuario no puede ver el botón, todo ha sido una pérdida de tiempo.

La ubicación, la posición y el orden son clave, así que se deben ubicar los botones donde los usuarios los van a encontrar: en la ruta del usuario.

5. Tendencias y diseño de botones

Podemos quedar atrapados en el diseño de ideas únicas al intentar ahorrar al usuario unos pocos clics. Pero guardar un clic a expensas de un comportamiento consistente definitivamente no es la mejor estrategia. Mantener la coherencia en todos los botones de UI ayudará a los usuarios a asociarlos con acciones y hacer clic. Eso es lo que realmente cuenta.

No solo se trata de mantener la coherencia con su propio diseño, sino también con aplicaciones similares y con las pautas de UI de cada sistema operativo.

Alertas

Las notificaciones son piezas de información que se originan en la aplicación que están dirigidas al usuario, cumplen un propósito muy importante, el cual es notificar al usuario de actividad dentro de la aplicación para así aumentar su compromiso con la misma.

Push notifications

Probablemente las más conocidas por todos pues han traído muchos beneficios para los usuarios, desde ahorrarle tiempo a las personas hasta dirigirlas a las actualizaciones específicas que desean.

- Requieren permisos de acceso del usuario
- Llegan a usuarios aún cuando no estén usando la aplicación
- Son capaces de vincularse en profundidad y llevar a los usuarios a contenido de aplicaciones específicas

Un ejemplo es cuando son usadas para alertar a los compradores sobre una venta flash o a los viajeros sobre actualizaciones de vuelos. Push es el canal para las alertas oportunas y relevantes.

Ejemplo de push notifications

In-app

Son mensajes, cualquier alerta o aviso enviado al teléfono dentro de la aplicación. Este es el canal para la incorporación, tutoriales y promoción de contenido dentro de la aplicación.

- Los usuarios pueden participar o descartarlos, no son permanentes.
- Pueden trabajar en conjunto con push (es decir, un push puede vincular en profundidad a un mensaje en la aplicación).
- Son útiles para notificar a los jugadores sobre eventos especiales o para preparar a los usuarios para obtener permisos de inserción.

Ejemplo de alerta a usuarios sobre una característica que aún no conocen.

Librerías

Según el tipo de desarrollo que escojamos hay distintos componentes o librerías disponible para su uso.

Desarrollo nativo

Si se opta por desarrollar una aplicación nativa tenemos estas opciones de librerías recomendadas. Estas son recomendaciones apuntado a mejorar los tiempos de desarrollo y mejorar la experiencia de la aplicación hacia el usuario final.

CocoaPods: Manager de dependencias para Swift y Objective-c.  Visita el sitio web aquí.

Alamofire: Librería de HTTP Networking. Visita el sitio web aquí.

Firebase: Integración de analytics, crashlytics y métricas de performance. Visita el sitio web aquí.

SwiftJSON: Parser de JSON en Swift. Visita el sitio web aquí.

SwiftyEssentials: Colección de extensiones para simplificar acciones comunes en el desarrollo iOS. Visita el sitio web aquí.

SwiftyUIEssentials: Colección de clases y extensiones que simplifican acciones comunes en el desarrollo iOS. Visita el sitio web aquí.

IQKeyboardManager: Librería para manejar errores del keyboard del equipo. Visita el sitio web aquí.

SDWebImage: Descarga de imágenes de manera asíncrona y soporte de cache. Visita el sitio web aquí.

SwiftSoup: Parse HTML para Swift. Visita el sitio web aquí.

Desarrollo híbrido

Si se opta por desarrollar una aplicación híbrida tenemos la ventaja de utilizar una herramienta para desarrollar para ambas aplicaciones. Tenemos estas recomendaciones de los frameworks más usados en el mercado.

Xamarin: Es una compañía de Microsoft para el desarrollo de aplicaciones para ambas plataformas utilizando el lenguaje C# como base. Visita el sitio web aquí.

PhoneGap: Es uno de los frameworks de desarrollo más populares. Es una distribución open source de Corvoda y permite desarrollar aplicaciones utilizando HTML, CSS y Javascript. Visita el sitio web aquí.

Ionic: Proyecto open source para el desarrollo de aplicaciones híbridas, basado en Angujar.js y Cordova permite desarrollar aplicaciones usando HTML5, CSS y Sass. Visita el sitio web aquí.

React Native: Permite crear aplicaciones utilizando sólo javascript y  crear interfaces indistinguibles de una interfaz nativa. Visita el sitio web aquí. Conoce más aquí.

Flutter: Es la plataforma de Google para desarrollar aplicaciones híbridas en tiempo record. Visita el sitio web aquí.

Recomendaciones generales

Estas son recomendaciones generales tanto para el desarrollo de aplicaciones nativas o híbridas, orientadas a mejorar el performance y la seguridad en el desarrollo de la aplicación

- Presupuesto para la mantención de una aplicación es un 50% más alto que el de una web. Con una aplicación móvil te enfrentas a regulaciones y adaptaciones para nuevos dispositivos cada año.

- La rapidez con la que puedes liberar una nueva funcionalidad es mayor en web que en una aplicación móvil, ya que en esta debes pasar por validaciones más exhaustivas por las store, principalmente la de Apple.

- ¿Qué pasa con los usuarios que no usan aplicaciones? Debes considerar que estos podrían querer acceder a las mismas funcionalidades a través de un sitio web, a menos estés dispuesto a perder una porción de usuarios y solo liberes un punto de contacto a través de la aplicación móvil.

- La audiencia a la que puedes llegar a través de tu sitio web, es mucho más alta que la de una aplicación, en una web te enfrentas al posicionamiento en Google mientras que en la Store, te enfrentas a una búsqueda mucho más dirigida.

Testing

Unit validación con usuarios

Se utiliza para probar que partes individuales del código, usualmente un método, funcionen de manera correcta.

Un buen Unit test es:

Repetible: puedes ejecutarlo muchas veces y siempre obtendrá el mismo resultado.
Rápido: que se ejecute de manera rápida.
Leíble: que sea entendible lo que el test esta probando.
Independiente: que se pueda correr cada test de manera individual.
Exhaustivo: tener suficientes test para probar todos los casos posibles.

Fuzz validación con usuarios

También llamado Monkey validación con usuarios, es un test de estrés que simula eventos de manera aleatoria dentro de la aplicación para ver qué ocurre.

Performance validación con usuarios

Este tipo de test tiene el objetivo de recolectar información de performance de la aplicación, mientras se corren test de la UI o Fuzz test para asegurar que el performance sea correcto. La información a recolectar incluye uso de batería y energía, uso apropiado del GPS u otra funcionalidad que pueda drenar la batería, uso de memoria y network.

Recomendaciones

- Tanto la aplicación como el backend deben de ser testados de manera independiente.

- Cada cambio de la aplicación o backend deben incluir su set de Unit test y UI test respectivamente.

- Utiliza la mayor cantidad de dispositivos posibles para ejecutar los UI test.

- En caso de encontrar bugs, incluye la mayor cantidad de información para reproducir el error.