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.

SURA Asset Management Regional (Corporativo) SURA Asset Management Corporativo

Sitios web

Última actualización : 15 Mayo 2020

Descargar UI KIT

UI Kit Sitios web

Un UI kit  (User Interface kit) es un archivo que incluye varios elementos ya prediseñados (como por ejemplo: botones, iconos, tablas, formularios, sliders, etc.) para ayudarnos en el desarrollo de nuestras interfaces de usuario.

Introducción

En SURA desarrollamos y administramos distintos tipos de sitios web. Si bien existen muchas formas de clasificarlos, para efectos de los lineamientos del manual de marca los dividiremos entre públicos (no requieren autenticación) y privados (es necesario un usuario/contraseña, estar conectado desde una red interna SURA o son exclusivamente de uso para colaboradores).

A continuación presentamos sus principales características y consideraciones desde el punto de vista de aplicación de buenas prácticas desde la marca.

Antes de comenzar

¿Qué nos debemos preguntar antes?

Antes de comenzar, es importante identificar el objetivo y reconocer qué tipo de sitio web se orienta mejor al cumplimiento de ese objetivo. Para conocer más revisar tipos de sitios web.

Al tener claro qué tipo de sitio web debemos desarrollar, contaremos con un marco referencial de cómo debería verse y estructurarse el sitio. Este manual, además de definir lineamientos generales de la marca para canales digitales, también busca apoyar a los equipos para que puedan hacer un trabajo más eficiente en el desarrollo de sus proyectos. 

Para web hay muchos elementos que se pueden reutilizar, o al menos construir a partir de algo que podría ya existir. Por lo tanto, la siguiente pregunta sería ¿existe algún sitio web en SURA similar al que estoy considerando desarrollar? Si la respuesta es sí, es conveniente revisarlo en detalle, evaluar la opción de complementar o acoplarse a esta iniciativa, si no aplica, al menos rescatar las buenas prácticas del mismo, sea que estén contenidos ya en este manual, o ponernos en contacto con el equipo a cargo para entender y evaluar el reutilizar parte del conocimiento o material necesario.

A continuación, recomendamos que puedas realizar pruebas de concepto, que permitan validar de forma temprana el proyecto. Tanto desde el punto de vista del negocio/organización, como desde los usuarios.

De igual modo, es necesario que de forma temprana se conforme un equipo de desarrollo y/o consultores de tecnología para evaluar opciones de plataformas, lenguajes de programación, ambientes, entre otros. Considerando estas variables anticipadamente, será más fácil definir el proceso de trabajo, solicitar los apoyos que se requieran desde SURA o terceros, determinar costos del proyecto, identificar con más precisión los plazos asociados, entre otros.

Definición de tecnologías y ambientes

Como mencionamos anteriormente, una buena definición tecnológica permite enfrentar el proyecto con mayor claridad.

Es conveniente determinar, o al menos evaluar, los siguientes temas:

Frameworks, back-end y front-end: 

Dependiendo de las características del proyecto, podría ser una buena idea utilizar algo pre-construido que permita un buen “time to market”, reducción de costos y evitarnos “reinventar la rueda”.

Un caso común es necesitar un sistema de gestión de contenidos. Si realmente no se requiere algo a medida, una buena opción son plataformas como Sharepoint, Drupal o Wordpress, todas autorizadas en SURA para ser utilizadas siguiendo prácticas estándares y seguras para el desarrollo de sitios web. Si el proyecto requiere de funcionalidades que escapan a las consideradas en esos sistemas o se requiere, por alguna razón adicional, un desarrollo a medida, el sistema puede ser desarrollado específicamente para esa finalidad. En cualquier caso, el CMS deberá cumplir con las pruebas de seguridad que nuestras áreas de TI solicitarán.

En términos de lenguajes de programación existe una amplia variedad: PHP, Ruby, Java, C#, por mencionar algunos. Su elección depende directamente del equipo de desarrollo y de las necesidades del proyecto. Adicionalmente, es posible utilizar frameworks de desarrollo como RoR, Angular o React.

