Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android

Diseñando, Bocetando & Prototipando una App Andriod: Parte 1

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Andrea J (you can also view the original English article)

Si sueñas con crear la próxima gran novedad en las aplicaciones Android, entonces no voy a mentir: ¡tienes el trabajo hecho para ti!

Solo necesitas echar un vistazo rápido a la tienda Google Play para ver que casi todas las aplicaciones que se te ocurran ya se han creado, por lo general, varias veces y con diferentes grados de éxito.

En un mercado tan competitivo, tu aplicación tiene que ofrecer el paquete completo: ¡simplemente tener un gran conjunto de características no va a ser suficiente! Tu aplicación también debe ser adaptable, fácil de usar, completamente libre de errores y (por superficial que parezca) también tiene que verse bien.

Entonces, cuando te despiertes en medio de la noche con una idea brillante para una aplicación Android, resiste la tentación de saltar de la cama, inicia Android Studio y comienza a darle vida a tu visión. Si vas a hacer justicia a tu idea, debes pensar un poco en el diseño de tu aplicación.

En esta serie de dos partes, te mostraré cómo convertir una gran idea en una gran aplicación. Aprenderás a planificar, probar y perfeccionar cada parte del diseño de tu aplicación, y cómo solucionar tantos problemas como sea posible antes de escribir una sola línea de código.

En este primer capítulo, veremos cómo responder todas esas preguntas importantes y urgentes que todo desarrollador debe abordar cada vez que comienza un nuevo proyecto de Android. Luego, crearemos una lista de todas las pantallas que necesitamos crear, además de un mapa de pantallas que muestra exactamente cómo encajan todas estas pantallas.

En la parte 2, dominarás algunas técnicas poderosas y diseñadas, como el wireframing y la creación de prototipos. Al final de la parte 2 habrás creado un prototipo digital que podrás instalar y probar en tu smartphone, tablet o emulador Android.

Para ayudarte a ver exactamente cómo pasarías de una 'chispa de inspiración' a un prototipo digital funcional, voy a imaginar que se me ocurrió una idea para una aplicación de Android que quiero crear y luego desarrollaré esta idea a lo largo de la serie.

Dado que (supuestamente) nos acercamos al verano, voy a diseñar una aplicación que le ayudará a las personas a planificar y reservar las mejores vacaciones de verano con todos sus amigos.

Ya que tenemos nuestra idea, ¿qué es lo primero que debemos hacer?

1. Escribe la declaración de producto

Tu aplicación típica tiene muchos extras adicionales agradables, pero también tiene una tarea principal claramente definida. Por ejemplo, nuestra aplicación de viajes terminada podría incluir la funcionalidad de las redes sociales para que los usuarios puedan compartir una instantánea de ese increíble cóctel que tomaron en la playa o del gato que acariciaron fuera de su hotel, pero estas funciones no son la tarea principal de la aplicación.

Un buen truco para llegar al núcleo de lo que realmente se trata tu aplicación es escribir la declaración de producto. Es una sola frase que comunica lo que es tu aplicación, lo que hace y por qué es fundamental que el usuario inicie Google Play y descargue tu aplicación inmediatamente. Puede ser útil imaginar que estás presentándole tu aplicación a un usuario potencial, y solo puedes usar una frase para transmitir tu mensaje.

Después de mucha deliberación, me decidí por la siguiente declaración de producto:

Una aplicación que elimina el estrés de planificar y reservar las mejores vacaciones de verano.

Es fundamental que nunca pierdas de vista esta declaración de producto, por lo que es posible que quieras garabatearla en una nota adhesiva y pegarla sobre tu escritorio.

You may want to scribble your product statement on a post it note

2. Identifica a tu público objetivo

La siguiente gran pregunta que debes abordar es: ¿para quién exactamente estoy creando esto?

Es de esperar que ya tengas una idea aproximada del tipo de persona que podrían querer usar tu aplicación, pero para obtener los mejores resultados, debes diseñar tu aplicación con un público objetivo muy específico en mente. El viejo dicho es cierto: trata de complacerlos a todos y no terminarás complaciendo a nadie.

A quien intentas atraer debe influir en cada parte de tu aplicación, desde las funciones que incluyes hasta la apariencia de tu interfaz de usuario, hasta el tono del texto de tu aplicación. Es por eso que es crucial que identifiques a tu público objetivo tan pronto como sea posible en el proceso de diseño.

Ya tengo una idea aproximada de a quién me dirijo: jóvenes adultos de 18 a 25 años que están en vacaciones de verano de la universidad, se están tomando un año sabático completo, o están planeando una última aventura antes de que sea el momento de empezar a buscar ese primer trabajo a tiempo completo. Este es un buen comienzo, ¡pero podemos ser más específicos!

