El affordance y el diseño de interfaces gráficas. El caso de las plataformas para el autoaprendizaje

Post date: mayo 18, 2015 | Category: Décimo Cuarta Edición Octubre 2014

ARTÍCULO

Sobre el affordance

 

El concepto de affordance se ha convertido en tiempos recientes en elemento común en las discusiones acerca de los objetos de diseño. De acuerdo a las definiciones del concepto de affordance formuladas tanto por su creador, James J. Gibson, como por Donald Norman, quien lo incorporó al campo del diseño, es posible entenderle a partir del margen de posibles acciones latentes en un ambiente determinado. Es la respuesta implícita a la pregunta frente al objeto nuevo ¿qué puedo hacer con esto?

 

La manera en que el usuario del objeto de diseño enfrenta este problema, implica necesariamente la consideraciones de factores no solamente ergonómicos, relacionados con su propia corporalidad, sino también de elementos perceptuales, cognitivos y contextuales.

 

Algunos autores marcan, desde la psicología, tres tendencias principales para el aprendizaje (Rabinowitz, 2004) a partir de los enfoques conductista, cognitivo y de affordance, en el entendido de que este último representa por sí mismo una forma de interacción con el entorno, donde las posibilidades quedan mediadas por una red de relaciones complejas, a diferencia de los primeros dos enfoques, un tanto más unívocos.

 

Revisemos cuál es la forma en la que operan estos enfoques y su relación con el diseño, donde terminan por convertirse también, en posturas para abordar el proceso de diseño. En ese sentido, el enfoque conductista, pone el acento en el lugar que ocupa el ambiente dentro del comportamiento, en el entendido de que determinados estímulos (y su repetición) producirán ciertos resultados, en la lógica del Si X entonces Y entonces Z, generando la ilusión de control de los procesos. El centro aquí, está no en la mente del sujeto, sino en lo que ocurre a su alrededor, en una relación del tipo:

 

ambiente -> [usuario] -> comportamiento

 

Donde hay un reflejo del ambiente en el comportamiento de manera independiente a las posibles características personales del usuario, cuya capacidad de decisión desaparece del esquema.

 

Podríamos pensar que ésta es una actitud que ha sido asumida, de manera inconsciente por buena parte de la tradición productiva del diseño de corte funcionalista, en el entendido de que la manera en que el usuario se relaciona con los sistemas de objetos depende, exclusivamente, de la manera en que estos han sido diseñados y no de la situación particular. Se trataría, en el caso del diseño, de un diseño descontextualizado, eficientista y con aspiraciones de alcanzar tanto un funcionamiento universal, como el enunciamiento de reglas para el funcionamiento (y en última instancia, para el diseño) de los objetos, donde sea posible la predicción  del comportamiento del usuario en su interacción, actuando como si los procesos perceptuales ocurrieran en un espacio aislado, sin considerar la enorme cantidad de elementos ambientales y contextuales que salen de control al momento de articular el estímulo y que pueden llegar a hacer impredecible el resultado.

 

El enfoque cognitivo, por otra parte, surgió como reacción al dogma conductista frente a la evidencia de su incapacidad para explicar la totalidad de los fenómenos (y aún más, de alcanzar su meta, la predicción de lo posible, en concordancia con la tradición de la ciencia positiva); así, se afirma que los individuos no responden tanto al entorno, como a su percepción o a la representación que se construyen de dicho entorno, de tal forma que se vuelve primordial el entender la manera en que funciona la mente humana. El trabajo de Howard Gardner sobre las inteligencias múltiples es producto de esta postura. Podríamos pensar que su aplicación al diseño implica el énfasis en la manera en que el usuario procesa la información, en un camino que lleva a la neurociencia cognitiva en la búsqueda por comprender de manera sistemática el funcionamiento del cerebro y lo que ocurre en él frente a la incorporación de datos. En ese sentido, las nociones de neurodiseño y neuromarketing son producto de la incorporación de estas posturas al diseño y  producción de mensajes. De tal forma, algunos autores (Herrera Batista, 2012) señalan las principales incorporaciones al diseño provenientes de la neurociencia:

 

