Diseña mejor y más rápido con el prototipado rápido

• Acerca del autor
• Más lecturas en SmashingMag:
• El proceso de creación rápida de prototipos
• Scoping A Prototype
• ¿Qué hay que prototipar?
• ¿Cuánto se debe prototipar?
• Encuentre la historia
• Planifique sus iteraciones
• Elegir la fidelidad adecuada
• El espectro de la creación de prototipos
• Baja fidelidad
• Fidelidad media
• Alta fidelidad
• Selección de un nivel de fidelidad
• Selección de herramientas
• Dos y qué no hacer
• Haga…
• No…
• Más recursos

Acerca del autor

Lyndon Cerejo es un estratega de experiencia de usuario certificado en la práctica de Visualización de Diseño Rápido & de Capgemini, con una exitosa trayectoria con …More aboutLyndon↬

El viejo adagio, «una imagen dice más que mil palabras» captura lo que es el prototipo de interfaz de usuario: usar imágenes para describir miles de palabras de especificaciones de diseño y desarrollo que detallan cómo debe comportarse y verse un sistema. En un enfoque iterativo del diseño de la interfaz de usuario, la creación rápida de prototipos es el proceso de simular rápidamente el estado futuro de un sistema, ya sea un sitio web o una aplicación, y validarlo con un equipo más amplio de usuarios, partes interesadas, desarrolladores y diseñadores.

Hacer esto de forma rápida e iterativa genera retroalimentación temprana y frecuente en el proceso, mejorando el diseño final y reduciendo la necesidad de cambios durante el desarrollo.

Más lecturas en SmashingMag:

• Optimizar su diseño para las pruebas de prototipos rápidos
• Elegir la herramienta de prototipado adecuada
• Prototipado de contenido en el diseño web responsivo
• Resucitar los prototipos de interfaz de usuario (sin crear zombis)

Los prototipos van desde bocetos en papel a simulaciones interactivas que se parecen al producto final. Las claves para el éxito de la creación de prototipos rápidos son la revisión rápida basada en la retroalimentación y el uso del enfoque de creación de prototipos adecuado. La creación rápida de prototipos ayuda a los equipos a experimentar con múltiples enfoques e ideas, facilita la discusión a través de elementos visuales en lugar de palabras, asegura que todos comparten un entendimiento común y reduce el riesgo y evita que se pierdan requisitos, lo que conduce a un mejor diseño más rápido.

El proceso de creación rápida de prototipos

La creación rápida de prototipos implica múltiples iteraciones de un proceso de tres pasos:

1. Prototipo Convertir la descripción de la solución por parte de los usuarios en maquetas, teniendo en cuenta los estándares de experiencia del usuario y las mejores prácticas.
2. Revisar Compartir el prototipo con los usuarios y evaluar si satisface sus necesidades y expectativas.
3. Perfeccionar Sobre la base de los comentarios, identificar las áreas que necesitan ser refinadas o definidas y aclaradas.

El prototipo suele comenzar siendo pequeño, con unas pocas áreas clave maquetadas, y crece en amplitud y profundidad a lo largo de múltiples iteraciones a medida que las áreas requeridas se construyen, hasta que el prototipo se finaliza y se entrega para el desarrollo del producto final. La rapidez del proceso es más evidente en las iteraciones, que van desde los cambios en tiempo real hasta los ciclos de iteración de unos pocos días, en función del alcance del prototipo.

Scoping A Prototype

La palabra prototipo suele evocar imágenes de una versión codificada y totalmente funcional de una aplicación o interfaz. Los prototipos rápidos no están pensados para convertirse en soluciones totalmente funcionales, sino para ayudar a los usuarios a visualizar y elaborar la experiencia de usuario del producto final. Teniendo esto en cuenta, al definir el alcance de un prototipo, hay que decidir algunas cuestiones clave antes de comenzar cualquier trabajo de creación de prototipos.

¿Qué hay que prototipar?

Los buenos candidatos para la creación de prototipos son las interacciones complejas, las nuevas funcionalidades y los cambios en el flujo de trabajo, la tecnología o el diseño. Por ejemplo, la creación de prototipos de los resultados de la búsqueda es útil cuando se desea apartarse significativamente de la experiencia de búsqueda estándar; por ejemplo, para introducir la búsqueda por facetas o la capacidad de previsualizar un documento sin salir de los resultados de la búsqueda.

¿Cuánto se debe prototipar?

Una buena regla general es centrarse en el 20% de la funcionalidad que se utilizará el 80% del tiempo; es decir, la funcionalidad clave que se utilizará con más frecuencia. Recuerde que el objetivo del prototipado rápido es mostrar cómo funcionará algo o, en etapas posteriores, cómo será el diseño, sin prototipar todo el producto.

