PRINCIPIOS DEL DISEÑO DE INTERFACES

Principios de Diseño de Interfaces.

Hoy en día los estilos de interfaces predominantes que existen son:

·         Por línea de comandos

·         Menús y formularios

·         Manipulación directa o también conocida como (GUI)

Los objetivos de una buena interfaz son muy importantes y son los siguientes:

·         Maximizar la velocidad de aprendizaje del usuario

·         Minimizar la taza de errores

·         Maximizar la velocidad de uso

·         Apariencia dirigida especialmente al usuario que la va a usar

Para mejorar la interacción hombre – máquina y lograr buenas interfaces se necesita aliviar la carga cognitiva (proporcionar pistas visuales, proporcionar opciones por defecto, proporcionar atajos, emplear metáforas del mundo real y promover la claridad visual)

Otro aspecto que cabe mencionar para la mejora de la interacción son las reglas de diseño las cuales guían al diseñador con el fin de incrementar la usabilidad. Estas mismas se clasifican en:

v  Estándares: son requisitos, reglas o recomendaciones basadas en principios probados y en práctica.

v  Directrices: estas recomiendan acciones que se basan en un conjunto de principios de diseño, son más específicas que los principios y requieren menos experiencia para entenderlas e interpretarlas.

Las guías de estilo también son otro punto importante, estas se centran en presentaciones comunes, comportamientos y técnicas que son implementadas por una compañía en sus mismos productos.

Ahora hablaremos un poco de algunos principios en el diseño de interfaces:

ü  En una interfaz debe haber consistencia ya que permite a los usuarios transferir conocimientos y destrezas de una aplicación a otra, “aprender cómo hacer las cosas”. Ejemplo: Los comandos de ayuda, siempre deben disponibles.

ü  También se debe mantener informado al usuario, en este principio entra la retroalimentación como la respuesta a un comando de usuario: movimiento del cursor, selección del menú, etc. El estado actual: brocha seleccionada, color, dirección de carpeta, scroll bars. Y el procesamiento por parte de la maquina: instantáneos, cursores de espera, diálogos explicativos, barras de progreso.

ü  Debe haber un control por parte del usuario, esto quiere decir que el usuario inicia y controla las actividades de la aplicación usada y no la PC.

ü  La interacción debe ser simple y natural (minimizar elementos de interfaz, orden natural de la información, utilizar el lenguaje del usuario)

ü  La tolerancia, la cual le provee al usuario la capacidad de recuperarse de los errores (Deshacer, Abordar, Cancelar)

ü  Se debe satisfacer múltiples niveles de habilidad como:

      Usuarios casuales (incorporar tutoriales, ayudas, esconder comandos complejos, uso de valores por defecto)

      Usuarios expertos (atajos de teclado, interfaz extensible y personalizable, líneas de comando, modo experto)

ü  También se debe minimizar la memorización, esto ayuda al usuario a promover el reconocimiento, basarse en la visibilidad de los objetos, uso de menús, iconos, diálogos, mensajes, palabras.

ü  La integridad estética es otro principio, en esta el número de elementos y su respectivo comportamiento debe ser limitado para aumentar la usabilidad de la interfaz (información organizada de forma adecuada)

En el aspecto de la integridad estética se debe asegurar de mantener la semántica del lenguaje grafico o del lenguaje asociado a la interfaz.

También está el hecho de no cambia el significado de los objetos que son los estándares.

Algunos objetos de las interfaces graficas son:

-          Ventanas

-          Menús

-          Iconos

-          Botones

-          Campos

Y muchos más.

Entre algunos mensajes que las interfaces pueden mostrar se encuentran:

-          Mensaje de información; Muestra información acerca de la aplicación

-          Menaje de advertencia; Mensaje de que lo que el usuario esta haciendo puede salir mal

-          Mensaje de pregunta; Mensaje que cuestiona al usuario acerca de lo que está a punto de hacer

-          Mensaje de error; Mensaje de que lo que el usuario hizo estuvo mal

