26 pasos para el diseño de productos y paneles

Lo que aprendí durante mi viaje de 4 años como diseñador de productos y diseñador de paneles

Durante los últimos cuatro años, he continuado diseñando tableros y aplicaciones, y he aprendido cómo tratar con diferentes departamentos y utilizar sus conocimientos para hacer que los diseños de productos sean mejores y más eficientes.
 
Hoy voy a compartir todos los pasos que aprendí e incorporé a mi rutina diaria. Creo que estos pasos me han ayudado a convertirme en un diseñador mucho mejor, y quiero compartirlos con usted.

1. Preproceso

Obtenga tanta información como sea posible (solicite tres ejemplos)

Para mí, nada me da más claridad que ver un ejemplo real de trabajo. Cuando estoy trabajando con un nuevo cliente o en una nueva página de destino para un producto, me parece más fácil pedirle al cliente que proporcione tres o cuatro páginas inspiradoras, porque esto realmente ayuda a ambas partes. Hacer que su cliente ponga 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 está trabajando con varios equipos, debe tratar de pasar tanto tiempo con los desarrolladores en un producto como lo hace con sus colegas diseñadores. Lo que aprendí mientras trabajaba en Tapdaq, la clave para tomar una decisión de diseño efectiva es asegurarse de hablar con el equipo de desarrollo tanto como sea posible. En mi caso, siempre hay casos de una solución a un problema por el cual no podría encontrar esa solución por mí mismo. Diría que el objetivo es eliminar tantas preguntas como sea posible antes de pasar al desarrollo.

Aprenda acerca de las 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 diferentes. Le ayuda a comprender para quién está diseñando realmente. Mi objetivo es tener alrededor de cuatro a cinco personas. De la mejor manera de tener personas como usuarios reales, esto puede ayudarlo a identificar problemas mientras chatea o analiza su solución con ellos en una llamada o en persona.

Plantilla Persona: descárguelo aquí: http://janlosert.com/assets/persona-template.zip

Configurar objetivos exactos: ¿qué debemos rastrear 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 desarrollar rápidamente la interfaz de usuario del proyecto. Si se trata de un sitio web nuevo o de una función nueva, asegúrese de establecer objetivos claros de lo que desea lograr.
 
Como todo es rastreable, hable sobre los puntos exactos que va a rastrear. Por ejemplo, estos pueden variar desde nuevas suscripciones, hasta un número de clientes que usan Paypal versus compras con tarjetas de crédito. ¡Siempre asegúrate de saber a qué altura estás apuntando al principio!
 
PD - Necesitará esto de todos modos para configurar embudos en Mixpanel más adelante en este proceso.

Estructura del proyecto

Configure Project Folder y comience a recopilar Moodboard

Hay muchos sitios para inspirarse: Dribbble, Behance, Pttrns, Pinterest, etc. Es realmente fácil encontrar proyectos similares en los que estará trabajando. Además, es posible que ya haya una solución a un problema que está experimentando e intentando resolver.
 
Cuando empiezo 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 tarde y crear cuadros de humor básicos. Esta carpeta podría llenarse con cualquier cosa, desde complementos, muestras o incluso estudios de caso completos de Behance.

2. Ir a baja fidelidad

Pizarra

Si alguien puede recordar, en mi artículo anterior no me importaba mucho la calidad de los wireframes. Los métodos que uso ahora son los siguientes:
 
Si queremos agregar una nueva función o rediseñar un proceso, nos sentamos y todos en la reunión comienzan a esbozar 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 tratamos de pasar por toda la experiencia y discutir la mayoría de los casos límite 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.

Asigne toda la información de sus pantallas (qué datos necesita ingresar un usuario)

Este es el momento de ir más allá de la pizarra y enumerar todas las entradas e historias del usuario. Escriba qué debe insertar exactamente un usuario en una pantalla en particular y cómo puede lograr los objetivos deseados.

Escribe todos los estados posibles

Dado que todos los paneles, aplicaciones o formularios de sitios web tienen estados diferentes, este es otro paso importante que no debe olvidar.
 
Mientras diseñamos debemos asegurarnos de abordarlos a todos. Es bueno tener gráficos brillantes e imágenes de perfil interesantes en nuestros archivos de croquis o PSD. Sin embargo, lo más probable es que los usuarios vean el lado opuesto de su aplicación. Especialmente cuando se trata de su producto. Es necesario estar preparado. A continuación se muestra un ejemplo de cómo tratamos los estados vacíos en uno de nuestros componentes de datos.

Tapdaq - Estados del widget de promoción cruzada

Prepare el primer diagrama

