[google-translator]

Diseño de App: El modelo del viaje del usuario

 

Estrategias de Marketing

 

DISEÑANDO UNA APP : EL MODELO DEL VIAJE DEL USUARIO

El “User Journey” o “viaje del usuario, es la forma de reflejar de manera visual, de principio a fin, el proceso que realiza un usuario desde que tiene una necesidad hasta que la satisface utilizando la aplicación que hemos diseñado para él.

Este proceso se puede visualizar gráficamente de una forma lineal, separando las etapas entre sí y detectando en ellas las emociones del usuario, pero también, las dificultades que encuentra en cada paso y las acciones concretas que realiza para seguir adelante, por ejemplo, buscar. De esta manera, se puede detectar en qué puntos debe enfocarse el diseño para resolver problemas de interacción y lograr una app más usable.

El Viaje del usuario sirve también para sentar las bases preliminares de la organización de la información y la definición de las funciones, sin pensar en una estructura rígida o jerárquica.

usabilidad app 2

Definición funcional

Todas las acciones e interacciones que hacen falta para que un usuario consiga su objetivo, se traducen en funciones que debe tener la aplicación. Siguiendo el Viaje del usuario, se puede detectar cuáles son las necesidades que tiene en cada etapa y cuáles herramientas requiere para poder avanzar a la siguiente.

Adicionalmente, pueden agregarse casi infinidad de funciones complementarias. Cada vez que se añada una nueva función que complemente el objetivo principal, hay que ser conscientes del valor que representa para el usuario y de su utilidad real, teniendo en cuenta la Persona y el contexto de uso. No hay que olvidar nunca lo que se espera de un móvil en cada caso particular, en nuestro ejemplo, la capacidad de resolver rápidamente tareas puntuales.

Cada función que se agrega representa, además, mayor tiempo de desarrollo y complejidad, de ahí la importancia de decidir con cuidado en cada caso si merece o no ser incluida en la aplicación, para no terminar con un producto saturado de funciones que nadie usa y que arruinan la experiencia de usuario. Siempre es preferible hacer pocas cosas, pero hacerlas bien.

Arquitectura de información

La arquitectura de información es una forma de organizar el contenido y funciones de toda la aplicación, de forma que puedan ser encontrados rápidamente por el usuario. En sentido global, la arquitectura de información considera la relación entre los contenidos de diferentes pantallas y a nivel particular, la organización de contenidos dentro de la misma pantalla.

Una de las formas de visualizar la arquitectura consiste en representar cada pantalla con un rectángulo —en aplicaciones generalmente más vertical que horizontal— donde las conexiones entre los rectángulos indican la forma de navegar de una pantalla a otra y a través de qué acción.

 

 

app 111

 

Este diagrama sirve para estudiar la complejidad de la aplicación de un vistazo, analizar los diferentes niveles de profundidad, visualizar y entender la relación entre contenidos de una manera más organizada. Además, lo que se defina en esta etapa tendrá una incidencia directa en el tipo de navegación que se elija posteriormente.

 

Wireframes

Un “wireframe” es una representación muy simplificada de una pantalla individual, que permite tener una idea inicial de la organización de los elementos que contendrá, identificando y separando aquellos informativos de los interactivos.

 

app 112

Tal como los planos de una casa, los wireframes están dibujados de forma lineal y del mismo color, lo que permite abstraerse de las tentaciones estéticas y centrarse en la estructura o esqueleto de una pantalla. Elementos tales como texturas, sombras y volúmenes se dejan de lado en esta etapa.

¿PARA QUÉ SIRVE UN WIREFRAME?

No siempre se hacen wireframes. Es normal que un diseñador se salte este paso para pasar directamente al diseño visual de la interfaz. Sin embargo, es una mala práctica que puede traer consecuencias después. Usarlos es más que recomendable porque sirve, entre otras cosas:

  1. Como herramienta personal de exploración. Permite al diseñador evaluar diferentes alternativas de navegación e interacción, de una forma ágil y rápida, sin invertir demasiado tiempo en un diseño acabado que después no funcione.
  2. Como herramienta para comunicar ideas abstractas. En etapas tempranas del proyecto, es necesario transmitir la idea general de la aplicación a otras personas, centrándose en la funcionalidad, objetiva y racional, evitando distracciones por la subjetividad de elementos estéticos. De esta manera, se puede tener un primer acercamiento a la app para trabajar en equipo.
  3. Como un mecanismo para realizar las primeras evaluaciones de interfaz. Es posible detectar problemas de interacción y usabilidad, al sondear con usuarios o personas ajenas al proyecto, antes de haber diseñado o desarrollado aún una app funcional.

Hacer wireframes en etapas tempranas supone un ahorro de costes y tiempo, permitiendo evaluar aspectos como navegación e interacción para sentar unas bases sólidas que después den paso al diseño visual.

app 113

 

Es la forma más básica y accesible. Se trata simplemente de tomar una hoja de papel y dibujar las pantallas y componentes de interacción con un bolígrafo. Generalmente todos los wireframesempiezan en papel y se van desarrollando y haciendo cada vez más complejos con otras herramientas, antes de diseñar la interfaz en software de ordenador.

 