Dentro de las palabras claves que las aplicaciones pueden usar en los campos mencionados anteriormente están; OK, cancel, close ,exit ,help, save, save as, undo, cut, copy, paste.

Los mecanismos mas comúnmente usados en la interfaz son;

-          Menú bar

-          Pull-Down menú

-          Cascading menú

-          Popo-up menú

-          Push button

-          Check box

-          Radio button

-          List box

-          Drop-down list box

-          Combination list box

-          Spin button

-          Slider

Los iconos utilizados dentro de las interfaces deben ser consistentes con la imagen que representan es decir, si un logo de un reloj está incluido dentro de la interfaz, cualquier usuario supondría que es para editar la fecha y la hora, por otro lado si se muestra un icono de una carta abierta, debería ser consistente en función con algo relacionado al correo electrónico.

Los objeticos de lo anteriormente mencionado son:

u  Conocer principios y directrices de diseño

u  Ver la importancia de usar guías de estilo y estándares

u  Conocer algunos principios del diseño gráfico de la interfaz

Una interfaz bien diseñada debe facilitar el trabajo de los usuarios

Para ello es preciso entender el modelo mental del usuario

Los diseñadores no son expertos en estos temas y necesitan unos principios generales de diseño consensuados por los expertos

Principios

Los principios de las interfaces están basados en ideas de alto nivel y de aplicación muy general. Por ejemplo:

• Asistencia: asistir al usuario en la realización de las diferentes tareas

He aquí los principios de las interfaces según IBM

-       Apoyo: consiste en brindarle ayuda al usuario para hacerle más fácil la realización de tareas.

-       Familiaridad: necesitan desarrollar el producto basándose en lo que conoce el usuario para hacer más fácil su interacción.

-       Evidencia: se deben hacer los objetos más intuitivos y visibles, emplear representaciones en el mundo real.

-       Estimulo: Hacer acciones previsibles, para que el usuario tenga los resultados que el espera.

-       Satisfacción: Lograr alegría y una sensación de logros para los usuarios.

-       Disponibilidad: Hacer que todas las herramientas u objetos estén siempre listas para que el usuario las pueda usar cuando el desee.

-       Seguridad: Procurar ayudar a los usuarios a manejar los errores proporcionándoles ayuda automática.

-       Versatilidad: el usuario puede seleccionar el modo de interacción que el conozca o con el que se sienta mejor para trabajar.

-       Personalización: permitirle a los usuarios a adaptar su interfaz de trabajo dependiendo de sus gustos o necesidades.

-       Afinidad: Realizar buenos diseños visuales en los objetos que sean afines a la realidad.

Directrices

Acciones que se basan en un en los principios de diseño. No se necesita experiencia para comprenderlas y son específicas.

Estándar

Regla, requisito o recomendación basada en principios probados y en la práctica. Son un acuerdo entre profesionales que pueden ser a nivel local, nacional e internacional. Tiene por objetivo hacer las cosas más fáciles, definiendo los objetos o sistemas que las personas ocupan diariamente.

Estándares de la interfaz

Nos ayuda a conseguir un software fácil y seguro tomando en cuenta unas reglas de fabricación, retirando todas las inconsistencias y algunas variaciones dentro de las interfaces.

Estándares de Iure

Se generan mediante comités con status legal, y para obtenerlos se sigue un proceso complejo como un documento preliminar público, enmiendas, aprobación.

Los comités con status legal son:

• ISO     Asociación Internacional para Estándares
• IEC     Comisión Electrotécnica Internacional
• ANSI  Instituto Nacional Americano para Estándares
• IEEE Instituto de Ingenieros Eléctricos y Electrónicos         Americano
• CEN   Comité Europeo para la Estandarización
• W3C  Consorcio para la World Wide Web

Estándares de facto

Este tipo de estándares se crea a partir de los productos que tiene un uso generalizado o que son muy exitosos dentro del mercado. Su definición se encuentra en los manuales.

