Como ser diseñador UI y agregar valor a lo que hacemos.
Varias veces me han consultado acerca de mi trabajo, que procesos llevo adelante, que metodologías utilizo, que es el diseño de interfaz y que herramientas recomiendo para comenzar.
El siguiente artículo habla sobre dicho proceso y mi forma de trabajar.
Hace varios años comencé a estudiar Diseño Gráfico, en un principio como cualquier diseñador enfocado hacia el diseño de marca, pero con el tiempo me fui dando cuenta que diseñar branding no era lo que realmente me gustaba y comencé a trabajar en el diseño de sitios web y aplicaciones, lo que hoy en día llamamos diseño UI.
Trabajar en una agencia digital me permitió conocer ese mundo y explorar sobre una nueva área que hasta el momento me era desconocida. Ser diseñador UI significa ser responsable de todo componente que forme parte de una interfaz, sea un botón, un gradiente, tipografías, colores, tamaños y porque no hasta la propia arquitectura del producto.
Pero diseñar no es simplemente dar forma al contenido, es entender a nuestros usuarios, estudiar su interacción con los diferentes dispositivos, y saber de que manera podemos organizar las cosas para generar una experiencia positiva. Hoy en día lograr dicho objetivo, es solo el primer paso. Estamos en tiempos en los que como diseñadores buscamos que nuestros usuarios sientan placer y se enamoren de nuestros productos, y eso es lo que diferencia y distingue a buen diseño de un gran diseño.
Cuando hablo de entender a nuestros usuarios y estudiar su interacción me refiero a lo siguiente:
- Definir patrones usuario-ordenador, entender que opciones y posibilidades podríamos nosotros como diseñadores brindarles a nuestros usuarios, estudiando previamente todo comportamiento posible que no fuera considerado desde un principio y que pueda aplicarse en un futuro.
- Iterar-analizar-mejorar, que nuestros usuarios sientan placer o se enamoren de lo que hacemos, es producto de un constante seguimiento que nos ayude a entender que esta bien y que esta mal. Definir que componentes no cumplen con su objetivo, estudiarlos y proponer un cambio para su proximo release.
- No somos usuarios, pero debemos serlo. Debemos tener en claro que quienes utilicen nuestro producto no poseen los mismos conocimientos que nosotros. Ellos no saben manejarlo, no conocen su funcionamiento y esperan que la experiencia se adapte a sus necesidades. Como diseñadores debemos ponernos en su lugar, entender cuales serán sus acciones frente a la propuesta y vivir su experiencia.
Hay una gran diferencia en quienes se dedican específicamente al diseño de experiencia de usuario, lo que yo llamo especialista UX, y quienes se dedican al diseño visual, entienden como manejar una interfaz y agregan valor a la misma. La siguiente lista resume y refiere al proceso que como diseñador llevo adelante, organizando, desarrollando y cumpliendo objetivos. Me ayudan a cumplir con esos 3 puntos que mencione y a proponer desde ambas partes (UX & UI) propuestas con valor agregado.
Existen miles de herramientas, extensiones, sitios y pequeñas aplicaciones para trabajar. En lo personal considero que para lograr conseguir un buen producto con el siguiente proceso se puede comenzar.
Moleskine. Interactuar con otra persona, sea parte de mi equipo o el mismo cliente, me permite bajar a tierra la idea, que a priori llevara a una futura arquitectura de información a otro nivel. Un prototipo rápido ayuda a explorar las necesidades de nuestros usuarios, abrir puertas a una interacción y proponer soluciones.
Podríamos justificar con miles de motivos el porque de un prototipo de baja fidelidad, procesos de design thinking, Lean, y metodologías de diseño centrado en el usuario, pero para no darle vueltas al asunto, con esto se logra llegar a un punto medio entre lo que (en el caso de estar tratando con un cliente) se espera y lo que se puede.
Axure, como herramienta para organizar jerárquicamente el contenido del producto, la arquitectura, trabajar interacciones, crear estilos y agilizar el trabajo en conjunto con el equipo de desarrollo, que le permitirá comenzar con las tareas de implementación. A diferencia de low-fidelity-wireframes, estos wireframes son menos colaborativos y requieren un mayor trabajo de lo general a lo particular. Si utilizan balsamiq les recomiendo dar un paso adelante y darle una oportunidad a esta herramienta.
Más info sobre Axure
Photoshop, todos conocemos al monstruo de Adobe, imprescindible al momento de trabajar sobre la arquitectura que realizamos, crear una interfaz con estilos y darle forma a cada componente. Muchos recomiendan dar un paso al costado y comenzar a trabajar con Sketch, en lo personal creo que luego de que Adobe incorporara Artboards y algunas mejoras en la exportación de Assets seguiré utilizando esta herramienta por un largo período. Y aún más contando con assets.adobe. (Esta última agiliza nuestro trabajo con quien implemente el diseño.)
Skala Preview / Adobe Preview CC, Llevar nuestros trabajos al dispositivo final y contar con la posibilidad de interactuar con los archivos en su tamaño real, elevará la calidad y precisión de nuestros diseños.
Más info en skala.com
Invision, una aplicación que va más allá de la creación de bocetos interactivos. La misma nos permite gestionar y trabajar de forma colaborativa en un proyecto, pudiendo recibir feedback o ver el progreso del mismo. Se puede integrar con Photoshop, Sketch, Slack, Jira y otras aplicaciones.
Más info sobre Invision
Lookback.io, Esta herramienta nos da la posibilidad de realizar test de usuarios en persona, ver como interactúan con nuestro producto, grabar la pantalla, lo que dicen y almacenar todas nuestras grabaciones en un dashboard personal. Y lo mejor, es gratis! La recomiendo ampliamente.
Más info sobre Lookback.io
Visual Website Optimizer, Podemos confiar en testeos de usuarios y ver como interactúan con nuestros proyectos. Sinceramente no hay nada mas confiable que aquellas herramientas que nos proveen de números, tiempos y acciones reales por parte de nuestros usuarios. Personalmente la utilización de mapas de calor, clicks y A/B testing me han dado resultados 100% confiables y me han demostrado durante todo el ciclo de vida del producto una fidelización de usuarios mucho mas amplia que en proyectos en los que no las utilice.
Más info sobre VWO
Como dije anteriormente, si estás arrancando como diseñador UI y te interesa agregar valor a lo que haces, manejar esta lista de herramientas va a ayudarte a organizar tu proceso de trabajo y cumplir objetivos.
Si ya estas trabajando como UI/UX, ¿Qué herramientas utilizas?
