Diseño de interfaces para mobile apps

Hablar de diseño de interfaces para aplicaciones móviles, no significa hablar de diseño totalmente enfocado para celulares como muchos suelen creer. No nos tenemos que olvidar de otros tantos dispositivos portables como son las tablets, netbooks, entre otros.

Dispositivos

Hoy en día tenemos a nuestro alrededor un sinfin de dispositivos móviles de diferentes marcas, tamaños, resoluciones, sistemas operativos, funcionalidades, etc. Es por esto que siempre que se quiera realizar el diseño de una aplicación se tiene que pensar para todos ellos con sus –en algunos casos– muy diferentes características.

Es importante detallar que para diseñar no es necesario tener una infinidad de dispositivos móviles para hacer pruebas en cada uno de ellos y verificar que todo funcione como realmente lo planeamos. Tomando las resoluciones de los más importantes que tenemos en el mercado hoy en día podemos crear interfaces altamente poderosas que se adapten a todos los demás que no tenemos a nuestro alcance.

No pasa lo mismo para los desarrolladores donde si deben realizar pruebas de las funcionalidades y testing en los dispositivos que quieran hacer funcionar las aplicaciones que desarrollan y así poder verificar todo a la perfección.

Diseño adaptado

El diseñador mobile tiene que contemplar cada adaptación de la interfaz como un diseño en paralelo, que no tiene porque ser estrictamente igual a los otros diseños en las demás resoluciones y sistemas operativos que tiene que realizar para una misma aplicación. Algo que sucede muy a menudo es que una misma aplicación es igual en cuanto al diseño y estructura de la interfaz en smartphones y tablets, algo que muchas veces está mal. Sin importar si es bajo el mismo OS (sistema operativo) o no, estamos hablando de dos dispositivos con tamaños, resoluciones y formas de uso diferentes.

Por otro lado, si adentramos en los diferentes OS que tenemos, nos damos cuenta que cada dispositivo tiene una forma determinada diferente de uso y ésta debe ser respetada. El usuario del mismo está acostumbrado a dicha forma, a dicha plataforma (OS) y por eso debemos seguir los lineamientos necesarios para cada caso. Si vemos las grandes compañías como Apple, Google y Microsoft, tienen extensos documentos de cómo debe ser el desarrollo y diseño de sus aplicaciones, los cuales no respetan totalmente ciertas normas o estándares impuesto por su par.

Haciendo paralelismo, es algo que viene sucediendo, desde el comienzo de internet hasta la fecha, con todos los navegadores web. Cada uno crea su propio estándar y entorno según le parece o convenga, muchas veces haciendo mayor foco en su estrategia empresarial que en los pro y contras que le puedan causar al usuario. Algo que por suerte se ha venido cambiando en los últimos años y doy fe que pronto se unificará aún más en un criterio (estándar) común para todos.

El contenido es el Rey

Los últimos años venimos escuchando que el contenido es el rey, ¿realmente lo es?. Creo que si, aunque es cada vez más notorio que el usuario siempre tiene la última palabra.

Por suerte en la actualidad cada vez se le hace mayor enfoque a respetar y resaltar la claridad del contenido y ayudar en la fluidez que el usuario debe tener a la hora de navegar dentro de una aplicación. Estos son factores claves. El usuario de hoy en día tiene una gran cantidad de información que lo rodea, son sitios y sitios, apps y apps, más todos los amigos que generan un ruido muy fuerte en las Redes Sociales haciendo que el usuario no pueda tener un foco claro de lo que realmente está buscando. Es por esto que debemos ayudarlo cuando está dentro de nuestra aplicación, sitio web, o lo que sea. De esta forma es que debemos hacer todo lo más intuitivo posible, que la interacción que éste frente al contenido en general sea fluida. De lo contrario haremos que se vaya rápidamente, borre la aplicación de su dispositivo móvil o se genere un comportamiento semejante haciendo que rara vez vuelva.

El contenido pasa a ser un valor muy importante dentro de nuestra aplicación, se apodera en cierta forma de la navegación de la misma, el diseño y cómo el usuario va a interactuar con él mientras navega por la interfaz. Ya no se trata de copiar y pegar texto, debemos cuidar cómo y dónde lo ponemos, cómo estructuramos los bloques de texto junto con las imágenes, etc.

Algo que recuerdo de mi paso por Bellas Artes, era un cita de Da Vinci que decía que sus manuscritos eran por si solos obras de arte.

“Los espacios que formaban los textos interactuando con los bosquejos eran una obra de arte en si misma”.

Si lo traemos a la realidad de hoy en día y continuando con los paralelismos, podríamos decir que se asemeja a las tan codiciadas infografías que encontramos en varios sitios web actualmente y que tanto gustamos al observar.

