Aspectos esenciales y determinantes en el desarrollo de interfaces UI/UX

Aspectos esenciales y determinantes en el desarrollo de interfaces UI/UX

Actualmente existen un sin número de formas de comunicación y de expresión, cada día las plataformas y dispositivos en los cuales navegamos están dejando atrás el sistema unilateral de comunicación, para dar paso a un ecosistema que nos permita coexistir con pantallas que entienden cada vez mejor nuestras formas de vida.

Pese a que aún estamos muy lejos de establecer una comunicación humana con los dispositivos que nos rodean , nuestros sistemas de interfaces experimentan cada vez un avance mayor en términos comunicativos, lo cual nos permite, no solo predecir acciones, sino también establecer una relación cada vez mayor con  sistemas que consiguen adaptar al máximo la representación de sus productos.  

Hasta tal punto es así, que nos vemos impulsados a adoptarlos en nuestra vida cotidiana como un factor que añade valor y sentido a nuestra propia forma de vivir, tal y como la entendemos a día de hoy.

Esta permanente evolución y atomización de factores, no solo esta conceptualmente determinada por la expansiva industria del Marketing, las marcas o las principales industrias, sino que existe un colectivo minoritario ocupándose de que los sistemas y lenguajes de representación de empresas, gobiernos o industrias, puedan llegar a una población cada vez más digital.

Dicho colectivo está compuesto por diseñadores y expertos de desarrollo de producto,  que afanosamente buscan modelos representativos que calen hondo en la vidas de aquellos a quienes van dirigidos sus prototipos.

En este breve artículo no hablaremos del  “cómo”  conseguir representar valores, ideas, conceptos o ideologías, sino que más bien nos centraremos en los principios que actualmente tienen mayor éxito en el desarrollo de interfaces representativas de modelos de interfaz de usuario, y cómo estos consiguen trazar un recorrido seguro hacia un experiencia de usuario satisfactoria.

Para poder iniciar nuestro recorrido nos situaremos en tres escenarios que a día de hoy prevalecen en los sistemas representativos a nivel comercial, industrial, tecnológico y gubernamental, todos ellos con un fin común: trasladar y comunicar información compleja de forma casi tangible, capaz de ser no solo entendida, sino absorbida e integrada para despertar estímulos, acciones, etc.

Estos tres escenarios son:

Escenario Comunicativo.

En este escenario se conceptualizan ideas, valores, formas, y su función primordial es comunicar ideas y  emociones. Actualmente existen muchas formas de consumir información comunicativa, diversas plataformas, y cada vez hay más canales capaces de transmitir ideas por fuera del ámbito digital, apoyándose en pantallas pero no dependiendo de éstas.

Escenario Comercial

Las tecnologías de venta están auge y crecimiento gracias a los canales de venta “multichannel”, por lo que las posibilidades de interacción, relación y comunicación, se han incrementado de forma exponencial favoreciendo las economías de consumo. 

Los procesos y embudos que se prototipan en este sector son muy dispares, pero su objetivo fundamental sigue siendo el mismo: vender.

Escenario Estadístico

Es un sector absorbido en gran parte por sectores con mayor peso en nuestra sociedad,  como pueden ser  el gubernamental, la Banca, o el Social entre otros.  Se caracteriza por buscar una representación de cantidades ingentes de datos, recogidos mediante rigurosos procesos estadísticos, para luego convertirlos en ideas que puedan ser transmitidas a un grupo con determinadas características sociales, culturales, políticas, etc .

También encontramos un perfil más hibrido con un conocimiento tecnológico que recoge datos y los representa en un sistema de pantallas.

Sea cuales sean los propósitos de cada uno de estos escenarios, siempre hay un punto en común,  la afanosa tarea de representar ideas en un formato digital y que ésta sea capaz de ser digerida. Es aquí donde el diseño, entendido como solución, es capaz de transformas ideas, conceptos, o datos, en valores gráficos y modelos perceptivos  cercanos a la realidad de cada persona.  Esta tarea es fruto de años de trabajo y de investigación, y su función principal es seguir evolucionando y adaptándose a cambios sociales, humanos, políticos, culturales y demográficos.

A continuación haremos un breve recorrido a través de un abanico de modelos representativos para pantallas digitales, que son la base de los procesos de desarrollo de interfaces UI/UX para transformar los conceptos comunicativos, comerciales y estadísticos en valores humanos perceptibles:

Metáforas (El color es información)

Una metáfora material, es la teoría unificadora de un espacio racionalizado y un sistema de movimiento. El material está basado en la realidad táctil, inspirado en el estudio del papel y la tinta, pero tecnológicamente avanzado y abierto a la imaginación y la magia.

Las superficies y los bordes del material, proporcionan pistas visuales que se basan en la realidad. El uso de atributos táctiles familiares ayuda a los usuarios a comprender rápidamente las posibilidades. Sin embargo, la flexibilidad del material crea nuevas posibilidades que reemplazan a aquellas en el mundo físico, sin romper las reglas de la física.

Los fundamentos de la luz, la superficie y el movimiento, son clave para transmitir cómo los objetos se mueven, interactúan y existen en el espacio y en relación entre sí. La iluminación realista muestra costuras, divide el espacio e indica partes móviles.

Intencionalidad gráfica y expansiva (El espacio ayuda a crear construcciones solidas en el pensamiento de los usuarios)

Los elementos fundamentales del diseño basado en la impresión (tipografía, cuadrículas, espacio, escala, color y uso de imágenes) guían los tratamientos visuales. Estos elementos hacen mucho más que agradar a los ojos. Crean jerarquía, significado y enfoque.

