que-es-ui
Teoría

Qué es: Interfaz de Usuario (UI)

Quizá piensas que UX/UI es lo mismo, o quizá pienses que es un tema de moda. Pero, ¿qué realmente significa la UI?

Anteriormente hablamos de la diferencia entre UX y UI. En este post mi objetivo es que al finalizar sepas distinguir qué conforma la Interfaz de Usuario.

 

Qué es UI (Interfaz de Usuario)

Todos los días interactuamos con una interfaz. Ya sea en un automóvil de camino al trabajo, para comprar un billete de metro, al acceder al correo electrónico, marcar el tiempo de calentado en un horno de microondas, solicitar un turno en un banco, estas comunicándote con un sistema 🙂

La UI (por sus siglas en inglés User Interface) o en español Interfaz del Usuario, es la vista que permite a un usuario interactuar de manera efectiva con un sistema. Es la suma de una arquitectura de información + patrones de interacción +  elementos visuales.

Laurel y Mountford la definen como:

La superficie de contacto que refleja las propiedades físicas de los interactores, las funciones que pueden realizarse, y el balance entre poder y control.

En otras palabras:

El lugar donde el contacto entre dos entidades ocurre.

Personalmente (y de manera breve), las definiría como:

La representación visual, táctil y/o fonética que permite a un usuario interactuar con un sistema.

 

Componentes de la UI (Interfaz de Usuario)

La UI, principalmente presenta las posibilidades de interacción junto con el look & feel, o en otras palabras, el diseño visual. Esto quiere decir, que las decisiones de Arquitectura de Información, Diseño de Interacción y/o Diseño Visual se ven reflejadas aquí. Mira el ejemplo a continuación:

ia-ixd-ui

La arquitectura dicta la estructura y el esqueleto, además se piensa en cómo se comporta el sistema en respuesta al usuario y por último tiene una capa de colores, texturas y gráficos que lo hacen estético.

Según Usability.gov, los elementos que generalmente se presentan en una UI para un producto digital son:

  • Controles de Input: botones, campos de texto, checkboxes, radio buttons, listas drop down, switches, campos de fecha
  • Componentes de Navegación: breadcrumbs, sliders, formularios de búsqueda, paginación, sliders, tags, iconos
  • Componentes de Información: tooltips, iconos, barras de progreso, notificaciones, cajas de mensajes, modals,
  • Contenedores: acordeones

que-es-ui

La UI influye en la generación de una UX

Principios del Diseño de UI (Interfaz de Usuario)

Según Larry Constantine y Lucy Lockwood, existen ciertos principios para el diseño de interfaz centrado en el usuario. Estos principios son:

  1. Estructura: El diseño debe organizar la interfaz de usuario a propósito, de manera significativa y útil basada en modelos claros y consistentes que son evidentes y reconocible para los usuarios, poniendo cosas relacionadas entre sí y que separa las cosas no relacionadas, diferenciando cosas diferentes y hacer cosas similares se parecen entre una y otra. El principio de estructura concierne a la arquitectura general de la interfaz de usuario.

  2. Simplicidad: El diseño debe facilitar las tareas sencillas y comunes, comunicarse de forma clara y sencilla en el propio idioma del usuario y proporcionar buenos accesos directos que estén significativamente relacionados con procedimientos más largos.

  3. Visibilidad: El diseño debe hacer visibles todas las opciones y materiales necesarios para una tarea determinada sin distraer al usuario con información superflua o redundante. El buen diseño no abruma a los usuarios con alternativas o confunde con información innecesaria.

  4. Retroalimentación: El diseño debe mantener a los usuarios informados de las acciones o interpretaciones, los cambios de estado o condición, y los errores o excepciones que son relevantes y de interés para el usuario a través de un lenguaje claro, conciso y claro que sea familiar para los usuarios.

  5. Tolerancia: El diseño debe ser flexible y tolerante, reduciendo el costo de los errores y el mal uso al permitir deshacer y rehacer, y al mismo tiempo evitar los errores siempre que sea posible, tolerando entradas y secuencias variadas e interpretando todas las acciones razonables.

  6. Reuso: El diseño debe reutilizar los componentes y comportamientos internos y externos, manteniendo la coherencia con el objetivo en lugar de consistencia meramente arbitraria, reduciendo así la necesidad de los usuarios a repensar y recordar.

 

Referencias y lecturas sobre UI

  1. Laurel, B., & Mountford, S. J. (1990). The art of human-computer interface design
  2. Brown, C. M. (1998). Human-computer interface design guidelines
  3. Constantine, L. L., & Lockwood, L. A. (1999). Software for use: a practical guide to the models and methods of usage-centered design
  4. Cooper, A., Reimann, R., & Cronin, D. (2007). About face 3: the essentials of interaction design

¿Quieres llevar esta teoría a la práctica? ¡Mira los cursos abiertos en donde podrás poner a la práctica estos conocimientos! cursos-ux

Deja un comentario

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