El diseño de interfaz de usuario (UI) es una de varias disciplinas superpuestas responsables de crear las interfaces donde los usuarios interactúan con productos digitales. El diseño de interfaz de usuario se encuentra en un espectro con diseño de experiencia del usuario (UX), diseño de interacción (ID) y diseño visual o gráfico.

¿Qué es el diseño de UI?

En su definición más amplia, la interfaz de usuario es el espacio donde las personas y las máquinas interactúan. Las personas dan instrucciones a las máquinas y máquinas para que inicien un proceso, respondan con información y proporcionen comentarios que informen las decisiones humanas y habiliten futuras interacciones. El campo de la interacción humano-computadora (HCI) se ocupa más específicamente de las interfaces digitales, que han evolucionado desde las tarjetas perforadas y la entrada de texto en la línea de comandos hasta las sofisticadas interfaces gráficas de usuario (GUI) de la actualidad.

Diseño de la interfaz de usuario de la Xerox Star 8010 de 1981

Sistema de información Xerox 8010 en 1981 (DigiBarn, utilizado bajo CC BY; recortado de original)

El diseño de interfaz de usuario para productos digitales se ocupa principalmente del diseño, la jerarquía de información, y la aparición de elementos de interfaz en pantallas individuales para programas de software, sitios web y aplicaciones móviles, pero también puede incluir videojuegos o interfaces de TV.

Siguiendo los principios del diseño centrado en el usuario (UCD), los diseñadores de IU crean interfaces que están estructuradas y orientadas para satisfacer las necesidades del usuario en lugar de simplemente facilitar soluciones técnicas. Esto a menudo requiere un elemento de compromiso, con el diseñador de interfaz de usuario equilibrando los requisitos funcionales con las necesidades del usuario y la estética (dictados por diseño de marca y visual).

Diseño de interfaz de usuario del tablero

Diseño de interfaz de usuario de un dashboard B2B, por Miklos Philips

