tl; dr 90% de los teléfonos inteligentes modernos tienen una diagonal de pantalla de más de cinco pulgadas. La aparición de tales pantallas presentó un problema fundamentalmente nuevo para los desarrolladores y diseñadores de aplicaciones. Veamos cómo resolverlos.

Después de que Apple presentó en enero de 2007, el mundo entero se encogió al tamaño de nuestras manos. La compañía combinó el iPod, el teléfono y el navegador en un solo dispositivo. Apple introdujo en el mercado masivo una nueva clase de dispositivos que hoy conocemos como "teléfonos inteligentes". Estos dispositivos funcionaron sin un teclado (como BlackBerry) o un lápiz (como Palm).

El iPhone fue diseñado para una operación conveniente con solo una mano, con movimientos suaves del pulgar a través de la pantalla.

Steve Jobs dijo una vez que 3.5 pulgadas es "el tamaño perfecto para los consumidores", y las pantallas más grandes son estúpidas.

Sin embargo, a comienzos de la década, los phablets con pantallas grandes se hicieron populares en el mercado. Hoy, menos del 1% de los dispositivos se venden con pantallas de menos de 4 pulgadas, mientras que el 90% tiene una diagonal de más de 5 pulgadas.

Esta carrera con un aumento constante en la pantalla ha brindado nuevas oportunidades para que los desarrolladores y diseñadores de aplicaciones utilicen el espacio adicional en la pantalla para ofrecer más contenido y más funciones.

Por ejemplo, la aplicación CNN fue una de las pocas en obtener acceso temprano al iPhone 5, presentado en 2012. Los desarrolladores no solo lo transformaron estéticamente, sino que también mejoraron la legibilidad al resaltar los encabezados.

Apple 2012

Si bien las pantallas grandes son excelentes para mostrar una gran cantidad de contenido, la principal consideración de Steve Jobs para los teléfonos de 3.5 pulgadas sufre: el uso con una sola mano .

En su estudio de dos meses , en aeropuertos, calles, cafeterías, autobuses y trenes, Stephen Huber examinó tres formas en que los usuarios sostienen sus teléfonos.

Resultó que el 49% de los usuarios sostienen sus teléfonos con una mano, especialmente sobre la marcha. En general, este es el agarre predeterminado del teléfono inteligente.

Al proporcionar argumentos convincentes a favor del desarrollo de aplicaciones para uso con una sola mano, Stephen también descubrió que los usuarios a menudo cambian su control dependiendo de la conveniencia y la situación.

¿Por qué el diseño con una sola mano debería ser una prioridad?

A menudo usamos teléfonos cuando estamos ocupados o tenemos prisa. Esto afecta en gran medida cómo sostenemos el teléfono y cómo usamos las aplicaciones. En la práctica, este agarre es mucho más común que en el 49% mencionado anteriormente.

Los estudios muestran que el usuario promedio revisa su teléfono 58 veces al día, con un 70% de interacciones móviles que duran menos de dos minutos. Las personas a menudo usan los teléfonos en "breves períodos de tiempo con atención distraída".

Imagen: Tiempo de rescate

Un grupo de investigadores de Simform observó estos impulsos esporádicos de usar un teléfono en varios escenarios:

ejemplos de uso de un teléfono inteligente en intervalos cortos

El director de productos de Google, Luke Wroblesci, llama a estos pequeños impulsos del uso móvil "un dedo, una mirada" (un pulgar, un globo ocular). Esto refleja cómo un entorno que distrae deja a un teléfono inteligente con solo intervalos cortos de atención parcial de una persona. También agrega que el tipo más óptimo de uso de teléfonos inteligentes con una mano es aquel donde la interacción rápida es compatible con una funcionalidad conveniente .

¿Cómo diseñar un diseño para intervalos tan cortos con un dedo?

La respuesta es bastante simple. Continuamente realice pruebas de usabilidad y aprenda cómo sus usuarios sostienen sus teléfonos en diversas situaciones.

Si los usuarios a menudo usan la aplicación en escenarios de distracción, entonces debe centrarse en desarrollar plantillas destinadas a la accesibilidad y el uso con una sola mano.

Para tener una idea del problema, echemos un vistazo a la evolución de la interfaz de Spotify:

navegación antigua de Spotify: una hamburguesa de Spotify

utilizaba un menú similar a una hamburguesa en la esquina superior izquierda que ocultaba las funciones de la aplicación y configuraba a los usuarios para que las buscaran. Con la llegada de las pantallas grandes, se agregó otro problema de diseño a la lista: la accesibilidad .

Los usuarios de Spotify experimentaron un cierto nivel de dificultad e incomodidad

Esto obligó al equipo de Spotify a colapsar el menú de hamburguesas en 2016 y colocar sus funciones principales: Inicio, Navegar, Buscar, Radio y Biblioteca, en la parte inferior, lo que llevó a un aumento en el número de clics en un 9% en general y en un 30% en los elementos del menú .

Use plantillas UX estándar para casos de uso típicos.

¿Por qué reinventar la rueda si puede usar plantillas UX probadas y efectivas? Muchos diseñadores ya han ideado escenarios para usar la aplicación con una mano.

