Creación de interfaces: Conceptos a tener en cuenta y como adaptarlos a futuras tecnologías


Creación de interfaces: Conceptos a tener en cuenta y como adaptarlos a futuras tecnologías

María Camila Salas Rueda

Las interfaces son elementos ubicados en un espacio donde se genera una interacción e intercambio de información entre el humano, el objeto y la funcionalidad de dicho objeto (objeto de acción); por poner un ejemplo un conductor (humano) quien manipula la interfaz de su vehículo, como el timón, los pedales, la palanca de cambios (objeto) para poder manejar (funcionalidad del objeto).

El ejemplo anterior nos habla de una interfaz física, pero en general transmite la idea principal de una interfaz en la cual existe una manipulación por parte del usuario a algún elemento de interacción con la intención de recibir información de esta.

En los últimos años se ha empezado a acuñar el término User Interface (UI) donde normalmente la idea de interfaz se lleva a un escenario más virtual. («What is User Interface (UI) Design?», n.d.) “Las interfaces del usuario son puntos de acceso donde los usuarios interactúan con diseños (…) Las interfaces del usuario son creaciones que significan una parte esencial de de la experiencia del usuario (UX)”. Esta idea de UI ha permitido crear composiciones atractivas para el usuario en las últimas tecnologías, pero considerando la rapidez con la que se crean nuevas sistemas, es necesario tener una guía con la cual poder crear interfaces con facilidad, es por eso que a continuación evaluaremos algunas características que considero necesario para la creación de interfaces.

 

1) Referentes para la UX

 

Siempre es bueno tener referentes básicos como el de Ben Shneiderman y sus 8 reglas del diseño de interfaz entre humano y computadora donde básicamente nos propone ciertos lineamientos a tener en cuenta si queremos crear una interfaz agradable para el usuario, ya que empezamos a manejar conceptos como retroalimentación, consistencia o migas de pan.

También hay otros referentes de los que podríamos guiarnos como Jakob Nielsen y Rolf Molich quienes propusieron otras 10 reglas a tener en cuenta para la creación de interfaces, sin embargo estos autores responden a la idea de factores determinantes para que nuestro usuario tenga una buena experiencia al navegar por la interfaz, lo cual claramente resulta útil, el problema es que a nivel técnico es difícil encontrar lineamientos que podamos seguir, sin embargo los siguientes conceptos pueden ser útiles bajo esa idea.

 

2) Jerarquía de elementos.

La jerarquía se refiere a la comparación entre los elementos de una composición. El objeto comparado al formato o el objeto comparado a otro objeto resulta ser algo importante para el manejo de la información y el mensaje que se quiera transmitir. Para que exista esta comparación es necesario que los objetos cuenten con diferentes propiedades.

 

2.1) Dominancia o importancia de información

Esta característica corresponde al tamaño que tengan los elementos de una composición, donde un objeto cuya área (base x altura) sea mayor a los demás, su información será más importante.

Ui Netflix

Ui Netflix

La anterior imagen corresponde a la pantalla principal de Netflix donde encontramos elementos de diferentes tamaños, como el menú vertical en el lado izquierdo de la pantalla (cuya área es pequeña en comparación al resto de la composición pero gracias a su tensión y contraste sigue llamando la atención), las otras opciones de películas en la parte inferior y finalmente la serie del momento recomendada por Netflix, cuya área ocupa la mayor parte de la pantalla y nuevamente hay una jerarquía de elementos entre la portada, el título las opciones y la descripción de la serie.

Esta distribución le permite a Netflix darle más propaganda a series y películas nuevas que quiere que el usuario vea. En otro contexto podemos usar esta propiedad con la misma función de transmitirle un mensaje importante al usuario, como la barra de vida en un videojuego, las noticias más importantes en un periódico o inclusive el resultado de una operación en una calculadora. La idea es que mientras más grande sea la dimensión del elemento, mayor debería ser su importancia.

 

2.2) Tensión o punto focal

En toda composición hay ciertos elementos que llaman la atención gracias a su posicionamiento. En este caso utilizo el ejemplo del botón para subir archivos de YouTube, el cual rompe con la orientación de los elementos en la composición, y a pesar de tener el mismo color que la barra superior de búsqueda y navegación, al aislar el botón se sigue llamando la atención gracias a su posición y no genera incomodidad en la interfaz.

Youtube UI

Youtube UI

 

La idea de este botón es facilitarle al usuario la subida de los elementos a la plataforma, lo cual es una de las funciones más usadas en YouTube, pero en general esta característica se puede adaptar en otros medios siempre y cuando sea justificado como es este caso. A fin de cuentas, el hecho de que sea tan diferente es lo que termina llamando nuestra atención, esa es la idea de esta propiedad.

 

2.3) Orientación o lenguaje de la composición

La orientación se trata sobre la dirección que tengan los elementos en la composición, esta dirección puede transmitir diferentes ideas frente al proyecto o empresa. Las composiciones con un orden vertical transmiten equilibrio, la horizontales estabilidad, las direcciones diagonales hablan de movimiento, las líneas diagonales abiertas trabajan naturaleza y finalmente las circulares hablan de seguridad.

Ñequi UI

Ñequi UI

Utilizó el ejemplo de Ñequi porque me parece interesante que al ser una aplicación que trabaje con dinero, del cual normalmente queremos seguridad, trabajan con elementos que propiamente no transmiten formalidad. Desde su logo, pasando por su lenguaje, hasta su interfaz, transmiten un mensaje de facilidad ya que lo que están vendiendo es un producto que facilite las transacciones económicas. Es un ejemplo curioso sobre cómo adaptar la orientación al mensaje que queremos transmitir.

 

2.4) Contraste o diferencia entre elementos