Las elecciones de color deliberadas, las imágenes de borde a borde, la tipografía a gran escala, y el espacio en blanco intencional, crean una interfaz gráfica y audaz que sumerge al usuario en la experiencia.

El énfasis en las acciones del usuario hace que la funcionalidad central sea inmediatamente aparente, y proporciona puntos de referencia para el uso.

El movimiento proporciona significado (Las animaciones favorecen la exploración y estimulan la parte más emocional del cerebro)

Las acciones del usuario primario son puntos de inflexión que inician el movimiento, transformando todo el diseño.

Toda acción tiene lugar en un solo entorno. Los objetos deben presentarse al usuario sin romper la continuidad de la experiencia, incluso cuando se transforman y se reorganizan.

El movimiento es significativo y apropiado, lo que sirve para enfocar la atención y mantener la continuidad. La retroalimentación es sutil pero clara. Las transiciones son eficientes pero coherentes.

Mundo 3D - Luz y sombra

El grafismo en 3D da sentido y volumen a los gráficos, lo que  ayuda a los usuarios a interrelacionarse de forma más eficaz con el espacio, situándose en un entorno familiar, ya que nuestra percepción del espacio es multisensorial.

Materiales (características de los materiales)

Las formas pueden tener un valor representativo que aporte información al usuario Dependiendo del contexto en el que se encuentre, las características de estos materiales pueden ser:

  • Sólido
  • Ocupa puntos únicos en el espacio
  • Impenetrable, Forma mutable
  • Cambios de tamaño solo a lo largo de su plano
  • Inquebrantable
  • Puede unirse a otro material
  • Puede separar y dividir
  • Puede ser creado o destruido
  • Se mueve a lo largo de cualquier eje

Elevación

Medido desde el frente de una superficie hasta el frente de otra, la elevación de un elemento indica la distancia entre las superficies y la profundidad de su sombra.

Elevación en reposo

Todos los elementos materiales tienen elevaciones en reposo. Si bien los componentes tienen elevaciones de reposo consistentes en todas las aplicaciones, pueden tener diferentes alturas de reposo en plataformas y dispositivos.

Un diseño de aplicación de ejemplo con tarjetas y un botón de acción flotante, junto con un diagrama de sección transversal de las elevaciones de sus componentes a lo largo de su eje z.

Un ejemplo de diseño de aplicación con un cajón de navegación abierto, junto con un diagrama de sección transversal de las elevaciones de sus componentes a lo largo de su eje z.

Compensaciones dinámicas de elevación

Los desplazamientos de elevación dinámicos, son la elevación de objetivo hacia la que se mueve un componente, en relación con su estado de reposo.

Todo lo anterior, es una sencilla compilación de elementos  generales para desarrollo de interfaces que permitan trasladar datos con objetivos específicos a diferentes dispositivos, con especial atención a plataforma móviles, debido a su importancia actual.

Sombras

Las sombras proporcionan importantes pistas visuales sobre la profundidad de los objetos y el movimiento direccional. Son la única señal visual que indica la cantidad de separación entre las superficies. La elevación de un objeto determina la apariencia de su sombra.

La imagen izquierda: elementos sin sombras, la imagen derecha: elementos con sombras.

Jerarquía de objetos

La forma en que organices objetos, o colecciones de objetos en una aplicación, determina cómo se mueven entre sí. Los objetos se pueden mover de forma independiente o restringirse por objetos situados más arriba en la jerarquía.

Todos los objetos son parte de una jerarquía descrita en términos de una relación padre-hijo. El "hijo", en cada una de estas relaciones, se refiere a un elemento que está subordinado a su elemento "principal". Los objetos pueden ser hijos del sistema u otro objeto.

Detalles para padres e hijos:

  • Cada objeto tiene un padre
  • Cada objeto puede tener cualquier cantidad de hijos
  • Los hijos heredan propiedades transformativas de sus padres, como posición, rotación, escala y elevación
  • Los hermanos son objetos en el mismo nivel de jerarquía

Excepciones

Los elementos emparentados con la raíz, como los elementos de IU primarios, se mueven independientemente de otros objetos. Por ejemplo, el botón de acción flotante no se desplaza con el contenido. Otros elementos incluyen:

  • El cajón de navegación lateral de una aplicación
  • La barra de acción

Diálogos

Interacción: La forma en que los objetos interactúan entre sí, está determinada por su lugar en la jerarquía de elementos primarios y secundarios.

Por ejemplo:

  • Los niños tienen una separación mínima del eje z de sus padres; otros objetos no se insertan entre padres e hijos
  • En una colección de cartas desplazables, las cartas son hermanas entre sí, por lo que todas se mueven juntas en tándem. Son hijos del objeto de colección de tarjetas que controla su movimiento.

Elevación

La forma de determinar la elevación de los objetos, su posición en el espacio z, depende de la jerarquía de contenido que desee expresar, y de si un objeto necesita moverse independientemente de otros objetos.

La capacidad de representación, jerarquización y anidación de los elementos que se distribuyen en el espacio determina la percepción visual y psicológica del usuario, traza un recorrido organizado, coherente y consistente en cualquier dispositivo que se encuentre, y finalmente le proporciona las claves mentales y racionales para tomar decisiones basadas en la capacidad de influencia de la aplicación. La experiencia de usuario siempre debe estar centrada en el usuario, y la forma en la que este entiende, organiza y contextualiza su realidad.

Tags: 
interfaces, ui, ux

Deja un comentario

verifyserptrade

Sobre Nosotros

En Roiting contamos con un equipo de profesionales de diferente índole (analistas web, programadores, diseñadores, community managers, expertos en ppc y posicionamiento en buscadores) especializados en el entorno online y con un punto en común.