Modelo mental y objetos web

Cuando nos enfrentamos a un nuevo objeto echamos mano de nuestras experiencias anteriores y de la estructura visible del objeto para hacernos una idea de cómo puede funcionar. Es más, podemos representarnos mentalmente sus partes visibles y simular su funcionamiento. Algo parecido sucede cuando se trata de nuevas situaciones, eventos o interacciones sociales.

La psicología cognitiva llama sistema objetivo al objeto que la persona está usando o aprendiendo a usar y modelo mental a la representación interna del sistema objetivo que elabora el usuario. El modelo mental resulta entonces en una empresa personal y por tanto incompleta e inestable, pero funcional y en constante evolución. Un modelo mental se forma a partir de la experiencia, de la instrucción o de una combinación de ambas.

Al modelo desarrollado con fines de instrucción para representar apropiadamente el sistema objetivo se le llama modelo conceptual y es elaborado por diseñadores, ingenieros o científicos. El modelo conceptual es, a diferencia del modelo mental, una representación externa de objetos o fenómenos, compartida por una comunidad y por eso mismo más completa y más consistente con el sistema objetivo.

Pero a falta de un modelo conceptual, las personas forman modelos mentales cuando interactúan con el entorno, con los demás y con los artefactos tecnológicos (Norman: 2014). Los modelos mentales les permiten hacer inferencias y predicciones, como cuando al encontrar un objeto web (por ejemplo, el carrito de compras) en determinado lugar de una página, esperan volver a encontrarlo en el mismo lugar en otras páginas.

Para demostrar el ejemplo anterior, Sandra Roth y sus colegas (2013) seleccionaron tres tipos de páginas web (tienda en línea, portal de noticias y página web empresarial) y cuatro objetos web por cada tipo de página (carrito de compras, navegación, registro y buscador, para la tienda en línea; navegación, logo, buscador y archivo, para el portal de noticias; y navegación, logo, contacto y quiénes somos, para la página web empresarial).

Para cada objeto web los investigadores seleccionaron un conjunto de páginas donde ese objeto estuviera colocado en diferentes posiciones y entonces pidieron a un grupo de graduados universitarios que localizaran el objeto en cada una de las diferentes páginas. Para medir la velocidad en la que localizaban el objeto web, los investigadores utilizaron el método de registro visual (eye-tracking).

Los resultados indican que, a falta de otras características como tamaño, forma o color, los sujetos encontraron más rápido los objetos cuando estaban colocados en los lugares típicos dentro de la página (Figura 1). Esto significa que las personas tienen claro qué apariencia deben tener y dónde deberían estar colocados los objetos importantes para cada tipo de página web y también que los usuarios se orientan mejor cuando las páginas responden a esas expectativas.

Figura 1. El área más oscura indica el lugar donde, en un experimento anterior, más participantes colocaron el carrito de compras dentro de una retícula de 12 × 8. Elaborado a partir de Roth et al.: 2013.
Figura 1. El área más oscura indica el lugar donde, en un experimento anterior, más participantes colocaron el carrito de compras dentro de una retícula de 12 × 8. Elaborado a partir de Roth et al.: 2013.

Con el uso constante de los sitios web se han desarrollado ciertas expectativas de las cosas que podemos encontrar en ellos; eso no significa que las expectativas siempre hayan sido las mismas o que lo seguirán siendo en el futuro, significa más bien que los objetos pueden evolucionar como también lo hacen los modelos mentales que construimos a partir de los objetos.

Referencias

Norman, D. A. 2014. «Some observations on mental models» en D. Gentner y A. L. Stevens (Eds). Mental Models. Psychology Press.

Roth, S. P. et al. 2013. «Location matters, especially for non salient features — An eye-tracking study on the effects on web object placement on different types of websites» en International Journal of Human-Computer Studies. 71, 228-235.

La granularidad en la estrategia de contenido

La estrategia de contenido es un plan para la creación, administración y publicación de contenido significativo para una organización. Una de las herramientas más importantes para llevar a cabo esta tarea es el modelo de contenido. El modelo de contenido define, en primer lugar, la estructura semántica y los elementos para cada tipo de contenido y, en segundo, las relaciones entre los diferentes tipos de contenido dentro de un proyecto específico.

