Cómo hacer un prototipo del diseño de una aplicación

Los dispositivos móviles emergentes plantean nuevos desafíos a los diseñadores de UX que provocan cambios significativos en los métodos de trabajo tradicionales. Durante más de una década, los wireframes y las maquetas han sido quizás las formas más predominantes de simular y validar la interfaz de usuario, el diseño, la navegación, la estructura, el contenido y los elementos de diseño de un sitio web.

¿Pueden los wireframes y las maquetas simular suficientemente las aplicaciones móviles como lo hacen los sitios web? ¿Deberían los diseñadores y los profesionales de UX seguir trabajando con los mismos procesos y herramientas que utilizan para los sitios web cuando diseñan aplicaciones móviles?



En este artículo, compararemos el diseño de sitios web y el diseño de aplicaciones móviles en paralelo para identificar las diferencias fundamentales de las dos disciplinas. También examinaremos las técnicas utilizadas para crear prototipos de un sitio web (por ejemplo, bocetos, maquetas, wireframes) e investigaremos si estas técnicas son adecuadas para la creación de prototipos de aplicaciones móviles.



01. ¿Para quién prototipamos y por qué?

Teniendo en cuenta la corta historia de la World Wide Web, se podría argumentar que el diseño web y especialmente el diseño móvil están todavía en su infancia. Al tratar de hacer frente a esta industria en constante cambio, nosotros, los diseñadores y codificadores, a menudo tenemos que inventar y descubrir nuevas formas de crear sitios web y aplicaciones móviles. Un paso importante en el proceso de diseño web y móvil es la creación de prototipos.

Desde el nacimiento de la revolución industrial, la creación de prototipos ha sido uno de los pasos iniciales en el proceso de construcción de cualquier producto. Un prototipo es una muestra o modelo temprano construido para probar un concepto o proceso, o para actuar como un objeto para ser replicado o aprendido. El paso de creación de prototipos a menudo se omite debido al costo adicional y al esfuerzo que agrega al ciclo de vida de un proyecto.



Sin embargo, hoy en día es ampliamente aceptado en el mundo del desarrollo que subestimar esta parte vital del proceso de diseño y construcción puede conducir a: falta de comunicación entre desarrolladores y clientes; trampas sobre presupuestación; y productos de mala calidad. Por lo tanto, podemos argumentar razonablemente que la creación de prototipos es imprescindible.

Hay varias razones por las que la mayoría de los profesionales han hecho de la creación de prototipos un paso básico en el proceso de desarrollo. Los siguientes son los más importantes:

  1. Para probar la idea general de la solución propuesta
  2. Para probar la navegación y la estructura general del contenido
  3. Para probar la interfaz de usuario (UI), el contenido y el contexto, y la funcionalidad principal
  4. Para probar la apariencia y la estética visual.
  5. Realizar pruebas de usuario para mejorar la usabilidad y la experiencia del usuario.
  6. Para investigar posibles escollos con mucha antelación

02. ¿Y para quién prototipamos?

  1. Partes interesadas: el cliente o ejecutivos comerciales, tomadores de decisiones que necesitan aprobar el diseño, el diseño, el contenido y la funcionalidad antes de la codificación e implementación.
  2. Desarrolladores y codificadores que necesitan comprender claramente, hasta el más mínimo detalle posible, qué construir antes de lanzarse a la codificación.

El valor subyacente de la creación de prototipos primero, en lugar de llegar a la construcción de lo real de inmediato, es probar, corregir errores y validar las decisiones clave de diseño con los usuarios sin incurrir en costos de desarrollo. Costo de prototipos. Pero el costo de un prototipo es mínimo en comparación con el costo de la reingeniería cuando está a la mitad o se termina con la parte de codificación. En consecuencia, el argumento más válido que se puede hacer en cuanto a por qué necesitamos prototipos es minimizar tanto el costo como el riesgo y, al mismo tiempo, lograr la máxima eficiencia y calidad.



03. Técnicas de creación de prototipos de sitios web

Hay varias técnicas y herramientas para adoptar y utilizar. Los más populares son bocetos, wireframes, maquetas y codificación.

La decisión de qué método de creación de prototipos debemos utilizar cuando queremos visualizar un sitio web no siempre es una cuestión de elección o preferencia. Por lo general, depende del tamaño y la naturaleza del proyecto, así como de las limitaciones de tiempo y presupuesto que pueden exigir un método u otro.

La elección de una técnica para un proyecto en particular está determinada por los siguientes criterios:

  1. Hora
  2. Fidelidad, que puede variar desde baja fidelidad (líneas y cuadros dibujados a mano) hasta alta fidelidad (diseño de píxeles perfectos)
  3. Si necesita compartir el prototipo con miembros del equipo y partes interesadas
  4. Si debe usarse para pruebas de usuario y pruebas de usabilidad

Técnicas de creación de prototipos de sitios web

Técnicas de creación de prototipos de sitios web

Cada método tiene un propósito y puede ser la mejor opción para un determinado tipo de sitio web. A veces es necesaria una combinación de técnicas para producir un resultado óptimo.

04. Web vs móvil: tan similar, pero tan diferente

