Interfaces Visuales

Definiciones

todo aquello que hace posible la interacción con un sistema ejecutándose en una computadora

Un punto o medio de interacción entre dos sistemas, disciplinas o grupos

Un canal de comunicación entre dos o más entidades

Su calidad determina, entre otras cosas:

Si el usuario acepta o no el sistema

Si los diseñadores del sistema son elogiados o reprobados

Si un sistema tiene éxito o fracasa en el mercado o la empresa

Al diseñar la interfaz de una aplicación, se debe tener en cuenta el deseo del usuario de enfrentarse a algo fácil, pero a la vez poderoso

Factores y fundamentos

Factores humanos Percepción visual, táctil y auditiva

Psicología cognitiva de la lectura

La memoria humana

Razonamiento

Factores adicionales

Comportamiento del usuario

Comprensión de las tareas que el sistema realiza

Cómo ve venir el usuario la automatización de sus tareas

Fundamentos de la percepción humana

Se utiliza generalmente un medio visual

Una especificación apropiada de la comunicación visual es el elemento clave de una interfaz amigable

Aunque predomina la información gráfica, aún el texto es utilizado ampliamente. Por ello, la definición del tamaño del texto, el tipo de letra, la longitud de la línea, las mayúsculas, el sitio y el color influyen en la facilidad con que se realiza la extracción de información

Procesamiento interno de la información: extracción, almacenamiento y utilización

Su relación con la psicología

Nivel de habilidad humana y comportamiento Habilidades del usuario

Personalidad

Comportamiento

Escalas psicológicas (Shneiderman)

acepta riesgos / evita riesgos

control interno / externo

reflexivo / impulsivo

ansiedad alta / baja

tolerancia al "stress" alta / baja

tolerancia a la ambigüedad alta / baja

dependencia / independencia del campo de especialización

activo / pasivo

motivación alta / baja

acepta riesgos / evita riesgos

Tecnomiedo

Tareas y factores humanos

o Un sistema raramente permite a un usuario hacer algo enteramente nuevo

o Se automatizan tareas manuales o semimanuales

o La automatización en teoría debe permitir: una mejor calidad, velocidad, desempeño, precisión y reducción de costos

o Existen tareas que circundan al sistema y que deben seguir desarrollándose:

Comunicación: recepción de datos

Diálogo: interacción con el sistema

Cognitivas: análisis, funcionamiento del sistema

Control

Estilos de interacción entre Hombre y Máquina

o Están ligados con la evolución de la tecnología

o Interfaz de preguntas y ordenes

o Menú simple

o Interfaces orientadas a ventanas con opción de señalar y elegir

Visualización simultánea de diferentes tipos de información

Soporte de multitareas

Menús desplegables

Uso de iconos

Capacidades para la presentación de información

o Con reconocimiento de voz

o NUI: Interfaces para ambientes Web

o En simuladores

Procesos

Entornos

o Sistemas Industriales

CAD / CAM / CAE / CIM 

Diseño de interfaces

Diseño de la interfaz Hombre-Máquina o Creación de diferentes modelos de funcionamiento del sistema

o Especificación de las tareas humanas y las orientadas a la computadora

o Aspectos de diseño

o Diseño de prototipos

o Implementación con la participación activa del usuario final

Modelos de diseño de interfaces

o Modelo de diseño: Especificación de requisitos

o Modelo de usuario: Representa el perfil de los usuarios finales

Edad

Sexo

Estado físico

Educación

Procedencia cultural o étnica

Motivación

Objetivos

Personalidad

Creación de modelos

Modelos de diseño de interfaces o Categorías de usuario

o Novatos

o Usuarios intermitentes con capacidad de aprender

o Usuarios frecuentes con capacidad de aprender

o Modelo del usuario: Es la imagen mental del sistema que se forma el usuario final

o Imagen del sistema: Es creada por el equipo de desarrollo del sistema

Estos modelos son abstracciones de lo que el usuario esta haciendo o piensa que se esta haciendo o de lo que algo piensa que debe hacer cuando utiliza un sistema interactivo

Estos modelos permiten al diseñador de interfaces satisfacer un elemento clave del principio más importante del diseño de interfaces de usuario: conocer al usuario, y conocer las tareas que se automatizarán

Aspectos relevantes en el diseño

Aspectos de diseño Tiempo de respuesta

Retardo y variabilidad

Facilidades de ayuda al usuario

