¿En qué momento crear un Design System? Según la escala del proyecto

Autor: Jose Pablo Trejos
Tiempo de Lectura: 6 minutos
Contexto

Actualmente existe una gran variedad de artículos que hablan sobre distintos modelos utilizados para crear o adoptar un Design System, independientemente del proyecto en el que estemos trabajando.

 

Entre las ventajas que nos exponen de trabajar con un Design System podemos encontrar que nos brinda consistencia a lo largo del desarrollo del proyecto ya que estandarizamos elementos y esto a la vez nos permite la reutilización de componentes mediante un sistema ordenado. Y es que la finalidad de implementar un Design System radica en que equipos conformados por varios integrantes puedan trabajar con los mismos estándares, a un ritmo aceptable y con los mismos elementos, aquí hay que hacer especial énfasis ya que su correcto uso nos va a ahorrar mucho tiempo de revisiones y correcciones, pero… ¿Siempre es necesario implementarlo? 🤔

 

¿Por qué deberíamos implementar un Design System?

Ok, vamos por partes, primero me gustaría contarles el porqué es buena idea considerarlo dentro de las etapas de un proyecto, y para esto me voy a apoyar en un ejemplo que muchos diseñadores hemos vivido. Creo que a la mayoría nos ha pasado que después de algunas horas de trabajo sobre varias pantallas, nos disponemos a unificar nuestro trabajo con el resto de las pantallas que fueron elaboradas por los demás miembros del equipo y para nuestra sorpresa… la unificación resulta en algo como esto: 🤦🏻‍♀️

 

Design System

 

Para nuestros efectos podemos decir que estas imágenes son equivalentes, ya que lejos de parecer un chiste nos encontramos un archivo con múltiples estilos y no solo de botones, sino que descubrimos que se utilizó la misma tipografía, pero en diferente tamaño o que el color es muy similar pero no es idéntico… en fin, un caos dentro del archivo y muchos componentes sin estandarizar.

 

De entrada, podríamos decir que no son errores graves y que la esencia se mantiene, pero aquí es donde identificamos el segundo aspecto del porqué implementar un Design System y es que los diseñadores, en muchas ocasiones, no consideramos a los
desarrolladores y la “bomba” con la que tienen que lidiar, además del viacrucis que les planteamos con archivos o insumos tan desordenados.

 

¿Cuál color de botón debería de elegir? o ¿cuál es el tamaño adecuado de la tipografía? Estas preguntas son solo ejemplos de lo que podría pasar en el mejor de los casos donde los desarrolladores se percatan de estas diferencias, pero ¿qué pasa si no se enteran y solo toman de referencia el primer elemento que encuentran? 😱 Podríamos estar acarreando un problema que cada vez se vuelve más complicado y tedioso de corregir y nuestra deuda técnica como diseñadores aumenta. Esto repercute en la eficiencia y productividad del equipo, lo que nos lleva a un tercer punto, entre menos se tenga que corregir más tiempo podremos dedicar a mejorar otros aspectos relevantes o proyectos.

 

Tenemos claro que no solo es una cuestión de ejecución sino también de metodologías de trabajo implementadas en el equipo, pero ese es tema para otro artículo 🤓.

 

Ahora que tenemos más claro los beneficios y lo que nos puede aportar un Design System a nuestros proyectos, podemos mirar en retrospectiva y analizar si estas características se ajustan a todos ellos, pero ¿han pensado el esfuerzo que se requiere para generar estos sistemas de componentes? Y más importante aún ¿en qué momento crearlos 🤔?

 

¿Cómo y cuándo creamos nuestro Design System?

Esta pregunta no es fácil de contestar, habrá una gran cantidad de colegas que respondan a ella a partir de la teoría que se puede estudiar, pero es que la práctica en la mayoría de las ocasiones no es cien por ciento fiel a lo escrito y desde esta perspectiva es que voy a compartirles nuestra experiencia. Cada proyecto se debe abordar como un caso particular y específico, debido a sus características únicas o el área de interés que abarca. Si vemos el desarrollo del proyecto como algo lineal y sin variación sería muy difícil ubicar en algún punto la implementación del Design System, existen factores que pueden influir en su creación como por ejemplo el alcance del proyecto; en ocasiones este se limita al rediseño o ampliación de una funcionalidad específica, también puede ser que el cliente no desee este material para su proyecto, así que en estos casos no es posible la creación del sistema y no por ello quiere decir que sea un proyecto deficiente o malo. Al contrario, podríamos encontrarnos con un proyecto que por su complejidad y la cantidad de equipos involucrados demande de un sistema que ayude a mantener el orden y control.

 

MVP vs Producto posicionado

Veamos un par de ejemplos para aclarar este punto, primero imaginemos que la empresa en la que trabajamos desarrolla productos digitales propios (como Spotify, Airbnb o Netflix) y está por realizar una mejora en alguna de sus plataformas previamente desarrolladas, si no contara con un Design System podríamos enfrentarnos a todas las calamidades que mencionábamos anteriormente, que se trabajen con componentes parecidos pero no iguales a los que están en la plataforma, que el trabajo entre diseñadores y desarrolladores no sea fluido o que inclusive los patrones de diseño cambien.

 

Esto afectaría directamente a la consistencia y la percepción de marca con la que contaban sus usuarios. Lo adecuado en este caso es que si a esta altura no se cuenta con la librería de los componentes entonces se proceda a generar el Design System previo a
realizar la nueva mejora, en este punto la ventaja es que al contar con una plataforma previa la componetización se simplifica ya que los elementos se encuentran estandarizados y la tarea principal se centraría en la recopilación de estos y la generación de la librería como insumo.

 

Para muchas empresas este trabajo fue un aprendizaje empírico a través del tiempo por lo que probablemente su implementación se dio en alguna versión avanzada de la plataforma por lo que es notoria la mejora incremental.

 

Pero ahora veamos el segundo escenario, ¿sucede lo mismo cuando se trabaja un MVP o un proyecto totalmente nuevo? Podemos decir que “Aquí es donde la mula botó a Genaro” en muchos artículos hemos encontrado que el momento idóneo para la creación
del Design System es antes de iniciar el proyecto, incluso en el ejemplo anterior lo pudimos ver, pero ¿cómo se genera una librería de algo que aún no existe o que su diseño no está definido? No tiene sentido invertir tiempo y recursos en una librería que va a estar en constante cambio durante el inicio del proyecto incluso podría generar confusión, además contamos con la necesidad de generar productos con prontitud para someterlos a pruebas y aquí es donde se debe tomar una decisión basada en el contexto y las características del proyecto.

 

Para un escenario como este podemos encontrar soluciones alternativas que no necesariamente son un Design System como tal, pero funcionan de igual manera, proporcionan orden y permiten que un equipo se logre coordinar de mejor manera.

 

La primera alternativa sería contar con una librería de los elementos de navegación más comunes, pero que dichos elementos se encuentren en un estado base, que posteriormente se le pueda dar un estilo que se defina durante el proyecto, la llamamos la librería machote y la principal ventaja es que desde una etapa muy temprana permite que todo el equipo trabaje con los mismos estándares, hay que entender que esta librería no cuenta con componentes complejos, es decir podemos encontrar lo verdaderamente básico como botones primarios, inputs y dropdowns. Esta opción permite que en etapas posteriores cuando se otorgue un estilo o se agreguen componentes específicos del proyecto se trabaje sobre la librería y así lograr una actualización automática del archivo principal. La alternativa funciona especialmente cuando se trata de un equipo de varios diseñadores.

 

Design System 2

 

También existe la posibilidad de trabajar directamente en el archivo principal del proyecto y crear los elementos básicos desde ahí, aquí la recomendación o la buena práctica sería crearlos y guardarlos como símbolos, por ejemplo una herramienta como Sketch nos permite hacerlo, esto nos asegura que al trabajar con el archivo encontremos ahí mismo la estandarización y el orden necesario para trabajar con mayor fluidez, esta opción es recomendable cuando es una persona la que se encuentra desarrollando el proyecto y no un equipo, ya que al trabajar de forma local la posibilidad de compartir la librería y poder actualizarla se dificulta.

 

Las ventajas de contar con un Design System son muchas y son notorias, pero la realidad es que más allá de requerir de equipos que entiendan y logren aprovechar al máximo estas herramientas, se necesita entender que de entrada un Design System para cada proyecto desarrollado puede significar una carga de trabajo y un enfoque de esfuerzo que en un inicio no son primordiales. Con productos posicionados toda esta filosofía de trabajo cobra mucho sentido, pero cuando se trabajan proyectos tan variados, de diferentes escalas, con diferentes alcances y con diferentes presupuestos la realidad es que pueden ser más flexibles otras opciones que eventualmente en un futuro permitirá la creación de un Design System propio.

¿Cómo influye el microcopy en la experiencia de usuario?

Autor: Laura Barrantes
Tiempo de Lectura: 7 minutos

 

Algunas veces podemos sentirnos perdidos usando un sitio web, o quizá hemos instalado una aplicación y no sabemos realmente cómo lograr nuestro objetivo en ella, aunque no lo creas, una de las principales causas de esto, es la falta de un buen microcopy capaz de orientarnos durante la navegación.

 

Muchas veces prestamos especial atención a cómo luce una interfaz y dejamos de lado la importancia que tienen las palabras al ser estas las que transmiten el mensaje deseado. Es aquí donde entra en juego el microcopy para garantizar una experiencia agradable facilitando la comunicación efectiva.

 

Primero recordemos que el microcopy son todos aquellos textos breves que acompañan al usuario a ejecutar acciones y dar el feedback necesario:

 

 

Además abarca aquellas pequeñas frases que sirven de guía en los procesos que usualmente se deben llevar a cabo:

 

Veamos algunos aspectos en los que influye el microcopy en la experiencia que se puede percibir al hacer uso de cualquier interfaz, y ¿…por qué cualquier interfaz…? bueno, porque cada una con la que tenemos contacto representa un mediador que facilita la comunicación.

 

     1. Facilidad en la toma de decisiones

Para facilitar la toma de decisiones es necesario identificar los momentos en la navegación que requieren de decisiones determinantes y dedicarles especial atención, así podremos construir las frases de acompañamiento necesarias para transmitir un sentimiento de seguridad e impulsar la ejecución de las acciones que deseamos.

 

Estas frases de acompañamiento por lo general podemos encontrarlas en tooltips, títulos potenciadores, mensajes de aclaración, o incluso botones. Una buena práctica es el uso de frases que indiquen el valor que se obtendrá al ejecutar una acción, veamos un ejemplo de esto.

 

Microcopy botones

 

“Completar registro” puede sonar como un proceso complicado y extenso, sin embargo “Empezar ahora” motiva e indica el beneficio que se alcanzará; iniciar rápidamente.

 

     2. Permanencia

Al entablar una buena conversación creamos una conexión agradable con quien nos relacionamos, lo mismo pasa al interactuar con una interfaz capaz de “entendernos”, establecemos en el momento un vínculo que permite una interacción placentera.

 

Para conseguir la creación de este vínculo necesitamos entender a los usuarios y emplear un tiempo prudente para estudiarlos e identificar sus principales comportamientos, esto brindará el insumo necesario para crear el contenido que logre “engancharlos” a la interfaz según sean sus exigencias.

 

Por ejemplo, si identificamos que los usuarios poseen un sentimiento de inseguridad respecto a los procesos de pago en línea, posiblemente el toparse con el ingreso de sus datos sea razón suficiente para que abandonen inmediatamente la interfaz, he aquí entonces la oportunidad de implementar un microcopy que disminuya el temor para que logren permanecer y así completar el proceso de forma exitosa… Veamos…

 

Pago Microcopy

 

A la izquierda intentamos simplificar lo máximo posible el diseño, sin embargo, disminuir las palabras usadas podría causar inseguridad y duda sobre la credibilidad del sistema.

 

A la derecha, implementamos el microcopy de diferentes maneras:

  1. Se empleó un mensaje garantizando la seguridad en el manejo de los datos.
  2. Con el uso de placeholders creamos una guía visual sobre lo que debe ser ingresado en cada uno de los espacios.
  3. Modificamos la acción del botón para que indique el beneficio obtenido e implementamos un título más específico.
  4. Agregamos un tooltip instructivo sobre el CVV.

 