Encuentre la historia

Después de identificar las áreas a prototipar, hágalas coincidir en uno o más escenarios: identifique los caminos coherentes a través de la experiencia del usuario que el prototipo simula. Para un sitio web que vende zapatos, un escenario podría ser «Joe el aburrido» comprando exactamente las mismas zapatillas Nike que compró hace seis meses, mientras que otro escenario podría ser «Sam el explorador» buscando entre las tallas 10 para encontrar un par de Oxfords y un par de mocasines que le interesen.

Planifique sus iteraciones

El prototipo completo no suele construirse en una única iteración, sino pieza a pieza. Un buen enfoque es empezar a prototipar de forma amplia y generalizada y luego profundizar en áreas seleccionadas de la solución. En el caso de un sitio web, esto significaría construir la página de inicio y las páginas de aterrizaje de las secciones principales en la primera iteración (lo que a veces se denomina prototipo horizontal) y luego revisar ese marco. Las iteraciones posteriores podrían profundizar en una o más secciones del sitio web (un prototipo vertical); en el caso de un sitio web de descarga de medios, podría tratarse de los pasos que seguiría un usuario para encontrar un vídeo y descargarlo, o de cómo gestionaría los medios en su biblioteca en línea.

Elegir la fidelidad adecuada

La fidelidad se refiere a lo mucho que se parece un prototipo a la solución final. Existen múltiples dimensiones de fidelidad, y los prototipos pueden situarse en cualquier punto del espectro de cada una de estas dimensiones. Dependiendo de la etapa del proceso de diseño y de los objetivos del prototipo, seleccione la fidelidad adecuada para cada una de las siguientes dimensiones:

• Fidelidad visual (esbozado ↔ estilizado) El aspecto y la sensación son la dimensión más notable de la fidelidad de un prototipo y, si no se seleccionan adecuadamente, pueden desviar las revisiones del prototipo. Si se hace demasiado pronto, los usuarios se centrarán en el diseño visual, lo que no es apropiado en las primeras etapas. Desde el punto de vista visual, los prototipos no tienen que ser perfectos en cuanto a píxeles, sino que deben ser proporcionales; por ejemplo, si la zona de navegación de la izquierda tiene que ocupar una quinta parte de una pantalla de 1024 píxeles, no es necesario que tenga exactamente 204 píxeles de ancho, siempre que se represente proporcionalmente en el prototipo. A medida que el prototipo avanza en el ciclo de diseño, aumente la fidelidad visual según sea necesario introduciendo elementos de estilo, color, marca y gráficos.
• Fidelidad funcional (estático ↔ interactivo) ¿El prototipo revela cómo funcionará la solución (estático) o parece ser totalmente funcional y responder a la entrada del usuario (interactivo)? Esta dimensión distrae menos a los usuarios, pero añadir interactividad en iteraciones posteriores aumenta la fidelidad funcional y permite utilizar el prototipo para las pruebas de usabilidad y la formación y las comunicaciones.
• Fidelidad del contenido (lorem ipsum ↔ contenido real) Otra dimensión que suele distraer a los usuarios es el contenido que se muestra en el prototipo. En las primeras etapas de la creación de prototipos, es útil evitar las líneas irregulares y los textos ficticios, como el lorem ipsum. Sin embargo, a medida que el prototipo se perfeccione, evalúe la necesidad de sustituir el texto ficticio por contenido real para hacerse una idea de cómo afecta al diseño general.

El espectro de la creación de prototipos

Baja fidelidad

La forma más rápida de empezar a crear prototipos es también la más sencilla: poner el lápiz en el papel. Dibujar en papel es un enfoque de baja fidelidad que cualquiera puede hacer; no se necesitan herramientas especiales ni experiencia. Utilizado sobre todo en las primeras fases del ciclo de diseño, el esbozo es una forma rápida de crear maquetas de enfoques y conceptos de diseño y de obtener comentarios de los usuarios. La creación de prototipos en papel es ideal durante la lluvia de ideas y la conceptualización, y puede realizarse en solitario en un cubículo con un cuaderno de bocetos o en grupo con un rotafolio (o pizarra blanca) y rotuladores.

Los prototipos en papel, que se sitúan en el extremo de baja fidelidad del espectro de la creación de prototipos, son estáticos y suelen tener una baja fidelidad visual y de contenido. Esto obliga a los usuarios a centrarse en cómo van a utilizar el sistema en lugar de en su aspecto, y hace que los diseñadores estén más abiertos a los cambios basados en los comentarios de los usuarios.