Procesos de diseño

Es importante comenzar con muchos bosquejos, lluvias de ideas, referencias, conceptos, etc. Siempre hay que dibujar, bosquejar mucho, romper y volver a crear. Por experiencia propia, no hay nada mejor para comenzar a crear algo que un lápiz y una hoja en blanco. En mis comienzos me gustaba –seguramente por novelería– tomar mi Wacom y comenzar a diseñar en Photoshop, ¡¡¡GRAN ERROR!!! Ésto no te permite abstraerte a lo que realmente querés y tenés que hacer, lo cual seguramente sea mucho.

De esta forma es que podremos concentrarnos en la interfaz general de la aplicación, flujo del usuario entre las secciones y varios detalles más que de otra forma perderíamos el rumbo pensando en colores y detalles estéticos que para un principio no vienen al caso.

Luego sí podemos pasar a las etapas de arquitectura de la información, diseño, colores corporativos aplicados a la app, etc., para terminar con los últimos lineamientos para el desarrollo final. Obviamente hay muchas etapas y sub etapas en el medio y dentro de cada una de estas, pero quiero definir 3 etapas importantes y generales en el proceso de diseño de una app mobile:

Etapa — 1: wireframe

Como bien decía es donde definimos los rasgos generales de la aplicación. Como estarán subdivididas las secciones, como se distribuirán los contenidos, el flujo del usuario e interacción con la misma, etc.

Etapa — 2: diseño

Aquí tomamos el wireframe anterior y le aplicamos el diseño general que le queremos dar a la aplicación, adaptado o no a colores corporativos de la empresa de nuestro cliente, según sea el caso. Obviamente, luego de diversos estudios, análisis según para el nicho que estemos trabajando, estudio de la competencia, etc.

Etapa — 3: desarrollo

Luego de tener bien definida la estructura, diseño y todo lo contemplado en las etapas anteriores, es que podremos comenzar con el desarrollo de nuestra aplicación. El mismo deberá realizarse según para el/los dispositivos que vayamos a desarrollar, según las tecnologías especificadas y analizadas previamente, etc.

Usabilidad — diseño enfocado al usuario final (definir el usuario final)

Como mencioné anteriormente, cuando diseñamos tenemos que hacerlo pensando en la funcionalidad que nuestro diseño va a tener, ¿cómo va a interactuar con los usuarios?, ¿quiénes lo van a utilizar?, ¿dónde?. Estas son algunas de las preguntas que nos debemos hacer. Hay que tener muchas cosas en cuenta, desde la más básica que una aplicación móvil tarde o temprano será vista en un día soleado al aire libre con el sol impactando directamente sobre la pantalla del usuario.

Tuve el agrado de formar parte del equipo de Viewnity, proyecto que realicé junto a otros compañeros en el concurso de las 24hs de Innovación organizado por la Universidad de Montreal, Canadá (en Uruguay apoyado por Antel y todas las Universidades del país).

El proyecto de Viewnity está enfocado básicamente a personas con discapacidad visual. Desde el inicio de la aplicación tuvimos que tener en cuenta aspectos claves y que para una persona vidente pueden ser tan irrelevantes que si no prestábamos atención detenidamente se nos podían pasar por alto. Esto pasó únicamente porque siempre tuvimos presente el usuario final, las funcionalidades que la aplicación tenía que hacer para resolver aspectos cotidianos de la vida del usuario final (la cual es diferente a la mia), entre otros detalles más que debimos tener presentes con el foco de que era una aplicación enfocada a personas con discapacidades visuales.

Es por eso que debemos diseñar y desarrollar pensando siempre en el usuario. De otra forma, nuestra aplicación no será utilizada y mucho menos exitosa. No olvidemos que el usuario tiene la palabra final y el decide si quiere o no hacer uso de lo que nosotros hacemos y como lo quiere utilizar.

Para finalizar, los dejo con la anécdota del momento que pase de diseñador gráfico a diseñador web (hace varios años atrás), muchas personas me preguntaban si yo era diseñador gráfico o web, y siempre respondía lo mismo:

“yo diseño, y según la plataforma donde vaya a estar mi diseño, la funcionalidad del mismo, el usuario que va a interactuar con el, es como me logro adaptar como diseñador”.

Obviamente, luego de varios años trabajando en el área digital, poniendo mi empresa especializada a esto, es que me fui perfeccionando mucho más en ésta área, pero sin perder la misma premisa y seguir adaptando mis diseños según las necesidades que el mismo vaya a tener.

 

Nicolás Bianchi

http://​userboss​.com

Seguir a @nicobf

Seguir a @userboss