Un tipo de contenido es una pieza de información que con el paso del tiempo ha llegado a tener una estructura reconocible y estandarizada. Esto no significa que determinado tipo de contenido tenga que ser utilizado de la misma forma por todas las organizaciones, sino que a partir de una serie de componentes comunes puede presentar componentes particulares para cada organización. Por ejemplo, las preguntas frecuentes (FAQs) constan básicamente de una pregunta y una respuesta, pero en algunos casos pueden incluir también una imagen o un video.

Cada tipo de contenido puede dividirse en componentes; así, un blog se compone de entradas y un sitio web de páginas. A su vez, los componentes de un tipo de contenido se pueden descomponer en elementos: la entrada de un blog, para seguir con los mismos ejemplos, tiene un título, un cuerpo de texto, una figura, etcétera, y una página web tiene un encabezado, un pie, hipervínculos y un largo etcétera.

A la propiedad por la cual una entidad puede dividirse en piezas reconocibles se le llama granularidad y al número de veces en que puede desagregarse dicha entidad se le conoce como niveles de granularidad (Figura 1). La pregunta es: ¿hasta dónde podemos dividir el contenido antes de que deje de ser significativo? La respuesta tiene que ver con la reusabilidad: podemos dividir el contenido hasta que la pieza resultante todavía pueda ser etiquetada, almacenada y reutilizada, como elemento o componente, en otro tipo de contenido.

Figura 1. Ejemplo de desagregación de algunos tipos de contenido. No es exhaustiva, pero sirve para ilustrar el punto
Figura 1. Ejemplo de desagregación de algunos tipos de contenido. No es exhaustiva, pero sirve para ilustrar el punto

Hay un cierto grado de relatividad en los niveles de granularidad. Puede suceder que un tipo de contenido sea, en otro contexto, un elemento o un componente, como el video cuando es un recurso didáctico dentro de un curso instruccional. Una infografía es un tipo de contenido reconocible, pero también puede ser una de las diapositivas de una presentación. Entonces, ¿a qué nivel de granularidad colocamos, por ejemplo, las FAQs?, ¿no serán necesarios más niveles de granularidad?

Lo cierto es que cada organización determina los tipos de contenido que requiere para cumplir con sus objetivos y es la misma organización la que decide los niveles de granularidad y, por tanto, de reusabilidad que va a necesitar. Es por eso que una buena manera de implementar una estrategia de contenido, comienza por estandarizar la estructura y los elementos para cada tipo de contenido y, de ser posible, por describir cada uno de los elementos por medio de etiquetas. El ejercicio es útil aunque la estrategia de contenido no sea el objetivo primordial.

Forma y color en Kandinsky

En 1910 el pintor ruso Vasili Kandinsky (1866-1944) sugirió una relación «inevitable» entre las formas básicas—triángulo, cuadrado y círculo—y los colores primarios—amarillo, rojo y azul—; de la que resultaba la fórmula triángulo-amarillo, cuadrado-rojo y círculo-azul. Pero, ¿cómo llegó Kandinsky a esta fórmula?

La forma—explica Kandinsky en De lo espiritual en el arte—es la delimitación de una superficie interna por una superficie externa; puede referirse a un objeto real o a una entidad abstracta como el triángulo, el cuadrado o el círculo. El color, por su parte, se imagina primero de manera abstracta y, en cuanto queda delimitado por una superficie, adquiere un tono determinado.

Los colores pueden ser realzados por las formas. Así, un color «agudo» como el amarillo resuena mejor en una forma «aguda» como el triángulo. Pero los colores también pueden ser mitigados por las formas, como en el caso de un círculo amarillo: un color agudo para una forma no aguda. Aquí «agudo» se refiere al ángulo.

En su libro de 1926, Punto y línea sobre plano, Kandinsky desarrolló esta relación entre formas y colores. Resumo el argumento: el punto es el elemento básico de toda obra pictórica; materialmente, surge del contacto de un instrumento con una superficie. El punto está en reposo hasta que, al moverse, surge la línea. Si el punto se mueve en una sola dirección hace surgir la línea recta, pero si dos puntos chocan desde diferentes direcciones generan líneas quebradas o angulares.

