Entradas

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/

Animaciones UI a través del tiempo

Las animaciones de interfaz de usuario (UI) son un elemento esencial para todo creador de productos digitales. Las mismas necesitan tener un diseño justo que no invada por completo el look & feel de los distintos productos y aplicaciones. 

Rara vez se les menciona, pero son fundamentales para la creación de sitios web, aplicaciones, juegos HTML5, como los que creamos en Token Studio. 

Principios de las animaciones UI

Las animaciones UI siguen algunos principios que los hacen cumplir con su cometido. Pasan a través del tiempo, plataformas y medios de comunicación. Y tienen una cosa en común, todos han creado un “de aquí en adelante”, marcando épocas que podemos conseguir ver mirando hacia atrás en la evolución de la comunicación tecnológica.

1. Cursor Parpadeante (1967)

La madre de todas las animaciones. Al principio, cuando no había nada… ya existía el cursor terminal parpadeante, esperando una entrada. El cursor parpadeante es todo un arte, el cual ha permanecido en el tiempo.

Presentado por primera vez como patente de Charles A. Kiesling en 1967, todavía lo usamos en nuestros celulares, computadoras, buscadores y hasta cajeros automáticos. Es tan normal que esté, que a veces ni notamos su presencia.

El cursor parpadeante estableció una norma que todavía se usa, que nos permite mantener el enfoque de la pantalla, indicándonos que está lista para su entrada, muy lista en ocasiones, para cualquiera que se dedique a escribir. Pero siempre motivándonos a continuar.

2. La pantalla de descarga de Windows XP (2001)

Antes de que existiera la banda ancha y la navegación con pestañas, descargar un archivo era todo un compromiso. Incluso los documentos más simples tomaban varios minutos en ser descargados y el resto de la experiencia de navegación se alentaba. Se necesitaba de algún visual que indicara que todo marchaba bien y que el archivo estaba en camino.

La barra de estimación de tiempo siempre ha sido algo desesperante, no sabes si avanza o no, pero los papeles flotantes desde el mundo a tu computadora lo calmaban todo como si dijeran suavemente que ya el archivo estaba llegando, de byte en byte, pero estaba llegando a la computadora y ya pronto ibas a poder disfrutar de esa canción que tanto te gustó por MTV.

3. La pelota de playa de Mac (2001)

Hay ciertos procesos dentro de nuestras computadoras que toman su tiempo y que no te permiten seguir trabajando en paralelo. Para esto, Mac usó el reloj de mano en el cursor, mientras que Windows, el reloj de arena. Pero si ya esperar nos produce ansiedad, imagina ver un reloj corriendo frente a ti sin poder hacer más nada.

¡Les presentamos la bola de playa girante! Esperar sigue siendo tedioso y, por lo general, es signo de que algo anda mal en los dispositivos actuales. Pero al menos OSX tiene cierta consideración al esperar colocando algo agradable a la vista. 

Si deseas tener más información acerca de las animaciones UI a través del tiempo, puedes consultar el sitio de Invision App.

Items de portfolio