Android Patterns - Diseño de Apps Android

Son diferentes los problemas que nos podemos encontrar cuando tenemos que hacer por primera vez un sketch, wireframe, diseño o prototipado para una interfaz que desconocemos. Hoy os presento una de esas webs (Android Patterns) que os pueden sacar de un buen apuro o ayudaros cuando queráis hacer vuestra App para Android Mobile.

Android Pattern ofrece un conjunto de patrones de interacción que pueden ayudar a diseñar aplicaciones de Android. Un "patrón de interacción" es una explicación/resumen de como diseñar una acción a partir de ejemplos o diseños que actualmente sabemos que están funcionando. Los patrones son una guía, por lo tanto pueden modificarse, no debemos aferrarnos a ellos.

¿Qué patrones describe Android Patterns?

  • Como mostramos los datos o información
  • De que forma podemos introducir datos
  • Patrones de navegación
  • Las notificaciones
  • Interacciones en la pantalla
  • Formularios y personalización de campos
  • Compartir elementos en las apps (Share buttons).

Estructuración de los patrones

Una de las cosas que me gusta más de esta guía-web es el formato que tiene y a su vez la "socialización" de la misma. Son los mismos usuarios los que crean los patrones y a su vez ponen ejemplos y crean debates. Muchas veces puede ser complicado como explicar un patrón pero Android Pattern muestra con ilustraciones el funcionamiento de los mismos.

Cada página de patrón se estructura de la siguiente forma:

  • It works like this: Ilustración de como funciona actualmente el patrón. Explican paso a paso como debe hacerse.
  • Use when:  Explica cuando debemos utilizar este patrón. A su vez los usuarios pueden explicar "Cosas buenas" y "Cosas malas" del patrón y a su vez cuando debemos utilizarlo y cuando no debemos utilizarlo.
  • Ejemplos: Los usuarios pueden subir ejemplos con screenshots de aplicaciones y explicar el funcionamiento del mismo.
  • Debate: Finalmente hay un apartado donde se comentan diferentes puntos y a su vez podemos hacer preguntas.

Os invito que visitéis la página de  Android Patterns y que trasteéis un poco. Seguro que en el momento que necesitéis pensar como hacer el boceto de vuestra app, wireframe, prototipado o todo lo que haga referencia a una app para Android os ayudará mucho.

Es cierto que AndroidPatterns hace bastante que no se actualiza pero mantiene la idea y la ayuda.

¿Conocéis alguna página parecida para iOS o otra interfaz?


UX Tooltips - Question mark Vs Info icon y Mouse Over Vs Click

Antes de todo lo confieso, soy un amante de los tooltips y siempre que puedo utilizo tooltips, ya sea en aplicaciones mobile o en páginas web. La razón es simple, ofrecer ayuda a los usuarios sin que esta ensucie la estructura de la información o diseño y a su vez, sin que el usuario tenga que abrir ventanas modales o popups. A pesar de esto, no siempre se recomienda el uso, todo depende de la casuística en la que nos encontremos. Por otro lado podemos hablar de un estándar en la iconografía de tooltips, "question mark" y "info icon". ¿Pero cuando se usa cada icono? Como veis, son diferentes las dudas que me salieron estos días en uno de los proyectos en los que he estado trabajando.

(Este post hace referencia a los tooltips orientados a la explicación de una información).

¿Qué es un tooltip?

Los tooltips  suelen ser pequeños iconos donde al pasar el ratón por encima o pulsar sobre ellos muestran un pequeño texto. La principal función consiste en dar información explicativa, descriptiva o simplemente consejos para poder solucionar las dudas que puedan surgir. El tooltip aparecerá cuando el usuario pulse con el ratón o pase el ratón por encima. A su vez, desaparecerá cuando mueva el ratón, pulse en una área diferente del tooltip o lo cierre si existe la acción de cerrar.

Mouse over vs click

Normalmente la discusión entre click o hover depende mucho de la finalidad de la acción, pero en nuestro caso solo queremos mostrar una información. Queremos que el usuario haga el mínimo número de clics.  Por lo tanto, lo mejor es que muestre la información cuando pasemos el ratón por encima. Pero por otro lado queremos que sea el usuario el que vea la información y la oculte cuando quiera con un click, es decir, que el usuario tenga el control sobre la información. Como podemos ver, estas dos teorías se contradicen entre ellas. ¿Realmente el usuario tiene que tener el control de un tooltip cuando este solo muestra una pequeña información aclaratoria? La respuesta sería "no hace falta", pero la acción de hover puede tener problemas de usabilidad:

  • El control tanto "flickable" de "on" como de "off" puede ser problemático, aquí empezarían a venir los principales problemas con los dispositivos touch.
  • La área de control para abrir o cerrar el tooltip.

Desde mi punto de vista el mouse over es una buena alternativa ya que la información que mostramos es muy corta (el tiempo que utilizará el usuario para leerla será corto), el usuario va a interacción con ella y evitaremos que este deba "clickar" en el icono para mostrarle esa información. Desde el punto de vista de accesibilidad no es un problema ya que existen acciones de "onMouveOver" y los screen readers  o las acciones de teclado permiten leer esta información.  El problema lo tenemos en que no existe la acción de "onFingerOver" :) . En el caso que sepamos que esa web o herramienta se utilizará mediante gestos touch deberemos hacer que el tooltip se muestre mediante la acción de "touch" (click), si no es así ya nos podemos olvidar de utilizar la acción de hover sobre nuestros tooltips.

Question Mark vs Info icon

Teniendo en cuenta los dos elemento en la interfaz de usuario, el elemento "?" es una información pasiva y el "i" nos ofrece una información activa.

  • "?" : Ofrece una información al usuario que ha necesitado para resolver una duda. (ofrecemos una ayuda)
  • "i" : Se usa cuando queremos mostrar una información adicional, incluso será útil cuando no hay dudas al respeto. (ofrecemos una información)

Por lo tanto, se recomienda utilizar el "i" cuando mostramos una información que realmente no va a pedir el usuario o esta información contiene detalles que no van afectar directamente a la toma de decisiones.  En el caso que la información que se muestra afecta a la toma de decisiones utilizamos el "?".

Si tenéis más dudas os animo a leer este artículo de Microsoft que lo explica muy bien.

Desde mi punto del vista los tooltips son una pequeña gran herramienta informativa para los usuarios. Mostramos ayuda de forma simple sin la necesidad de llenar la pantalla de información. Es lógico que el uso excesivo de tooltips puede provocar el efecto contrario. Si utilizamos muchos tooltips tendremos que preguntarnos si alguna cosa de nuestra interfaz o información está fallando. Por otro lado no debemos utilizar un tooltip cuando este hace una explicación de una explicación. (sería extraño...).

Conclusiones

  • Click or Touch : Si queremos que nuestra web / app / interfaz sea usable para todos los usuarios, es recomendable mostrar el tooltip mediante click.
  • Iconos estándars: Todos los iconos pueden ser tooltips, pero se recomienda utilizar los estándars comentados anteriormente, question marks o icon info. A su vez, es recomendable que el icono esté contorneado por un círculo o un cuadrado, ayudará al usuario a clicar en una área más grande. "?" o "i", utiliza el que creas que es mejor para tu información.
  • Utiliza el mínimo de tooltips: Nuestra interfaz o información debe ser lo suficientemente descriptiva como para que el usuario no tenga dudas.
  • Información clara y simple: Muestra el mínimo número de información en el tooltip.
  • Acción secundaria: Un tooltip nunca puede ser más visible que una acción principal. Utilizamos un tooltip para que nuestro diseño sea simple y ahorrar texto. No hay que olvidar que el usuario lo consultará en un momento concreto.
  • Visbilidad de la información: Cuando cliquemos sobre el tooltip mostraremos una información que aparecerá por encima del contenido. Hay que vigilar que se pueda leer de forma correcta y que este no se esconda bajo el scroll. Debemos mostrar el tooltip de tal manera que no esconda información que realmente sea útil para el usuario en el momento que lo consulta.
  • Forma parte del diseño: No olvides que el diseño del tooltip (su icono y su capa modal) es igual de importante que el resto de información.