Las líneas quebradas se pueden esquematizar en tres grupos: líneas quebradas con ángulo agudo (45º), líneas quebradas con ángulo recto (90º) y líneas quebradas con ángulo obtuso (135º). Estos ángulos son la transición necesaria antes de llegar a las formas básicas: el ángulo agudo se resuelve en triángulo, el ángulo recto en cuadrado y el ángulo obtuso en círculo.

Y es en este punto donde Kandinsky sugiere la relación entre ángulos y colores y, por extensión, entre formas básicas y colores: el ángulo agudo está más cerca del máximo de calor y tiene por tanto coloración amarilla; el ángulo obtuso está más cerca del máximo de frío y tiene entonces color azul; entre estos dos extremos se encuentran el ángulo recto y el color rojo (Figura 1).

forma_color
Figura 1. Desarrollo de la correspondencia forma-color en Kandinsky

Se ha querido ver en la correspondencia entre las formas y los colores básicos de Kandinsky el resultado de una posible sinestesia del pintor. La sinestesia es una condición neurológica en la cual el individuo recibe un estímulo en la modalidad de un sentido y lo experimenta en otro. Lo cierto es que Kandinsky ha desarrollado esta correspondencia en términos que eran compartidos por otros artistas de la Bauhaus como, por ejemplo, Johannes Itten—del que también se ha dicho que era sinesteta.

A cincuenta años de STOP

STOP son las siglas para Sequential Thematic Organization of Publications (Organización Temático-Secuencial de Publicaciones), un método de escritura técnica que organiza un documento a partir de una serie de módulos temáticos, cada uno de los cuales ocupa dos páginas enfrentadas. Fue desarrollado por el equipo de publicaciones técnicas de Hugues-Fullerton, una división de Hugues Aircraft Company. En 1965 fue publicado el reporte interno STOP: How to achieve coherence in proposals and reports (STOP: Cómo lograr la coherencia en propuestas e informes). Estaba firmado por James Tracey, David Rugh y Walter Starkey.

Tracey y sus colegas habían notado que el procedimiento convencional, antes de publicar un documento técnico, consistía en elaborar un índice con una jerarquía de categorías; escribir el borrador—sin conocer de antemano la extensión del texto o el uso de figuras—; compilar y revisar el manuscrito; y, finalmente, hacer las correcciones. El resultado era un documento comparable a un «río de palabras» (river of words) en el que flotaban libremente las figuras y en el que las ideas principales del autor quedaban ocultas en la corriente de texto.

El procedimiento antes de publicar un documento STOP, en cambio, consistía en elaborar una lista de temas organizados en secciones; bosquejar un storyboard para cada uno de los temas; revisar y corregir en grupo cada storyboard y, sólo después de esto, comenzar a escribir los textos. El storyboard—un recurso importado del cine—incluía un título, que introducía el tema por medio de una frase; una tesis, que establecía la idea principal en un párrafo; y una breve nota para cada párrafo. Cuando era necesario, incluía también el boceto de la figura o figuras a utilizar.

La disposición de los elementos para cada módulo temático es la siguiente (Figura 1): en la parte superior de la página izquierda se colocan, en este orden, la sección, el título y la tesis; en el resto de la página se coloca el texto. En la página derecha se colocan las figuras. Si no son necesarias las figuras, se puede colocar más texto. Así, un documento STOP permite, cuando se cambia la página, comenzar un nuevo módulo. Una correcta secuencia de los módulos asegura la coherencia temática.

stop_module
Figura 1. Disposición de elementos para el módulo temático

STOP es un método que surgió en el campo de la escritura técnica y la ingeniería para mejorar la elaboración y comprensión de informes y propuestas. A decir de sus autores, puede aplicarse también en la publicación de folletos, brochures y libros de texto. A cincuenta años de su creación, la disposicion de información a doble página—con sus respectivas variantes—todavía puede encontrarse en algunos libros de diseño y la planeación por medio de storyboards sigue siendo una buena opción, sobre todo en el caso de publicaciones multiautor.

La metáfora visual en Prezi

