Diseñando mi Producto Digital

1. Pre-proceso

1.1. Primero, comience con el alma (Obtenga tanta información como sea posible)

Comprender el alma de un proyecto es la base sobre la cual se construye una solución de diseño completa. Esto es bastante abstracto y puede ser difícil de comprender de inmediato, pero dentro del alma están las respuestas a su problema de diseño. Todo lo que diseña se conecta con esta idea, por lo que identificarla es la primera y más crucial parte del proceso de diseño.

Para mí, nada me da más claridad que ver un ejemplo real de trabajo. Proporciona tres o cuatro aplicaciones inspiradoras, porque esto realmente ayuda  a lograr que  pongas ideas sobre la mesa, lo que permite comprender fácilmente lo que te gusta y lo que esperas del diseño terminado.

Si está trabajando con varios equipos, intente pasar tanto tiempo con los desarrolladores en un producto como lo hace con sus colegas diseñadores. La clave para tomar una decisión de diseño efectiva es asegurarse de hablar con el equipo desarrollador tanto como puedas. Siempre hay casos de solución a un problema que surge a través del esfuerzo colectivo y no individual. En resumen, es seguro decir que el objetivo es eliminar tantas preguntas como sea posible antes de pasar al desarrollo.

1.2. Aprenda sobre Personas

Es bueno saber que la vida de nadie comenzará y terminará con su producto, sitio web o aplicación. Siempre hay un contexto antes, durante y después. Considere cómo se siente una persona, para qué está preparada y qué quiere antes de interactuar con su diseño. Estar tan centrado en el ser humano como sea posible. Cuando una persona interactúa con su producto, ¿Qué experimenta y cómo se relaciona con el alma del proyecto? La experiencia que una persona tiene al usar, escuchar, ver y tocar su producto debe reforzar el alma del diseño. En otras palabras: debe saber cómo integrar "lo que hace el usuario" y "lo que hace el proyecto".

Las personas son muy importantes al trabajar en las características del producto, especialmente cuando la solución es polifacética. Le ayuda a comprender para quién está diseñando realmente. Por lo general, trato de obtener alrededor de tres personas. Es mejor tener personas que sean usuarios reales, ya que esto puede ayudarle a identificar problemas mientras chatea o analiza su solución con ellos a través de una discusión telefónica o en persona.

1.3. Configurar objetivos específicos (¿Qué deberíamos rastrear exactamente?)

Creo que la mayoría de los diseñadores / clientes pasan por alto 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. Muchos tienden a sumergirse directamente en píxeles y desarrollar rápidamente la interfaz de usuario del proyecto. Esta no es una buena manera de obtener lo mejor. Si se trata de un nuevo sitio web / aplicación, o una nueva función, asegúrese de establecer objetivos claros de lo que desea lograr.

Como todo es rastreable, hable sobre los puntos específicos que desea rastrear. Por ejemplo, estos pueden variar desde nuevos registros, hasta varios clientes que usan solo Paypal frente a compras con tarjetas de crédito. ¡Siempre asegúrese de saber la altura a la que apunta desde el principio!

1.4. Configurar carpetas de proyecto

Hay un puñado de sitios para inspirarse: Dribble, Behance, Pinterest, etc. Es realmente fácil encontrar proyectos similares en los que piensa trabajar. Además, es posible que descubra que la solución al problema que está experimentando y tratando de resolver ya existe.

Al comienzo de un nuevo proyecto, generalmente configura una carpeta con carpetas llamadas - Archivos de origen, activos e inspiración. Guardo todo lo que encuentro en Internet en la carpeta Inspiración para poder usarlo más tarde y crear un panel de humor básico. Esta carpeta podría llenarse con cualquier cosa, desde temas de Dribbble o incluso estudios de caso completos de Behance.

2.- Dibujar con palabras

Dibujar es ideal para explorar ideas y direcciones. Se trata de poner las cosas en papel, moverse rápidamente y comunicar conceptos. Para dibujar bien, necesitas usar algo de contenido. Las palabras son esenciales para ayudar a los usuarios a realizar sus tareas, y al pensar en ellas mientras dibuja, descubrirá problemas temprano y podrá moverse más rápido más adelante.

2.1. Han descubierto que las piezas de contenido más importantes que debe incluir en los bocetos son:

• Encabezados para páginas y secciones.

• Verbos y sustantivos clave

• Botones y texto de enlace

Use términos que sean claros y al grano, no se preocupe por ser inteligente o insignificante. Para comenzar, involucra a todo el equipo. Los desarrolladores, diseñadores, estrategas de contenido, gerentes de proyecto, investigadores y su equipo de soporte utilizarán diferentes términos para comunicar sus ideas y describir la misma experiencia. Esta diversidad de opiniones (y palabras) es exactamente lo que quieres en esta etapa.

Haga coincidir la fidelidad del contenido con el problema que está tratando de resolver. Si está tratando de calcular un flujo mayor, necesitará saber qué contenido va en cada sección, qué botones lo llevarán a dónde y qué información encontrará en la página siguiente. Escribir un borrador para la descripción de cada sección probablemente no sea importante en este momento. Haga que todos dibujen solos y luego presenten sus ideas al grupo. Este es un buen momento para tener una discusión abierta sobre por qué todos eligieron ciertos términos. ¿El lenguaje refleja cómo piensan los usuarios y las palabras que usan?

2.2. Consolidar el contenido

Si pensamos en el boceto como el paso 1 en el proceso de diseño, Consolidar el contenido es el paso 2. Tomamos nuestras ideas aproximadas y las convertimos en más sólidas e intentamos responder las preguntas que surgieron del boceto. Una actividad que considero realmente útil para obtener estructuras informadas es mapear todos mis elementos de contenido y luego determinar su jerarquía.

2.3. Mapear elementos de contenido

Por elementos de contenido, me refiero a todas las piezas individuales de contenido en una página. Puede usar una herramienta como Mindmeister, escribirlas en una hoja de cálculo o anotarlas en un gestor de notas como Evernote. Encuentro realmente útil tener los elementos de contenido separados de la estructura metálica porque:

Registra todas las cosas posibles que podrían aparecer en una página, especialmente porque todos los elementos rara vez aparecen al mismo tiempo;

Mantiene las maquetas realistas: no es necesario que muestre todos los escenarios posibles o las formas en que la información podría mostrarse en tramas alámbricas; 

Permite a los desarrolladores saber qué piezas de información se están incorporando; establece relaciones de contenido entre diferentes elementos.

2.4. Determinación de la jerarquía de contenido

Una vez que haya enumerado sus elementos de contenido, comience a ordenarlos según las prioridades del usuario y los objetivos comerciales que tenga. Con este ejercicio, es fácil para usted saber si está pensando estratégicamente sobre por qué está poniendo ciertos elementos por encima de otros y también, lo ayudará a proporcionar una razón sólida de por qué se estableció en un determinado diseño y jerarquía de contenido.

2.5. Usar contenido en maquetas de baja fidelidad

Cuando se mude a maquetas de baja fidelidad, debería estar utilizando contenido detallado y realista para todo. Escriba el mejor contenido para su escenario, incluso si sabe que será reemplazado por alguien más adelante. Considéralo un primer borrador sólido. Normalmente uso datos que suenan reales, como fechas reales, horas y nombres. Esto ayuda a las personas a comprender la funcionalidad sin que usted explique demasiado.

Nunca uso lorem ipsum en ninguna etapa del proceso de diseño. No puedo saber si estoy resolviendo el problema correcto, no puedo obtener los comentarios adecuados de mis compañeros y no puedo probar nada con los usuarios si no hay palabras reales en mis diseños. El contenido informa significativamente nuestras decisiones, así que si no uso las cosas reales, termino tratando de crear experiencias mal informadas. ¡Las palabras en la pantalla son esenciales para ayudar a los usuarios a comprender las funciones, encontrar lo que están buscando y realmente realizar sus tareas (esto es especialmente cierto en pantallas pequeñas)! Pensar en el contenido temprano nos da mucho tiempo para recibir comentarios de colegas y usuarios e iterar sobre diferentes opciones.

