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 El Salvador ASESUISA

Sitios web

Última actualización : 20 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.

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.

Modelo de arquitectura

El modelo de arquitectura de marca en el universo digital define lineamientos para crear, administrar y configurar los activos digitales de SURA en América Latina de acuerdo con la nueva realidad de nuestra Compañía.

¿Qué es una URL?

La dirección web o también conocida como URL (Uniform Resource Locator), es la base del internet actual y en la que todos navegamos. En su expresión más simple, una dirección web es la forma sencilla de identificar o de encontrar cualquier cosa que busquemos en la red como una página web.

La dirección web es la dirección que vemos en los navegadores de nuestro computador o celular y que identifica una página web y se se compone de varios elementos:

Protocolo (HTTP):

(Hypertext Transfer Protocol), o protocolo de transferencia de hypertexto en español, es la primera parte que encontramos en una dirección web y es, como su nombre indica, el protocolo de comunicación que permite la transferencia de información por internet.

Gracia a este protocolo existe una comunicación entre el cliente (que solicita información mediante un navegador) y el servidor (donde se almacena la información). 
Consulta sobre certificados de seguridad aquí.

Subdominio (www):

El subdominio es un subgrupo del nombre del dominio que se puede considerar como un dominio de segundo nivel. Por lo general encontraremos las conocidas tres w «www» (World Wide Web) pero en ocasiones la dirección web la encontramos sin subdominio u otras variantes con la finalidad de utilizarlos como un anexo del dominio principal.

Dominio:

El dominio hace referencia al nombre único que identifica a un sitio web. Gracias a los nombres de dominio, que son fáciles de recordar, no tenemos que utilizar las direcciones IP (es un número que identifica una interfaz en la red) para poder acceder a cada uno de los recursos de internet.

Por lo general, los nombres de dominios son fáciles de recordar y suelen tener el mismo nombre de la empresa.

Dominio de máximo nivel (TLD):

Es la parte final de una dirección web, nos indica la naturaleza del mismo dominio. Existen varios niveles, dependiendo del tipo de dominio que se busca tener.

Dominios de nivel superior genéricos:
.COM
.NET
.ORG
.INFO

Dominios de nivel superior geográficos:
.GT (Guatemala)
.AR (Argentina)
.ES (España)
.MX (México)

Directorio o categoría: 

La carpeta o directorio es esa parte de una URL que nos indica que dentro del mismo hay una página y que se suele utilizar para organizar de forma ordenada la estructura de una página web.

Página o ruta:

La página o ruta hace referencia a un fichero o archivo de la página web. “La página” es donde se suele cargar toda la información que encontramos dentro de una web.

Carpeta o etiqueta: 

La etiqueta es una referencia interna a un contenido de una página. Son necesarias para llamar a un contenido enlazado de forma interna mediante un “enlace ancla”.

Gestión de dominios

Depende de la página web que se desea crear, se deben tener en cuenta las siguientes recomendaciones para definir dónde se hospedará:

Marca sombrilla: 

Es un dominio sin descriptor del negocio que incluye la palabra SURA y su terminación es de acuerdo al país. En estos casos, el modelo de arquitectura define qué se debe utilizar directamente el dominio sin ningún descriptor adicional.

Corporativos:

Usa directamente el nombre de la compañía.

Negocios y submarcas:

El modelo de arquitectura define que para estos casos el negocio se convierte en subdominio y el dominio corresponde a la compañía o marca.

Programas/ servicios/ prestación:

Se recomienda usar un directorio o un subdominio, en casos donde se requiera un servidor o tecnología diferente, se recomienda utilizar un subdominio.

Campañas:

Las campañas pueden tener un directorio, un subdominio o incluso una página con dominio independiente pero de carácter temporal exclusivamente para el tiempo que durará la campaña.

Portales integrados

Los portales integrados están presentes en los países donde SURA tiene presencia con sus dos compañías: SURA Asset Management y Seguros SURA.

El fin de estos sitios web es ser la puerta de entrada a los negocios, mediante un dominio sombrilla.

Cada portal integrado usa el dominio principal para la marca con el TLD del país (en caso de estar disponible). Mientras que los negocios utilizando los subdominios.

La estructura de este sitio corresponde a:

Mediante esta interfaz se da acceso de forma directa a los negocios de cada compañía, acceso a logins, además de destacar contenido complementario que pudiese ser de interés para los usuarios de cada país.

Analítica web

Cada uno de los sitios web que sean lanzados deben acompañarse de una estrategia de analítica y métricas. De esta forma, podremos conocer detalles respecto de lo que pasa al interior de cada sitio, información sobre nuestros usuarios, desempeño de la inversión en campañas y el rendimiento de las conversiones que se definan, entre otros.

