Cómo diseñar elementos interactivos para pantallas táctiles

Experiencia de usuario
13/5/2019
|
Samuel Gimeno Artigas

El tamaño adecuado de los elementos interactivos es crítico para un interfaz, ya que en una pantalla de móvil si no son del tamaño adecuado los usuarios tendrán dificultades para seleccionar con sus dedos la opción que deseen. Todos hemos sentido esa sensación alguna vez de ser gigantes en un mundo pequeño.

mcdonalds mobileweb maptargets
Mapa de McDonald’s donde apenas se puede seleccionar uno de los 11 restaurantes disponibles de lo pequeños que son los objetivos. Imagen de Nielsen Norman.

Muchos usuarios creen que tienen los dedos demasiado gordos cuando la realidad es que los elementos interactivos no tienen el tamaño suficiente para ser accionados con comodidad por todo tipo de personas.  

Nielsen Norman ha escrito un buen artículo sobre el tamaño de los elementos interactivos en pantallas táctiles, en él explican los elementos que tenemos que tener en cuenta para diseñar bien los elementos interactivos para dispositivos móviles.

Según un estudio de Parhi, Karlson y Bederson el tamaño mínimo que debe de tener un elemento interactivo en la pantalla para ser rápidamente y precisamente seleccionado debe ser 1 cm * 1 cm. Tener en cuenta que este es un tamaño físico que dependerá su tamaño en píxeles dependiendo de la densidad de píxeles de cada pantalla.

Los elementos interactivos pequeños cuesta más llegar a ellos por la ley de Fitts, ley que dice que el tiempo que se tarda en seleccionar un objetivo depende de la distancia a la que se encuentre y del tamaño de éste. Ya que al ser pequeños hay más posibilidad de equivocarse.

Lo cual si los elementos interactivos son más grandes por la ley de Fitts, se disminuye el tiempo para alcanzarlos al aumentar el tamaño del objetivo.

Otro problema que tienen los elementos interactivos pequeños es seleccionar uno entre varios que están muy juntos como sucede en un mapa de localizaciones de una tienda o un restaurante. Esta dificultad de seleccionar una localización en el mapa da a entender que la interfaz es difícil de usar.

Otro problema habitual es que no haya espacio suficiente entre enlaces, que estos estén muy juntos y el usuario no seleccione el enlace bien entre los que hay disponibles al estar muy cerca unos de otros.

instagram suggestedtofollow taptargets
Botones de Instagram muy pequeños y muy juntos que impiden la correcta interacción. Imagen de Nielsen Norman

Un ejemplo que usa Nielsen Norman para ilustrar los errores que se pueden cometer es la lista de sugerencias de usuarios de Instagram para seguir donde el botón de follow es más grande que el botón de quitar la sugerencia. Por lo que puedes seguir a alguien cuando en realidad lo que quieres es eliminarlo de las sugerencias y viceversa le puedes eliminar cuando lo que quieres es seguirlo, al estar tan cercanos un botón del otro y no tener un tamaño adecuado mínimo ambos. Es fácil equivocarse en la acción y obtener un resultado no deseado.

target mobileapp largeprimarybuttons
Captura de la app de Target con los dos CTAs principales sobredimensionados para poder pulsarlos mejor. Imagen de Nielsen Norman

Otra opción es la contraria, usar botones exageradamente grandes para los CTA como la app de Target que tiene dos opciones principales en tienda, buscar productos y escanear artículos para buscar descuentos y promociones. Esos dos botones son fácilmente pulsables y visibles para los usuarios en la interfaz de la app.

También dependiendo de la audiencia los elementos interactivos tendrán que ser mayores, si tu público son niños o gente con las manos ocupadas. Los elementos interactivos tendrán que ser de un tamaño más grande para que ellos los accionen fácilmente y sin error.

Pantallas táctiles más grandes necesitarán de elementos interactivos más grandes, para ser detectados por los usuarios y para poder ser accionados por ellos.

En resumen, los elementos interactivos en pantallas táctiles debe tener un tamaño mínimo de 1cm*1cm, tener un espacio suficiente entre ellos para poder pulsarlos sin equivocarse y no juntar demasiado dos acciones opuestas.     

Los diseñadores de UX y los product managers debemos ser conscientes de estas medidas y posiciones al diseñar las interfaces para dispositivos móviles para conseguir la mejor experiencia de uso para nuestros usuarios de pantallas táctiles.

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.