{"id":15243,"date":"2020-12-15T14:01:46","date_gmt":"2020-12-15T12:01:46","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/mapatge-natural\/"},"modified":"2021-01-27T21:31:24","modified_gmt":"2021-01-27T19:31:24","slug":"mapeo-natural","status":"publish","type":"post","link":"http:\/\/design-toolkit-test.uoc.edu\/es\/mapeo-natural\/","title":{"rendered":"Mapeo natural"},"content":{"rendered":"

\u00bfQu\u00e9 es?<\/h2>\n

El mapeo<\/em> es un t\u00e9rmino t\u00e9cnico procedente del \u00e1mbito de las matem\u00e1ticas, cuyo significado es la relaci\u00f3n entre los elementos de dos conjuntos diferentes. Seg\u00fan Donald Norman, la relaci\u00f3n entre un elemento interactivo y sus acciones es m\u00e1s f\u00e1cil de entender si existe un mapeo natural, o relaci\u00f3n constante y previsible entre elementos interactivos, acciones y resultados.<\/p>\n

Muchas veces, la carencia de un mapeo natural se suple con recursos como pueden ser etiquetas o instrucciones, que tratan de aportar informaci\u00f3n complementaria sobre la capacidad de interacci\u00f3n y el estado actual de un sistema. Sin embargo, un mapeo natural apropiado no requiere de elementos complementarios.<\/p>\n

En muchas ocasiones, el problema radica en la simplificaci\u00f3n excesiva de la interfaz, especialmente cuando el dise\u00f1o visualmente atractivo se antepone al mapeo natural, como ocurre con el objeto de la figura 1. Esto puede conllevar que el usuario no sea capaz de relacionar los controles con el resultado deseado (en el caso del ejemplo, algo tan sencillo como obtener agua del grifo).<\/p>\n

\"\"

Figura 1. Grifo minimalista con sensor
Fuente: Flickr.<\/p><\/div>\n

No debemos obviar las convenciones socioculturales, que tienen un impacto importante en el mapeo natural. Ejemplos de ello son la direcci\u00f3n del sistema de lectura y escritura (de derecha a izquierda o viceversa) o la percepci\u00f3n de que las acciones de incrementar o reducir se asocian a un eje vertical (como puede ser en un control de volumen).<\/p>\n

Se pueden distinguir tres niveles de mapeo:<\/p>\n

    \n
  1. Mejor mapeo<\/strong>: los controles se disponen directamente en el elemento que se controlar\u00e1 (por ejemplo, los controles de ventilaci\u00f3n de un salpicadero de un veh\u00edculo).<\/li>\n
  2. Segundo mejor mapeo<\/strong>: los controles est\u00e1n lo m\u00e1s cerca posible del objeto a ser controlado (por ejemplo, los controles de ajuste el\u00e9ctrico de un retrovisor de un veh\u00edculo).<\/li>\n
  3. Tercer mejor mapeo<\/strong>: los controles se incluyen en el mismo entorno espacial que los objetos a controlar (por ejemplo, los controles de ajuste de los elevalunas de un veh\u00edculo).<\/li>\n<\/ol>\n

    Aplicaci\u00f3n<\/h2>\n

    El mapeo natural<\/strong> ha tenido siempre gran importancia e impacto en dise\u00f1o de producto y dise\u00f1o industrial, y actualmente tiene gran relevancia en el dise\u00f1o de productos digitales. El mapeo natural se puede aplicar al dise\u00f1o de un objeto \u2013como una cocina el\u00e9ctrica\u2013 o a un entorno digital, como un sitio web o un videojuego. En el \u00e1mbito de los videojuegos cobra gran relevancia, ya que mediante el dise\u00f1o de controles mapeados de forma natural se logra una mayor inmersi\u00f3n por parte de los jugadores.<\/p>\n

    Cuando el usuario es capaz llevar a cabo una tarea con facilidad y sin informaci\u00f3n adicional, el mapeo natural se considera positivo (figura 2). El mapeo natural eficiente orienta sobre c\u00f3mo usar un objeto, sin necesidad de informaci\u00f3n adicional. En el ejemplo del control de volumen de la figura 2, si desplazamos hacia arriba el control (slider<\/em>) es porque esperamos que suba el volumen, y no que baje.<\/p>\n

    \"\"

    Figura 2. Control del volumen en el sistema operativo Windows
    Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n

    Por el contrario, un mapeo natural deficiente se evidencia cuando un control no se relaciona visualmente o simb\u00f3licamente con el objeto al que afecta, de manera que los usuarios no entender\u00e1n de manera inmediata la relaci\u00f3n. Por lo tanto, ignorar el mapeo natural puede agregar una carga cognitiva significativa al usuario, al que le ser\u00e1 m\u00e1s dif\u00edcil procesar la informaci\u00f3n (figura 3).<\/p>\n

    \"\"

    Figura 3. Cocina el\u00e9ctrica
    Fuente: Wikimedia.<\/p><\/div>\n

    Cuando el resultado de la acci\u00f3n no es el que espera el usuario, se produce una brecha de evaluaci\u00f3n, lo que evidencia un problema de usabilidad. En el peor de los casos puede conllevar accidentalmente alguna acci\u00f3n no deseada. En el caso concreto de la cocina el\u00e9ctrica (figura 3), un usuario no sabr\u00eda de antemano qu\u00e9 control corresponde a cada fuego, lo que puede llevar a confusi\u00f3n y a producir una quemadura si se produce un contacto f\u00edsico. Se trata de un comportamiento nada deseable que no contribuir\u00e1 en ning\u00fan caso a la satisfacci\u00f3n del usuario. Para evitar este efecto es necesario que, como dise\u00f1adores, tengamos en cuenta los siguientes aspectos:<\/p>\n

      \n
    • Las etiquetas son importantes y a menudo necesarias, pero hay que evitar depender de ellas. El uso apropiado de mapeos naturales puede minimizar su necesidad.<\/li>\n
    • Los controles colocados arbitrariamente pueden frustrar al usuario inexperto, ya que tendr\u00e1 que dedicar un tiempo a familiarizarse con ellos para un uso correcto. Los controles deben agruparse de acuerdo con sus relaciones funcionales.<\/li>\n
    • Evitar un dise\u00f1o excesivamente simplificado, que puede conllevar un grave problema de usabilidad (como el ejemplo inicial del grifo), aunque un dise\u00f1o sobrecargado resulta tambi\u00e9n contraproducente. Se debe encontrar el punto de simplicidad id\u00f3neo.<\/li>\n
    • Emplear met\u00e1foras que resulten familiares y reconocibles para los usuarios, por ejemplo, a trav\u00e9s de la manipulaci\u00f3n directa (representaci\u00f3n natural de los objetos y de las acciones, que promueve la sensaci\u00f3n en los usuarios de que realizan una tarea por ellos mismos y no a trav\u00e9s de un mecanismo intermedio).<\/li>\n<\/ul>\n

      Ejemplos<\/h2>\n

      A continuaci\u00f3n, se presentan un conjunto de ejemplos de dispositivos f\u00edsicos y entornos digitales que destacan por presentar buen mapeo natural.<\/p>\n

      Productos f\u00edsicos<\/strong><\/p>\n

        \n
      • Cocina<\/strong>: en la vitrocer\u00e1mica de la figura 4, los controles se incluyen en la superficie hexagonal correspondiente a cada fuente de calor. Por lo tanto, es posible identificar de manera intuitiva cu\u00e1l es el control que corresponde a cada fuego.<\/li>\n<\/ul>\n
        \"\"

        Figura 4.\u00a0 Moderna placa vitrocer\u00e1mica
        Fuente: ladecoracion.es.<\/p><\/div>\n

          \n
        • Inodoros<\/strong>: muchos ba\u00f1os incluyen inodoros con mecanismos de doble vaciado, que permiten descargar m\u00e1s o menos agua seg\u00fan la necesidad del usuario. Para ello, com\u00fanmente se muestran dos controles de distinto tama\u00f1o (figura 5), que permiten que el usuario intuya f\u00e1cilmente cu\u00e1l corresponde a un vaciado mayor o menor de agua.<\/li>\n<\/ul>\n
          \"\"

          Figura 5. Pulsador doble de descarga en WC
          Fuente: ebay.com.<\/p><\/div>\n

            \n
          • Asiento de veh\u00edculo<\/strong>: en los controles de la figura 6, la reproducci\u00f3n en miniatura del asiento permite al usuario identificar con claridad los elementos para mover el asiento real, utilizando los controles a modo de joystick<\/em>. Adem\u00e1s, el usuario que ocupa el asiento obtiene feedback<\/em> inmediato del uso de los controles.<\/li>\n<\/ul>\n
            \"\"

            Figura 6. Ajuste de asiento de veh\u00edculo
            Fuente: Diogo Gon\u00e7alves – psychologytoday.com.<\/p><\/div>\n

            Entornos digitales<\/strong><\/p>\n

              \n
            • Carrusel de fotos<\/strong>: el carrusel de fotos de MacOS (figura 7) incorpora elementos para avanzar y retroceder en el orden de las im\u00e1genes, as\u00ed como una barra de estado en la que cada punto (estado) proporciona retroacci\u00f3n del nombre y la ubicaci\u00f3n del usuario respecto a la pila de fotos.<\/li>\n<\/ul>\n
              \"\"

              Figura 7. Carrusel de fotos de MacOS
              Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n

                \n
              • Acorde\u00f3n (collapse and expand<\/em>)<\/strong>: el comportamiento de las funciones de plegado y desplegado en un entorno web es un buen ejemplo de mapeo natural. Como se puede comprobar en la figura 8, la secci\u00f3n plegada presenta un control (+) que la expande y muestra m\u00e1s contenido; el control (\u2013) act\u00faa a la inversa. No es necesario definir expl\u00edcitamente los controles para que el usuario obtenga una comprensi\u00f3n r\u00e1pida de su funci\u00f3n.<\/li>\n<\/ul>\n
                \"\"

                Figura 8. Sitio web demo
                Fuente: Bootstrap.<\/p><\/div>\n

                  \n
                • Rutas<\/strong>: en las rutas de transporte p\u00fablico, en ocasiones se deben realizar una o varias conexiones para llegar a un destino determinado. El mapeo natural de Google Maps (figura 9) muestra los resultados en el orden cronol\u00f3gico de partida, los transbordos entre diferentes medios de transporte, as\u00ed como el tiempo que se deber\u00e1 hacer a pie. A la hora de planificar un viaje, el usuario dispone de controles de claros donde se presenta lo que ocurrir\u00e1 en cada momento durante el tiempo de desplazamiento.<\/li>\n<\/ul>\n
                  \"\"

                  Figura 9. Ruta con Google Maps
                  Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n

                  Refe<\/strong>rencias<\/h2>\n

                  McEwan, M. W.; Blackler, A. L.; Johnson, D. M.; Wyeth, P. A.<\/strong> (2014). \u00abNatural mapping and intuitive interaction in video games\u00bb. Proceedings of the first ACM SIGCHI annual symposium on Computer-human interaction in play<\/em> (p\u00e1gs. 191-200). ACM.<\/p>\n

                  Norman, D. A.<\/strong> (1988). The Psychology of Everyday Things<\/em>. Nueva York: Basic Books.<\/p>\n

                  Norman, D. A.<\/strong> (2013). The Design of Everyday Things: Revised and Expanded Edition<\/em>. Nueva York: Basic Books.<\/p>\n

                  Wellington, R.<\/strong> (2016). \u00abMarshall McLuhan, Affordance, Mapping, and Human Computer Interaction in Interactive Media\u00bb. En: A. Lugmayr; E. Stojmenova; K. Stanoevska; R. Wellington (eds.). Information Systems and Management in Media and Entertainment Industries. International Series on Computer Entertainment and Media Technology<\/em>. Springer International Publishing.<\/p>\n","protected":false},"excerpt":{"rendered":"

                  \u00bfQu\u00e9 es? El mapeo es un t\u00e9rmino t\u00e9cnico procedente del \u00e1mbito de las matem\u00e1ticas, cuyo significado es la relaci\u00f3n entre los elementos de dos conjuntos diferentes. Seg\u00fan Donald Norman, la relaci\u00f3n entre un elemento interactivo y sus acciones es m\u00e1s f\u00e1cil de entender si existe un mapeo natural, o relaci\u00f3n constante y previsible entre elementos […]<\/p>\n","protected":false},"author":4,"featured_media":18199,"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\/15243\/"}],"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=15243"}],"version-history":[{"count":5,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15243\/revisions\/"}],"predecessor-version":[{"id":17626,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15243\/revisions\/17626\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18199\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=15243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=15243"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=15243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}