¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros y videos
  2. Diseño UI-UX
  3. UX
Extrait - Diseño UI-UX Diseño de sitios web y aplicaciones con y para los usuarios
Extractos del libro
Diseño UI-UX Diseño de sitios web y aplicaciones con y para los usuarios Volver a la página de compra del libro

Fundamentos de la creación de prototipos

Origen de los prototipos

La creación de prototipos nació mucho antes de la era digital y las interfaces vinculadas a pantallas. Los prototipos se remontan a la historia de la creación. Antes de empezar a trabajar, los pintores del Renacimiento estudiaban los personajes y escenarios haciendo bocetos, bosquejos y luego borradores. En los ámbitos técnicos, los prototipos también han desempeñado siempre un papel fundamental en el proceso de fabricación. Si nos fijamos en el periodo renacentista, fértil en el aspecto técnico, podemos, por ejemplo, consultar los planos y estudiar las maquetas de las máquinas inventadas por Leonardo da Vinci.

Si nos remontamos en el tiempo vemos que los ejemplos de creación de prototipos se han hecho omnipresentes, sobre todo desde que entramos en la era industrial. Por eso, en la industria automovilística actual, empezamos por imaginar un vehículo a partir de los bocetos de los diseñadores, y muy pronto pasamos a hacer esculturas del vehículo, luego maquetas a escala y, por último, prototipos funcionales no aptos para la circulación que culminan en prototipos aptos para la circulación.

images/01OW01.png
images/01OW02.png
images/01OW03.png

El diseño de un vehículo se basa en la creación de prototipos en todas las fases de desarrollo del proyecto

En el campo de la arquitectura, los planos y proyecciones de un proyecto de construcción...

Función actual de los prototipos

La creación de prototipos se desarrolló considerablemente durante la era industrial. El principal motivo fue la necesidad de aplicar ergonomía funcional. La interacción hombre-máquina es, naturalmente, el principal problema de las cuestiones de producción: las máquinas son alimentadas, accionadas y controladas por personas. Por eso la productividad está directamente vinculada a la adecuación entre herramienta, operador, función y contexto.

Así pues, el interés por la creación de prototipos ha pasado de la simple representación de un proyecto a servir de soporte para el ensayo y la experimentación, es decir, las pruebas de los dispositivos correspondientes.

Por lo tanto, el prototipo ya no se utiliza simplemente para representar un dispositivo, sino para mostrar cómo funciona. Todo ello con el fin de medir su eficacia y el nivel de satisfacción expresado por el usuario que lo prueba.

Con la generalización de la informática, los usuarios suelen trabajar sobre una representación calcada de la realidad. Aunque hoy en día las metáforas básicas WIMP (ventanas, iconos, ratón y menús) se aceptan de manera universal y se utilizan casi instintivamente, no siempre ha sido así.

No olvidemos que en los inicios de la autoedición, durante las sesiones de formación...

UI-UX y creación de prototipos

Empecemos por aclarar las definiciones de lo que entendemos por las siglas UI-UX y qué profesiones están asociadas a ellas.

UI: User Interface significa Interfaz de usuario. El diseñador de UI crea interfaces. Tiene conocimientos sólidos de ergonomía, pero ante todo es un diseñador gráfico que también posee conocimientos básicos de programación HTML.

UX: User Experience significa Experiencia de Usuario. En inglés, el término Experience se asocia principalmente a las sensaciones, a la satisfacción del usuario y a la evaluación que hace de su experiencia en términos de facilidad y comodidad. Un diseñador de UX no solo crea recorridos satisfactorios, sino que sobre todo mide la experiencia de los usuarios que siguen estos recorridos. 

La UI se centra en la creación, mientras que la UX se dedica principalmente a la medición.

En el caso de estas dos profesiones complementarias, es evidente que la creación de prototipos es una preocupación fundamental. No se pueden diseñar interfaces o recorridos de usuario sin antes haber creado los prototipos y realizado las pruebas correspondientes.

Hay que señalar que se está desarrollando de forma significativa una profesión nueva: Diseñador de interacción. Se trata de un diseñador de UX especializado en interacciones...

Objetivos del prototipo

No definir los objetivos asignados a los prototipos significa invertir tiempo y recursos en producir prototipos ineficaces. Así que no vamos a hacer prototipos genéricos, sino que hay que empezar por especificar para qué se van a utilizar.

