Cómo diseñar interfaces móviles fáciles de usar

Sep 14, 2025
Cómo
[dieciséis]

Algunos diseños móviles sufren un problema: pueden lucir geniales en la superficie, pero comenzar a usarlos y pronto descubras que se ha descuidado un factor demasiado importante: la ergonomía. El arte noble de crear diseños que se ajustan al cuerpo humano (en lugar de al revés) es uno de los verdaderos héroes olvidados del mundo del diseño.

La ergonomía siempre ha sido muy importante para los diseñadores industriales, pero también se está volviendo cada vez más importante para los diseñadores digitales. ¿Por qué? Debido a que los teléfonos inteligentes y las tabletas están cambiando la forma en que interactuamos con diseños digitales. Ya no solo usamos un engorroso teclado y un ratón para decirles a nuestros amigos digitales qué hacer. Ahora es más directo, más físico. Tenemos nuestros dispositivos. Tocamos ellos. Los pinchamos. Los golpeamos amorosamente.

Este vínculo cada vez más físico con nuestros queridos dispositivos móviles obliga a los diseñadores a no solo pensar en cómo se ve y se siente un diseño, sino también los aspectos físicos de usarlo. Fuerza a los diseñadores a pensar cómo los usuarios sostienen e interactúan con sus teléfonos inteligentes y tabletas; sobre la cantidad de pantalla que pueden alcanzar cómodamente y cómo se sentirá un diseño en la mano. Fuerza a los diseñadores a pensar en la ergonomía de un diseño móvil.

Entonces, ¿cómo va a crear un diseño móvil que sea ergonómico y, por lo tanto, cómodo de usar?

01. Salir de la oficina

Incluso antes de comenzar a pensar en posibles diseños, salga de la oficina para llevar a cabo algunas observaciones de primera mano. Pase una mañana o por la tarde que mira dónde, cuándo, cómo y por qué las personas están usando sus dispositivos móviles.

Tome nota de cómo las personas sostienen e interactúan con su dispositivo, lo que podrían estar haciendo en ese momento y el tipo de desafíos y distracciones con los que podrían tener que lidiar. Esta información ayudará a informar a la ergonomía del diseño, y significa que cuando se trata de probar un diseño, puede probar contra los escenarios que conoce en el mundo real.

02. Diseño para múltiples postes.

The three main holds used for a smartphone, and the frequency which they’re typically used

[dieciséis] Los tres postes principales utilizados para un teléfono inteligente y la frecuencia que se usan normalmente

Si observa a las personas que usan dispositivos móviles, pronto verá que usan un Variedad de diferentes postes. . La variedad de postes utilizados y la frecuencia con la que los usuarios cambian su retención significa que es importante diseñar con múltiples contenidos en mente.

Por ejemplo, inicie un diseño de teléfono inteligente con un uso con una sola mano (ya que esto es el más desafiante), pero siempre pruebe los diseños en una gama de postes para ver qué tan cómodos son cada uno de ellos.

03. Coloque los controles populares en el alcance.

Green areas are easy to reach, amber takes more effort and red areas are hard to reach

[dieciséis] Las áreas verdes son fáciles de llegar, el ámbar requiere más esfuerzo y las áreas rojas son difíciles de alcanzar.

Coloque los controles usados ​​con frecuencia, como los botones y los enlaces, donde se pueden alcanzar fácilmente los dedos o los pulgares. El medio y la parte inferior de la pantalla son buenas áreas para usar, aunque las esquinas inferiores pueden ser complicadas para tocar cuando se mantiene un dispositivo en una sola mano (lea más aquí ).

Sigue siendo la convención colocar menús en la parte superior de la pantalla. Sin embargo, esto puede ser un área difícil de alcanzar, por lo que es una buena idea apoyar también una acción de deslizamiento para abrir el menú.

04. Coloque el contenido de los controles anteriores.

