Episodio 12: Cómo diseñar una app

Escrito por GoodBarber Team el Miércoles 23 Noviembre 2016

En el duodécimo episodio de Push Your App hablamos con Guillermo Seis, diseñador de apps móviles quien nos ayudará a diseñar una buena app para iOS y Android. Nos dará trucos y consejos para mejorar nuestra app y su experiencia de usuario.

Seguidamente adjuntamos la transcripción de la entrevista al completo:

Bienvenidos al duodécimo capítulo de Push Your App:

Sara:"Bienvenidos a un nuevo capítulo de Push Your App, el podcast en el que descubrimos juntos el mundo de las aplicaciones. Hablaremos de novedades, trucos, técnicas y noticias con desarrolladores, expertos en mk, periodistas especializados, diseñadores y mucho más… Yo soy Sara Guiral.”

Michele: “Y yo soy Michele Pisani.   Y juntos entrevistaremos en cada capítulo a una persona relacionada con este magnífico e intrigante mundo de las aplicaciones.  

Hoy en el programa tenemos a: Guillermo Seis, Diseñador Digital donde actualmente trabaja para la agencia Pulpmedia. Guillermo ha trabajado para marcas como Runtastic, Jameson Whiskey, Suzuki entre otras desarrollando innovación de productos, diseño web y apps.   Con él hablaremos sobre el diseño de las aplicaciones móviles.

 ¡Hola Guillermo! “

Guillermo: "Hola, muchas gracias por invitarme al programa!”

Sara: "¡Hola Guillermo bienvenido! Muchas gracias por aceptar nuestra invitación, estamos encantados de tenerte con nosotros. Bueno cuéntanos un poquito sobre ti y cómo acabaste siendo diseñador.”

Guillermo: "Bueno pues, es una larga, larga historia, pero en resumen estaba en la preparatoria y me llamaron a un salón y éramos como cinco y seis personas. Y nos dijeron estamos formando un equipo para una revista y creemos que ustedes podrían estar interesados. Durante esta etapa, descubrí que era diseñar y que era el diseño, cuando tenía 16 años y a partir de ahí empecé a descubrir más cosas en YouTube, tutoriales, y me di cuenta que el diseño podría ser transformado de papel al mundo digital y es donde estoy ahora."

Michele :"¿Qué te llevo al diseño móvil en particular y no a web, por ejemplo? ¿Qué es lo que más te motiva de este campo?”

Guillermo: “Yo no creo que me haya dirigido totalmente al diseño móvil, sí que es lo que más estoy desarrollando en el momento, pero yo me considero un diseñador digital porque lo que incluye mi rama es desarrollar productos en una gran variedad de pantallas. Entonces, estamos hablando que ahora con la digitalización, la industria es muy disruptiva, se tiene que diseñar no sólo para una aplicación sino también para Apple Watch y luego vienen más cosas como Google Glass, pero todas las interfaces que estamos viendo hoy en día están evolucionando entonces, creo que mi rol es más estar adaptándome a este juego de como evoluciona la industria digital. Estamos hablando de “artificial inteligence” y en este punto estoy desarrollando más móvil porque es la tendencia y es lo que la gente está consumiendo.  Como diseñadores está bien que te quieras localizar en una area, no hay nada malo en eso, pero las cosas están evolucionando tan rápido que, el día de maña, puede ser que el día de mañana puede ser que haya otra necesidad que no sea el diseño móvil. Entonces, hay que mantenerse siempre con el ojo abierto."

Sara:"Y bueno, entrando en materia: ¿qué es la experiencia de usuario que siempre escuchamos hablar siempre?”

Guillermo: “Bueno, la experiencia de usuario se ocupa más de nada de como se siente un producto. Nos encargamos de explorar, observar y solucionar un problema con esto. Entonces, el trabajo se encuentra en dar un funcionamiento lógico y que los usuarios puedan concluir su tarea de la manera más rápida posible. Entonces, si estamos hablando de que la solución de la app es enviar un email, cómo podemos facilitar este proceso. Entonces, esa sería mi opinión sobre que es UX, experiencia de usuario.

