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 2

by
Difficulty:IntermediateLength:LongLanguages:

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

En la primera parte de esta serie de dos partes, te mostré cómo tomar una idea inicial para una aplicación de Android, y desarrollarla en un plan detallado, hasta el mapeo de las pantallas individuales que conformarán tu aplicación final.

Usando el ejemplo de una aplicación de viaje que ayudará a los usuarios a planear y reservar una aventura de verano llena de diversión con todos sus amigos, identificamos a nuestra audiencia objetivo creando una persona de usuario (¿recuerdas a nuestra amiga Sasha?) Y luego creamos una lista de características eso sería perfecto para la versión 1.0 de nuestra aplicación (y perfecto para Sasha). Finalmente, creamos una lista de pantallas y un mapa que muestra exactamente cómo todas estas pantallas encajarán juntas.

Cubrimos una gran cantidad de terreno en la primera parte, pero hasta ahora toda nuestra planificación ha sido un poco de alto nivel y abstracto. En la segunda parte, nos acercaremos de cerca y personalizaremos mediante bocetos y creación de prototipos de pantallas individuales que conformarán nuestra aplicación.

Al final de este tutorial, habrás creado un prototipo digital que puedes instalar y probar en tu propio teléfono inteligente o tableta Android.

¡Vamos a sumergirnos y comenzar a crear algunos wireframes (o bocetos)!

¿Qué es Wireframing?

El Wireframing es donde esbozas todos los principales componentes de UI que deseas colocar en una pantalla en particular. El propósito del wireframing es delinear la estructura de una pantalla; no se trata de los detalles más finos de cómo se ve una pantalla, así que trata de no dejarte atrapar por los detalles del diseño gráfico. Por ahora, es suficiente saber que vas a colocar un menú en la pantalla A; no tienes que preocuparte por qué color tendrá este menú ni cómo vas a darle estilo al texto del menú.

Para obtener más información sobre wireframing, consulta los siguientes recursos:

Los wireframes son bastante engañosos; pueden parecer bocetos rápidos y toscos, pero en realidad son una herramienta poderosa para explorar, definir y refinar la interfaz de usuario de tu aplicación. También pueden ayudarte a identificar cualquier defecto con tus diseños de pantalla iniciales, antes de invertir demasiado tiempo en perfeccionar estos diseños.

Es mucho más fácil poner una cruz grande a través de un wireframe, pasar la página en tu computadora portátil y comenzar de nuevo, que reescribir completamente el código en el que ya pasaste horas trabajando.

Entonces, ¡he cantado las alabanzas del bocetado lo suficiente! ¿Cómo se hace para crear un wireframe?

Tienes pocas opciones:

  • Dibuja tus wireframes con lápiz y papel.
An example of a paper wireframe
Una estructura wireframe de papel de la pantalla de Reservar un Hotel de nuestra aplicación.
  • Crea wireframes digitales utilizando software profesional de edición de imágenes como Adobe Photoshop, o un programa dedicado de wireframing como Pidoco, Axure, InDesign, Sketch, Omnigraffle o Balsamiq Mockups.

An example of a digital wireframe
Un wireframe de la pantalla de inicio, creado con Balsamiq.

¿Pero por qué restringirse a una herramienta, cuando puedes cosechar los beneficios de ambos? Los wireframes de papel y digitales tienen sus propios puntos fuertes y débiles únicos. El wireframing digital es perfecto para crear wireframes pulidos y precisos, pero navegar por múltiples menús no siempre es la mejor manera de hacer que esas ideas fluyan, ¡y ciertamente no es ideal cuando quieres probar rápidamente múltiples ideas diferentes! Por otro lado, los wireframes de papel son geniales para una sesión de lluvia de ideas de fuego rápido, pero es posible que tengas dificultades para crear wireframes de papel que sean precisos y lo suficientemente detallados como para servir como planos para el tipo de pantallas que va a crear.