La creación de prototipos de baja fidelidad se presta a la creación rápida de prototipos. No tiene curva de aprendizaje, pero permite realizar cambios con facilidad y rapidez.

Fidelidad media

A medida que empezamos a utilizar herramientas informáticas como Visio y Omnigraffle para crear prototipos, la fidelidad aumenta en la mayoría de los frentes, dando lugar a prototipos de fidelidad media. Los wireframes, los flujos de tareas y los escenarios que se crean con estas herramientas requieren más tiempo y esfuerzo, pero tienen un aspecto más formal y refinado. Aunque se pueden introducir elementos visuales de marca, colores y estilo, los creadores de prototipos suelen prescindir de ellos y se centran en demostrar el comportamiento de la aplicación. La interactividad puede simularse enlazando páginas o pantallas, pero la fidelidad funcional es, en el mejor de los casos, media. Estos prototipos son los más adecuados para determinar si se satisfacen las necesidades del usuario y si la experiencia de éste es óptima.

Hay dos razones por las que se puede hacer intencionadamente que un prototipo de fidelidad media no parezca un prototipo de fidelidad media:

• La primera es que, al utilizar Balsamiq o plantillas de Visio con bocetos para que el prototipo parezca de baja fidelidad, se obliga a los usuarios a verlo como un borrador o un trabajo en curso, en lugar de un producto pulido y acabado.
• La segunda es que, al dotar al prototipo de una alta fidelidad visual (por ejemplo, en una maquetación exhaustiva realizada en Photoshop), se consigue que el usuario se centre en el diseño visual y el aspecto, incluidos el color, las fuentes, la maquetación, el logotipo y las imágenes.

La velocidad del prototipado de fidelidad media se consigue con plantillas, plantillas y widgets y elementos reutilizables. Se hace más rápido a medida que se domina la herramienta elegida.

Alta fidelidad

Los prototipos de alta fidelidad son los más realistas y a menudo se confunden con el producto final, pero suelen requerir mucho tiempo. Hace unos años, la única manera de crear prototipos de alta fidelidad era codificar con un lenguaje de programación, lo que a menudo requería que el diseñador y el desarrollador trabajaran juntos. Hoy en día, sin embargo, las herramientas de simulación de aplicaciones permiten a los usuarios no técnicos arrastrar y soltar widgets de interfaz de usuario para crear prototipos de alta fidelidad que simulan la funcionalidad del producto final, incluso para la lógica empresarial y las interacciones con la base de datos. Axure e iRise son algunos ejemplos de herramientas de simulación de aplicaciones que pueden utilizarse para crear prototipos de alta fidelidad.