Ayuda global o local

Invocación

Presentación

Terminación de la ayuda

Estructura

Manejo de información de error

El mensaje debe describir el problema en un lenguaje que el usuario comprenda

Debe proporcionar información constructiva para poder solventar el problema

Indicar las consecuencias negativas del error

Debe de ir acompañado de una señal visual o audible

No debe aportar un juicio sobre lo ocurrido

Asignación de nombres a las ordenes

Elegancia y simplicidad

Elegancia y simplicidad

o Se deriva del latín: eligere, que significa "seleccionar cuidadosamente"

o El diseño visual esta involucrado en la selección cuidadosa de elementos formales que sobresalgan en el diseño

o Las soluciones elegantes, generalmente las más directas (simples), revelan un entendimiento íntimo del problema y que su esencia ha sido comprendida y representada

o La simplicidad juega un papel central en los diseños a tiempo, por esto las soluciones que resuelven problemas de forma clara y económica

o Los beneficios de la simplicidad son:

Accesibilidad

Reconocimiento

Rapidez de percepción

Uso continuo

o Una de las premisas de la simplicidad es la minimización de los componentes y la simplificación de la relación entre ellos.  

o La simplicidad en el diseño depende de tres principios estrechamente relacionados:

o Unidad

o Refinamiento

o Conveniencia

Los elementos en el diseño deben ser unificados para producir un todo coherente, las partes (al igual que el todo) deben ser refinadas para captar la atención del usuario sobre sus aspectos esenciales, y en cada nivel debe asegurarse que la solución fue la más conveniente.

Unidad: la meta debe ser integrar de manera armónica cada elemento de la interfaz como si fuese uno sólo.

Refinamiento: el refinamiento sucesivo es el único camino hacia la simplicidad. Para crear una solución elegante, todo aquello que no sea esencial para la comunicación debe ser eliminado.

Las soluciones propuestas deben ser las más convenientes

Técnicas para lograr soluciones elegantes

Reducción de un diseño a su esencia

Regularización de los elementos del diseño

Combinación adecuada de elementos

Técnicas para lograr soluciones elegantes

o Reducción de un diseño a su esencia

Determinar las cualidades esenciales (típicamente una lista de adjetivos) que pueden ser incluidas en el diseño usando elementos formales como: etiquetas, controles, colores, texturas, patrones o imágenes.

Examinar de manera crítica cada elemento en el diseño y cuestionar por qué es necesario, cómo esta relacionado a la esencia del diseño, y que tanto puede sufrir el diseño sin el. Si no pueden contestarse algunas preguntas, el elemento debe ser removido.

Tratar de remover el elemento del diseño de alguna forma. Qué sucede?, Si el diseño se colapsa, ya sea funcional o estéticamente, el elemento debe permanecer, de otra forma puede omitirse de la solución final

Técnicas para lograr soluciones elegantes

o Regularización de los elementos de un diseño

Use formas geométricas regulares, contornos simplificados y colores opacos donde sea posible

Si se requieren múltiples formas similares, hacerlas idénticas, si es posible, en tamaño, forma, color, textura, contornos, orientación, alineación y espaciamiento.

Limitar la variación en tipografías a una o dos familias

Para cosechar los beneficios de la regularidad, asegúrese de que los elementos críticos que deban resaltar en el diseño no estén regularizados

Cualquier irregularidad será interpretada significativamente por el usuario

Técnicas para lograr soluciones elegantes o Combinación adecuada de elementos

Revisar el papel funcional de cada elemento en el diseño

Buscar situaciones donde múltiples elementos jueguen papeles similares

Preguntar si el papel de un elemento puede ser desempeñado por un elemento adyacente, posiblemente después de pequeñas modificaciones

Combinar elementos redundantes en uno sólo, posiblemente más simple

Si no es posible realizar modificaciones al diseño actual, no importa, hay diseños en los que no se pueden aplicar estas reglas

Escala, contraste y proporción

Escala, contraste y proporción o Escala

Describe al tamaño o magnitud relativa de un elemento de diseño dado en relación a otros elementos o al todo

o Contraste

Resulta de las diferencias notables entre dimensiones visuales comunes que puedan ser observadas entre elementos de una composición. El contraste proporciona la base para una distinción visual, pueden usarse los siguientes atributos: forma, tamaño, color, textura, posición, orientación y movimiento.

o Proporción

Determina el balance y armonía de la relación entre elementos

