Home Blog/ Estilo de Vida/
Estilo de Vida
¬ŅC√≥mo dise√Īar una APP? Consejos de UX/UI para crear aplicaciones incre√≠bles¬ŅC√≥mo dise√Īar una APP? Consejos de UX/UI para crear aplicaciones incre√≠bles

¬ŅC√≥mo dise√Īar una APP? Consejos de UX/UI para crear aplicaciones incre√≠bles

Josefina Castelan - 03 Mar 21

Articulo

7 min.

¬ŅAlguna vez te preguntaste c√≥mo fue el proceso de creaci√≥n de aplicaciones como WhatsApp, Instagram o Uber? Quiz√°s te interese saberlo por simple intriga o para crear tu propia app. No importa el motivo: hoy voy a revelarte el paso a paso de c√≥mo dise√Īar una app, siguiendo las tendencias de UX/UI.¬†

Si pensabas que el proceso para dise√Īar una aplicaci√≥n m√≥vil era elegir algunos botones, funcionalidades, una paleta de colores y listo, ¬°error! Hoy en d√≠a una app es el resultado de un proceso que involucra no solo la parte de programaci√≥n, sino tambi√©n el dise√Īo de experiencia de usuario y el dise√Īo de interfaces.

Si quieres saber un poco m√°s, ¬°sigue leyendo!

Paso a paso: ¬Ņc√≥mo dise√Īar una app?

Si bien el proceso no es lineal y puede variar seg√ļn el tipo de aplicaci√≥n que quieras dise√Īar y para qu√© sistema operativo, existen algunos pasos fundamentales para el dise√Īo de una aplicaci√≥n que gu√≠an el procedimiento en la mayor√≠a de los casos. Esos pasos son los siguientes:

  1. Idea

Aca estamos todos de acuerdo: la mayor√≠a de los desarrollos tecnol√≥gicos comienzan con una idea, que por lo general surge de detectar alg√ļn problema o necesidad latente.¬†¬†

Una vez que detectes esa idea, empezarás lentamente a darle forma. En este punto lo ideal es pensar qué quieres lograr con tu aplicación, qué funcionalidad principal le darás y qué objetivo tendrá. Veamos algunos ejemplos de aplicaciones: 

  • Aplicaciones para editar fotos y videos

  • Aplicaciones para aprender ingl√©s u otros idiomas

  • Aplicaciones para buscar trabajo

  • Aplicaciones para dibujar

  • Aplicaciones para hacer anotaciones

  • Aplicaciones para reciclar

  • Aplicaciones para chatear

  • Aplicaciones de trabajo colaborativo
     

¬°La lista puede extenderse much√≠simo m√°s! Las posibilidades son infinitas. Si no se te ocurre ninguna idea, entonces te recomiendo que te inscribas ¬°YA! en este curso de Ideaci√≥n y creatividad desde cero. ¬°Las ideas mueven el mundo! Y tambi√©n te permiten dise√Īar una app, claro.

  1. Dise√Īar

Esta es la etapa m√°s entretenida y din√°mica. No debe confundirse con una etapa de dise√Īo gr√°fico en s√≠: el trabajo en esta fase es much√≠simo m√°s abarcativo.¬†

Lo que comenzar√°s a hacer en la etapa de dise√Īo es la validaci√≥n de la idea de tu aplicaci√≥n. Para esto, deber√°s llevar a cabo una investigaci√≥n exhaustiva que girar√° en torno a tu usuario: esto es lo que se conoce como UX research, y te lo contaremos en detalle m√°s abajo.¬†

Para entender bien c√≥mo dise√Īar una app y crear incre√≠bles productos digitales, en esta etapa tendr√°s que empezar a aplicar herramientas como customer journey, benchmarking, card-sorting, entrevistas y encuestas, entre muchas otras. Si te agarr√≥ intriga por saber m√°s de estas herramientas, corre a inscribirte a este curso de Experiencia de usuario: Del research a la ideaci√≥n.

Para ayudarte con tu proceso de investigación, deberás describir tu producto y plasmar en una hoja (de papel o virtual) como quieres que sea. Este documento es lo que se conoce como wireframes en baja fidelidad, y debe reflejar las principales funcionalidades de tu aplicación. En este paso, no te preocupes por los detalles gráficos, ni siquiera debes agregarle color. Para poder realizarlos puedes usar herramientas como Balsamiq o Lucidchart.

wireframes en baja

Fuente: Unsplash

  1. Prototipar y testear

Una vez que ya tengas las conclusiones de tus investigaciones, el paso siguiente es ir aumentando la fidelidad de tu dise√Īo, incluyendo las modificaciones que fuiste recabando del Research. Esta es la etapa de prototipado de tu producto.¬†

En esta fase tu prototipo debe ser lo m√°s realista y detallado posible. Las herramientas de prototipado, adem√°s, te permiten agregar interacciones entre pantallas para que puedas realizar uno de los pasos m√°s importantes al momento de pensar c√≥mo dise√Īar una app: el testeo. Esto te va a permitir probar con usuarios reales tu aplicaci√≥n, para encontrar puntos de dolor a solucionar y chequear la usabilidad en general.¬†¬†

Una vez que tienes todo listo, ahora s√≠, lleg√≥ el momento de lo que se conoce como dise√Īo de interfaces o UI, que representa la parte gr√°fica. Para conocer m√°s sobre esta etapa, te recomiendo el curso online de Dise√Īo de interfaces web y m√≥viles.

  1. Desarrollar

En esta etapa final, el dise√Īador UX le pasa el mando al programador para que haga su magia de hacer realidad ese prototipo inicial. No nos meteremos mucho en detalle en esta etapa, pero si quieres saber m√°s sobre c√≥mo dise√Īar una app para android puedes inscribirte en el curso: Crea aplicaciones en Android con Java.¬†

Cabe resaltar que la tendencia actual en el dise√Īo de aplicaciones es el de iterar constantemente, es decir: el UX research sigue activo a√ļn cuando la aplicaci√≥n ya est√° online, con el fin de recabar informaci√≥n sobre el uso e ir mejorando sus funcionalidades.¬†

Experiencia de usuario: ¬Ņqu√© es UX?

El dise√Īo UX, o dise√Īo de experiencia de usuario, es una metodolog√≠a para crear productos de todo tipo, que se basan en las necesidades, deseos, acciones e intereses de los usuarios. Esta t√©cnica conjuga tres aspectos fundamentales:¬†

✅ Usabilidad: grado de facilidad de uso que tiene un producto para el usuario. Representa la calidad de la interacción entre el usuario y el producto. 

‚úÖ Accesibilidad: refiere a que un producto es de f√°cil acceso para cualquier persona.

✅ Interacción: representa la percepción que tiene el usuario al usar el producto.

En el paso a paso que vimos anteriormente, donde te explicaba c√≥mo dise√Īar una app, se puede ver que el dise√Īo UX es una parte fundamental de ese proceso. Desde el proceso de ideaci√≥n hasta el desarrollo, ¬°todo tiene UX!

dise√Īo ux

Fuente: Unsplash

Un buen UX hace la diferencia, descarga este kit Wireframe UX para iOS y Android


Dise√Īo de interfaces: ¬Ņqu√© es UI

Al UX, lo acompa√Īa de cerca otro tipo de dise√Īo muy conocido y aplicado a nivel mundial: el dise√Īo UI o dise√Īo de interfaces, que se trata de lo visual de un producto, o de una aplicaci√≥n en este caso.¬†

En esta etapa, un dise√Īador refleja todo lo que se investig√≥ en materia de experiencia de usuario, en el dise√Īo visual. Es decir, en los colores, tipograf√≠as, recursos gr√°ficos, im√°genes y videos a usar en la aplicaci√≥n.¬†