Prezi es un programa de presentaciones basado en la nube. En lugar de las clásicas diapositivas, lo que encuentras es un gran lienzo donde puedes colocar marcos con texto, imágenes y multimedia. Para ir de un marco a otro—o de un plano general a un marco y viceversa—Prezi cuenta con una herramienta que simula el zoom de una cámara; también puedes panear y rotar.

En Prezi puedes usar una de las 92 plantillas prediseñadas o abrir una presentación en blanco. En cualquier caso, te ayudará saber que el programa está diseñado para favorecer la elaboración de presentaciones en términos de metáforas visuales.

¿Qué es una metáfora visual?

Una metáfora es una expresión lingüística en la que conceptualizamos o mapeamos un dominio mental en términos de otro. Como en el caso de la analogía, la metáfora es un proceso cognitivo por el cual un dominio conocido (o dominio base) nos permite comprender un dominio desconocido (o dominio objetivo).

Pero a diferencia de la analogía, donde el mapeo de ambos dominios resulta similar—por ejemplo, cuando expresamos la frase UN ÁTOMO ES COMO UN SISTEMA SOLAR MÁS PEQUEÑO—, en la metáfora, la relación entre el dominio conocido y el dominio por conocer es «semánticamente distante»—como cuando decimos EL MUNDO ES UN ESCENARIO. (Risch: 2008)

Ahora bien, en una analogía visual las relaciones espaciales del dominio base son preservadas en el dominio objetivo, así en el caso de los mapas geográficos o de los planos de construcción. En una metáfora visual, en cambio, aprovechamos la naturaleza visuoespacial del dominio base para entender conceptos no espaciales o abstractos, como cuando utilizamos la imagen de un puente para representar, por ejemplo, el desarrollo de un proyecto.

Plantillas con metáfora visual

La investigadora húngara, Anna Szlávi, ha notado que, además de presentarse en términos de metáfora visual, Prezi ofrece al menos veinte plantillas prediseñadas que son claramente «herramientas de comunicación metafórica». Entre ellas, Szlávi identificó una serie de plantillas (Figura 1) en las que nociones como cambios, procesos y acciones (dominio objetivo), se caracterizan metafóricamente en términos de espacio, movimiento y fuerza (dominio base).

visual_metaphor
Figura 1. Metáfora visual-verbal y plantilla (Elaborado a partir de Szlávi: 2015). Las plantillas se pueden encontrar en prezi.com

Szlávi concluye que, a pesar de la fuerte base metáforico-visual de algunas plantillas de Prezi, son pocos los usuarios que aprovechan la herramienta de esta manera. Así que no es un ejercicio ocioso pensar en un tema para cada una de estas plantillas como tampoco lo es buscar metáforas visuales en otras plantillas; mejor aún, desarrollar nuestra propia metáfora visual en una presentación en blanco.

Referencias

Risch, J. S. 2008. «On the role of metaphor in information visualization». Pacific Northwest National Laboratory. Richland, Washington.

Szlávi, A. 2015. «Metaphors Matter – The Analysis of Prezi in Search of Visual-Verbal Metaphors». Opus et Educatio, 2. 3, 57-69.

La retícula tipográfica según Karl Gerstner

En 1962, el suizo Karl Gerstner recibió el encargo de diseñar la revista Capital, una publicación trimestral sobre economía llamada así por la obra de Karl Marx. En 1964, Gerstner explicó en su libro, Diseñar programas, que la retícula para la revista (Figura 1) era un ejemplo de la «retícula móvil» que había desarrollado junto con sus socios, Markus Kutter y Paul Gredinger, en su agencia de diseño GGK.

gerstner1
Figura 1. La retícula de Gerstner (retrazada)

Hay que recordar que en los años sesenta los diseñadores suizos, entre ellos Josef Müller-Brockmann, habían popularizado el uso de retículas tipográficas para el diseño de publicaciones. Una retícula tipográfica es una herramienta que permite disponer texto, imágenes y representaciones gráficas sobre una superficie dividida en campos a la manera de una reja.

Para el caso de la revista Capital, Gerstner quería una retícula que permitiera «la máxima conformidad a una regla con un gran número posible de variaciones». El resultado, a primera vista, puede parecer complicado, pero no es así: se trata de varias retículas sobrepuestas que pueden trabajar juntas, aunque también separadas (Figura 2).

