Clase 08 Prototipado Avanzado (Guión de Clase)

Vista previa del material en texto

Clase 08. Prototipado Avanzado
Cómo rediseñar, guía.
El proceso descrito en este artículo funcionará para varios ámbitos de rediseño, desde un nivel de función o vista hasta rediseños completos de aplicaciones. Estas recomendaciones lo ayudarán a evitar problemas y ofrecer valor rápidamente, y se basan en la experiencia que obtuvimos de cientos de rediseños, golpes y magulladuras a lo largo del camino.
Un gran lugar para comenzar es lo que muchos de ustedes conocen como el proceso del “doble diamante”. Le lleva a través de cuatro fases principales para pasar del problema a la solución:
1. Descubrimiento : fomento de la comprensión y la empatía compartidas
2. Definición : identificación de flujos clave, desafíos y puntos débiles
3. Exploración : ideate, sketch, prototipo de baja fidelidad
4. Ejecución : diseño, prueba e implementación iterativos
Un rediseño nunca se hace realmente; es un esfuerzo continuo para mantener la experiencia relevante.
Revisar analisis
Tu objetivo es escuchar y captar los pensamientos y propuestas de todos, pero no lo tomes como una verdad absoluta. Al final, eres el experto que necesita filtrar el ruido y encontrar dónde concentrarse.
Hay muchas actividades que puede realizar para comprender mejor a los usuarios y generar empatía. Los viajes de usuario y las propuestas de valor son beneficiosos, pero no siempre hay tiempo para hacerlos cuando hablamos de algo pequeño. Las personas, por otro lado, son esponjosas y falsas y tienen muy poca aplicación práctica. Una cosa esencial que puede hacer es enumerar los trabajos por hacer. Esto le ayudará a comprender las motivaciones y expectativas del usuario.
Deconstruir el diseño existente
El error número uno que cometen los diseñadores durante el proceso de rediseño es que ignoran por completo e ignoran el diseño actual. Lo peor que puede hacer es tomar el diseño actual y crear uno nuevo según sus preferencias personales. Probablemente hubo un montón de pensamiento e investigación en la creación de la solución original. Su objetivo es inspeccionar cuidadosamente el diseño actual, tratar de comprender cómo funciona y la intención detrás de cada decisión.
Revisar análisis
Una vez que haya reducido su enfoque a algunas áreas clave, necesita conocer el rendimiento del diseño. Dado que estamos haciendo un rediseño, tenemos el lujo de aprender de la analítica y verificar el desempeño real del diseño sin juicios subjetivos. Los datos de uso son el argumento más persuasivo que tendrá cuando necesite justificar sus decisiones de diseño con las partes interesadas y una línea de base que puede utilizar para comparar el rendimiento del nuevo diseño.
No pierdas de vista lo analizado hasta el momento, hemos descubierto necesidades y puntos de dolor que queremos solucionar en el nuevo prototipo:
1. Lean Canva
2. Canva de Propuesta de Valor
3. Mapa de Trayectoria
4. Matriz de Necesidades
5. Matriz de Factibilidad, Viabilidad y Deseabilidad
Revisión de la competencia
Es una de las primeras preguntas naturales que debería venir a la mente. "Bueno, ¿qué están haciendo los demás?" Como sus clientes tendrán que elegir entre su producto y sus alternativas, debe analizar la experiencia que brindan a los clientes. Al revisar la competencia directa e indirecta, busque puntos en común, flujos similares. Defina lo que se considera una experiencia estándar para su caso. 
Cuando se utilizan en el momento adecuado en proyectos, ambos pueden incrementar la velocidad de las iteraciones y mejorar la comunicación en todo el equipo de producto. A pesar de que se utilizan con mayor frecuencia para aplicaciones móviles, los wireflows también son útiles para documentar flujos de trabajo complejos en aplicaciones de escritorio y aplicaciones web. Dado que mostrar una estructura alámbrica de escritorio de pantalla completa para cada paso de un proceso puede desperdiciar mucho espacio si la mayor parte del diseño de la pantalla permanece sin cambios en cada paso, mostrando solo la parte de la pantalla que cambia (como un cuadro de diálogo, modal, filtros o facetas) en cada paso puede ser suficiente para documentar partes relevantes y cambiantes de la interfaz, sin dejar de proporcionar suficiente contexto.
Identificar áreas de problemas clave
Una vez que haya entendido todo claramente con la ayuda de datos de análisis, puede comenzar a identificar áreas de problemas clave con el diseño existente. Esos problemas pueden variar desde problemas de usabilidad hasta flujos visuales, errores, inconsistencias, patrones incorrectos aplicados o soluciones exóticas sin ningún motivo.
Encuentra oportunidades de mejora
Una vez que haya descubierto los problemas, el siguiente paso es encontrar soluciones para cada problema identificado. La investigación y exploración competitivas deberían darle suficiente inspiración.
Plugins para ayudarlo a diseñar con contenido real y organizar el prototipo
En un momento u otro, todos hemos llegado al texto 'Lorem Ipsum' como contenido de marcador de posición en un diseño (¡hay un complemento para eso!), Pero a veces tener datos reales (o más realistas) puede ayudar a probar un diseño o proporcione una descripción más precisa de cómo se verá realmente su interfaz de usuario, ¡especialmente cuando los datos son suyos! El contenido puede ser cualquier cosa, desde nombres, números de teléfono y direcciones hasta avatares de usuarios y otras imágenes. Agregar o actualizar contenido en un diseño complejo también puede llevar mucho tiempo si tiene que completar manualmente docenas de cuadros de texto en su documento.
Complementos de Contenido
Uno de los puntos más demandados es poder obtener un prototipo funcional lo más realista posible. Estos plugins te ayudarán a optimizar el tiempo de trabajo y generar un prototipo con alto nivel de fidelidad visual y de contenido.
	Nombre
	Disponible
	Descripción
	Uso
	Lorem Ipsum
	 
	Optimiza la creación de párrafos de texto para tu app o página web. 
	Seleccione todas las capas de texto para las que desea generar "Lorem ipsum" y luego haga clic en "Generar"; se generará para cada capa de forma única.
	Google Sheets
	 
	Optimiza la carga de datos de las pantallas sincronizando tus hojas de cálculo directamente en Figma y Adobe XD.
	Generar tu hoja de cálculo colocando la información en las columnas y filas. En el programa de prototipado renombrar el layer con el mismo nombre de la columna.Finalmente sincroniza la hoja de estilo.
	Content Reel
	
	Optimiza la creación de prototipos más realistas. Content Reel es otra opción que le permite insertar rápidamente contenido basado en texto en sus diseños. 
	Seleccionar todas las instancias de un componente específico para cambiarlo por uno diferente o cambiar todas las capas con un estilo de texto específico a uno nuevo, entre otros.
	Datavizer
	
	Crea diferentes tipos de gráficos de datos de manera rápida y sencilla. Puedes usar tu propio documento de hoja de cálculo.
	Armar tu hoja de cálculo con los datos que necesites. Luego debes importarlo al plugins y obtendremos el gráfico elegido entre diferentes estilos.
	Chart
	 
	Crea diferentes tipos de gráficos de datos de manera rápida y sencilla. Puedes usar tu propio documento de hoja de cálculo.
	Armar tu hoja de cálculo con los datos que necesites. Luego debes importarlo al plugins y obtendremos el gráfico elegido entre diferentes estilos.
	Map Maker
	
	Optimiza la utilización de mapas para tu prototipo sin necesidad de tener que poner imágenes.
	Elige una dirección y genera automáticamente un mapa para tu prototipo. 
	Fancy Map
	
	Optimiza la utilización de mapas para tu prototipo sin necesidad de tener que poner imágenes.
	Elige una dirección y genera automáticamente un mapa para tu prototipo. 
	Pexels
	
	Incorpora imágenes de excelente calidad a tu prototipo usando la biblioteca de Pexels.
	Busca la imagen que necesites y colócala dentro de tu prototipo.
	StockSolo
	
	Incorpora imágenes de excelente calidad a tu prototipo usando la biblioteca externa.
	Busca la imagen que necesitesy colócala dentro de tu prototipo.
	Multiply
	
	Duplica rápidamente layers en columnas y filas o ambas para generar cuadrículas.
	Deberás elegir la cantidad de columnas y filas en las que quieras que se duplique el elemento o frame.
	Repetir Cuadricula
	
	Duplica rápidamente layers en columnas y filas o ambas para generar cuadrículas.
	 La opción está disponible entre las opciones del Adobe XD (no es plugins).
