Archive for the 'Interfaces' Category

Técnicas de diseño para interfaces

Saturday, May 18th, 2019

Dahyam Sanabria
Composición de interfaces
TÉCNICAS Y COMPONENTES IMPORTANTES DEL DISEÑO PARA NUEVAS INTERFACES

ELEMENTOS TÉCNICOS DE USABILIDAD:
Para elaborar interfaces y tener un buen diseño, con una buena interacción frente al usuario, debemos comenzar con los siguientes elementos técnicos:

1. Estudio de usuario: Cuando se desarrolla una idea, que debe ser reflejada en una interfaz con una funcionalidad importante. Se comienzan a elaboran wireframes de alta y baja fidelidad, estos nos permiten tomar decisiones más profundas para el contenido. La UX y las funciones de diseño, nos permiten indagar y conocer a nuestros usuarios objetivos. En este tipo de procesos es bueno tomar los detalles, inquietudes o preguntas que tienen los usuarios que interactúan con nuestros prototipos para obtener un producto funcional y llamativo.

2. Arquitectura de la información: Elaborar un flujo de información frente a la necesidad del usuario es un punto clave dentro de la creación de nuestra interfaz, las opciones y posibles desviaciones que tendrá nuestro usuario frente a la información que plasmemos será a partir de los datos que recopilemos en:

Público objetivo y audiencia
Análisis competitivo
Diseño de interacción, navegación y contenidos.
Ubicación de los contenidos para acceder a la información
Facilidad de búsqueda
Accesibilidad

3. Sistemas de navegación: Cuando ya se ha seleccionado el contenido que irá en nuestra interfaz con el correspondiente diseño, comenzamos a identificar los flujos de tareas con las funciones esenciales. Esto en base al análisis realizado por nuestros usuarios, nos permite orientar una navegación más eficiente que aporte orden y jerarquía del contenido en cada pantalla, de manera que en cada una se destaquen los contenidos más relevantes. La “Navegación global” se refiere específicamente a los botones y enlaces que habitualmente están situados en un sitio consistente, mientras que la “Navegación local” se refiere a la sección de contenido en la que se encuentra el usuario.

-Interfaces atractivas: Estas son sencillas según Donald Norman, donde nos sugiere 3 motivaciones para nuestros diseños en una interfaz:
La visceral idea del usuario, nos refleja una reacción emocional y psicología positiva frente al diseño, esto inspira confianza en el producto o servicio para que este bien diseñado.
Conductual: La atención al detalle inspira confianza en que el producto o servicio sea funcional de cara al usuario.
Reflexivo: Establece una confianza inmediata, donde se garantiza la satisfacción de uso según las expectativas funcionales o de lo contrario nuestro usuario se decepcionará.

4. Pruebas funcionales con diseño: Reunir a un grupo de usuarios para que interactue con nustra interfaz ya con un diseño incorporado y funcional, permite que nosotros como diseñadores indaguemos en sus interacciones, gustos, disgustos, navegación y satisfacciones en relación al producto. Siempre debemos apuntar o detallar los posibles problemas o interrogantes que se presenten durante la interacción, solicitar que mencionen sus ideas, conclusiones, actos y razonamientos nos permitirá entablar un análisis más profundo.

5. Realizar una evaluación Heurística: Reunir un grupo de participantes, estos nos ayudaran a evaluar e identificar las dificultades de uso de nuestro producto ya diseñado y su interfaz. Nuestros participantes nos compartirán sus propias observaciones en relación a sus experiencias con algunos productos similares, que les permitan conseguir sus propias tareas o si descubren más dificultades.

10 PRINCIPIOS DE USABILIDAD:
Estos principios de usabilidad se basan en las reglas heurísticas de Jakob Nielsen y deben aplicarse en la evaluación de diseño y usabilidad.

1. Diseño elegante y sencillo: Será atractivo y minimalista, el usuario seleccionara algunas funciones y accederá al contenido sin distraerse con diseños complejos.

