estándares para el diseño de interfaz
DESCRIPTION
UsabilidadTRANSCRIPT
![Page 1: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/1.jpg)
{
Estándares para elDiseño de interfaces
José Luis Dorado B.Darío Fernández.
![Page 2: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/2.jpg)
INTERFAZ GRÁFICA
![Page 3: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/3.jpg)
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.
![Page 4: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/4.jpg)
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
![Page 5: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/5.jpg)
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.
![Page 6: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/6.jpg)
ESTANDAR.
![Page 7: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/7.jpg)
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:
![Page 8: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/8.jpg)
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:
![Page 9: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/9.jpg)
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
![Page 10: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/10.jpg)
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
![Page 11: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/11.jpg)
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
![Page 12: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/12.jpg)
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
![Page 13: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/13.jpg)
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.
![Page 14: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/14.jpg)
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
![Page 15: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/15.jpg)
Consistencia, disposición de la pantalla, relaciones y navegabilidad son importantes conceptos de organización.
Organizar.
![Page 16: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/16.jpg)
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).
![Page 17: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/17.jpg)
Conectar los items relacionados y disociar los items independientes mejora sensiblemente la organización visual.
Relaciones.
![Page 18: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/18.jpg)
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.
![Page 19: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/19.jpg)
Consiste en simplicidad, claridad, singularidad y énfasis
Economizar.
![Page 20: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/20.jpg)
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.
![Page 21: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/21.jpg)
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..
![Page 22: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/22.jpg)
Las propiedades de los elementos necesarios deben ser características singulares.
Singularidad..
![Page 23: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/23.jpg)
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.
![Page 24: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/24.jpg)
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.
![Page 25: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/25.jpg)
La pantalla debe ser fácil de identificar e interpretar, además de atractiva y agradable.
Legibilidad.
![Page 26: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/26.jpg)
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.
![Page 27: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/27.jpg)
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.
![Page 28: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/28.jpg)
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.
![Page 29: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/29.jpg)
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:
![Page 30: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/30.jpg)
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.
![Page 31: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/31.jpg)
organización del color. economía del color comunicación del color.
Los tres principios básicos de diseño
![Page 32: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/32.jpg)
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
![Page 33: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/33.jpg)
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.
![Page 34: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/34.jpg)
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.
![Page 35: Estándares Para El Diseño de Interfaz](https://reader036.vdocumento.com/reader036/viewer/2022062421/563db835550346aa9a918f24/html5/thumbnails/35.jpg)
GRACIAS…!