Este concepto apareci\u00f3 por primera vez en el libro The Nature of Explanation<\/em>, de Kenneth Craik, en 1943, para referirse a las \u00abrepresentaciones\u00bb que explican los pensamientos y comportamientos de una persona. El autor mencionaba que la mente desarrolla modelos que le sirven como referencia y explicaci\u00f3n para tomar una decisi\u00f3n en diferentes situaciones de la vida.<\/p>\n Los modelos mentales se enmarcan dentro del conjunto de lo que se conoce como representaciones mentales<\/strong>. Estas se definen como procesos utilizados para representar internamente el mundo exterior, tal como lo perciben los sistemas sensoriales. En filosof\u00eda contempor\u00e1nea, espec\u00edficamente en los campos de la metaf\u00edsica, la filosof\u00eda de la mente y la ontolog\u00eda, una representaci\u00f3n mental es una de las formas predominantes para explicar y describir la naturaleza de ideas y conceptos.<\/p>\n Las representaciones, ya sean mentales o de otro tipo, son sistemas definidos por s\u00edmbolos, y el ser humano las utiliza para procesar la informaci\u00f3n que le llega del mundo exterior e interactuar con ella. Al mismo tiempo, permiten representar elementos que nunca se han experimentado o que no existen. La figura 1 muestra un ejemplo t\u00edpico de c\u00f3mo representamos mentalmente la informaci\u00f3n.<\/p>\n Figura 1. Ejemplo de representaci\u00f3n mental Las representaciones mentales pueden ser de tres tipos:<\/p>\n En su libro Mental Models: Aligning Design Strategy with Human Behavior<\/em>, Young ejemplifica el proceso de modelo mental aplic\u00e1ndolo a una ma\u00f1ana cualquiera de una persona que se dirige al trabajo o escuela. Define los diferentes espacios mentales dedicados a tareas como vestirse, desayunar, ducharse, coger el tren, etc., as\u00ed como las subtareas asociadas. Posteriormente, define caracter\u00edsticas de cada subtarea, elaborando as\u00ed un mapa mental completo con las valoraciones y compatibilidades que permiten escoger las opciones m\u00e1s adecuadas para un contexto determinado (figura 2).<\/p>\n Figura 2. Modelo mental de una ma\u00f1ana cualquiera El concepto de modelo mental tiene aplicaci\u00f3n en diferentes campos de estudio como la psicolog\u00eda, los negocios, la tecnolog\u00eda, etc. Las personas utilizan estos modelos mentales para dar sentido a la realidad. El conocimiento pr\u00e1ctico y te\u00f3rico de cada persona se refleja en estos modelos, que le permiten entender mejor lo que est\u00e1 pasando a su alrededor, y los aplica diariamente en el razonamiento y toma de decisiones.<\/p>\n En la vida diaria utilizamos los modelos mentales porque permiten describir, comprender, explicar, predecir y anticipar el comportamiento de un sistema. El usuario construye un modelo mental al acceder, por ejemplo, a un sitio web. Este modelo depender\u00e1 no solo de las caracter\u00edsticas del sitio web, sino tambi\u00e9n de los objetivos del propio usuario, sus experiencias anteriores, la navegaci\u00f3n que realiza dentro del sitio o su nivel de competencia digital.<\/p>\n Un buen dise\u00f1ador debe conocer diferentes modelos mentales de los usuarios para que sus productos comuniquen adecuadamente su funci\u00f3n. Al mismo tiempo, estos modelos mentales no son est\u00e1ticos, sino que son capaces de evolucionar en funci\u00f3n del uso de otros productos, de la interacci\u00f3n con otros usuarios o del aprendizaje realizado.<\/p>\n Tradicionalmente, los modelos mentales se han utilizado para estudiar la interacci\u00f3n persona-ordenador. A medida que un usuario interacciona, construye un modelo mental, que utiliza para interpretar el funcionamiento del sistema. Este proceso es extensible a todos los \u00e1mbitos que exijan a una persona procesar la informaci\u00f3n que le llega del mundo exterior e interactuar con ella, desde una aplicaci\u00f3n m\u00f3vil a una tarta de chocolate.<\/p>\n As\u00ed, se podr\u00eda llegar a evaluar la usabilidad de un sitio web pregunt\u00e1ndose si permite construir un modelo mental adaptado a su utilizaci\u00f3n. Este modelo ser\u00e1 simple al principio e ir\u00e1 enriqueci\u00e9ndose de forma gradual. Por otro lado, un modelo mental err\u00f3neo conducir\u00e1 a errores. Por ejemplo, para girar con un coche, el modelo mental seguramente indicar\u00eda que hace falta girar el volante hacia la direcci\u00f3n deseada. No es necesario conocer principios mec\u00e1nicos, aunque aplicar el mismo principio con una motocicleta puede provocar un accidente (para girar es necesario inclinarse hacia el centro de la curva).<\/p>\n En el \u00e1mbito de dise\u00f1o de interfaces, el modelo mental est\u00e1 relacionado con la visibilidad y el affordance<\/em>, los cuales ayudar\u00e1n a un usuario a llevar a cabo una tarea sin ning\u00fan conocimiento previo del sistema. La visibilidad permite darse cuenta r\u00e1pidamente de las posibilidades de un elemento, mientras que el affordance<\/em> define las propiedades de los objetos que tienen un valor \u00fatil para el usuario y determinan c\u00f3mo se puede utilizar. El usuario utiliza el affordance<\/em> para construir un modelo y hacer una representaci\u00f3n mental de la realidad.<\/p>\n En el \u00e1mbito del dise\u00f1o, los modelos mentales pueden ayudar a los dise\u00f1adores a comprender y analizar un problema de dise\u00f1o de interacci\u00f3n. Frecuentemente, las personas tienen problemas al interactuar con un producto porque su modelo mental es diferente al modelo mental del dise\u00f1ador. Como todas las personas perciben el mundo de forma individual, todos los usuarios generan modelos mentales individuales.<\/p>\n El desaf\u00edo no es \u00fanicamente garantizar que los dise\u00f1adores creen un producto teniendo en cuenta el modelo mental de los usuarios del entorno, sino que se ha de tener en cuenta que los modelos mentales tienden a diferir entre diferentes pa\u00edses y culturas. En el Reino Unido, por ejemplo, el freno delantero de una bicicleta se ubica en el manillar derecho (tanto por razones de expectativa como de legalidad); sin embargo, es diferente en el resto de Europa.<\/p>\n En la red encontramos otros ejemplos an\u00e1logos, como por ejemplo la p\u00e1gina de inicio de Facebook. En las im\u00e1genes siguientes se puede comprobar la versi\u00f3n de Medio Oriente y la espa\u00f1ola (figura 3). Las personas en Medio Oriente escriben de derecha a izquierda, mientras que en otros pa\u00edses se escribe de izquierda a derecha. Los dise\u00f1adores deben entender estas diferencias para poder desarrollar una aplicaci\u00f3n usable a escala global.<\/p>\n Figura 3. Comparativa login<\/em> Facebook Otros ejemplos pueden estar basados en los principios fundamentales de la percepci\u00f3n que define la psicolog\u00eda de la Gestalt, como los principios de proximidad, semejanza, direcci\u00f3n com\u00fan, continuidad o simetr\u00eda, entre otros. A continuaci\u00f3n, se muestran algunos ejemplos.<\/p>\n Proximidad<\/strong><\/p>\n La ley de proximidad enuncia que los elementos pr\u00f3ximos entre s\u00ed y distanciados del resto son percibidos como conjunto. En la figura 4, tendemos a ver un gran grupo de puntos a la izquierda, y tres grupos m\u00e1s peque\u00f1os a continuaci\u00f3n, debido al espacio que hay entre ellos.<\/p>\n Figura 4. Principio de proximidad seg\u00fan las leyes de la Gestalt En la figura 5 se presenta un ejemplo de proximidad aplicada correctamente. Corresponde al acceso a una web en la que se pueden apreciar tres entidades principales separadas: los campos de entrada forman una entidad, el t\u00edtulo y texto otra, y el inicio de sesi\u00f3n otra.<\/p>\n Figura 5. Principio de proximidad aplicado a una interfaz Semejanza<\/strong><\/p>\n La ley de semejanza enuncia que los elementos que comparten caracter\u00edsticas visuales (forma, color, tama\u00f1o, orientaci\u00f3n, textura) tienden a ser agrupados perceptualmente. Las formas y colores que son distintos entre s\u00ed se perciben como una entidad separada, tal y como se comprueba en la figura 6.<\/p>\n Figura 6. Principio de semejanza seg\u00fan la Gestalt Recuperando el ejemplo de la p\u00e1gina de inicio de Facebook, entendemos que todo lo que est\u00e1 compuesto por un texto azul es un hiperv\u00ednculo de ayuda que abrir\u00e1 una nueva pesta\u00f1a del navegador, por lo que todos los ejemplos de este estilo de texto se perciben como la misma entidad y, a su vez, son diferentes de otras entidades en la misma p\u00e1gina (figura 7).<\/p>\n Figura 7. Ejemplo de principio de semejanza Continuidad<\/strong><\/p>\n La ley de continuidad afirma que la atenci\u00f3n visual tiende a seguir instintivamente la direcci\u00f3n espacial de los elementos. Cuanto m\u00e1s suaves sean los cambios de direcci\u00f3n, los elementos ser\u00e1n m\u00e1s f\u00e1cilmente percibidos y agrupados. El principio de continuidad concluye que el ojo humano sigue l\u00edneas, curvas o una secuencia de formas para determinar la relaci\u00f3n entre elementos. El uso m\u00e1s com\u00fan hoy en d\u00eda son los conocidos sliders<\/em>, que se basan en crear un efecto de transici\u00f3n entre im\u00e1genes y que tienen varias aplicaciones, como por ejemplo en el cat\u00e1logo de pel\u00edculas o series de servicios streaming<\/em> como Netflix (figura 8).<\/p>\n Figura 8. Ejemplo de principio de continuidad Regi\u00f3n com\u00fan<\/strong><\/p>\n La ley de regi\u00f3n com\u00fan enuncia que los elementos ubicados dentro de una regi\u00f3n cerrada son percibidos como agrupados. Agregar bordes u otras barreras visibles es una manera de crear una separaci\u00f3n perceptible entre grupos de objetos, incluso si tienen la misma proximidad, forma, color, etc. Podemos comprobar este principio en el mando a distancia de la figura 9, en el que se definen claramente diferentes conjuntos de botones, agrupados por funciones relacionadas.<\/p>\n Figura 9. Ejemplo de principio de regi\u00f3n com\u00fan Cierre<\/strong><\/p>\n Seg\u00fan el principio de cierre, la mente tiende a completar formas inacabadas. El logotipo de la cadena de hipermercados representado en la figura 10 ejemplifica claramente esta ley: como se puede observar, incluye una \u00abC\u00bb inacabada que el espectador comprende a la perfecci\u00f3n.<\/p>\n Figura 10. Ejemplo de principio de cierre Simetr\u00eda<\/strong><\/p>\n Seg\u00fan esta ley, las formas asim\u00e9tricas o incompletas son percibidas con m\u00e1s dificultad. Los elementos sim\u00e9tricos son simples, transmiten armon\u00eda y son visualmente agradables. Un ejemplo lo podemos ver en el dise\u00f1o de los dos ratones de la figura 11.<\/p>\n Figura 11. Ejemplo de simetr\u00eda y de asimetr\u00eda Destino com\u00fan<\/strong><\/p>\n Cuando unos elementos se mueven juntos en la misma direcci\u00f3n, los percibimos como parte de un solo grupo. Independientemente de lo separados que est\u00e9n los elementos o cu\u00e1n diferentes puedan parecer, si se mueven o cambian juntos, los percibimos como relacionados. Este principio es m\u00e1s evidente cuando los elementos se mueven de forma sincronizada en la misma direcci\u00f3n, al mismo tiempo y velocidad. En una escalera mec\u00e1nica como la de la figura 12, cada uno de los escalones (piezas independientes) se mueve en la misma direcci\u00f3n, por lo que el usuario los agrupa como si fueran un \u00fanico elemento indivisible.<\/p>\n Figura 12. Ejemplo de principio de destino com\u00fan Conexi\u00f3n<\/strong><\/p>\n Los elementos conectados por otros elementos (por ejemplo, a trav\u00e9s de l\u00edneas) son percibidos como unidad. La conexi\u00f3n nos hace percibir grupos, en lugar de cosas individuales no relacionadas. Por ejemplo, el engranaje de un motor est\u00e1 formado por piezas independientes, pero al estar interconectadas entre s\u00ed se perciben como un conjunto coherente.<\/p>\n Figura 13. Ejemplo de principio de conexi\u00f3n Ley de Pr\u00e4gnanz (o de simplicidad)<\/strong><\/p>\n Esta ley indica que nuestra mente percibe todo en su forma m\u00e1s simple. El ser humano tiende a interpretar im\u00e1genes ambiguas como simples y completas, en vez de como complejas e incompletas. B\u00e1sicamente, la simplicidad consiste en ayudar al ojo a encontrar figuras \u00abc\u00f3modas\u00bb, utilizadas para desencadenar una interpretaci\u00f3n de lo que estamos tratando de mostrar. Un ejemplo es el caso del logotipo de Unilever, el cual se compone de un conjunto de elementos individuales que tienen significado si se analizan por separado, si bien nuestra mente lo interpreta inicialmente como una simple \u00abU\u00bb.<\/p>\n Figura 12. Ejemplo de principio de ley de Pr\u00e4gnanz Craik, K. J. W.<\/strong> (1943). The nature of explanation<\/em>. University Press.<\/p>\n Johnson-Laird, P. N.<\/strong> (2010). \u00abMental models and human reasoning\u00bb. Proceedings of the National Academy of Sciences<\/em> (vol. 43, n\u00fam. 107, p\u00e1gs. 18.243-18.250).<\/p>\n Lidwell, W.; Holden, K.; Butler, J.<\/strong> (2010). Universal principles of design, revised and updated: 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design<\/em>. Rockport Pub.<\/p>\n Young, I.<\/strong> (2008). Mental Models: Aligning Design Strategy with Human Behavior<\/em>. Nueva York: Rosenfeld Media.<\/p>\n","protected":false},"excerpt":{"rendered":" \u00bfQu\u00e9 es? Modelo mental es un t\u00e9rmino utilizado com\u00fanmente en psicolog\u00eda. Seg\u00fan Donald Norman, hace referencia a nuestros modelos conceptuales acerca de co\u0301mo funcionan los objetos, co\u0301mo tienen lugar los hechos o co\u0301mo se comporta la gente, y son resultado de nuestra necesidad de formar explicaciones de las cosas. Estos modelos son esenciales para comprender […]<\/p>\n","protected":false},"author":4,"featured_media":18205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28,27],"tags":[],"_links":{"self":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15236\/"}],"collection":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/users\/4\/"}],"replies":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/comments\/?post=15236"}],"version-history":[{"count":8,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15236\/revisions\/"}],"predecessor-version":[{"id":17630,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15236\/revisions\/17630\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18205\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=15236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=15236"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=15236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"\/wp-content\/uploads\/2021\/01\/75590_36.jpg\")
Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n\n
![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_37.jpg\")
Fuente: Flickr.<\/p><\/div>\nAplicaci\u00f3n<\/h2>\n
Ejemplos<\/h2>\n
![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_38.jpg\")
Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_39-300x119-1.jpg\")
Fuente: Wikipedia.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_40.jpg\")
Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_41-300x295-1.jpg\")
Fuente: Wikipedia.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_42.jpg\")
Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_43.jpg\")
Fuente: Flickr.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_44.jpg\")
Fuente: pxhere.com.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_45-300x68-1.jpg\")
Fuente: carrefour.com.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_46.jpg\")
Fuente: Flickr.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_47.jpg\")
Fuente: Wikimedia.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_48.jpg\")
Fuente: Wikimedia.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_49.jpg\")
Fuente: unilever.es.<\/p><\/div>\nReferencias<\/h2>\n