Diseño de interfaz de usuario (UI) para móviles

Hoy día cada vez más y más personas están utilizando dispositivos móviles y sobre la mitad de estos son celulares. Muchos negocios se están manejando a través de aplicaciones en dispositivos móviles, lo que lleva a los diseñadores a mantenerse siempre actualizados con los requerimientos del momento. En este artículo hablaremos sobre las aplicaciones que casi todos los dispositivos móviles tienen, así mismo como algunas recomendaciones a la hora de diseñarlas.

Detalle importante de UI en dispositivos móviles

Como sabemos, las pantallas de los dispositivos móviles son reducidas, por lo que el contenido debe ir lo mejor enfocado posible. El contenido que colocas para ser visto en una computadora de escritorio no es el mismo que colocas para verse en un celular. El mismo ha de filtrarse con la información principal.

Pantalla de bienvenida (Splash screen)

Se dice que “la primera impresión es lo que cuenta”, por lo que una buena entrada es necesaria para ser bien recordados por los nuevos usuarios. Esta entrada en el mundo digital es la pantalla de bienvenida o splash screen. El rol que tiene esta pantalla es hacer ver que la aplicación se carga rápido. Suelen ser minimalistas, llevando solo el logo y nombre del producto. La pantalla de bienvenida no debe durar más de 3 y 5 segundos o el usuario pensará que demora demasiado en cargar.

Animación por @phamduyminh en dibbble.com

Pantallas de introducción (Onboarding screens)

Las pantallas de «onboarding» son hechas para introducir el producto a los usuarios que lo utilizan por primera vez, para que estén listos para usarlo de una vez. En algunas ocasiones estas pantallas son utilizadas para que los usuarios se familiaricen con algunas características del producto, otras tratan de educar al usuario en la interacción con la UI–haciendo tutoriales cortos de guía para familiarizarse con las operaciones más comunes. Al elegir una pantalla de introducción recuerda que no debe sentirse como un bloqueo de acceso para los usuarios que por primera vez lo utilizan. Sino más bien debe sentirse natural y debe permitirse saltar la introducción si quieren empezar a usar la aplicación.


Animación por @nashoaib en dribbble.com

Pantalla de inicio (Home screen)

La pantalla de inicio es la pantalla que los usuarios ven cuando han terminado con la introducción. Es el punto de partida para el usuario. Algunos elementos que casi toda pantalla de inicio tiene:

  • Menú. La pantalla de inicio debe ayudar a los usuarios a navegar a través de las distintas partes del producto. Ya hay patrones establecidos en lo que es la navegación dentro de los productos, por lo que se recomienda seguirlos a la hora de diseñar una pantalla de inicio para una mejor experiencia de usuario. La interfaz de usuario generalmente tiene una barra de navegación con pestañas o un menú de hamburguesa (hamburger menu).
  • Campo de entrada de búsqueda. La búsqueda es un elemento típico de las aplicaciones de comercio electrónico. Actúa como un acceso directo y permite a los usuarios buscar un producto en particular.
  • Contenido relevante. Dependiendo de la naturaleza de un producto, la pantalla de inicio puede tener un feed con elementos o cualquier otro tipo de contenido que sea valioso para los usuarios.
Animación por @consueloromano en dribbble.com

Aplicaciones de redes sociales

Lo más importante en las redes sociales es la comunicación. La experiencia dentro de ella se basa en llevar la información a los usuarios de manera oportuna a través de feeds, que constantemente están cambiando. Cada elemento del feed debe estar diseñado para el escaneo rápido, ya que los usuarios escanean, no leen. 

Animación por @aureliensalomon en dribbble.com

Importante

Para diseñar es importante considerar todas las pantallas como parte de la experiencia del usuario. Al hacer esto se puede brindar un producto que cumpla con las expectativas del usuario y a facilitarle su navegación a través del mismo.

Para ver el artículo completo, visita: https://xd.adobe.com/ideas/process/ui-design/mobile-user-interface-design/

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *