Blog

UI Design – Cosas que debemos y no debemos hacer

¿Qué es UI Design?

Primero partamos de las siglas UI. Estas se refieren a User Interface o Interfaz de Usuario en español, es decir, las pantallas, opciones, menus, botones y otros elementos que nosotros usamos para interactuar con algún dispositivo tecnológico. Por ejemplo, Windows lleva ese nombre porque utiliza ventanas como elemento clave para su Interfaz de usuario. Otro caso son los cajeros automáticos, que mezclan botones físicos y menus en pantalla para que podamos realizar una transacción o un retiro. En otras palabras se refiere a todo lo que usamos para interactuar con aquel dispositivo que usamos y básicamente hacer que funcione.

Entonces hablar de UI Design se refiere al diseño de estas interfaces donde debemos concentrarnos en puntos claves como cual es la funcionalidad de nuestro producto/dispositivo/programa/aplicación y quienes serán los usuarios. No podemos hacer una interfaz muy complicada si los usuarios son niños, o una interfaz táctil cuando el dispositivo no tiene dicha capacidad (Una Touch Screen). Para ello, e inspirados en la nueva versión de su sistema operativo para móviles, Apple nos trae una serie de Do & Don’t (Hacer y No Hacer) cuando trabajemos en UI Design.

Formatos de Contenidos

UI Design

Debemos crear nuestros diseños al tamaño de los dispositivos donde se mostrará. Los Usuarios deben ver el contenido principal sin tener que hacer zoom o scroll horizontal.

Controles Táctiles

UI Design

Usemos elementos que estén diseñador para gestos táctiles (Arrastrar, agrandar, tocar) para hacer que la interacción con la aplicación se sienta (y sea) lo más fácil y natural posible.

Botones y Zonas “clickeables”

UI Design

Crea controles o zonas donde debes presionar (Botones o links) con un tamaño aprox de 44 puntos de alto y ancho, tamaño suficiente para que puedan ser presionados correctamente con los dedos.

Tamaños de textos

UI Design

Los textos deberán tener un tamaño mínimo de 11 puntos para que sean legibles y puedan leerse a una distancia adecuada sin la necesidad de hacer zoom.

Contraste de Textos

UI Design

Asegúrate de tener el mejor contraste entre el color de tus textos y tu fondo para que los textos sean legibles… en realidad debemos aplicar esto para todo, sea o no texto.

Espaciado

UI Design

Procura aumentar adecuadamente el espaciado entre líneas y letras para que los textos no se junten demasiado y permitan una lectura clara y legible.

Alta Resolución

UI Design

Utiliza imágenes al doble de la resolución que necesitarías. Considera que los nuevos dispositivos (Sobretodo aquellos con Retina Display) tienen pantallas con mayor resolución, y las imágenes podrán verse algo borrosas.

Imágenes Distorsionadas

UI Design

¡No uses imágenes distorsionadas! Respeta las proporciones originales de las imágenes.

Organización

UI Design

Crea interfaces y diseños que sean fáciles de seguir, donde los controles estén cerca del contenido que deben modificar.

Alineación

UI Design

Alinea los textos, imágenes y botones de tal forma que se vea ordenado, organizado y que la información esté bien relacionada.

Fuente: Apple