Michele: "¿Cuando creamos una app cómo podemos ofrecer la mejor experiencia de usuario?”

Guillermo: “Pues, hay muchas maneras de ofrecer la mejor experiencia de usuario. Una podría ser haciendo “Research” ver que están haciendo otras empresas y saber porqué están haciendo eso y mejorar. Siempre es importante tener un buen punto de exploración para entender la solución adecuada y cómo mejorarla. También hay que hacer mucho A/B testing porque ahora es mucho más sencillo de ver que es lo que está haciendo un usuario realmente con tu aplicación, que quiere hacer y donde se encuentra frustrado en el proceso. Y tu tarea como diseñador es solucionar este problema, agilizarlo y evitar que el usuario se frustre."

Sara: “¿Qué app que está ahora en el mercado dirías que tiene muy buena experiencia de usuario?”

Guillermo: “Spotify, realmente si analizas o comparas Spotify con Apple Music es muy diferente la sensación de buscar, escuchar y descubrir música con Spotify que en Apple Music, porque lo encuentro demasiado frustrante porque también hice testing en ambos para ver cual era la mejor app y al final me quedé con Spotify. Creo que lo que están haciendo ellos, que llevan años haciéndolo, les ha dado resultado. Creo que también es interesante ver lo que está haciendo Uber, la semana pasada lanzaron el re-diseño de su app y es interesante como están simplificando los procesos para que el usuario pueda resolver sus problemas de la manera más fácil posible."

Sara: "¿Cuáles son tus top 3 buenas prácticas?”

Guillermo: “Buenos pues mis top 3 buenas prácticas, pues diría que hubo una tendencia en implementar Burguer Icon y tenerla en tu app, y sí, se veía muy bonito. Pero creo que esta solución está hecha para cuando estás haciendo un diseño responsive, para web. Cuando hablamos de mobile tenemos que hacer unos cambios, tenemos que adaptarnos y Burguer Icon no estaba resolviendo las necesidades que una app móvil necesita." 

Sara: “El Burguer Icon, es el Swipe, el que tiene el menú en el lateral.”

Guillermo: “Exacto, el de las 3 líneas . Lo que se empezaron a dar cuenta las personas es que era un proceso más tedioso en una aplicación hacer tantos clics, la gente pasaba menos tiempo en la app porque era más difícil descubrir una funcionalidad. Entonces, yo recomendaría, número 1: TabBar para iOS, en esta todas las funcionalidades están abajo, puedes descubrir cosas literalmente cuando abres la app. Entonces, es menos clicks y puedes descubrir más cosas sin tener que darle clic al otro botón y descubrir que hay detrás. Esta sería mi mejor práctica. Pero también si vemos en Android ellos están haciendo cambios. Ellos también tienen la TabBar pero en la parte de arriba, porque se dieron cuenta igual de que no era la mejor manera de poner su navegación. Android tiene una combinación de ambas, pero al final, creo que varias personas concluyen que la mejor manera de tenerlo sería una TabBar. La otra mejor práctica y muy importante para los diseñadores es tener en cuenta el tamaño, la tipografía y el contraste . A veces, cometemos el error, más los diseñadores, de diseñar algo tan bonito que nos olvidamos que las personas no lo pueden leer. Entonces, empiezan a usar grises que casi no se pueden leer con blanco, o la tipografía es muy pequeña, considerando que móvil ya es muy pequeño y hacemos la tipografía, los títulos, los encabezados muy pequeños con un bajo contraste. Entonces, una de las cosas que está invitando mucho Apple es tener una tipografía más grande que puedan leer y con un mejor contraste, este sería mi segundo tip. El tercer tip sería iconografía , creo que mucha gente escoge iconos que no van con la funcionalidad de la sección, entonces, tendría mucho cuidado con eso y en como se está presentando en la app."