Estos prototipos son apropiados cuando se requiere una alta fidelidad visual y funcional; por ejemplo, cuando se introduce una nueva tecnología (digamos, cuando se pasa de una aplicación de mainframe -sí, todavía existen- a una solución basada en la web. La mayoría de estos prototipos no pueden convertirse en código utilizable, pero sirven de excelente referencia para los desarrolladores. También son útiles para realizar pruebas de usabilidad y formar a los usuarios.

La creación de prototipos de alta fidelidad es relativamente rápida, teniendo en cuenta el nivel de interactividad y fidelidad que implica, y puede acelerarse utilizando herramientas de simulación de arrastrar y soltar. Además, algunas de estas herramientas facilitan la recopilación de los comentarios de los usuarios y la documentación de los requisitos, lo que acelera aún más el proceso de diseño. Aunque no es necesario aprender un nuevo lenguaje de programación, estas herramientas tienen una curva de aprendizaje.

Selección de un nivel de fidelidad

Al elegir la fidelidad del prototipo, no hay un único enfoque correcto. La mayoría de los diseños de nuevos productos se inician mejor con bocetos, para luego pasar a prototipos de fidelidad media o alta, dependiendo de la complejidad del sistema y de los requisitos de las dimensiones de fidelidad.

Al trabajar con un cliente concreto de la industria farmacéutica, pasamos de pizarras blancas a prototipos interactivos que tenían una alta fidelidad funcional y de contenido pero una baja fidelidad visual. Les importaba menos el aspecto y la sensación que el cumplimiento de las directrices corporativas.

Para otro cliente, éste del sector minorista, nuestro prototipo interactivo tenía que tener una alta fidelidad visual y funcional. La fidelidad del contenido no importaba porque iban a reutilizarlo y ya estaban familiarizados con él. Para ellos, el aspecto y la experiencia interactiva importaban más porque era su primera implementación de SharePoint, y querían que el portal tuviera un aspecto «no SharePointy».

Selección de herramientas

Dependiendo de su enfoque, tiene una amplia variedad de herramientas para elegir. Dan Harrelson ha recopilado una lista de herramientas de prototipado populares en el blog de Adaptive Path.

Cada herramienta tiene su propio conjunto de características y puntos fuertes. En función de sus necesidades y de los requisitos de los proyectos en los que trabaja, evalúe qué herramienta sería la más adecuada. Estas son algunas de las preguntas que hay que tener en cuenta a la hora de evaluar las herramientas:

• ¿Cómo de fácil es aprender y utilizar la herramienta?
• ¿Es flexible para soportar prototipos para aplicaciones web, empaquetadas y personalizadas, así como para aplicaciones de escritorio y móviles?
• ¿Hay un repositorio de plantillas, stencils o widgets reutilizables disponibles?
• ¿Cómo de fácil es compartir el prototipo con otros para su revisión? ¿Se pueden capturar sus comentarios con la herramienta?
• ¿Cómo de fácil es hacer cambios sobre la marcha o incorporar comentarios?
• ¿Tiene alguna función de colaboración, como permitir que varias personas trabajen en él al mismo tiempo?
• ¿Cuáles son las condiciones y los costes de la licencia?

Dos y qué no hacer

Para empezar, he aquí algunos puntos que hay que tener en cuenta sobre el prototipado rápido eficaz:

Haga…

• Trabaje en colaboración con los usuarios, las partes interesadas del negocio y de las TI durante la creación rápida de prototipos. Además de aportar valiosos comentarios, también adquieren un sentido de propiedad del producto final.
• Evite la «fluencia del prototipo» estableciendo expectativas para el proceso, incluidas las que afectan al propósito, la fidelidad, el alcance y la duración. Recuerde a todo el mundo, incluido usted mismo, que la creación rápida de prototipos es un medio para conseguir un fin, no un fin en sí mismo.
• Cuando cree prototipos y simulaciones interactivos de alta fidelidad, incorpore retrasos realistas (por ejemplo, para refrescar la pantalla o pasar por los pasos de una transacción), de modo que los usuarios no esperen tiempos de respuesta instantáneos del producto final.
• Reutilizar, reutilizar, reutilizar. En el caso de la creación de prototipos por ordenador, esto significa guardar plantillas, plantillas, patrones y widgets reutilizables para futuros proyectos.
• Lo más importante es comenzar cada sesión de revisión de prototipos con la advertencia de que esto es sólo un prototipo, una maqueta, no la solución real. Esto recuerda a los usuarios que se trata de un trabajo en curso, fomenta la retroalimentación y, en el caso de los prototipos de alta fidelidad, evita que los usuarios lo confundan con una solución de trabajo.

No…

• No cree prototipos de características o funcionalidades que no puedan implementarse, lo que suele ser un problema con las implementaciones de paquetes de software. En caso de duda, confirme con los desarrolladores antes de empezar.
• No tome cada cambio o solicitud que surja de una revisión del prototipo como un nuevo requisito. La creación rápida de prototipos ayuda a capturar los requisitos perdidos, pero estos nuevos requisitos deben ser evaluados cuidadosamente. Algunos pueden ser implementados, mientras que otros son empujados a una futura versión.
• No comience las sesiones de revisión de prototipos sin directrices claras para la retroalimentación. Sea muy específico sobre el tipo de retroalimentación que está buscando. (Si no es así, prepárese para decir: «No me gusta el azul de la cabecera» o «¿No podemos utilizar este tipo de letra?» o «¿Puede hacer esto más grande, más llamativo, en rojo y con destellos?»
• No sea perfeccionista. En la mayoría de los casos, la creación de prototipos rápidos no tiene que ser 100% perfecta, sólo lo suficientemente buena para que todo el mundo tenga un entendimiento común.
• No haga un prototipo de todo. La mayoría de las veces, no debería tener que hacerlo.

Más recursos

• Si necesita un empujón para empezar a hacer bocetos, pruebe el libro de Dan Roam The Back of the Napkin.
• Aprenda más sobre la creación de prototipos en papel en el libro de Carolyn Snyder Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces.
• Sketchboarding, una técnica para explorar y refinar conceptos.
• ¿Necesitas contenido de baja fidelidad? Genera texto Lorem Ipsum para tu prototipo.
• ¿Quieres que tu boceto en papel parezca de alta fidelidad? Prueba estas plantillas para la web, el iPad y el iPhone.
• Herramientas de esbozo y prototipado para aplicaciones de iPhone
• Simplifica el esbozo y el prototipado en Firefox con el complemento Pencil.
• Plantillas imprimibles en PDF para bocetos, esquemas y toma de notas
• 50 kits gratuitos de esquemas de interfaz de usuario y diseño web, recursos y archivos fuente

(al)