Recomiendo crear tus primeros borradores con bolígrafo y lápiz (lo cual es ideal para hacer fluir esos jugos creativos) y luego, una vez que tengas un conjunto de wireframes de papel con los que te sientas satisfecho, puedes dedicar un tiempo a perfeccionar estos borradores usando software digital wireframing .

Este es el enfoque que utilizaré en este tutorial, pero ten en cuenta que wireframing es un ejercicio creativo, por lo que aquí no hay reglas estrictas. Usa el método que consideres mejor para ti.

Creando tu primer wireframe

Para darte la mejor visión posible del proceso de creación de prototipos y wireframing, voy a seleccionar una pantalla de mi aplicación de viaje y trabajar en ella a lo largo del resto de este artículo. La pantalla que voy a seleccionar como mi conejillo de indias es la lista de verificación, ya que pienso que esta pantalla en particular contiene algunos elementos de IU desafiantes que servirán de ejemplo interesante.

Solo para refrescar tu memoria, en la primera parte escribí la siguiente descripción de cómo imaginé la pantalla de la lista de verificación finalizada:

En su estado predeterminado, esta pantalla muestra una lista de todas las tareas que el usuario debe completar para planificar un viaje exitoso. Al tocar cualquier tarea, el usuario accederá a una pantalla donde puedes completar esta tarea. Cada vez que el usuario completa una tarea, este elemento se marca en su lista de verificación.

Para crear una primera estructura wireframe, agarra papel y tu implemento de escritura de elección, y luego dibuja el contorno rectangular típico de un smartphone o tablet.

Comenzaré agregando todos los elementos de navegación a mi wireframe. Al mirar el mapa de la pantalla, veo que el usuario debe poder acceder a tres pantallas de la lista de verificación:

  • Seleccionar una ciudad.
  • Reservar transporte.
  • Reservar hotel.

Estas pantallas representan dos tipos diferentes de navegación: navegación hacia atrás y navegación hacia adelante.

'Seleccionar una ciudad' es la pantalla anterior en el flujo de mi aplicación, por lo que representa al usuario retrocediendo a través del historial de la aplicación. Android maneja este tipo de navegación hacia atrás automáticamente (generalmente a través de la tecla programable 'Atrás' del smartphone o tablet) por lo que no necesitas agregar ninguna navegación explícita 'Seleccionar una ciudad' a tu UI.

Las otras dos pantallas son un poco diferentes, ya que representan el usuario avanzando en nuestra aplicación. El sistema no maneja la navegación hacia adelante automáticamente, por lo que es nuestra responsabilidad proporcionarle al usuario todo lo que necesita para poder navegar a estas pantallas.

Estos elementos de navegación van a tomar la forma de dos TextViews, que voy a organizar con el estilo de una lista de verificación (está bien, dos elementos no son una gran lista, pero si sigo trabajando en este proyecto eventualmente agregaré más tareas a esta lista). En su estado predeterminado, cada TextView le recordará al usuario que debe completar esta tarea, por ejemplo, "¡Aún necesitas reservar un hotel!" Cuando el usuario toque cualquier TextView, lo llevará a la pantalla Reservar transporte o Reservar un hotel, para que pueda completar esta tarea.

Cuando el usuario completa una tarea, el TextView correspondiente se actualizará para mostrar información sobre el hotel del usuario o sus arreglos de transporte (no voy a agregar nada de esta información a mi wireframe por ahora, pero es algo a tener en cuenta).

Para crear un efecto de lista de verificación, crearé un ImageView correspondiente para cada TextView. En su estado predeterminado, cada ImageView mostrará una cruz roja, pero una vez que el usuario complete una tarea, esta será reemplazada por una marca de verificación verde.

A first draft paper wireframe of the checklist screen

Finalmente, voy a agregar un título TextView, que mostrará lo que el usuario haya elegido para llamar a este viaje en particular.

