Ergonomía de la interfaz
“El propósito de aplicar los conceptos ergonómicos al software es el de diseñar aplicaciones que se adapten a las diferentes tareas y aptitudes del ser humano ante un ordenador. Los conceptos ergonómicos referidos al software, focalizan sus estudios en los aspectos físico y mental de los interfaces entre el usuario y los programas. Intentan diseñar procedimientos de diálogo y formatos de presentación que sean efectivos y fáciles de usar. También buscan que las aplicaciones sean fáciles de entender y aprender, y que potencien los conocimientos de quienes los usan” (Marmolin, 1993).
Un producto software que quiera ser catalogado como ergonómico, deberá seguir los siguientes siete principios que rigen el diseño de los diálogos ergonómicos:
1) Adecuado para el trabajo al que se destina.
2) Autodescriptivo.
3) Controlable.
4) Conforme a las expectaciones que genera.
5) Tolerante con los errores que el usuario pueda cometer.
6) Personalizable por el usuario.
7) Documentado suficientemente para facilitar su aprendizaje.
ISO 9241
Dentro de ISO, la norma 9241, partes 8 a 17, cubre también aspectos relacionados con el software y obliga a los desarrolladores a tener en cuenta sus indicaciones.
A continuación te dejo la norma para consulta en ella se tocan aspectos de distribución, diseño, colores y demás a tomar en cuenta al momento de diseñar una interfaz.
(Prado León and Cárdenas Vázquez, 2005) indica que a pesar del éxito de la Web, como todo instrumento novedoso, con el tiempo se han acumulado una serie de problemas que dificultan su uso. La usabilidad es un atributo de calidad que evalúa que tan fácil de usar es una interfaz. La usabilidad, como calidad tiene cinco componentes:
1) Facilidad de aprendizaje.
2) Eficiencia.
3) Memoria.
4) Errores.
5) Satisfacción.
La aplicación de la ergonomía al diseño de las interfaces en páginas Web conduce a múltiples beneficios tales como: aumento en la productividad, disminución de errores, requerimientos menores de tiempos de aprendizaje, lo que se traduce en reducción
de costos de entrenamiento y soporte técnico (Khalid, 2001; Cushman, 1991).
La aplicación de la ergonomía al diseño de las interfaces en páginas Web conduce a múltiples beneficios tales como: aumento en la productividad, disminución de errores, requerimientos menores de tiempos de aprendizaje, lo que se traduce en reducción
de costos de entrenamiento y soporte técnico (Khalid, 2001; Cushman, 1991).
Diseño de la interfaz
Como bien se mencionó anteriormente, cuando se diseña una interfaz, se debe de tomar en cuenta que ésta será el espacio de trabajo del usuario y por tanto debe de ser agradable a la vista y no ocasionarle cansancio.
Considera que la distribución de la información debe de ser acorde a las necesidades y forma de trabajar de aquellos a quien está destinado el recurso, o bien, de una forma lógica. Toma en cuenta que leemos siguiendo un esquema: de arriba hacia abajo y de izquierda a derecha.
También podemos agrupar la información siguiendo una línea de lo inicial a lo final, si la información se presenta revuelta será difícil para el usuario hacer uso de ella y terminará abandonando el recurso a los pocos minutos.
Los colores al momento del diseño también son importantes, considera sus necesidades, su personalidad y al público al que va dirigido.
No es lo mismo diseñar una interfaz para niños que realizarán alguna actividad, que para un maestro de matemáticas o para un tesista desesperado por buscar información. Te recomiendo el estilo minimalista, en diseño, menos es más.
También te sugiero que uses colores neutros o en una gama de colores agradables a la vista, en ocasiones la paleta de colores fríos surte mejor efecto que la de los cálidos. Combínalos y obtén una coloración para tu recurso que llame la atención pero que permita trabajar adecuadamente.
Una pantalla demasiado cargada con colores saturados puede producir fatiga visual. Por lo anterior, deben usarse los colores saturados y que atraen la atención para aquellos elementos de la interfaz que interesa que sobresalgan, tales como ventanas activas o avisos.
Evitar el uso en exceso de colores muy saturados o extremos en longitud de onda, tales como rojo-azul. Este tipo de combinaciones puede inducir a fatiga visual y sensación de náusea (Cushman, 1991). Usar como máximo de 3 a 7 colores.
El color también debe utilizarse para lograr buenos efectos de contraste, de manera que
facilite la legibilidad y la diferenciación de fondo y figura. Evitar el uso de colores con bajo contraste, tales como azul-negro, amarillo-blanco. Es recomendable utilizar los colores complementarios u opuestos en el círculo cromático y evitar usar los contiguos (Moreno Muñoz, 2000).
¿Quieres saber mas con respecto a este tema? checa este link páginas 5-7.
Leyes Gestalt y los patrones de diseño
A continuación te dejo un documento que habla al respecto y que te puede orientar más en el diseño de tu recurso tecnológico.
Formas de los objetos
Preferentemente, usa figuras con las esquinas redondeadas o figuras redondas, ya que este estilo es mejor apreciado por los lectores que aquellos sitios que usan formas angulosas.
Considera que la distribución de la información debe de ser acorde a las necesidades y forma de trabajar de aquellos a quien está destinado el recurso, o bien, de una forma lógica. Toma en cuenta que leemos siguiendo un esquema: de arriba hacia abajo y de izquierda a derecha.
También podemos agrupar la información siguiendo una línea de lo inicial a lo final, si la información se presenta revuelta será difícil para el usuario hacer uso de ella y terminará abandonando el recurso a los pocos minutos.
Los colores al momento del diseño también son importantes, considera sus necesidades, su personalidad y al público al que va dirigido.
No es lo mismo diseñar una interfaz para niños que realizarán alguna actividad, que para un maestro de matemáticas o para un tesista desesperado por buscar información. Te recomiendo el estilo minimalista, en diseño, menos es más.
También te sugiero que uses colores neutros o en una gama de colores agradables a la vista, en ocasiones la paleta de colores fríos surte mejor efecto que la de los cálidos. Combínalos y obtén una coloración para tu recurso que llame la atención pero que permita trabajar adecuadamente.
Una pantalla demasiado cargada con colores saturados puede producir fatiga visual. Por lo anterior, deben usarse los colores saturados y que atraen la atención para aquellos elementos de la interfaz que interesa que sobresalgan, tales como ventanas activas o avisos.
Evitar el uso en exceso de colores muy saturados o extremos en longitud de onda, tales como rojo-azul. Este tipo de combinaciones puede inducir a fatiga visual y sensación de náusea (Cushman, 1991). Usar como máximo de 3 a 7 colores.
El color también debe utilizarse para lograr buenos efectos de contraste, de manera que
facilite la legibilidad y la diferenciación de fondo y figura. Evitar el uso de colores con bajo contraste, tales como azul-negro, amarillo-blanco. Es recomendable utilizar los colores complementarios u opuestos en el círculo cromático y evitar usar los contiguos (Moreno Muñoz, 2000).
¿Quieres saber mas con respecto a este tema? checa este link páginas 5-7.
Leyes Gestalt y los patrones de diseño
A continuación te dejo un documento que habla al respecto y que te puede orientar más en el diseño de tu recurso tecnológico.
Preferentemente, usa figuras con las esquinas redondeadas o figuras redondas, ya que este estilo es mejor apreciado por los lectores que aquellos sitios que usan formas angulosas.
Cuadrantes de diseño
Los cuadrantes de diseño son la forma en que se distribuye la información en la pantalla. Imagina que ésta se distribuye en ocho secciones (ver Fig. 1)
 |