Esto debería ser evidente, pero evite cualquier contenido de marcador de posición inapropiado o divertido. Si se envía accidentalmente en el futuro, puede erosionar la confianza de los usuarios muy rápidamente.

Reúna todos los contextos que necesita para sentirse confiado en lo que está escribiendo. Hable con los gerentes de proyecto, desarrolladores y expertos en la materia. Lea la documentación de funciones si su empresa tiene alguna. A medida que se esté preparando para pasar a maquetas de alta fidelidad, y haya resuelto sus problemas centrales, querrá pensar en la experiencia de extremo a extremo:

• Puntos de contacto en el producto
• Error de mensajes
• Confirmaciones
• Incorporación de usuario

La baja fidelidad aún significa contenido y diseño de alta calidad.

3. Trabajo / diseño

3.1.Primer borrador

Diseñar es siempre un proceso continuo. Vas a iterar mucho en tu camino hacia un gran resultado. Con el primer borrador en su lugar, la recopilación de los primeros comentarios sigue inmediatamente. 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 obtener sus primeras opiniones 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í.

3.2 Primera prueba interna

Con su primer borrador, puede crear rápidamente un prototipo. 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, estoy más inclinado a elegir personas que no están tan involucradas en el desarrollo. Además, 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 o cómo ofrecer otra característica más. Esto generalmente lleva a un desordenado block de notas. Siempre pienso en mis archivos de origen como si los estuviera creando para otra persona. Uso la regla de que si tienes más de 9 capas en una carpeta, entonces deberías crear una nueva.

3.3. Pon todo en un lienzo

Siempre me ha costado diseñar lindos encabezados con el resto del lienzo en 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.

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.

4.1. Especificaciones

Uno de mis principales objetivos es poder comunicar mis decisiones con el equipo en todo momento 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 Sketch. Siempre es bueno manejar sus diseños con explicaciones de todas las características para que cualquiera pueda tomar su archivo en el futuro.

4.2. Prototipo final

Una de las cosas clave para mí es tener siempre toda la interacción lista en el prototipo. Por lo general, tengo un promedio de 3 a 5 prototipos en el camino hacia el final para esas pequeñas sesiones con compañeros de equipo o para mostrar algunos flujos particulares. Es genial agregar comentarios a partes de sus diseños para ampliar su especificación. Con esto, incluso el redactor puede ir y comprobar fácilmente los píxeles y flujos reales si cada copia y diálogo funciona según sea necesario.

4.3. Vídeos y notas

Cuando no estoy presentando cosas en Hangout al equipo o al cliente, estoy enviando un vídeo de pantalla compartida revisando el prototipo y explicando todo lo que he diseñado. Con esto, puedo confirmar que sé las respuestas a las preguntas que probablemente me hagan antes de la presentación. También es posible imaginar las posibles interacciones con el producto que he decidido diseñar. El uso de vídeos de pantallas compartidas también se puede usar muy bien cuando se trabaja de forma remota con equipos, ya que todos tienen acceso para reproducir toda la interacción pensando en cualquier momento.

4.4. Animar

Para obtener un buen toque final de su diseño, puede usar herramientas como After Effects, Principle, ProtoPie o Framer. Estos son buenos para explicar cómo quiere que esto y aquello se mueva o se mueva.

4.5. Guía de estilo

Otro punto muy importante 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. Además, cómo se verá el estado deshabilitado del botón de envío, dónde colocar la flecha giratoria en la entrada, etc. Es muy fácil para los ingenieros simplemente revisar sus símbolos y estilo uno por uno y cada elemento antes de comenzar a codificar todas las pantallas.

5. Resultados de la prueba

Después de entregar todos los diseños a los ingenieros, cambiamos el enfoque a la última parte del proceso: ¡Pruebas de nuestras decisiones!

6. Haz que funcione para ti

De vez en cuando ajusto estas técnicas según el proyecto en el que estoy trabajando y su alcance. Entiendo totalmente que el mundo real es más desordenado que un proceso paso a paso. Vamos de un lado a otro y, en algunos casos, omitimos algunos pasos para un proyecto y pasamos más tiempo en una determinada fase para otro proyecto.