o Beneficios del uso de escalas, contrastes y proporcionalidad

Diferenciación

Enfasis

Actividad

Interés

Técnicas para el uso de la escala, el contraste y la proporción

o Establecimiento de regiones perceptuales

Agrupar cada elemento de información en un número pequeño de categorías (7 +/- 2) de acuerdo a su uso y origen

Determinar el rango o importancia de los diferentes grupos y organizarlos en un número más pequeño en base al rango

Usar las variables perceptuales apropiadas para establecer el efecto de región. El tamaño y el valor pueden establecer jerarquías perceptuales claras

Maximizar las diferencias perceptuales entre grupos, mientras que se minimizan dentro de los mismos

Verificar que los elementos en una misma región se comporten como una unidad, pero que el grupo mismo pueda ser separado visualmente del resto de la interfaz

Técnicas para el uso de la escala, el contraste y la proporción

o Agudización de las distinciones visuales

Identificar los rangos que requieren ser establecidos en los grupos de información

Determinar el rango de variación (por ejemplo: valores o tamaños máximos y mínimos, número de colores, etc.) y usarlo tanto como sea posible en el código resultante

Usar escalamiento logarítmico más que lineal, usar un orden 2 es generalmente suficiente

Verificar los resultados

o Integración de figuras y fondos

Determinar el tamaño total de la combinación figura/fondo

Igualar el peso visual de la figura y el fondo

Proporcionar suficiente espacio en los márgenes de la figura para eliminar tensión visual

Posicionar correctamente la figura en el fondo. La figura debe ser centrada en el fondo a menos que los requerimientos de comunicación indiquen lo contrario

Organización y estructura visual

Organización y estructura visual o Son características que el usuario utiliza para evaluar desde el primer

momento los aspectos más relevantes de una interfaz.

o La estructura introduce varios beneficios

Unidad

Integridad

Entendimiento

Control

Técnicas usadas para mejorar la organización y la estructura visual

o Uso de la simetría para asegurar el balance

Identificar los ejes sobre los que será establecida la simetría

La simetría sobre el eje vertical prevalece en la percepción humana y es generalmente más útil en despliegues visuales

Balancear cuidadosamente la información en cada lado del eje

Asegurar que el eje de simetría esta centrado en el contexto total del despliegue

Verificar los resultados

Técnicas usadas para mejorar la organización y la estructura visual o Uso de alineación y establecimiento de relaciones visuales

Identificar las fronteras totales del área de diseño y si es posible mejorar buscando algunas alineaciones

Localizar elementos y márgenes - internos y externos - modificar y calificar los resultados

Localizar elementos aislados y alinearlos con algo dentro del diseño

Si un elemento no puede ser alineado con otro, tratar de relacionarlo a las proporciones del display

o Ajuste óptico

Determinar el punto exacto de alineación y unidad de espaciamiento requerida

Verificar con respecto a márgenes

Realizar acercamientos sobre los elementos a evaluar

o Configuración del diseño con espacios negativos

Revisar la organización de la información

Asegurar separación espacial de unidades independientes de información

Determinar cuáles elementos requieren énfasis visual adicional

Incrementar el espacio en blanco que rodea a elementos críticos

Recordar que el espacio en blanco no es espacio desperdiciado

Organización y estructura visual

Técnicas usadas para mejorar la modularización y programacióno Reforzar la estructura a través de la repetición

o Iniciar con un borrador de la serie de diseños que se producirán

o Localizar márgenes comunes o unidades funcionales que deban ser claramente percibidos en el diseño. Los diseños individuales deben ser ajustados para ser consistentes con elementos estructurales mayores

o Localizar elementos ampliamente espaciados

o Localizar las rutas que el ojo necesita seguir en el diseño. El uso de elementos estructurales similares puede facilitar esta tarea del usuario

o Usar ubicaciones estándar y estilos de presentación consistentes para controles, texto o imágenes

Modularización y programación

La mayoría de los diseños de interfaces gráficas pueden ser divididos en regiones bien delimitadas que comparten características entre ellas. Esto conforma un módulo de diseño. Cuando uno programa la ubicación de elementos en una interfaz, los resultados son satisfactorios para el usuario final

Técnicas usadas para mejorar la modularización y programación

o Establecer unidades modulares

o Determinar la unidad vertical

o La unidad vertical debe permitir a dos controles ser ubicados uno en seguida del otro, debe ayudar en el posicionamiento de controles multilínea, grupos de controles, separación entre grupos