1. Perfeccionar el diseño

  • Encontrar ideas nuevas

  • Probar un recorrido o tarea

Los prototipos serán muy diferentes en función de sus objetivos. Pueden ser prototipos de gran exactitud para obtener información detallada sobre la naturaleza precisa de las interacciones, o prototipos más resumidos para abrir la puerta a la innovación.

2. Diseñar sin limitaciones técnicas

Con prototipos específicos en distintas fases del proyecto, no será necesario programar un sitio o una aplicación para probarlos. Así podrá concentrarse en la experiencia del usuario y no en la viabilidad técnica, evitando las restricciones impuestas por el código que tienen un efecto perjudicial en la ergonomía si el punto de vista es demasiado limitado.

3. Desarrollar el trabajo en colaboración

Siempre hay múltiples partes interesadas, por eso es vital romper silos y estimular la colaboración. Los prototipos pueden utilizarse como herramientas relacionales para establecer procesos claros que todos entiendan y basados en las premisas del proyecto.

4. «Vender» ideas

El sistema tradicional consistía...

Creación de prototipos en la gestión de proyectos web

¿Cuándo debe incorporarse una fase de creación de prototipos y las pruebas asociadas a la gestión de un proyecto web? La respuesta es muy clara: desde el inicio del proyecto.

Como veremos, la creación de prototipos es pertinente desde la conceptualización, durante las fases de creación. Incluso cuando se diseña un sitio «escaparate» sencillo, definir el contenido, organizarlo y ponerle nombre, por ejemplo, puede ser mucho más fácil implantando la creación de prototipos del tipo card sorting (categorización por tarjetas), como veremos más adelante.

Los proyectos web ya no se gestionan según el modelo estrictamente secuencial que predominaba en el sector de la construcción y las obras públicas, sino que promueven:

  • el desarrollo paralelo,

  • los métodos Ágil,

  • el modo colaborativo.

Las fases de un proyecto siguen el siguiente orden:

1. Diseño previo

2. Diseño estructural

3. Recorridos de usuario

4. Diseño gráfico

5. Desarrollo informático

Cada una de estas fases tiene su propia creación de prototipo funcional adaptado.

Creación de prototipos y diseño centrado en el usuario

Estas fases convergen en el principio de funcionamiento iterativo practicado por el diseño centrado en el usuario.

El desarrollo de sitios web, aplicaciones o cualquier producto interactivo se encuentra con estos conocidos problemas:

  • El cliente no es el consumidor final.

  • Las ideas suelen estar preconcebidas.

  • La comunicación se centra en el producto.

  • Las estructuras jerárquicas dictan las decisiones.

Pero sabemos que nuestro usuario no comparte nuestra perspectiva ni nuestra experiencia, y a menudo ni siquiera sabe lo que intentamos enseñarle.

Por lo tanto, tenemos que aceptar que no somos el usuario al que nos dirigimos y que tenemos que probar nuestras propuestas en cada fase del proceso de diseño para validar las soluciones consideradas mediante prototipos.

La creación de prototipos y los procedimientos de prueba asociados permitirán:

  • validar el diseño,

  • decidir entre opciones,

  • optimizar la creación y

  • reducir los costes de desarrollo.

Creamos un prototipo de la solución propuesta y lo probamos. A partir de la información recopilada, optimizamos las áreas de mejora y validamos su implementación. Si todo es correcto, salimos del bucle y pasamos a la siguiente fase. Si falla, retomamos el proceso al principio del bucle y creamos un prototipo de una solución alternativa.

images/01OW04.png

Una vez validada la optimización, podremos...

Creación de prototipos y estrategia Ágil

Para entender cómo se integra de manera natural la creación de prototipos con la estrategia Ágil, conviene recordar los principios fundamentales.

1. Enfoque Ágil

  • Ágil es mucho más un enfoque que un método. El propósito de la estrategia Ágil nunca ha sido añadir una capa organizativa.

  • Este enfoque sustituye el concepto gestión de producto por gestión de proyecto.

  • El enfoque Ágil se basa en la práctica empírica en lugar de la predictiva.

  • El enfoque Ágil favorece la implicación frente al contrato.

  • El enfoque Ágil se basa en la adecuación entre requisitos a funcionalidad.

Todos estos principios hacen que, de manera natural, la creación de prototipos y la realización de pruebas sean herramientas obvias en esta estructura.

2. El manifiesto Ágil

