26 pasos para un diseño de producto perfecto
En los últimos cuatro años he estado diseñando paneles y aplicaciones, y aprendí a tratar con diferentes departamentos y a utilizar sus conocimientos para hacer que el diseño de productos sea más eficiente.
Hoy, voy a compartir todos los pasos que he incorporado en mi rutina diaria, que creo que me han convertido en un mejor diseñador.
Pre-proceso
1. Obtenga tanta información como sea posible (pregunte por tres ejemplos)
Para mí, nada proporciona más claridad que ver un ejemplo real de trabajo. Cuando estoy trabajando con un nuevo cliente o en una nueva página de aterrizaje para un producto, considero que el punto de partida más fácil es pedirle al cliente que brinde tres o cuatro páginas inspiradoras, porque esto realmente ayuda a ambas partes. Hacer que su cliente coloque ideas sobre la mesa le brinda la oportunidad de comprender fácilmente lo que le gusta y lo que espera del diseño terminado.
Si trabajas con varios equipos, debes intentar pasar tanto tiempo con los desarrolladores de un producto como lo haces con tus colegas de diseño. Lo que aprendí es que la clave para tomar una decisión de diseño efectiva es garantizar que hable con el equipo de desarrollo lo más que pueda. En mi caso, ha habido casos en los que se encontró una solución a un problema que yo no podía encontrar.
El objetivo es eliminar tantas preguntas como sea posible antes de avanzar hacia el desarrollo.
2. Aprende sobre personas
Al principio, debo decir que era escéptico sobre las personas, pero ahora todo tiene sentido para mí.
Entonces, en completo contraste con mi proceso anterior, puedo ver cómo las personas son súper importantes al trabajar en las características del producto, especialmente cuando la solución tiene muchos casos extremos diferentes. Te ayuda a entender para quién estás realmente diseñando. Mi objetivo es tener entre cuatro y cinco personas.
3. Establezca objetivos exactos: ¿qué deberíamos seguir exactamente?
Creo que la mayoría de los diseñadores / clientes ignoran este paso, pero uno de los aspectos más importantes del diseño para ambas partes es comprender los objetivos del producto que está diseñando. Tendemos a saltar directamente a los píxeles y completar rápidamente la interfaz de usuario del proyecto. Si se trata de un nuevo sitio web o una nueva función, asegúrese de establecer objetivos claros de lo que quiere lograr primero.
Como todo se puede rastrear, hable de los puntos exactos que va a rastrear. Por ejemplo, estos pueden variar desde nuevos registros, hasta una cantidad de clientes que usan PayPal o compras con tarjetas de crédito. ¡Siempre asegúrate de saber a qué altura aspiras al principio!
(Lo necesitará de todos modos para configurar embudos en Mixpanel más adelante en este proceso).
4. Configure una carpeta de proyecto y comience a construir un moodboard
Hay muchos sitios para inspirarse, Dribbble , Behance , Ptrones etc. Es muy fácil encontrar proyectos similares a los que está trabajando. Además, puede haber una solución a un problema que está experimentando e intentando resolver.
Cuando comienzo a trabajar en un nuevo proyecto, siempre configuro una carpeta con carpetas llamadas - Archivos de origen , Pantallas y exportación , Inspiración y recursos . Guardo todo lo que encuentro en Internet en la carpeta Inspiration para poder usarlo más adelante para crear moodboards básicos. Esta carpeta puede llenarse con todo, desde plugins, muestras o incluso estudios de casos completos de Behance.
Yendo baja fidelidad
5. Pizarra
Si queremos agregar una nueva característica o rediseñar un proceso, nos sentamos y todos en la reunión comienzan a dibujar ideas en una pizarra, papel o incluso un iPad. Esta acción nos permite poner a todos en el equipo en la posición del diseñador. Más tarde, terminamos con dos opciones de diseño para ver cuál funciona mejor.
Siempre intentamos pasar por toda la experiencia y discutir la mayoría de los casos extremos durante esta parte del proceso. Es realmente crucial abordarlos ahora en lugar de durante la fase de diseño o, peor aún, durante la parte de desarrollo. Ahí es cuando puedes perder mucho tiempo y energía.
6. Trace un mapa de todas sus pantallas (qué datos necesita ingresar el usuario)
Este es el momento de ir más allá de la pizarra y enumerar todas las entradas e historias del usuario. Escriba exactamente qué debe insertar un usuario en una pantalla en particular y cómo un usuario puede lograr sus objetivos deseados.
7. Escriba todos los estados posibles
Debido a que todos los paneles, aplicaciones o sitios web tienen diferentes estados, este es otro paso importante que no debe olvidar.
Al diseñar, debemos asegurarnos de abordarlos a todos. Es agradable tener gráficos brillantes e imágenes de perfil geniales en nuestros archivos de Sketch o PSD. Sin embargo, lo más probable es que los usuarios vean el lado opuesto de su aplicación. Especialmente cuando vienen a tu producto. Es necesario estar preparado. A continuación se muestra un ejemplo de cómo manejamos los estados vacíos en uno de nuestros componentes de datos.
8. Prepare su primer diagrama
Todo esto lleva a la parte final de baja fidelidad. Gracias al resultado de la tarea de la pizarra, ahora conocemos todos los estados posibles, las entradas y los objetivos del usuario. Para resumir todas las interacciones, creo un diagrama y para ser sincero, he cambiado el estilo de hacerlo muchas veces: pasar de los archivos de bocetos con diseños rasterizados a solo rectángulos que simbolizan cada página con sus nombres a continuación. Dicho esto, el proceso siempre fue doloroso, generalmente termino en una situación en la que queremos cambiar o agregar algo más adelante en el proceso. Con estas soluciones, generalmente me veo obligado a dar muchos pasos más; como cambiar las posiciones de las líneas, flechas e imágenes.
Recientemente he estado usando Camunda Modeler , que no es exactamente una herramienta de diseño; es una aplicación simple para crear diagramas técnicos. Lo cual suena extraño, pero esta aplicación está desarrollada para ayudarte a construir diagramas básicos. Lo más importante es que todo lo creado es completamente escalable. Puedes arrastrar y soltar fácilmente cualquier punto y automáticamente creará líneas y flechas para ti. También puede elegir entre diferentes tipos de puntos que pueden ser útiles para resaltar cuándo, por ejemplo, un usuario recibe un correo electrónico de Intercom. Camunda exporta a SVG lo que facilita el coloreado de puntos rastreables en Sketch.
Diseño de trabajo
9. Moodboard
Puedo comenzar con la creación de mood board, ya que recopilo todas las imágenes en mi carpeta Inspiration. Utilizo tablas de humor principalmente para discutir mis pensamientos con mis colegas y describir algunas de las ideas visuales, antes de comenzar con el proceso de píxeles.
10. Primer borrador
Diseñar es siempre un proceso continuo. Vas a iterar mucho en tu camino hacia un gran resultado. Con el primer borrador también es una forma de recopilar comentarios. No tiene que llegar al diseño perfecto de píxeles para comenzar a recibir comentarios de sus compañeros de equipo, clientes o posibles usuarios. Para tener sus primeras ideas y comenzar una discusión, suelo mezclar pantallas de nuestros diseños actuales. Esto nos permite comenzar a jugar con diseños reales en menos de un día. Puedes hacer un primer prototipo simple para probar si las cosas se conectan bien juntas.
11. Escribe tu copia
Copiar es uno de los aspectos clave de las decisiones de los usuarios y lo tomo como una parte crucial del diseño. No hay nada peor que un diseño agradable con diálogos confusos donde los usuarios están luchando para encontrar el siguiente paso.
12. Primera prueba interna
Con su primer borrador puede crear rápidamente un prototipo en Maravilla o Invision . Esto es algo que empecé a hacer recientemente y resulta que es otro aspecto de validación sorprendente. Con un prototipo, ahora puede configurar fácilmente una llamada con 3 o 4 personas de su equipo y compartir el prototipo de enlace con ellos y tratar de hacer algunas preguntas mientras prueba en los flujos / escenarios particulares.
De esta forma puede evaluar fácilmente sus habilidades de interrogatorio y, obviamente, poner a prueba sus decisiones de diseño en usuarios reales sin preocuparse por el desperdicio de recursos y tiempo. Tiendo a elegir personas que no están tan involucradas en el desarrollo del tablero. También trate de evitar mirar a alguien que ya haya tenido la oportunidad de jugar con el prototipo antes.
13. Etiqueta
Todos sabemos lo difícil que es mantenerse ordenado. Cómo entregar otra característica. Esto generalmente lleva a archivos desordenados de Sketch o PSD. Aprendí mucho sobre las diferencias entre trabajar como diseñador individual en una startup, trabajar en equipos o trabajar en mis propios productos digitales.
Cuando trabajas en un equipo, piensa en tus PSD como si los estuvieras creando para otra persona. Utilizo la regla de que si tienes más de 8 capas en una carpeta, entonces debes crear una nueva.
Encontré un gran complemento para Sketch, que me ahorró horas mientras trabajaba en mis kits de interfaz de usuario: Renombrarlo .
Consejo: Pon todo en el lienzo. Siempre he tenido problemas para diseñar bonitos encabezados mientras que el resto del lienzo era blanco. Mientras diseñaba, aprendí a poner todo el contenido en su lugar primero, solo jugaba con el diseño y la tipografía. Es mucho más fácil diseñar detalles agradables y jugar con todo el concepto con el contenido en su lugar.
14. Crea elementos de UI y comienza a jugar con Lego
Probablemente llegue tarde a la fiesta y esto ya sonará obsoleto mientras lo escribo. La razón por la que no hemos hecho ningún wireframing en el viaje aquí es simple. Sketch 39 viene con algo que he encontrado increíble y que es "formas con propiedades de cambio de tamaño". Esto es algo que facilita el diseño para todos en el equipo. Nuestro archivo de croquis es puro arrastrar y soltar ahora. Puedes dar fácilmente a cualquiera de tus compañeros de equipo un lienzo en blanco y pueden crear borradores de casi fidelidad. Gracias a esto, podemos omitir todas las herramientas de wireframing y comenzar con píxeles de apariencia casi real.
Esto también va de la mano con nosotros pudiendo convertir wireframes en diseños reales. Cualquier PM puede crear un wireframe y luego puedo tomarlo y transformarlo en alta fidelidad.
Activos y entrega
Cuando hayas terminado con el diseño y la iteración basados en los primeros comentarios, aún no has terminado. Ahora llega el momento de entregar sus diseños a sus ingenieros / desarrolladores.
15. Especificaciones
Uno de mis principales objetivos es siempre poder comunicar mis decisiones con el equipo y ser capaz de reducir la dificultad para nuestros desarrolladores tanto como pueda a fin de proporcionarles los mejores recursos posibles. Eso para mí es definitivamente la parte más importante de mi trabajo como diseñador.
Ya que documentamos toda la interacción y tenemos todo listo desde el comienzo de nuestro proceso, crear especificaciones es pan comido. Tiendo a escribir especificaciones en Google Docs o debajo de las pantallas en los archivos de Sketch. Es agradable manejar sus diseños con explicaciones de todas las características para que cualquiera pueda tomar su archivo en el futuro.
16. Diagrama
Esta técnica es buena para imprimir diseños y discutirlos con el equipo. Pero hoy en día creo que hay mejores opciones. Como tener listo el prototipo final.
17. Prototipo final
Una de las cosas clave para mí es tener siempre lista toda interacción en prototipo. Por lo general, termino teniendo 3-5 prototipos en el camino hacia el final para esas pequeñas sesiones con compañeros de equipo o para mostrar algunos flujos particulares. Tiendo a preparar todos los estados en Sketch en una mesa de trabajo y luego duplico esas mesas de trabajo para tener todos los estados listos para exportar.
Es genial agregar comentarios a partes de sus diseños para expandir su especificación mucho más, de modo que incluso un redactor pueda ir y verificar fácilmente los píxeles y flujos reales si cada copia y diálogo funciona como se requiere.
18. Quicktime Video> Notas
Cuando no estoy presentando material en Hangout para el equipo o un cliente, estoy enviando un video de pantalla compartida mirándome el prototipo y explicando todo lo que he diseñado. Es una buena confirmación para mí antes de cualquier presentación que conozco la respuesta a cualquier pregunta y posibles interacciones de fantasía que he decidido diseñar. También podría usarse muy bien cuando se trabaja en equipos remotos. Todos tienen acceso para reproducir todo el pensamiento de interacción en cualquier momento.
19. Animar
Como un buen toque final puedes usar Despues de los efectos o Principio . Es bueno explicar cómo quieres que cambie esto o aquello.
20. Styleguide
Otro punto crucial para los ingenieros es saber cómo reaccionarán las cosas en diferentes escenarios. Piense en los estados de error de entrada o dónde mostrar los mensajes de error. De forma similar, cómo se verá el estado de desactivación de un botón de envío, dónde poner un rotador, etc.
Para los ingenieros, es muy fácil ir solo a través de los elementos de diseño y estilo de Símbolos uno por uno antes de que comiencen a codificar todas las pantallas gracias a tener un archivo de bocetos como bloques de Lego.
Prueba final
Desde que terminamos de entregar nuestros diseños a los ingenieros, podemos enfocarnos en la última parte del proceso, probando nuestras decisiones.
21. Inspectlet / HotJar
Después de que los diseños se conviertan en código de trabajo, no se olvide de incluir su Inspectlet o HotJar Fragmentos de JS. Siempre estoy entusiasmado (o frustrado) de ver cómo los usuarios navegan a través de nuestro tablero o qué están haciendo en mi página de cartera. Inspectlet es increíble al capturar toda su sesión de usuario. Funciona muy bien para proyectos más grandes también.
Viene con un sencillo filtro "/ página" que le ayuda a mirar sesiones de una característica o flujo en particular.
22. Mixpanel
Mixpanel funciona muy bien para validar nuestros objetivos (los que configuramos al comienzo de nuestro proceso). Mixpanel ayuda a ver cuántos usuarios completan flujos particulares. Cuantos usuarios abandonaron antes de configurar la cuenta. Cuántas personas pasaron de la página principal de destino a la tienda y a nuestro producto más valioso.
23. Google Analytics
No soy capaz de codificar cosas grandes, pero al menos puedo trabajar con archivos CSS y con código simple. Últimamente estaba interesado en ver dónde hacen clic los usuarios y mientras observo los mapas de calor de Hotjar, así que decidí configurar también el registrador de clics básico en Google Analytics. También puede rastrear fácilmente cada uno de los clics de los usuarios en su sitio web.
Esto me ayuda a mapear fácilmente el comportamiento del usuario. Por ejemplo, descubrí que las personas usaban navegación superior en mi sitio 5 veces más sobre el enlace resaltado en el texto de introducción. Lamentablemente, no cuenta los clics de los usuarios con AdBlock.
24. Intercomunicador
Cuando acordamos nuestros flujos iniciales, hablamos de una parte de los flujos de los que el usuario recibe un correo electrónico de Intercomunicador . Nuestra responsabilidad aquí es asegurarnos de que toda la copia y el mensaje en sí tengan sentido y sean realmente útiles para el visitante. Asegúrese de que sus correos electrónicos guíen a su usuario a su agudo resultado y siempre trate de proporcionar artículos de soporte e información específicos sobre cómo continuar en el flujo.
Las últimas palabras
25. Deja atrás a Dribbble
Por lo que he aprendido y por cómo mi diseño ha cambiado en los últimos 4 años, llegué al punto en que Dribbble no es necesariamente el lugar para el que desea crear sus diseños. Siempre he intentado tener buenos píxeles con imágenes de perfil sexy, pero eso no es lo que los usuarios reales necesitan y usarán.
Aquí hay un ejemplo, a la izquierda verás algo que diseñé para Dribbble. A la derecha, verás algo que diseñé una vez que dediqué un tiempo a ver a las personas editar sus perfiles y me di cuenta de que mi visión no estaba proporcionando lo que necesitaban.
Puede recibir 500 "me gusta" para una animada animación brillante de una papa o una pizza deslizante, pero lo que es realmente importante es que los usuarios encuentren cómo administrar la frecuencia de los correos electrónicos de la empresa o cómo filtrar sus análisis de rendimiento.
[- Esta publicación fue publicada originalmente en medio , republicado con el permiso del autor. -]