o Determinar la unidad horizontal

o La unidad horizontal óptima debe permitir de 5 a 7 divisiones en un diseño típico y debe permitir también la subdivisión de estas nuevas regiones

Técnicas usadas para mejorar la modularización y programación

o Creación de estructuras basadas en rejillas

o Determinar restricciones de tamaño para el área de trabajo

o Determinar los módulos básicos verticales y horizontales. El vertical es determinado por el conjunto de widgets, mientras que el horizontal es determinado por el número de controles. Estos parámetros definen el "grid canónico"

o Desarrollar un borrador que aproxime los tamaños, posiciones y orientación de los elementos de control relevantes

o Usar el "grid canónico" para ajustar los tamaños y posiciones

o Para estructuras dinámicas, identificar el tamaño mínimo que pueda ser ubicado en el diseño y evitar el cálculo dinámico

Representación de imágenes

Imágenes y representación o El uso de imágenes es esencial en la comunicación de una interfaz de

usuario

o Son importantes en tres áreas

Identificación: sirven como representaciones de objetos concretos del mundo real

Expresión: tienen un poder expresivo muy grande

Comunicación: no tienen límites

o El uso de representación introduce significado a los diseños y es la base para la comunicación

o La interpretación de una representación es estudiada por la semiótica (semiotics)

La teoría y práctica general de los signos, cuyo alcance incluye, todo lo que es interpretado como un signo, y define las circunstancias en las cuales se obtienen las mejores interpretaciones

o Técnicas para la representación de imágenes

Selección del vehículo adecuado

Refinamiento a través de abstracción progresiva

Coordinación para asegurar consistencia visual

Técnicas para la representación de imágenes

o Selección del vehículo adecuado

Si el concepto a ser comunicado es un objeto concreto, familiar y tangible use un signo de icono

Si el concepto será usado repetidamente usar su representación a lo largo de toda la aplicación o aplicaciones

En muchos otros casos - en procesos abstractos - se recomienda usar etiquetas textuales

Evitar tanto como sea posible, la mezcla de signos de iconos y texto dentro de una sola imagen

o Refinamiento a través de abstracciones progresivas

Determinar el nivel adecuado de abstracción

Iniciar con imágenes que incluyan las principales características

Modificar la imagen original y evaluar

Simplificar formas complejas

Eliminar contornos que no son importantes para la identificación del objeto

Guías de estilo

Una guía de estilo es un conjunto de recomendaciones, generalmente propuestas por un fabricante u organización con el fin de establecer estándares

o Aspectos cubiertos por las guías de estilo

Ventanas y cajas de diálogo

Iconos, botones, apuntadores y cursores

Iconos, identifican programas y objetos que pueden ser accedidos por el usuario

Botones, permiten al usuario seleccionar herramientas, actualizaciones, y procesos

Apuntadores y cursores, indican el movimiento del mouse y, en algunos casos, el tipo de la actividad posible en una ubicación en particular

Tipos de menús

Control

Pop-up

Pull-down

Submenus

Recomendaciones

Basados en telefonía

Mensajes

Ayudas

Software de exportación

Software internacional o Cuándo internacionalizar ?

o A qué lenguajes traducir primero ?

o Cuándo no internacionalizar ?

o Ajustar el software para la internacionalización

Aislar el texto

Usar archivos de recursos

Manejo dinámico de objetos

No usar texto en iconos

Prever el uso de diferentes formatos

Usar estándares: ISO 10646 y Unicode

Análisis de costos

o Diagramas y gráficos

Los diagramas dan un comportamiento cualitativo

Si requiere detalles, use tablas

Conocer los diferentes tipos para usar el que más se adecua a lo que deseamos mostrar

Directrices generales para el diseño de interfaces

Aunque los aspectos que determinan el diseño de interfaces gráficas de usuario son múltiples, los podemos agrupar en tres grandes grupos:

o Interacción general: sobre la consistencia de comandos, protección del sistema y facilidades de ayuda y asistencia

o Visualización de información: cómo el sistema presenta resultados intermedios o finales al usuario, o en su defecto alguna situación que requiera su intervención

o Entrada de datos: cómo el usuario se comunica con el sistema para proporcionar datos y establecer las condiciones de funcionamiento del sistema

Interacción general o Ser consistente

o Ofrecer una realimentación significativa

o Verificar cualquier acción destructiva no trivial