El manifiesto Ágil cuestiona las prácticas de gestión tradicionales:

  • En lugar de centrarse en procesos y herramientas, se da prioridad a las personas y sus interacciones.

  • En lugar de una documentación exhaustiva, se despliega software operativo colaborativo.

  • Se da prioridad a colaborar con los clientes en lugar de limitarse a negociar contratos.

  • Seguir un plan va acompañado de la adaptación al cambio.

La creación de prototipos y la realización de pruebas convergen con el enfoque Ágil...

Fidelidad de los prototipos

Debemos aclarar una ambigüedad en el concepto de fidelidad de un prototipo: la verdadera fidelidad de un prototipo no está vinculada a su nivel de acabado gráfico.

De hecho, el prototipo se basa en dos componentes: el acabado gráfico y la capacidad de modelar la interactividad.

Un prototipo en papel elaborado a partir de varias maquetas abreviadas de tipo Wireframe (maquetas de estructura alámbrica) puede ofrecer una representación muy fiel de la realidad de un recorrido de usuario durante una sesión de pruebas.

Por otro lado, es indiscutible que una maqueta terminada en Photoshop estará lograda gráficamente, pero no necesariamente ofrecerá una representación clara de las interacciones.

images/01OW06a.png

Se puede ver que un prototipo puede tener fidelidad baja en cuanto a los gráficos y, sin embargo, alta para las interacciones

Por abuso del lenguaje, a veces los prototipos con un diseño gráfico más básico se denominan de «baja fidelidad».

Pero en la práctica, los prototipos que representan fielmente el proceso que se va a probar son todos de alta fidelidad, sea cual sea su nivel de acabado gráfico.

Por el contrario, los prototipos de baja fidelidad, incluso con un nivel alto de acabado gráfico, no representan fielmente los procesos interactivos. El motivo puede ser porque aún no se ha trabajado sobre el tema....

Prototipos en papel y prototipos en estaciones de trabajo

En lo que respecta al diseño web y de aplicaciones, podemos distinguir dos tipos de prototipos: los prototipos en papel, destinados a ser probados en entrevistas, y los prototipos funcionales que simulan interacciones durante las pruebas en diversas estaciones de trabajo o periféricos.

Los prototipos en papel pueden adoptar la forma de:

  • maquetas de estructura alámbrica,

  • bocetos,

  • diagramas,

  • diseño avanzado de interfaces.

Los prototipos funcionales son aplicaciones que pueden consultarse en una interfaz para simular, por ejemplo:

  • recorridos completos,

  • secuencias de recorridos,

  • interacciones sencillas.

La ventaja de los prototipos en papel es que son más rápidos y baratos de diseñar que las simulaciones de estación de trabajo generadas con software. Por lo tanto, es mucho más fácil probarlos, sin equipos de consulta específicos y por eso en una fase más temprana del proceso de diseño.

Además, el bajo nivel de acabado gráfico de los prototipos en papel permite que las pruebas se centren en las interacciones fundamentales sin distraerse con consideraciones estéticas.

Las lecciones que pueden extraerse de pruebas sencillas basadas en prototipos de papel son notablemente significativas.

El entorno multicanal

Ya no diseñamos solo para la web, sino cada vez más en el marco de aplicaciones para dispositivos móviles. Ahora los sitios web y las aplicaciones se consultan en dispositivos que indudablemente tienen características comunes, pero a veces tienen variaciones importantes.

Por lo tanto, tendremos que evaluar el público objetivo y sus prácticas para determinar qué prototipos diseñar. Por ejemplo, para una misma aplicación podremos crear y probar prototipos que representen smartphones y tabletas por separado, porque más allá de las diferencias de tamaño de las pantallas, las funcionalidades nativas variarán. Si consideramos un smartphone, un enlace podrá activar una llamada telefónica pero eso no ocurrirá en una tableta.

Cuando consideramos la fase de pruebas de los prototipos funcionales, también es recomendable tener en cuenta el entorno del usuario. Un prototipo de aplicación móvil en un smartphone no se probará en un ordenador de sobremesa, sino en un dispositivo móvil en condiciones lo más parecidas posibles a la realidad: movimiento, entorno, ruido ambiental, iluminación, etc.

Así nos aseguramos de no producir interfaces que, aunque inteligentes y con recorridos fluidos, resulten ilegibles para el usuario en determinadas condiciones de consulta e iluminación.

images/01OW05.png

Un prototipo probado...