gerstner2
Figura 2. Desarrollo de la retícula de Gerstner

La base para la retícula tipográfica de Gerstner es un cuadrado de 58 × 58 unidades (el cuadrado no incluye los márgenes ni la cabecera de la página). La unidad corresponde a los 10 puntos que van de una línea base a otra línea base, a saber, el interlineado. Este cuadrado se puede dividir en 2, 3, 4, 5 y 6 columnas—o también en 4, 9, 16, 25 y 36 módulos. En ninguno de los casos deben sobrar unidades, para lo cual el espacio entre columnas debe ser siempre de dos unidades:

Número de columnas Unidades por columna Espacios entre columnas
2 28 1
3 18 2
4 13 3
5 10 4
6 8 5

De esta manera, cuando los módulos de las retículas se superponen sobre el cuadrado de 58 × 58 unidades, aparece la retícula característica de Gerstner que, en principio, parecía poco comprensible y aún menos manejable.

Cinco generadores de esquemas de color

Cuando tienes un color base y quieres combinarlo con otros colores de manera que el resultado sea visualmente atractivo, lo que necesitas es un generador de esquemas de color (color scheme generator). Un esquema de color puede ser monocromático o policromático, complementario o análogo. Hay en línea algunos programas que te pueden ayudar a elegir tu paleta de colores.

1. Hex Color Scheme Generator

Si no quieres complicarte la vida probando varios esquemas, Hex Color Scheme Generator es tu herramienta. Introduces el código hexadecimal de tu color y te devuelve tres códigos de color con sus respectivas muestras. Si lo que tienes son los valores RGB de tu color, el sitio tiene un convertidor RGB a código hexadecimal y HSV.

hex_color
Hex Color Scheme Generator

2. Color Calculator

Color Calculator es un generador muy fácil de usar. Sólo tienes que entrar a la página y te indica paso a paso lo que tienes que hacer. Selecciona un color, elige uno de los seis esquemas de color y ve los resultados. Cuando estés satisfecho, obtén tu esquema en forma de tabla con los valores hexadecimal, RGB y CMYK de tus colores, además de las muestras.

color_calculator
Color Calculator

3. Paletton – The Color Scheme Designer

En Paletton puedes introducir el valor hexadecimal de tu color base o usar el marcador de la rueda hasta encontrar uno antes de probar con cada esquema. Puedes visualizar una colección de muestras del lado izquierdo (presets) y una serie de previsualizaciones del lado derecho; la más útil es la que dispone los colores de tu esquema como si se tratara de una página web (examples).

paletton
Paletton – The Color Scheme Designer

4. Color Wizard – Colors on the Web

Color Wizard te permite ingresar el código hexadecimal de tu color base, manejar los deslizadores del control RGB o aún probar con el botón aleatorio. Obtienes, además de los clásicos esquemas de color, los códigos de las variaciones de tono, saturación, tinta y sombra. El espacio de la interfaz de usuario está bien aprovechado para comparar las muestras de los esquemas de color y de las variaciones.

color_wizard
Color Wizard – Colors on the Web

5. ColorHexa

ColorHexa es el generador para aquellos que se sienten mejor manejando código. Ingresas el valor hexadecimal, el valor RGB o el nombre de un color y te devuelve toda la información relacionada: conversiones, esquemas y alternativas del color; sombras, tintas y tonos; simulaciones para personas con algún tipo de ceguera al color; y, además, el código HTML y CSS para texto, borde y fondo, con su respectiva previsualización.

color_hexa
ColorHexa

Patrones de diseño y diseño de interacción

Un patrón de diseño (design pattern) es una solución probada para un problema recurrente en un contexto dado.  Aunque la solución se puede usar una y otra vez esto no significa que se lleve a cabo de la misma manera. Christopher Alexander utilizó el término en este sentido en su libro A pattern language (1977) donde lo aplicó a la arquitectura.

La idea de identificar patrones de diseño para resolver problemas fue importada por la ingeniería del software y la programación orientada a objetos. Más tarde, la misma idea fue aplicada por el diseño de interacción y el diseño de interfaz a los programas de escritorio, a los sitios web y a las aplicaciones en los móviles; con el paso del tiempo, algunas soluciones han funcionado mejor o han sido mejor aceptadas.