2. Convenciones y lenguajes: Se empleará lenguaje visual y verbal, la experiencia de usuario debe ser intuitiva gracias al orden de la información.

3. Coherencia: Los usuarios deberán familiarizarse con el diseño de una forma más rápida y dinámica para que sea coherente con ellos mismos.

4. Visibilidad: El diseño se asegura de que las acciones, objetos y opciones sean constantemente visibles y el usuario no tenga que memorizarlos, deberá encontrarse una opción de “ayuda” en todo momento.

5. Feedback visible: El diseño informara a los usuarios mediante un feedback en el momento apropiado, como una sugerencia al detallar un problema o demora en la accion.

6. Control del usuario: El diseño le otorga al usuario un control total sobre las funciones, con capacidad de cancelar acciones y una simple función de salida si decide no continuar con el proceso de interacción.

7. Atajos: El diseño debe ofrecer pequeños atajos o comandos que permitan a los usuarios expertos que no se distraigan a los menos experimentados. Si es posible podemos brindarle opciones de configuración personalizada para acciones frecuentes dentro de la interfaz.

8. Ausencia de errores: La interfaz intentará que el usuario no cometa errores, al menos dando la opción de confirmación en la pantalla, para asegurar la accion a tomar, como la de eliminar algún objeto.

9. Informes de errores: Se debe informar al usuario de los errores empleando un lenguaje claro y comprensible, explicandole lo ocurrido y la forma en la que se rectificará la información.

10. Ayuda: El diseño además deberá ser un proceso intuitivo para nuestros usuarios, para que no tengan la opción de leer algún manual para navegarlo.

Cuando necesiten ayuda esta debera estar disponible en cualquier momento y será sencilla y oportuna para el usuario.

COMPONENTES ELEMENTALES PARA DISEÑO EN INTERFACES:
Para iniciar a elaborar nuestros diseños para una interfaz concreta, debemos tener en cuenta elementos claves para generar una buena experiencia de usuario.

1. Diseño y uso del color: Los colores se encargan de armonizar y organizar la información de los elementos gráficos. El uso de colores basado en las nociones básicas del círculo cromático aportan equilibrio, armonía y organización al diseño.

2. Iconos: Representan signos relacionados a formas u objetos de nuestra vida cotidiana, algunos de ellos son representaciones literales, metafóricos o análogos.

3. Tipografía: Para el diseño de interfaces debemos ser conscientes de la legibilidad y fluidez que tenga nuestra tipografía vinculada al diseño. Algunas claves para la selección de una fuente esta en: Tipo de letra, leading, tracking, longitud de línea y alineación.

4. Composicion: Para elaborar un buen diseño debemos tener en cuenta las estructuras de los elementos visuales basándose en las teorías de las percepción de la Gestalth, así como la sección áurea y la regla de tercios, estos contribuyen al orden y la jerarquía.

5. Equilibrio: Es la distribución de los elementos dentro de una página deben ser simétricos, estos deben transmitir estabilidad y armonía. La simetría si está desequilibrada crea una tensión y un movimiento natural, por la razón que algunos diseños suelen elaborar piezas asimétricas para que sean comunicativas.

6. Forma y espacio: Las formas son elementos comunes en cualquier composición al igual que los espacios, en estos casos se utilizan teorías como los de la Gestalt de semejanzas, cierre y figura fondo. Teniendo en cuenta estas teorías, nosotros como diseñadores somos capaces de elaborar formas simétricas o asimétricas, que permitan al espectador entender rápidamente el mensaje que deseamos transmitir.

7. Tamaño y escala: El tamaño es una variable en la creación del orden y jerarquía de elementos, aquellos que nos atraen suelen ser los más grandes que los pequeños, de modo que automáticamente les asignamos más importancia. Por otro lado la escala no solo asigna una importancia dentro de la composición sino que las imágenes y textos también representan una interacción con el usuario.