app 114

 

Este sería el paso siguiente y algo más «profesional» que un wireframe dibujado a mano alzada, manteniendo la esencia del trabajo en papel. Con los stencils —generalmente de metal— se pueden dibujar los elementos de interacción directamente en el papel, con una estructura más formal, limpia y uniforme.

Plantillas

app 115

 

Esta manera de crear un prototipo, consiste en utilizar archivos digitales de plantillas que contengan los elementos básicos de interacción y de interfaz —botones, listas y cabeceras—, para construir en el ordenador, utilizando programas de diseño como Photoshop, pantallas básicas a partir de estos componentes. Dependiendo del sistema operativo, se puede echar mano de diferentes recursos, siendo aquellos de iOS los más difundidos, seguidos de cerca por los de Android. Por otro lado, al día de hoy no existen demasiadas plantillas para Windows Phone.

PROTOTIPOS

Los prototipos son representaciones de la aplicación que sirven para probarla internamente o mediante test con usuarios, que permiten detectar errores de usabilidad en etapas tempranas de desarrollo. Generalmente, se trata de maquetas con una interacción suficiente para poder navegar entre las diferentes pantallas.

Pueden estar basados en wireframes o en diseños visuales, y su fidelidad puede ser mayor o menor, dependiendo de cuanto se corresponda su apariencia y comportamiento con la versión final esperada de la aplicación.

DE QUÉ PANTALLAS HACER LOS PROTOTIPOS

No es necesario hacer un prototipo que contenga todas las pantallas posibles de una aplicación. Los prototipos están destinados a pruebas, por lo tanto, deben desarrollarse solo aquellas pantallas necesarias para completar de principio a fin la tarea que se quiere probar. Por ejemplo, si se quiere sondear un registro de usuario, el prototipo debería contemplar las pantallas necesarias desde el ingreso de datos hasta el mensaje de éxito final.

FORMATOS DE PROTOTIPOS

Existen diferentes maneras de hacer un prototipo de aplicación: desde un dibujo en papel, pasando por el uso de software de diseño tradicional, hasta aquellos programas destinados exclusivamente al desarrollo de prototipos. La forma que se elija depende de la rapidez con que se quiera crearlo y la fidelidad respecto al resultado final esperado.

De acuerdo al formato de salida que se pueda obtener de un prototipo —para compartirlo posteriormente con otros miembros del equipo, clientes o accionistas— las formas de hacer prototipos pueden clasificarse en:

Documentos navegables

Los prototipos pueden presentarse en forma de documentos que se han usado toda la vida para presentaciones comerciales o distribución de información, añadiendo la interacción necesaria para navegar de una parte del documento a otro.

Por ejemplo, un PDF basado en archivos de diseño o fotografías de un boceto de la aplicación puede servir para representar el funcionamiento básico. Balsamiq es una herramienta que sirve para este fin.

Lo mismo sucede con archivos de presentaciones como los usados en documentos de Microsoft PowerPoint, Apple Keynote u OpenOffice. Keynotopia permite crear, a partir de plantillas, documentos compatibles con estos software a los que se les añade una capa de interacción para simular el comportamiento de la app.

Para poder abrirse, este tipo de documentos tiene que ser primero descargado y las transiciones y animaciones entre páginas suelen ser algo básicas.

Versiones web

Muchos software de prototipos —de escritorio o en la nube— permiten crear representaciones de la app en forma de sitios web —y que por lo tanto necesitan conexión a Internet y un navegador— basados en HTML5 y CSS3 para conseguir interacciones y animaciones que se asemejan en gran medida a las de la aplicación.

Algunos de estos programas permiten incluso crear un ícono de lanzamiento en la pantalla de inicio del teléfono, para conseguir una experiencia de simulación lo más cercana posible a la realidad.

Entre las herramientas que permiten crear prototipos de esta manera se puede nombrar a Codiqa FluidUI, Framer o Flinto, entre otros.

Otros formatos

Alternativamente, existe software específico para desarrollar prototipos. Uno con el cual se pueden conseguir resultados muy parecidos a los de una aplicación nativa es Briefs. Utilizando este programa de escritorio puede crearse una simulación de aplicación, que necesita un visor especial —una aplicación gratuita— en el teléfono de destino para poder abrirse.

Por otro lado, si se quiere hacer un prototipo muy rápidamente y con el propio teléfono, se puede usar POP, una aplicación que permite usar la cámara del móvil para fotografiar wireframes en papel y dotarlos de interacción para navegar entre las diferentes pantallas. Sin dudas, una opción que puede sacarnos de apuros para realizar comprobaciones rápidas.

estrategias de marketing sello

En Estrategias y Marketing .com desarrollamos plataformas web responsive, app para negocios y app internas para empresas, gestión de redes sociales, posicionamiento SEO/SEM, diseño publicitario y mantenimiento para herramientas de acciones online y Estrategias de Marketing. Queremos ser tu socio. Somos los adecuados para ayudarte a conseguir tus objetivos.

Añadimos cookies para mejorar tu experiencia como usuario. Leer Política de cookies
SI, ACEPTO