A medida que vas construyendo tu wireframe, puedes encontrar elementos de la interfaz de usuario que podrían funcionar en numerosas posiciones y en diferentes tamaños. Crear un wireframe en papel no lleva mucho tiempo, así que si tienes alguna otra idea, tómate unos minutos para enmarcarlos. De hecho, debes intentar esbozar algunas alternativas para cada pantalla para que puedas decidir qué idea tiene más potencial.

A series of different wireframes for the checklist screen

Aclara y repite para cada pantalla qué compone tu aplicación, hasta que tengas un conjunto completo de bocetos en papel. El siguiente paso es convertir estos primeros borradores en wireframes digitales más pulidos.

Hay un montón de software creado específicamente para wireframing, por lo que vale la pena invertir un tiempo investigando sus opciones en Google, aunque si lo prefieres, puedes usar tu software favorito de edición de imágenes, como Adobe Photoshop.

Personalmente, ¡soy fanático de Balsamiq Mockups!

The checklist screen as a digital wireframe created using Baksmiq Mockups

Dedica un tiempo a crear y perfeccionar tu diseño en el software de elección, y debes estar atento a cualquier oportunidad para modificar y refinar tu wireframe. Trabajar con una nueva herramienta también puede arrojar algunas ideas nuevas, por lo que si repentinamente te impresiona una inspiración acerca de cómo puedes mejorar tu diseño, entonces toma papel y estructura las ideas. Si soportan el escrutinio del wireframing de papel, continúa y duplica estos cambios en tu wireframe digital.

Una vez más, aclara y repite para el resto de tus pantallas.

Prototipos de tu proyecto

Es hora de poner a prueba tus diseños creando un prototipo digital basado en tus wireframes.

Los prototipos te dan la oportunidad de obtener experiencia práctica sobre cómo se ve y funciona tu diseño en un dispositivo Android real, pero también te permite probar cómo se traduce tu diseño en múltiples configuraciones de pantalla, a través de dispositivos virtuales Android (AVD).

Entonces, ¿cómo se crea un prototipo digital?

La forma más fácil es usar Android Studio, que funciona como una poderosa herramienta de creación de prototipos digitales gracias al editor de diseño gráfico integrado del IDE. A lo largo de esta sección, utilizaré muchas de las nuevas funciones introducidas en Android Studio 2.2, por lo que si deseas seguirlas, asegúrate de ejecutar Android Studio 2.2 Preview 1 o una versión posterior.

Para crear nuestro prototipo, inicia Android Studio y crea un nuevo proyecto. Para mantener las cosas simples, voy a utilizar la plantilla 'Empty Activity'. Como probarás este prototipo en tu propio dispositivo Android, asegúrate de configurar el SDK mínimo del proyecto en algo que sea compatible con tu smartphone  o tablet.

Una vez que Android Studio haya creado tu proyecto, abre tu archivo activity_main.xml y elimina ese molesto TextView 'Hello World' que Android Studio agrega a este diseño de forma predeterminada. Asegúrate de tener seleccionada la pestaña 'Design' para que puedas ver la paleta y el lienzo de Android Studio.

¡Ahora estamos listos para dar vida a nuestro wireframe! Comencemos en la parte superior, con el título de la pantalla. Es bastante obvio que esto va a ser un TextView, pero ¿qué pasa con su contenido? Cuando el usuario comienza a planear un viaje, puede llamar a dicho viaje lo que quiera, entonces, ¿cómo sabemos qué texto usar en nuestro prototipo?

Tratar con texto variable es un tema recurrente en este prototipo, así que tomemos unos minutos para explorar este problema con más detalle ahora.

Los prototipos son una herramienta poderosa en el arsenal de los desarrolladores de aplicaciones, pero no nos dejemos llevar: cuando una pantalla contiene elementos variables, no hay manera de que puedas prototipar cada una de las versiones de esa pantalla. Este es ciertamente el caso con nuestra lista de verificación, ya que el usuario podría nombrar cualquier viaje, desde el conciso Viaje 1 hasta las duras y excitadas vacaciones de verano llenas de diversión, y todo lo que se encuentre en el medio.

