Proceso del diseño web

Empezar un nuevo proyecto puede ser una experiencia desconcertante, ya que hay que tener en cuenta muchos obstáculos. Para abordar esta tarea con mayor eficacia, el proceso de diseño suele dividirse en tramos gestionables, por ejemplo:

  • Definición del problema,
  • investigación,
  • análisis,
  • creación de prototipos,
  • pruebas,
  • mejora, etc.

Cada etapa tiene su propio conjunto de funciones, métodos, herramientas, resultados y terminología. Es posible que hayas oído hablar de términos como maquetas, prototipos, tableros de ideas, flujos de usuarios, entrevistas con usuarios, personas, etc. Saber lo que significan te ayudará a entender mejor cada etapa, las ventajas de cada método y cómo aplicarlos a tu proyecto.

Design Thinking #

El Design thinking es un proceso iterativo de 5 etapas que incluye fases como empatizar, definir, idear, crear un prototipo y probar. Normalmente, los equipos ejecutan estas fases en paralelo o las repiten iterativamente. El objetivo principal del enfoque del Design Thinking es revisar los problemas, poner a prueba las hipótesis y encontrar soluciones para la creación de prototipos y pruebas, teniendo siempre presentes las necesidades de los usuarios.

Producto mínimo viable (MVP) #

Un producto mínimo viable (MVP) es una versión del producto con las características suficientes para que lo adopten los primeros clientes, que pueden aportar valiosas ideas para mejorar en futuras iteraciones. Es una práctica beneficiosa para las empresas, especialmente para las startups, que les permite averiguar si su idea de producto es funcional, fiable, utilizable y suscita la reacción prevista en el mercado.

Mockups / maquetas #

Generalmente, las maquetas son wireframes a los que se les aplica el diseño visual (colores, imágenes, tipografía). Mientras que los wireframes son imágenes estáticas simplificadas que muestran la estructura y la funcionalidad del producto, las maquetas ayudan a los interesados a visualizar la versión final antes de desarrollar la web final. A diferencia de los wireframes, los mockups contienen contenido real en lugar de texto ficticio y marcadores de posición de imágenes.

Tableros de ideas #

Los tableros de ideas son tableros físicos o digitales que pueden incluir imágenes, paletas de colores, bocetos y otros recursos de diseño para presentar una idea general del futuro producto. Los tableros de ideas suelen crearse para las reuniones con el cliente, con el fin de garantizar que estáis de acuerdo con el aspecto y la sensación del producto final. Esta práctica también ayuda a evitar cambios costosos en las fases finales del proceso de diseño.

Prototipos #

Los prototipos suelen ser el siguiente paso en el proceso de diseño del producto, después de crear mockups. Suelen tener color, tipografía, animaciones y el contenido real, lo que permite a los usuarios probar la interfaz y las interacciones. Los prototipos no representan el producto final, pero son lo suficientemente completos como para mostrarlos a los usuarios y a las partes interesadas. La creación de prototipos marca el punto de iteración en el que realizas algunas pruebas finales, añades pequeñas correcciones y entregas tus diseños al equipo de desarrollo que los hará realidad.

Pruebas de usabilidad #

Las pruebas de usabilidad son una práctica que consiste en evaluar un producto o servicio probándolo con usuarios representativos. Normalmente, se pide a los usuarios que realicen tareas comunes mientras los moderadores observan, escuchan los comentarios de los participantes y toman notas. Las pruebas de usabilidad permiten a los equipos detectar problemas de usabilidad, recopilar datos cualitativos y cuantitativos, definir el grado de satisfacción de los usuarios con el producto y solucionar los problemas antes de la codificación[1].

Flujo de usuario #

Flujo de usuarios son diagramas que representan los caminos que siguen los usuarios al navegar por un producto. Trazan una serie de pasos por los que pasan los usuarios, desde el punto de entrada hasta la interacción final (registro, compra, envío, etc.).

El flujo de usuarios es una herramienta beneficiosa para trabajar en la arquitectura de la información e ilustrar todos los caminos alternativos que pueden tomar los usuarios. Además, estos diagramas ayudan a evaluar los diseños existentes, detectar los momentos de fricción y optimizar la experiencia del usuario.

Entrevistas a usuarios #

Una entrevista de usuario es un método de investigación de UX que consiste en una sesión individual entre un entrevistador y un usuario representativo. Su principal objetivo es obtener valiosos comentarios y opiniones sobre el producto. Normalmente, se pregunta a los participantes sobre sus hábitos, comportamientos, necesidades y pensamientos al utilizar el producto.

Las entrevistas a usuarios proporcionan datos cualitativos sobre cómo se sienten los usuarios y lo que piensan sobre un sitio web, un servicio o una aplicación, y pueden realizarse en cualquier fase del proceso de diseño.

Si tu equipo no tiene acceso físico a usuarios reales, las entrevistas en vídeo también pueden poner en marcha el proceso.

User personas #

Un user persona es un personaje semi-ficticio que representa a tu público objetivo. Si quieres, puedes añadir algunos detalles demográficos a un personaje de usuario. Pero lo más importante es definir las necesidades, objetivos, frustraciones y motivaciones del usuario. También puedes añadir habilidades y otra información de fondo.

La elaboración de user persona ayuda al equipo de diseño a empatizar con los usuarios y a analizar los problemas poniéndose en su lugar. Los personajes deben basarse siempre en datos reales recogidos durante las entrevistas con los usuarios, las encuestas, las pruebas de usabilidad y otras herramientas de investigación dentro de los límites de presupuesto y tiempo de tu equipo.

Tómate un tiempo para explorar una guía paso a paso para crear un personaje de usuario adaptado exactamente a las necesidades de tu producto.

Wireflows #

Un wireflow es un documento de diseño híbrido que combina pantallas de estilo wireframe con un diagrama de flujo simplificado que representa las interacciones. Las flechas y anotaciones entre los wireframes indican los caminos que pueden seguir los usuarios al navegar por tu producto.

En lugar de utilizar formas abstractas de diagrama de flujo, los wireflows permiten mantener el enfoque en la interfaz del producto, aunque se modifique después de una ronda de iteraciones.

Wireframes #

Un wireframe, también conocido como wire o mock, es una versión simplificada y estática en blanco y negro de los diseños que definen la arquitectura de la información, los requisitos de funcionalidad, el diseño y la navegación de tu producto. Por lo general, están desprovistos de cualquier elemento decorativo como logotipos, elementos visuales, fuentes y colores que podrían distraer a los miembros del equipo en este punto de la discusión del producto. El wireframing es una herramienta de bajo coste para probar las suposiciones, obtener comentarios y aplicar cambios en las primeras fases del proceso de diseño.

Para obtener una comprensión completa del proceso de wireframing, da un salto y explora nuestro curso de Diseño de Wireframes preparado en colaboración con Balsamiq.

Conoce las diferentes disciplinas involucradas en el diseño web

Funciona con BetterDocs