Archive for the 'El uso de la Interfaz' 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.

Interfaces AR y VR

Monday, May 6th, 2019
page1image416

Composición Grafica Para Interfaces

Nombre: Cristian Camilo Guiott Vargas

Carrera: Diseño Interactivo

Interfaces AR y VR

Las aplicaciones de realidades mixtas cada vez son más comunes, en la actualidad la realidad aumentada y la realidad virtual permiten generar espacios sintéticos con los que los usuarios interactúan en tiempo real dando una sensación de libertad en la interacción con los entornos virtuales.

La realidad aumentada y la realidad virtual manejan un sistema de interfaces que simulan la realidad y hacen entender al usuario que pueden interactuar completamente con las mismas, ¿pero son completamente funcionales?.

Históricamente,la función de las interfaces se han fundamentado en las 2D (dos dimensiones) dando una metodología de uso no tan compleja para el usuario, pues este interactúa de manera sencilla controlando sus movimientos a través de un mando,esencialmente oprimiendo botones físicos para seleccionar o realizar algún tipo de acción y y cuando entendemos la referencia del botón es algo que tiene profundidad y al tocarlo este se hunde, a partir de este momento la usabilidad de las realidades mixtas se torna más compleja pues el usuario debe interactuar con algún periférico físico para realizar acciones en la realidad aumentada o virtual y esto hace que la inmersión la cual es el objetivo principal de estas realidades se pierda o no sea completamente satisfactoria para el usuario.

Dando una solución a estos problemas, las interfaces de la realidad aumentada y realidad virtual han evolucionado con el tiempo, para poder interactuar de manera virtual con los elementos generados por estas realidades. Prueba de ello es tomar un texto en distintos niveles de profundidad generando una separación de los textos con el fondo viéndose con un botón, o tomando elementos reconocibles por el usuario como botones o centros de acción y distribuirlos por el espacio de manera adecuada dándoles profundidad para darle la guía al usuario de que esos objetos tridimensionales que sostenía en el espacio real, también se hallan en un espacio virtual y que puede interactuar con ellos de manera virtual, bien sea mirando fijamente el botón o haciendo algún tipo de gesto con las manos. Todo esto es posible gracias a el avance a pasos agigantados de la tecnología,puesto que ahora podemos incluir un rastreador de movimiento para así detectar a donde están mirando los ojos o reconocer cuales son los gestos que el usuario está realizando.

page1image20792page1image20952page1image21112

1

page1image21720

page2image416

La interacción del usuario en estas realidades es implícita, contrario de una interacción en dos dimensiones pues acá el usuario debe actuar de forma explícita. Esto conlleva a que el usuario utilice un esquema de comunicación determinado por la interfaz de la aplicación. En estos casos el usuario debe recordar comandos o partes gráficas para poder realizar la acción y comunicarle de manera física con la interacción de un mando o controlador (teclado,control).

La interacción implícita que realiza el usuario con la realidad aumentada y la realidad virtual se basa en movimientos naturales que captan la voluntad del usuario, un ejemplo claro es el manejo de la cámara dentro de un videojuego o aplicación: en un sistema de realidad aumentada o realidad virtual la cámara se desplaza con el movimiento del usuario, es decir que si el usuario quiere ver hacia arriba,abajo, atrás,adelante o los lados, solo debe girar su cabeza o cuerpo de forma natural sin tener que recordar algún tipo de comando tal y como lo hace en la mundo real.

Otro gran ejemplo es la interacción con los elementos disponibles en la escena de la realidad aumentada y la realidad virtual, pues si el usuario quiere tomar un objeto, cerrar una ventana o accionar una palanca, lo único que debe hacer es tomar los objetos y llevar a cabo la acción que haría en el mundo real.

Las realidades mixtas fundamentalmente proporcionan un espacio de interacción hombre-maquina que permiten al usuario olvidar que se encuentra en un espacio real y lo transportan a un mundo virtual,bien sea poniendo elementos virtuales a la realidad (realidad aumentada) o sustituir la realidad con elementos netamente virtuales (realidad virtual).

page2image14736page2image14896page2image15056

2

page2image15664Ensayo