UX / UI

Navegar en Internet ofrece múltiples y diferentes opciones, pero por algún motivo, los usuarios deciden detenerse en determinados sitios que tienen un “no sé qué”. Esto no es algo librado al azar, muy por el contrario, en la web todo está pensado y desarrollado con una determinada finalidad.

Ahora bien, qué hace que un sitio sea más llamativo que otro y que, por ende, el usuario prefiera permanecer allí. Si bien el proceso es complejo, la respuesta es simple, y se debe a las percepciones que el usuario tiene mediante el diseño de las pantallas. En la web nada es improvisado.

Qué es el Diseño de Interfaces (UI)

El Diseño de Interfaz o User Interface (UI), se refiere a todo aquello con lo que los usuarios interactúan directamente (la capa externa de un producto o servicio digital). Es lo que ve y toca en una página web, una aplicación o un dispositivo cualquiera. Cabe destacar que, UI es la parte visible de la interface, mientras que UX es la parte oculta, conceptos que muchas veces prestan a confusión.

El diseño de interfaz se ocupa de los colores; las tipografías; los iconos; los formularios y botones; las animaciones y los sonidos de las notificaciones, por ejemplo, de las redes sociales. Un buen diseño de interface debe ser funcional más allá de lo estético.

De qué se ocupa UI

Sobre todas las cosas, entiende el proceso de Diseño Centrado en el Usuario (DCU). Este proceso debe ser adaptable a cualquier dispositivo. La UI se ocupa de la construcción y validación de prototipos. Ayuda también a la creación de wireframes (esqueletos de las pantallas) y estructuras diseñadas a mano o digitalmente. Dos de las metodologías de diseño más utilizadas son Design Thinking y Design Sprint.

Roles en el Diseño de Interfaces

Diseñador UI

El Diseñador de Interfaces o User Interface en inglés, se ocupa de crear la parte visual de la interfaz de un producto o servicio, con el fin de brindar una navegación intuitiva y no solo estética. Debe tener en cuenta la usabilidad y simplificar al máximo su diseño.

El Diseñador UI es el encargado de atraer usuarios y mantenerlos navegando. Este rol trabaja en conjunto con el Desarrollador Frontend para detectar posibles problemas y soluciones durante el proceso de navegación. Otra de sus funciones es la generación de guías de interacción y estilo.

Motion Designer

Es el encargado de la creación de las interacciones entre los usuarios y los productos o servicios digitales. Se ocupa de la narración de historias visuales a través de animaciones de gran impacto. Su tarea es animar imágenes y mensajes estáticos.

El diseño de movimiento ayuda a brindar una experiencia de mejor calidad para la marca, y genera interfaces sencillas y agradables de navegación. A su vez, el uso de microinteracciones logra de forma instantánea relaciones entre los elementos de una interfaz con los usuarios.

Desarrollador Frontend

El Desarrollador Frontend o Front End Developer en inglés, es el encargado de traducir los diseños a un lenguaje de programación y convertirlos en código HTML, JavaScript (JS) y / o CSS.

Se ocupa de generar la parte visual y la estructura de la web para facilitar la navegación del usuario. Determina los componentes externos de las páginas y establece
un tiempo mínimo de carga de las mismas. Sus diseños deben ser adaptables a múltiples navegadores.

Elementos de User Interface

Guidelines

Son pautas, normas o lineamientos generales para el diseño de interfaces que permiten la coherencia visual entre la interfaz y la plataforma en la cual se desarrollará. Son las guías de diseño de los sistemas operativos. Existen dos categorías:

Google Material Design: pertenece al Sistema Operativo Android de Google_. Se destaca por el uso de diferentes profundidades y superficies. Los bordes y las sombras son características inconfundibles de este diseño

Human Interface Guidelines: forma parte del Sistema Operativo iOS Design de _Apple. Se caracteriza por la claridad, profundidad y minimalismo de sus pantallas. Maneja el Content first, el cual prioriza el contenido.

Cabe destacar que cada sistema operativo tiene sus reglas, formas de navegación y conceptos visuales propios.

Iconos

El icono es otro elemento a tener en cuenta durante el proceso de diseño. Se debe visualizar en diferentes tamaños, no ser complejo y mantener el mismo estilo y color siempre.

Moodboard

Es un tablero visual con elementos estéticos para el diseño y concepto de una interface. Es utilizado en diferentes disciplinas de diseño, Una vez creado el Moodboard se pueden generan los UI Kits.