Un truco simple pero efectivo para concentrarte en tu audiencia es crear un perfil de usuario.

Un perfil de usuario es un usuario que personifica el tipo de persona a la que te diriges. ¿Qué características tendría esta persona? Aunque las características exactas varían según el tipo de aplicación que tengas pensada, puedes comenzar respondiendo las siguientes preguntas:

  • ¿Qué edad tiene tu perfil de usuario? Podría ser una edad exacta o un grupo de edad, como personas mayores de 60 años o adultos jóvenes.
  • ¿Dónde viven? Podría ser un país o ciudad específico, o un tipo de lugar como por el mar o en la gran ciudad.
  • ¿Tienen hijos?
  • ¿Cuáles son sus pasatiempos?
  • ¿Tienen trabajo? Y si es así, ¿en qué trabajan?
  • ¿Están estudiando actualmente?
  • ¿Cuál es su tipo de aplicación favorita?
  • ¿Cuál es su tipo de aplicación menos favorita?
  • ¿Qué factores los motivan a descargar una aplicación?
  • ¿Alguna vez pagan por aplicaciones móviles?
  • ¿Qué experiencia tienen con las aplicaciones móviles? ¿Son usuarios avanzados o principiantes?
  • ¿Qué tan experimentados son con la tecnología en general?

Creemos un perfil de usuario para nuestra aplicación de viajes. Para obtener los mejores resultados, es útil pensar en tu persona como una persona real. Es posible que incluso quieras darle un nombre a tu perfil de usuario, y es exactamente lo que voy a hacer: ¡conocer a Sasha!

  • Tiene 20 años.
  • Es una estudiante universitaria en las vacaciones de verano.
  • Ella está viviendo con sus padres durante el verano, pero regresará a los salones estudiantiles al comienzo del año académico.
  • Es soltera, sin hijos.
  • Ella no tiene un trabajo, así que su préstamo estudiantil es su única fuente de ingresos.
  • Como alguien que ha crecido con las redes sociales, sus aplicaciones favoritas son cualquier cosa que le permita compartir fotos y actualizaciones de estado con sus amigos, familia y la red informática mundial en general.
  • Es una profesional de la tecnología, especialmente de las aplicaciones móviles.

Dado que mi aplicación se trata de organizar unas vacaciones, también necesito definir las experiencias de Sasha en torno a los viajes. ¿Es probable que mi usuario "típico" sea viajero? ¿Han sido responsables de planificar sus propias vacaciones antes, o todo esto es nuevo para ellos?

Voy a agregar las siguientes características a mi perfil de usuario:

  • Sasha ha estado en el extranjero varias veces, pero solo con su familia.
  • Es la primera vez que planea sus propias vacaciones.
  • Sasha puede ser bastante organizada cuando quiere, pero como esta es la primera vez que participa en la planificación y reserva de unas vacaciones, ¡definitivamente agradecería ayuda!

Casos de uso

Así que ahora tenemos el quién, pero ¿qué pasa con el cuándo? ¿Bajo qué circunstancias Sasha podría sentirse obligada a sacar su teléfono e iniciar nuestra aplicación?

Estas son algunas que me vienen a la mente:

  • Sasha está saliendo con amigos de la universidad e inevitablemente, la conversación gira en torno a lo mucho que se van a divertir durante el verano. Todos se emocionan demasiado y, antes de que te des cuenta, Sasha abre nuestra aplicación y ella y sus amigos están planeando con entusiasmo lo que seguramente será el viaje de sus vidas.
  • Sasha acaba de entrar en el chat grupal que ella y sus amigos dejan funcionando en su aplicación de mensajería instantánea favorita, y ve que, ¡finalmente! Todos acordaron un destino. Emocionada, Sasha inicia nuestra aplicación y comienza a investigar cosas divertidas para hacer en esa área.
  • Sasha se siente frustrada. Ella y sus amigos parecen pasar horas hablando de lo genial que va a ser su viaje, pero realmente nunca llegan a reservar nada. Alguien tiene que hacerse cargo, y parece que esa persona va a tener que ser ella. El único problema es que nunca ha arreglado algo así antes. Lo que necesita es algún tipo de aplicación que pueda eliminar el estrés de planificar y reservar las vacaciones de verano perfectas…

3. Crea una lista de características

Es hora de divertirse: deja volar tu imaginación y escribe todas las características que incluirías en tu aplicación si tuvieras tiempo, dinero y todo un ejército de desarrolladores listos y con muchas ganas de ayudarte. Por ahora, no te preocupes por si estas características son prácticas, piensa en esto como tu lista de características definitiva.