Con estos pequeños ajustes, sin duda, el usuario tendrá una experiencia más fiable con este proceso.

 

     3. Manejo de errores

Sabemos que las interfaces deben ser lo suficientemente intuitivas para que el usuario pueda navegar sin interrupciones, sin embargo, todo sistema se encuentra propenso a fallar, es inevitable que ocurra algún tipo de error que represente un punto de dolor significativo, por lo tanto debemos intentar disminuir la frustración que pueda provocar para que no afecte de forma negativa la experiencia del usuario. ¿Cómo lograrlo? por medio de un microcopy que le permita abordar el error de la mejor manera.

 

Para que un mensaje de error sea apropiado debemos contemplar tres aspectos fundamentales:

  1. El uso de un lenguaje sencillo acorde al contexto de los usuarios, y evitar el uso de términos técnicos que puedan provocar confusión.
  2. Indicar lo que está ocurriendo para que se pueda tomar el control sobre la situación.
  3. Indicar cómo puede ser solucionado para que el usuario pueda continuar su recorrido por la interfaz y disminuir la probabilidad de abandono.

Veamos un par de ejemplos…

 

Error Microcopy

 

El uso del mensaje “Dato inválido”, podría confundir sobre el origen del problema y abandonar en el intento, por el contrario el mensaje “Le faltan algunos dígitos a tu número de tarjeta, intenta de nuevo” indica cómo abordar la situación, revisar nuevamente la tarjeta y verificar cuáles son los dígitos faltantes.

 

Resultados Microcopy

 

Otro error común es realizar una búsqueda y obtener el resultado “No hay coincidencias”, pero ¿realmente no las hay?, muchas veces el sistema no puede saber con exactitud qué es lo que se está buscando, pero puede tener aproximaciones, el uso de sugerencias nos dará la opción corregir el error que se cometió, o bien si es el caso, seleccionar alguna de las sugerencias dadas por el sistema.

 

     4. Conectar con el producto o la marca

El hecho de que tengamos una experiencia agradable en nuestro primer contacto con una interfaz, hace que las posibilidades de que volvamos a usarla aumenten en un 82%. Con el uso de las palabras adecuadas, el microcopy puede fortalecer positivamente el vínculo que pueda ser generado con esta primera y fundamental impresión.

 

Un buen ejercicio es construir preguntas o frases con las que nuestra audiencia puede identificarse, preguntas tan personalizadas que no puedan limitarse a responder. Estas preguntas las podemos implementar en momentos influyentes, un ejemplo claro son los procesos de inicio de sesión y registro, si bien puede ser un proceso incómodo para muchos, podemos trabajarlos de manera que se torne una amigable bienvenida al producto.

 

Veamos un ejemplo…

 

Login Microcopy

 

A la derecha tenemos la común pantalla de inicio de sesión que solamente solicita el ingreso de los datos (y lo sabemos porque identificamos los inputs).

 

A la izquierda, cambiamos el frío título por un saludo, con esto conseguimos que la interfaz se perciba más amigable sumado a la pequeña instrucción que hace que sea más comunicativa, implementamos también una pregunta que capta la atención de aquellos que aún no disponen de una cuenta “¿Aún no tienes una cuenta?” pues no pasa nada, simplemente selecciona “Crear mi perfil”. 

 

Entonces, ahora que vemos el gran aporte que nos brinda el microcopy a pesar de su sutileza, veamos cada palabra que escribimos como una oportunidad única para comunicarnos con quien está frente a la pantalla, creemos interacciones naturales. A través de las palabras podemos ser transparentes con el usuario y mantenerlo al tanto de lo que pasa en la interfaz. No sacrifiquemos las palabras, comuniquemos lo necesario para que conseguir plasmar una experiencia agradable.

 

DESIGN

5 Alternatives To Material Design

22 Jan 2019 · By Natalia Alfaro

DESIGN

5 Alternatives To Material Design

22 Jan 2019 · By Natalia Alfaro

VIEW ALL RELATED POSTS

This website uses cookies

We use cookies to personalise content and ands, to improve the usability, provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics parteners who may combine it with other information that you’ve provided to them or that they’ve colleted from your use of their services. You consent to our cookies if you continue to use our website.

OK SETTINGS

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages. You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.