The BBC iPlayer iPad app places controls in easy to reach areas and below content

[dieciséis] La aplicación IPAD de BBC IPLAYER coloca los controles en áreas fáciles de alcanzar y por debajo del contenido

No quiere que el dedo de alguien o el pulgar oculte el contenido al tocar la pantalla, así que coloque contenido sobre los controles anteriores. También asegúrese de que la información clave no esté en un área de la pantalla donde pueda ocultar fácilmente con un dedo o un pulgar, como las esquinas inferiores, que con frecuencia se cubren cuando se mantiene un teléfono inteligente en una mano.

05. Diseño con modo de retrato en mente.

Mientras que la retención utilizada puede cambiar, una cosa que es mucho más consistente para teléfonos inteligentes y tabletas es la tendencia a que las personas los sostengan verticalmente para la mayoría de los tiempos. A menudo se usa una retención horizontal para tareas particulares, como ver videos o fotos, pero esta es la excepción, no la norma.

Por supuesto, un diseño móvil debe apoyar idealmente a ambos modos de retrato (vertical) y paisaje (horizontal), pero a menos que esté diseñando un sitio o una aplicación de video o una aplicación, diseño con el modo de retrato en mente.

06. Diseño para los pulgares.

The Spotify app is designed to be thumb-friendly, with large tap targets

[dieciséis] La aplicación Spotify está diseñada para ser amigable con pulgar, con objetivos de grifo grandes

Los pulgares impulsan la mayoría de todas las interacciones de teléfonos inteligentes. Esto se debe a que los pulgares se usan exclusivamente cuando un móvil se mantiene en una mano y se usa en gran medida cuando se mantiene en dos manos.

Los pulgares son ligeramente más grandes que los dedos, y por lo tanto necesitan un objetivo más grande del grifo. Trate de hacer estos objetivos de toque al menos 44 x 44 puntos (16 x 16 mm), con al menos 7 puntos (2,5 mm) entre ellos. Los objetivos más grandes del grifo siempre son mejores y, ciertamente, no debe ir más de 44 x 30 puntos (16 x 11 mm).

Incluso si está diseñando para tabletas, aún diseñe para los pulgares porque un diseño debe soportar el método menos preciso de toque que se encontrará. Un objetivo de grifo grande no es solo bueno para los pulgares, también es ideal para los dedos.

07. Diseño para grandes gestos.

Así que los objetivos más grandes del grifo son mejores. ¿Qué objetivo más grande del tap está allí que la pantalla completa? Trate de diseñar con grandes gestos en mente, como permitir que los usuarios se deslicen para avanzar o hacia atrás en una galería de fotos, o para abrir un menú.

Recuerde que los usuarios pueden no darse cuenta de que se admite un gesto, por lo que siempre es una buena idea proporcionar una forma secundaria para hacer algo, como tocar un icono de flecha para abrir la siguiente foto.

08. Ascender al desafío.

En la ergonomía, a veces escuchas hablar de diseñar para adaptarse al menos el 95 por ciento de los usuarios mediante la creación de un diseño que se siente cómodo del 2,5 al 97.5 porcentaje de usuarios. Siempre habrá usuarios extremos que sean muy difíciles de satisfacer, ya que todos sabemos que no puede complacer a todos todo el tiempo, pero si puede crear un diseño que los usuarios más desafiantes puedan usar con comodidad, también debe trabajar para todos los intermedios.

Por eso es una buena idea diseñar con usuarios desafiantes y escenarios en mente. Por ejemplo, piense en un viaje ocupado caminando por la calle con café en una mano y un teléfono móvil en el otro, o alguien con artritis.

09. Mantenga las interacciones al mínimo.

¿Sabe cuál es la interacción más cómoda del dispositivo móvil? No es un grifo, o un golpe, o una prensa. No es interacción en absoluto. La menor interacción requiere su diseño móvil, cuanto menos tenga que preocuparse por la ergonomía. Siempre trato de mantener las interacciones al mínimo. Cortar a los formularios móviles reducidos, use autosugestos y restringen las notificaciones a solo las cosas que realmente debe notificar a un usuario.

