Archive for May, 2019

Lineamientos de UI para tecnologías del futuro

Saturday, May 18th, 2019

DANIEL ALEXANDER FLOREZ VIDAL

El avance tecnológico en las últimas décadas es un hecho que no se puede negar, es por eso que no sería extraño llegar a encontrar nuevos sistemas en el futuro los cuales deberán cumplir con interfaces que se adapten a las necesidades del usuario, dichas interfaces se guiarán de las ya existentes, como es el caso de las realidades mixtas que se han inspirado en las características de composiciones antiguas y las han adaptado a sus propiedades.

Normalmente las características que son tomadas en cuenta para la elaboración de una interfaz son las siguientes:

Dominancia: Corresponde a la relación de tamaño entre los elementos de una composición, donde los objetos con un área superior a las demás tiene mayor dominancia. La idea es que estos componentes con gran dominancia sean los que tienen un importante mensaje que transmitir. Como en el videojuego Rainbow Six Edge donde en la interfaz hay más dominancia en los elementos superiores donde se muestra el tiempo, las victorias y las vidas del equipo.

En otros videojuegos, el mapa también tiene un área significativa en la interfaz, pero considerando que en este fps se debe contar con el factor sorpresa de encontrar a los enemigos en lugares imprevistos, resulta mejor evitar el mapa para crear la inmersión de una situación real en donde normalmente no se conoce la posición del enemigo. Por eso pongo este ejemplo, porque la dominancia de los elementos puede cambiar según las necesidades de los productos.

 

Tensión: Esta característica habla sobre la atención que se tenga a ciertos elementos en la composición, como dichos objetos logran llamar el interés de nuestros ojos a partir de la posición en X y Y. Pongo este ejemplo de The Evil Within, donde una interfaz simple logra atraer la atención del jugador al punto donde se encuentra la vida, las armas y la munición del jugador, gracias a los colores y formas diferentes.

De igual manera hay elementos interactivos en el juego, los cuales también llaman la atención al posicionarse sobre un entorno 3D, estos elementos también cuentan con colores y formas diferentes. A partir de formas simples y diferentes al juego, estas interfaces llaman la atención.

 

Orientación: Define la dirección de los elementos en la composición. Estas direcciones transmiten una información diferente a partir de la orientación: Dirección vertical transmite equilibrio, dirección diagonal representa movimiento, dirección horizontal transmite estabilidad, líneas diagonales abiertas dan un ambiente muy natural y finalmente los elementos con figuras circulares transmiten protección.

En este ejemplo propongo la interfaz de GTA V, donde claramente hay elementos horizontales y verticales, pero cuando activo el selector de armas o el selector de personajes, tengo un elemento circular que me transmite protección ya que en el momento de hacer la selección el tiempo del juego se ralentiza permitiéndole al jugador hacer la selección con más calma.

 

Contraste: El contraste ya lo hemos visto en los ejemplos anteriores cuando hablamos de las diferencias de color y forma entre elementos.

 

Tiempo: Se refiere a animaciones o cambios en los elementos a partir de diferentes situaciones, como la toma de decisiones, una cuenta atrás o algún tipo de interacción con el mundo. En este ejemplo recurro al juego de LOL, donde la magia, los ataques, los golpes recibidos y demás interacciones tienen correspondiente animación tanto en la interfaz como en el escenario del juego.

En general, las características nombradas con anterioridad pueden llegar a romperse siempre y cuando haya una justificación tras esas decisiones. Utilicé ejemplos de videojuegos pero estos elementos se pueden encontrar en diferentes sistemas, porque a partir de estas propiedades se puede llegar a crear cualquier interfaz, y las interfaces futuras las adaptaran a sus necesidades.

Diseño para nuevas tecnologías

Saturday, May 18th, 2019

Composición gráfica
Jessyca Alejandra Pinzón Guerrero

 

El diseño de interacción es un proceso creativo que requiere considerar tanto aspectos tecnológicos como aspectos de comunicación

