Trabajar con Salesforce puede ser un desafío para los diseñadores que no están acostumbrados a trabajar con sistemas predefinidos. El ecosistema es grande y los productos de la plataforma son diferentes. Discutiremos cómo navegar el diseño con Salesforce.
Fuerza de ventas es ahora una de las plataformas CRM más grandes disponibles. Según un estudio de Gartner, el gasto en implementaciones relacionadas con Salesforce superó al del siguiente competidor (SAP) en más de 2,5 a 1. Los beneficios de Salesforce son excepcionales. Tiene una plataforma muy flexible y personalizable combinada con un sistema y componentes de diseño bastante buenos y listos para usar. Además, el ecosistema es tan rico que puedes administrar todo tu negocio en él (lo que hacen varias empresas). Se utiliza tanto para empresas Fortune 500 como para pequeñas empresas.
Debido al crecimiento de la plataforma, existen más oportunidades para que los diseñadores se involucren en el diseño para Salesforce. Como expliqué en mi último artículo, Enterprise UX ahora existe y Salesforce es una parte importante de ese ecosistema. En este artículo, desglosaremos el ecosistema, los beneficios y desafíos de trabajar con Lightning y algunos consejos y trucos para su próximo proyecto trabajando con Salesforce.
Primero tenemos que empezar con las diferentes partes del ecosistema de Salesforce. Si bien la parte “CRM” (Lightning) de Salesforce es lo que inició la empresa, el sistema en sí se compone de varias partes y funcionalidades, pero todas se integran entre sí.
Aplicaciones relámpago:
Todas las aplicaciones siguientes funcionan dentro del marco “Lightning”, que utiliza el sistema de diseño Lightning y permite al equipo agregar funcionalidad a la aplicación. El marco Lightning funciona de manera muy similar a Google Material y Google Apps, por lo que todos están unidos por una arquitectura y un sistema de diseño unificados, donde puede cambiar “aplicaciones” y vistas según los productos que haya habilitado. Estas aplicaciones tienen el mismo sistema de diseño y utilizan los módulos Lightning. Si está trabajando en la Consola de servicio, este es el sistema que utilizará.
CRM/Nube de ventas
Este es el corazón del sistema que permite operar a los equipos de ventas. Pipeline, CRM de clientes, leads, etc.Nube de servicios:
Esta aplicación le brinda la posibilidad de crear casos dentro de Salesforce. También agrega una base de conocimientos a la funcionalidad.Nube de marketing:
Esta aplicación de iluminación tiene creadores de viajes, correo electrónico y automatización de marketing.
Aplicaciones móviles:
Las aplicaciones móviles son una versión nativa del sistema Lightning. Estos módulos son diferentes a la versión de escritorio y los patrones también serán diferentes. Los módulos móviles nativos suelen ser diferentes a la versión responsiva de las aplicaciones en la nube basadas en navegador. Esto se basa en la idea de que el móvil tendrá su propio conjunto de tareas. Estos están integrados en el creador de aplicaciones móviles. Sin embargo, a partir del lanzamiento de invierno de 2020, la aplicación móvil se parece mucho más a la Lightning Console.
Comunidades
Si bien la intención inicial de Communities era inicialmente para intranets, portales de socios y autoservicio para clientes, Communities ahora se utiliza para portales y sitios web de todo tipo para brindar una experiencia de visualización de marca, aprovechando los mismos datos centrales para una audiencia adicional.
Obtiene integración nativa con todas las funciones, sin embargo, esta aplicación tiene un conjunto adicional de componentes nativos, no todos los cuales están disponibles en Lightning están disponibles en Comunidades (visite la referencia de componentes y filtre por “Comunidades Lightning”, que es una combinación de Componentes de Aura y Componentes de Rayo). Además, si no está haciendo un diseño personalizado, los diseños aquí son diferentes de los de Lightning, así como muchos de los patrones de diseño. Esto incluye tipos especiales de contenido de publicaciones en blogs y foros que solo existen en Comunidades.
Aquí hay una lista de características del generador de experiencias para personalizar:
Marca y colores
Diseños
Menú de Experience Builder para comunidades con todos los componentes predeterminados. Muchos de estos no son componentes Lightning.
Comercio
Este es tanto el front-end como el final del servicio de la plataforma de comercio electrónico que se integra con Salesforce. Al igual que Comunidades, tiene su propio subconjunto de componentes, aunque el constructor es el mismo que el de las comunidades, por lo que es mucho más parecido a usar Comunidades que a Lightning.
En este artículo solo abordaremos las aplicaciones Lightning que utilizan Salesforce Design Lightning System (SLDS). Si está trabajando en Comunidades o Comercio, hay un conjunto diferente de componentes listos para usar que son específicos de esas plataformas, así como las herramientas de creación.
Navegación global: pestañas modulares y con alcance.
La navegación global de Salesforce tiene 2 patrones principales: pestañas con alcance, que tienen todos los elementos de nivel superior enumerados, y pestañas modulares, que mantienen abierta una pestaña que se puede cerrar para cada registro, muy similar a las ventanas de un navegador web. La mayoría de las aplicaciones utilizan pestañas modulares, y las pestañas de alcance se transfieren a los usuarios tardíos.
Hay algunos diseños principales que se reutilizan en todo el sistema para mayor eficiencia. Hay algunas variaciones de estas, pero estas son las formas principales en que el sistema Lightning quiere que usted cree un diseño. Si bien son independientes del contexto (puede tener un registro de cliente en cualquier contexto), los diseños de detalles y los diseños de lista de nivel medio son consistentes entre sí.
Diseño de la página de inicio
Diseño de lista
Diseño de registro
Diseño del caso (3 columnas)
Diseño maestro detallado
Además de lo anterior, existen plantillas de páginas Lightning adicionales que pueden agregar más personalización a su diseño y seguir funcionando bien dentro del sistema de iluminación.
Al planificar su trabajo, querrá tener una idea de si necesitará utilizar los componentes web Lightning o si realizará una aplicación personalizada. En muchos casos, usar Lightning será la mejor opción, simplemente por el trabajo de mantenimiento y desarrollo que se necesita para crear componentes personalizados. Esto también mantiene la coherencia y puede aprovechar el sistema de diseño que crearon. Si tiene la tarea de utilizar Salesforce como sistema backend para su aplicación y va a utilizar las API para extraer los datos, tendrá más flexibilidad, pero requerirá un nivel de esfuerzo significativamente mayor.
Si va a utilizar Lightning System, deberá tener en cuenta algunas cosas:
Utilice primero la forma Lightning de hacer las cosas
Al igual que cualquier otro sistema de diseño, Lightning tiene su manera de hacer las cosas: diseños, módulos, etc. Una de las cosas que Lightning quiere que usted haga es reutilizar los módulos en una variedad de contextos. Módulos como Jabber o Comunicación, se pueden utilizar a Nivel de Caso, Nivel de Registro o Nivel de Usuario.Las vistas suelen venir con valores predeterminados que se pueden modificar.
Por ejemplo, el valor predeterminado en la vista de lista tiene varios filtros, todos los cuales se pueden personalizar fácilmente dentro de los parámetros predeterminados.Muchos componentes son personalizables, pero eso los hace más propensos a romperse en futuras versiones.
Si bien los módulos tienen parámetros que se pueden ajustar, muchas veces no es posible cambiar un módulo, como tomar el diseño de un componente de la línea de tiempo y colocar sus propios tipos de datos en él. Si desea cambiar los datos de un módulo que no son un parámetro, los desarrolladores tendrán que personalizarlos y pueden ser más propensos a romperse.intercambio de aplicaciones
Si no puede encontrar un componente web Lightning predeterminado, es posible que pueda encontrar algo en AppExchange. De esta manera puede personalizar o modificar un módulo existente.Sea decidido al crear un componente personalizado
Si descubre que necesita un componente personalizado, recuerde que los componentes personalizados deberán codificarse y mantenerse. Salesforce realiza una media de 3 lanzamientos al año. Cada vez que hay una nueva versión, es posible que su componente personalizado se rompa. Además, con Lightning Components, obtiene el beneficio de funciones mejoradas a medida que Salesforce las desarrolla. Además, trabajar con componentes personalizados puede introducir errores adicionales en el sistema que hay que corregir. Si puede hacer una buena experiencia de usuario con un componente Lightning y hacerlo funcionar, la experiencia se beneficiará en general.
Moraleja de la historia: los componentes personalizados están bien, los componentes Lightning son mejores.Consigue un Sandbox y juega
Si crea su propia zona de pruebas para desarrolladores y ve cómo funcionan los módulos y diseños, comprenderá rápidamente cómo funcionan.
Si bien es posible que desee utilizar los módulos y Lightning Design System, es posible que no desee que su aplicación se parezca a “Salesforce”. Salesforce Lightning viene con un conjunto de tokens de diseño, que son variables en las que se basa el sistema, como espaciado, colores de densidad, fuentes, etc. Si modifica estos elementos, puede hacer que Salesforce parezca menos Salesforce.
SLDS predeterminado
Kit SLDS moderadamente personalizado usando tokens
Además, Salesforce tiene una lista completa de íconos. Los íconos se usan EN TODAS PARTES y están vinculados a componentes y contexto. Hay 5 tipos de iconos:
Estándar: Estos son los íconos que se usan en todas partes y que ayudan a etiquetar los módulos.Iconos de acción: que están ligados a una acciónIconos personalizados: que son para agregar diseños personalizados y módulos, pero no son parte de los valores predeterminadosIconos de tipo de documento: que representan diferentes tipos de archivosIconos de utilidad: Que van adheridos a módulos y son los más comunes
Iconos del archivo Sketch SLDS
Colores son otra forma de personalizar los rayos. Lightning tiene un sistema de color muy sólido, con todo tipo de tonos y valores. La mayoría de los sistemas de marcas no incluyen este nivel de detalle. Todos los colores son editables, sin embargo, tenga cuidado al cambiar tonos y valores, ya que a menudo están vinculados al significado de la interfaz y al equilibrio de la interfaz de usuario en general, por lo que cambiar un azul oscuro por un amarillo medio puede tener consecuencias no deseadas durante desarrollo. Los colores también están vinculados a un objeto de datos: Lavender es un contacto, Koromiko es Cases, Activity es Salem, etc.
Colores SLDS: del kit de interfaz de usuario de Sketch
En cuanto a la creación de prototipos, si tiene algo simple o simplemente está haciendo una demostración de algunos diseños, puede usar la plantilla Sketch, Figma o Framer X con el SLDS que puede usar para personalizar. El archivo está configurado de manera muy flexible para usar y modificar los módulos. Tiene componentes Lightning, Mobile, Builder y Wireframing. Es un salvavidas. Puede diseñar en Sketch y crear prototipos en Invision, Principle, etc., o utilizar Figma o Framer para crear prototipos.
Sin embargo, si necesita realizar pruebas de usuario más exhaustivas, puede considerar una de las siguientes opciones:
a) Incorporación de un software de creación de prototipos. que puede manejar variables, objetos de múltiples estados y entradas, como Axure o UX Pin.
b) Considere crear un prototipo en Salesforce o trabajar en un sandbox. Sé que esta opción puede parecer desalentadora al principio, pero si utiliza principalmente la funcionalidad lista para usar, esto le ahorrará mucho tiempo. Puede completar sus componentes personalizados colocando gráficos en módulos para representar módulos personalizados. Puede obtener una experiencia mucho más realista de esta manera y, si va a trabajar en SF por un tiempo, puede ser una inversión que valga la pena. He incluido un enlace a Trailhead para que pueda aprender los conceptos básicos de la creación de su propio diseño de Salesforce. Es mucho más fácil de lo que parece.
Referencia del componente Lightning: https://developer.salesforce.com/docs/component-library/overview/components
Archivo de boceto para SLDS (Sistema de diseño Lightning de Saleforce):
https://github.com/salesforce-ux/design-system-ui-kit
Kit Figma para SLDS: https://www.figma.com/file/5dgFdCHB6FGjfOPAZEDNVK/Lightning-Design-System-Components-for-Web?node-id=0%3A1
Kit FramerX para SLDS:
https://github.com/salesforce-ux/design-system-ui-kit-framerx
Puntos de partida para la personalización de Lightning (aprenda a crear prototipos en SF):
https://trailhead.salesforce.com/content/learn/modules/lex_customization
https://trailhead.salesforce.com/en/content/learn/trails/lex_admin_implementation
Objetos de datos:
Para aquellos de ustedes que están más interesados en la información…