8. Posición y ubicación: La posición visual de los elementos dentro de la pantalla nos permite establecer un orden natural de los objetos con los que estemos interactuando. En la cultura occidental, leemos de izquierda a derecha, arriba e izquierda abajo a la derecha. De modo que si todos los elementos compositivos tuvieran el mismo tamaño no podríamos dar una jerarquía de importancia a los elementos.

9. Color y contraste: El color es un elemento clave en la composición, dado que las diferencias entre tono y saturación alteran el foco de atención y la importancia de los elementos compositivos. El contraste establece un orden de diferencias, aquellos elementos que tienen más contraste sobre el fondo son más dominantes.

10. Sección aurea: Es una proporción naturalmente recurrente y armoniosa que se aplica desde tiempos antiguos.

11. Ley de tercios: Está regla sugiere que las composiciones deben dividirse en tercios, empleando dos guías horizontales y verticales, que resultan en nueve secciones iguales. Los elementos más importantes siempre deben ubicarse en las intersecciones, obteniendo composiciones más dinámicas y de interés visual.

12. Resolución de pantalla: Para la composición de interfaces debemos tener en cuenta la resolución con la que se va a trabajar, sea un monitor, tablet o smartphone.

CREACIÓN EN INTERFACES INMERSIVAS:
La creación de ambientes virtuales tridimensionales se vuelven más complejos cuando el diseño de la interfaz y la experiencia del usuario son más interactivos. Ofrecerle al usuario un juego intituivo y feedback sobre la interacción con el entorno es sumamente complicado, ya que dependemos de diversas interacciones y funciones planteadas dentro de la interfaz y manejadas por el usuario en varios aspectos según su necesidad de personalización si está la brinda.

La creación de nuevos eventos y experiencias, describen a las nuevas interfaces como interacciones más físicas con el mundo real, como la interacción de hologramas interactivos que recurren a dispositivos de entrada externos,como en: centros educativos, museos, centros médicos y de investigación científica.

QUE SON LOS HOLOGRAMAS
Los hologramas es una imagen que se obtiene a partir de una holografía, haciendo uso de la iluminación mediante láseres, donde consigue generar imágenes a través de 3 dimensiones. El láser permite la grabación microscópica de una película fotosensible, en donde 2 haces de luz producen una interferencia que permiten reflectar la luz a la creación del objeto.

A diferencia de las nuevas tecnologias, la experiencia de usuario debe centrarse en cómo se representa el diseño dentro de la interfaz, hay que tener en cuenta que el diseño para el Web es diferente del diseño tradicional de interfaces de usuario (IU) para software; principalmente porque el diseñador de Web tiene que dar el control y compartir la IU con los usuarios y con el software o hardware.

“Una interfaz gráfica de usuario (GUI), es donde coinciden el diseño de la interacción y el de la interfaz. Es sólo una manifestación visual de “inter” actividades; sólo es un aspecto del diseño de interacción, no el mismo diseño de la interacción.”

Hay que tener en cuenta el objetivo principal que tiene la GUI en relación de la ineformacion para que esta sea comprensible y útil para el usuario, por lo tanto la GUI dependerá de cómo el usuario la interprete según su entorno y la tecnología con la que disponga.
(GUI: interfaz gráfica de usuario)

Bibliografías:
Ruiz Fernández, (2012). interfaces de usuario: diseño de la visualización de la información como medio para mejorar la gestión del conocimiento y los resultados obtenidos por el usuario. Universidad de Zaragosa

López Javier, (2007). Diez principios para un buen diseño
http://digitk.areandina.edu.co/repositorio/bitstream/123456789/453/2/Diez%20principios%20para%20un%20buen%20diseño%20segun%20dieter%20rams0001.pdf

Jamie Steane, (2016). Fundamentos del diseño interactivo. Reino Unido. Editorial: Promopress.

Ros Germán, García Mateos, (2012). Realidad aumentada basada en características naturales. Alemania. Editorial: Académica Española.

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

Saturday, May 18th, 2019

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