Un producto bien diseñado debe ser transparente a los ojos del usuario, es decir que se concentre realmente en la actividad que debe realizar sin necesidad de tantas instrucciones para poderlo hacer, así su experiencia de uso será positiva, satisfactoria y cumpliendo con la expectativa del usuario.

Por ello al momento de crear el diseño de una nueva tecnología debemos tener en cuenta diversos puntos para un buen diseño de interacción. En este caso tomaremos la tecnología de control parental, la cual tiene un chip que se introduce en la cabeza de la persona (..)

Lo primero que debemos definir es que clase de interacción vamos a usar, en este caso he elegido la interacción por voz y manipulación directa, ahora definiremos el medio en donde efectuaremos esta interacción la cual será un chip integrado en la persona que estará monitoreando . Teniendo definido estos componentes de interacción comenzamos a establecer el estilo del producto para crear nuestra interfaz de usuario.

La interfaz debe ser asequible, en este caso deberemos usar elementos que el usuario pueda identificar fácilmente. Por ejemplo el logo de esta aplicación es un ojo abierto que se puede ver al iniciarla, si colocamos un ojo cerrado pero sin ninguna explicación lo más seguro es que el usuario comience a dar clic en el ojo pero que esta no sea la forma de iniciar la aplicación, si no que sea deslizando de abajo hacia arriba, para ello se puede colocar una flecha indicando la dirección hacia donde se debe deslizar . Los iconos que se usen deben ser suficientemente claros para que el usuario al verlos sepa que podría encontrar allí.

El contraste entre el fondo y los elementos debe ser clara para que el usuario no tenga fatiga visual, no podemos colocar colores demasiado llamativos que hagan pesado el estilo, al ser sobre la piel podemos usar un fondo azul o blanco con opacidad mientras que los elementos no tendrán opacidad. Además que de acuerdo al color de piel la opacidad será mayor o menor, ya que si es una piel demasiado oscura la interfaz no puede ser oscura debe ser clara, por eso el chip en el brazo deberá tener un reconocimiento de tono, en cual ajustará el tono de la interfaz y los colores para que puede leerse mejor.

Si queremos dar importancia a algo le daremos un tamaño mayor por ejemplo el logo que irá en la parte del centro será mayor, los elementos que lo rodean deben ser del mismo tamaño a la misma distancia uno del otro. Las pantallas internas deben tener el icono y nombre del cual presionó, la tipografía debe ser clara sin serifa, delgada y de un puntaje claro. Buscar la manera de jerarquizar por posición y tamaño es una buena manera de que el usuario no presente problemas de atención.

La forma en que el usuario interactúa con ella debe ser entendible en el menor tiempo posible, esta nueva tecnología tiene un bloqueo parental en una de las secciones , eso le permite al usuario que tiene implantado el chip no pueda ver u oír cosas violentas que alteren sus frecuencias cerebrales, esto debe ser entendible para la persona que lo active además de formas de personalizar como desea que la persona con el chip lo vea, ya sea pixelado, borroso, que no oiga nada o solo distorsión, estos parámetros deben ir incluidos en esa pantalla de bloqueo parental.

En esta pantalla la interfaz sería diegética ya que los elementos como los botones al presionarlos realizarán alguna acción dentro de la pantalla y también se podría usar meta, en el momento en el que los niveles del cerebro se encuentren demasiado altos, un halo rojo aparecería para revisar que es lo que está sucediendo. Estos elementos estarán compuesto en base a ley de figura fondo y ley de contraste

El diseño de es un proceso creativo que se debe considerar los aspectos tecnológicos como de comunicación, además de las necesidades del usuario que al que se quiere llegar y el mejor estilo de interacción de la interfaz de usuario. Nuevamente podemos observar que no puede existir la mejor tecnología sin un buen diseño de interfaz porque debe ser transparente para que el usuario pueda usarla y disfrutarla sin ningún problema.