Diseño UX UI para apps móviles

Te presentamos nuestra metodología de trabajo para diseñar y testear la usabilidad de una aplicación móvil, esta fase de diseño siempre se realiza al final nuestro sprint de definición y consultoría de funcionalidades.

 

Seis procesos de diseño UX/UI

Arquitectura AI

Cada proyecto cuenta con un sistema de gestión en formato web para administrar los contenidos de la aplicación

Wireframes

De 10 a 12 días laborables

Es una representación visual en escala de grises de la estructura y funcionalidad de una aplicación móvil.

Prototipo UX

De 2 a 5 días laborables

Define el esqueleto de nuestras secciones y nos ayuda a ver la estructura que obtendrá nuestra app final.

Diseño UI

De 20 a 22 días laborables

Interfaz del Usuario, es la vista que permite a un usuario interactuar de manera efectiva con un sistema.

Prototipo UI

De 2 a 5 días laborables

Es el producto más cercano a la realidad y es aquí donde le integramos la interactividad final.

Screenshots

De 2 a 5 días laborables

Es un elemento que ayuda al factor que puede determinar que un usuario descargue la app.

Si hemos llegado a este punto es por que tu proyecto ya ha finalizado nuestro sprint de análisis y definición de funcionalidades y el equipo de diseño tiene todo el material sobre la mesa para comenzar con la arquitectura de información de tu app, es lo que conocemos como UX pero te preguntaras que son los ¿Wireframes? Y el ¿UX? Vamos a ver un caso real.

Lo primero es conocer los palabreríos técnicos Wireframes, UX, UI, AI… nos escucharas nombrarlos a lo largo del proyecto y es muy importante que conozcas la terminología que utilizamos.

Si hemos llegado a este punto es por que tu proyecto ya ha finalizado nuestro sprint de análisis y definición de funcionalidades y el equipo de diseño tiene todo el material sobre la mesa para comenzar con la arquitectura de información de tu app, es lo que conocemos como UX pero te preguntaras que son los ¿Wireframes? Y el ¿UX? Vamos a ver un caso real.

Lo primero es conocer los palabreríos técnicos Wireframes, UX, UI, AI… nos escucharas nombrarlos a lo largo del proyecto y es muy importante que conozcas la terminología que utilizamos.

Seis procesos de diseño UX/UI

Arquitectura AI

De 2 a 5 días laborables

Documento en el que se definen la organización y relaciones entre todos los elementos.

Wireframes

De 10 a 12 días laborables

Es una representación visual en escala de grises de la estructura y funcionalidad de una aplicación móvil.

Prototipo UX

De 2 a 5 días laborables

Define el esqueleto de nuestras secciones y nos ayuda a ver la estructura que obtendrá nuestra app final.

Diseño UI

De 20 a 22 días laborables

Interfaz del Usuario, es la vista que permite a un usuario interactuar de manera efectiva con un sistema.

Prototipo UI

De 2 a 5 días laborables

Es el producto más cercano a la realidad y es aquí donde le integramos la interactividad final.

Screenshots

De 2 a 5 días laborables

Es un elemento que ayuda al factor que puede determinar que un usuario descargue la app.

Experiencia de usuario UX

UX (por sus siglas en inglés User eXperience) o en castellano Experiencia de Usuario, es aquello que una persona percibe al interactuar con nuestra aplicación. Logramos una buena UX al enfocarnos en diseñar productos útiles, usables y deseables, lo cual influye en que el usuario sienta el efecto ¡wow! al usar nuestra app.

Experiencia de usuario UX

UX (por sus siglas en inglés User eXperience) o en castellano Experiencia de Usuario, es aquello que una persona percibe al interactuar con nuestra aplicación. Logramos una buena UX al enfocarnos en diseñar productos útiles, usables y deseables, lo cual influye en que el usuario sienta el efecto ¡wow! al usar nuestra app.

UI, hay un botón que permite interactuar al usuario con el sistema (seleccionar productos).

Usabilidad, hay un botón que permite al usuario deseleccionar productos, además me dice precio y la descripción del producto y me permite ver la cantidad de productos añadidos (previniendo errores).

