La importancia de un simple botón en tu móvil

Hace unos cuantos años tomé la decisión personal de mentorizar a startups bajo el paraguas de distinas organizaciones (Business Booster, Google Developers Launchpad...) y también a nivel más personal. Me apetecía por un lado echar una mano a la comunidad y, por otro, aprender y estar al día sobre lo que se mueve fuera de la pantalla de mi portátil. Tengo que reconocer que, aunque en la mayoría de las ocasiones todo esto es pro bono, la satisfacción personal que me proporciona compensa el esfuerzo.

En todo este tiempo uno ve de todo, bueno y malo (aquí hablo sólo desde el punto de vista de interfaz, que es de lo que suelo escribir), y hay que reconocer que a nivel de interfaz desktop se nota una importante mejoría en cuanto a la preocupación de las startups por hacer algo humanamente amigable.

Pero en móvil no ocurre lo mismo.

Sorprende la cantidad de ocasiones en las que uno se encuentra con aberraciones que a veces hasta da apuros mencionar. Lo más básico de una interfaz móvil, un simple botón, por regla general se diseña pronto y mal, sin pensar ni analizar la repercusión que tiene este elemento.

He preferido no incluir ejemplos reales, no quiero que nadie se sienta ofendido por ser mencionado, y en lugar de eso compartir aquí cuáles son algunos de los aspectos fundamentales que hay que tener en cuenta a la hora de diseñar eso: un simple botón. Prometo que nunca pensé que un elemento tan simple diera para escribir tantos párrafos, pero tengo la sensación de que ayudará a más de uno:

1. Lo primero es el tamaño. Tener en cuenta que en un botón en móvil se pulsa por regla general con el dedo índice (si estás parado, sentado o de pie) o con el pulgar (si vas andando):

Foto: Lukew.com

Foto: Lukew.com

Este detalle, traducido al mundo píxel, anda alrededor de unos 44px, un botón con esa altura. Windows sugiere un tamaño de 34px. Pero en la medida de lo posible sé generoso con los botones, al menos con los principales, los dan de comer a tu startup. Parece fácil, pero no lo es.

2. Lo segundo es la ubicación del botón. No me canso de enseñar esta imagen cada vez que hablo de este punto. Pura Ergonomía:

En este ejemplo siempre surge la cuestión de la gente que no es diestra. Y yo siempre respondo lo mismo: diseña para lo más probable, no para todo lo posible. Si crees que la mayoría de tus usuarios van a ser zurdos invierte este planteamiento, pero dudo que sea el caso.

Ni que decir tiene que la recomendación es colocar los botones principales en las áreas donde el alcance del dedo llega con más facilidad. Por si acaso no es lo suficientemente evidente.

3. Microcopy: el literal que lleva dentro el botón en cuestión. Ya hemos hablando largo y tendido sobre la importancia del copy a la hora de convertir. Una cosa que últimamente me llama la atención es que hay gente que incluye el literal en forma de pregunta.