Si bien es imposible probar todos los títulos concebibles, un prototipo es la oportunidad perfecta para poner tu diseño bajo una gran presión probando las variables más extrañas y maravillosas que te puedas imaginar.

Para mi prototipo checklist, crearé tres recursos de cadena: uno que representa el título "típico" que imagino que preferirán la mayoría de los usuarios, uno que es inusualmente corto y uno que es realmente largo. Probar estos extremos es una de las formas más efectivas de eliminar cualquier posible problema que pueda estar al acecho en tus diseños de pantalla.

Una vez que hayas creado estos recursos de cadena, debes darle un lugar para vivir a este texto, así que toma un TextView de la paleta y colócalo en el lienzo.

Android Studio 2.2 introdujo los conceptos de restricciones, que son útiles para construir rápidamente prototipos digitales (y las interfaces de usuario en general). Puedes crear restricciones manualmente, pero ¿por qué hacer todo ese esfuerzo cuando Android Studio puede hacer el trabajo por ti?

Hay dos maneras de lograr que Android Studio cree restricciones para ti, así que vamos a explorar ambas. El primer método es utilizar la conexión automática, así que asegúrate de tener este modo habilitado al alternar el botón Autoconnect (donde se ubica el cursor en la captura de pantalla a continuación).

Select Android Studios Autoconnect button

Ahora, arrastra tu TextView al lugar donde debería aparecer en tu diseño. Quiero que mi título esté centrado, así que voy a arrastrar el TextView al centro del lienzo y lo soltaré. Cuando sueltes el TextView, Android Studio responderá al crear todas las restricciones necesarias para mantener este TextView en su lugar.

Ten presente que cuando dos restricciones están tirando de un widget en direcciones opuestas, esas restricciones aparecen como líneas irregulares, por lo que estas restricciones se ven diferentes a las restricciones regulares.

Drag the TextView widget into the correct position and Android Studio will create constraints automatically

Si no estás seguro de si tu TextView está perfectamente centrado, arrástralo ligeramente a lo largo del eje horizontal. Los Tooltips aparecerán a cada lado del widget, mostrando su posición actual a lo largo del eje horizontal izquierdo y derecho. Arrastra el TextView hasta que obtengas una división pareja de 50/50.

Establece este TextView para mostrar uno de los recursos de cadena que creaste para tu título; en realidad no importa con qué cadena empieces, ¡ya que los probarás todos de todos modos!

A continuación, vamos a construir nuestra lista de verificación. Voy a utilizar dos imágenes en mi lista de verificación: una marca verde que aparecerá cuando el usuario haya completado una tarea, y una cruz roja para indicar que este elemento aún está firmemente en la lista de tareas del usuario. Crea estas imágenes y agrégalas a la carpeta drawable de tu proyecto.

Ahora, abre tu archivo strings.xml y crea los dos mensajes predeterminados:

  • ¡Necesitas reservar un hotel!
  • ¡Tienes que ordenar el transporte!

Arrastra dos TextView desde la paleta y colócalos en el lienzo; no te preocupes si todo está perfectamente alineado todavía. Establece estos TextView para mostrar tus recursos de cadena predeterminados.

A continuación, toma dos ImageView de la paleta y colócalos en el lienzo. A medida que sueltes cada ImageView, Android Studio te pedirá que selecciones un drawable para mostrar. Vamos a comenzar creando un prototipo de la versión predeterminada de esta pantalla, por lo tanto, selecciona la imagen de cruz roja para ambos ImageView.

En este punto, hemos agregado todos los elementos de interfaz de usuario necesarios, pero dado que los dejamos caer al azar en el lienzo, es probable que tu prototipo no se parezca mucho a tu wireframe. Una vez más, ¡son limitaciones para el rescate!