UI Kits

UI Kits o User Interface Kit, es un archivo o documento que incluye diversos elementos. Por ejemplo: botones e iconos, tablas y formularios o sliders, entre otros. Los UI Kits permiten una coherencia visual entre las pantallas y ayudan a definir la morfología de sus componentes. Tiene en cuenta los siguientes puntos:

Sistema de color: generación de 3 colores (primario, secundario y acento)

Sistemas de iconos: definición de iconos con sus estados (activo/inactivo)

Tipografía: elección de la familia, variable tipográfica y jerarquías principales (título, bajada, citas, párrafos y botones)

Componentes: definición de elementos (topBar y buttonBar, formularios, tarjetas y controles) y sus estados (activo e inactivo)

Botones: elección de botones según el sistema operativo (botón principal, botón secundario y botón terciario) y sus estados (activo, inactivo y presionado)

Herramientas de Diseño

Figma

Es una herramienta de diseño de interfaces que surgió en el año 2015. Fue creada para el desarrollo de productos o servicios digitales, y tiene como objetivo mejorar la experiencia de usuario de una marca. Actualmente, se la considera una de las más elegidas por los diseñadores.

Figma ayuda a la colaboración en tiempo real y permite, entre otras cosas, hacer correcciones en línea con los integrantes del equipo de diseño. Cuenta con una versión gratuita y otra paga. Ofrece almacenamiento ilimitado en la nube, está disponible para todos los sistemas operativos y posibilita trabajar con o sin conexión a la red.

Esta herramienta permite copiar la URL de un prototipo para que los clientes puedan visualizar, sin la necesidad de tener una cuenta, los avances de los proyectos. Otra de las características más importantes es su comunidad de usuarios, la cual tiene como objetivo que los diseñadores puedan compartir sus trabajos, despejar dudas o realizar consultas.

Sketch

Sketch es un software creado para el diseño de interfaces de páginas webs o aplicaciones móviles. Esta herramienta de prototipado y desarrollo es considerada una de las favoritas por los profesionales de diseño.

Permite trabajar 100% en vectorial, con una precisión a nivel de píxeles y de forma no destructiva (puede hacer cambios sin modificar el archivo original). Sus funciones ayudan a la creación de logos, elementos de identidad de una marca y generación de gráficos.

Este software requiere el uso de Mac, con la posibilidad de ejecutar diferentes tipos de código. Permite compartir proyectos y recibir feedback de los clientes. Sketch ayuda a crear una biblioteca compartida con símbolos, textos y paletas de colores para un diseño de interfaz cohesivo.

Esta herramienta ayuda a gestionar archivos en la nube para visualizarlos o compartirlos entre los colaboradores. Ofrece también la opción de exportar e importar pantallas para el diseño de transiciones animadas, por ejemplo, cambios de estado o jerarquías.

Adobe XD

Adobe XD o Adobe Experience Design en inglés, es una herramienta de edición de gráficos para la creación de interfaces de aplicaciones móviles, páginas web e interacciones por voz, que tiene como foco la experiencia de usuario. Está disponible para Mac y PC.

Adobe XD ayuda a elaborar diseños de alta fidelidad aplicable a cualquier pantalla. Permite agregar animaciones, crear prototipos interactivos y realizar pruebas en diferentes dispositivos.

Esta herramienta puede compartir, entregar diseños, realizar comentarios e iterar a gran velocidad. Ayuda a generar capas en profundidad, voltear planos, mostrar proyectos en 3D y crear rápidamente un sentido de realidad. Tiene gran equilibrio entre estética y funcionalidad.

Permite la colaboración en tiempo real y brinda la posibilidad de contar con un feedback por parte del cliente. Esto ayuda a identificar y corregir errores previos a las etapas de desarrollo y programación, lo que se traduce en un gran ahorro de tiempo y energía.

Mobile First: de suplente a titular

El Mobile First es un diseño web que prioriza los dispositivos móviles. Esta alternativa surge por el crecimiento en la utilización de dispositivos (smartphones o tablets) para la navegación en Internet. Es una consecuencia directa de las preferencias de los usuarios.

Esta tendencia recorre el camino inverso al diseño responsive, el cual partía del diseño de escritorio para posteriormente trasladarlo a las tablets o dispositivos móviles. Para lograr esta adaptación del contenido era necesario quitar determinados elementos en pos de la velocidad o usabilidad de las páginas.