Como lineamiento planteamos contar con un plan de medición, un plan de implementación y la instalación de herramientas para realizar el seguimiento y gestión de métricas.

La principal suite de herramientas para ello, es Google Marketing Platform (antes conocida como Analytics 360). Estas herramientas están a disposición de todos los equipos para ser incorporadas en los proyectos web.

Esta suite se compone de las siguientes herramientas: 

Los principales lineamientos están definidos para Google Analytics y Google Tag Manager.

Google Analytics:

Google Analytics es la herramienta más importante para recolección, procesamiento y visualización de datos de analítica. Al instalar Google Analytics podremos capturar información muy relevante para tomar decisiones y gestionar nuestros activos digitales, en particular nuestros sitios web.

Para instalar Google Analytics debemos contar con los permisos necesarios. Si tienes un sitio web y no conoces los permisos y/o credenciales para acceder, revisa los datos de contacto para soporte de Google Analytics en SURA.

La instalación de Google Analytics se puede hacer de forma directa, o mediante Google Tag Manager. La recomendación es hacerlo mediante Google Tag Manager.

Google Analytics cuenta con reportes de audiencia, adquisición y comportamiento, en su mayoría, los datos que ahí aparecen se capturan de forma automática al realizar una correcta implementación de Google Analytics.

Adicionalmente, es recomendable configurar objetivos de conversión y eventos, cuando cada proyecto lo necesite.

Los objetivos de conversión se fijan en cada vista, desde el panel de administración. En el caso de los eventos, pueden ser configurados directo desde código fuente o mediante tags en Google Tag Manager. La recomendación es hacerlo mediante Google Tag Manager.

La jerarquía de cuentas en Google Analytics es la siguiente:

En Google Analytics se pueden crear reportes personalizados, mezclando métricas y dimensiones disponibles en la herramienta. Estos reportes permiten facilitar el trabajo de generación de informes. Nuestra recomendación es que ante solicitudes frecuentes de información se configuren reportes personalizados, de manera que los equipos puedan hacer un uso eficiente de su tiempo. Estos reportes se configuran una vez y luego están disponibles para cada vez que se deseen consultar.

Google Data Studio;

Si la capacidad de reportería y visualización de Google Analytics es insuficiente para los requerimientos de los equipos, se desea mayor nivel de personalización o se requiere incluir distintas fuentes de información, recomendamos el uso de Google Data Studio, otra herramienta disponible en la suite Google Marketing Platform.

En Google Data Studio se pueden mezclar distintas fuentes de información. Por ejemplo: Google Analytics, Google Ads, campañas en Facebook, bases de datos propias, entre otras.

Google Tag Manager:

Esta herramienta actúa como puente entre nuestro sitio web y la recolección/escritura de datos mediante servicios de terceros como Google Analytics, Google Ads, o inserciones personalizadas de código que necesitemos inyectar en cada activo digital, de forma ordenada, segura y con mínimas modificaciones en el código fuente de nuestros sitios.

La interfaz de Google Tag Manager permite gestionar tags, triggers y variables. 

La recomendación general con esta herramienta es que, de existir métodos estándares de inserción de tags, privilegiamos el uso de éstos y, en particular, toda medición de eventos de Google Analytics. De manera de evitar acumulación de “código basura” en nuestros sitios, mejorar la visibilidad de eventos y facilitar la gestión de los mismos.

La instalación de Google Tag Manager requiere de la inserción de 2 trozos de código, más info en la documentación oficial.

Si los sitios en cuestión utilizan tecnologías que no recargan la página (por ej, algunas implementaciones con React o Angular), se requiere de configuraciones adicionales para capturar los datos que sean necesarios, más info aquí.

Front-end y CMS

Frameworks de front-end

La estructura de sitios web SURA utiliza la grilla del framework Bootstrap 4. Con el correcto uso de sus contenedores, filas y columnas, permite un comportamiento y adaptación responsive de los diseños autorizados. Más información acerca de layouts y grillas en Layout.

CMS

