Diseño

Características de un buen sistema de diseño

Continuamos el post anterior sobre los sistemas de diseño hablando sobre qué características definen a un buen sistema de diseño. Y es que existe más de una manera de crear un buen sistema de diseño, y las elecciones dependen de los objetivos y las capacidades que se tengan. No en todos los casos se requiere ya que el esfuerzo y la inversión es grande.

  • ¿Es necesario para tu organización?
  • ¿Qué objetivos debe cubrir tu sistema de diseño?
  • ¿Es importante la adopción generalizada?
  • ¿Cómo de grande es lo que necesitas desarrollar?
  • ¿Trabajan múltiples equipos en ello?

Por ejemplo, si eres una empresa pequeña que necesita una ecommerce puede que no necesites hacer un sistema de diseño propio, sino que te bases en uno ya creado, o que con una imagen con los principales componentes sirva. Pero si eres una empresa que necesita desarrollar por ejemplo, múltiples aplicaciones internas, si que es conveniente un sistema de diseño más complejo que de soporte a todos los equipos de trabajo.

Web Guide Components

Resumen visual y con estilos de componentes mínimos

He estado en empresas que habían invertido mucho dinero en crear sistemas de diseño para cada dispositivo (movil, desktop, tablet…), y existían dos principales problemas:

  1. El ritmo de mejora del sistema era demasiado lento para las necesidades reales de los diseñadores y desarrolladores de aplicaciones. Cuando se lanzaba una mejora o se introducía un componente nuevo, las aplicaciones antiguas no podían usarlo.
  2. El sistema no era fácil de usar, estando por un lado la GUI de componentes que explicaba su estilo visual y de interacción, y por otro las indicaciones de como insertar y usar los elementos. Además estas indicaciones no estaban bien explicadas.

Esto conllvaba a que los equipos de desarrollo al final preferían hacer los componentes de cero que buscarlos en el sistema. Eso conllevaba un gasto de recursos enorme, aparte de que era imposible mantener la consistencia en las aplicaciones.

Para que eso no ocurra, sigue las siguientes recomendaciones:

Ten en cuenta lo que los usuarios necesitan

Problema:

Si el sistema no tiene en cuenta los elementos que se puedan necesitar para desarrollar el producto, lo que se acaba consiguiendo es que los equipos desarrollen sus propios componentes, sin que estos estén integrados y revisados por los encargados de mantener la coherencia y excelencia del sistema.

Solución:

Recuerda que los usuarios en este caso es todo el equipo de desarrollo de producto: diseñadores, developers, QA…. todos se basarán en el sistema de diseño para realizar su trabajo. Inclúyelos en el equipo que lo desarrolle haciendo que los contenidos del sistema contemplen sus necesidades.

Mejora contínua

Problema:

Cómo tratar las actualizaciones del sistema es un tema importante. Si sólo se lanza 1 actualización grande al año, o cada año y medio, se genera una gran brecha entre las necesidades que tienen los equipos de diseño y desarrollo de aplicaciones y los componentes del sistema.

Además si al lanzarse la actualización, las aplicaciones creadas con los componentes anteriores dejan de tener soporte, sin poderse actualizar de forma sencilla, conlleva a 2 cosas:

  • Al soporte de múltiple sistemas de diseño en paralelo (Horror!!)
  • A aplicaciones ancladas en un sistema viejo que no podían mejorarse a no ser que se rehicieran enteras (Más horror!!)

Lo ideal es que cuando se actualizase un componente, este se pudiera cambiar de forma sencilla en cada lugar donde se haya aplicado, para que el elemento sea el mismo en todos los lugares donde esté, existiendo coherencia en su uso y en el diseño. Si cada vez que se lanza una versión de un componente nuevo las aplicaciones creadas anteriormente se desactualizan, y no están al día, se acaban teniendo diferentes interfaces en base a cada actualización.

Solución:

Un sistema de diseño es un elemento vivo. Debe ser la «única fuente de verdad» de la organización. Si el producto evoluciona tambián lo debe hacer el sistema. Debe ser bastante maleable y añadir mejoras de forma sencilla, habiendo determinado un proceso claro de actuación para esas mejoras.

Cuando un nuevo elemento o mejora de uno existente sea añadido al sistema, debe estar disponible para su uso en las formas que sean necesarias, estando el código disponible, el diseño gráfico, las especificaciones…

El sistema es accesible

Problema:

Un buen sistema de diseño debe ser fácil de usar para los desarrolladores para que sólo necesiten encontrar el elemento que necesitan e insertarlo en el código, desarrollando sólo el back.