Las técnicas anteriores son excelentes para el diseño web y realmente pueden acelerar y mejorar significativamente el proceso de desarrollo, por lo que es razonable considerar el uso de las mismas técnicas para las aplicaciones móviles. Después de todo, ¿las aplicaciones móviles son tan diferentes de los sitios web? Ambos: son digitales, requieren la interacción del usuario, presentan contenido y tienen un propósito. Entonces, ¿son realmente tan diferentes? ¡Bueno, sí!

mejor cómo dibujar cómics

Las aplicaciones móviles son muy diferentes de los sitios web en muchos aspectos. Considere las siguientes propiedades muy básicas: las aplicaciones web se ejecutan en diferentes dispositivos que tienen diferentes sistemas operativos, son de diferentes tamaños y tienen diferentes características. Los sitios web se ejecutan en un navegador web de cualquier sistema operativo en pantallas generalmente grandes de alta resolución. Las aplicaciones móviles reciben información de una pantalla táctil. Los sitios web reciben información de un teclado y un mouse. Y la lista continúa.

Tabla comparativa de sitios web y aplicaciones móviles

Tabla comparativa de sitios web y aplicaciones móviles

05. Prototipos móviles: un nuevo paradigma

Entonces, volviendo a la pregunta inicial, ¿se aplican los mismos principios para la creación de prototipos móviles que para la creación de prototipos web? ¿Deberían ser las mismas las técnicas utilizadas para crear prototipos? No. La creación de prototipos móviles es un paradigma completamente nuevo. Simplemente no podemos producir prototipos realistas para aplicaciones móviles con bocetos, wireframes y maquetas por tres razones simples pero fundamentales: interacciones, animaciones y pruebas de dispositivos.

06. Interacciones

Las interacciones son el factor clave que hace necesario este cambio. Al crear una estructura alámbrica o una maqueta de un sitio web, las interacciones son mínimas. La mayoría de las veces solo tenemos un evento: el clic, los resultados de clic en un cambio de página sin transiciones. Las animaciones (al menos hasta hace poco) eran inexistentes. Por lo tanto, visualizar o hacer prototipos de un sitio web es posible incluso con bocetos dibujados a mano con una hoja de papel para cada página y una palabra o explicación simple para cada interacción.

Sin embargo, las aplicaciones móviles introducen un mundo completamente nuevo y diferente de interacciones al permitir a los usuarios interactuar con múltiples eventos táctiles como tocar, mantener presionado, deslizar, pellizcar, hacer zoom. La misma pantalla (o página) puede reaccionar de manera diferente a diferentes interacciones. Se puede aplicar más de una interacción a un elemento de la interfaz de usuario. Tomemos como ejemplo la última versión de la aplicación de Twitter. Si hacemos clic en el icono de la pestaña 'Yo', nos lleva a la pantalla de descripción general de la cuenta. Pero si deslizamos nuestro dedo sobre ese mismo ícono, lo lleva a la página de cambio de cuenta. Y ese es solo un ejemplo simple entre millones. ¿Cómo simularíamos y presentaríamos eso a las partes interesadas con un boceto, estructura alámbrica o maqueta? ¿Cómo simularíamos toques con uno y dos dedos, deslizamientos y todos los demás eventos táctiles?

Un ejemplo de dos interacciones (tocar y deslizar) en el mismo elemento de la interfaz de usuario

Un ejemplo de dos interacciones (tocar y deslizar) en el mismo elemento de la interfaz de usuario

07. Animaciones

Las animaciones como factor contribuyen considerablemente a una mejor experiencia de usuario. Las aplicaciones móviles con espacio de visualización limitado dependen en gran medida de las animaciones para crear respuestas de usuario atractivas y aprovechar el espacio limitado. Los menús que se deslizan en la pantalla, los elementos de la interfaz de usuario que aparecen y desaparecen y las transiciones entre pantallas, son solo algunas animaciones que encontramos en casi todas las aplicaciones. Piense en el menú deslizante de la aplicación de Facebook ahora común. ¿Cómo simularíamos eso con un boceto, estructura metálica o maqueta? ¿Qué pasa con el desplazamiento del menú, las acciones de deslizamiento en los elementos del menú?

Haga clic en la imagen de abajo para ver un prototipo móvil interactivo que simula un menú deslizante creado con Proto.io :

Ver más ejemplos de prototipos interactivos .

08. Prueba de dispositivos

Un aspecto importante de la creación de prototipos son las pruebas. Independientemente de la fidelidad de los wireframes y las maquetas, se pueden probar fácilmente en el dispositivo real, que es el navegador de la computadora. Lo mismo debe aplicarse a los prototipos móviles. Los diseñadores de UX deberían poder probar prototipos móviles en el dispositivo real para el que están diseñados. Al probar, no me refiero solo a ver algunas imágenes en las que se puede hacer clic en el dispositivo real, sino a ejecutar un prototipo interactivo completo de la aplicación móvil. Las pruebas de dispositivos reales son la mejor manera para que las partes interesadas conceptualicen el producto final al tiempo que permiten pruebas de usuario valiosas y en profundidad. La creación de prototipos móviles es una de esas cosas que nos da la ventaja de experimentar un prototipo en el entorno real como si fuera realmente real.

