Un tutorial de flujo de trabajo de diseño para desarrolladores: Ofrezca una mejor UI/UX a tiempo

Nota del editor: Lubos Volkov es un diseñador experimentado que ha trabajado de forma remota con numerosos desarrolladores a lo largo de su carrera. Como diseñador de productos en Toptal, Lubos interactúa diariamente con miembros del equipo de una variedad de departamentos, incluidos ingeniería, comunidad y contenido. Es un diseñador talentoso cuyas habilidades de comunicación contribuyen a su éxito. En este tutorial, Lubos comparte sus experiencias y formas de optimizar los flujos de trabajo de UI y UX de diseñador-desarrollador que conducen a productos de calidad entregados en la fecha límite o antes.

Trabajar con un gran diseñador o equipo de diseño puede ser un activo invaluable para cualquier equipo. Con canales de comunicación claros y una cooperación fluida, el diseñador debe brindarle todo lo que necesita para acelerar el proceso de construcción y limitar las preguntas y la confusión tanto como sea posible.

¿Qué puede hacer usted, el desarrollador de UX, para garantizar que el producto que ha creado se entregue de manera oportuna sin sacrificar la calidad de la interfaz de usuario y la experiencia del usuario?

Mi respuesta: Involucre a sus diseñadores desde el primer día y manténgalos involucrados durante todo el proceso de desarrollo de UI/UX. Asegúrese de establecer líneas de comunicación claras y mensajes coherentes entre los desarrolladores y los diseñadores.

¿Tienes todo lo que necesitas?

Lo peor que puede pasar durante la implementación de cualquier interfaz de usuario es __falta de comunicación entre el diseñador y el desarrollador __(a menos que sean la misma persona). Algunos diseñadores piensan que su trabajo está hecho una vez que se envía el PSD. ¡Pero eso está mal! Debe crear un flujo de trabajo de comunicación permanente que dure más allá de la entrega de los PSD.

En muchos casos, llevará tiempo antes de que los diseñadores vean la implementación real del diseño de UI/UX. Para su sorpresa, la compilación suele ser completamente diferente de la presentación inicial. (Esto me sucedió más de una vez. Envié archivos fuente con descripciones completas y prototipos de interacción, pero cuando finalmente vi el proyecto, meses después, tenía un diseño diferente, diferentes colores y no había interacciones).

Algunos diseñadores pueden odiarme por esto, ya que este flujo de trabajo de diseño requiere mucho trabajo "extra" de su parte. Sin embargo, crear y entregar activos e información completos, de forma organizada, es mejor para el proyecto y el equipo en su conjunto.

Si un desarrollador tiene todo lo que necesita frente a él, acelerará el proceso. Un PSD limpio no es suficiente.

¿Qué necesita para hacer el trabajo de manera efectiva y eficiente?

Estos son los activos que un desarrollador debe esperar del diseñador para implementar un diseño de UI/UX:

• Archivo de recursos : el diseñador debe colocar todos los elementos de la aplicación en un archivo. Este archivo debe contener botones, casillas de verificación, estilos de encabezado, fuentes, colores, etc. Básicamente, según la información de este archivo, el desarrollador debe poder recrear cualquier interfaz desde cero. Es mucho más fácil para un desarrollador exportar cualquier elemento de un solo PSD que buscarlo en varios archivos.

• Activos : asegúrese de que los desarrolladores obtengan todos los activos necesarios, ya que los archivos de origen ya no deben tocarse.

• Prototipos de interacción : los días de "pantallas estáticas" quedaron atrás. El uso de interacciones y animaciones inteligentes para suavizar el flujo de trabajo y la implementación del diseño de UX es una práctica común ahora. Pero no puede simplemente decir "esto se deslizará desde la izquierda" a un desarrollador. El diseñador debe crear el prototipo real de esa interacción. El prototipo debe incluir información como velocidad, velocidad, etc., y se espera que el diseñador especifique cada uno de estos valores.

• Convención de nomenclatura : solicite una estructura de nomenclatura de archivos para mantener las cosas organizadas. Hará que sea más fácil para ambos navegar por los archivos. (A nadie le gusta tener cosas ocultas en una carpeta de fondo).

• Recursos HDPI - Vivimos “tiempos difíciles”, con la enorme densidad de las pantallas. Asegúrese de que el diseñador entregue imágenes en todas las resoluciones requeridas, para que su aplicación se vea nítida en todas partes. Nota: use tantos vectores como sea posible; te va a ayudar mucho (svg).