– La visión multidimensional y el carácter integrador en el estudio del usuario, que implican el conocimiento de aspectos cognitivos fundamentales, como percepción, sensación, emoción, motivación.

 

– El reconocimiento de los límites fisiológicos para el estudio de todo lo anterior en función de la estructuración del sistema nervioso y la fisiología como márgenes para la percepción

 

– Todo ello, puede ser medido a través del uso de sus métodos y herramientas para la evaluación de la eficacia del diseño. El uso del eye-tracking como herramienta de evaluación, no es sino un resultado de esta misma postura.

 

Finalmente, siguiendo con la argumentación de Rabinowitz, el affordance como tercera perspectiva, permite cruzar elementos del entorno y del individuo, poniendo el énfasis en la manera en que ocurre la interacción entre ambos.

 

Recordando la definición original de Gibson, ésta enunciaba las posibilidades que el entorno ofrece al individuo, independientemente de su capacidad de percibirlas, podríamos pensar sin embargo, de acuerdo con Norman, en la manera en que el individuo reacciona frente al entorno, haciendo posible la operación de affordance.

 

En relación a las posturas previas (centrada en el ambiente y centrada en la cognición), el affordance mira hacia el ambiente en tanto el individuo reacciona a él, asumiéndolo no como camino único a seguir (en la lógica del “si X entonces Y”) sino como margen de posibilidades, ubicando así, una posible causa para el funcionamiento de las operaciones cognitivas.

 

Resulta interesante comparar la manera en la que la psicología realiza esta clasificación, con distintos cambios de paradigma presentes en el diseño durante el siglo XX, en el tránsito de un diseño centrado en la función (implícitamente conductista), a un diseño centrado en el usuario (de carácter cognitivo) a un diseño centrado en la experiencia del usuario (correspondiente al affordance). Sin embargo, quizás habría que dar un paso mas, para pensar en el affordance en relación con el contexto y con la cultura en que tiene lugar la relación entre el individuo y el entorno.

 

Affordance y medios digitales

 

Uno de las principales ventajas de las nuevas tecnologías, en términos de experiencia del usuario, es la mejora en el affordance con respecto a los medios audiovisuales tradicionales, al sustituir el autoarrastre (el avance automático en el despliegue de información) por el heteroarrastre, es decir, los sistemas con un flujo unidireccional –fuera de control por parte del usuario- por estructuras no lineales de organización, que permiten múltiples caminos a recorrer, desde la mera repetición posible en los sistemas de reproducción de la imagen en movimiento presente en la hipertextualidad de aquello a lo que seguimos refiriéndonos como nuevos medios, donde la participación y empoderamiento del usuario sobre el funcionamiento del sistema quedan como posibilidad presente.

 

El uso de nuevas tecnologías, abre sin duda, una gama importante de cambios en la organización y estructura de los contenidos, permitiendo con mayor claridad la interacción e incluso la coautoría de los mismos, en la posibilidad de que el usuario estructure la información de acuerdo a sus intereses o incluso, la enriquezca a partir de su propia experiencia. En esos casos, es de suma importancia que el margen de posibilidades de uso sea no solo totalmente claro, sino que incite de alguna manera al usuario a la acción.

 

Este punto es, nos parece, capital para la incorporación del affordance al diseño, en tanto es preciso no solamente el hacer de conocimiento del usuario aquello que es posible realizar, sino que es importante impulsarlo a la ejecución de aquellas acciones posibles, en la intención de enriquecer al sistema y sus contenidos, abriendo la puerta para cierto nivel de indeterminación en cuanto a la posibilidad de que el usuario adapte, reinvente y, en última instancia, se apropie de las propuestas de diseño. El caso de las plataformas educativas para el autoaprendizaje, resulta sumamente interesante al respecto, porque permite plantear un espacio en el que es posible la participación del usuario regulada dentro de ciertos márgenes, permitiéndole rangos de libertad siempre dentro de los límites que hacen posible su funcionamiento como sistema para el aprendizaje. Es necesario considerar además, la forma en la que la noción del contexto afecta los sistemas digitales operando en la www, deslocalizados y desprovistos en muchos casos de información sobre el entorno físico en el que son producidos, mas no por ello descontextualizados. La clave está aquí en considerar la posibilidad del entorno tecnológico como un contexto en sí mismo, como una ubicación que les permite situarse en relación a productos similares y a un entorno de uso determinado por los sistemas operativos.

 