El buen diseño de interfaz de usuario admite usabilidad con diseños visuales claros y consistentes y estructuración de contenido, así como también proporciona pistas (significantes para ayudar a los usuarios a completar tareas mientras minimizando la interferencia causada por contenido innecesario o elementos de diseño.

Las interfaces de usuario digitales bien diseñadas aprovechan significantes comunes y metáforas visuales que tienen contrapartes del mundo real, por ejemplo, botones, controles deslizantes de volumen, calculadoras, íconos de disco para acciones de “guardado”, etc.

Las interfaces de usuario están compuestas por diferentes tipos de elementos, que incluyen:

  • Controles de entrada, que son componentes interactivos en una IU y van desde casillas de verificación y botones de radio hasta listas desplegables y campos de texto: permiten a los usuarios realizar selecciones de una de las opciones mostradas e ingresar texto.
  • Controles de navegación, donde los usuarios eligen un destino o cambian los datos que se muestran en su pantalla. Los elementos de la interfaz de usuario incluyen menús desplegables, controles deslizantes y barras de desplazamiento, rutas de navegación, pestañas y controles de paginación.
  • Elementos de información, que proporcionan retroalimentación al usuario. Los elementos de la interfaz de usuario pueden incluir iconos, texto y contenido visual, barras de progreso y otras notificaciones.

Diseño de interfaz de usuario para una app iOS

Diseño de interfaz de usuario para una app iOS, por Thrive

Los diseñadores efectivos de UI siguen las mejores prácticas, convenciones, estándares y principios básicos de usabilidad para garantizar que las interfaces de usuario que crean se corresponden con las necesidades del usuario. Entre los principios más importantes están:

  • Consistencia en el uso y la reutilización de los elementos comunes de la interfaz, para que los usuarios estén familiarizados y cómodos con la interfaz.
  • Estructura de página o pantalla con una clara jerarquía de elementos, de modo que los elementos de mayor prioridad sean los más destacados para los usuarios.
  • Uso del color y la tipografía para enfatizar los elementos de mayor prioridad, proporcionando claridad a los usuarios.
  • Buena comunicación y retroalimentación para informar al usuario de los cambios de estado, errores o confirmación de las acciones del usuario, para que el usuario pueda ver cómo el sistema reacciona a la entrada y toma decisiones con mayor facilidad.
  • Comprensión de las preferencias y prioridades del usuario, para que las tareas u objetivos más comunes se realicen fácilmente, con un comportamiento predeterminado adaptado para simplificar las tareas comunes.
  • Reducción de la carga cognitiva en los usuarios mediante el diseño de interfaces que hacen un uso efectivo de espacio en blanco y son tan simples e intuitivo como sea posible.

diseño de interfaz de usuario de aplicaciones móviles

Diseño de interfaz de usuario para una aplicación móvil de asesoramiento de riego de plantas, por Tubik

La diferencia entre UI y UX

El diseño de la interfaz de usuario a menudo se confunde con el diseño de la experiencia del usuario. Si bien puede haber una superposición considerable, son campos distintos con diferentes habilidades requeridas para cada función. Un diseñador de experiencia de usuario se centra en la estructura general y la función de un sitio web o aplicación y en cómo un producto se siente y funciona para el usuario.

Los diseñadores de UX trabajan con (o como) arquitectos de información para organizar el contenido; hacen referencia a la investigación de los usuarios y realizan análisis detallados de tareas y negocios para determinar el flujo de trabajo óptimo para operaciones complejas, como el proceso de pago de eCommerce y el proceso de creación de cuentas. Los diseñadores de UX luego crean flujos de usuarios, mapas de viaje de clientes, de baja fidelidad wireframe diagramas, y prototipos interactivos para probar, validar y refinar sus conceptos a través de pruebas de usuario.

Animación de Wireframe para Apple Watch

Animación de Wireframe para Apple Watch (Diseño UX por Alex Dovhyi)

UI vs. UX

La interfaz no es la solución. El diseño de interfaz de usuario generalmente juega un papel importante en el trabajo de un diseñador de UX, pero no es la única parte. Piénselo de esta manera: el diseño de UX es el consumible y la UI es la herramienta (con la que se puede consumir).

El Diseño UX es un proceso de diseño estratégico de varios pasos que tiene como objetivo crear un producto o sitio que los clientes/usuarios dibujan para, encontrar fácil de usar y comprender rápidamente. Y a través del proceso de diseño de UX, llegamos a la solución de interfaz de usuario correcta.

UX no es UI, la diferencia entre UI y UX

La diferencia entre UI y UX (Ilustración por Shane Rounce)

¿Qué hacen los diseñadores de UI?

Los diseñadores de la interfaz de usuario se basan en el marco proporcionado por el diseño de UX para acercar los productos digitales a su forma final. Siguen los wireframes de UX para la jerarquía y la prioridad de los elementos en cada pantalla, luego aplican las pautas de diseño visual junto con las mejores prácticas de diseño de interacción para garantizar la coherencia a lo largo de toda la experiencia.

Concepto de diseño de interfaz de usuario de eCommerce

Concepto de diseño de interfaz de usuario de eCommerce, por Remco Bakker

Los diseñadores de interfaz de usuario son responsables de la jerarquía visual, el diseño, el espaciado y la alineación en la pantalla, el peso visual de los encabezados y la tipografía, el uso correcto de elementos de interfaz estandarizados como botones y campos de formularios, y el cumplimiento de las pautas de marca para tratamientos de color y logotipos.

Dado que las interfaces de usuario modernas no son simplemente pantallas estáticas sino también experiencias interactivas con comportamientos dinámicos y transiciones animadas, los diseñadores de IU también trabajarán con diseñadores de movimiento o diseñadores de interacción, perfeccionando los conceptos básicos de interacción desarrollados por diseñadores de UX.

El diseño de interfaz de usuario también puede incluir visualización de datos y trabajo de diseño de la información, lo que ayuda a los usuarios a dar sentido a los datos altamente complejos a través de una visualización simplificada de esta información en la “capa de presentación”.

Concepto de diseño de interfaz de usuario de eCommerce

Concepto de diseño de interfaz de usuario eCommerce de tienda de joyas, por Tubik

Los diseñadores de la interfaz de usuario entregan las maquetas visuales finales de cada página web o pantalla de aplicación desde la cual los desarrolladores producirán el producto final. Así como el diseño de la interfaz de usuario a veces se superpone con el diseño de UX, también puede superponerse el diseño de la interfaz de usuario con el desarrollo frontal de un producto digital, particularmente cuando se trabaja con plantillas de pantalla bien definidas y bibliotecas de componentes.

Para servir a la eficiencia y la experiencia del usuario, los métodos de interacción se vuelven cada vez más sofisticados. En el mundo de hoy, el diseño de la interfaz de usuario adquiere una importancia primordial a medida que el mundo que nos rodea se vuelve cada vez más digital. En las próximas décadas, el diseño de la interfaz de usuario progresará hacia el movimiento de pantallas bidimensionales y hacia el mundo 3D de realidad virtual (RV), AR (realidad aumentada) y MR (realidad mixta).

Independientemente de la tecnología, pantallas, espacios o entornos, el diseño de la interfaz de usuario continuará enfocado en facilitar la interacción y la experiencia del usuario entre “el hombre y la máquina” de la manera más eficiente posible.

About the author

Scott Anderson, Canada
member since July 31, 2017
Scott is a user experience architect, information architect, and interaction designer with over ten years of experience working on software, web, tablet, and mobile device sites and applications. He works most frequently in Axure, creating wireframe prototypes that incorporate dynamic interface behavior in the design process to illustrate both user interaction models and the underlying logic and flow of complex business applications. [click to continue...]
Hiring? Meet the Top 10 Freelance UI Developers for Hire in August 2018

Comments

comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great articles & insights.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Scott Anderson
Designer
Scott is a user experience architect, information architect, and interaction designer with over ten years of experience working on software, web, tablet, and mobile device sites and applications. He works most frequently in Axure, creating wireframe prototypes that incorporate dynamic interface behavior in the design process to illustrate both user interaction models and the underlying logic and flow of complex business applications.