10. DISEÑOS DE PROTOTÍPO

Simplemente no puede juzgar la ergonomía de un diseño móvil hasta que pueda mantenerlo físicamente en sus manos y probar diferentes agarres. Por eso prototipo un diseño tan pronto como sea posible. Nos gusta Axuce , pero hay muchos otros Grandes herramientas de prototipos .

Para una prueba rápida, incluso puede ejecutar pruebas de usuario básicas con prototipos de papel simples. Un boceto o impresión de papel atrapados en un dispositivo móvil le dirá una cantidad sorprendente sobre la ergonomía.

11. Prueba, prueba, luego prueba un poco más.

¿Quieres saber la forma garantizada de crear diseños móviles ergonómicos? Es para probar los diseños, luego iterar y probar, iterar y probar ... y continuar hasta que tenga un montón de personas diferentes, cubriendo un montón de dispositivos diferentes, todos informaron que el diseño es cómodo de usar. Es así de simple.

Los dispositivos móviles están diseñados, por supuesto, están diseñados para ser 'móvil', así que salga de la oficina para probar los diseños en los entornos y las situaciones en las que es probable que se usen. Las cafeterías siempre son un buen lugar para probar. Diseños de pruebas con como Muchas personas como sea posible (al menos cinco o seis) y se centran en escenarios más desafiantes, como el uso de un teléfono inteligente con una sola mano. Si el diseño funciona bien cuando las interacciones del usuario están más limitadas, seguramente se destaca el resto del tiempo. Es principalmente probando continuamente e iterando que puede crear diseños móviles verdaderamente ergonómicos.

Este artículo apareció originalmente en la revista Net. Suscríbete aquí.

Artículos relacionados:

  • 16 UX / UI Instagram cuentas Debe seguir
  • 20 mejores herramientas de estructura de alambre
  • Las 5 tendencias de diseño de UX más grandes para 2018

Cómo - Artículos más populares

Cómo usar el bosquejo de la gravedad

Cómo Sep 14, 2025

[dieciséis] (Crédito de la imagen: Boceto de gravedad) Sketch de gravedad, la herramienta de diseño y modelado para creativ..


Cómo usar reaccionar resorte para animar componentes

Cómo Sep 14, 2025

[dieciséis] (Crédito de la imagen: Matt Crouch) Reacty Spring puede ayudarlo con las animaciones, que son notoriamente difí..


Crea un diseño sensible con la cuadrícula CSS

Cómo Sep 14, 2025

[dieciséis] Diseño de cuadrícula CSS Está creciendo en el soporte del navegador todos los días y podemos enviar la red CS..


Crea arte de retratos en Corel Painter

Cómo Sep 14, 2025

Página 1 de 2: Página 1 Página 1 Página 2 Este taller le presen..


Caracteres de juego de niveles con ensamblaje creativo

Cómo Sep 14, 2025

[dieciséis] Con una gran variedad de temibles criaturas y personajes para crear, trabajando con el taller de juegos para traducir mini..


Cómo esculpir un goblin impreso 3D

Cómo Sep 14, 2025

[dieciséis] El concepto para este proyecto, el goblin de hongos, proviene de un dibujo de mi amigo Adrian Smith. He estado trabajando ..


Comience en Amazon Lumberyard: Configuración

Cómo Sep 14, 2025

[dieciséis] El nuevo motor de juego de Amazon, Almacén de madera , es gratuito y es ideal para cualquier persona con un in..


Dibuja huesos y músculos precisos

Cómo Sep 14, 2025

[dieciséis] La anatomía es un sujeto enorme y requiere una mezcla de información científica y practicidad artística. Por ejemplo, ..


Categorías