PRINCIPIOS DE DISEÑO DE INTERFACES (Resumen)

PRINCIPIOS DE DISEÑO DE INTERFACES

Estilos de Interfaces Predominantes

·         Línea de comandos

·         Menús y Formularios

·         Manipulación directa GUI (Grafic User Interface)

Objetivos

·         Maximizar la velocidad de aprendizaje y Uso

·         Minimizar la tasa de errores

·         Estética adecuada

Consistencia

La consistencia en las interfaces graficas ayuda a los usuarios a aprender y reconocer fácilmente el lenguaje grafico de esa interfaz.

La consistencia en el comportamiento de una interfaz significa que los usuarios aprenden como hacer las cosas, apuntar y seleccionar una sola vez “Ítems en los menús siempre alineados a un mismo lado, consistencia con el sistema operativo, comandos de ayuda simples y a la vista”

Mantener Informado al usuario

Manejando los aspectos: ¿Qué está haciendo el sistema? ¿Cómo se interpretan los comandos?
El usuario debe saber que está sucediendo en cada momento.

Retroalimentación: Respuesta a un comando del usuario, como el movimiento del cursor o El estado actual (posición, color etc.) O Barras de progreso

Control del usuario

Interacción simple y natural.

Control del usuario: inicia y controla las actividades.

- menor cantidad de elementos de la interfaz

- menos para aprender, equivocarse, distraerse.

-Orden natural de la información: eliminación de información irrelevante, agrupar en gráficos la información relacionada.

-orden de acceso a la información de ser como el usuario la esperaría.

Usar el lenguaje del usuario: terminología e iconos que sean familiares al usuario, mensajes de error que pueda entender el usuario.

 Tolerancia.

-El usuario pueda recuperarse de los errores.

-eliminar comandos que lleven al mensaje “comando ilegal”

-Controles para evitar la introducción de datos erróneos                           

Proveer recuperación de errores.

Satisfacer  múltiples niveles de habilidad

Usuarios expertos con el uso de atajos de teclado, líneas de comando, modo experto; para los usuarios casuales incorporar tutoriales, esconder los comandos complejos.

Minimizar la memorización: reconocimiento, visibilidad de los objetos, uso de menús,  iconos,

 Diálogos, mensajes, palabras                                                                                

Integridad estética

Información organizada de acuerdo a los principios del diseño visual.

Número de elementos y su comportamiento limitado para aumentar su usabilidad.

Mantener el significado de los objetos estándares.

Mantener la semántica del lenguaje asociado a la interfaz.

               

Guías de estilo y diseño gráfico  

-Uso de modelo mental

-Los principios abstractos se concentran en formas de guías de estilo                         

Pueden ser obtenidas de dos maneras:

-Artículos de revistas académicas, profesionales o comerciales.

-Manuales y guías de estilo de empresas de software

Principio

Es una sentencia en un sentido muy amplio que normalmente está basada en la investigación hecha de cómo las personas aprenden y trabajan

1.       Están basados en ideas de alto nivel y de aplicación muy general.

2.       Definir los usuarios

3.       Definir los usuarios

4.       Reducir la carga de memoria de los usuarios

Colocar a los usuarios en el control de la interfaz

1.       Permitir el uso del teclado y el ratón

2.       Permitir el uso del teclado y el ratón

3.       Permitir personalizar la interfaz

4.       Permitir manipular los objetos de la interfaz

Características de una interfaz consistente

Simplicidad: No sacrificar la usabilidad por la funcionalidad del sistema

Apoyo: No sacrificar la usabilidad por la funcionalidad del sistema

Familiaridad: Construir el producto según el conocimiento previo del usuario

Evidencia: Hacer los objetos y sus controles visibles e intuitivos.

Estimulo: Hacer las acciones previsibles y reversibles.

Satisfacción: Crear una sensación de progreso y logro en el usuario

Disponibilidad: Usar objetos en cualquier secuencia y en cualquier momento

Seguridad: Evitarle errores al usuario proporcionándole diferentes tipos de ayuda

Versatilidad: Soportar diversas técnicas de interacción

Directrices

Recomiendan acciones basándose en un conjunto de principios de diseño. Son más específicas y requieren menos experiencia para entenderlas e interpretarlas que los principios

Ejemplo: relacionado con el principio de asistencia:

§  Proporcionar ayuda contextual para cada opción y objeto sobre el que pueda posicionarse el cursor

Estándares

Representa un acuerdo de un grupo de profesionales oficialmente autorizados a nivel local, nacional o internacional.

Objetivo: hacer las cosas más fáciles, definiendo características de objetos y sistemas que se utilizan cotidianamente

Ejemplos: teclado de teléfono, teclado QWERTY

ESTÁNDARES DE LA INTERFAZ

Objetivo: conseguir un software más fácil y seguro, estableciendo unos requisitos mínimos de fabricación, eliminando inconsistencias y variaciones innecesarias en las interfaces

Tipos de estándares