Si te cuesta inspirarte, dirígete a la tienda Google Play y descarga algunos ejemplos de aplicaciones de Android que tengan contenido similar o tienen el mismo público objetivo que tu aplicación.

Dedica un tiempo a explorar estas aplicaciones y toma nota de lo que hace bien la aplicación y de las áreas en las que crees que podrías mejorar.

Estas son algunas de las características que anoté:

  • La posibilidad de reservar todo lo que el usuario podría necesitar para su viaje, desde boletos de avión, tren y autobús, hasta reservas de hotel, e incluso cosas diversas como reservar una mesa en ese restaurante local que tenga críticas particularmente excelentes en TripAdvisor.
  • Leer las reseñas dejadas por otros usuarios y publicar tus propias opiniones.
  • El usuario define su presupuesto por adelantado y la aplicación filtra todas sus sugerencias basado en este presupuesto.
  • ¡Sé espontáneo! Se supone que planificar unas vacaciones es divertido, así que ¿por qué no dejar todo en manos del destino colocando un pin virtual en un mapa virtual?
  • De acuerdo, se supone que planear unas vacaciones es divertido, pero también puede ser un trabajo duro, especialmente si este es el primer viaje que reservas. Nuestra aplicación debe proporcionar una lista de todo lo que el usuario necesita para reservar y organizar, con el fin de planificar las vacaciones perfectas.
  • Funcionalidad de redes sociales, para que los usuarios puedan poner celosos a todos sus amigos y familiares al publicar fotos y actualizaciones de estado sobre lo mucho que se están divirtiendo en las vacaciones.
  • Un diario de viajes para aquellos usuarios que quieran compartir más que simples fotos y actualizaciones de estado.
  • Dado que mi público objetivo son los adultos jóvenes, esta puede ser la primera vez que muchos de ellos se han encargado de reservar sus propias vacaciones. Es posible que aprecien algunos consejos generales dirigidos a quienes viajan por primera vez, por ejemplo cómo solicitar un pasaporte, o el tipo de cosas que puedes y no puedes llevar en tu equipaje de mano.
  • Una cuenta atrás, para que los usuarios puedan realizar un seguimiento de las semanas, días, horas y minutos hasta que lleguen las vacaciones.

Llegó el momento de comprobar la realidad: nadie puede agrupar todas sus ideas en una sola aplicación. Incluso si todas tus ideas son razonables, bien pensadas y atraen a tu público objetivo, lanzando todo en una aplicación sería una pesadilla para ti como desarrollador, y probablemente conduciría a una experiencia de usuario terrible.

Imagínate lanzar una aplicación por primera vez y al instante ser confrontado por un menú enorme, complicado y lleno de una tonelada de opciones. Elegir es algo bueno, ¡pero demasiadas opciones te podrían confundir! Dado que lo último que quieres hacer es confundir a tus usuarios, tenemos que reducir nuestra lista de características definitivas a lo esencial.

Entonces, ¿cómo decidimos qué características existirán y qué características desaparecerán?

Para la versión inicial, debes concentrarte en las características que son esenciales para brindar la funcionalidad principal de tu aplicación. Y recuerda que el hecho de que una característica no se incorpore en la Versión 1.0 no significa que no estará incluida en una siguiente actualización. Si encuentras una característica en tu lista que tiene potencial, pero que no es esencial para cumplir con la tarea principal de tu aplicación, anótala como algo que vale la pena revisar una vez que hayas aprendido los aspectos fundamentales de tu aplicación.

Tu perfil de usuario y los casos de uso también deben desempeñar un papel en la determinación de las características que incluyes en la Versión 1.0 (y en las siguientes versiones). ¿Qué características son más probables que atraigan a Sasha?

Después de volver a leer el perfil del usuario, los casos de uso y la declaración del producto, me decidí por las siguientes características:

  • Reserva de viajes y alojamiento. Esto es absolutamente imprescindible: si Sasha al menos no organiza el transporte y un lugar para dormir, entonces no irá a ninguna parte.
  • Establecer un presupuesto. Sasha está financiando todo el viaje con los restos de su préstamo estudiantil, por lo que establecer un presupuesto es una prioridad para nuestra estudiante consciente del dinero.
  • Pegar un pin virtual en un mapa virtual. Sasha es una joven estudiante que busca reservar una aventura de verano con todos sus amigos, por lo que la idea de hacer algo un poco loco y espontáneo podría atraerla. Además, ¿recuerdas nuestro caso de uso en el que Sasha está pasando el rato con sus amigos y todos se están animando sobre lo mucho que se van a divertir este verano? Esta es la oportunidad perfecta para que Sasha realmente dé el primer paso iniciando nuestra aplicación y colocando un pin virtual en un mapa virtual.
  • Una lista. Dado que esta es la primera vez que Sasha participa en la planificación de sus propias vacaciones, tener una lista clara para trabajar haría que todo sea mucho menos intimidante.