El diseño Mobile First, a diferencia del responsive, parte de la versión de dispositivos móviles para luego trasladarlo al resto, logrando de esta manera generar un contenido relevante y adaptable a todos los dispositivos.

La empresa Google insiste en que los sitios web indexados en su buscador ofrezcan una buena experiencia de navegación a los usuarios. El aumento de tráfico desde dispositivos móviles hizo que Google, en marzo de 2021, considerara únicamente la versión móvil de los sitios web para la indexación y el posicionamiento SEO. Para este fin, la empresa ofrece una guía que ayuda a lograrlo.

Actualmente, la optimización móvil de las páginas combinadas con el posicionamiento SEO presentan esta única opción para continuar en las primeras posiciones de la Pagina de Resultados del buscador, en ingles Search Engine Results Page (SERP). Los elementos de la nueva indexación Mobile First son:

Velocidad: el tiempo de carga de una web sigue siendo la prioridad para el buscador y tiene como finalidad lograr la mejor experiencia de navegación de los usuarios.

Tamaño: es fundamental que los botones y enlaces de la página tengan un tamaño óptimo y separados entre sí, para que los usuarios puedan pulsarlos fácilmente.

Pop-ups: evitar pop-ups que bloqueen la navegación de los usuarios. Estos deben ser fáciles de abrir y cerrar para que la experiencia no sea frustrante.

Imágenes: deben estar optimizadas, es decir, de un tamaño óptimo, con buena resolución y no muy pesadas para no ralentizar la carga de la página. Deben verse correctamente en diferentes dispositivos.

Usabilidad y Accesibilidad

Tanto la usabilidad como la accesibilidad son conceptos que no deben faltar en el diseño de interfaces. Por un lado, la usabilidad plantea 10 reglas generales para el diseño de interacción denominadas “heurísticas”, las cuales fueron creadas por Jakob Nielsen, y por el otro, la accesibilidad en la web, que se basa en cuatro principios fundamentales: perceptible, operable, comprensible y robusto.

En el artículo Qué es UX o User eXperience se describen de manera detallada, tanto las Reglas de Usabilidad de Nielsen, como los principios de accesibilidad para la web. Su lectura ayudará a la comprensión de estos valiosos conceptos.

Tendencias UI

Dark Mode o Modo Oscuro: es una tendencia que nació en el 2020 pero está en todo su esplendor este 2021. Se destaca por un tono gris azulado para el fondo, tipografía gris clara y enlaces azul oscuro. Cuenta con una paleta de colores con menor brillo para la visualización con poca iluminación. El tema oscuro está activo en YouTube, Gmail, Chrome y Google Search.

Glassmorphism: es la tendencia más joven en la interfaz de usuario y es amada por los diseñadores. Se basa en un efecto denominado “desenfoque de fondo” que produce la sensación “a través del cristal” en los elementos de las pantallas.

Neumorphism: se centra en el color de toda la pantalla y en brindar a los usuarios una experiencia especial a través de la utilización de colores sólidos, con bajo contraste y con un efecto de sombreados que genere un aspecto sobresaliente.

Colores vivos: consiste en la utilización de colores saturados a su máxima expresión y con fuertes contrastes. Se caracteriza por el uso de imágenes fotográficas llamativas y muy potentes.

Minimalismo: poca cantidad de elementos en pantalla, sin decoraciones y con una interfaz de usuario simple, mínima y legible. En esta tendencia “menos es más”.

Elementos geométricos: en este diseño los elementos de la interface, la tipografía, los gráficos e imágenes son de formas geométricas básicas. Las animaciones son simples y la estructura visual ordenada.

Ilustraciones 3D: esta tendencia se basa en la creación de ilustraciones tridimensionales e imágenes 3D que generen empatía entre el usuario y las pantallas durante el proceso de navegación.

Conclusiones

Sin lugar a dudas, el diseño de interfaces está más presente que nunca. Los usuarios marcan el camino a seguir y es el deber de los diseñadores escucharlos. Así de simple, como una buena experiencia.

Si te gustó este artículo te invitamos a recomendarlo o compartirlo. También puedes estar atento a los contenidos UX que estaremos publicando en nuestro blog.

Para aprender mucho más sobre UI, te puede interesar realiar el curso de introducción al diseño de interfaz de Usuarios (UI), una completa introducción a esta temática que te permitirá aprender las bases del diseño visual y su relación con la experiencia de usuario.