Estándares de Iure más importantes de una interfaz grafica

• 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

Guías de estilo

Es importante mantener una consistencia en los sistemas por eso es recomendable que se basen los diseño en conjuntos de principios y directrices, las organizaciones deben entregar a los desarrolladores una guía. En la industria las guías de estilo son nombradas look and feel.

La ventaja de usar las guías de estilo es asegurar una usabilidad con la consistencia que imponen.

Guías de estilo Comercial

Contienen directrices a muy bajo nivel, y se basan en estándares de facto ya que son creadas por empresas desarrolladoras de hardware y software como Windows, Apple, Open Look, CDE, etc.

Ejemplos

APPLE

    

OPEN LOOK

CDE

WINDOWS

   

Guías de estilo

Estas guías o estándares son una base para la realización de un diseño de interfaces aunque no garantiza que la misma sea usable.

Para que esto sea más favorable y ahorre tiempo en todo el diseño; se deben dar facilidades a los mismos diseñadores y programadores para que no le cueste tanto tiempo y más que nada dinero a la empresa (trabajo en equipo).

Java Swing

Estas guías nos ayudan a poder definir algunos parámetros o estándares que debemos tener en cuenta en la realización de interfaces

Para diseño Web

Un gran problema de la web es que no tiene las interfaces de usuario mas comunes; para eso, algunas empresas tienen predefinidas algunas guias para la elaboración de sitios web, como: Apple IBM, Sun, W3C, etc.

Corporativas

Este tipo de guías ayudan a la empresa a dar un estilo corporativo personalizado a todos sus productos, con una imagen coherente de la organización

Dentro de las guías de estilo corporativas existen subniveles de estas mismas mostradas en la siguiente imagen.

Diseño Grafico

El objetivo de esta materia es la creación de una interfaz transparente; es decir que no obstruya el acceso al usuario, y que este mismo tenga una buena experiencia de interacción con el sistema., para conseguir esto se considera cada aspecto con un sentido del conjunto (Funcional y visual).

Por ejemplo: los iconos o imágenes que se ejecutan como botón deben coincidir con la funcionalidad del mismo, para que la interfaz resulte intuitiva. Se utilizan representaciones de elementos básicos que constituyen un alfabeto grafico para el usuario; esto nos ayuda a no darle demasiada carga al usuario: El punto, línea, formas, tamaño, formato, tiempo, tamaño, luz, color y composición.

·         El punto: Es las formas usadas ya que solo o en conjunto puede dar a entender diferentes funciones.

·         La línea: Se usa para la organización del espacio.

·         Formas: Define y organiza el espacio.

·         La luz: Contribuye a la composición del espacio.

·         El tiempo: Se simula el paso del tiempo con ayuda de imágenes

Uso del color

Tal vez sea lo más importante en el diseño de interfaces ya que este impacta en la presentación de la información, ayuda a la memoria y facilita la formación de modelos mentales efectivos. Hay una serie de estándares y guías que nos ayudan a poder diseñar una buena interfaz con los colores apropiados; por ejemplo las líneas de texto pequeñas en color azul se notan borrosas al ojo humano.

Una mala aplicación de los colores puede causar vibraciones y sombras, distrae al usuario y forzar su vista lo que tiene como consecuencia que el usuario tenga una mala experiencia con la interfaz

El buen uso del color ayuda tanto a la interface con el usuario como a la empresa y la recomendación de la empresa.

Simplicidad

Esto tiene 3 puntos importantes que son
  -vincular significados a los colores primarios para que sean fáciles de memorizar
  -No combinar más de 5 y menos de 2 colores
  -Diferenciar conceptos o símbolos con diferentes colores

Consistencia

Usar efectivamente el color y no combinar o revolver colores en diferentes interfaces que estén asociadas ejemplo

                        -El rojo se enfoca en el frente
                        -El verde y el amarillo se enfocan en medio
                        -El azul se enfoca en el fondo