o Permitir una vuelta atrás fácil en la ejecución de la mayoría de las acciones

o Reducir la cantidad de información que debe ser memorizada entre acciones

o Buscar la eficiencia en el diálogo, el movimiento y el pensamiento

o Perdonar los errores

o Categorizar las actividades en base a su función y organizar la geografía de la pantalla convenientemente

o Proporcionar facilidades de ayuda sensibles al contexto

o Utilizar verbos de acción simples o frases verbales cortas para nombrar las ordenes

Visualización de la información

o Mostrar sólo aquella información que sea relevante en el contexto actual

o No abrumar al usuario con datos - utilizar un formato de presentación que permita una asimilación rápida de la información

o Utilizar etiquetas consistentes, abreviaciones estándar y colores predecibles

o Permitir al usuario mantener el contexto visual

o Producir mensajes de error significativos

o Utilizar mayúsculas y minúsculas, tabulaciones y agrupaciones de texto para ayudar a la comprensión

o Utilizar ventanas (sí están disponibles) para modularizar los diferentes tipos de información

o Utilizar representaciones analógicas para mostrar la información que es más fácil de asimilar bajo este tipo de representación

o Considerar la geografía disponible en la pantalla y utilizarla eficientemente

Entrada de datos

o Minimizar el número de acciones de entrada de datos que debe realizar el usuario

o Mantener la consistencia entre la información visualizada y los datos de entrada

o Permitir al usuario personalizar la entrada de datos

o La interacción también debe ser flexible y estar ajustada al modelo de entrada preferido por el usuario

o Desactivar ordenes que sean inapropiadas en el contexto actual

o Permitir al usuario controlar el flujo interactivo

o Proporcionar ayuda en todas las acciones de entrada de datos

o Eliminar las entradas innecesarias

Evaluación de interfaces

Algunos de los aspectos que podemos evaluar en una interfaz visual sono Proporcionalidad: Height / Width de la caja de diálogo, el rango deseable

es =.5 - 0.8. Las cajas de diálogo que realizan funciones similares deben tener la misma proporcionalidad

o Número total de Widgets: Considerar el número tomando en una primera instancia como uno a los contenedores, y posteriormente considerar el número total.

o Area no utilizada: Area Total / Area Widgets , el rango recomendable es al menos de 0.20 guardando similaridades entre diálogos con funcionalidad similar

o Densidad de Widgets: (NTW / AT) * 100000 NTW: Número total de Widgets, AT: Area Total

o Márgenes: Superior, Inferior, Izquierdo, Derecho, deben ser iguales en todas las caja de diálogo

o Alineación: En X y Y, el número de arreglos de Widgets que comparten la misma X (o Y), un número alto indica una no alineación

Aspectos a evaluar

o Balance de áreas: es una medida de distribución de los Widgets. Horizontal: NTWI / NTWD, Vertical: NTWS / NTWB. NTW indica el número total de Widgets, I, D, S y B indican izquierda, derecha, superior e inferior

o Diferentes tipografías: asignar a cada tipo diferente un número aleatorio, y listar para cada caja de diálogo los números de tipografías que se utilizan

o Diferentes colores de fondo: Asociar números aleatorios a cada color e incluir una lista para cada caja de diálogo

o Diferentes colores de foreground, se maneja de la misma forma que el fondo

o Análisis de concordancia de botones: Se listan las etiquetas de los botones y la acción que realizan y después se comparan

o Análisis de concordancia de la interfaz: se revisan los mensajes y su tipografía

o Estructuras de botones: Deben aparecer en la misma disposición , posición y respetando márgenes y separación

Recomendaciones de diseño

Recomendaciones para el desarrollo de GUIs o La proporcionalidad debe ser consistente, especialmente para cajas de

diálogos que tienen un diseño visual y una funcionalidad similar

o El área libre en una caja de diálogo debe ser de al menos el 20% del área total

o Los márgenes deben ser consistentes

o Los Widgets dentro de una caja de diálogo deben estar alineados horizontal y verticalmente

o Deben evitarse diseños muy densos

o Buscar la consistencia en colores (foreground y background) y tipografías

o La localización y tamaño de Widgets frecuentemente usados debe ser consistente

o Ser consistentes en terminología

o Buscar la consistencia en las etiquetas de botones: esto es, sinónimos como "Abort", "Cancel", "Close" y "Exit" no deben ser usadas para tareas similares