Nuestra lista contiene otras características que atraerían a Sasha, como poder publicar fotos de su viaje, ya que sabemos que Sasha es fanática de todas las redes sociales. Sin embargo, para esta versión inicial voy a mantener las cosas simples y seguir enfocada en el objetivo principal de la aplicación. Una vez que hayas entregado la funcionalidad principal de tu aplicación y hayas cumplido con tu declaración de producto, puedes dirigir tu atención a todos esos extras adicionales agradables.

4. Haz un boceto del flujo de alto nivel

La siguiente tarea es empezar a pensar en las pantallas que necesitarás crear para entregar esta lista de características, así que toma un pedazo de papel y un bolígrafo o lápiz. Dibuja algunos diagramas de flujo aproximados de las rutas que tus usuarios pueden tomar a través de tu aplicación, con el fin de realizar las tareas principales.

Para mi aplicación de viajes, las tareas principales son:

  1. Reservar un viaje.
  2. Revisar detalles sobre cualquier viaje que el usuario ya haya planeado.

Por lo general, representarás las pantallas con formas y expresarás la navegación mediante líneas o flechas.

Example of a quick flowchart

Este ejercicio está pensado principalmente para que pienses en las diferentes pantallas que necesitarás crear, con el fin de ofrecer las características que escojas de tu lista de características definitivas. No le dediques demasiado tiempo a tu diagrama de flujo, ya que lo mejorarás cuando crees tu mapa de pantallas.

5. Crea una lista de pantallas

Luego, haz una lista de todas las pantallas que necesitarás crear, según tu diagrama de flujo.

Esta es mi lista de pantallas, además de una breve descripción general de lo que planeo incluir en cada pantalla:

  • Pantalla de inicio. Esta pantalla contiene un menú de cualquier viaje que el usuario ya haya planeado a través de nuestra aplicación. El usuario puede tocar cualquier elemento de este menú para ver la lista de ese viaje en particular. Alternativamente, pueden tocar el enlace "¡Planea una nueva aventura!"
  • Mapa. Esta pantalla contiene un mapa y un pin virtual. El usuario puede tocar una sección del mapa o, si se siente espontáneo, puede agarrar el pin virtual, cerrar los ojos y dejarlo todo en manos del destino.
  • Seleccionar una ciudad. Una vez que el usuario haya seleccionado el país que quiere visitar, esta pantalla sugiere algunas ciudades donde podría querer quedarse. Esta pantalla también contiene un slider donde el usuario puede informarle a la aplicación con qué tipo de presupuesto está trabajando.
  • Lista. Esta pantalla contiene una lista para que el usuario trabaje. Al tocar cualquier elemento de esta lista, se abre una pantalla donde el usuario puede completar esta tarea, que incluye:
  • Reservar el transporte.
  • Reservar un hotel.

6. Crea un mapa de pantallas

Es el momento de combinar nuestro diagrama de flujo y la lista de pantallas en un mapa de pantallas que exprese la relación de navegación entre todas estas pantallas.

Comienza con la primera pantalla que ve el usuario cuando inicia tu aplicación y continúa.

A screen map of our travel app

Nunca es demasiado pronto para empezar a buscar maneras de mejorar la experiencia del usuario, así que una vez que hayas creado tu mapa de pantallas, tómate un momento para verlo de forma crítica. Un factor que tiene un gran impacto en la experiencia del usuario es el número de pantallas que el usuario necesita navegar para completar las tareas principales de la aplicación.

En términos generales, cuantos menos pasos, mejor será la experiencia del usuario. Este mapa es la oportunidad perfecta para identificar lugares donde puedas reducir el número de pantallas que el usuario necesita para navegar. Esto puede implicar eliminar pantallas, combinar pantallas, reordenar pantallas o identificar lugares donde tendría sentido agregar un 'atajo' de navegación para que el usuario pueda saltar directamente de la pantalla A a la pantalla E.

Conclusión

Hasta ahora, hemos tomado algunas decisiones importantes sobre la aplicación que crearemos, incluyendo quién es nuestro público objetivo y qué características vamos a incluir en la versión 1.0 (con algunas características sobrantes para versiones posteriores). También hicimos una lista de todas las pantallas que necesitamos diseñar y bosquejamos cómo se organizarán estas pantallas en nuestra aplicación terminada.

En este punto, tenemos toda nuestra aplicación planeada, aunque a un nivel muy alto. En la parte 2, profundizaré y diseñaré las pantallas individuales que componen este mapa de pantallas, antes de poner estas pantallas a prueba mediante la construcción de un prototipo digital.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.