Revisamos cientos de aplicaciones y miles de plantillas para encontrar los mejores trucos y métodos para tal uso. Veamos cuáles funcionan mejor, qué problemas resuelven y qué beneficios obtiene de esto.

Dividimos los patrones de comportamiento del usuario más comunes y las plantillas UX en seis categorías:

Navegación
Por ejemplo, barras de menú, pestañas y gestos para facilitar el movimiento entre las secciones más importantes de la aplicación.
Acciones
Crear, editar, colocar, agregar, eliminar y otras acciones que utilizan la funcionalidad básica de la aplicación.
,
, , .
, , , , , , — .
, , , .

1.

La base de una gran aplicación es una buena navegación. Ayuda a encontrar rápidamente las funciones necesarias y lo que es importante para los usuarios.

En el 70% de los casos, los usuarios encuentran nuevas funciones y características de la aplicación navegando a través de ella, y no buscando o de otra manera. Los paneles de navegación, menús, gestos, enlaces, pestañas, etc. son las plantillas UX más comunes.

Una buena navegación debe demostrar de inmediato todas las secciones importantes y ser de fácil acceso.

Problemas

Las plantillas de navegación convencionales, como la barra de pestañas de Apple y el menú deslizable de Android, tienen limitaciones. Solo se coloca un número limitado de funciones en la barra de pestañas, y el acceso a todos los elementos del menú deslizable no es fácil.

Los usuarios no tienen que luchar para llegar a una parte importante de la aplicación; no tienen que llegar con el dedo a la parte superior de la pantalla. Esto es simplemente incómodo. En particular, si una persona está en movimiento y usa la aplicación muy rápidamente.

Decisión

Facebook y muchas otras aplicaciones resuelven el problema colocando elementos debajo del botón llamado "Menú" o "Más", desde donde los usuarios pueden acceder a funciones y secciones adicionales de la aplicación. Sin embargo, esto no es ideal cuando se usa con una mano.

Para accesibilidad y ubicación de más de cinco elementos, no una página completa, pero un menú emergente es más adecuado.
Barra de pestañas extendida si hay más contenido.
Barra de pestañas personalizada para usuarios avanzados.
Gestos para que los usuarios desarrollen hábitos de acceso conveniente y rápido.
Devolver y cerrar la página debería ser tan fácil.
Salto rápido a secciones específicas de la aplicación.

Por ejemplo, Facebook oculta muchas funciones en el menú de hamburguesas, que cierra la pantalla principal. Aunque se ve hermoso y lógico, los usuarios sufren cuando trabajan con una mano .

1.1. ¿Cuál es el principal problema con el menú de hamburguesas?

Use una ventana emergente en lugar de un menú de página completa

Afortunadamente, tenemos una manera de resolver el problema.

Los menús de página completa a menudo se pueden reemplazar con menús emergentes. Como su nombre lo indica, "aparecen" desde abajo. Esto facilita el acceso a las opciones con solo una mano.

1.2. Plantillas de menú emergente. Video: Joox

Extienda la barra de pestañas si hay mucho contenido

Las pautas de la interfaz humana de Apple recomiendan colocar no más de cinco funciones en la barra de navegación inferior. Aquí es donde la opción "Más" es útil (tres puntos). Ubicado en el panel inferior, puede ocultar otras funciones y abrirlas con un solo clic.

1.3. Diseño del menú de navegación inferior con panel de opciones adicionales.

Barra de pestañas personalizada para usuarios avanzados

Cada usuario es individual, y una función que es importante para uno puede no ser de interés para el otro. Para aprovechar al máximo el diseño, puede permitir a los usuarios personalizar paneles de pestañas con funciones de uso frecuente.

1.4. Barra de pestañas inferior personalizada para acceder rápidamente a las funciones

Gestos para que los usuarios desarrollen hábitos de acceso conveniente y rápido.

La popular navegación por gestos de Tinder es una excelente manera de facilitar la navegación con una sola mano.

1.5. Navegación basada en gestos para acceder a las funciones de la aplicación

Devolver y cerrar la página debería ser tan fácil.

La navegación no es solo el acceso a la pantalla o sección de una aplicación. ¡Es importante considerar el método de regresar, cerrar la pantalla o pasar a una sección específica de la página! Veamos cómo las aplicaciones usan gestos y plantillas de UX para tales cosas.

1.6. Uso de gestos para navegar en múltiples pantallas (video: Zenly )

Salto rápido a secciones específicas de la aplicación.

Las aplicaciones con muchas categorías, subcategorías y secciones, como libros, wikis, menús de restaurantes, catálogos de productos, necesitan una organización bien organizada para que los usuarios no tengan problemas para encontrar contenido.

Las aplicaciones se pueden organizar jerárquicamente y usar plantillas UX personalizadas para aumentar la accesibilidad y la facilidad de uso.

1.7. Paneles de pestañas flotantes y gestos para moverse entre secciones

2. Acciones con una mano

Lo que es

Los usuarios pasan aproximadamente el 50% de su tiempo móvil haciendo actividades en sus teléfonos inteligentes. Estas son interacciones sociales, compras, autoexpresión, gestión financiera, de salud y productividad, así como la planificación de los próximos eventos. Todas estas plantillas incluyen acciones como la creación de mensajes sociales, la edición de documentos y algunas otras.