Todo esto lleva a la parte final de la baja fidelidad. Gracias al resultado de la tarea de pizarra, ahora conocemos todos los estados posibles, las aportaciones y los objetivos del usuario. Para resumir todas las interacciones, creo un diagrama y, para ser honesto, he cambiado el estilo de hacerlo muchas veces: desde 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 hacer muchos más pasos; como cambiar las posiciones de líneas, flechas e imágenes.

Después de todo, terminamos usando Camunda Modeler, que no es exactamente una herramienta de diseño. Es una aplicación simple para crear diagramas técnicos. Lo que 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. Puede arrastrar y soltar fácilmente cualquier punto y automáticamente creará líneas y flechas para usted. También puede elegir entre diferentes tipos de puntos que pueden ser útiles, por ejemplo, para resaltar cuando un usuario recibe un correo electrónico de Intercom. Camunda permite exportar a SVG, lo que facilita el color de los puntos rastreables en Sketch.

Menú Tapdaq + Estructura de pantallas (Exportar desde Camunda Modeler)

3. Trabajo / diseño

Moodboard

Puedo comenzar con la creación de moodboard, ya que recopilo todas las imágenes en mi carpeta Inspiration. Utilizo paneles de humor principalmente para discutir mis pensamientos con colegas y describir algunas de las ideas visuales, antes de comenzar con el proceso de píxeles.

Moodboard con Chronicle Display y colores azules brillantes.

Primer borrador

El diseño es siempre un proceso continuo. Vas a iterar mucho en tu camino hacia un gran resultado. Con el primer borrador también viene la recopilación de los primeros comentarios. No es necesario que adopte un diseño de píxeles perfectos para comenzar a recibir comentarios de sus compañeros de equipo, clientes o usuarios potenciales. Para tener sus primeros pensamientos y comenzar una discusión, generalmente mezclo pantallas de nuestros diseños actuales. Esto nos permite comenzar a jugar con diseños de aspecto real en menos de un día. Puede hacer un primer prototipo simple para probar si las cosas se conectan bien entre sí.

Escribe tu copia (tono)

Copiar es uno de los aspectos clave de las decisiones de los usuarios y lo tomo como una parte crucial del diseño. No soy un hablante nativo, pero todavía soy capaz de establecer el tono de la copia. No hay nada peor que un diseño agradable con diálogos confusos donde los usuarios luchan por encontrar el siguiente paso.

Primera prueba interna

Con su primer borrador, puede crear rápidamente un prototipo en Marvelapp o Invision. Esto es algo que comencé a hacer recientemente y resulta que es otro aspecto de validación increíble. Con un prototipo, ahora puede configurar fácilmente una llamada con 3 o 4 personas de su equipo y compartir el enlace del prototipo con ellos e intentar hacer algunas preguntas mientras prueba en ellos flujos / escenarios particulares. De esta manera, puede probar fácilmente sus habilidades de preguntas y, obviamente, probar sus decisiones de diseño en usuarios reales sin preocuparse por el desperdicio de recursos y tiempo. Por lo general, 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.

Etiqueta

Todos sabemos lo difícil que es mantenerse ordenado. Cómo entregar otra característica más. Esto generalmente lleva a un desordenado Sketch o archivos PSD. Aprendí mucho mientras diseñaba el kit de interfaz de usuario del tablero, especialmente sobre las diferencias entre trabajar como diseñador único en una startup, trabajar en equipo o trabajar en mis productos digitales. Mientras estoy trabajando en Tapdaq, confío en las habilidades de mis colegas e incluso cuando sé que estoy tratando de mantener los archivos ordenados, ¡a veces es imposible! Sin embargo, cuando trabajas en un equipo, pienso en mi PSD como si lo estuviera creando para otra persona. Uso la regla de que si tiene más de 8 capas en una carpeta, entonces debe crear una nueva.

Kit de interfaz de usuario del tablero de instrumentos - Estructura de carpetas

Encontré un gran complemento para Sketch, que me ahorró horas mientras trabajaba en mis kits de interfaz de usuario. Cambiar nombre: https://github.com/rodi01/RenameIt
 
Todavía puede echar un vistazo a estas viejas pautas de etiqueta (de todos modos, la mayoría de los puntos funcionan para cualquier editor que use). - http://photoshopetiquette.com/

Consejo: pon todo en lienzo

Siempre me ha costado diseñar lindos encabezados mientras que el resto del lienzo era blanco. Mientras diseñaba, aprendí a poner todo el contenido en su lugar primero, solo juegue 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.

Crea UI Elements y comienza a jugar con Lego

Probablemente llegue tarde a la fiesta y esto ya parecerá anticuado mientras lo estoy escribiendo. La razón por la que no hemos realizado ninguna trama 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". Me obligó a recrear finalmente las más de 50 pantallas Tapdaq. Esto es algo que hace que el diseño sea fácil para todos en el equipo. Nuestro archivo de boceto es solo arrastrar y soltar ahora. Puede dar fácilmente a cualquiera de sus compañeros de equipo un lienzo en blanco y pueden crear borradores de casi alta fidelidad. Gracias a esto, podemos omitir todas las herramientas de estructura de alambre y comenzar con píxeles de aspecto casi real.