Si encuentra que falta algo más durante la implementación, no tenga miedo; haga ping al diseñador y pídalo. ¡Nunca saltes, y nunca escatimes! Son miembros del mismo equipo y su trabajo es entregar el mejor producto posible. Si un diseñador falla, tú también fallas.

Trabajo en progreso

Utilice a sus diseñadores durante el proceso de desarrollo de UI/UX. No los mantenga al margen esperando que simplemente "empujen los píxeles". Un diseñador ve posibles innovaciones incluso antes de que comience la implementación. Para aprovechar esto, manténgalos informados. Proporcióneles acceso para ver y probar el trabajo en curso. Soy muy consciente de que a nadie le gusta compartir proyectos inacabados. Pero es mucho más fácil hacer cambios en medio de una construcción que al final. Hacerlo puede ahorrarle tiempo y evitar trabajo innecesario. Una vez que le dé al diseñador la oportunidad de probar el proyecto, pídale que compile una lista de problemas y soluciones, y que sugiera mejoras.

¿Qué hacer cuando un desarrollador tiene una idea que cambiaría el aspecto de una aplicación? Discútalo con el diseñador y nunca permita que un desarrollador modifique el diseño sin consultar al diseñador. Este flujo de trabajo de diseño asegurará que la construcción se mantenga en el camino correcto. Un gran diseñador tiene una razón para cada elemento de la pantalla. Sacar una sola pieza, sin entender por qué está ahí, podría arruinar la experiencia del usuario del producto.

Gestión de proyectos de diseño de UI/UX

Los diseñadores piensan que los desarrolladores pueden dar vida a un diseño en un día, o incluso en una hora. Pero, al igual que un gran diseño, un gran desarrollo requiere tiempo y esfuerzo. Mantenga a raya a su ansioso diseñador permitiéndole ver el progreso de la construcción. El uso de un software de gestión de proyectos externo, para asegurarse de que se tenga en cuenta cada revisión, es una excelente manera de asegurarse de no perderse información importante discutida en una conversación por correo electrónico o una sesión de Skype. Y seamos honestos: a veces los cambios y las actividades ni siquiera se comunican hasta que suceden.

Independientemente de la solución que utilice, asegúrese de elegir un proceso de flujo de trabajo que todo el equipo adoptará y utilizará de manera constante. En nuestro equipo, traté de promocionar Basecamp porque eso es lo que estaba usando, pero nuestros desarrolladores front-end pensaron que tenía funciones limitadas. Ya estaban usando otro software de gestión de proyectos para rastrear errores, progreso, etc., como JIRA, GitHub e incluso Evernote. Entendí que el seguimiento y la gestión de proyectos deben ser lo más simples posible, así que migré mi flujo de trabajo de diseño de interfaz de usuario a JIRA. Quería asegurarme de que entendieran mi flujo de trabajo y progreso, pero no quería que sintieran que el diseño era otra cosa que administrar.

Aquí hay algunas sugerencias para una herramienta de gestión de proyectos:

• Basecamp: realiza un seguimiento del progreso de las tareas relacionadas con el diseño y el desarrollo, y le permite exportar tareas fácilmente. También tiene un cliente móvil simple.
• JIRA: una plataforma totalmente personalizable donde puede configurar fácilmente tableros personalizados para diferentes áreas. Por ejemplo, organice tableros para rastrear actividades como back-end, front-end, diseño, etc. Creo que el cliente móvil es un poco débil, pero es una gran solución para equipos más grandes e incluye una función de seguimiento de errores.
• Correo electrónico: esto es excelente para establecer una conversación o enviar imágenes. Pero tenga cuidado si utiliza el correo electrónico para recibir comentarios. Las cosas pueden perderse fácilmente.

También puede probar Trello y otro software de gestión de proyectos, pero los más utilizados en nuestra industria son Basecamp y JIRA. Nuevamente, lo más importante es encontrar un sistema de gestión de proyectos que todos puedan usar de manera consistente, ya que de lo contrario es un punto discutible.

El diseño y el desarrollo de UX se unen

El diseñador y el desarrollador son una poderosa combinación. Asegúrese de intercambiar ideas sobre UI y UX tan a menudo como sea posible. Los desarrolladores deben estar dispuestos a ayudar a un diseñador a concebir ideas, mientras que un diseñador debe tener al menos un conocimiento básico de la tecnología que se utiliza.

