Saltar al contenido

Construyendo la interfaz

Construir la interfaz es una tarea metódica, que tiene como eje implementar la funcionalidad garantizando un comportamiento homogéneo a lo ancho y largo de la interfaz. Evitar la implementación página a página es casi un imperativo.

construyendo una casa ilustracion

Utilizaremos en este apartado la terminología introducida por el diseñador Brad Frost, en su artículo Diseño Atómico[1].

Dar vida a la interfaz utilizando un lenguaje de interacción supone definir en orden:

  1. Los átomos, elementos indivisibles de la interfaz, como botón, etiqueta, campo, título, subtítulo, párrafo, vínculo, imagen, ícono, etc.
atomos según brad frost
  1. Las moléculas, combinaciones de dos o tres átomos de uso frecuente en el sitio, como por ejemplo etiqueta y campo; foto y pie de foto; título, subtítulo y copete.
Moléculas según Brad Frost
  1. Los organismos, componentes de la interfaz que cumplen una función simple: formulario con etiquetas, campos y botones, el cabezal, la caja de búsqueda o el pie.
Organismos según Brad Frost

A partir de allí con esos elementos se construyen los diálogos, páginas y flujos que constituirán la interfaz completa del sistema.

Es importante garantizar que los componentes de la interfaz son únicos y siempre tienen el mismo comportamiento, independientemente de que en un diálogo puedan tener unas propiedades destacadas y otras deshabilitadas, mientras que en el siguiente diálogo suceda exactamente al revés. Debe ser obvio para el usuario que se trata del mismo elemento, comportándose de acuerdo a las necesidades del contexto y la función ejecutada.

También es importante que toda la funcionalidad de un elemento esté disponible cada vez que se despliega en la interfaz, ya sea de forma directa o indirecta. La única excepción es aquella que debe ser excluida por alguna otra razón válida, como por ejemplo la seguridad.

Los objetos que conforman el sistema se representan de diversas formas en la pantalla en base a dos dimensiones fundamentales: el tamaño que ocupan en la pantalla y la posibilidad de editarlos / modificarlos. Una consecuencia de un lenguaje de interacción correctamente concebido, tal vez la principal, es que todas estas representaciones expresan al mismo objeto de forma obvia para el usuario, independientemente de su tamaño y de si están en modo lectura o edición.

Desde el punto de vista del tamaño, ya sea que el objeto se exprese como un ícono, una fila en una tabla, un diálogo de resumen o una ficha de pantalla completa, sigue siendo el mismo objeto y permite el acceso a las mismas funciones: no todas a un click de distancia, sino dentro de lo que razonablemente se podría considerar manipulación directa. Dicho de otra forma: no importa cómo está representada la factura en la pantalla, si la estoy viendo tengo que poder eliminarla sin necesidad de ir al menú principal y navegar hasta la opción Clientes -> Cuentas Corrientes -> Facturación -> Eliminar Factura.

los componentes de la interfaz deben tener un comportamiento homogeneo
Independientemente del tamaño y el contexto, siempre se representa el mismo elemento

Si la interfaz está basada en un lenguaje de interacción será homogenea a lo largo y a lo ancho, será capaz de crear la experiencia de usuario para las funcionalidades actuales y futuras, generando una interacción consistente y fácil de usar, que sus clientes y usuarios apreciarán.

Tips:

  • ¿Cuántos tipos distintos de botones, campos, títulos, íconos y otros elementos se utilizan en la interfaz? ¿Está justificado?
    (Si tiene dudas, pida que se realice un inventario: lleva una mañana y es tan útil como sensiblizador)
  • Los elementos de la interfaz, ¿se comportan siempre igual, además de verse siempre igual?
  • A lo largo de todo el sitio o aplicación, ¿los problemas de interacción similares se resuelven de forma similar?

___

[1] Brad Frost – Atomic Design – https://bradfrost.com/blog/post/atomic-web-design/
Las tres imágenes que ilustran los conceptos de átomo, molécula y organismo son tomadas del artículo.

____

Calendario de cursos 2023

Ya está disponible el calendario de cursos de 2023, con los siguientes cursos.

Si querés saber más, o hablar con los docentes, no dudes en contactarnos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.