Si los usuarios no saben como acceder, o no encuentran de forma sencilla los elementos, o las indicaciones de como insertarlos no son las adecuadas, el sistema deja de cumplir su función.

Solución:

Accesibilidad significa que todo el mundo en la organización puede acceder al sistema.

  • Fácil de acceder: usa una URL que sea fácil de recordar y asegúrate que todo el mundo la conozca.
  • Fácil de encontrar los elementos: el sistema debe poseer un índice, un campo de búsqueda, una nomenclatura clara y consistente que ayude a los usuarios a encontrar lo que necesitan.
  • Fácil de usar: Sino lo es nadie lo usará y todo la inversión no habrá valido la pena.

Propiedad

Problema:

Si no existe un responsabl claro  del sistema cuando surja un problema, una duda, una sugerencia de mejora… los equipos no sabrán a quién acudir, decidiéndo por su propia cuenta cuestiones que atañen a toda la organización.

Solución:

El sistema debe tener asignada una persona como encargada de él, ya sea un equipo, un product owner… Pero debe quedar claro quién es el responsable de mantenerlo adaptado y de a quien deben acudir el resto de los equipos.

¿Has desarrollado un sistema de diseño? ¿Te has encontrado con problemas? Cuéntame que opinas para conocer cual es la mejor forma para desarrollarlos y gestionarlos.

A continuación veremos qué elementos debería contener un sistema de diseño.

Ejemplos de sistemas de diseño

Sistemas de diseño

Los sistemas de diseño (como dice Jeff Gothelf y Josh Seiden en su libro Lean UX) son como «Guías de estilos con esteroides». Usados tanto en compañías privadas (Mail Chimp y Salesforce, entre otras) como por entornos públicos (Gov.ukU.S. Web Design Standards, por ejemplo) presentan grandes beneficios.

Salesforce Lightning Design System

Imagen de Salesforce Design System

Antiguamente existían las llamadas brand guidelines, es decir, Manuales de marca o Manual de estilos de la marca, documentos impresos donde se explicaban la imagen de marca y como usarla. A veces tenían varias páginas pero normalmente eran documentos muy extensos. Cuando se digitalizaron se convirtieron en PDF, páginas web o wikis. Al mismo tiempo, algunas publicaciones tambien desarrollaron manuales que cubrían guías de como escribir o presentar la documentación.

Un ejemplo de la versión de estos manuales en el mundo de los ordenadores es la famosa Human Interface Guidelines (HIG) de Apple, un extenso documento que explica cada componente del sistema operativo de  Apple, ofreciendo reglas y ejemplos de su uso.

Por otro lado, los desarrolladores son familiares con las librerías de componentes, colecciones de reusables elementos que poseen la intención de hacer el trabajo más fácil proveyendo elementos de código ya testeados, y reusables que se encuentran almacenados en un repositorio de código.

Es decir, una vez desarrollados estos componentes (su parte visual y de interacción), múltiples equipos pueden usarlos las veces que deseen para construir elementos más complejos sin necesidad de hacerlos cada vez.

Un sistema de diseño funciona como una única fuenta de verdad para la capa de presentación de un producto.

Si se dispone de un buen sistema, los equipos pueden dibujar un sketch (boceto) y rápidamente desarrollarlo usando los elementos del sistema para crear el prototipo o producto preparado para su uso.

El valor de un sistema de diseño

Una vez creado, un equipo puede seguir evolucionando y mejorando el sistema, mientras otros equipos trabajan en paralelo desarrollando los productos (estructura, arquitectura de la información, flujo de trabajo…)

Ojo, que no hablamos de UI Kits.

Los sistemas de diseño permiten a los equipos:

  1. Diseñar más rápido porque no están inventando la rueda cada vez que diseñan una pantalla, sino que usan los elementos disponibles en el sistema.
  2. Prototipar más rápido porque los desarrolladores front usan directamente el componente que necesitan sin tener que construirlo cada vez.

Eso conselleva beneficios para las organizaciones:

Aumenta la consistencia

Cómo todos los equipos usan los mismos componentes el diseño resultante será consistente. Equipos distribuidos en diferentes lugares o incluso en distintas empresas basaran sus diseños y desarrollos en los mismos elementos, creando una imagen coherente de marca de empresa.

Mayor calidad

Centralizando la creación y el diseño de los elementos se aprovecha la destreza de los mejores diseñadores y desarrolladores de interfaz de usuarios. El resultado de gran calidad, es empleado por otros menos especializados para producir proyectos de alta calidad.