Michele: ”Ya nos has hablado de algunas buenas y malas prácticas, te saloe algo más, relacionado con las malas prácticas.”

Guillermo: “Realmente no creo. De las buenas prácticas salen las malas prácticas, como las tipografías y contrastes los podemos ver. Por lo que no tengo nada más que añadir, por el momento.”

Sara: ”¿Cuando una empresa quiere pasar de la web a la app , cómo tiene que adaptar su diseño corporativo?”

Guillermo: “Antes que nada, creo que al cliente se le tiene que explicar o tiene que entender que cada lienzo es diferente, lo que es web puede ser similar a una app pero son dos lienzos totalmente diferentes. La primera recomendación que yo haría seria que si el logotipo es demasiado grande, porque hay logotipos muy muy raros que no están adaptados a la era digital, haría un ajuste de logotipo, lo que se llama responsive logo que depende del tamaño de la pantalla el logotipo debe cambiar pero manteniendo la esencia que lo distingue. Recomendación número 1: responsive logo. Luego que tiene que ver que la app cubra una necesidad diferente a la de la web, porque si el quiere hacer lo mismo de web en una app, para qué quieres una app. Entonces, creo que esa es una de las preguntas que se deben hacer antes de hacer esta transformación y también darse cuenta de que los contenidos que se muestran en una aplicación son diferentes a los de la web. Deben considerar también hacer una transformación de su branding, porque me ha pasado que hay empresas o clientes que te dicen es que yo quiero este elemento que está siempre en mis tarjetas de presentación, pero es horrible y luego lo quieren enorme en una aplicación. Pues prácticamente son los retos de un diseñador y decirle al cliente cuando está entorpeciendo la experiencia del usuario final. Serías más como: como nosotros diseñadores podemos guiarles a que entiendan la solución que le damos es la adecuada.”

Michele: "¿Cuál es el proceso de diseño de una app, por qué etapas pasas?”

Guillermo: “Yo trabajo en una agencia, que es muy diferente a trabajar en una start-up. Primero yo recibo un breaf que es donde nos dicen que es la app que es lo que el cliente quiere lograr con ella… y yo diría que el proceso empieza ahí. Empiezo a hacer una exploración, lo que llamamos research de porque esa es la mejor solución, como podemos optimizarla, ver que hay en el mercado y entender las soluciones que en el mercado ya existen. Luego de hay propondría que el siguiente paso sería, empezar a hacer sketching, cuando empiezas a hacer este proceso tu mente empieza a conectar todos los puntos, es muy importante que tengas este proceso porque tu mente está trabajando y todos los puntos empiezan a conectar. Después haría un wireframing, que sería el paso número 3, que tomas tu sketch hecho papel a tu computadora, pero en este paso tu todavía no te enfocas a generar un estilo, lo importante aquí es hacer un esqueleto para llevarlo al siguiente paso que sería un prototipo y aquí es donde empiezas a ver como el usuario responde a tu aplicación, a tu solución, a tu app. El siguiente paso sería testing, o el test, después de eso pues obviamente viene el feedback y a veces nos damos cuenta de que nuestra solución no era la adecuada. En ese momento tienes que entender porque el usuario está tomando ese camino y cómo ayudarlo, porque al final, por eso estás ahí. Después de ese test empiezas a implementar más estilo, empiezas a darle un branding a la app, empiezas a construir lo que sería más hacerlo ver bonito y volverlo a testear. Creo que proceso lo tienes que repetir dos o tres veces. Es el proceso donde implementas más tiempo, pero creanme es la parte más fundamental de tener una app exitosa."

Sara: “El test lo haces tú o es una tercera persona”

Guillermo: “Siempre es una tercera persona, porque tú como diseñador hacer argumentos, tú dices: yo considero que esto, esto, esto es lo que estás haciendo es una conclusión de algo que va a pasar, por eso una tercera persona haga el testing, porque esa es la persona que se va a topar con tu aplicación. Después de eso ya viene el paso de delyver, que es cuando haces UI guidelines y exportas todos los elementos y se lo pasos al developer.
Entonces en resumen el proceso sería: research, skeacthing, wearframing, prototype y testing. De ahí viene la parte de testing y delyver."