Trabajo Colaborativo
Si trabajas en UX deberás trabajar en equipo. Estos plugins te ayudarán a mantenerte en contacto con tu equipo de trabajo y no perderte nada.
	Nombre
	Disponible
	Descripción
	Uso
	Figma Chat
	 
	Este complemento le ayuda a interactuar dentro de sus archivos con otras personas.
	Es un chat simple con la capacidad de enviar texto y las selecciones actuales de marcos u otros elementos.
	Comment
	 
	Ambos programas tienen la opción de comentarios para mantenerte en contacto con tu equipo.
	Selecciona donde quieras hacer el comentario y listo, todos podrán verlo.
Organizar, Ordenar y Eliminar
Cualquier persona que trabaje en diseño debe mantener su proyecto impecable. Con estos plugins podrás organizar, ordenar y eliminar lo que necesites de tu prototipo.
	Nombre
	Disponible
	Descripción
	Uso
	Clean Document
	 
	Limpie y organice automáticamente su proyecto. 
	Usted podrá: eliminar layers ocultos y desagrupar grupos con un solo layer.
	ToolKit
	 
	Limpie y organice automáticamente su proyecto. 
	Usted podrá: eliminar layers ocultos y desagrupar grupos con un solo layer.
	Rename It
	 
	Mantén ordenado tus elementos del prototipo. 
	Si bien existe la funcionalidad en FIGMA y Adobe XD esta herramienta incorpora algunos plus.
	Organic Layers
	
	Organiza todas las capas de la página actual según el nombre de la capa; útil para organizar una página de componentes.
	Selecciona los layers y elige cómo ordenarlos.
	Artboard Plus
	
	Organiza todas las capas de la página actual según el nombre de la capa; útil para organizar una página de componentes.
	Selecciona los layers y elige cómo ordenarlos.
	Super Tidy
	
	Organiza todas las capas de la página actual según el nombre de la capa; útil para organizar una página de componentes.
	Selecciona los layers y elige cómo ordenarlos.
	Similayer
	
	Hacer una búsqueda rápida de elementos con las mismas características
	Seleccionar todas las instancias de un componente específico para cambiarlo por uno diferente o cambiar todas las capas con un estilo de texto específico a uno nuevo, entre otros.
	Selection
	
	Hacer una búsqueda rápida de elementos con las mismas características
	Seleccionar todas las instancias de un componente específico para cambiarlo por uno diferente o cambiar todas las capas con un estilo de texto específico a uno nuevo, entre otros.