Menor coste

Un buen sistema de diseño cuesta dinero. Requiere inversión para construirlo y mantenerlo. Pero con el tiempo y sobre todo si son muchos los equipos que lo usan, la inversión se recupera al proporcionar herramientas y frameworks que permiten que los equipos de desarrollo sean más efecientes y productivos.

Las nuevas incorporaciones también serán antes productivas ya que disponen de toda la información en el sistema.

En el siguiente artículo hablo sobre que características definen a un buen sistema de diseño.

Ejemplos de sistemas de diseño

Decisiones personales: dejar un trabajo nunca es fácil

El final del 2016 ha sido bastante movidito. Tomar la decisión de dejar un trabajo donde estás bien valorada, existe un ambiente genial entre los compañeros y el equipo, tienes un horario decente, trabajas en pleno centro de la ciudad… es un momento muy, muy, MUY difícil.

Decidir dejar un trabajo nunca es fácil

Abandonar esa seguridad, ese sueldo seguro cada mes (sea mejor o peor), por algo que sientes dentro de ti, sin tener nada en la otra mano, sin saber cual es el siguiente paso, no es fácil. Y seguramente, si tienes ciertas responsabilidades personales, ni te lo planteas. Ni te atreves a pensarlo.

Pero bueno, después de estar 3 meses sopesando pros y contras, venciendo ese miedo interior, sintiéndote mal simplemente por pensar en ello, por querer dejar algo que tiene unas condiciones tan buenas, por haber puesto demasiadas expectativas en ello y no estar contenta con lo que tienes en ese momento, te lanzas. Y lo haces.

decisiones-personales

Porque cuando dejas tu un trabajo sin tener otro esperando, la gente te dice que estas loca. ¡Y sin paro! ¿Pero qué vas a hacer ahora? Pero, ¿en serio? Si es una empresa tan buena… ¿Con la seguridad que tenías ahí?

Son los comentarios que sueles oír.

Comentarios que no te ayudan. Que se suman a tu mar infinito de dudas.

La cosa cambia cuando te despiden, ya que aunque no sea nunca algo agradable no tienes poder de decisión. Es una situación donde seguramente no puedas hacer nada. Eres una pieza que alguien mueve, y seguramente en la mayoría de los casos, es algo que no se desea.

Has luchado por tu trabajo, lo has intentado hacer lo mejor posible, y ya sean motivos externos o internos, de repente te pasa esto. Y en muchas ocasiones esos despidos cambian la vida de una persona, de una familia, a una situación precaria y no deseada.

Razón de más para sentirte mal de dejar un trabajo por voluntad propia cuando muchas personas les ocurre lo contrario.

Tomar decisiones y no que las tomen por ti es lo difícil

Entiendo que cada persona tiene su situación personal, pero lo que quería resaltar es que tomar decisiones y no que las tomen por ti es lo realmente complicado del asunto. Y más cuando son decisiones que pueden cambiar tu vida. Decisiones que pueden ser erróneas y que no tienen marcha atrás.

Pero sientes que algo te impulsa a hacerlas, que no te deja dormir, que por muchas vueltas que le des y muchos pros y contras que hagas sigues pensando igual, y lo haces. Y te lanzas a ese vacío, a ese camino invisible que aun no sabes por donde va a ir…

Pero eso es la vida. Y es muy corta. Por lo que hay que intentar realizar un trabajo donde la motivación sea máxima, donde sigas aprendiendo constantemente con nuevos retos que resolver, donde te sientas orgullosa de lo que haces.

UX Academy: Prototipa la mejor herramienta tech para huertos urbanos

Parcel·les es un proyecto que busca aplicar la tecnología para facilitar la creación y gestión de la huerta colectiva de la ciudad que nos ha pedido ayuda a UX Academy para prototipar la mejor herramienta tech para huertos urbanos.

Parcelles - UX Academy

El proyecto que empezó a principios de verano, consta de 3 fases. Será en la fase de Prototipado donde los integrantes de UX Academy pueden aportar valor con sus conocimientos.

  1. Empatía en investigación: se ha investigado comprendiendo el ecosistema de huertos urbanos colectivos, buscando las emociones que guían los comportamientos, hablando con los usuarios y así, descubriendo las necesidades o márgenes de mejora que existen.
  2. Prototipado: se idearán soluciones para encontrar la que mejor se adapte y aporte más valor, mediante modelos tangibles que puedan probarse.
  3. Desarrollo: Ha llegado el momento de dedicar todos los recursos a desarrollar esa herramienta tecnológica cuyo contenido y funciones, a día de hoy, todavía con un misterio.