Claridad

Recordar que usar colores estandarizados sirve para la búsqueda de información  y reducen el tiempo de este proceso, recordar que el color mejora la estética y también ña efectividad del proceso de memoria

Claridad

En mensajes de aviso recordar usar colores que ayuden al usuario a diferenciar una situación por ejemplo: en un aviso

                        -Rojo = alerta al usuario de error
                        -Amarillo = mensaje de advertencia
                        -Verde = progreso positivo

Lenguaje de color

Se debe conocer el entorno (uso común y cultura) del usuario para usar estándares tanto en imágenes como su relación con colores de diferentes objetos

Muchas veces es se complica usar colores de manera efectiva como usar una combinación que forcé a la vista o que cree ilusiones, usar colores muy matizados y colores puros o utilizar un color difícil de enfocar para el texto causa fatiga en la vista

Se requiere el conocimiento de técnicas como la combinación de colores para producir un buen efecto

Algunos consejos son:
            -Utilizar el color azul para el fondo
            -Utilizar la secuencia de color espectral
            -Usar pocos colores
            -Evitar usar colores que se mezclen con el fondo
            -Utilizar colores brillantes en avisos
            -Primero diseñar la interfaz en blanco y negro

Reglas de Murch

-Evitar el mostrar color simultáneos que estén saturados
-No usar Azul puro para texto y líneas delgadas o figuras pequeñas
-Evitar mostrar colores que se diferencien solo por la cantidad de cierto color
-Usuarios de edad avanzada necesitan niveles más altos de brillo
-Los colores cambian conforme el nivel de luz ambiental lo hace
-Es difícil enfocar orillas creadas del mismo color
-Evitar el uso de Verde y Rojo para interfaces de largo uso
-Los colores opuestos se ven bien
-para personas con deficiencias de color, evitar hacer distinciones de un solo color

Técnicas de diseño grafico

Disposición: el orden de las cosas que parece en la pantalla es fundamental pues resalta o disminuye la importancia de las cosas

Énfasis: para enfatizar se usa la posición, el color y los atributos de texto, recordar que si todos los elementos tienen el mismo énfasis creara confusión y aburrimiento en el usuario

Foco: el punto focal es el centro de atención sirve para dirigir o encontrar información relevante o importante

Alineación: Nos ayuda a conseguir un equilibrio o modularidad con los elementos a fin de mejorar la estética de la interfaz

Iconos

Son sumamente importantes porque, las personas reaccionan instintivamente con imágenes y ayudan a reducir el espacio cuando se quiere explicar cierta acción, se utilizan para representar objetos y funciones

Diseñar con significado

Factores que afectan el significado de un icono:
            Contexto: Entorno donde se utiliza
            Función: El tipo de tarea en el que se usa
            Forma representativa: hay 3 tipos
                                                -Objeto concreto
                                                    -Objeto abstracto
                                                    -La combinación de los dos

Tipos de iconos según su forma Representativa
            -Iconos Similares: presentan el concepto a través de una imagen análoga
            -Iconos ejemplares: sirven como ejemplos
            -Iconos simbólicos: dan referencia a un mayor nivel de abstracción
            -Iconos arbitrarios: No tienen relación en la vida real pero si por asociación

Como diseñar iconos

Después de elegir un objeto como representación hay que pensar como dibujarlo, más detallado, incluir solamente detalles imprescindibles

Lenguaje icónico

Se trata de definir iconos coordinados que representan diferentes acciones pero sobre un mismo objeto

Ventajas:
-Reduce el esfuerzo en el diseño
-Asegura consistencia
-Da un estilo
-Hace que los iconos se entiendan por si mismos

Conclusiones

Los estándares y guías de estilo ayudan y facilitan en el diseño de la interfaz, además se deben conocer guías de entorno sobre la interfaz, para lograr un buen diseño se mezcla funcionalidad con estética y recordar que el diseño gráfico de la interfaz afecta en la usabilidad del sistema.