VÍCTOR BALLESTER GRANELL | Diseño de productos digitales

1. Investigación

La investigación inicial aporta una base fundamental sobre la que trabajar en cualquier proyecto. Para la investigación es recomendable crear un documento de referencias que recoja ejemplos de interés de otras webs o aplicaciones, ya sean competencia o no, resaltando los elementos que sean interesantes para incluir en nuestro proyecto.

Otros métodos de investigación son las encuestas y entrevistas. Las encuestas se pueden realizar con facilidad mediante formularios online. Las entrevistas pueden ser presenciales o telemáticas, pero siempre será preferible ver a la persona entrevistada para captar sus reacciones más allá de las propias respuestas. Tanto las encuestas como las entrevistas es recomendable dirigirlas directamente a usuarios potenciales. Estas serían algunas preguntas posibles:

¿Cuantas veces al mes compartes tu opinión sobre lugares recientemente visitados?
Cuando viajas a otra ciudad ¿en qué te basas a la hora de elegir las zonas que te interesan?
¿Valoras positivamente las opiniones sobre establecimientos de otros usuarios en internet?

Tras realizar encuestas y/o entrevistas, se obtiene una información valiosa que conviene ordenar. Para ello, una herramienta muy útil es el mapa de afinidad. Cada dato de interés aportado por cada individuo es un elemento independiente. En el mapa de afinidad se agrupan estos datos por categorías que sean lógicas. Los colores sirven para diferenciar el método por el que se ha conseguido un dato en concreto. Continuando con el ejemplo de la app de notas, se podrían dividir de la siguiente manera: contenido, visual y funcionalidades.

2. Empatizar

Con la investigación ya realizada y habiendo ordenado la información, es conveniente la creación de Personas. Una Persona consiste en una serie de datos que conforman un personaje ficticio creado a partir de la información recogida en entrevistas o formularios y, por tanto, basado en la realidad. Los datos de una Persona pueden incluir su nombre, foto, edad, género y educación, así como metas, necesidades o miedos. Esta herramienta ayuda a mantener el foco puesto en el tipo de usuario al que va dirigido el producto y a no distraerse con necesidades ficticias y estereotipos.

Un ejemplo de Persona sería Andrea, profesional de Marketing con 24 años. Es una usuaria habitual de nuevas tecnologías y acostumbra a utilizar aplicaciones en sus actividades cotidianas. Viaja a menudo y valora las opiniones de otros usuarios antes de probar un producto o servicio.

Teniendo al menos una Persona creada, se procede a crear un mapa de viaje apoyándose en ella. Consiste en una linea temporal que describe cada fase de la relación entre la Persona y el producto en el que se trabaja. En este mapa de viaje, los pasos serían los siguientes: Descubrimiento, creación de cuenta, visualización general, visualización de notas en detalle y valoración de notas. Es muy importante evaluar el estado emocional de la Persona durante cada fase del mapa de viaje. De esta manera, se visualizan los puntos débiles del proceso y se toman medidas para remediarlo.

3. Orden de ideas y prioridades

Tras la investigación inicial y la definición de usuarios, el proyecto ya debe contar con muchas ideas y metas que se pretenden alcanzar en el producto final. Es importante jerarquizarlas correctamente y centrarse en las funcionalidades indispensables para alcanzar la mayor calidad posible, en lugar de ofrecer un producto demasiado complejo en su inicio y pobre en sus acabados.

Para ello, un método muy efectivo es el PMV (Producto Mínimo Viable). El PMV se define por la intersección entre las funcionalidades mínimas necesarias y aquellas que son viables en su desarrollo inicial. Este método es especialmente recomendable en Startups y un buen punto de partida para mejorar progresivamente el producto en base a la experiencia real.

A la hora de jerarquizar las prioridades en el desarrollo del producto presente y futuro, el método MoSCoW es una herramienta muy útil para obtener una hoja de ruta. Consiste en separar todas las ideas que han surgido sobre funcionalidades en cuatro categorías:

MUST (Tiene que tener): Funcionalidades básicas que debe tener el producto en su inicio.
SHOULD (Debería tener): Funcionalidades importantes que, pese a no estar implantadas inicialmente, deberían añadirse lo antes posible.
COULD (Podría tener): Funcionalidades secundarias que no son necesarias pero añadirían valor al producto. Su implementación dependerá de los recursos disponibles para el proyecto.
WON’T (No tendrá): Funcionalidades de menor interés cuya implementación no compensa el tiempo y recursos que necesitan.

4. Arquitectura de la información

Organizar los contenidos y la ubicación de los mismos es fundamental para tener una visión general del producto. La creación de un mapa de sitio ayuda a ordenar la información de forma lógica, haciendo que la experiencia de usuario sea más satisfactoria.

En el caso de una página web, es habitual que la experiencia de usuario deba convivir con el SEO (Search Engine Optimization), que mejora el posicionamiento orgánico en los buscadores. En estas situaciones, se debe intentar llegar siempre a un punto de encuentro entre una estrategia SEO efectiva y una disposición lógica de contenidos que favorezca al usuario.

Una vez que la ubicación de contenidos se ha concretado, hay que delimitar los caminos que seguirá el usuario para navegar a través de la aplicación o sitio web. En esta labor, es muy útil la creación de User flows. Un User flow es un esquema visual que representa el recorrido que hacen los usuarios con el objetivo de realizar distintas tareas.

Los recorridos deben ser sencillos y en los menores pasos posibles para facilitar el uso y la comprensión del producto. En User flows de cierta complejidad, puede ser conveniente separarlo en varias versiones donde cada User flow represente a un usuario haciendo una tarea específica.

5. Representación visual

El primer paso en el diseño visual de un producto digital es el boceto o dibujo manual. Mediante los bocetos se puede definir con rapidez la posición de los elementos que se verán en pantalla, sin perder tiempo en detalles gráficos que se trabajarán en pasos posteriores.

A continuación se define con mayor exactitud el diseño mediante wireframes. En los wireframes se trabajan más las proporciones de los elementos pero prescindiendo de colores, fotografías y otros detalles visuales que se sustituyen por cajas vacías. Se pueden hacer wireframes de baja fidelidad que utilizan líneas para simular los textos, o wireframes de alta fidelidad que ya cuentan contextos finales e iconografía básica.

Por último, se procede al diseño de interfaz en forma de mockups. Los mockups son una representación exacta del aspecto del producto que vería el usuario. Incluyen todos los detalles gráficos, colores, así como textos y fotografías.

En el diseño de interfaces, es importante tener en cuenta los patrones de diseño actuales. Los patrones de diseño son elementos que se repiten habitualmente en distintos productos digitales como los botones de “menú” o “volver”. Su iconografía y posición resulta intuitiva y conviene aprovecharlos para que el usuario se sienta familiarizado con el nuevo producto desde su primer uso.

6. Pruebas

Probar el producto antes de ponerlo en el mercado ayuda a detectar posibles errores o puntos a mejorar de cara al lanzamiento. Para probar un producto digital, lo ideal es crear un prototipo lo más fiel posible al diseño final. De esta manera se obtendrán valoraciones muy realistas al ponerlo a prueba, sin necesidad de exponerse a sacar el producto al mercado.

Las pruebas del producto se hacen con usuarios reales no involucrados en el diseño del mismo para que sus valoraciones sean completamente neutrales. La forma de dar a probar el producto varía tanto como el tipo de prototipo utilizado. Por tanto, una prueba puede realizarse de muchas formas: visualizando los bocetos y respondiendo preguntas de forma presencial, enviando un prototipo interactivo fiel al diseño final y haciendo seguimiento a distancia, con asesoramiento durante el proceso, sin ayuda, etc.

Por último, en el caso de sitios web ya publicados, es conveniente analizar el comportamiento de sus usuarios con herramientas que aporten mapas de calor, grabaciones de los movimientos del cursor y análisis de funnels de conversión. Esta información, al igual que ocurre con los datos extraídos de las pruebas mediante prototipos, contribuye a focalizarse en los elementos a mejorar y optimizar el diseño.