Sara:”¿Cuáles son las principales diferencias de diseño entre Android e iOS?”

Guillermo: “Primero les recomendaría a todos, incluso los developers, que lean los guidelines que iOS y Google pusieron en línea. Creo que antes de empezar a diseñar si no tienes idea que existen guidelines, primero léelas. Son muy muy importantes. Una de las diferencias podría ser la navegación, pues iOS tiene el TabBar y Google todavía tiene el flat menú o el burguer menú. También tenemos la diferencia en el que Google se encarga de mostrar cartas y Apple no, Apple muestra más como scroll down. También podríamos incluir las tipografías, el estilo de los botones, que cuando diseñas en iOS tienes las resoluciones de pixeles y en Android el dpi. Es muy importante que sepas esas diferencias porque cuando estás exportando iconos te puedes dar golpes, más que nada en Android porque tienen más de 5 resoluciones si entiendo bien. Diseñar para Android es más complicado. La iconografía también muestra diferencias, Android muestra una iconografía un poco más gruesa e iOS tiene una iconografía más ligera. Se puede decir que esas son las principales diferencias. “

Michele:"Los iconos son la carta de presentación dentro de una app, ¿qué trucos aplicas al diseñarlos?”

Guillermo: “Creo que no existen trucos, creo que aquí depende de tu tarea de diseñador de cómo tu quieres presentar. Yo recomendaría implementar el branding de la app, si ya he construido una app y tiene cierto branding usaría esos colores, yo recomendaría que usaras una imagen en vez de ilustraciones. Las ilustraciones pasan de moda muy rápido, se puede decir que ahora hay una tendencia a ciertas ilustraciones que son de líneas, que son flat pero el día de mañana puede ser que venga algo nuevo y tienes que invertir tiempo haciendo esa optimización. En cambio, si tienes una imagen esta va tardar más tiempo en pasar de moda, si pones una imagen con un tratado de color o un prototipo.“

Michele :”Cuando se trata de usar tipografías, ¿cuáles utilizas y recomiendas?”

Guillermo: “Si estás diseñando para Android yo recomiendo que uses Roboto , si estás diseñando para iOS yo recomiendo San Francisco . Sin embargo, a veces, las tipografías no transmiten el feeling que quieres dar, sólo tienes que recordar que la tipografía tiene que ser legible y no muy pequeña. Sólo tener atención, ojo a eso.

Otra de las tipografías que estoy empezando utilizar y que utilizo mucho se llama circular+Fonts/Font+Categories/Text+Fonts/Circular/ y es la tipografía que está utilizando Spotify y se me hace muy bonita, cortita, amigable… “

Sara: "El encabezado se ve en casi todo momento y es un elemento clave para mostrar la identidad de la app, ¿cómo recomiendas que sea?“

Guillermo: “Yo recomendaría utilizar la tipografía que estás utilizando en toda la app, porque es branding. Entonces imagínate que estás usando Circular, pues pondría una palabra con esa tipografía. En raros casos se pone el logo porque no siempre se ajusta. Es muy difícil encontrar que el logotipo se ajuste. Yo muchas veces lo que hago es colocar la palabra de la empresa con la misma tipografía. “

Michele: "¿Con qué herramientas sueles trabajar?”