Averigüen juntos el flujo de trabajo del diseño. No implemente ciegamente lo que crean sus diseñadores. Sea proactivo y cree algo que se vea hermoso y tenga una excelente experiencia de usuario, aprovechando sus dos perspectivas diferentes. Los diseñadores piensan fuera de la caja y ven animaciones, ideas, píxeles y botones locos, mientras que los desarrolladores ven la tecnología, los topes de velocidad y los límites.

En mi experiencia, todos los diseñadores están locos por los píxeles y los conceptos interesantes. Pero a veces, un diseñador llega a un punto en el que tiene una idea, pero el desarrollador responde y dice: “Esto no va a funcionar bien una vez que se implemente. Habrá problemas de consumo de rendimiento”. Recientemente, estaba buscando implementar una ventana modal con un fondo borroso, pero este desenfoque provocó tiempos de carga pesados. Para resolver este problema, el desarrollador sugirió usar una superposición regular a todo color, que se carga más rápido y conserva la calidad de la imagen. Diseñadores, presten atención: no comprometan la experiencia del usuario por el diseño.

Bucle de retroalimentación

La retroalimentación del diseñador es crucial y debe ocurrir con la mayor frecuencia posible. Es probablemente lo que más tiempo (y energía) consumirá que hará. Pero, debe adoptarlo para poder ofrecer resultados perfectos. Aquí hay un par de consejos de flujo de trabajo de diseño de UX y UI sobre cómo hacer que sus comentarios sean perfectos.

• Sea visual : la retroalimentación debe ser lo más específica posible. La mejor manera de hacerlo preciso es tomar una captura de pantalla simple y resaltar un problema que desea solucionar. Sería incluso mejor si tuviera imágenes de una implementación actual frente a cómo se supone que debe verse . La comunicación visual eliminará el 50% de las preguntas.

• Sea descriptivo : los comentarios deben ser precisos. No puedes simplemente decir "mueve este botón hacia arriba". El diseñador debe especificar cuántos píxeles debe mover un botón, qué relleno debe usarse, etc. Incluya siempre una explicación del problema y la solución adecuada para él. Va a tomar mucho tiempo, pero vale la pena.

• Sea paciente : tenga en cuenta que el diseñador y los desarrolladores no comparten el mismo enfoque. Si los desarrolladores no entienden completamente la idea de un diseñador, puede generar confusión y malas decisiones. En todos los casos, ambas partes deben ser pacientes y estar dispuestas a ayudar a los demás miembros del equipo. A veces es realmente difícil, pero es una habilidad blanda que todo diseñador y desarrollador debería aprender.

Es bastante obvio que estas cosas deben combinarse para convertirlas en un flujo de trabajo de diseño adecuado. Pero, ¿qué herramienta puede ayudarte realmente a entregar la retroalimentación?

• Correo electrónico : no tengo miedo de decir que esta sigue siendo la plataforma más común para enviar comentarios. Está totalmente bien usarlo, si sigues un par de reglas simples.
  • Primero, use un solo hilo de correo electrónico para sus comentarios. No coloque cada ajuste individual en un nuevo correo electrónico con un asunto diferente.
  • En segundo lugar, cree la lista de correcciones. Trate de sentarse y pensar en cada ajuste o arreglo que haya notado.
  • Y, por último, no envíe una lista enorme a la vez. Intente dividirlo en listas individuales más pequeñas e ir parte por parte.

• Skype (Hangouts) : la voz es una herramienta realmente poderosa para la retroalimentación. Inmediatamente puede hacer y responder preguntas. Pero asegúrese de tomar notas y enviar el mensaje de seguimiento (correo electrónico) después de la llamada.

• Herramientas de colaboración : para ser honesto, no soy un gran fanático de las herramientas de colaboración. Pero, tienen un gran beneficio. Le ayudan a mantener la retroalimentación en su lugar. Hacer y responder preguntas es rápido y se queda ahí para siempre.

Estas son algunas de las mejores herramientas:

Anotación de comentarios:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

Herramientas de colaboración:

• http://www.invisionapp.com/
• https://basecamp.com/

Conclusión

Establezca un sistema y un flujo de trabajo de diseño de UI/UX que mantenga abiertas las líneas de comunicación durante todo el proceso de diseño y desarrollo. Esto le permitirá implementar grandes ideas, pronosticar problemas potenciales y priorizar temas importantes.

El desarrollador y el diseñador pueden crear grandes cosas juntos siempre y cuando estén dispuestos a trabajar en equipo . ¡Aprendan unos de otros y diseñen tutoriales como este!