Desde el punto de vista del navegador, es necesario que todo desarrollo se haga con los estándares de HTML5. Basado en HTML y CSS, ya sea utilizando librerías de front-end o no, pero siempre generando un resultado de sitios web ordenados, estandarizados y semánticos; tanto en términos de seguir buenas prácticas de etiquetados, accesibilidad, como también un buen comportamiento entre los navegadores más utilizados en el mercado: Safari, Chrome, Firefox y Edge, en sus versiones de escritorio y móviles. Más información sobre navegadores y grillas en la sección de layout.

Motor de base de datos: 

A nivel de base de datos, no hay exigencias entre una tecnología u otra, sin embargo se recomienda que el tratamiento de la información se mantenga con los más altos estándares de seguridad y se procure desde las aplicaciones resguardar el acceso a la misma, tanto para otras aplicaciones, como para evitar ataques que puedan poner en riesgo a la compañía, los usuarios, en términos de acuerdos, regulaciones y contratos vigentes.

Servicios: 

En caso de proveer servicios o establecer interfaces de comunicación con terceros, reiteramos la recomendación de hacerlo de forma segura. En términos concretos, el lineamiento es utilizar APIs con consideraciones de seguridad que permitan acceder solo a quienes estén autorizados para ello y, en términos de tecnología, utilizar arquitecturas de tipo REST (Representational State Transfer) para web services.

Servidores: 

Los proyectos web pueden ser alojados on-premise o mediante servicios de tipo cloud.

El primer caso indica que el proyecto deberá ser alojado en instalaciones de SURA, o en el datacenter de un proveedor externo; normalmente esto eleva los costos asociados a mantenimiento y habilitación. Se recomienda evaluar con mucho cuidado si es pertinente mantener las aplicaciones utilizando este formato, pues SURA ha comenzado a migrar paulatinamente su infraestructura TI hacia la nube, es decir al segundo tipo: cloud.

En cloud, los proveedores que utilizamos de forma habitual son Google Cloud Platform (GCP) y Amazon Web Services (AWS). Estos servicios pueden ser contratados de forma directa o mediante aliados/consultores de desarrollo.

Coordinación con TI

Personas de contacto:

En caso de requerir asistencia o de requerir información adicional sobre tecnología, los encargados por cada compañía son:

Grupo SURA, Fundación SURA
Nombre apellido - Teléfono - Email

Seguros SURA
Nombre apellido - Teléfono - Email

SURA Asset Management
Nombre apellido - Teléfono - Email

Pruebas de seguridad:

Antes de lanzar un nuevo sitio web, se requiere pasar exitosamente las pruebas de seguridad definidas en SURA. Estas pruebas se gestionan mediante el encargado de TI en cada compañía, se agendan con anticipación (1 a 2 meses antes de la salida a producción).

Estas pruebas permiten validar que los sistemas se encuentren en óptimas condiciones para pasar a un ambiente productivo. 

Certificados:

Los certificados de seguridad SSL protegen la confidencialidad de los datos transmitidos a través de la red. Su utilización pasó de ser una recomendación a una exigencia. El no uso o configuración incorrecta es adicionalmente penalizada por los principales motores de búsqueda, y se alerta de forma notoria en los navegadores web modernos.

La recomendación desde SURA es adquirir certificados que permitan proteger el tráfico sobre todo dominio y subdominios hasta un nivel inferior, ejemplo: intranet.gruposura.com. Para ello, la mejor alternativa es adquirir certificados de tipo “wildcard”, los que cubren el dominio principal y todos sus subdominios.

Tipos de sitios web

En SURA desarrollamos y administramos distintos tipos de sitios web. Si bien existen muchas formas de clasificarlos, para efectos de los lineamientos del manual de marca los dividiremos entre públicos (no requieren autenticación) y privados (es necesario un usuario/contraseña, estar conectado desde una red interna SURA o son exclusivamente de uso para colaboradores).

