Nota del Editor: Lubos Volkov es un diseñador experimentado quien ha trabajado de forma remota con una gran cantidad de desarrolladores a lo largo de su carrera. Como el _product designer de Toptal, Lubos interactúa día a día con miembros del equipo de una variedad de departamentos, incluyendo desarrollo, comunidad, y contenido. Él es un talentoso diseñador cuyas habilidades de comunicación contribuyen a su éxito. En este tutorial, Lubos comparte sus experiencias y formas de optimizar los flujos de trabajo entre diseñador y desarollador, UI y UX que llevarán a productos de óptima calidad a ser entregados incluso antes de la fecha límite._
Trabajar con un gran diseñador o equipo de diseño puede ser un recurso invaluable para cualquier equipo. Con canales de comunicación claros y cooperación que fluya libremente, el diseñador debería darte todo lo que necesitas para acelerar el proceso de construcción y limitar preguntas y confusiones lo más posible.
¿Qué puedes hacer tú, el desarrollador UX, para asegurarte de que el producto que has construído sea entregado en tiempo y forma sin sacrificar la calidad de la interfaz y experiencia de usuario?
Mi respuesta: Deja que tus diseñadores se involucren desde el primer día, y mantenlos involucrados a través de todo el proceso de desarrollo UI/UX. Asegúrate de establecer líneas de comunicación claras y que haya un proceso de mensajes consistente entre desarrolladores y diseñadores.
¿Tienes Todo Lo Que Necesitas?
La peor cosa que puede ocurrir durante la implementación de cualquier UI es falta de comunicación entre diseñador y desarrollador (a menos que sean la misma persona). Algunos diseñadores pensarán que su trabajo está listo una vez que envíen el PSD, pero en realidad, ¡eso está mal! Siempre debes tener un proceso de comunicación que dure a través del envío de los PSDs.
En muchos casos, tomará tiempo antes de que los diseñadores vean algo de UX/UI final implementado. Para su sorpresa, el build es muchas veces completamente diferente de la presentación inicial. (Esto me pasó más de una vez. He enviado los archivos originales con descripciones completas y prototipos de interacción, pero cuando finalmente vi el proyecto unos meses después, tenía una estructura diferente, diferentes colores, y no interacciones en su lugar.)
Algunos diseñadores podrían odiarme por esto, pero este proceso de trabajo de diseño requiere mucho trabajo “extra” de su lado. Sin embargo, crear y enviar información y recursos de forma organizada es mejor para el proyecto y el equipo a gran escala.
Si un desarrollador tiene todo lo que necesita frente a sus ojos, entonces el proceso aumentará su velocidad. Un PSD limpio y organizado no es suficiente.
¿Qué necesitas para que el trabajo se realice efectiva y eficientemente?
Estos son los grandes recursos que un desarrollador debería esperar de un diseñador para implementar diseño UX/UI:
- Archivo original - El diseñador debería poner todos los elementos de la app en un sólo archivo. Dicho archivo debería contener botones, checkboxes, estilos de header, tipografías, colores, etc. Básicamente, basado en la información de este archivo, el desarrollador debería poder recrear cualquier interfaz desde cero. Es mucho más fácil para un desarrollador exportar cualquier elemento de un PSD sólo que buscar en múltiples archivos.
- Recursos - Asegúrate de que los desarrolladores tengan todos los recursos necesarios, ya que los archivos originales no deberían ser tocados nuevamente.
- Interaction prototypes - Los días de “pantallas estáticas” ya no existen. Utilizar interacciones y animaciones inteligentes para suavizar el proceso de UX e implementación del mismo es una práctica muy común hoy en día. Pero, no puedes decir simplemente “esto se deslizará desde la izquierda” a un desarrollador. El diseñador deberá crear el prototipo para esa interacción, y deberá incluir información como velocidad, rapidez, etc., y el diseñador se supone deberá especificar cada uno de estos valores.
- La convención de los nombres - Requiere una estructura para nombrar a los diferentes archivos y mantenerlos organizados. Hará las cosas más fáciles para ambos a la hora de navegar los archivos. (A nadie le gusta tener cosas escondidas en una carpeta invisible).
- Recursos HDPI - Vivimos en “tiempos difíciles”, con la gran densidad de las pantallas. Asegúrate de que el diseñador entregue las imágenes en todas las resoluciones requeridas, para que tu aplicación se vea bien en todos lados. Nota: usa cuantos más vectores puedas, te ayudará bastante (svg).
Si hay algo que no encuentres durante la implementación, no tengas miedo; habla con el diseñador y pídeselo. ¡Nunca te saltees ni escatimes nada! Son miembros del mismo equipo, y su trabajo es entregar el producto que mejor sea posible. Si el diseñador falla, tu también lo haces.
Trabajo En Proceso
Utiliza a tus diseñadores durante el proceso de implementación de UI/UX. No los dejes a un lado esperando que ellos simplemente “empujen los píxeles”. Un diseñador ve posibles innovaciones incluso antes de que la implementación comience. Toma ventaja de esto, mantenlos informados. Provéeles con acceso para ver y probar el trabajo en proceso. Estoy seguro de que a nadie le gusta compartir cosas sin terminar, pero es mucho más fácil hacer cambios en el medio del build que hacerlo una vez que se termina. Hacerlo te ahorrará tiempo y prevendrá trabajo innecesario. Una vez que le des al diseñador una chance de probar el proyecto, pídele compilar una lista de problemas y soluciones, y sugerir mejoras.
¿Qué hacer cuando un desarrollador tienen una idea que cambiará el aspecto de una aplicación? Háblalo con el diseñador, y nunca permitas que un desarrollador modifique el diseño sin consultarle al diseñador. Este proceso de trabajo de diseño te ayudará que estés en el camino correcto. Un gran diseñador tiene una razón por cada elemento en la pantalla, y quitar una sola pieza sin entender por qué está ahí, podría arruinar la experiencia de usuario del producto.
Diseño de Gestión del Proyecto UI/UX
Los diseñadores pensarán que los desarrolladores pueden traer a la vida a un diseño en un día, o incluso en una hora. Pero como un gran diseño, un gran desarrollo requiere tiempo y esfuerzo. Mantén a tu diseñador ansioso apenas un poco lejos para dejarle ver al menos el proceso del build. Utilizar un software externo para gestionar un proyecto, para asegurarse de que cada revisión se haya visto, es una gran manera de asegurarte de que no te olvides de nada importante ni ninguna información que se haya hablado en una conversación de Skype o email. Y seamos honestos: algunas veces, cambios y actividades nunca son comunicadas hasta que suceden.
Cualquier solución que utilices, asegúrate de elegir un proceso de trabajo que todo el equipo pueda adoptar y usar con consistencia. En nuestro equipo, intenté proponer Basecamp porque eso es lo que estaba usando, pero nuestros desarrolladores front-end pensaron que tenía características limitadas. De por sí, ya estaban usando otros softwares de gestión de proyecto para llevar cuenta de bugs, progreso, etc., como JIRA, GitHub, e incluso Evernote. Entendí que el proceso de gestionar y llevar cuenta de información y comunicación debería ser lo más simple posible, así que tuve que migrar mi proceso de trabajo de diseño UI a JIRA. Quería asegurarme de que ellos entenderían mi proceso de trabajo y progreso, pero no quería que sintieran que el diseño sería otra cosa más que gestionar.
A continuación, un par de sugerencias para herramientas de gestión de proyecto:
- Basecamp - Lleva cuenta de las tareas en progreso del diseño y desarrollo, y fácilmente te deja exportarlas. También tiene un cliente mobile muy sencillo.
- JIRA - Una plataforma totalmente personalizable donde puedes fácilmente crear tableros para llevar cuenta de actividades como back-end, front-end, diseño, etc. Y creo que si bien el cliente mobile es un poco débil, es una gran solución para grandes equipos que incluyen bug tracking.
- Email - Esto es genial para comenzar una conversación o mandar imágenes. Pero por favor, ten cuidado si utilizas emails para enviar críticas u observaciones. Las cosas pueden perderse fácilmente.
También puedes probar Trello y otro software de gestión de proyecto, pero el más usado en nuestra industria son Basecamp y JIRA. De nuevo, lo más importante es encontrar un sistema de gestión de proyecto que todos puedan usar de forma consistente, de otro modo no tiene sentido alguno.
El Diseño UX Y El Desarrollo Se Juntan
El diseñador y desarrollador son una combinación poderosa. Asegúrate de compartir ideas de UI y UX juntos lo más seguido posible. Desarrolladores deberán estar dispuestos a ayudar al diseñador a crear ideas, mientras que un diseñador debe al menos tener un básico conocimiento de las tecnologías que se están utilizando.
Pónganse de acuerdo juntos en cuanto al proceso de trabajo de diseño. No simplemente implementes a ciegas lo que tus diseñadores crean. Sé proactivo, y crea algo que se vea hermoso pero que tenga una gran experiencia de usuario al tomar ventaja de tus dos distintas perspectivas. Los diseñadores pensarán fuera de la caja y ver animaciones locas, ideas, píxeles y botones, mientras que los desarrolladores ven la tecnología, límites y sacudida de velocidades.
En mi experiencia, cada diseñador se pone como loco por los píxeles y conceptos interesantes, pero a veces, un diseñador llega al punto donde tienen una idea, pero el desarrollador los detiene y dice, “Esto no va a funcionar bien una vez que esté implementado. Habrá problemas de desempeño en el consumo”. Recientemente, estaba pensando en implementar una ventana modal con un fondo fuera de foco, pero ese fuera de foco casuaba que los tiempos de carga de imágen fueran muy pesados. Para resolver esto, el desarrollador sugirió utilizar una capa de color simple, la cual cargaría más rápido y mantendría la calidad de la imagen. Diseñadores, póngan atención: No comprometan la experiencia de usuario por el diseño.
El Círculo De Las Observaciones
Las observaciones del diseñador son cruciales, y tiene que ocurrir cuantas veces sea posible. Es probable que sea lo que más tiempo (y energía) te demande, pero necesitarás adoptarlo para poder entregar resultados perfectos. A continuación, un par de consejos en el proceso de trabajo de diseño UX y UI para hace de tus observaciones algo perfecto.
- Sé visual - Las observaciones y críticas deben ser lo más específicas posible. La mejor manera de hacerlo de forma precisa es tomar una captura de pantalla y resaltar el problema que quieres arreglar. Se vería mejor si tuvieras fotos de una implementación actual vs cómo se debería ver. La comunicación visual eliminará el 50% de las preguntas.
- Sé descriptivo - Las observaciones deberían ser precisas. No puedes simplemente decir “mueve este botón más hacia arriba”. El diseñador siempre debe especificar cuántos píxeles se debería mover a dicho botón, qué espaciado debería ser usado, etc. Siempre incluye una explicación del problema, y la solución apropiada. Va a tomar mucho tiempo, pero vale la pena.
- Sé paciente - Ten en cuenta que el diseñador y el desarrollador no comparten el mismo enfoque. Si los desarrolladores no entienden por completo la idea de un diseñador, esto puede llevar a malas decisiones. En cada caso, ambos lados deberán ser pacientes y estar dispuestos a ayudar a otros miembros del equipo. Realmente es difícil a veces, pero es una habilidad que todo diseñador y desarrollador debería aprender.
Es bastante obvio que estas cosas necesitan ser combinadas para hacerlas más apropiadas a un proceso de trabajo de diseño. Pero, ¿qué herramienta podría ayudarte para enviar críticas y observaciones?
- Email - No me da miedo decir que esta es la plataforma más común para enviar observaciones. Está bien usarla, si sigues un par de simples reglas:
- Primero, usa un sólo hilo de conversación para las observaciones. No pongas cada modificación en un email nuevo con un título diferente.
- Segundo, crea una lista de arreglos. Intenta sentarte y pensar en cada modificación o arreglo que descrubres.
- Y por último, no envíes listas masivas por vez. Intenta separarlo en listas individuales pequeñas y ve parte por parte.
- Skype (Hangouts) - La voz es realmente una herramienta potente para ofrecer crítica constructiva. Inmediatamente puedes preguntar y responder preguntas. Pero asegúrate de tomar notas y enviarlas en el próximo email después de la llamada.
- Herramientas colaborativas - Para ser honesto, no soy un gran fan de las herramientas de colaboración. Pero tienen un gran beneficio: te ayudan a que el feedback esté en su lugar. Preguntar y responder preguntas es rápido, y se queda ahí por siempre.
A continuación, algunas de las mejores herramientas:
Anotaciones de críticas y observaciones:
Herramientas de colaboración:
Conclusión
Establecer un sistema de proceso de trabajo de diseño UI/UX que mantiene las líneas de comunicación abiertas a través del proceso de diseño y desarrollo. Esto te permitirá implementar grandes ideas, predecir potenciales problemas, y priorizar cuestiones importantes.
El desarrollador y diseñador pueden crear grandes cosas juntos siempre y cuando estén dispuestos a trabajar como un equipo, ¡para aprender en conjunto y crear tutoriales como este!
No hay comentarios:
Publicar un comentario
El administrador se reserva el derecho de publicar los mensajes