Previamente Raquel Gálvez (@RaquelGalvezO) de YAdemas Thinking Mates nos contará como surgió el proyecto y como se han realizado todas las fases de research, generación de ideas, selección de la idea ganadora…

Seguir leyendo «UX Academy: Prototipa la mejor herramienta tech para huertos urbanos»

Diseño de la petición de donaciones para Wikipedia

Hace un mes o dos me metí en Wikipedia y vi que habían modificado la parte superior para solicitar fondos para el mantenimiento de la página.

Esto no es algo nuevo, y se ha hecho en varias ocasiones para seguir funcionando sin publicidad. Las donaciones son desde su inicio su sistema de financiación ya que su creador defiende un modelo libre de anuncios y sin ánimo de lucro.

wikipedia diseño donaciones

Diseño en azul del banner de donaciones de Wikipedia

En este caso, el color azul de fondo con el degradado, hacía que el usuario viese algo diferente en la estructura habitual de la web, ya que la página que todos conocemos, por norma general, tiene un diseño donde prima el blanco y el negro.

wikipedia diseño normal

Diseño habitual de una página de Wikipedia

Al cabo de unos días, al realizar otra búsqueda vi que habían modificado el estilo visual de su anuncio resaltando en amarillo fosfórito el mensaje, en el cual apela a la poca cantidad de dinero que solicitan, 2€, menos que un café, en base a todo el servicio que realizan.

Resaltar además como apelan al sentimiento de culpa del usuario

Si, TODOS estamos usando un servicio gratis y no somos capaces de donar ni 2€ que es lo que nos gastamos en un café. 🙂

Y sigue, «si Wikipedia es útil para ti, por favor tómate un minuto para mantenerla disponible online y sin publicidad. Muchas gracias«. Osea, sino donas serás culpable de que luego puedan aparecer banners.

Seguir leyendo «Diseño de la petición de donaciones para Wikipedia»

El diseñador como agentes de la transformación

Raquel Pelta (@RaquelPelta), Historiadora del Diseño y Profesora de la Universidad de Barcelona, dio una clase magistral sobre la evolución del concepto de diseño, haciéndonos la siguiente pregunta:

¿Estamos los diseñadores preparados para ser agentes de la transformación?

Para algunos autores el rol que presenta el diseñador es el de resolver problemas. Pero ese concepto es erróneo ya que lo que sucede es que cuando llega el diseñador ya esta definido el problema.

En el año 68, Herbert A. Simon describía el diseño como una actividad intelectual, sentando las bases del Design Thinking. El diseño no era más que la mera creación de productos.

En los años 90, Richard Buchanan, veía el diseño como un artel liberal al servicio de la cultura tecnológica. Presentaba un enfoque intelectual del diseño a la hora de la identificación y resolución de problemas.

Seguir leyendo «El diseñador como agentes de la transformación»

UX en Valencia Disseny Week

Del 1 al 5 de febrero ha sido la Valencia Disseny Week, organizada por @ADCV_com para la promoción del diseño.

El objetivo de dar demostrar que todo lo que nos rodea cotidianamente es diseño

Numerosos eventos y exposiciones se podían encontrar por toda la ciudad, así como talleres y charlas, y es que en Valencia tenemos un alto nivel de profesionales que se dedican a ello…

UNAMO design studio, una firma española de diseño de producto, centrada en el mobiliario para el hogar, fue de los más activos, creando la UNAMO Design Week 2016, un escaparate de diseñadores, colectivos y marcas españolas, además de conciertos en directo, charlas y workshops.

El martes, el taller impartido por Javier Navarro Aparicio, llamado «Imagina & Comunicando«, congregó a más de 20 personas interesadas en la resolución de problemas y el arte de la comunicación.

El miércoles, UX Academy se encargaba de la charla, y allí estuve, contando lo importante que es la Experiencia de usuario en el desarrollo de un diseño, ya sea un producto o un servicio.
Seguir leyendo «UX en Valencia Disseny Week»

Pull&Bear te ayuda a comprar regalos Navidad

Pull& Bear ha creado un elemento de menú especial para estas Navidades, con un menú desplegable, dividido en 2 secciones (Hombre y mujer) que te sugiere regalos divididos por lo que te quieras gastar.

Ayuda elegir regalos

El nuevo elemento lo han resaltado colocándolo el primero junto a un icono de arbol de navidad.

Menu Navidad

Y  además en la página especial de la campaña, lo primero que vemos es lo más importante para el usuario:

Envoltorio para regalo: «Tu pedido listo para regalar, sin coste añadido»

Usabilidad en navidad

Me parece que en este caso han acertado a la hora de ponérselo fácil a aquellos usuarios que buscan comprar un regalo online, respondiendo rápidamente a sus preguntas:

  1. ¿Para quién es? ¿Chico o chica?
  2. ¿Cuánto te quieres gastar?
  3. ¿Va envuelto? ¿Me cuesta más dinero por ello?

Esperemos que tenga luego los resultados que se esperaban 🙂

Mejorando la experiencia de pago

Con motivo de la brecha que hubo en seguridad el verano pasado cuando millones de tarjetas de crédito fueron clonadas, se implementó en el proceso de pago una pasarela segura.

El momento del pago genera estrés en los usuarios

Se ha visto en estudios que los usuarios en el momento de introducir sus datos o de tomar la decisión de apretar el botón sienten ansiedad debido a diferentes causas:

  • Falta de información
  • Falta de confianza en el sitio web
  • No saben acabar el proceso
  • Ruidos o distracciones

La redirección a la plataforma segura de pago durante el proceso de pago con tarjeta implicaba que el usuario es redirigido a la interfaz del banco donde debe introducir sus datos de tarjeta.

Esto que parece muy sencillo, no siempre lo es.

Para facilitar la comprensión de los pasos de pago y reducir la ansiedad en este momento informando al usuario de lo que iba a pasar, se decidió crear una serie de imágenes que resumieran el proceso de manera visual.

Aquí podeis ver el resultado:

Pasos del pago con tarjeta
Zona del pago con tarjeta del formulario de reserva 

Antes de llegar a este diseño, lo que había era completamente diferente:

Seguir leyendo «Mejorando la experiencia de pago»

Diseñando soluciones para mejorar el mundo

En el UXSpain oí hablar a Rubén Perez Huidobro (@RPHuidobro) de la labor que están haciendo en UK, al crear el GDS (Government Digital Service). Su función es conseguir que todos los trámites administrativos de Reino Unido se puedan realizar de manera digital  y bajo un mismo dominio, estando accesibles para todo el mundo.

Para todo el mundo.

Como dice Martha Lane Fox (@marthalanefox) en su artículo: hay que aprovecharse de las posibilidades que ofrece la tecnología digital para atender las necesidades de toda la sociedad, y no solo de unos pocos.

Internet puede ayudar a redefinir los servicios públicos, mejorar la vida de los más vulnerables y fortalecer nuestra economía

Y hace tiempo que oí una charla TEDx impartida por Tim Brown, CEO and president of IDEO (@tceb62), donde se exhortaba a los diseñadores, a los ingenieros, a todos los creadores, a ir más allá.

Tim Brown TEDx

A no diseñar sólo cosas divertidas, deseables, bonitas o más usables. No diseñar sólo productos de consumo, sino a diseñar productos que sean importantes. A pensar a lo grande. (Ver charla)

A diseñar para cambiar el mundo

Tenemos que hacer productos que resuelvan soluciones a los problemas reales del mundo para poder evolucionar hacia un futuro más sostenible para todos. Diseñar para intentar solucionar problemas reales como la salud, la educación, el agua potable, la seguridad…

Tenemos que conseguir un balance entre las necesidades, la tecnología disponible y que sea económicamente viable.

Ya se que todo el mundo tenemos que comer, y que lógicamente, hay veces, sobre todo al principio de nuestra carrera que no podemos elegir ni mucho menos donde trabajar. Pero conforme vamos madurando, si que podemos ayudar.

Flat101, cada 6 meses elige un proyecto para trabajar en el de manera altruista. Como toda empresa, tiene otros proyectos con los cuales paga el sueldo a sus empleados, pero durante 6 meses, x horas a la semana las dedican a ayudar a alguien en un proyecto digital, siendo su primer caso el sueño de Jose Luis Arias, psicólogo que necesitaba un canal digital para seguir ayudando a la gente de forma gratuita (psicologiaparticipativa.com).

Y para conseguir diseños que de verdad soluciones problemas reales, necesitamos centrarnos en las personas

Hay que entender a las personas, su cultura y su contexto para poder conocer sus necesidades y aportar soluciones reales. Y hacerlo de manera rápida y sostenible.

Seguir leyendo «Diseñando soluciones para mejorar el mundo»

Scroll hacia arriba