| Fig. 1 Cuadrantes de diseño |
Los cuadrantes del 1-4 sirven para posicionar información relevante, esto es, 1-2 la información más importante, 3-4 la menos importante. También puede existir un cuadrante 1a y un 2a, a los cuales se les conoce como cabecera de página (aquí es en dónde generalmente el diseñador ubica los menús)
Los cuadrantes 3-4 contienen información y también pueden subdividirse en 3a y 4a, en estos últimos se ubica el pie de página, algunas barras de navegación.
Si el diseñador quiere llamar la atención del lector, utilizará los cuadrantes del 5-8, los cuales, al igual que los primeros tiene una secuencia de lectura de arriba hacia abajo y de izquierda a derecha.
En ocasiones y debido al diseño a seguir, es poco probable seguir el esquema de cuadrantes, entonces utiliza frames o marcos que sirven para englobar información, sigue la misma directriz de lectura.
Diagrama de navegabilidad
Un diagrama de navegabilidad le indica al usuario la información contenida en el sitio web, además de hacerle saber con cuántos niveles de profundidad se conceptualizado la información.
Por ejemplo, este es el diagrama de navegación de éste blog.
Cómo podrás observar tiene tres niveles de profundidad. Este diagrama lo realicé usando la herramienta Bubbl.us.
Bibliografía
Cushman, W. H. (1991) - Human Factors in product design. Elsevier Science Publishing Company, New York.
Marmolin, H. (1993). Ergonomía del software. Más allá del interfaz gráfico.. [online] Computerworld.es. Available at: http://www.computerworld.es/archive/ergonomia-del-software-mas-alla-del-interfaz-grafico [Accessed 31 Oct. 2016].
Moreno Muñoz, A. (2000) - Diseño Ergonómico de aplicaciones hipermedia. Edit. Paidós, España.
Prado León, L. and Cárdenas Vázquez, S. (2005). Lineamientos ergonómicos en el diseño de páginas Web. [online] Abergo.org.br. Available at: http://www.abergo.org.br/revista/index.php/ae/article/viewFile/49/46 [Accessed 31 Oct. 2016].