Esto también va de la mano con la posibilidad de convertir los wireframes en diseños reales. Cualquier PM puede crear una estructura alámbrica y luego puedo tomarlo fácilmente y transformarlo en alta fidelidad.

Arrastrar y soltar elementos en el archivo de boceto Tapdaq

4. Activos y entrega

Cuando haya terminado de diseñar e iterar en función de los primeros comentarios, aún no ha terminado. Ahora llega el momento de entregar sus diseños a sus ingenieros / desarrolladores.

Presupuesto

Uno de mis objetivos principales es poder comunicar siempre mis decisiones con el equipo y reducir la dificultad de nuestros desarrolladores tanto como pueda para proporcionarles los mejores recursos posibles. Eso para mí es definitivamente la parte más importante de mi trabajo como diseñador.
 
Dado 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 bueno manejar sus diseños con explicaciones de todas las características para que cualquiera pueda tomar su archivo en el futuro.

Diagrama

Solíamos hacer esta técnica mientras trabajaba en Badoo para presentaciones con el equipo y las partes interesadas. 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.

Diagrama completo de la aplicación Sagram Analytics

Prototipo final

Una de las cosas clave para mí es tener siempre toda la interacción lista en el 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 duplicar esas mesas de trabajo para tener todos los estados listos al exportar.
Como se dijo antes, puede usar Marvelapp o Invision. Es genial agregar comentarios a partes de sus diseños para expandir su especificación mucho más, de modo que incluso el redactor publicitario pueda ir fácilmente y verificar píxeles y flujos reales si cada copia y diálogo funciona según sea necesario.

Video de Quicktime> Notas

Cuando no estoy presentando cosas en Hangout al equipo o al cliente, estoy enviando un video de pantalla compartida de mí revisando el prototipo y explicando todo lo que he diseñado. Es una buena confirmación para mí, antes de cualquier presentación, de que sé la respuesta a cualquier pregunta y las posibles interacciones extravagantes que he decidido diseñar. También podría usarse muy bien cuando se trabaja en equipos remotos. Todos tienen acceso para reproducir toda la interacción pensando en cualquier momento.

Animar

Un buen toque final de su diseño puede usar After Effects o Principle. Es bueno explicar cómo quieres que esto y aquello se mueva o se mueva.

Guía de estilo

Otro punto crucial para los ingenieros es saber cómo reaccionarán las cosas en diferentes escenarios. Piense en el estado de error de la entrada o dónde mostrar el mensaje de error. De la misma manera que se verá el estado de desactivación del botón de envío, dónde colocar la flecha giratoria en la entrada, etc. Es muy fácil para los ingenieros pasar por la mesa de trabajo de Símbolos y diseñar uno por un elemento incluso antes de comenzar a codificar todas las pantallas gracias a tener un archivo de Sketch como bloques de Lego. La guía de estilo y la descripción visual de todos los elementos es en realidad una de las características / diseños más solicitados para la próxima actualización de mi kit de interfaz de usuario del tablero.

Descripción general de la interfaz de usuario de Tapdaq - Styleguide

5. Final y prueba

Como hemos terminado de entregar nuestros diseños a los ingenieros, podemos centrarnos en la última parte del proceso: ¡Pruebas de nuestras decisiones!

Inspectlet / HotJar

Después de que los diseños se conviertan en código de trabajo, no olvide incluir sus fragmentos Inspectlet o HotJar JS. Siempre estoy emocionado (o frustrado) de ver cómo navegan los usuarios a través de nuestro panel de control o qué están haciendo en la página de mi cartera. Inspectlet es sorprendente al capturar toda su sesión de usuario. Funciona muy bien para proyectos más grandes también. Viene con un sencillo filtrado "/ página" que le ayuda a ver la sesión de una característica o flujo en particular. Usamos Inspectlet en Tapdaq. Para mi cartera personal, uso las funciones gratuitas de HotJar para generar mapas de calor y registrar al menos algunos usuarios que navegan por mi cartera.

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. Cuántos usuarios abandonaron antes de configurar la cuenta. Cuántas personas pasaron de la página de inicio principal a la tienda y a nuestro producto más valioso.

Google analitico

No soy capaz de codificar grandes cosas, pero al menos puedo trabajar con archivos CSS y con código simple. Últimamente me interesaba ver dónde hacían clic los usuarios y, mientras miraba los mapas de calor de Hotjar, también decidí configurar el rastreador de clics básico en Google Analytics. También puede realizar un seguimiento de todos los clics de los usuarios en su sitio web. Aquí hay un código de muestra para el seguimiento de clics: http://pastebin.com/tdmFZN2k