Un ejemplo de patrón de diseño es el conocido como Lienzo/paleta (Canvas/palette): un lienzo en blanco junto a una paleta con los iconos de las herramientas disponibles y que ha sido utilizado con éxito por muchos programas de edición de gráficos vectoriales y de edición de imágenes.

En la siguiente figura se pueden ver otros ejemplos de patrones de diseño: los hay para organizar información y para disponer imágenes; para introducir y visualizar datos; también los que sirven para facilitar la navegación.

patterns
Figura 1. Ejemplos de patrones de diseño para la interacción

Existen colecciones de patrones de diseño de interacción, algunas de ellas muy bien organizadas, donde se pueden encontrar detalles sobre su funcionalidad. Los nombres y formatos pueden variar según el autor, pero en general contienen lo siguiente:

  • Qué problema se trata de resolver
  • Cuándo usar el patrón
  • Cuál es la solución
  • Por qué usar el patrón

Los patrones de diseño pueden funcionar como soluciones prediseñadas basadas en principios y buenas prácticas; son una buena opción siempre y cuando correspondan a las necesidades del proyecto y no sólo se utilicen porque se ven bien o porque ya venían en la plantilla.

La hoja de estilo editorial

Si el texto que vas a publicar no pertenece a una serie, entonces registra tus decisiones editoriales en una hoja de estilo

Cuando escribes o corriges un texto que va a ser publicado, seguramente vas tomando nota de algunas decisiones editoriales que irás aplicando conforme avanza el trabajo.

Antes de archivar tus notas, piensa que pueden servir para elaborar una hoja de estilo editorial que alguien más puede utilizar en fases posteriores del proyecto.

¿Qué es una hoja de estilo editorial?

La hoja de estilo editorial es el documento que define el estilo y formato de una publicación en particular; contiene tanto las decisiones que se separan del uso aceptado como las que seleccionan una entre varias soluciones correctas. La hoja de estilo editorial no tiene porqué ser exhaustiva, para eso existe el libro de estilo editorial o los manuales de estilo.

La hoja de estilo editorial consiste en una o dos páginas, a veces un poco más, con las decisiones editoriales imprescindibles para asegurar la consistencia de un tipo de publicación particular. Debe ser accesible y de fácil consulta para todos aquellos miembros del equipo que trabajen en el mismo proyecto, un poco a la manera de una guía de referencia rápida.

¿Cómo elaborar una hoja de estilo editorial?

  • Determina el tipo de documento y los recursos, textuales y gráficos, con que contará la publicación que vas a elaborar, revisar o corregir.
  • Establece los documentos generales a los que se va adscribir la publicación (diccionarios, manuales, guías, etcétera); recuerda que la hoja de estilo trata de las excepciones y de los criterios especiales.
  • Lista las decisiones de estilo y formato que hayas tomado o que vayas tomando mientras realizas el trabajo de escritura o corrección.
  • Organiza las decisiones por temas tales como ortografía, puntuación, formato, etcétera.

¿Qué temas contiene una hoja de estilo editorial?

En general, una hoja de estilo editorial puede contener los mismos temas que toca el libro de estilo editorial, pero en una versión abreviada. También dependerá de quién elabore la hoja de estilo: no trata los mismos puntos el corrector de estilo que el corrector de pruebas. Así, según el tipo de documento, puede incluir algunos de los siguientes apartados:

  • Formato y diseño de página
  • Partes del documento y el orden en que deben aparecer
  • Estilo y tono de escritura
  • Ortografía
  • Uso de mayúsculas, versalitas, cursivas y negritas
  • Puntuación
  • Nombres, abreviaturas, terminología
  • Números, fechas, símbolos, fórmulas
  • Citas, notas, referencias
  • Listas, tablas y gráficos

Aunque las hojas de estilo más reconocibles son las que elaboran el corrector de estilo o el corrector de pruebas, los demás participantes también van tomando sus propias notas. Si reúnes todas estas notas, puedes pasar al siguiente nivel que es elaborar un libro de estilo.