Plataformas para el aprendizaje

 

La utilización de nuevas tecnologías para el apoyo de los procesos educativos ha traído consigo un enriquecimiento en el campo del desarrollo de aplicaciones orientadas a la educación y, en consecuencia, de la manera en que estas aplicaciones pueden ser utilizadas por los usuarios.

 

Dentro de la gran gama de posibilidades que brindan los sistemas digitales, aquellos orientados al autoaprendizaje involucran un alto nivel de complejidad a partir de dos factores principales:

 

Por un lado, las necesidades propias del proceso, que implican el que los usuarios puedan tener interacción efectiva con los contenidos, es decir, no limitándose a su recepción pasiva, sino haciendo posible que tenga lugar alguna clase de retroalimentación y validación del conocimiento, sea a partir de sistemas automatizados o de la posibilidad de incorporar la figura de instructores reales con posibilidades de entrar en contacto con los alumnos, asesorarlos y evaluar su trabajo. Se trata pues, de abrir la posibilidad de que el alumno pueda hacer y recibir comentarios sobre las actividades realizadas en un camino cuyo desarrollo en complejidad lleva hacia la noción del tutorial inteligente[1].

 

Es necesario considerar, además, la enorme cantidad de posibles usuarios que pueden hacer uso de un sistema de autoaprendizaje, máxime cuando este se encuentra descontextualizado de un proceso formativo de mayores dimensiones y donde, por lo mismo, es difícil determinar orígenes y antecedentes de los alumnos, su contexto y el uso que habrán de darle a los conocimientos y habilidades adquiridos. Esta imposibilidad de situar el aprendizaje del alumno dentro de un espacio físico obliga, como decíamos líneas atrás, a la articulación de un contexto marcado por lo digital, enunciado a partir de ejemplos genéricos y normas estandarizadas que, sin alusión a contextos locales, hacen referencia a un entorno marcado por los propios sistemas digitales en cuanto al discurso contenido en la interfaz, que desemboca en la imagen y la interacción que tiene lugar entre el usuario y el sistema, semejante a la experimentada en otras aplicaciones. La operación del sistema digital, de esta forma, ocurre en un territorio delimitado: las ventanas organizadas en la interfaz gráfica del sistema operativo, frente a ello, será el mismo conocimiento implícito del medio y sus convenciones el que permitirá al usuario la utilización del sistema.

 

Estudio de caso: codeacademy.com

Habitualmente, los sistemas de autoaprendizaje de elementos vinculados con nuevas tecnologías, requieren de la habilitación de espacios donde sea posible el ejercicio práctico que acompañe la información sobre la utilización de herramientas y lenguajes, un ejemplo de esto, ocurre con un sitio como codeacademy.com, plataforma para el autoaprendizaje de lenguajes de programación.

 

Esta plataforma posee una característica particular con respecto a otras plataformas para el autoaprendizaje de habilidades digitales, y es que se trata de un espacio donde es posible tanto el incorporarse como alumno a distintos cursos, como agregar cursos propios a partir de las herramientas que brinda el sistema, así como la posibilidad de ejecución de distintos lenguajes (php, javascript, python, entre otros) dentro de una ventana, permitiendo con ello que el futuro alumno sea capaz de ver la ejecución en vivo del ejercicio que realiza como elemento sustancial del proceso de aprendizaje.

 