09. Técnicas y herramientas de creación de prototipos móviles

Creo que la creación de prototipos generalmente comienza con un boceto. Es lo más intuitivo que se puede hacer. El dibujo se puede encontrar en casi todas las disciplinas, desde artesanos hasta diseñadores de naves espaciales. Es la forma más rápida de expresar nuestra idea de forma visual, todo lo que necesitamos es lápiz y papel y es una excelente forma de empezar. Sin embargo, a menos que podamos hacer avanzar los bocetos a un estado de creación de prototipos interactivos que pueda probarse en el dispositivo real, no podremos simular cómo funciona una aplicación interactiva.

Entonces, ¿cómo ponemos en acción nuestros bocetos, wireframes y maquetas? Hay varias técnicas que se utilizan en la industria móvil: creación de prototipos en papel, software de presentación tradicional, aplicaciones móviles diseñadas para la creación de prototipos, código fuente y aplicaciones especializadas de creación de prototipos web y de escritorio.

La creación de prototipos en papel requiere tiempo y habilidad, y los prototipos son difíciles de construir y modificar. Puede darnos un buen grado de comprensión sobre cómo funciona la aplicación, pero ciertamente no se puede probar en un dispositivo real.

Los softwares de presentación como Keynote de Apple y Powerpoint de Microsoft admiten algunas animaciones y transiciones. Sin embargo, son herramientas creadas para un propósito completamente diferente. Aquí tampoco es posible realizar pruebas de dispositivos.

Las aplicaciones móviles para tabletas Apple iPad y Google Android diseñadas para la creación de prototipos móviles permiten probar dispositivos reales, que es su principal ventaja. Sin embargo, se limitan a la creación de prototipos de un solo dispositivo y, por lo general, carecen de herramientas para compartir y colaborar. Además, trabajar en un iPad o iPhone para construir un prototipo todavía no es tan rápido y eficiente como lo es en una computadora.

El código fuente ofrece una forma poderosa de crear prototipos, ya que prácticamente no existen limitaciones en cuanto a lo lejos que podemos llegar. Podemos crear un prototipo móvil con HTML5 o con el lenguaje de programación real que vamos a utilizar, como Objective C o Java . Sin embargo, la creación de prototipos con código fuente requiere mucho tiempo y podemos dejarnos llevar fácilmente por los pequeños detalles, terminando dedicando más tiempo del que deberíamos.

Las aplicaciones de creación de prototipos móviles son aplicaciones web o software diseñado específicamente para la creación de prototipos móviles. Estas aplicaciones van más allá de las aplicaciones tradicionales de estructura alámbrica o de maquetas para proporcionar funcionalidad para eventos y gestos táctiles móviles, interacciones, transiciones de pantalla y, lo que es más importante, brindan la capacidad de obtener una vista previa de un prototipo en el dispositivo real.

Técnicas y herramientas de creación de prototipos móviles interactivos

Técnicas y herramientas de creación de prototipos móviles interactivos

Un ejemplo de una aplicación de creación de prototipos móviles de este tipo es Proto.io . Proto.io es una herramienta de creación de prototipos creada específicamente para la creación de prototipos de aplicaciones móviles. Proporciona una forma fácil y rápida de crear prototipos de aplicaciones móviles que se pueden probar en el dispositivo real, al tiempo que admite todas las nuevas funciones móviles únicas como gestos táctiles, animaciones e interacciones múltiples. También proporciona herramientas de colaboración integradas para facilitar la comunicación, la colaboración y el intercambio entre el equipo de desarrollo y el cliente.

Adobe Illustrator deshacerse de la cuadrícula de perspectiva

10. (Wireframes || Mockups)! = Prototipos

En conclusión, la creación de prototipos móviles es un paradigma completamente nuevo. Las técnicas y herramientas tradicionales como bocetos, wireframes y maquetas solo pueden presentar aplicaciones móviles de forma estática. La presentación estática de una aplicación móvil no es suficiente. Los prototipos de aplicaciones móviles deben proporcionar una simulación de la interacción final entre el usuario y la interfaz. Al desarrollar aplicaciones móviles, necesitamos crear prototipos compartibles totalmente interactivos que admitan gestos multitáctiles, permitan pruebas de usuario y pruebas de usabilidad, y que se puedan previsualizar en dispositivos móviles reales.

Para lograrlo, debemos romper con las técnicas tradicionales de creación de prototipos web a las que estamos acostumbrados. Necesitamos comenzar a usar nuevas técnicas y herramientas de creación de prototipos de aplicaciones móviles que puedan satisfacer nuestras necesidades de creación de prototipos de aplicaciones móviles y nos permitan centrarnos en la creatividad y el ingenio. Entonces seremos libres de crear aplicaciones móviles que ofrezcan experiencias de usuario únicas.

Alexis es el arquitecto de producto y director ejecutivo de Proto.io , la plataforma de creación de prototipos de aplicaciones móviles.

¿Me gusto esto? ¡Lee esto!