`` `

** 1. Pega el script en tu código **

** 2. Agrega onclick a tus enlaces **

Enlace

`` `

Código de seguimiento de Google AnalyticsResultados de seguimiento de Google Analytics

Como puede ver, estoy rastreando cada botón, cada enlace y siempre adjunto diferentes etiquetas a cada uno de estos puntos de anclaje. Esto me ayuda a mapear fácilmente el comportamiento del usuario. Por ejemplo, descubrí que las personas usaban la navegación superior 5 veces más sobre el enlace resaltado en el texto de introducción. Siéntase libre de codificar este fragmento en su sitio web también.
 
PD Lamentablemente, no cuenta los clics de los usuarios con AdBlock.
Gracias @snapeuh por la gran ayuda para configurar esto.

Intercomunicador

Cuando acordamos nuestros flujos iniciales, estábamos hablando de parte de los flujos en los que el usuario recibe un correo electrónico de Intercom. Nuestra responsabilidad aquí es garantizar que todas las copias y el mensaje en sí tengan sentido y sean realmente útiles para el visitante. Asegúrese de que sus correos electrónicos estén guiando a su usuario a su gran resultado y siempre trate de proporcionar artículos de soporte específicos e información sobre cómo continuar en el flujo.

6. Después del diseño / ¿Cómo gestiono mi trabajo?

Metas

Para la última parte del viaje, me estoy preparando sprints de un mes divididos en objetivos relacionados con el trabajo / Tapdaq, objetivos de proyectos personales y objetivos de la vida. Todavía estoy usando Things by Cultured Code para dividir esos proyectos en pequeñas tareas que son fáciles de cerrar. Solía ​​trabajar en 5 proyectos diferentes al mismo tiempo y siempre terminaba frustrado por no poder empujar nada sobre la línea de meta. Hoy en día pretendo lanzar al menos una cosa cada mes. Esa "cosa" podría ser cualquier cosa, desde 2 subpáginas nuevas en mi cartera, un nuevo producto o la nueva página de destino de un cliente. Solo para seguir adelante y estar feliz con terminar cosas.

Originalmente de Siavash Mahmoudian - https://mobile.twitter.com/siavash/status/618093511066435585

Espacio de trabajo

Ya estoy usando bocetos para la mayoría de mis diseños, pero tengo muchas personas en Instagram que piden mi espacio de trabajo de Photoshop, ¡así que aquí tienes! http://janlosert.com/assets/workspace.zip

7. Las últimas palabras

Esta fue una descripción general de todos los pasos que estoy tomando para entregar mis diseños, obviamente no sigo la misma rutina todo el tiempo, pero esto le da una idea de cómo trabajo.

Deje atrás el regate

Por lo que aprendí y cómo mis diseños han cambiado en los últimos 4 años, llegué al punto en que Dribbble es la mejor manera para que los diseñadores atraigamos nuevos clientes y presumamos nuestro trabajo. Pero no es necesariamente el lugar para el que desea crear sus diseños. Siempre intenté tener píxeles agradables con imágenes de perfil sexys, pero eso no es lo que los usuarios reales necesitan y usarán. Este es un ejemplo de Tapdaq, algo que diseñé pensando en un buen disparo para Instagram y Dribbble y así es como se ve la pantalla actual después de pasar horas mirando a la gente editar sus perfiles y después de darme cuenta de qué información ellos realmente solicitan y necesitan.

Configuración de la cuenta: antes y después

Es posible que reciba 500 Me gusta por la brillante animación loca de una papa o una pizza deslizante, pero lo que es realmente importante es que sus usuarios encontrarán cómo administrar la frecuencia de los correos electrónicos de la empresa o cómo filtrar sus análisis de rendimiento.

Futuro

Mi próxima misión es lo más importante, sumergirme más en UX e investigar. Para poder compartir en mi próximo artículo una descripción general de las herramientas UX que uso para las pruebas A / B y para recopilar datos. Todavía soy bastante nuevo en UX y no he tenido muchas oportunidades de aprender en trabajos anteriores. Pero actualmente me apasiona rastrear y observar el movimiento de cada usuario en cada nuevo proyecto en el que estoy trabajando.

El fin

Me alegraría saber sobre su proceso de trabajo, los pasos que suele dar en sus proyectos personales o cómo su proceso es diferente mientras trabaja en equipos. Me encanta ver los espacios de trabajo de otras personas. Y lo más importante, siéntase libre de compartir sus pensamientos sobre todos / pasos adicionales en mi proceso.
 
Estoy publicando más de Tapdaq y mis proyectos personales en Dribbble.
y estaré encantado de escuchar tu opinión en Twitter.