Un aspecto adicional del sistema, está en que, dado que se encuentra desvinculado de una institución académica (como podría ser el caso de los cursos ofrecidos por Coursera y otras plataformas de MOOCs) presenta un sistema de reconocimiento a partir de la obtención de puntos, con los que se pueden obtener “insignias” (badges) que marcan los logros del alumno en cuanto a cursos y que son publicables en redes sociales, convirtiendo el reconocimiento académico en una cuestión informal. En términos de affordance, se abre un margen de posibilidades que está determinado por el hábito en la navegación y consulta de sitios de internet, permitiendo que las acciones posibles sean las mismas que en sitios vinculados al entretenimiento o al intercambio social (y no, como podría pensarse en primera instancia, las convenciones de plataformas académicas).

 

La estructura de contenidos

En este caso, la opción de aprendizaje permite al usuario escoger entre 3 grandes grupos de cursos:

1. El primero invita a aprender código mientras se construye un proyecto, permitiendo que el usuario pueda tener cierto margen de decisión y adaptación del contenido del curso a sus propias necesidades (en ese sentido, trabajando contra las posibles limitaciones del sistema digital de autoaprendizaje en cuanto a la falta de contextualización del aprendizaje); ahí se plantean 3 ejercicios donde existe progresión en cuanto a complejidad, así como en cuanto a las posibilidades del usuario por incorporar nueva información, desde animar el propio nombre, construir una galaxia, añadiendo planetas y desarrollar un pequeño sitio de internet con información personal.

 

2. El segundo apartado ofrece lenguajes de programación (aunque realmente mezcla lenguajes con frameworks y librerías): HTML&CSS, Jquery, Javascript, PHP, Python y Ruby

 

3. El tercer apartado, ofrece el desarrollo de proyectos web (incluyendo los conocimientos adquiridos en los apartados previos en cuanto a HTML, CSS y JavaScript) y desarrollo de APIs

 

Las interfaces gráficas

La pantalla de inicio incluye, en cuanto a la navegación, solamente opciones para iniciar sesión y crear una cuenta, el resto de la pantalla está ocupado por mensajes que buscan la incorporación del usuario al sistema, ofreciéndole (en español, si el sistema detecta exitosamente el idioma del sistema operativo) “Aprende a programar interactivamente de forma gratuita”, “Crear proyectos”, “Únete a la comunidad” y “Vuélvete famoso”, estos son elementos gráficos no vinculados que persiguen el establecimiento de relación con el posible usuario. En la parte inferior se encuentran (sin traducir al español) las opciones de aprendizaje de código (Javascript, HTML/CSS, PHP, Python, Ruby y APIs), Otros programas (Codeacademy Schools, Historias exitosas, Laboratorios codeacademy) y Codeacademy online (Follow us on twitter, find us on facebook, read our blog)

 

Finalmente, en el pie de la página se encuentran la opción de ayuda, la política de privacidad, las condiciones y avisos de “Hecho en NYC” y copyright, así como una opción de idioma que permite seleccionar entre 9 posibles lenguas.

 

Una vez que el usuario ingresa al sistema con una cuenta registrada, la navegación por la plataforma queda concentrada en la barra superior, donde se cuenta únicamente con un logotipo del sitio, vinculado a la página de inicio y las opciones de Aprender y Enseñar, la primera, concentrando todos los cursos, la segunda dando acceso a la herramienta de generación de contenidos.

 

Del lado derecho se encuentra la información sobre las notificaciones de la cuenta del usuario, los puntos obtenidos (a partir del avance en los cursos activos) y el avatar que identifica a la cuenta.

 

Al ingresar a un curso, el usuario obtiene información general  respecto a la duración, la cantidad de alumnos que lo han cursado y los lenguajes involucrados, así como el botón de inicio del curso; en una segunda pantalla (via scroll) se indica quien realizó el curso y se incluye un glosario de términos.

 

Al comenzar el curso, la pantalla queda distribuida en 4 áreas: 1. la barra superior, que mantiene regresos al inicio y a la pantalla principal, 2. la columna izquierda con información de la actividad en curso, y 3. la columna derecha con la vista del código a editar (mismo que, para generar la sensación de código en funcionamiento, simula la vista de una terminal: fondo negro y texto claro); y 4. en un recuadro a la derecha se presenta una simulación del código ejecutado (o interpretado por un navegador), para poder ver ahí los resultados de lo ejecutado (que es indicado en la columna izquierda) hay botones en la parte inferior, uno que indica “Guardar y enviar código” y otro que indica “Restablecer” para poder borrar la información insertada y volver a comenzar con el ejercicio.

 

El curso se va llevando a partir de la información de la barra izquierda, donde están presentes dos textos, uno con información general sobre el lenguaje y el uso específico de la instrucción a ejecutar y otro las indicaciones sobre lo que, en este caso particular, debe de hacer el usuario y que será validado de manera automática por el sistema, el cual, frente al error muestra un mensaje donde anima al usuario a intentarlo de nuevo, dándole una pista sobre la posible solución. Al final de la columna izquierda se encuentran opciones de ayuda: “Atascado? Consiga una (sic) indicio” y botones para Q&A, Forum y el Glosario.

 

La dinámica de lectura de la pantalla, va así de un izquierda a derecha con contenidos claramente diferenciados: lectura de instrucciones, espacio de ejecución y espacio para la revisión de resultados. En pantallas de baja resolución (800 x 600 pixeles) el cuadro con la ventana de revisión toma nuevas dimensiones, sin afectar a los otros dos espacios.

 

En términos generales, el sitio nos permite observar la operación del affordance en distintos niveles, por un lado, en lo referente al primer nivel de navegación, donde hay total claridad entre los elementos que provocan una acción y los que resultan únicamente informativos u ornamentales.

 

El comenzar la navegación en profundidad iniciando un curso, por ejemplo, de HTML y CSS, modifica la interfaz para marcar, una vez mas, con claridad las zonas en las que es posible la interacción por parte del usuario, al establecer zonas con fondo oscuro, tipografía en blanco y etiquetas indicadas en rojo; precisamente la utilización de este tipo de combinaciones de color es un ejemplo de una referencia a partir del contexto cultural específico de un usuario que no está determinado por condiciones geográficas, sino por hábitos en el uso de sistemas digitales, en tanto se trata de una alusión a la tradicional consola de inserción de texto que incluyen los sistemas operativos con interfaces gráficas (y que a su vez es herencia de la apariencia de los sistemas operativos previos a la aparición de las GUI (Graphic User Interfaces)

 

En casos como el comentado, los procesos de aprendizaje pasan por un proceso de habituación al uso de las interfaces, mismo que es determinado, en última instancia, no por elementos relacionados con la percepción o el funcionamiento de los sistemas, sino con la propia historia del usuario, con sus experiencias previas y la manera en la que estas le sirven como antecedentes para la operación de nuevos sistemas a partir del reconocimiento implícito del margen de posibilidad propio del ámbito digital, es decir, de su affordance.

 

Bibliografía

 

Shalom M. Fisch (2000) A Capacity Model of Children’s Comprehension of Educational Content on Television, Media Psychology, 2:1, 63-91, DOI: 10.1207/S1532785XMEP0201_4

 

Herrera Batista, Miguel Ángel (2012). El neurodiseño como una nueva práctica hacia el diseño científico. En: No Solo Usabilidad, nº 11, 2012. <nosolousabilidad.com>. ISSN 1886-8592 [http://www.nosolousabilidad.com/articulos/neurodiseno.htm]

 

Johnson, Jeff (2010) Designing with the mind in mind, Elsevier, Burligton

 

Rabinowitz, Mitchell, Blumberg, Fran (eds.) (2004) The design of instruction and evaluation, Psychology Press, NY

 

Scaratino, Andrea, Affordances explained en Philosophy of science, vol. 70, No. 5, december 2003

 

[1] Entendidos como aquellos que son susceptibles de modificar su organización o recorrido a partir del análisis de las características y avances de los usuarios en un proceso que plantea la analogía con un sistema que aprende de las capacidades del usuario.