Desde el desarrollo front-end es importante considerar que los contenidos administrados desde un CMS podrían ser de tipos muy variados, no solo párrafos de texto o enlaces, sino que también un contenedor de texto enriquecido podría contener elementos como listas, tablas, imágenes  (y sus posibles alineaciones), negritas, etc. El framework Bootstrap 4 incluye un normalizador de estilos llamado Reboot (https://getbootstrap.com/docs/4.0/content/reboot/) que ofrece un buen punto de partida, sin embargo es recomendable que según las necesidades de diseño se pueda dar estilos no solo a los elementos propuestos en los diseños de interfaces, sino que todo elemento que pueda ser generado desde el editor de texto enriquecido en el CMS que se esté utilizando, de esta forma asegurar una correcta visualización sin importar qué elemento se inserte, y haya sido propuesto o no como proceso de diseño.

Crossbrowsing

El Crossbrowsing define la correcta visualización y compatibilidad del sitio web en distintos navegadores a través de distintos sistemas operativos o dispositivos. Los sitios web SURA deben procurar esta validación en navegadores modernos en sus más recientes versiones, tales como Google Chrome, Safari, Microsoft Edge y Firefox. En casos específicos donde se requiera habilitar una retrocompatibilidad en versiones antiguas de algún navegador, este requerimiento será expresamente solicitado y argumentado por el solicitante.

Herramientas que recomendamos para el flujo de trabajo de crossbrowsing:
Can I Use (https://caniuse.com): Verifica la compatibilidad de tecnologías como HTML, CSS o JS en distintos navegadores y sus versiones.
BrowserStack (https://www.browserstack.com): Navegadores reales en distintas versiones y sistemas operativos que facilitan el proceso de QA y Debugging.

Usabilidad

¿Qué es usabilidad?

En general, la usabilidad es una dimensión de la calidad de un producto, servicio o canal, referida a la facilidad de uso. En su origen, el concepto de usabilidad se aplica a sistemas digitales, aunque algunos de sus principios pueden ser aplicados a otros espacios.
La usabilidad no es una disciplina ni una metodología en particular, sino una dimensión que puede medirse a través de una serie de variables y que dispone de principios prescriptivos y métodos de medición.
Como tal, la usabilidad y algunos métodos están descritos en una serie de estándares ISO. El más relevante es el 9241, "Ergonomics of human-system interaction — Part 11: Usability: Definitions and concepts". En este estándar se le define como:

"la medida en que un sistema, producto o servicio puede ser usado por usuarios específicos para alcanzar objetivos específicos con efectividad, eficiencia y satisfacción en un contexto de uso específico".

Siendo un estándar, esta definición contiene una serie de elementos que buscan abarcar las diferentes dimensiones de la usabilidad:
El alcance de la definición: se aplica a sistemas, productos o servicios.
Los actores o elementos involucrados: usuarios, objetivos y contexto de uso.
Las métricas básicas: efectividad, eficiencia y satisfacción.
Revisaremos cada uno de estos elementos un poco más adelante.

Una definición más simple es la de Nielsen & Norman Group, un referente en el tema: 

"Usabilidad es un atributo de calidad, que evalúa cuán fáciles de usar son las interfaces".

En ella se hace énfasis en que se trata de un atributo de calidad, es decir, que determina la calidad objetiva y percibida de un producto, canal o servicio, de acuerdo a lo fáciles que son de usar. En otras palabras: un producto fácil de usar es mejor que uno difícil de usar.
Por su foco en la facilidad de uso, la usabilidad es parte central de los procesos de diseño centrados en las personas, que buscan agregar valor a los usuarios.

Usabilidad es la medida en que un sistema, producto o servicio puede ser usado por usuarios específicos para alcanzar objetivos específicos con efectividad, eficiencia y satisfacción en un contexto de uso específico.

Alcances de la usabilidad

En general la usabilidad se refiere a productos, sistemas y servicios digitales, aunque sus principios son aplicables también a otros espacios como materiales impresos, espacios físicos, canales no digitales como un call center, entre otros.

Podemos hablar por ejemplo, de la usabilidad de un IVR, aunque no sea una interfaz digital  tradicional. En un IVR la usabilidad estará determinada por la facilidad de comprender los nombres de las secciones, la cantidad de opciones en cada nivel, si las opciones están alineadas con las tareas que el usuario busca resolver, etc. 

En una sala de atención a clientes, la usabilidad se asociará a la facilidad de identificar los espacios y encontrar dónde debo ir, a entender con quién debo hablar o qué opciones tengo disponibles, qué puedo hacer aquí.

En este manual, sin embargo, nos enfocaremos en la usabilidad de espacios digitales, incluyendo canales como el web, con sus versiones de escritorio y móviles, aplicaciones móviles, pantallas de autoconsulta o autoatención y cualquier dispositivo digital que habilite a los usuarios a interactuar con la compañía. 

Para realizar una definición más precisa, distinguiremos los conceptos de producto, sistema y servicio digital, como espacios que dependen en gran medida de la usabilidad para asegurar que los usuarios los utilicen y adopten.

Un producto digital lo entenderemos como un bien que se distribuye mediante formatos y canales digitales. Por ejemplo, un disco musical en formato digital, comprado en en un servicio como Apple Music es un producto digital. Otro ejemplo de producto digital es una app móvil, como un juego, que compro en Google Play o en App Store de Apple.

Un servicio digital, en tanto, es un mecanismo de distribución de productos digitales o la entrega de un servicio en formato digital. Por ejemplo, Apple Music, Google Play o App Store de Apple son servicios digitales, así como un software en formato de servicio como Office 365.

Finalmente, un sistema digital es un conjunto de elementos de software y/o hardware que permiten realizar una o más tareas, como por ejemplo un CRM que conecta la información de los clientes en diferentes dimensiones y de múltiples puntos de contacto. 
Un sitio web, una aplicación móvil, un kiosco de autoatención, por ejemplo, pueden ser un canal o un punto de contacto, parte de un producto, servicio o sistema digital.
En todos estos formatos digitales, la usabilidad juega un rol clave para garantizar su calidad, a través de la facilidad de su uso.
 

Elementos que influyen en la usabilidad

De acuerdo al estándar ISO, la usabilidad es determinada según tres elementos: usuarios, objetivos y contexto de uso. 

Usuarios: los grupos de personas que utilizarán un sistema, con sus necesidades específicas. No todos los grupos de usuarios tienen las mismas necesidades, comportamiento y expectativas. Estos factores determinan las características de un canal o punto de contacto digital. Por ejemplo, un sitio web para realizar inversiones puede llegar a ser muy diferente si sus usuarios son personas sin conocimientos financieros de uno orientado a usuarios expertos en inversiones.

Objetivos: los objetivos o tareas que los usuarios necesitan completar, modelan una interfaz digital. Si tomamos como ejemplo una herramienta digital para usar el transporte público, los objetivos pueden ser muy diferentes y esto determinará la forma que tome. Una herramienta para planificar el uso del transporte público en cualquier país de Latinoamérica, tendrá como objetivo principal informar en cuánto tiempo llega el siguiente bus, porque en general tenemos sistemas de transporte poco regulares. En Europa, en tanto, el transporte es muy confiable y esa no es una preocupación central, por lo que su objetivo principal será entregar información para llegar de un punto A a un punto B. El propósito general es el mismo, facilitar el uso del transporte público, pero los objetivos serán diferentes dependiendo de lo que los usuarios necesiten resolver.

Contexto de uso: el contexto en el cual se utilizará un producto o servicio es determinante de cómo éste debe ser diseñado. El contexto incluye desde el tipo de dispositivo, características como las pantallas y también condiciones ambientales como el espacio físico, su iluminación, etc. Por ejemplo, un sitio web se verá diferente en un computador de escritorio que en su versión móvil. En el primero el espacio disponible en la pantalla, el tipo de interacción —con mouse y teclado— permitirán información más detallada e interacciones más precisas. La versión para móviles, en cambio, deberá tener información más breve, optimizar el uso del espacio y considerar la interacción mediante toques de la pantalla. Otro ejemplo sobre contextos ambientales es el caso de las aplicaciones móviles de mapas, que cuando el dispositivo detecta baja iluminación, cambian a un modo oscuro con mayor contraste, para facilitar la lectura de la información.

Métricas

De acuerdo a la definición de ISO, las métricas esenciales para medir la usabilidad son: efectividad, eficiencia y satisfacción. 

Efectividad: se refiere a la capacidad de completar una tarea o cumplir un objetivo. Si una tarea dentro de un sitio es simular un seguro, la efectividad estará representada por que el usuario pueda realizar la simulación, independientemente de cuánto tiempo tarde en ello.

Eficiencia: se refiere a los recursos utilizados para completar una tarea. Esta métrica vincula la efectividad (completar una tarea) con los recursos involucrados en realizarla. Por ejemplo, pagar un producto desde el sitio web, será más eficiente en la medida que logre pagarlo en el menor tiempo. Si completo la tarea, pero tardo mucho tiempo, la eficiencia será baja.

Satisfacción: es la percepción subjetiva del usuario respecto de una tarea en particular, o del producto o servicio en general. Se trata de un indicador de la percepción del usuario, por lo que representa su subjetividad. Se mide en base a cuestionarios estandarizados como System Usability Scale (SUS) y establece cuán satisfecho está con una tarea o con el canal o punto de contacto. 

Estas métricas se obtienen típicamente mediante evaluaciones de usabilidad, que se diseñan para recoger estos tres indicadores y otros como tiempo en tarea, errores, desviaciones, facilidad de aprendizaje, entre otras.

Principios generales

Existen algunos principios generales que sirven para evaluar la usabilidad de un producto o servicio digital, pero también pueden utilizarse como principios prescriptivos, es decir, que en la medida que se aplican y cumplen, se puede asumir que se obtendrá un buen nivel de usabilidad.

El conjunto más conocido de principios es el de los 10 heurísticos de Jacob Nielsen y Rolf Molich, que identifica una serie de criterios que debe cumplir una interfaz digital.

Visibilidad del estado del sistema: el sistema debe mantener al usuario informado acerca de lo que está ocurriendo en todo momento, mediante feedback apropiado y oportuno.

Coincidencia entre el sistema y el mundo real: el sistema debe hablar el lenguaje del usuario, mediante palabras, frases y conceptos familiares, en lugar de términos técnicos u orientados al sistema.

Control del usuario y libertad: los usuarios frecuentemente eligen funciones del sistema por error y necesitarán una opción de "salida de emergencia" claramente marcada, para salir del estado no deseado sin tener que recorrer un diálogo extendido. Apoye el uso de "deshacer" y "rehacer".

Consistencia y estándares: los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Siga convenciones de la plataforma. 

Prevención de errores: un diseño cuidadoso que previene que ocurra un problema es mejor que un buen mensaje de error. Elimine condiciones propensas a errores o verifíquelos y presente a los usuarios opciones de confirmación antes de completar la acción.

Reconocimiento antes que recuerdo: minimice la carga de memoria del usuario haciendo visibles los objetos, acciones y opciones. El usuario no debería tener que recordar información desde una parte del diálogo hacia otra. Las instrucciones para el uso del sistema deberían ser visibles o fácilmente recuperables cuando se necesite.

Flexibilidad y eficiencia de uso: los aceleradores (invisibles para los usuarios inexpertos) pueden ayudar a reducir el tiempo de interacción para los más expertos, permitiendo al sistema ajustarse a ambos tipos de usuarios. Permita a los usuarios personalizar las acciones más frecuentes.

Estética y diseño minimalista: los diálogos no deberían contener información irrelevante o que se necesite en pocas ocasiones. Cada unidad extra de información en un diálogo compite con las unidades relevantes de información y disminuye su visibilidad relativa.

Ayude a los usuarios a reconocer, diagnosticar y recuperarse de los errores: los mensajes de error deberían expresarse en lenguaje normal, sin códigos, indicando con precisión el problema y sugerir constructivamente una solución.

Ayuda y documentación: aunque es mejor que el sistema pueda ser usado sin documentación, puede ser necesario proveer ayuda y documentación. Toda esa información debería ser fácil de buscar, enfocada en la tarea del usuario, debería listar pasos concretos que deben realizarse y no ser demasiado extenso.

Estos 10 principios pueden ser usados como una referencia general durante el diseño, o como una pauta de evaluación en el método conocido como Evaluación Heurística.

Métodos de evaluación de usabilidad

Existe una serie de métodos de evaluación de usabilidad, que se pueden agrupar en dos criterios principales: métodos de expertos y métodos con usuarios.

Evaluación de usabilidad mediante expertos:

Se trata de métodos en los que expertos en usabilidad evalúan una interfaz. Los métodos de evaluación de expertos pueden ser efectivos, pero no reemplazan la observación de usuarios reales utilizando un sistema. 
Se recomienda usar los métodos de expertos como complemento a las evaluaciones con usuarios, nunca como reemplazo de ellas. 

A continuación explicaremos algunos de los métodos de expertos.

Evaluación heurística: es un método en el que un grupo de expertos (al menos 3) evalúa un sitio web, app, etc. basado en un conjunto de principios generales que actúan como predictivos de una buena usabilidad, es decir, aplicar esos principios permite obtener un buen nivel de usabilidad. Normalmente se utilizan los 10 principios de Nielsen y Molich, aunque también es posible utilizar otros. Ver Guía de Evaluación Heurística de Sitios Web.

Inspección de usabilidad: un grupo de evaluadores expertos en usabilidad realiza un recorrido a través de la interfaz digital, basados en un conjunto de flujos y tareas previamente definidos, para identificar problemas mientras se realizan los escenarios de uso. Ver Inspecciones Formales de Usabilidad.

Paseo cognitivo: este tipo de evaluación se realiza con un grupo de evaluadores que acuerdan un conjunto de escenarios de uso, para que uno de ellos realice el recorrido de la interfaz asumiendo el papel del usuario. El evaluador interpreta el papel del usuario y asume sus necesidades y comportamientos para identificar los problemas que éste podría encontrar. Ver Paseo cognitivo.

Evaluación de usabilidad con usuarios:

Estos métodos se basan en la observación de usuarios reales realizando tareas e interactuando con un producto digital o con un prototipo que simula las interacciones reales.

Según su propósito, existen dos tipos de evaluaciones: 

Tests formativos: son evaluaciones enfocadas en identificar problemas de usabilidad, antes que a medir la usabilidad de la interfaz. El propósito es identificar los problemas más importantes para corregirlos durante el proceso de diseño del producto o servicio digital.

Tests sumativos: son evaluaciones comparativas entre diferentes estados de un mismo producto o servicio o entre productos similares. Permiten medir indicadores como efectividad, eficiencia y satisfacción.
Independientemente de si se trata de evaluaciones formativas o sumativas, el procedimiento es similar:

- Se define el propósito del estudio, qué quiero conocer.
- Se identifican los tipos de usuarios con los que se evaluará el producto.
- Se define un conjunto de tareas y escenarios que se presentará a los usuarios para que los realicen.
- Se reclutan los usuarios. Con 5 participantes se pueden identificar suficientes problemas en una interfaz, no es necesario evaluarla con muchos más.
- Se pide a los usuarios realizar cada una de las tareas.
- Se observa a los usuarios mientras realizan las tareas y se identifican los problemas o dificultades que ellos encuentran.
- Se analizan los resultados, se clasifican y priorizan para corregirlos.

Las ventajas de realizar pruebas con usuarios son múltiples: observar a usuarios reales utilizando un producto —incluso un prototipo— entrega información valiosa sobre cómo operan, qué cosas entienden, cuáles son sus expectativas, entre otras. Más aún, realizar evaluaciones de usabilidad temprano en el proceso de diseño, antes de desarrollar el producto, permite corregir y ahorrar recursos costosos que involucra el desarrollo. 

Accesibilidad

Estándares

Los estándares de accesibilidad ayudan a direccionar los esfuerzos para hacer un canal digital accesible. Esto nos permitirá definir distintos caminos y herramientas específicos para el tipo de necesidad: visual, motriz, auditiva o cognitiva.

WCAG 2.1 Guidelines

La guía de accesibilidad del estándar WCAG 2.1 está dividada en 4 principios:

Perceptible: acceso a través de los sentidos.
Operable: acceso a través de interacción con controles o dispositivos.
Comprensible: acceso a través de minimizar confusión y maximizar legibilidad, previsible, intuitivo.
Robusto: compatibilidad con tecnologías y dispositivos.

Para cada uno de ellos existen niveles de conformidad al someter a pruebas, pudiendo ser: A (el más bajo), AA y AAA (el más alto).
Las pautas y criterios de éxito se detallan en la documentación del estándar (https://www.w3.org/TR/WCAG21/).

Recomendaciones

Según el tipo de necesidad podemos listar algunas buenas prácticas, recomendaciones y herramientas de apoyo o validación:

Visual:

Ejemplos de necesidad visual: baja visión, ceguera total, daltonismo o envejecimiento.
- Procurar que tanto el contenido como su estructura técnica en HTML faciliten el uso de lectores de pantalla en el computador y teléfonos móviles.
- El sitio debe adaptarse naturalmente a las pantallas y capacidades de los móviles.
- Ofrecer texto alternativo descriptor en elementos multimedia.
- Utilizar un adecuado tamaño de texto y la posibilidad de aumentar o reducir a voluntad utilizando controles nativos del navegador o sistema operativo.
- Evitar exclusivamente colores para representar un significado.
- Utilizar un adecuado contraste de color entre los elementos de una interfaz.

Motriz:

Ejemplos de necesidad motriz: temblores, lentitud muscular, distrofia muscular, parálisis cerebral, amputaciones.
- El contenido debe ser accesible a través de dispositivos o periféricos tales como teclado o mouse, o sus equivalentes según capacidades de movilidad del usuario.
- Evitar interfaces que sólo se pueden utilizar con mouse.
- Evitar controles muy pequeños.
- Evitar interfaces que requieren mucha precisión.
- Evitar interfaces que requieren poco tiempo de respuesta.
- Verificar el orden de tabulado (tab index) al utilizar controles por teclado.

Auditiva:

Ejemplos de necesidad auditiva: sordera, deficiencias auditivas, envejecimiento.
- Utilizar lengua de señas para el contenido en videos o como apoyo para contenidos textuales.
- Ofrecer subtítulos y transcripciones de audio.
- Utilizar subtítulos descriptivos de contexto (de ambiente o no verbales).
    
Cognitiva:

Ejemplos de necesidad cognitiva: dificultades de aprendizaje, dislexia, memoria, atención.
- El contenido debe ser breve, claramente estructurado y con una jerarquía de información bien definida.
- Proveer una estructura visual del contenido clara y fácilmente reconocible, mediante bloques y títulos distinguibles.
- Evitar textos largos y complejos.
- Apoyar con imágenes que complementen la información textual.
- Ofrecer un mapa del sitio web.
- Evitar enlaces rotos u ofrecer páginas de error con caminos de salida.
- Ofrecer descripciones y ayudas en componentes que lo requieran (como dividir un flujo en distintos pasos y describir cada uno).
- Evitar inconsistencias entre páginas de un mismo sitio web.

Otras barreras:

Además de las barreras físicas que dificulten el acceso a la información, existen barreras tecnológicas a tener en cuenta:
- Conocer las opciones de accesibilidad que ofrecen los Sistemas Operativos y facilitar su utilización.
- Es un error asumir que todos usan el mismo navegador o navegadores similares. Según el tipo de dificultad existe una variedad de navegadores alternativos que privilegian entre distintas opciones que facilitan su uso para necesidades especiales. Es importante conocerlos y facilitar su uso.
- El ancho de banda (velocidad de conexión a internet) también puede ser una barrera frente a la accesibilidad. Se recomienda impulsar esfuerzos por lograr buenos indicadores de rendimiento.
- Privilegiar la reproducción de contenidos a través de controles nativos que sean parte del estándar W3C.

Herramientas

Existen herramientas para distintos propósitos de validación en accesibilidad, a continuación un listado de algunas de ellas:

W3C Markup Validation (https://validator.w3.org): Valida la correcta escritura del código HTML.
W3C CSS Validation (https://jigsaw.w3.org/css-validator/): Valida la correcta escritura del código CSS.
W3C Link Checker (https://validator.w3.org/checklink): Valida la integridad de enlaces.
Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/): Ofrece evaluación y opciones de optimización de velocidad de carga de una página.
WAVE Web Accessibility Tool (http://wave.webaim.org): Evaluación de distintos criterios de accesibilidad.
Check My Colours (http://www.checkmycolours.com): Validador de proporción de contraste de colores.
Universidad de Alicante (http://accesibilidadweb.dlsi.ua.es/?menu=herramientas) Ofrece distintos simuladores para diferentes necesidades.

SEO

La disciplina de SEO (Search Engine Optimization) corresponde a una serie de prácticas que tienen como objetivo el optimizar los sitios web para mejorar su desempeño ante determinadas consultas en los motores de búsqueda, como Google Search.

Estas prácticas se pueden clasificar de múltiples formas, siendo frecuente la división entre SEO on-site y SEO off-site.

On-site

Corresponden a intervenciones que podemos hacer directamente sobre nuestros sitios web. 

El SEO on-site se basa principalmente en crear contenido de interés, relevante para los usuarios, bien organizado, jerarquizado y accesible.

Sobre los elementos que debemos prestar atención, en primer lugar están URLs, descripciones, títulos (H1, H2, H3, H4…) y contenido (párrafos) de cada página. Deben ser claros, cumplir las extensiones recomendadas y utilizar las palabras claves que los usuarios utilizan al buscar en internet, procurando no abusar de las mismas.

La carga de contenido multimedia es relevante también. En particular utilizar buenas imágenes, las que a su vez deben cumplir con ser optimizadas para web (en tamaño/peso), incluir el atributo ALT para facilitar su entendimiento por usuarios no videntes, como también bien considerando nombres de archivos que sean de fácil reconocimiento.

Off-site

El SEO off-site corresponde a aquello que afecta el SEO, pero que se explica a partir de aquello que pasa por fuera de nuestro sitio web. Cuántos sitios nos vinculan, la calidad de éstos, la cantidad de ingresos referidos y, finalmente, nuestra reputación en internet explicada por otros sitios, termina afectando nuestro desempeño.

Si bien las mejoras de SEO off-site pasan por gestiones que exceden el ámbito de nuestros sitios (como la gestión de prensa, influencers, colaboraciones, sitios satélites, entre otros), sí existe una práctica recomendada para favorecer la valoración que reciben nuestros sitios web desde el punto de vista off-site: redirecciones 301.

Si estamos a cargo de un sitio web que en algún momento sufre modificaciones (sean parciales o un cambio completo de sitio) y a consecuencia de ello ciertas URLs dejan de funcionar, muchos links que se encuentren repartidos en otros sitios web comenzarán a arrojar error cada vez que un usuario intente seguirlo.

El método Redirect 301 informa a los navegadores y, en consecuencia, a los usuarios que nuestro sitio web fue movido permanentemente. Por lo tanto, cada vez que sepamos que una URL dejará de funcionar la recomendación es incluir una redirección 301, donde identifiquemos tanto la URL anterior, como la nueva (donde esté el mismo contenido o el que más se acerque) y así los usuarios puedan continuar con su navegación sin problemas, reduciendo el impacto sobre nuestro SEO.

Otras consideraciones:

Durante los últimos años se han vuelto consideraciones muy relevantes para el SEO el contar con certificados de seguridad (SSL) aplicados sobre todo sitio web, un buen desempeño del sitio web en términos de tiempos de carga, una correcta adaptación para dispositivos móviles y un cumplimiento exhaustivo de recomendaciones de accesibilidad.

Herramientas

Google PageSpeed Insights: permite medir el desempeño de nuestros sitios en móviles y desktop. Muestra los resultados en una escala que va de 0 a 100 y además del puntaje presenta un resumen de oportunidades de mejora a nivel técnico: código, contenidos, servidor o redes.

Woorank: permite auditar los aspectos SEO más relevantes de nuestros sitios web, presenta un puntaje en una escala que va de 0 a 100. Presenta un informe donde evalúa mediante semáforos cada uno de los criterios, incluye textos de ayuda para mejorar cada aspecto pendiente y permite hacer una comparativa con otros competidores.

Google Search Console: permite entender cómo llegan los usuarios a cada uno de nuestros sitios cuando ingresan mediante Google Search. El correcto y oportuno uso de esta información puede ayudar a desarrollar estrategias de contenidos y SEO para nuestros activos digitales.

Google Trends: permite comparar el desempeño de determinadas búsquedas. Esto nos permite complementar nuestras estrategias con una mirada desde la tendencias en búsquedas, no solo aquellas consultas vinculadas a nuestros propios sitios web.

Optimización y rendimiento

Front-end y contenido

La optimización de carga de sitios web en el navegador depende de una serie de factores, y desde el front-end podemos recomendar algunas prácticas. Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/) es el indicador principal de oportunidad de mejorar, es posible lograr una puntuación de 100 (el máximo), sin embargo una evaluación sobre 90 es un buen resultado. Algunas de las recomendaciones que encontraremos al evaluar un sitio web son:

- Minificar y concatenar recursos (CSS, JS).
- Escribir correcta y semánticamente la estructura HTML evitando un tamaño excesivo de DOM.
- Evitar estilos o scripts que bloqueen el renderizado en una primera instancia
- Utilizar políticas de caché de los recursos.
- Eliminar estilos sin utilizar
- Optimizar imágenes en tamaño (dimensiones y peso).
- Utilizar correctamente los formatos de imágenes según la mejor relación peso/calidad (PNG, SVG, JPG, WebP).
- Utilizar distribución de imágenes según dispositivo.
- Utilizar carga diferida de imágenes que no son visibles en pantalla en una primera carga.
- Reducir la cantidad de peticiones de recursos (HTTP Request).

Layouts

Grilla

La grilla o retícula con que se diagraman los bloques de contenido en una página están basadas en el estándar de 12 columnas y se compone de contenedores, filas y columnas. Los contenedores contienen filas, y las filas contienen columnas. Una grilla puede ser anidada dentro de una columna, resultando una nueva grilla inferior disponible dentro de un ancho de columna determinado. 

El comportamiento de estas columnas en distintos dispositivos dependerá de las necesidades del diseño y a cómo se deban ajustar según los breakpoints definidos por la herramienta de desarrollo.

La grilla responsive que utilizamos en proyectos digitales SURA es Bootstrap 4: https://getbootstrap.com/docs/4.3/layout/overview/

Breakpoints

Los breakpoints ejecutan un cambio en el comportamiento o distribución de columnas, puede personalizarse en distintos momentos cuando la ventana del navegador tenga un ancho de:

Inferior a 576px (extra small o xs). Adecuado para dispositivos móviles en modo vertical.
Igual o mayor que 576px (small o sm). Adecuado para dispositivos móviles de mayor tamaño o tablets de menor tamaño.
Igual o mayor que 768px (medium o md). Adecuado para tablets.
Igual o mayor que 992px (large o lg). Adecuado para tablets en modo horizontal o monitores desktop de menor tamaño.
Igual o mayor que 1200px (extra large o xl). Adecuado para monitores desktop estándar.
Más información acerca de los breakpoints y sus identificadores de clases para modificar comportamientos en columnas: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Contenedores

Los contenedores (container) se encargan de contener filas que a su vez contienen columnas. Es necesario definir si el contenedor tendrá un comportamiento fluido (utilizará el ancho completo disponible de la ventana del navegador) o tendrá un comportamiento de ancho fijo (utilizará el máximo ancho disponible dentro del ancho definido del sitio web que corresponde a 1140px en un ancho de ventana de 1200px. En pantallas menores a 1200px utilizará el máximo disponible según el breakpoint que se ejecute.

Las filas (row) son otro tipo de contenedor y permiten anidar columnas en su interior. Las filas tienen un comportamiento de bloque, es decir que ocupan el ancho disponible del contenedor donde se encuentre y no permite tener otros elementos a sus costados.

Las columnas (col) son el principal contenedor de elementos dentro de una grilla, y la cantidad de columnas dentro de una fila dependerá de las necesidades del diseño. Una fila puede contener hasta 12 columnas en una misma fila, si la cantidad de columnas supera esa cantidad, automáticamente se desplazarán hacia una nueva fila. Las columnas se pueden identificar con un valor numérico de 1 a 12 y eso determinará el ancho que tendrá según la división de ese número en 12, por ejemplo si se requiere dividir una fila en dos columnas, se divide 12 en 2 y el resultado es 6, entonces a cada columna se identifica como col-6, eso significa que esa columna utilizará el ancho equivalente a 6 columnas de 12 y la otra también, resultando que cada columna utiliza el 50% del ancho disponible.

Más información acerca de contenedores, filas y columnas en: https://getbootstrap.com/docs/4.0/layout/grid/

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.