5 lecciones importantes que aprendí sobre el diseño de la interfaz de la aplicación móvil

He estado diseñando para vivir desde 2009 y, en los últimos tres años, he centrado mis habilidades en el diseño de la interfaz de usuario web y móvil. Durante este tiempo he experimentado lo bueno y lo malo de la industria. Buenos clientes, malos clientes. Buenas ideas, malas ideas. Buenos desarrolladores, malos desarrolladores. Ha habido aprobaciones y rechazos de aplicaciones.

A veces puede ser frustrante, y aunque estas llamadas "malas experiencias" pueden apestar, me han enseñado algunas lecciones importantes. Estas lecciones no solo aceleran mi flujo de trabajo diario, sino que también me ayudan a diseñar una mejor experiencia de usuario para el público objetivo.

Explore los recursos de diseño

Conozca al cliente y sus necesidades

"Crear un gran producto y experiencia de usuario es el número uno para mí"

Antes de comenzar un proyecto, configure un chat / llamada en línea o una reunión cara a cara con su cliente. Es bueno conocerlos un poco antes de comenzar a trabajar, ya que los conflictos de personalidad a veces causan problemas. Si comparte intereses comunes, ¡es probable que se lleve bien!

He estado en una situación con un cliente en el que tenía una mentalidad empresarial increíble y su prioridad número uno era ganar la mayor cantidad de dinero posible en un corto período de tiempo. Aunque ganar dinero es importante, crear un gran producto y la experiencia del usuario es lo primero para mí (si el producto es bueno y a los usuarios les encanta usarlo, ¡creo que el dinero vendrá rodando eventualmente!).

En este caso particular, terminamos decidiendo no seguir trabajando juntos, ya que quería dedicar más tiempo al trabajo que me pidieron y su prioridad era lanzar el producto tan pronto como sea humanamente posible.

Una vez pasada la etapa de conocerse un poco y descubrir que son una buena pareja, es importante averiguar todo lo que pueda sobre la aplicación. Tiendo a dividir esto en dos secciones; 'información básica' e 'información avanzada'.

Descubro la información básica antes de conocer al cliente. Esto implica para qué es la aplicación, para quién es y sus características principales. Luego paso a conocer la información avanzada. En este paso me reúno con el cliente y discuto el flujo de trabajo y las pantallas en detalle.

Entre nosotros creamos una lista completa de pantallas que serán necesarias para que la aplicación funcione. Personalmente, me gusta usar una hoja de cálculo de Google Drive que todos podemos ver y editar, y hacer cualquier comentario. Aceptamos y firmamos que este es el conjunto completo de funciones y pantallas que se requieren.

¿Por qué hacer todo este trabajo?

Hay un par de razones válidas detrás de mí para hacer esto. El primero es que es un activo esencial cuando se elaboran tramas y flujos de trabajo. La segunda es que potencialmente puede salvarle la espalda a los clientes aumentando su flujo de trabajo al deslizar pantallas y funciones adicionales aquí y allá.

Una vez asumí un proyecto relativamente grande de iOS y Android con un amigo cercano en el que rompimos esta regla y, lo que originalmente habíamos citado como aproximadamente 320 horas de trabajo, pronto se convirtió en casi 500 horas de trabajo. Debido a que el cliente agregó tantas características nuevas a mitad del proyecto, toda la estructura de la aplicación tuvo que cambiarse tanto en las plataformas iOS como Android.

Comenzó a ser aburrido, repetitivo, y generalmente perdimos mucho amor que inicialmente teníamos por el proyecto. Lo completamos, pero no sin trabajar hasta las primeras horas de la mañana, estresarnos, hacer malabarismos con proyectos y retrasar otros proyectos de clientes que habíamos alineado. No vale la pena cuando se puede arreglar con una simple lista de pantallas y características.

Ponte en el lugar de los usuarios

Lo último que me gusta hacer antes de comenzar a planificar el proyecto es ponerme en el lugar de los usuarios. A veces, este podría ser un tipo de usuario, otros dos o incluso más. Esta regla se aplica a todas las aplicaciones móviles.

"Navegar por la aplicación tiene que ser simple y muy rápido"

Trabajé con un mapa off-road y un inicio de GPS en la segunda mitad de 2011, y ponerme en el lugar de un usuario típico fue muy importante. Tomaría un trozo de papel, escribiría 'usuario' en el medio y escribiría todo lo que se me ocurra. Tres de las grandes preguntas que me hice fueron:

• ¿Para qué usarán la aplicación?
• ¿Dónde usarán la aplicación?
• ¿Cuánto tiempo tienen para usar la aplicación?

Obviamente, el usuario iba a usar la aplicación para la navegación tanto en carreteras como en pistas todoterreno, usará la aplicación en el automóvil y a pie, a veces esto estará expuesto a la luz solar directa (por lo tanto, una probabilidad de IU oscura no es adecuada )

La aplicación se utilizará durante un buen período de tiempo, sin embargo, en algunos casos, el usuario solo tendrá tiempos limitados para interactuar con la aplicación (en luces rojas, por ejemplo), por lo que navegar por la aplicación debe ser simple y muy rápido.

Pasaría una buena hora "en la piel de los usuarios", realmente me ayuda a imaginar cómo funcionará la aplicación y cómo podría verse también.

Planifique con anticipación para evitar errores más adelante

La planificación de su proyecto es donde esa lista de pantallas y características que mencionamos en la lección uno se convierte en un activo esencial. Una vez que se ha cerrado la lista de pantallas y características, es hora de comenzar a trazar.

Cuando comencé a enfocar mis habilidades en el diseño de la interfaz móvil, solía omitir la estructura de alambre cada vez que veía una oportunidad. Me pareció una tarea difícil para la mayoría de los proyectos, pero finalmente mi flojera fracasó. Asumí un proyecto para una pequeña aplicación de utilidad iOS, el cliente y yo decidimos no pasar medio día dibujando algunos esquemas simples ya que teníamos una imagen bastante clara de cómo queríamos que funcionara.

Avanzamos y, antes de que te des cuenta, nos encontramos con pequeños problemas de flujo de trabajo, nada importante, pequeñas cosas como cómo llega un usuario desde allí, cómo lo eliminan sin pasar por muchos pasos para llegar allí, etc. Antes ya lo sabes, pasamos una hora aquí y una hora allá solucionando estos problemas, lo que podría haberse evitado fácilmente si pasamos ese medio día armando un flujo de trabajo simple y un conjunto de estructuras alámbricas.

Esto no quiere decir que deba pasar días o incluso semanas planificando sus proyectos (especialmente para aplicaciones de servicios más pequeños), pero definitivamente vale la pena poner lápiz a papel y garabatear algunas ideas para las pantallas más importantes y luego volver a consultar su Lista completa de pantallas y funciones para las que no sientes que necesitas dibujar.

Hago esto todo el tiempo, antes y durante un proyecto, ¡tanto que en realidad lancé Dotgrid.co para alentar a otros a comprar libros de cuadrícula de puntos y dibujar más! Para proyectos de mayor envergadura (especialmente servicios), siempre dedico una buena parte del tiempo del proyecto a la estructuración y otras planificaciones. Siempre vale la pena.

Podría valer la pena usar un servicio para convertir sus wireframes en un prototipo funcional (me gusta la aplicación Invision). Para proyectos grandes, creo que esto te ayuda a detectar errores o posibles problemas antes de sumergirte demasiado en el proyecto.

Seguir las pautas del sistema operativo

Cumplir con las pautas del usuario es importante. Es genial experimentar con nuevos sistemas de navegación, interacciones y gestos táctiles, y te animo a que lo hagas, pero seguramente tendrás problemas de vez en cuando, ya sea que a tu desarrollador le resulte difícil implementar la idea de diseño o Los revisores de Apple son exigentes y rechazan tu aplicación.

Para tener una buena idea de lo que es posible, investigue las aplicaciones en el mercado y asegúrese de leer las pautas.

Podría ser la diferencia entre una aplicación aprobada o una aplicación rechazada y luego tener que pasar mucho más tiempo rediseñando diferentes elementos.

Otra buena razón para apegarse a las pautas es que permite a los usuarios acostumbrarse a su aplicación rápidamente debido a que todas las aplicaciones siguen las mismas pautas. Por ejemplo, los botones de retroceso están en la parte superior izquierda. Las barras de pestañas están en la parte inferior de la pantalla. Los interruptores hacen lo mismo en todas las aplicaciones. ¡La lista continua!

Enlaces útiles

• Pautas de la interfaz humana de iOS
• Pautas de la interfaz de usuario de Android
• Pautas de diseño de Windows Mobile
• Pautas de la interfaz de usuario de Blackberry

Vale la pena mantener las cosas simples

Cuando les digo a los clientes que quiero "mantener las cosas simples", a menudo me malinterpretan y piensan que quiero decir que voy a diseñar su interfaz en un estilo de diseño minimalista. ¡Este no es el significado de la palabra!

Simple significa que un usuario nuevo puede abrir la aplicación y comenzar a usarla sin tener que leer las instrucciones o seguir una guía.

Significa que pueden completar tareas simples en muy pocos pasos, o en situaciones donde se requieren más pasos, todavía es sencillo. Significa que los colores se usan de manera efectiva (el rojo para los botones de eliminación es un ejemplo común). Mantener las cosas tan simples como sea posible sin complicarlas demasiado sin ninguna razón, no solo alienta a los usuarios a descargar una aplicación en primer lugar, sino que también hace que vuelvan.

¿Por qué usarían una aplicación que es confusa y difícil de manejar cuando probablemente haya una alternativa que sea simple y al grano?

Estaba trabajando con un cliente en una aplicación de utilidad de GPS simple que rastrea qué tan lejos ha viajado el usuario, su velocidad promedio, velocidad máxima y altitud. La aplicación continuó registrando datos hasta que el usuario la restableció. Para restablecerlo, optamos por una opción divertida de 'sacudir para restablecer', que se ilustra claramente con un ícono y el texto correspondiente que lee algo como 'Agitar para restablecer estadísticas'.

A los pocos días de iniciar la aplicación, varios usuarios nos contactaron para preguntarnos cómo restablecer las estadísticas que se habían registrado, y rápidamente agregamos un botón rojo que decía 'Restablecer estadísticas' en la aplicación, lo que les permite hacerlo de una manera simple. ¡Vale la pena mantener las cosas simples!