A continuación presentamos sus principales características y consideraciones desde el punto de vista de aplicación de buenas prácticas desde la marca.

Públicos

Corporativos

Los sitios web corporativos, son nuestra cara frente al mundo en internet. En este manual abordaremos con detalle los componentes que permiten construir estos sitios que están compuestos principalmente con fines informativos.

Negocios

Los sitios web de los negocios tienen carácter informativo y eventualmente elementos transaccionales, por lo tanto, siguen el lineamiento de construcción de un sitio web corporativo, pero añaden algunos elementos adicionales como los componentes para autenticarse (login), elementos destacados para acceder a pagos, preguntas frecuentes, datos de contacto, sucursales, entre otros.

Landing pages y campañas

Los sitios web de landing pages y de campaña, como su nombre dice, normalmente solo considera una página de caída. Esta página busca informar brevemente sobre algún tema, para luego capturar los datos de contacto del usuario interesado, mediante un formulario.

Iniciativas y herramientas

Un sitio web para iniciativas o herramientas de una marca, corresponde a un sitio web que no requiere autenticación, además de un conjunto de funcionalidades muy específicas, como este mismo sitio web. Usa patrones de diseño limpios, los colores definidos por la marca y prioriza el uso de espacios destinados al buen uso de cada herramienta.

Aparecen elementos como buscadores, filtros y barras de navegación que no son tan frecuentes ni protagonistas en los otros tipos de sitios web. Dichos elementos se detallan en la sección componentes.

Ecommerce / transaccionales

Los sitios web de ecommerce y/o transaccionales, tienen su foco puesto en la conversión. Por lo tanto, la navegación, la simplicidad de uso y la carencia de elementos distractores se deben alinear con ese fin. A nivel de componentes, se utilizan los mismos que aplican para los sitios ya mencionados.

En estos sitios es prioridad que se realice un trabajo muy al detalle en analítica web, para así poder contar con un detalle y entendimiento acabado sobre el desempeño del sitio y las estrategias de difusión y conversión. Para ello, revisar la sección guía inicial.

Privados

Sucursales virtuales (login cliente)

Los sitios web para sucursales virtuales deben contar con pocos distractores, una barra de navegación directamente asociada a la sesión del usuario y a las opciones desplegadas en el contexto de la navegación privada. No se recomienda replicar el menú de navegación del sitio público desde el cual se accede a la sucursal virtual.

A nivel de componentes, tal como en los sitios de herramientas, acá son protagonistas los formularios, botones, tablas, filtros, gráficos y otros elementos utilizados para el despliegue de información detallada e ingreso de información de parte del usuario.

Debido al aumento en el uso de móviles para acceder a web, estos sitios suponen un desafío adicional en diseño adaptativo, pues dichas interfaces normalmente deben ser ajustadas con una rigurosidad mayor a la de un sitio web informativo, debido a la complejidad y comportamiento de los elementos de interacción. Es por ello que estos sitios pueden tener un comportamiento responsive (la misma interfaz se adapta a la pantalla dependiendo de su tamaño), una versión especial para ciertos “quiebres de pantalla” o definitivamente contar con una versión móvil, ya sea solo web o además una aplicación instalable en teléfonos o tablets.

Colaboradores (Sharepoint)

En el caso de sitios privados, para uso interno, basados en la plataforma Sharepoint de Microsoft se recomienda contar con ciertos resguardos desde el diseño y construcción de estos sitios.

En primer lugar, considerando componentes estándares como la barra de navegación principal, la que se usa de forma transversal entre los sitios SURA.

Colaboradores (no Sharepoint)

En el caso de sitios web nos basados en tecnología Sharepoint, se tiene una mayor flexibilidad, sin embargo, se recomienda homologar la presencia y jerarquía de elementos de autenticación y navegación, de manera que los colaboradores se enfrenten a una experiencia similar entre sistemas internos.

Contenido

Texto