Buena UX, Me hace decir ¡Wow! porque puedo ver un resumen del total de mi pedido y acceder al carrito para finalizar mi compra o puedo seguir configurando mi pedido sin salir de la misma pantalla.

UI me permite comprar, Usabilidad me permite prevenir un error, UX es lo que percibo.

¿Y, cómo se logra esta experiencia?

Una buena UX se logra a través del Diseño Centrado en el Humano, el cual es el enfoque de conocer las necesidades de los usuarios y alinearlos a los objetivos del negocio tomando también en cuenta las limitaciones técnicas.

UI, hay un botón que permite interactuar al usuario con el sistema (seleccionar productos).

Usabilidad, hay un botón que permite al usuario deseleccionar productos, además me dice precio y la descripción del producto y me permite ver la cantidad de productos añadidos (previniendo errores).

Buena UX, Me hace decir ¡Wow! porque puedo ver un resumen del total de mi pedido y acceder al carrito para finalizar mi compra o puedo seguir configurando mi pedido sin salir de la misma pantalla.

UI me permite comprar, Usabilidad me permite prevenir un error, UX es lo que percibo.

¿Y, cómo se logra esta experiencia?

Una buena UX se logra a través del Diseño Centrado en el Humano, el cual es el enfoque de conocer las necesidades de los usuarios y alinearlos a los objetivos del negocio tomando también en cuenta las limitaciones técnicas.

Arquitectura de la información

Aquí entra en acción el término arquitectura de la información (AI), una parte del proceso de diseño UX que nos ayudará a empezar el proyecto con una buena base.

En pocas palabras, la arquitectura de la información es el arte de organizar la información de la forma más clara y lógica posible.

De este modo, el usuario podrá encontrar fácilmente lo que está buscando. Además, también nos permitirá poder añadir fácilmente nuevas funcionalidades y escalar el producto.

En resumen, la Arquitectura de la Información es un documento en el que se definen la organización y relaciones entre todos los elementos. De ella dependen el resto de fases, wireframes, prototipos y diseño final UI.

Ejecución en 3 - 5 días laborables

Arquitectura de la información

Aquí entra en acción el término arquitectura de la información (AI), una parte del proceso de diseño UX que nos ayudará a empezar el proyecto con una buena base.

En pocas palabras, la arquitectura de la información es el arte de organizar la información de la forma más clara y lógica posible.

De este modo, el usuario podrá encontrar fácilmente lo que está buscando. Además, también nos permitirá poder añadir fácilmente nuevas funcionalidades y escalar el producto.

En resumen, la Arquitectura de la Información es un documento en el que se definen la organización y relaciones entre todos los elementos. De ella dependen el resto de fases, wireframes, prototipos y diseño final UI.

Ejecución en 3 - 5 días laborables

Wireframes

En el diseño de aplicaciones móviles, un wireframe es una representación visual en escala de grises de la estructura y funcionalidad de una aplicación móvil. Los wireframes se usan en las primeras etapas del proceso de desarrollo con el fin de establecer la estructura básica de un proyecto antes de agregar el contenido y el diseño visual.

La creación de wireframes establece expectativas sobre cómo se implementarán las funciones, mostrando cómo funcionarán, dónde estarán ubicadas y que beneficios obtiene el usuario.

Ejecución en 12 - 15 días laborables

Wireframes

En el diseño de aplicaciones móviles, un wireframe es una representación visual en escala de grises de la estructura y funcionalidad de una aplicación móvil. Los wireframes se usan en las primeras etapas del proceso de desarrollo con el fin de establecer la estructura básica de un proyecto antes de agregar el contenido y el diseño visual.

La creación de wireframes establece expectativas sobre cómo se implementarán las funciones, mostrando cómo funcionarán, dónde estarán ubicadas y que beneficios obtiene el usuario.

Ejecución en 12 - 15 días laborables

Prototipo interactivo UX