La segunda forma en que Android Studio puede crear restricciones automáticamente es a través del motor de inferencia. Dedica un tiempo a arrastrar tus TextView e ImageView a la posición perfecta en el lienzo, y luego presiona el botón Infer constraints de Android Studio (donde el cursor se ubica en la captura de pantalla siguiente).

Al hacer clic en este botón, Android Studio creará automáticamente todas las restricciones necesarias para entregar tu diseño actual.

Select the Infer Constraints button

Esa es la versión predeterminada de esta pantalla ordenada, pero también debemos probar cómo se adapta esta pantalla una vez que el usuario comienza a verificar las tareas de su lista de tareas pendientes. En última instancia, quiero que estos TextView muestren información básica sobre las reservas de hotel y los arreglos de viaje del usuario. Esto nos enfrenta a un viejo enemigo: Texto variable.

Esta pantalla debe ser lo suficientemente flexible como para mostrar información sobre hoteles (y aeropuertos, estaciones de tren, etc.) con nombres seriamente largos, pero al mismo tiempo no debería parecer extraño si el usuario reserva en un hotel tan moderno que su nombre es una sola letra, o el símbolo pi (sí, es ese tipo de hotel).

Una vez más, la solución es crear múltiples cadenas que representen el texto más incómodo que tu diseño podría tener que manejar. Si no estás seguro de cuán extremo debes llegar a ser con tus recursos de cadenas, siempre puedes recurrir a tu amigo en Internet para obtener orientación. En este escenario, dedicaría un tiempo a investigar sobre hoteles y aeropuertos, buscando específicamente aquellos con nombres largos, cortos o francamente extraños, y luego usaría los mejores ejemplos en mis recursos de cadenas.

Una vez que hayas creado todos tus recursos, puedes hacer algunas pruebas preliminares cambiando entre los diferentes recursos de cadenas y los elementos extraíbles, y luego verificando los resultados en el editor de diseño incorporado de Android Studio.

Si bien esto no te da el mismo nivel de conocimiento que probar tu aplicación en un dispositivo Android real o AVD, es mucho más rápido, por lo que es la forma perfecta de identificar cualquier problema inmediato y evidente con tu diseño.

Lo más probable es que necesites mezclar tus TextView e ImageView un poco para encontrar el equilibrio perfecto entre un diseño que puede mostrar una gran cantidad de texto y un diseño que no parece extraño cuando solo tienes que mostrar algunas letras.

Si necesitas hacer algunos ajustes (¡sé que tenías que hacerlos!), Simplemente toma los widgets en el lienzo y arrástralos a una nueva posición. Una vez que estés satisfecho con los resultados, simplemente haz clic en el botón Infer constraints con otro clic y Android Studio creará un conjunto de restricciones completamente nuevo para ti.

Aquí está mi prototipo terminado.

The finished digital prototype

No está mal, pero la verdadera prueba es qué tan bien se traduce este diseño en smartphones, tablets y dispositivos AVD con diferentes configuraciones de pantalla, así que esto es exactamente lo que vamos a hacer a continuación.

Probando tu prototipo digital

No hay sustituto para obtener experiencia práctica sobre cómo se ve y funciona tu prototipo en un dispositivo real, así que comienza por instalar tu proyecto en tu propio smartphone o tablet Android y dedica un tiempo a interactuar con él, solo para familiarizarte con el prototipo en cuanto a la experiencia general del usuario ¡No olvides probar tu prototipo tanto en modo horizontal como vertical!

Si identificas algún problema u oportunidad para mejorar tu diseño de pantalla, apúntalo, para que sepas exactamente qué cambios debes aplicar una vez que hayas terminado de probar tu prototipo.

