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):

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.