Esta característica se refiere a la diferencia de colores, formas o texturas entre los elementos de una composición. El contraste debería poder resaltar objetos de un espacio en comparación a los otros.

Persona 5 UI

Persona 5 UI

Utilizó el ejemplo del videojuego Persona 5 ya que siento que utiliza tanto colores, como formas y texturas diferentes a los del resto del escenario, y al complementarse con la orientación tan atractiva de los elementos, me resulta interesante esa diferencia entre el orden del mundo del juego y la composición. Inspirado en animes y mangas, la interfaz transmite esa estética y continúa con la narrativa del juego ya que ocasionalmente hay escenas donde vemos la historia ilustrada como un anime; me agrada la idea de que este contraste termina por mantener al usuario inmerso en una narrativa al estilo anime.

 

2.5) Tiempo o respuesta

Finalmente esta propiedad la entiendo como la respuesta a la interacción con la interfaz. La respuesta que le damos al usuario de que hemos entendido la decisión que tomó, mostrarle que el sistema es consciente y reacciona.

South Park: Phone Destroyer UI

South Park: Phone Destroyer UI

Recurro al juego South Park: Phone Destroyer, en esta pantalla donde para abrir un paquete de cartas toca interactuar con el mismo al hacer el gesto de destapar el sobre, posteriormente aparecen las cartas las cuales tienen diferentes animaciones a partir de su nivel.

También tenemos otra pantalla donde los paquetes de cartas se mueven según la posición del giroscopio, como si los paquetes fueran exhibidos en un stan donde el movimiento del mismo las hace girar. Está simples respuestas por parte del juego llaman la atención hacia los paquetes y las cartas ya que son ellas las que se mueven, las que tienen animaciones, las que responden al usuario.

La idea de conocer estas propiedades es para entender la jerarquía de los elementos en una interfaz, al conocer esta jerarquía podemos ubicar los objetos en la composición con la idea de que sea más cómodo para el usuario interactuar con ella.

 

3) Símbolos o como expresar información de manera precisa

Siento que es importante reconocer el uso de símbolos que recuerden a ideas sobre nuestro mundo. En ejemplos anteriores hemos visto símbolos que representan una funcionalidad de la interfaz sin necesidad de hacerlo muy explícito, como el caso del icono de una casa el cual interpretamos como el home o inicio, pero no utilizamos un lenguaje textual para expresarlo. De igual manera tenemos símbolos que no son propios de la semiótica de nuestro mundo como el menú hamburguesa, pero que ya conocemos como un menú desplegable con el cual interactuar.

La idea de utilizar símbolos es facilitar el manejo de los datos, en especial en una interfaz donde normalmente se busca que la información sea clara.

 

4) Adaptación tecnológica y nuevas interfaces

Es importante recordar que las interfaces de las las tecnologías más actuales fueron creadas a partir de estas propiedades, pero fueron adaptadas a sus nuevos requerimientos técnicos y sus necesidades, es por eso que imagino que en un futuro las interfaces se crearán de la misma manera.

En los últimos años los avance tecnológicos han significado una nueva oportunidad para la creación de interfaces, considerando que estas se han debido adaptar a sistemas de realidad virtual, aumentada o mixta cuyas composiciones terminan siendo innovadoras gracias a las nuevas herramientas que disponemos. En este sentido nos topamos con nuevos conceptos a tener en cuenta para crear y adaptar las interfaces.

Ahora también contamos con diferentes tipos de interfaces con las que podemos jugar:

 

  • Interfaces diegéticas: Donde la interfaz existe en el mundo del personaje, como es el caso del videojuego Dead Space donde la información que normalmente iría en una interfaz independiente del escenario, ahora se combina con el traje del jugador (la barra verde en su espalda determina la vida).
Dead Space UI

Dead Space UI

  • Interfaces no diegéticas: Todo lo contrario a la anterior, y la más común. Este tipo de interfaces son las que se manejan de manera independiente del escenario del juego. Como los fps donde se maneja una interfaz solitaria gracias al constante manejo de información que puede existir, como el número de balas, el mapa, el número de enemigos etc…
Fornite UI

Fornite UI

  • Espaciales: Algo parecida a las no diegéticas, las interfaces espaciales se pueden mover en las 3 dimensiones. Un ejemplo sencillo son los posibles pasos iluminados en un recorrido proyectado en la interfaz.

  • Meta: La puedo definir como el tipo de pantallas que tienen un poco de ambas. Se me viene a la cabeza el juego de Vice City, donde la pantalla de interfaz se moja cuando en la pantalla del juego está lloviendo.
GTA Vice City UI

GTA Vice City UI

Independientemente de la plataforma, estoy segura que las nuevas tecnologías brindarán nuevas oportunidades para el diseño de interfaces pensando siempre en la comodidad del usuario y considerando las diferentes propiedades que tocamos en este documento.

 

What is User Interface (UI) Design?. Recuperado de https://www.interaction-design.org/literature/topics/ui-design

Melo, S. (2008). Caja de Agua » Definición de Interfaz. Recuperado de http://blog.cajadeagua.com/?cat=2&paged=3

López, B. (2016). 8 reglas de oro en el diseño de interfaces – Designia. Recuperado de http://anahuacmayab.mx/designia/?p=1599

Wong, E. (2019). User Interface Design Guidelines: 10 Rules of Thumb. Recuperado de https://www.interaction-design.org/literature/article/user-interface-design-guidelines-10-rules-of-thumb

¿Qué son las interfaces diegéticas, no diegéticas, espaciales y meta usuario? Desarrollo de Juegos. (2017). Recupetado de http://juegos.uxgame.com/qu-son-las-interfaces-diegticas-no-diegticas-espaciales-y-meta-usuario.html

 

Leave a Reply

You must be logged in to post a comment.