Pero tambi√©n en esta etapa, el dise√Īo est√° centrado en el usuario: no se busca crear una aplicaci√≥n bonita y atractiva a la vista. Se busca dise√Īar una app que sea funcional, accesible, que cubra las necesidades del usuario y con una interacci√≥n optimizada. Vaya trabajo, ¬Ņno?

dise√Īo ui

Fuente: Unsplash

Principios Heurísticos de Nielsen: validar la usabilidad de una app

Los principios heurísticos son reglas generales que se formularon en 1995 por Jacob Nielsen, como guía para mejorar la usabilidad de un sitio web. En la actualidad, estos principios se aplican a cualquier producto tecnológico. 

Entonces, ¬Ņc√≥mo dise√Īar una app, siguiendo los est√°ndares de usabilidad recomendados? Bas√°ndote en los principios heur√≠sticos:¬†¬†

  1. Visibilidad del estado del sistema: informar el estado de un proceso.

  2. Relación entre el sistema y el mundo real: usar vocabulario familiar para el usuario.

  3. Libertad y control por parte del usuario: si el usuario hace una elecci√≥n erronea, tiene que tener la posibilidad de ‚Äúvolver para atr√°s‚ÄĚ.¬†

  4. Consistencia y estándares: usar las convenciones mundialmente aceptadas a la hora de elegir íconos, imágenes, frases, funciones, etc. 

  5. Prevención de errores: evitar procesos que puedan llevar a errores. 

  6. Reconocimiento antes que recuerdo: no obligar al usuario a recordar ciertas funciones, mejor mostrarselas. 

  7. Flexibilidad y eficiencia de uso: crear una app que sea funcional para principiantes y expertos por igual. 

  8. Est√©tica y dise√Īo minimalista: mantener el contenido y dise√Īo visual enfocado en lo esencial. No agregar informaci√≥n extra.¬†

  9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores: todos los errores que puedan aparecer deben estar indicados en un lenguaje sencillo. 

  10. Ayuda y documentación: tener disponible siempre una guía de funcionamiento de la app. 

C√≥mo dise√Īar una app: consejos de UX / UI¬†

Ahora que ya viste el paso a paso, aprendiste los conceptos de Dise√Īo UX / UI y validaste la app con los principios heur√≠sticos, solo queda hacer un repaso final de los consejos y tips a tener en cuenta para crear una aplicaci√≥n centrada en el usuario.¬†

Este es el checklist final que debes tener en cuenta a la hora de dise√Īar una app:¬†¬†

‚úÖ Prioriza funciones: no llenes tu app de funcionalidades secundarias ‚Äúpor las dudas‚ÄĚ. Centrate en tu MVP o producto m√≠nimo viable.

‚úÖ Empatiza con los usuarios: ten siempre presente las conclusiones de tu UX Research y haz una app que sea a medida de los usuarios.

✅ Simplifica procesos: facilita el acceso a las funciones principales. Analiza a fondo el user journey. 

✅ Cuida los textos: define voz y tono de los contenidos de tu aplicación. Este curso de UX Writing & UX Editing va a ser tu salvación a la hora de desarrollar el contenido.  

✅ ¡Testea! No existe una manera más directa de probar si la app va por el camino correcto. Haz pruebas de usabilidad con usuarios y descubre sus percepciones y puntos de dolor. 
Ahora s√≠¬†¬Ņtodo listo para comenzar a dise√Īar tu aplicaci√≥n? Seguramente estos pasos y consejos te parezcan un mont√≥n de informaci√≥n, pero de a poco y sin darte cuenta, comenzar√°s a aplicar los conceptos de dise√Īo UX en todos los productos que dise√Īes.¬†

Espero que estos consejos te sean de utilidad y que ya tengas un poco m√°s claro c√≥mo dise√Īar un App. ¬°Seguro en breve ya tengas tu propia app disponible para descargar en el celular!¬†