Personalmente creo que cuando incluyes una pregunta en un botón de forma automática surge una respuesta, aunque sea de forma inconsciente, es un tiempo de indecisión que te puedes ahorrar colocando el microcopy en imperativo ("¿Vemos los precios?" vs "Ver precios ahora", por ejemplo. He ido sacando esta conclusión a través de mis propios errores.

4. El cuarto punto puede parecer poco importante, pero que considero que le da tu aplicación un toque de confort adicional, de comodidad con respecto a tu competencia: se trata del estado ontouch. Básicamente consiste en que, al pulsar ese botón, tengas la sensación de que lo estás pulsando, ya sea a través de un cambio de textura de color, o con sensación de profundidad, que se hunda al pincharlo. Se trata de un detalle que dura microsegundos, y probablemente pase desapercibido para la mayoría de tus usuarios. Pero ayuda a incrementar la seguridad de que estamos pulsando el elemento que queremos. Feedback, feedback y más feedback.

5. El último punto es un error clásico: pero se sigue viendo con frecuencia tanto en desktop como en móvil. No coloques botones que generan acciones opuestas demasiado unidos, uno junto al otro. Si no te queda más remedio condiciona el diseño y deja el más importante en forma de botón (si no lo tienes claro piensa en cuál de las dos opciones le beneficia más a tu startup). Y el otro en forma de enlace, que tenga menos relevancia.

Me quedo aquí. Seguro que hay más puntos interesantes que compartir y si tienes ganas de compartirlo comentar es bienvenido, en esta casa siempre lo ha sido.

La palabra como interfaz del futuro

Desde el punto de vista de la interacción, la evolución de las interfaces digitales ha pasado por una serie de etapas bastante bien definidas (hablo sobre ellas en este viejo post del 2012). Hemos pasado del CLI (Command Line Interface) al dominio GUI (Graphical User Interface) para estar viviendo plenamente bajo el califato de NUI (Natural User Interface). 

Siempre he leído que la tendencia natural sería algo Orgánico (Lo llamaban OUI -  Organic User Interface), integrado en los gestos de forma muy espontánea y natural, algo parecido al Tom Cruise de Minority Report, integrado en nuestro cuerpo prácticamente. Pero parece que las cosas se están torciendo...

Lo que a priori era tan sólo un rumor o tendencia hace meses atrás, a día de hoy empieza a ser un realidad. La conversación (y los chatbots - o agentes conversacionales - en particular) serán la base de muchos productos digitales de aquí en adelante. Chris Messina tiene un post delicioso sobre este tema y acaba de manera categórica:
 

2016 will be the year of conversational commerce
 

Hay algunos movimientos que vaticinan esta tendencia:

  • La integración de Uber en Facebook Messenger.
  • La compra de WhatsApp por parte de Facebook (22B$)
  • O el hecho de Lark haya sido una de las apps del 2015 (y seguramente repetirá en 2016)

Sin dejar de olvidarse de los clásicos:  el Siri de Apple, el Now de Google, Cortana de Microsoft, o el fabuloso Echo de Amazon.

Si no sabes de qué va todo esto quizás sea un buen comienzo instalar Lark en tu móvil, y dejarte llevar.... Después de usarlo probablemente empieces a entender que se acerca el final de los formularios, de los botones, de los radio buttons y del famoso link azul. ¿Del navegador? Personalmente creo que también (apps y chatbots tendrán el monopolio).

Parece mentira, pero hemos partido de un modelo de interacción que creíamos ya obsoleto, basado en comandos, y todo pinta a que regresamos a él. Más sencillo, natural y evocador. El futuro que recreaba Mark Coleran sólo se quedará en ficción.

A modo de reflexión interna esto confirma dos detalles de los que hablaba hace algún tiempo.

1. Que Internet es lectura. Prácticamente al 100% (hasta que llegue de forma contundente la voz). 
2. Y que el Copy será el próximo UI. Las palabras son el mejor método para transmitir información (y emoción).

Si quieres seguir tirando del hilo léete este post de Eduardo Manchón: Por qué los chatbots matarán tu web, tu app y quizás también a Google

La suma de pequeñas cosas

Más allá de la consulta de movimientos o de tu saldo (donde entra en juego la famosa Posición Global), una de las principales acciones que una persona puede realizar con su banco online es la de realizar una transferencia.

En esta operativa existen básicamente cuatro elementos básicos, muy básicos:

1. La cuenta de origen;
2. La de destino;
3. El concepto;
4. El importe.

Luego están las opciones de seguridad que cada banco decida (la confirmación por SMS, la clave de operaciones, o el código de la tarjeta de coordenada...).

A pesar de parecer sencillo, resulta sorprendente la variedad que existe en la forma en la que se soluciona esta funcionalidad. De tal manera que algo que supuestamente debería ser rápido y ágil acaba siendo un proceso tedioso, lento y que genera incertidumbre y temor (has leído bien: incertidumbre y temor con *tu banco*).

Me parecería fabuloso que esta variedad fuera fruto del esfuerzo notable en innovación y mejora de la experiencia digital (aquí ni siquiera he mencionado el tema móvil, por supuesto), pero por desgracia, excepto raras excepciones, no suele ser el caso.

Algo que me tiene especialmente asombrado es la simple agrupación del número de cuenta del destinatario. Un campo donde uno puede llegar a pasar cerca un minuto si ese número de cuenta no lo tienes guardado en tu lista de contactos. Fíjate cómo tres de los grandes bancos de nuestro país resuelven este detalle:

 

1. Para BBVA es un simple campo abierto, donde uno puede directamente pegar los 20 dígitos de la cuenta de destino y pasar al paso siguiente. Han conseguido asumir toda la problemática ellos y que el usuario simplemente gestione este paso con uno de los gestos más sencillo del mundo tecnológico: copiar y pegar. Y punto. Aquí me levanto y aplaudo, 5 estrellas.

2. Para Openbank la cosa cambia: este banco entiende que es mejor agrupar los dígitos bajo la agrupación estándar (Entidad, Sucursal, Dígito de control y Número de cuenta), para que supuestamente identifiquemos mejor los dígitos que vamos introduciendo. Entendiendo que "por seguridad", esta plataforma no nos permite copiar y pegar un número de cuenta directamente sobre el formulario, por lo que si vienes de una cuenta que está agrupada en bloques de cuatro seguramente ya te estás haciendo una idea de que en ese campo vas a pasarte un buen rato.

3. INGDirect tiene otro enfoque: agrupa los números que constituyen el número de cuenta en bloques de 4, algo que facilita su legilibilidad, sin duda. Pero nos ocurre lo mismo: si vienes de un dígito agrupado de forma estándar y tu banco tiene bloqueado el copiar/pegar ya sabes la que te espera.

Siempre he sostenido que es muy fácil criticar cuando se habla sobre temas de diseño, todos tenemos nuestro pequeño alma de diseñador dentro. Pero casi con la misma intensidad siempre he creído que los grandes cambios empiezan por cosas insignificantes, casi imperceptibles. Pequeñas sumas que acaban generando cambios importantes. Y que muchas veces no cuestan prácticamente nada. 

Queridos bancos: ¿Os animais?

OT: Un fuerte abrazo Kokuma.