Si tu aplicación proporcionará la mejor experiencia para todos tus usuarios, entonces debe ser lo suficientemente flexible como para adaptarse a un rango de configuraciones de pantalla. Una vez que hayas probado exhaustivamente tu prototipo en tu propio dispositivo Android, debes crear múltiples AVD que tengan diferentes tamaños de pantalla y densidades, y luego probar tu prototipo en todos ellos. De nuevo, si notas algo "desactualizado" sobre tu prototipo, o tienes una idea sobre cómo podrías mejorar el diseño, anota estos cambios para que no los olvides.

Una vez que hayas probado completamente la versión predeterminada de tu diseño, debes probar cómo se adaptará tu prototipo una vez que el usuario comience a marcar las tareas de su lista de verificación.

Actualiza ambas ImageView para mostrar la marca verde que se puede dibujar, y cambia el texto predeterminado para dos de los recursos de cadena alternativos; una vez más, dado que probaremos todos nuestros recursos de cadenas, en realidad no importa con qué cuál de los dos empieces.

Coloca esta nueva versión de tu prototipo a través del mismo proceso de prueba vigoroso, lo que significa instalarlo en tu dispositivo Android para obtener experiencia práctica y luego probarlo en AVD con diferentes configuraciones de pantalla. Como siempre, toma nota de tus hallazgos. Luego, aclara y repite para todos los recursos de cadena que creaste para tu lista de verificación y llámalas TextView.

Una vez que hayas terminado de probar, debes revisar tus notas. Si solo necesitas hacer pequeños ajustes, entonces podrás salirte con la tuya aplicando estos cambios directamente a tu prototipo y tus wireframes digitales. Sin embargo, si estos cambios son más dramáticos o equivalen a un rediseño completo, entonces debes dedicar un tiempo a explorarlos con más detalle primero. Idealmente, debes poner tus nuevas ideas a través del mismo proceso de wireframing, prototyping y testing como tus ideas iniciales, ya que esta sigue siendo la forma más efectiva de resolver cualquier problema con tus diseños.

Claro, es frustrante encontrarte en la etapa de wireframing cuando parecía que ya casi habías terminado con todo el proceso de diseño, pero el tiempo dedicado a explorar nuevas ideas siempre es un tiempo bien empleado.

Incluso si terminas descartando estas ideas en favor de tu diseño original, al menos sabrás que realmente estás trabajando con los mejores diseños de pantalla que puedas imaginar. No hay nada peor que invertir una tonelada de tiempo y esfuerzo en un proyecto, cuando todo el tiempo tienes una duda persistente en el fondo de tu mente de que tal vez, solo tal vez, deberías haber tomado una ruta diferente.

Básicamente, si el prototipado ha despertado nuevas ideas, ¡ahora es el momento de explorarlas!

Una vez que hayas probado todas las versiones de tu prototipo en un rango de AVD, solo queda una cosa por hacer: crear un prototipo para cada pantalla en tu screen map y someter cada una al mismo nivel de escrutinio.

Resumen

En esta serie de dos partes, vimos cómo tomar una idea inicial y desarrollarla en un diseño detallado.

Esto puede sonar como un montón de trabajo (porque, seamos honestos, es mucho trabajo) pero cada paso de este proceso te ayudará a eliminar cualquier problema con tu diseño y a tener en cuenta las oportunidades para mejorar tu aplicación.

La planificación, el wireframing y el prototipado en realidad pueden ahorrarte tiempo a largo plazo al reducir tus posibilidades de tener que lidiar con problemas mayores más adelante. Tan pronto como comiences a escribir el código, solucionar problemas de diseño se vuelve mucho más difícil.

Pero, en última instancia, invertir tanto tiempo y energía en perfeccionar el diseño subyacente de tu aplicación te ayudará a ofrecer una mejor experiencia para tus usuarios. Eso significa más descargas, más críticas positivas y más personas que recomienden tu aplicación a sus amigos y familiares, y ¿quién no querría eso?

Advertisement
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.