Guillermo: "Yo trabajo ahora con Sketch que es una herramienta que el auge empezó hace dos años y Skecth está pensado para que tu puedas hacer diseño para apps, web, diseño digital de la mejor y amigable manera posible. Antes en el mercado se utilizaba mucho Photoshop y a mi como diseñador lo encontraba totalmente irritante cuando tenía que exportar, cuando tenía que poner medidas, cuando ponía mi tipografía y no se mostraba como me gustaría. Sketch soluciona todos estos problemas, por eso lo recomendaría. Este lo puedes conectar con un programa que se llama zeplin , entonces lo que hace zeplin es darle todos los assets y parte del código como stylement al desarrollador, entonces es menos trabajo para ellos. Si combinas sketch yzepling tienes el Queen ganador. Para prototipos utilizo Invision y también estoy empezando a usar Origami y también uso Photoshop, esto lo uso cuando tengo que hacer arte, cuando tengo que jugar con imágenes, cuando tengo que hacer más arte que diseño móvil. Entonces, lo exporto y lo pongo en sketch, es muy fácil.

Sara: “¿Hacía donde crees que va la industria tecnológica?”

Guillermo: “Es una pregunta muy compleja porque en este momento estamos diseñando para varias cosas y la pregunta siempre es, lo podemos hacer. La tecnología ha crecido tanto y ha evolucionado tan rápido que es casi imposible determinar que va a ser lo siguiente. Ahora estamos viendo que snapchat está haciendo apps y productos que se conectan con la era digital. El producto que lanzaron es Spectacles y son estos lentes que te pones y puedes grabar tu día y publicarlo en snaptchat. Imagínate si eso ya está allí... Estamos viendo chatbot, como la inteligencia artificial está evolucionando. Yo creo que en un futuro estaremos diseñando para productos que no conocemos, estaremos diseñando para más cosas, no sólo para tu reloj…”

Sara: “Todo un mundo integrado.”

Guillermo: “Exacto, todo va a ser digital, es por eso que tú como diseñador tienes que tener los ojos abiertos a como tu puedes diseñar ese pedacito del futuro y creo que eso es lo que me encanta del futuro. Siempre mantenerte alerta y hacerte tú mismo las preguntas, con esta tecnología que puedo lograr. En esta industria es donde considero que hay más productos, más diseño, y considero que nuestro trabajo es hacer la tecnología más humana, que no se sienta digital, que se sienta parte de tu día a día.”

Michele: “¿Y para acabar, qué aplicación te ha llamado la atención últimamente? "

Guillermo: “Últimamente me llamado mucho la atención el rediseño de Uber como simplificaron la plataforma, habría que ponerlo un buen ojo. También, descubrí una nueva aplicación que se llama HouseParty que no es la cosa más bonita pero permite hacer llamadas con mis amigos y todos estamos compartiendo la misma pantalla, entonces puedes hablar con todos desde pantalla, en el celular. Tengo una amiga que está en Argentina, una en Mexico, y house parte lo que hace es que me avisa de que Carolina está "in the house" y nada, al hacer clic nos ponemos a hablar. También, hay una app que me llama la atención, que se llama Cinemagraph app y ellos que haces es que tú haces un video estático y puedes seleccionar que quieres que se mueva del vídeo, entonces es como tomar una fotografía pero ciertas cosas se mueven. Entonces, no se si te acuerdas de Harry Potter cuando el veía sus fotos y se movían, Cinemagraph hace eso posible. Entonces, igual podría mejorar el diseño de interfaz pero creo que la solución que le están dando los usuarios es muy bueno, están dando un buen resultado, van en buen camino. “

Sara: “Guillermo muchas gracias por estar aquí hoy con nosotros en este podcast. Estamos muy contentos de que hayas compartido tu experiencia con nosotros. ¿Dónde te pueden encontrar nuestros oyentes?"

Guillermo: “Pues me pueden encontrar en Guillermo Seis, busquen en dribbble y allí es donde voy subiendo cada mes lo que estoy haciendo en cada momento.

Michele: “Bien, pues gracias Guillermo ha sido un placer.”

Sara: "Y muchas gracias a todos por escucharnos, por estar aquí y por vuestras valoraciones en iTunes, vuestros me gusta en iVoox y likes en Soundcloud."

Michele:" Hasta el próximo Miércoles a las 10:10, con una nueva entrevista!  Buenos días! :)"

Si quieres lanzarte en el mundo de las apps, dale una ojeada a nuestro ebook gratuito ⬇️