La estética también tiene leyes

Cuando estudiaba en la universidad, recuerdo que me explicaron tan mal las leyes de la Gestalt, que acabé por no prestarles ninguna atención. Señor profesor, si me lee… no se lo tome a mal: no es nada personal contra usted. En general, en las universidades tiende a explicarse las cosas lo más alejadas de la aplicación práctica posible, y las leyes de la Gestalt sacadas del contexto del diseño de interfaces de usuario, parecen un conjunto de verdades de perogrullo meditadas en un momento de iluminación etílica.

Sin embargo, según pasan los años, me doy cuenta de que lo que deberían ser verdades de perogrullo, muchas veces se discuten en los equipos de desarrollo. Creedme… lleva mucho, muchísimo tiempo tomar una decisión con argumentos del tipo “a mi me gusta así” cuando probablemente podrían tomarse en un trís siguiendo criterios de la Gestalt. En este post pretendo hacer un repaso de las seis leyes de la Gestalt desde la perspectiva práctica del diseñador de interfaces Windows. Lo primero, para el que no haya oído hablar de estas leyes, podéis consultar la teoría aquí.

Leyes de la proximidad y de la semejanza

Agrupo estas dos leyes porque suele ser habitual aplicarlas en conjunto. La idea es que los elementos que están próximos, o los elementos que tienen una forma semejante, tienden a considerarse en su conjunto. En las interfaces de usuario, esto nos lleva a las agrupaciones de controles.

  • Si un grupo de controles se refieren a un mismo concepto, agrupándolos facilitaremos la comprensión de cada uno de los elementos (porque la mente humana los considerará como parte de un “todo”). Lo mejor es que lo veamos con un ejemplo:


    Agrupación pésima (sacada de un ejemplo real). El grupo “archivo” se percibe como algo separado y distinto de la opción “generar script”. De esta forma, no se entiende que el nombre de archivo que se solicita sea el nombre del script que se va a generar. La forma correcta de diseñar este diálogo sería:

     
    En este ejemplo estamos aplicando:

    • Ley de la agrupación: se entiende que el textbox espacifica el nombre del archivo por el simple hecho de estar agrupado con el botón “archivo” y el checkbox de “generar script”
    • Ley de la similitud: el botón “OK” se llama ahora “Aceptar”, con lo que se entiende que tiene una función idéntica al resto de botones “Aceptar” de Windows. Por otra parte el botón Archivo tiene puntos suspensivos, por lo que se entiende que sacará un cuadro de diálogo adicional.
  • Sobre la ley de la semejanza, hay que tratar de parecerse tanto a otras aplicaciones como a nosotros mismos. Trata de hacer tus interfaces siguiendo las guías de diseño de Windows. Trata de que tu aplicación se parezca a una que sea el referente en tu sector (todos los procesadores de texto acaban pareciéndose al que domina el mercado… pasó en su día con WordStar, luego con WordPerfect y ahora con Word). Por último, trata de que tu aplicación se parezca a sí misma: los diálogos deben ser similares, los conceptos deben expresarse con los mismos términos, y los iconos deben seguir los mismos paradigmas. Si dos cosas tienen un aspecto similar, el cerebro tiende a relacionarlas… y todo el conocimiento que haya adquirido sobre el modelo antiguo, lo aplicará al modelo nuevo. ¡Resultar familiar es la forma de tener que ahorrarte escribir un manual! 😉

Ley del cierre y ley de continuidad

Estas leyes son más aplicables al diseño gráfico puro y duro que a la usabilidad, pero también pueden servirnos de ayuda. Básicamente, dicen que el cerebro tiende a cerrar cualquier figura a la que le falta un trozo, y que el cerebro continúa cualquier patrón que se interrumpe.

Su aplicación práctica principal están en mostrar más información de la que cabe en pantalla. Fijémonos en un procesador de texto:

Sólo vemos la esquina superior izquierda de un rectángulo, pero ya sabemos que representa parte de una hoja de papel (nuestro cerebro se ha encargado de cerrar la figura). Esto nos indica que lo que escribimos, se sitúa en determinado punto de la hoja de papel, y además sabemos que hay más sitio que no estamos viendo ahora mismo en pantalla. También se emplea la ley de continuidad para apoyar esta idea (se ha empleado un patrón gris, distinto del fondo blanco de la hoja, para reforzar la idea de que estamos escribiendo sobre un papel del que sólo vemos un trozo).

Ley de simetría

Literalmente dice “Las imágenes simétricas son percibidas como iguales, como un solo elemento, en la distancia”. Esta es otra ley más aplicable al diseño puro y duro que a la usabilidad, pero sí que podemos tomar una lección: si no puedes usar grupos, utiliza la simetría. Si no nos cabe todo a un lado, podemos usar el lado opuesto… que parecerá que se refieren a lo mismo. Lo mejor es fijarse en una herramienta con muchos “toolbox” como Visual Studio. Todos los toolbox no cabrían en uno de los dos lados de la pantalla… colocando áreas de toolbox a la izquierda y a la derecha, se ha aumentado el espacio disponible para herramientas. Como las áreas de herramientas son simétricas, se perciben como iguales (se ve como natural que ámbas áreas contengan lo mismo, cuando en realidad no constituyen un grupo).

Ley de comunidad

“Muchos elementos moviéndose en la misma dirección son percibidos como un único elemento”. De nuevo esta ley es más aplicable al diseño que a la usabilidad. Yo esta ley no la aplicaría, porque el movimiento dentro de un formulario Windows es algo que debería evitarse. Sin embago, también tiene su aplicación en los controles “Marquee” o marquesina. El típico control que muestra información bursátil. Se muestra mucha información en poco espacio, y además la información se percibe como un “todo”.

Conclusión

Fíjate mucho en los programas de los demás, y fíjate en los patrones que siguen. Suelen estár ahí por algo… y aunque muchas veces creemos que en el diseño de un formulario prima la estética, lo cierto del caso es que se suelen tener en cuenta factores psicológicos que a cualquiera de nosotros (humildes programadores) se nos escapan. Trata de convencer a tus jefes de lo importante que es contratar a un experto en usabilidad, y si no te queda más remedio que tomar tú mismo las decisiones, innova todo lo que quieras, pero en áreas distintas a la interfaz de usuario. Revisa las guias de diseño de Windows, y recuerda… “inspirarse” en un programa conocido suele ser una buena idea: ¿por qué crees que todos los navegadores web se parecen al veterano Mosaic?

Un comentario en “La estética también tiene leyes”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *