Cuando se trata de crear prototipos , hay tantas herramientas y métodos que elegir que no es tarea fácil. ¿Cuál es la mejor? No hay «mejor» porque todo depende de lo que necesites en este momento. Aquí van algunas ideas sobre lo que debe considerarse cuando necesites considerar una solución para lacreación de prototipos .
Siempre es bueno estar al día sobre últimas herramientas de diseño y prototipado, solo para ver si alguna de ellas podría mejorar tu flujo de trabajo y permitirte mejores resultados. Hace unos años era más fácil que ahora decidir si una herramienta era útil. Hoy en día, las aplicaciones se están actualizando continuamente, y es algo difícil seguirles el ritmo.
Aquí van algunos puntos a tener en cuenta para elegir la herramienta más adecuada para prototipar
1. Curva de aprendizaje
Los métodos más eficaces de aprendizaje aprovechan los conocientos para que no tengamos que empezar desde cero. Esto es lo que llamamos «transferencia de conocimiento» : Aplicar conocimientos adquiridos previamente a una nueva situación.
También es útil cuando se está aprendiendo a utilizar una nueva herramienta de creación de prototipos : Los que tienen una interfaz familiar y un conjunto familiar de herramientas probablemente será más fácil de aprender que los que son nuevos en todos los aspectos.
Esto es especialmente cierto para Creative Suite de Adobe , en la que cada aplicación está diseñada para parecerse a las demás. Así que los paneles y diálogos y las simulitudes hacen que sea más fácil aprender las nuevas versiones de las aplicaciones o cambiar entre ellas, por ejemplo de Illustrator a Photoshop .
Pero también hay que tener en cuenta cuánto tiempo habrá que invertir en aprender una nueva herramienta para utilizar realmente esa herramienta en el proceso de diseño. la situación ideal sería dedicarle poco tiempo a aprender la herramienta que se va a utilizar con frecuencia o bien todos los días.
2. Apoyo al trabajo en equipo
Una herramienta de creación de prototipos es necesaria para consolidar la retroalimentación de los clientes acerca de los diseños , para que pueda reutilizar la información y así modificar el trabajo realizado, y luego compartir una la última o nueva versión mejorada.
Para lograr esto, se puede pasar las pantallas de diseño a InVision donde el cliente podrá agregar comentarios sobre las características en particular en el lugar exacto al que se refieren . Y de este modo, el diseñador tendrá la oportunidad de responder al comentario o cerrarlo si el problema ha sido resuelto.
Pero si se trabaja en una empresa, entonces lo idóneo es que el cliente se sienta como parte del equipo, por lo que trabajará con los diseñadores como compañeros. Es importante contar con una herramienta que permita a los compañeros de trabajo compartir y subir las diferentes versiones de las pantallas de diseño , para que todos permanezcan en la misma página mientras contribuyen al proyecto. Herramientas como InVision presentan la actividad general de un proyecto en una especie de vista de línea de tiempo, para que se pueda mantener al día y realizar un seguimiento de todos los cambios .
BAJA FIDELIDAD
Cuando lo que se quiere es probar la idea de un producto digital, un diseño de la aplicación de alta fidelidad sobre el diseño no es conveniente, porque te distraerá fácilmente con los detalles que no son relevantes durante esta etapa. Lo más importante es poder navegar de una pantalla a otra, sin preguntarte si los elementos de la interfaz tienen el tamaño o la disposición adecuada. (Es difícil resistir la tentación de alinear elementos, pero no es crucial en este punto.)
A todos nos pasa qué cuando tenemos una idea y vamos directamente al ordenador, a menudo te encuentras haciéndote preguntas como qué tamaño debe ser el documento de diseño o qué colores debo elegir – cuando ni siquiera está definido ni siquiera está el concepto en «el camino correcto» . Es por eso que, en momentos como estos, lo mejor es usar la opción más antigua y básica:
lápiz y papel
3. La idea no es nueva
«¿Pero por qué debemos comenzar con dibujar?» , Podrías preguntarte… La razón es que no se debe quedar atrapado en la precisión de los píxeles en un proyecto al ir directamente al terreno digital es demasiado fácil y costará mucho tiempo a largo plazo. Volviendo a lápiz y papel. Es una manera rápida y fácil de sacar las ideas para empezar a iterar .
Usando lápiz y papel, no se estará preocupado por ninguno de los detalles específicos del diseño que mencioné anteriormente. En cambio, uno puedeconcentrarse en la idea .
Puedo dibujar rápidamente un diseño para reflejar lo que se tiene en mente, y luego, usando una herramienta como, Marvel o POP .
Tomar fotos de éste para construir un prototipo de trabajo que incluyan gestos y transiciones , con el fin de probar algunos flujos básicos. Lo bueno deprototipar de esta manera es que si el concepto falla (pero tienes que seguir trabajando en esa idea…), no te sentirás apegado a tu trabajo, y comenzar de nuevo con un enfoque diferente será mucho más fácil.
Consejo
Si se está diseñando vistas temporales, como alertas, información de herramientas o mensajes de retroalimentación breves, se puede dibujar separados de la interfaz principal . Luego, se corta cada uno de los mensajes con unas tijeras, y se coloca el pedazo de papel encima del diseño principal. De esta manera, se puede tomar una foto con el mensaje, y otra sin éste. Así tendrás dos pantallas por el precio de una y sin tener que dibujar las dos versiones a mano!
MEDIA FIDELIDAD
El lápiz y el papel están bien, pero llega un punto en el proceso de diseño cuando no es suficiente. Cuando se está seguro acerca del concepto central de la aplicación y ya se han hecho algunos prototipos básicos en el papel, se necesita una herramienta diferente para seguir adelante. Normalmente, cuando hablamos de prototipos de fidelidad media, nos referimos a wireframes cuyo propósito principal es transmitir la interacción y la información .
Cuando se desea diseñar wireframes, lo más idóneo es utilizar la información real tanto como sea posible . Sin embargo, no siempre se tienen todos los datos a nuestra disposición en esta etapa. Por lo tanto, por lo general se tiene que aproximar el texto final, gráficos y colores, ya que están vinculados a la marca. Pero vale la pena concentrarse en lograr un diseño y una interacción convincente.
Durante esta etapa, se podría utilizar perfectamente Sketch . Esta herramienta es relativamente fácil de usar y nos ayudará a llevar el concepto de diseño del papel al siguiente nivel. Utilizando Sketch, podrá reutilizar fácilmente los elementos de la interfaz de usuario , para que no se tenga que empezar desde cero y beneficiándonos de muchos componentes estándar de interfaz de usuario. También hay muchos componentes de interfaz adicionales que podrás utilizar para crear los diseños, como los que se encuentran en Sketch App Sources .
A medida que el proceso continúa, también se podrá controlar el grado de personalización de esos elementos y decidir dónde hacer una pausa para laspruebas del usuario .
El uso de estos componentes de diseño también es una buena idea si lo que se desea es alinearse con las expectativas y no caer en sobrediseño. Normalmente, diseñar todo desde cero tomará mucho más tiempo (y los desarrolladores tardarán más tiempo, cuando comiencen a implementar nuestro diseño). Es por eso que es mejor reutilizar elementos comunes de la interfaz de usuario, como listas, diálogos, formularios y pestañas.
Pero hay que tener en cuenta que Sketch es una herramienta sólo para Mac ; Así que, si trabajas bajo Windows, tendrás que confiar en otra herramienta como Balsamiq y Omnigraffle son bien conocidos. O bien puedes utilizar un par de nuevas herramientas de diseño de interfaz de usuario están basadas en web (y por lo tanto no necesita ninguna instalación); Gravit y Figma
ALTA FIDELIDAD
Cuando el prototipo se acerca a ser un producto viable, necesitaremos diseñar componentes que antes no eran relevantes , como diálogos infrecuentes, algunos mensajes de retroalimentación (mensajes de error y mensajes que muestran el resultado de una acción), estados vacíos, botones deshabilitados y así sucesivamente…
Básicamente, durante las primeras etapas de la creación de prototipos de baja y media fidelidad, nos concentraremos en la estructura, la información y el flujo y en un pequeño conjunto de casos de uso básico . A medida que el diseño madura, deberemos considerar más:
- Casos de uso adicionales (a menudo, menos frecuentes);
- Casos puntuales y contingencias (por ejemplo, ¿qué sucede en un flujo de salida si se rechaza una tarjeta de crédito?);
- Prevención y manipulación de errores.
Todos estos casos de uso son importantes a considerar para un buen UX , pero no deben ser las primeras cosas que diseñamos. Comencemos con los casos de uso básico y centrándonos en los aspectos más relevantes y destacados del diseño. A continuación, incluimos el resto de las condiciones para completar yvalidar el diseño .
En esta etapa, entonces, es cada vez más importante elegir una herramienta que nos proporcione una fidelidad alta sobre los componentes del diseño , para que se pueda determinar el aspecto y el comportamiento de cada uno de los elementos de la interfaz de usuario .
En esta fase, se puede usar Axure para este tipo de tareas. De hecho, cada vez es más utilizada por las empresas. Es una herramienta de gran potencial, se utiliza características como condicionales, que te permiten mostrar y ocultar diálogos, banners y otros bloques temporales de información, dependiendo de la interacción del usuario . Esto es muy útil para minimizar el número de pantallas que se diseñarán completamente desde cero.
Hasta ahora nos hemos centrado principalmente en diseños estáticos. ¿Y la animación? Esto se está volviendo cada vez más importante, no sólo porque la animación se puede encontrar en todas partes en las interfaces modernas, sino también porque es muy difícil comunicarse con el resto del equipo cómo desea algo para moverse o volver sin mostrarlo .
Cuando se trata de prototipos de animaciones, micro-interacciones y transiciones , se debe dividir las herramientas de prototipado en dos grupos:
- Herramientas que tienen UIs familiares y que no requieren que aprendas ningún código;
- Herramientas que requieren al menos unas pocas líneas de código.
En el primer grupo, han aparecido algunas nuevas herramientas, como Pixate ,Principle y Flinto . En muchas situaciones, se puede utilizar estas herramientas para prototipar no toda la aplicación, sino sólo un subconjunto de pantallas, para ver cómo se mostrarán los diferentes elementos o cómo pasar de un estado (o pantalla) a otro .
Si se desea ir un paso más allá, se puede optar por el segundo grupo. Este conjunto de aplicaciones puede parecer menos familiar para los diseñadores, pero tendrá un control más preciso sobre las animaciones. Además, en muchos casos, se puede utilizar componentes nativos para lograr un resultado más realista, lo que facilita el paso del prototipo al código final . Herramientas de este tipo tenemos Framer , Facebook Origami cuyo acompañante Origami Studio , que te permitirá exportar fragmentos de código que se podrán enviar a los desarrolladores.
Para iOS, se puede utilizar Interface Builder que te permite diseñar interfaces que utilizan componentes nativos de iOS en un entorno visual. (Esta solución está completamente libre de código). Y Para Android, tenemos Android Studio .
4.Integración con su flujo de trabajo
Otro punto a considerar al elegir una herramienta de creación de prototipos es lo bien que se ajusten al proceso de diseño y otras herramientas que se utilizan regularmente. El prototipado es parte de un proceso mucho más amplia que incluye: investigar a los usuarios, probar, recopilar métricas, comunicar la idea a las partes interesadas y compartir diseños con los desarrolladores para su implementación final .
Es probable que no encuentre una herramienta que lo haga todo, pero las herramientas de creación de prototipos deberían al menos ayudarnos a movernos a través del proceso sin problemas, especialmente cuando se espera que iteren en plazos muy ajustados.
Por ejemplo, si se está diseñando en Photoshop, Illustrator o Sketch, sería genial si el software de creación de prototipos pudiera utilizar directamente los archivos producidos por estas aplicaciones sin necesidad de exportar los recursos por separado y luego construirlo todo desde cero para crear las interacciones.
Uno de los últimos pasos en la construcción de un prototipo es probarlo y recopilar información (gestos, taps y respuestas) de usuarios reales para que pueda mejorar el producto . Herramientas como InVision y Marvel se conectan con Lookback lo que nos permitirá probar la aplicación y grabar vídeo al mismo tiempo, para que se pueda analizar los datos con el resto del equipo.
5. Facilidad de uso y comodidad
¡Y para concluir, el cómo te hace sentir el utilizar una herramienta de prototipos determinada es lo más importante! Si la vas a estar usando todos los días -y a veces incluso los sábados y domingos, si eres un profesional independiente, – sabemos lo importante que es sentirse bien, ¿verdad?
Consejo
Busca una herramienta que te satisfaga, no una que haga que su trabajo sea más difícil, te coloque obstáculos en tu camino, te frene, añada pasos adicionales o te oblige a encontrar nuevas soluciones.
Conclusión
Teniendo en cuenta que todas las herramientas de diseño y prototipado que están disponibles hoy en día (y ni siquiera se han mencionado todas), te harían sentirte intimidado. Tal vez por eso todos estamos esperanzados en que aparezca «una herramienta para gobernar todo» – una aplicación que nos permita crear todo tipo de diseños e incluso hacer los prototipos.
De alguna manera, estamos empezando a ver algo de esto con Adobe Experience Design CC (una nueva herramienta de diseño que te permite vincular entre pantallas de diseño) y Sketch (cuando se utiliza con complementos como Craft Prototype para interacciones y AnimateMate para animaciones).
¿Este es el futuro de las herramientas de diseño y prototipado? si es esta la dirección, podríamos terminar con una herramienta demasiado compleja…lo mejor es que existan diferentes herramientas y utilizarlas dependiendo de la ocasión. Una de las cosas más importantes es identificar qué herramienta es la más adecuada para el trabajo dado .
En cualquier caso, no hay que obsesionarse tanto con las herramientas. Se supone que nos ayudan a dar forma a nuestras ideas; No debemos determinar o restringir cómo nuestros productos se verán o se comportarán .
También hay que entender que las directrices anteriores serán bastante inútiles si la empresa para la que se trabaja te obliga a utilizar una herramienta en particular. Si ese es el caso, está en nuestra mano intentar persuadir al equipo por lo menos intentar algo diferente, si el razonamiento es claro y lógico. Y con suerte, tal vez algunos de los puntos anteriores apoyarían tu argumento.
Por último, hay que tener cuidado cuando alguien te diga que una determinada herramienta es «la mejor» o «la más fácil de aprender» . Esto es altamente subjetivo, y es algo que se debe descubrir por nuestra cuenta. Al final, tú, como yo y todos los demás, somos diferentes.
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