Títulos:
Los títulos se utilizan como introducción a un tema y para la diferenciación visual entre bloques de contenido. Los títulos requieren jerarquías y una ubicación que se ajuste a estos.

Listas:
Las listas se utilizan para organizar el contenido verticalmente. Las listas pueden ser ordenadas o desordenadas. Las listas desordenadas también se pueden usar como listas de verificación.

Lista con iconos

Lista sin iconos

Lista numerada

Lista con viñetas

Citas:
Las citas muestran declaraciones relevantes de manera destacada. 
Cita con imagen: use citas con una imagen siempre que haya disponible una representación visual adecuada o si desea puede mostrar al autor. 
Cita tipográfica: use comillas tipográficas como elemento dentro de los párrafos de texto, para enfatizar declaraciones importantes.

Cita con imagen

Cita tipográfica

Tablas:
Las tablas se utilizan para poner contenido en una cuadrícula ordenada. La primera línea es siempre la línea de encabezado y define el contenido a continuación para cada columna. Cada columna se puede ordenar.

Párrafos:
Los párrafos son bloques de texto enriquecido y disponibles en varios formatos.

Links:
Los links o enlaces se utilizan principalmente para elementos de navegación. Los links también se pueden usar para acciones con prioridades más bajas, pero solo en combinación con un botón de mayor prioridad.
 

Componentes

Acordeones:
Los acordeones, son un conjunto de titulares o títulos donde cada uno cuenta con la opción expandible de contenido, sin ingresar a una nueva página. En estos se puede expandir un elemento a la vez.

Botones:
Los botones o llamadas a la acción (CTA) se utilizan para indicarle al usuario acciones importantes dentro de una plataforma digital.

Como recomendaciones:
- Las etiquetas o los textos de los botones deben hablar en el sentido de la comprensión del usuario, en lugar de en el idioma del sistema.
- Los botones deben brindara el contexto suficiente para indicarle al usuario a qué lugar va a ingresar, es decir, una página interna o externa de la plataforma digital.

Cards:
Una card o tarjeta es un contenedor de contenido flexible y extensible, que se utiliza para dar introducción o brindar una pequeña descripción a una categoría de contenido. Incluye ítems como: Título, descripción, etiquetas y/o iconos o imágenes.

Carrusel:
El carrusel es un componente de presentación de elementos de imágenes y/o textos, con un comportamiento similar al deslice o a lo que hoy se conoce como swipe para cada slide o diapositiva.

Dropdown:
Los Dropdowns son listas desplegables o los campos de selección que permiten al usuario seleccionar una opción de una lista.

Formularios:
Los formularios son un espacio habilitado para la captación de datos de los usuarios, donde estos ingresan información y datos bajo un fin. Los formularios pueden ser de diferente longitud para representar diferentes casos de uso.

Modales:
Los modales son capas o vistas de información que proporcionan información extra dentro de una página, sin romper el contexto o acción dentro de ésta, dado que no redirecciona a una nueva página o vista, y por otra parte, pueden ser cerrados manualmente por el usuario.

Paginación:
La paginación o paginadores son componentes que se utilizan para navegar a través de listas de contenido, mostrando la posición actual del usuario, la posición a la cual se dirigiría el usuario al seleccionar otra lista de contenidos, así como también la cantidad total de páginas de lista.

Menú:
El menú principal es un componente de navegación que comparte los principales accesos y vistas de una plataforma digital, que según una arquitectura son las del primer nivel o las categorías que tienen más contenidos o las que generan mayor conversión para el negocio dado que están dentro de sus objetivos y necesidades de los usuarios.

Header:
El header es un componente de navegación complementaria al menú principal y representa un grupo de ayudas para accesos que si deben de estar consideradas de manera transversal en toda la navegación, tales como formularios de contacto, buscadores, etc.

Footer:
El footer o pie de página son componentes que cierran cada pantalla o página y en donde se proporciona información sobre las páginas del menú principal de navegación, header y temas legales, redes sociales e información de copyright requerida en el país respectivo de la plataforma digital.