Un prototipo es una simulación del producto final en diferentes grados fidelidad. Trabajando con niveles de fidelidad mejoramos constantemente el trabajo realizado en la fase anterior y reducimos el numero de errores en la usabilidad antes de continuar con la siguiente fase.

En el diseño de prototipos de baja fidelidad UX empezamos nuestra primera toma de contacto con el prototipado. Son un borrador de lo que será nuestro producto final. Definen el esqueleto de nuestras secciones y nos ayudar a ver la estructura que obtendrá nuestra app final.

Prototipo interactivo UX

Un prototipo es una simulación del producto final en diferentes grados fidelidad. Trabajando con niveles de fidelidad mejoramos constantemente el trabajo realizado en la fase anterior y reducimos el numero de errores en la usabilidad antes de continuar con la siguiente fase.

En el diseño de prototipos de baja fidelidad UX empezamos nuestra primera toma de contacto con el prototipado. Son un borrador de lo que será nuestro producto final. Definen el esqueleto de nuestras secciones y nos ayudar a ver la estructura que obtendrá nuestra app final.

Interfaz de usuario UI

Todos los días interactuamos con una interfaz. Ya sea en un automóvil de camino al trabajo, para comprar un billete de metro, al acceder al correo electrónico, marcar el tiempo de calentado en un horno de microondas, solicitar un turno en un banco, estas comunicándote con un sistema

La UI (por sus siglas en inglés User Interface) o en castellano Interfaz del Usuario, es la vista que permite a un usuario interactuar de manera efectiva con un sistema. Es la suma de una arquitectura de información + patrones de interacción +  elementos visuales.

Ejecución en 20 - 22 días laborables

Interfaz de usuario UI

Todos los días interactuamos con una interfaz. Ya sea en un automóvil de camino al trabajo, para comprar un billete de metro, al acceder al correo electrónico, marcar el tiempo de calentado en un horno de microondas, solicitar un turno en un banco, estas comunicándote con un sistema

La UI (por sus siglas en inglés User Interface) o en castellano Interfaz del Usuario, es la vista que permite a un usuario interactuar de manera efectiva con un sistema. Es la suma de una arquitectura de información + patrones de interacción +  elementos visuales.

Ejecución en 20 - 22 días laborables

Prototipo interactivo UI

En etapa de diseño del prototipo UI, trabajamos con los prototipos de baja fidelidad, y es cuando empezamos a otorgarle un diseño visual, definimos colores, tipografías o iconografía. En la etapa de diseño de prototipo UI de alta fidelidad obtenemos el producto final. Es el producto más cercano a la realidad y es aquí donde le integramos la interactividad final.

Prototipo interactivo UI

En etapa de diseño del prototipo UI, trabajamos con los prototipos de baja fidelidad, y es cuando empezamos a otorgarle un diseño visual, definimos colores, tipografías o iconografía. En la etapa de diseño de prototipo UI de alta fidelidad obtenemos el producto final. Es el producto más cercano a la realidad y es aquí donde le integramos la interactividad final.

Screenshots

Los screenshots son aquellos elementos visuales que ayudan a entender al usuario de qué va la app, qué contenido muestra y qué funcionalidades tiene.

Es ideal, a nivel de diseño, seguir un storytelling con un hilo narrativo de capturas que expliquen visualmente el funcionamiento de la app para que el usuario entienda cómo funciona antes de descargarla.

Es un elemento que ayuda al factor que puede determinar que un usuario descargue la app, por lo que es recomendable que esté bien trabajado a nivel de diseño, de conversión y de marca.

Ejecución en 2 - 3 días laborables

Screenshots

Los screenshots son aquellos elementos visuales que ayudan a entender al usuario de qué va la app, qué contenido muestra y qué funcionalidades tiene.

Es ideal, a nivel de diseño, seguir un storytelling con un hilo narrativo de capturas que expliquen visualmente el funcionamiento de la app para que el usuario entienda cómo funciona antes de descargarla.

Es un elemento que ayuda al factor que puede determinar que un usuario descargue la app, por lo que es recomendable que esté bien trabajado a nivel de diseño, de conversión y de marca.

Ejecución en 2 - 3 días laborables

Ir arriba