El documento describe los estándares para el diseño de interfaces gráficas de usuario. Explica que una interfaz gráfica incluye elementos como ventanas, menús y botones que permiten la interacción del usuario. También describe características clave como facilidad de uso, representación consistente y elementos fácilmente identificables. Finalmente, detalla varios estándares y directrices importantes para el diseño de interfaces como ISO 9241 e ISO 13407.

1. {
Estándares para el
Diseño de interfaces
José Luis Dorado B.
Darío Fernández.

2. INTERFAZ GRÁFICA

3. 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.

4. 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

5. Características básicas de una
buena interfaz :
Evitar errores en la
configuració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.

6. ESTANDAR.

7. Son guías para utilizar herramientas que brinden a los sitios la posibilidad
de ser fácilmente mantenidos, extendidos, rediseñados, usados
y 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:

8.  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:

9.  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

10.  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

11.  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

12.  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

13. 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.

14.  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

15.  Consistencia, disposición de la pantalla,
relaciones y navegabilidad son importantes
conceptos de organización.
Organizar.

16.  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).

17.  Conectar los items relacionados y disociar los
items independientes mejora sensiblemente la
organización visual.
Relaciones.

18.  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.

19.  Consiste en simplicidad, claridad, singularidad
y énfasis
Economizar.

20.  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.

21.  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..

22.  Las propiedades de los elementos necesarios
deben ser características singulares.
Singularidad..

23.  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.

24.  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.

25.  La pantalla debe ser fácil de identificar e
interpretar, además de atractiva y agradable.
Legibilidad.

26.  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.

27. 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.

28.  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.

29.  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:

30. 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.

31.  organización del color.
 economía del color
 comunicación del color.
Los tres principios
básicos de diseño

32.  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

33.  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.

34.  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.