• Estándares de iure: Son generados por comités con estatus legal. En Informática tienen estatus legal para definir estándares de iure(ISO,IEC, ANSI ,IEEE, CEN, W3C)
• Estándares de facto: Nacen a partir de productos con éxito en el mercado o desarrollos hechos por grupos de investigación que alcanzan gran difusión(Windows ,Mac, lenguaje C)

Guía de Estilo

Se usan Para asegurar la consistencia de un sistema es fundamental basar su diseño en un conjunto de principios y directrices

Tipos:

• Guías de estilo comerciales
• Guías de estilo corporativas

Ventaja: aseguran una mejor usabilidad mediante la consistencia que imponen

CDE

Common Desktop Enviroment

Interfaz grafica para UNIX

Desarrollado por IBM, HP, Novell y SUN

Aprobado por X/Open UNIX

Microsoft

Java Swing

Guías de estilo para la WEB

Diseñar para la web es diferente a diseñar interfaces tradicionales, algunos principios son aplicables pero la WEB tiene sus particularidades, una característica importante es la falta de interfaces de usuarios comunes.

Para afrontar este problema varias empresas y organismos publican sus guias de estilo en la Web

Apple

IBM

Sun

W3C

Yale Center for Advanced Instruccional Media

W3C

EL W3C alberga la iniciativa de accesibilidad web (WAI), las guías juegan un papel importante para crear sitios web accesibles.

WAI ofrece tres guias

·         Web Content Accessibility Guidelines (WCAG)

·         Authoring Tool Accessibility Guidelines (ATAG)

·         User Agent Accessibility Guidelines (UAAG)

Consideraciones

Los estándares y guías proporcionan una base para realizar el diseño, el uso de guías no garantiza que la interfaz sea usable pero es mejor seguir las guías a no hacerlo

Hay que dar facilidades a los diseñadores y programadores:

-          Proporcionar ejemplos en la documentación

-          Incorporar las guías a las herramientas

-          Dar información y entretenimiento

¿Cómo conseguirlo?

-          Considerar cada aspecto con un sentido del conjunto

-          Conjuntar el diseño visual y funcional

-Los controles deben tener un aspecto acorde a su función y funcionar de acuerdo a su aspecto

- Cuando el diseño visual clarifica sus funciones, la interfaz resulta intuitiva

´  Para representar algo utilizamos unos elementos que constituyen un alfabeto gráfico:

´  El punto

´  La línea

´  La forma

´  La luz

´  El color

´  El tiempo

´  El tamaño

´  El formato

´  La composición

El Punto

u  Elemento más simple

u  Posee gran fuerza atractiva como marca

u  Su situación puede establecer los ejes básicos de la estructura

u  Varios puntos juntos se perciben agrupados creando formas

u  Una secuencia de puntos crea una dirección de movimiento

u  Ayuda a dirigir la visión del observador

La línea

u  Organizan el espacio

u  Determinan ejes que delimitan zonas de atracción

u  Pueden crear texturas, profundidad y movimiento

u  Su dirección y grosor les da una expresividad

La forma

u  Define una superficie con unas dimensiones dadas

u  Formas básicas

u  Cuadrado, triángulo y círculo

u  Función: definir y organizar el espacio

u  Pueden simular tridimensionalidad cuando se representan en perspectiva

 

Elementos de la imagen

La forma

Formas básicas

•        Cuadrado, triángulo y círculo

Función: definir y organizar el espacio

Pueden simular tridimensionalidad cuando se representan en perspectiva.

La luz

Contribuye a la composición de la escena

•         Puede sugerir profundidad y tridimensionalidad

•        Puede modelar formas, superficies y volúmenes

•         Una característica importante es la tonalidad, que incide en la

captación de las formas:

•        Un tono claro parece más claro cerca de un tono oscuro y vic.

•        Un tono claro se expande rodeado de uno oscuro

•        Un tono oscuro se comprime rodeado de uno claro

El color

Contribuye a la recreación del espacio

•         Ayuda a simular la profundidad (sombreado)

•        Sugiere distancia (difuminación progresiva del tono)

Dinamiza la composición por la interacción de colores

•        Los colores claros son excéntricos y los oscuros concéntricos

•         Los colores saturados producen un fuerte impacto y se relacionan con sensaciones dinámicas y alegres. Los colores no saturados transmiten sensaciones débiles y más sutiles

Transmite “sentimientos”

•         Hay colores cálidos y fríos, ligeros y pesados, tristes y alegres

Formas de relación dinámica entre los colores:

•        Armonía: crea una composición con variaciones cromáticas suaves y graduales relacionando colores afines

•         Contraste: yuxtapone colores diferentes entre sí, fundamentalmente colores complementarios:

1.       Rojo-verde, amarillo-violeta, azul-naranja

2.       La composición llama fuertemente la atención

3.       Si es muy acentuado puede reducir la legibilidad al producirse vibración

El tiempo

Se puede simular el paso del tiempo en imágenes fijas organizando adecuadamente el espacio:

•        Usando diferentes intensidades lumínicas, contrastes cromáticos, de textura, de escala...

•        Jerarquizando los elementos representados, ordenándolos según una cierta secuencia

El tamaño

•        El tamaño establece un peso visual y una jerarquización por el espacio ocupado por el elemento

•        Ayuda a crear sensación de profundidad mediante la perspectiva

El formato

•        Es la proporción del cuadro donde se muestra la imagen

•        Debe favorecer la adaptación al campo visual humano, buscando una armonía entre las dimensiones

•         Influye decisivamente en la composición general y le da un significado

1.       Los formatos horizontales son más estáticos

2.       Los formatos verticales y circulares son más dinámicos

La composición

•      Es la forma de organizar los elementos morfológicos de la imagen en el espacio que ofrece el formato

•      Principios: unidad y claridad

1.       Se puede crear diversidad y contraste para añadir dinamismo, aunque complica la composición

•        Algunas reglas de composición:

1.       La zona inferior es más estática y sólida y la superior más dinámica y llamativa

2.       La zona izquierda es más estable y permite colocar pesos mayores sin desequilibrar

3.       A mayor tamaño, mayor peso compositivo

Uso del color

•        El color tiene un gran impacto en la presentación de información

1.       Si se usa adecuadamente mejora la presentación

2.       Su uso inapropiado puede reducir su funcionalidad

•         El uso de colores apropiados ayuda a la memoria y facilita la formación de modelos mentales efectivos

•        Partes de la interfaz relacionadas con el color:

1.       Persona: sistema humano visual

2.       Computadora: presentación de información

Fundamentos del color

 El uso inefectivo de los colores puede causar vibraciones y sombras, distraer al usuario y forzar la vista

Uso efectivo del color

Simplicidad

•        Vincular significados prácticos e intuitivos a los colores primarios (rojo, verde, amarillo y azul), que son fáciles de aprender y recordar

•        Mantener el esquema del color simple, utilizando pocos colores

•        No sobrecargar el significado del color vinculando más de un concepto a un sólo color. Conceptos diferentes = colores diferentes

Consistencia

Mantener el orden perceptual de los colores:

•        El rojo se enfoca en el frente

•        El verde y el amarillo se enfocan en medio

•         El azul se enfoca en el fondo

Evitar cambiar el significado de los colores en diferentes pantallas

 Utilizar colores diferentes para conceptos diferentes

Claridad

El tiempo de búsqueda de una información disminuye si su color es conocido de antemano y sólo se aplica a ella. Utilizar colores estandarizados.

El uso del color mejora la estética de la interfaz, pero también la efectividad del procesamiento de la información y el rendimiento de la memoria

La usabilidad mejora al:

•        Usar colores para agrupar informaciones relacionadas

•        Usar códigos de color en los mensajes:

1.       rojo = alertar al usuario de un error

2.       amarillo = mensaje de advertencia

3.        verde = progreso positivo

Uso efectivo del color “Lenguaje de color”

Las personas tenemos un lenguaje de color basado en el uso común y cultural

Combinar colores para producir efectos positivos requiere el conocimiento de ciertas técnicas, como las combinaciones de color

*Existen reglas y sugerencias fáciles de seguir (Marcus)

-Utiliza el color azul para el fondo

-Utiliza la secuencia de color espectral (rojo, anaranjado, amarillo, verde, azul, índigo y violeta)

-Mantén pequeño el número de colores

*Las reglas de Murch

Evita despliegue simultáneo de colores espectralmente extremos que estén altamente saturados

Descarta el color azul puro para texto, líneas delgadas y figuras pequeñas

Evita colores adyacentes que se diferencien sólo por la cantidad de azul que contienen

*Técnicas de diseño gráfico

Disposición, Énfasis, Foco, Alineación

Iconos

Se utilizan desde la primera interfaz gráfica (Xerox Star) y son útiles por dos motivos:

Las personas reaccionan instintivamente a las imágenes

*Diseñar con significado

Factores que determinan el significado de un icono:

Contexto, Función y Forma representativa. Puede ser de tres tipos:Objeto concreto y Objeto abstracto (Combinación de ambos)

*Tipos de iconos según forma representativa:

a) Iconos similares: presentan el concepto a través de una imagen análoga

b) Iconos ejemplares: sirven como ejemplos

c) Iconos simbólicos: se utilizan para dar una referencia a un mayor nivel de abstracción

d) Iconos arbitrarios: no guardan relación y la asociación ha de aprenderse

Conclusión.

Los temas tratados en éste resumen son de gran interés e importancia al momento de diseñar una buena interfaz, puesto que,  son reglas ya establecidas que han sido comprobadas y contribuyen a que un usuario tenga mejor desempeño al momento de utilizar una interfaz, se sienta más cómodo, aplique sus conocimientos y de esta manera comprenda y de un correcto uso de equis sistema. A través de muchos de los estándares que se mencionan, es como las personas actualmente podemos manipular una interfaz que se apegue a estándares, de manera muy simple e intuitiva.