estándares para el diseño de interfaz
TRANSCRIPT
{Estándares para elDiseño de interfaces
José Luis Dorado B.Darío Fernández.
INTERFAZ GRÁFICA
Interfaz Gráfica
Es el conjunto de elementos gráficos (ventanas, menús, botones, animaciones, opciones, imágenes etc.) que permiten la interacción
del usuario con la aplicación.
Las interfaces gráficas son los elementos que permiten comunicarnos con todos los elementos sin necesidad de aprender cómo navegar en él.
Una interfaz de usuario mal diseñada es un factor que frena su uso.
Interfaz Gráfica
Características básicas de una buena interfaz :
Evitar errores en laconfiguración de las acciones
Facilidad de comprensión, aprendizaje y uso
Representación fija y permanente de un determinado contexto de
acción (fondo)El objeto de interés ha de ser
de fácil identificación
Diseño ergonómico mediante el establecimiento de menús, barras
de acciones e iconos de fácil acceso
Las interacciones se deben basar en acciones físicas sobre elementos
visuales (iconos, botones, imágenes, barras de desplazamiento
Las acciones deben ser rápidas y reversibles,
con efectos inmediatos
Existencia de herramientas de Ayuda y Consulta
Es el conjunto de conocimientos
científicos aplicados para
que los productos y ambientes se adapten a las capacidades y limitaciones
físicas y mentales de la persona.
ESTANDAR.
Son guías para utilizar herramientas que brinden a los sitios la posibilidad de ser fácilmente mantenidos, extendidos, rediseñados,
usadosy comprendidos, debido a la estandarización.
Especificaciones que determinan la manera en que se construye y funciona a una tecnología en particular.
El uso correcto de las tecnologías, guías y normas disponibles, produce a los
desarrolladores resultados rentables y mayor productividad y competitividad.
Estándar es usar las herramientas correctamente:
ISO/IEC 9126: Evaluación de productos software: características de calidad y directrices para su uso
ISO 9241: requisitos ergonómicos para trabajar con terminales de presentación visual (VDT)
ISO/IEC 10741: interacción de diálogos ISO/IEC 11581: símbolos y funciones de los iconos ISO 11064: diseño ergonómico de centros de
control ISO 13406: requisitos ergonómicos para trabajar
con presentaciones visuales basadas en paneles planos
ISO 13407: procesos de diseño centrados en la persona para sistemas interactivos
Algunos de los más importantes son:
Existen tres factores que pueden considerarse para el diseño de una interfaz de usuario correcta: factores de desarrollo, factores de viabilidad y factores de aceptación.
Consideraciones de Diseño
Los factores de desarrollo ayudan a mejorar la comunicación visual. Esto incluye toolkits y librerías de componentes, soportes para un rápido prototipado, y adaptabilidad.
Consideraciones de Diseño
Los factores de viabilidad tienen en cuenta factores humanos y expresan una fuerte identidad visual. Esto incluye: habilidades humanas, la identidad del producto, un claro modelo conceptual, y múltiples representaciones.
Consideraciones de Diseño
Como factores de aceptación están la política de la corporación, los mercados internacionales, y la documentación y entrenamiento.
Consideraciones de Diseño
El Lenguaje Visible se refiere a todas las técnicas gráficas usadas para comunicar el mensaje o contexto. Esto incluye: Disposición o Layout: formatos, proporciones, y mallas
(grids). Organización: ya sea 2D y 3D. Tipografía: selección de tipos de letra y estilos,
incluyendo la anchura fija y variable. Color y Textura: color, textura y luminancia aportan
información compleja y realidad pictorial. Imágenes: signos, iconos y símbolos, desde lo
fotográficamente real a lo abstracto. Animación: un display dinámico o cinético: muy
importante en la utilización de imágenes relacionadas con el vídeo.
El Lenguaje Visible.
Organizar: proveer al usuario de una estructura conceptual clara y consistente.
Economizar: hacer lo máximo con la menor cantidad de elementos.
Comunicar: ajustar la presentación a las capacidades del usuario.
Principios fundamentales en el uso del lenguaje visible
Consistencia, disposición de la pantalla, relaciones y navegabilidad son importantes conceptos de organización.
Organizar.
Hay tres formas para diseñar una disposición espacial de la pantalla: usar una estructura de malla (grid), estandarizar la disposición de la pantalla, y usar los elementos relacionados con grupos.
Disposición de la pantalla (Layout).
Conectar los items relacionados y disociar los items independientes mejora sensiblemente la organización visual.
Relaciones.
Existen tres técnicas importantes de navegabilidad:
proveer un foco inicial para la atención del usuario.
dirigir la atención a los items importantes, secundarios o periféricos.
asistir la navegación a través del material.
Navegabilidad.
Consiste en simplicidad, claridad, singularidad y énfasis
Economizar.
La simplicidad incluye únicamente los elementos que son más importantes para la comunicación. Debería producir también la menor obstrucción posible.
Simplicidad.
Iconos ambiguos y claros. Todos los componentes deberían ser
diseñados para que su significado no sea ambiguo, que no lleve al equívoco.
Claridad..
Las propiedades de los elementos necesarios deben ser características singulares.
Singularidad..
Los elementos más importantes deben ser fácilmente percibidos.
Se debe restar énfasis a los elementos no críticos y minimizarlos para no ocultar información crítica.
Énfasis.
La interfaz gráfica de usuario debe mantener un balance entre legibilidad, tipografía, simbolismo, múltiples vistas, y color o textura, para comunicar adecuadamente.
Comunicar.
La pantalla debe ser fácil de identificar e interpretar, además de atractiva y agradable.
Legibilidad.
Incluye características de elementos individuales (tipos de letra y estilos) y sus agrupamientos (técnicas de estilo).
Recomendaciones: un máximo de 3 tipos de letra en un
máximo de 3 tamaños de puntos. un máximo de 40-60 caracteres por línea
de texto. ajustar el texto a la izquierda y los
números a la derecha. En listas, usar el centrado de texto.
Tipos de letra y estilos recomendados usar mayúsculas y minúsculas siempre que
sea posible.
Tipografía.
Proveer de múltiples perspectivas en la pantalla de estructuras y procesos complejos. Hacer uso de estas múltiples vistas: - múltiples formas de representación. - múltiples niveles de abstracción. - vistas alternativas simultaneas. - conexiones y referencias cruzadas. - metadatos, metatexto y metagráficos. Múltiples vistas verbales y visuales.
Múltiples vistas.
El color es uno de los más complejos elementos a la hora de intentar diseñar una interfaz gráfica correcta. Puede ser una potente herramienta de comunicación usado correctamente. Los colores pueden ser combinados para tomar un sentido visual.
Color.
enfatizar la información importante. identificar subsistemas de estructuras. portar objetos naturales de un modo
realista. reducir los errores de interpretación. añadir dimensiones a la codificación. incrementar la comprensibilidad. incrementar la credibilidad y atractivo.
Ventajas en el uso del color para facilitar la comunicación:
Cuando el color es usado correctamente la gente suele aprender más.También existen desventajas en el uso del color: requiere un equipamiento más complicado y
costoso. la mayoría no se acomoda a la visión de los
daltónicos. algunos colores pueden potencialmente causar
molestias visuales y postimágenes. puede contribuir a asociaciones erróneas a
causa de diferencias multidisciplinarias o multiculturales.
organización del color. economía del color comunicación del color.
Los tres principios básicos de diseño
El color debe emplearse para agrupar los items relacionados.
Debe aplicarse una organización de color consistente tanto a las pantallas, como a la documentación y a los materiales de entrenamiento.
Los colores similares infieren similitud en los objetos. Se debe mirar la consistencia al agrupar objetos con el mismo color.
Una vez se establece una codificación del color, esta debe ser usada en toda la interfaz gráfica así como en la documentación y publicaciones relacionadas
La organización del color
La economía del color, sugiere usar un máximo de 5 +/- 2 colores cuando el significado tiene que ser recordado.
Economía del color.
El énfasis del color sugiere usar fuertes contrastes en valor y tono para centrar la atención del usuario en la información más importante.
La comunicación en color pugna con la legibilidad, incluyendo usar un color apropiado para las áreas central y periférica del campo visual. Las combinaciones entre colores pueden producir influencias entre ellos y cambios en la elección de los mismos.
Es aconsejable que el color rojo y el verde no sean usados en la periferia del campo visual sino en el centro. Si son usados en la periferia, es necesario un medio para captar la atención del usuario, como un cambio de tamaño o el parpadeo.
Comunicación del color.
GRACIAS…!