SlideShare ist ein Scribd-Unternehmen logo
1 von 45
Downloaden Sie, um offline zu lesen
http://shererom.no-ip.org/memoria/Bibliografia/Adicional/Otros/

Interacción persona-ordenador
Metáforas
Objetivos

 Aprender qué es una metáfora
 Conocer qué son las metáforas verbales, visuales y
                                verbales
  globales
 Conocer la metáfora del escritorio y su historia
 Ver el uso de las metáforas en las interfaces actuales
 Discutir l problemas y l ventajas d su uso
           los  bl       las        de
 Aprender cómo diseñar y aplicar las metáforas con
  efectividad
   f      d d
Contenido

 Metáforas
 Metáforas verbales
 Metáforas visuales
 Metáfora del escritorio
     áf    d l
 Metodología de creación de metáforas
 Diseño de metáforas
 Ejemplos de metáforas
   j  p
Metáforas

 Utilizamos metáforas para comunicar conceptos
  abstractos de una forma familiar y accesible
 Las metáforas tienen un papel dominante en el diseño
  de las interfaces actuales
 L metáfora del escritorio introducida por el ordenador
  La     táf    d l    it i i t d id         l d     d
  Macintosh y de uso generalizado actualmente supuso
  un cambio en la usabilidad de los ordenadores
 El uso de metáforas ayuda a los desarrolladores a
  construir programas que puedan ser usados por
  comunidades d usuarios más diversas
          id d de        i    á di
Metáforas verbales

 Metáfora:
  Figura retórica que consiste en usar una palabra o frase en un
   sentido distinto del que tiene pero manteniendo con éste una
   relación de analogía o semejanza
 Ejemplo:
  “cabellos de oro” por “cabellos rubios”
 Las metáforas son una parte integrante del lenguaje y
  aparecen en las conversaciones cotidianas
   Tiempo (abstracto) -> ahorrar, gastar, desaprovechar (dinero)
   Ideas (abstracto) -> defender, atacar, retirar (conceptos bélicos)
   Navegar, explorar, visitar, inmersión, web, red, mapa, página,
    home, ancla, bookmark, etc.
Metáforas verbales
      Ejemplo

 Cuando nos encontramos con una nueva herramienta
  tecnológica tendemos a compararla con alguna cosa
         g                  p             g
  conocida
Metáforas verbales
       Ejemplo

 Los conocimientos sobre los elementos y relaciones en
  un dominio familiar se traspasan a los elementos y
                             p
  relaciones en otro no familiar


                            retorno



                             teclas



                     barra esp.
Metáforas verbales
       Ventajas y limitaciones

 Ventajas: basándonos en el conocimiento previo
  p
  podemos desarrollar más rápidamente el
                            p
  conocimiento del nuevo dominio
  Presionar una tecla significa ver un carácter visualizado en la
   pantalla
      t ll
 Limitaciones: existen diferencias
  La tecla de retorno mueve el carro físicamente mientras que
   en el ordenador se borra el carácter
  No obstante, una vez asimiladas estas diferencias el usuario
   construye un nuevo modelo mental

   Conclusión: las metáforas verbales pueden ser muy útiles para
   ayudar a los usuarios a iniciarse en el uso de un nuevo sistema
Metáforas visuales

 Metáfora visual:
  Es una imagen que nos permite representar alguna cosa de
              g   q       p         p           g
   tal manera que el usuario puede reconocer lo que representa
   y por extensión comprender su propósito
 La metáfora puede variar desde pequeñas imágenes
  hasta pantallas completas
Metáforas visuales
Ejemplo
Metáforas visuales
       Orígenes

Xerox, primera metáfora visual
  Xerox Star interfaz visual basada en la oficina física
           Star,
  La base consistió en crear objetos electrónicos simulando los
   objetos físicos de una oficina: papel,
   carpetas, bandejas, archivadores
         t    b d j         hi d
  La metáfora de organización global que
   se presentaba en la p
      p                 pantalla fue la del
   escritorio y se parecía al área de trabajo
   de una típica mesa de oficina
  Los ficheros se transformaron en
   representaciones pictóricas
Metáforas visuales

       Intuición

 Las personas entendemos las metáforas por intuición
  Intuición: cognición inmediata. Conocimiento de una cosa
                 g
   obtenida sin utilizar inferencia o razonamiento
 Comprendemos su significado porque las conectamos
  mentalmente con otros procesos que previamente
       l                                 i
  hemos aprendido
Metáforas visuales

       Intuición
 Las metáforas se basan en asociaciones percibidas
  de manera similar por el diseñador y el usuario
                      p
 Si el usuario no tiene la misma base cultural que el
  desarrollador es fácil que la metáfora falle
Metáforas visuales
       Metáfora global
       M táf     l b l

 La metáfora global es una metáfora que nos da el
  marco para las otras metáforas del sistema
        p
  La metáfora del escritorio se puede considerar como una
   metáfora global
 Es i
     importante que todas l metáforas se i
                      d las     áf       integren
  adecuadamente en la metáfora global
Metáfora global
Ejemplo




Explorando el sistema solar
Metáfora global
Ejemplo




Cuarto de juegos
Metáfora global
Ejemplo




Agenda electrónica
Metáfora del escritorio

 Fue la primera metáfora global
 Está muy extendida
 Reproduce una oficina con
  todos sus objetos
              j
Metáfora del escritorio
       ¿Cómo funciona?

 Las carpetas son contenedores de documentos en el
  mundo real y en el virtual
  Se puede abrir una carpeta para coger o dejar alguna cosa
  Se pueden poner carpetas dentro de carpetas
  Se pueden mover las carpetas por todo el escritorio
 Algunas propiedades físicas están ausentes
  L carpetas no pesan, no hacen ruido cuando se abren
  Las    t                h       id      d      b
 Por otra parte tienen propiedades “mágicas”
  Se puede poner el mismo documento en dos carpetas a la vez
  Se puede reproducir un conjunto de carpetas y sus
   documentos automáticamente
  Se pueden ordenar las carpetas por orden alfabético, etc.
Metáfora del escritorio
   Historia

Steve Jobs            Xerox Star          Xerox PARC
Apple                                     California
                        1981
                                          Alan Kayy



         Lisa                                 Microsoft
         1983


      Macintosh                      XWindows
        1984         Windows 1.0    1984, Athena
                        1985


                     Windows 2 0
                             2.0     XWindows
                        1986       1986, comercial
Metafora del escritorio

       Metáforas compuestas

 La metáfora del escritorio se ha combinado con
  otras metáforas para permitir que los usuarios
                  p     p        q
  puedan realizar un conjunto de tareas más amplio
 Ejemplos:
  La barra de desplazamiento como metáfora del rollo, que es
   un papiro que se desplaza para leer
  Menús y ventanas
  Cortar y pegar, basadas en el diseño de páginas de una
   imprenta
Metafora del escritorio

       El ordenador invisible

 El objetivo final de las metáforas es hacer el
  ordenador invisible para el usuario
                        p
 La metáfora puede llegar a ser transparente al
  usuario y no requerir de él ningún esfuerzo cognitivo
Metodología de creación

 Las metáforas visuales son un aspecto importante
  del diseño de un sistema interactivo y han de
  diseñarse de acuerdo con una metodología
 Fases del diseño de metáforas:


                 Identificación de   Generación   Evaluación
Definición
        ó
                 los problemas       de la        de la
funcional
                 del usuario         metáfora     metáfora
Metodología de creación
       Definición funcional

 Lo primero es entender cómo funciona aquello que se
  va a modelar con la metáfora
  Qué puede hacer el sistema
  Lo que está disponible para el usuario
  Rapidez de respuesta del sistema
 Hay que revisar bien el sistema
  Probar l
  P b el prototipo, si está desarrollado
                t ti   i tá d         ll d
  Revisar la documentación, si no lo está
Metodología de creación
       Identific.
       Identific problemas usuario

 Analizar las dificultades del usuario
 Ver cómo utilizan funcionalidades similares y qué
  problemas tienen
 Explicar lo q
    p         que qqueremos hacer y ver si lo entienden,
                                                       ,
  enseñar el prototipo y ver cómo lo utilizan
Metodología de creación

        Generación de la metáfora

 Examen detallado de la manera tradicional de realizar
  las tareas
   Analizar oficinas, fábricas, escuelas, etc. y observar los
    problemas que tienen los usuarios y las herramientas que
    utilizan para resolverlos
 Una vez identificados los problemas y las
  herramientas que se utilizan, ver cuáles de ellas
  envuelven algunas de las características que los
  usuarios encuentran difíciles de comprender
 Estas son buenas candidatas para metáforas
Metodología de creación

       Evaluación de la metáfora

 Una vez generadas varias metáforas, se evalúan para
  escoger la más adecuada a la funcionalidad
      g
 Puntos para evaluar la utilidad de la metáfora:
  Volumen de la estructura que proporciona
  Aplicabilidad de la estructura. Falsas expectativas
  Representatividad. ¿Fácil de representar?. La metáfora ideal
   tiene representación visual, auditiva y palabras asociadas
                        visual
  Adecuación a la audiencia
  Extensibilidad
Metodología de creación

       Otra versión

 Identificar el tipo de comparación
  Debemos encontrar una relación entre la información familiar
   y la nueva
 Grado de ajuste
  Estudiar el grado de coincidencia y las diferencias que existen
Diseño de metáforas

 Las metáforas pueden conseguir su efectividad a
  través de asociaciones:
  Podemos asociar clases y atributos a objetos familiares
  Podemos asociar procesos y algoritmos a verbos de acción
                   p            g
 Tipos de metáforas:
  De objetos: libro álbum agenda escritorio, biblioteca
               libro, álbum, agenda, escritorio
  De actividades: visita, exploración, viaje
  De lugares: casa plaza museo ciudad isla
               casa, plaza, museo, ciudad,
Diseño de metáforas

        Objetos familiares

 Escritorio
   Dibujos, ficheros, carpetas, papeles, clips, notas de papel
        j ,          ,    p    ,p p     , p ,             p p
 Fotografía
   Álbumes, fotos, portafotos
 Juegos
   Reglas del juego, piezas del juego, tablero de juego
 Contenedores
   Estanterías, cajas, compartimentos
 Ciudades
   Hitos, perfiles, casas
Diseño de metáforas

       Ejercicio

 Objetivo:
  Diseño de un conjunto de metáforas p
                    j                 para la g
                                              gestión de una
   biblioteca de imágenes digitales
 Pasos:
  Escoger los objetos que están implicados
  Asociar un elemento visual a cada objeto
  Escoger los verbos asociados a las acciones que se pueden
   ejecutar
  Construir un elemento visual para cada acción
Diseño de metáforas

       Ejercicio – paso 1

 Escoger los objetos que están implicados:
  Estantería
  Álbum
  Hoja
  Foto
Diseño de metáforas

       Ejercicio – paso 2

 Asociar un elemento visual a cada objeto




 Estantería         Álbum            Hoja    Foto
Diseño de metáforas

       Ejercicio – paso 3

 Escoger los verbos asociados a las acciones que se
  pueden ejecutar
  Crear estantería, álbum, hoja, foto
  Añadir estantería, álbum, hoja, foto
  Borrar estantería álbum, hoja, foto
          estantería, álbum hoja
  Seleccionar álbum, hoja, foto
  Mover álbum, hoja, foto
Diseño de metáforas

        Ejercicio – paso 4

 Construir un elemento visual para cada acción

  Crear/Añadir                        Borrar




  Seleccionar                         Mover
Ejemplos de metáforas

 Objetos y acciones
 Páginas web
Ejemplos
       Papelera

 La papelera es una herramienta habitual en la
  mayoría de las culturas avanzadas
     y
  Sirve para poner todos los papeles u otros elementos que
   no sirven para después tirarlos a la basura
 El símbolo d reciclaje es cada vez más h bi
   l í b l de     i l j       d       á habitual
                                               l
  La papelera permite reciclar los objetos depositados en ella
Ejemplos
       Tijera (Cortar)

 Las tijeras nos dan la funcionalidad de cortar papel,
  tela, etc.
      ,
 La metáfora nos aporta la idea de poder cortar un
  trozo de documento, una parte de un dibujo, etc.
 Su enlace con el portapapeles tiene que ser aprendido
Ejemplos
       Bote de pintura (Pintar)

 El bote de pintura es un objeto muy común y de fácil
  comprensión
      p
 Con el bote de pintura que se vacía queremos hacer
  comprender al usuario que lo que se hace es llenar
  de un color el interior de un determinado objeto
Ejemplos
       Portapapeles

 Esta metáfora pretende cubrir un componente del
  sistema operativo q
            p        que nos p permite p
                                       pasar
  información entre aplicaciones diferentes
 Su uso es fácil de intuir, pero es una metáfora
  pobre: no se puede recoger más de una cosa, no se
  sabe de dónde vienen los documentos y carece de
  historial
 Hay aspectos que no cubre la metáfora y han de ser
  aprendidos
Ejemplos
       Correo electrónico

 El correo es un elemento habitual en nuestra cultura.
  Nos permite enviar información escrita en papel a un
       p                                      p p
  destinatario normalmente lejano
 Esta metáfora se utiliza para el correo electrónico
Ejemplos
Páginas web




www.healthy.net
Ejemplos
Páginas web




www.ncsa.uiuc.edu/Cyberia/Expo
Ejemplos
Páginas web
Conclusiones

 Las metáforas constituyen un elemento fundamental
  de las interfaces actuales
 Hemos expuesto una visión general de su historia y
  algunos ejemplos actuales
 Hemos aprendido algunas ideas sobre cómo diseñar
  metáforas

Weitere ähnliche Inhalte

Was ist angesagt?

Técnicas para la Obtención de Requerimientos
Técnicas para la Obtención de RequerimientosTécnicas para la Obtención de Requerimientos
Técnicas para la Obtención de RequerimientosJuan Carlos Olivares Rojas
 
Cuadro comparativo de Windows, Linux , Adroid
Cuadro comparativo de Windows, Linux , AdroidCuadro comparativo de Windows, Linux , Adroid
Cuadro comparativo de Windows, Linux , AdroidNattisita Giss
 
Gestiona informacion mediante software en linea
Gestiona informacion mediante software en lineaGestiona informacion mediante software en linea
Gestiona informacion mediante software en lineabautister
 
Paradigmas de interacción
Paradigmas de interacciónParadigmas de interacción
Paradigmas de interacciónTensor
 
Principios de diseño para procesos de ETL
Principios de diseño para procesos de ETLPrincipios de diseño para procesos de ETL
Principios de diseño para procesos de ETLSpanishPASSVC
 
Programación orientada a objetos atributos metodos y eventos
Programación orientada a objetos atributos metodos y eventosProgramación orientada a objetos atributos metodos y eventos
Programación orientada a objetos atributos metodos y eventosFelipe Ardila
 
Evolución y clasificación de los lenguajes de programación
Evolución y clasificación de los lenguajes de programaciónEvolución y clasificación de los lenguajes de programación
Evolución y clasificación de los lenguajes de programaciónjuanbryanc
 
Características de las Redes Neuronales
Características de las Redes NeuronalesCaracterísticas de las Redes Neuronales
Características de las Redes NeuronalesESCOM
 
Procesos Ligeros: Hilos o Hebras
Procesos Ligeros: Hilos o HebrasProcesos Ligeros: Hilos o Hebras
Procesos Ligeros: Hilos o HebrasJ M
 

Was ist angesagt? (20)

Ingeniería de usabilidad
Ingeniería de usabilidadIngeniería de usabilidad
Ingeniería de usabilidad
 
Programación concurrente
Programación concurrenteProgramación concurrente
Programación concurrente
 
Código intermedio
Código intermedioCódigo intermedio
Código intermedio
 
Técnicas para la Obtención de Requerimientos
Técnicas para la Obtención de RequerimientosTécnicas para la Obtención de Requerimientos
Técnicas para la Obtención de Requerimientos
 
Cuadro comparativo de Windows, Linux , Adroid
Cuadro comparativo de Windows, Linux , AdroidCuadro comparativo de Windows, Linux , Adroid
Cuadro comparativo de Windows, Linux , Adroid
 
Gestiona informacion mediante software en linea
Gestiona informacion mediante software en lineaGestiona informacion mediante software en linea
Gestiona informacion mediante software en linea
 
Jackson
JacksonJackson
Jackson
 
Informe laboratorio 1
Informe laboratorio 1Informe laboratorio 1
Informe laboratorio 1
 
Gestion de memoria en Linux
Gestion de memoria en LinuxGestion de memoria en Linux
Gestion de memoria en Linux
 
Resumen interfaces
Resumen interfacesResumen interfaces
Resumen interfaces
 
Paradigmas de interacción
Paradigmas de interacciónParadigmas de interacción
Paradigmas de interacción
 
Roles desarrollo del software
Roles desarrollo del softwareRoles desarrollo del software
Roles desarrollo del software
 
evolucion del sistema operativo propietario
evolucion del sistema operativo propietarioevolucion del sistema operativo propietario
evolucion del sistema operativo propietario
 
Principios de diseño para procesos de ETL
Principios de diseño para procesos de ETLPrincipios de diseño para procesos de ETL
Principios de diseño para procesos de ETL
 
¿Qué es WordPress?
¿Qué es WordPress? ¿Qué es WordPress?
¿Qué es WordPress?
 
Programación orientada a objetos atributos metodos y eventos
Programación orientada a objetos atributos metodos y eventosProgramación orientada a objetos atributos metodos y eventos
Programación orientada a objetos atributos metodos y eventos
 
Tutorial de JFLAP
Tutorial de JFLAPTutorial de JFLAP
Tutorial de JFLAP
 
Evolución y clasificación de los lenguajes de programación
Evolución y clasificación de los lenguajes de programaciónEvolución y clasificación de los lenguajes de programación
Evolución y clasificación de los lenguajes de programación
 
Características de las Redes Neuronales
Características de las Redes NeuronalesCaracterísticas de las Redes Neuronales
Características de las Redes Neuronales
 
Procesos Ligeros: Hilos o Hebras
Procesos Ligeros: Hilos o HebrasProcesos Ligeros: Hilos o Hebras
Procesos Ligeros: Hilos o Hebras
 

Ähnlich wie Metafora

C6 metafora diu
C6 metafora diuC6 metafora diu
C6 metafora diuJulio Pari
 
Conceptos y Herramientas de Diseño en Sistemas Interactivos
Conceptos y Herramientas de Diseño en Sistemas InteractivosConceptos y Herramientas de Diseño en Sistemas Interactivos
Conceptos y Herramientas de Diseño en Sistemas InteractivosOmar Sosa-Tzec
 
Diccionario Pictorico Pamela Acevedo
Diccionario Pictorico Pamela Acevedo Diccionario Pictorico Pamela Acevedo
Diccionario Pictorico Pamela Acevedo Pame021096
 
Interfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioInterfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioAntonio Albanés
 
C:\fakepath\necesidades educativas especiales
C:\fakepath\necesidades educativas especialesC:\fakepath\necesidades educativas especiales
C:\fakepath\necesidades educativas especialesnrestrepo14
 
Concept Map Tools
Concept Map ToolsConcept Map Tools
Concept Map ToolsNYM2
 
2.1 Diseño, prototipo y construcción
2.1 Diseño, prototipo y construcción2.1 Diseño, prototipo y construcción
2.1 Diseño, prototipo y construcciónkamui002
 
Listado de conceptos
Listado de conceptosListado de conceptos
Listado de conceptosgemezgz
 
Taller Campus Party 2011: Desarrollo de Aplicaciones con .NET (Sesión 1)
Taller Campus Party 2011: Desarrollo de Aplicaciones con .NET (Sesión 1)Taller Campus Party 2011: Desarrollo de Aplicaciones con .NET (Sesión 1)
Taller Campus Party 2011: Desarrollo de Aplicaciones con .NET (Sesión 1)Avanet
 
C# for Beginners
C# for BeginnersC# for Beginners
C# for BeginnersZaory Zaory
 
Unidad 4
Unidad 4Unidad 4
Unidad 4Carlos
 
Inteligencia Artificial memorias.pptx
Inteligencia Artificial memorias.pptxInteligencia Artificial memorias.pptx
Inteligencia Artificial memorias.pptxCARLOS GARCIA
 
Taller campus party .net
Taller campus party .netTaller campus party .net
Taller campus party .netcampus party
 
Taller campus party
Taller campus partyTaller campus party
Taller campus partycampus party
 

Ähnlich wie Metafora (20)

C6 metafora diu
C6 metafora diuC6 metafora diu
C6 metafora diu
 
03 metafo
03 metafo03 metafo
03 metafo
 
Revista virtual
Revista virtualRevista virtual
Revista virtual
 
Conceptos y Herramientas de Diseño en Sistemas Interactivos
Conceptos y Herramientas de Diseño en Sistemas InteractivosConceptos y Herramientas de Diseño en Sistemas Interactivos
Conceptos y Herramientas de Diseño en Sistemas Interactivos
 
Diccionario Pictorico Pamela Acevedo
Diccionario Pictorico Pamela Acevedo Diccionario Pictorico Pamela Acevedo
Diccionario Pictorico Pamela Acevedo
 
Interfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioInterfaz Gráfica de Usuario
Interfaz Gráfica de Usuario
 
C:\fakepath\necesidades educativas especiales
C:\fakepath\necesidades educativas especialesC:\fakepath\necesidades educativas especiales
C:\fakepath\necesidades educativas especiales
 
Concept Map Tools
Concept Map ToolsConcept Map Tools
Concept Map Tools
 
2.1 Diseño, prototipo y construcción
2.1 Diseño, prototipo y construcción2.1 Diseño, prototipo y construcción
2.1 Diseño, prototipo y construcción
 
Listado de conceptos
Listado de conceptosListado de conceptos
Listado de conceptos
 
Taller Campus Party 2011: Desarrollo de Aplicaciones con .NET (Sesión 1)
Taller Campus Party 2011: Desarrollo de Aplicaciones con .NET (Sesión 1)Taller Campus Party 2011: Desarrollo de Aplicaciones con .NET (Sesión 1)
Taller Campus Party 2011: Desarrollo de Aplicaciones con .NET (Sesión 1)
 
Andrey
AndreyAndrey
Andrey
 
Agüero, Dominguez y Gelmi 2 A- Taller de Nazareth
Agüero, Dominguez y Gelmi  2 A- Taller de NazarethAgüero, Dominguez y Gelmi  2 A- Taller de Nazareth
Agüero, Dominguez y Gelmi 2 A- Taller de Nazareth
 
C# for Beginners
C# for BeginnersC# for Beginners
C# for Beginners
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Inteligencia Artificial memorias.pptx
Inteligencia Artificial memorias.pptxInteligencia Artificial memorias.pptx
Inteligencia Artificial memorias.pptx
 
Tema nº 1
Tema nº 1Tema nº 1
Tema nº 1
 
Tema nº 1
Tema nº 1Tema nº 1
Tema nº 1
 
Taller campus party .net
Taller campus party .netTaller campus party .net
Taller campus party .net
 
Taller campus party
Taller campus partyTaller campus party
Taller campus party
 

Kürzlich hochgeladen

Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...UNACH - Facultad de Arquitectura.
 
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdfMARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdfitssmalexa
 
Diagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxDiagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxHarryArmandoLazaroBa
 
Comandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdfComandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdfjuandavidbello432
 
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresMedición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresKengYoshiIngaOchoa1
 
Arquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfArquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfduf110205
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2dheribertaferrer
 
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfMaterial de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfTpicoAcerosArequipa
 
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdfINSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdfautomatechcv
 
decoración día del idioma, MARIPOSAS Y FESTONES
decoración día del idioma, MARIPOSAS Y FESTONESdecoración día del idioma, MARIPOSAS Y FESTONES
decoración día del idioma, MARIPOSAS Y FESTONESMairaLasso1
 
Diseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaDiseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaJosAntonioFloresQuis
 
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezLa Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezRosibelVictoriaVelas
 
Hospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaHospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaratc070603hmcmrha7
 
Dia mundial de la salud (1).pdf triptico
Dia mundial de la salud (1).pdf tripticoDia mundial de la salud (1).pdf triptico
Dia mundial de la salud (1).pdf tripticoThaisAymeeTacucheBen
 
Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929FiorellaLaura2
 
contaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelocontaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelomabel perez
 
Folleto tríptico turismo en la Ciudad de México simple verde.pdf
Folleto tríptico turismo en la Ciudad de México simple verde.pdfFolleto tríptico turismo en la Ciudad de México simple verde.pdf
Folleto tríptico turismo en la Ciudad de México simple verde.pdfPOLALAGUNADANIELA
 
Clase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxClase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxVanessaPobletePoblet
 
La arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaLa arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaCamilaIsabelaRodrigu
 
PRIS - (2021) - SEMANA 3 - AZUFRE - ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...
PRIS - (2021) - SEMANA 3 - AZUFRE  -  ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...PRIS - (2021) - SEMANA 3 - AZUFRE  -  ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...
PRIS - (2021) - SEMANA 3 - AZUFRE - ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...maria Apellidos
 

Kürzlich hochgeladen (20)

Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
 
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdfMARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
 
Diagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxDiagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptx
 
Comandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdfComandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdf
 
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresMedición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
 
Arquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfArquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdf
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2d
 
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfMaterial de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
 
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdfINSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
 
decoración día del idioma, MARIPOSAS Y FESTONES
decoración día del idioma, MARIPOSAS Y FESTONESdecoración día del idioma, MARIPOSAS Y FESTONES
decoración día del idioma, MARIPOSAS Y FESTONES
 
Diseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaDiseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzada
 
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezLa Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
 
Hospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaHospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyenda
 
Dia mundial de la salud (1).pdf triptico
Dia mundial de la salud (1).pdf tripticoDia mundial de la salud (1).pdf triptico
Dia mundial de la salud (1).pdf triptico
 
Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929
 
contaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelocontaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelo
 
Folleto tríptico turismo en la Ciudad de México simple verde.pdf
Folleto tríptico turismo en la Ciudad de México simple verde.pdfFolleto tríptico turismo en la Ciudad de México simple verde.pdf
Folleto tríptico turismo en la Ciudad de México simple verde.pdf
 
Clase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxClase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptx
 
La arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaLa arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historia
 
PRIS - (2021) - SEMANA 3 - AZUFRE - ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...
PRIS - (2021) - SEMANA 3 - AZUFRE  -  ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...PRIS - (2021) - SEMANA 3 - AZUFRE  -  ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...
PRIS - (2021) - SEMANA 3 - AZUFRE - ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...
 

Metafora

  • 2. Objetivos  Aprender qué es una metáfora  Conocer qué son las metáforas verbales, visuales y verbales globales  Conocer la metáfora del escritorio y su historia  Ver el uso de las metáforas en las interfaces actuales  Discutir l problemas y l ventajas d su uso los bl las de  Aprender cómo diseñar y aplicar las metáforas con efectividad f d d
  • 3. Contenido  Metáforas  Metáforas verbales  Metáforas visuales  Metáfora del escritorio áf d l  Metodología de creación de metáforas  Diseño de metáforas  Ejemplos de metáforas j p
  • 4. Metáforas  Utilizamos metáforas para comunicar conceptos abstractos de una forma familiar y accesible  Las metáforas tienen un papel dominante en el diseño de las interfaces actuales  L metáfora del escritorio introducida por el ordenador La táf d l it i i t d id l d d Macintosh y de uso generalizado actualmente supuso un cambio en la usabilidad de los ordenadores  El uso de metáforas ayuda a los desarrolladores a construir programas que puedan ser usados por comunidades d usuarios más diversas id d de i á di
  • 5. Metáforas verbales  Metáfora: Figura retórica que consiste en usar una palabra o frase en un sentido distinto del que tiene pero manteniendo con éste una relación de analogía o semejanza  Ejemplo: “cabellos de oro” por “cabellos rubios”  Las metáforas son una parte integrante del lenguaje y aparecen en las conversaciones cotidianas  Tiempo (abstracto) -> ahorrar, gastar, desaprovechar (dinero)  Ideas (abstracto) -> defender, atacar, retirar (conceptos bélicos)  Navegar, explorar, visitar, inmersión, web, red, mapa, página, home, ancla, bookmark, etc.
  • 6. Metáforas verbales Ejemplo  Cuando nos encontramos con una nueva herramienta tecnológica tendemos a compararla con alguna cosa g p g conocida
  • 7. Metáforas verbales Ejemplo  Los conocimientos sobre los elementos y relaciones en un dominio familiar se traspasan a los elementos y p relaciones en otro no familiar retorno teclas barra esp.
  • 8. Metáforas verbales Ventajas y limitaciones  Ventajas: basándonos en el conocimiento previo p podemos desarrollar más rápidamente el p conocimiento del nuevo dominio Presionar una tecla significa ver un carácter visualizado en la pantalla t ll  Limitaciones: existen diferencias La tecla de retorno mueve el carro físicamente mientras que en el ordenador se borra el carácter No obstante, una vez asimiladas estas diferencias el usuario construye un nuevo modelo mental Conclusión: las metáforas verbales pueden ser muy útiles para ayudar a los usuarios a iniciarse en el uso de un nuevo sistema
  • 9. Metáforas visuales  Metáfora visual: Es una imagen que nos permite representar alguna cosa de g q p p g tal manera que el usuario puede reconocer lo que representa y por extensión comprender su propósito  La metáfora puede variar desde pequeñas imágenes hasta pantallas completas
  • 11. Metáforas visuales Orígenes Xerox, primera metáfora visual Xerox Star interfaz visual basada en la oficina física Star, La base consistió en crear objetos electrónicos simulando los objetos físicos de una oficina: papel, carpetas, bandejas, archivadores t b d j hi d La metáfora de organización global que se presentaba en la p p pantalla fue la del escritorio y se parecía al área de trabajo de una típica mesa de oficina Los ficheros se transformaron en representaciones pictóricas
  • 12. Metáforas visuales Intuición  Las personas entendemos las metáforas por intuición Intuición: cognición inmediata. Conocimiento de una cosa g obtenida sin utilizar inferencia o razonamiento  Comprendemos su significado porque las conectamos mentalmente con otros procesos que previamente l i hemos aprendido
  • 13. Metáforas visuales Intuición  Las metáforas se basan en asociaciones percibidas de manera similar por el diseñador y el usuario p  Si el usuario no tiene la misma base cultural que el desarrollador es fácil que la metáfora falle
  • 14. Metáforas visuales Metáfora global M táf l b l  La metáfora global es una metáfora que nos da el marco para las otras metáforas del sistema p La metáfora del escritorio se puede considerar como una metáfora global  Es i importante que todas l metáforas se i d las áf integren adecuadamente en la metáfora global
  • 18. Metáfora del escritorio  Fue la primera metáfora global  Está muy extendida  Reproduce una oficina con todos sus objetos j
  • 19. Metáfora del escritorio ¿Cómo funciona?  Las carpetas son contenedores de documentos en el mundo real y en el virtual Se puede abrir una carpeta para coger o dejar alguna cosa Se pueden poner carpetas dentro de carpetas Se pueden mover las carpetas por todo el escritorio  Algunas propiedades físicas están ausentes L carpetas no pesan, no hacen ruido cuando se abren Las t h id d b  Por otra parte tienen propiedades “mágicas” Se puede poner el mismo documento en dos carpetas a la vez Se puede reproducir un conjunto de carpetas y sus documentos automáticamente Se pueden ordenar las carpetas por orden alfabético, etc.
  • 20. Metáfora del escritorio Historia Steve Jobs Xerox Star Xerox PARC Apple California 1981 Alan Kayy Lisa Microsoft 1983 Macintosh XWindows 1984 Windows 1.0 1984, Athena 1985 Windows 2 0 2.0 XWindows 1986 1986, comercial
  • 21. Metafora del escritorio Metáforas compuestas  La metáfora del escritorio se ha combinado con otras metáforas para permitir que los usuarios p p q puedan realizar un conjunto de tareas más amplio  Ejemplos: La barra de desplazamiento como metáfora del rollo, que es un papiro que se desplaza para leer Menús y ventanas Cortar y pegar, basadas en el diseño de páginas de una imprenta
  • 22. Metafora del escritorio El ordenador invisible  El objetivo final de las metáforas es hacer el ordenador invisible para el usuario p  La metáfora puede llegar a ser transparente al usuario y no requerir de él ningún esfuerzo cognitivo
  • 23. Metodología de creación  Las metáforas visuales son un aspecto importante del diseño de un sistema interactivo y han de diseñarse de acuerdo con una metodología  Fases del diseño de metáforas: Identificación de Generación Evaluación Definición ó los problemas de la de la funcional del usuario metáfora metáfora
  • 24. Metodología de creación Definición funcional  Lo primero es entender cómo funciona aquello que se va a modelar con la metáfora Qué puede hacer el sistema Lo que está disponible para el usuario Rapidez de respuesta del sistema  Hay que revisar bien el sistema Probar l P b el prototipo, si está desarrollado t ti i tá d ll d Revisar la documentación, si no lo está
  • 25. Metodología de creación Identific. Identific problemas usuario  Analizar las dificultades del usuario  Ver cómo utilizan funcionalidades similares y qué problemas tienen  Explicar lo q p que qqueremos hacer y ver si lo entienden, , enseñar el prototipo y ver cómo lo utilizan
  • 26. Metodología de creación Generación de la metáfora  Examen detallado de la manera tradicional de realizar las tareas Analizar oficinas, fábricas, escuelas, etc. y observar los problemas que tienen los usuarios y las herramientas que utilizan para resolverlos  Una vez identificados los problemas y las herramientas que se utilizan, ver cuáles de ellas envuelven algunas de las características que los usuarios encuentran difíciles de comprender  Estas son buenas candidatas para metáforas
  • 27. Metodología de creación Evaluación de la metáfora  Una vez generadas varias metáforas, se evalúan para escoger la más adecuada a la funcionalidad g  Puntos para evaluar la utilidad de la metáfora: Volumen de la estructura que proporciona Aplicabilidad de la estructura. Falsas expectativas Representatividad. ¿Fácil de representar?. La metáfora ideal tiene representación visual, auditiva y palabras asociadas visual Adecuación a la audiencia Extensibilidad
  • 28. Metodología de creación Otra versión  Identificar el tipo de comparación Debemos encontrar una relación entre la información familiar y la nueva  Grado de ajuste Estudiar el grado de coincidencia y las diferencias que existen
  • 29. Diseño de metáforas  Las metáforas pueden conseguir su efectividad a través de asociaciones: Podemos asociar clases y atributos a objetos familiares Podemos asociar procesos y algoritmos a verbos de acción p g  Tipos de metáforas: De objetos: libro álbum agenda escritorio, biblioteca libro, álbum, agenda, escritorio De actividades: visita, exploración, viaje De lugares: casa plaza museo ciudad isla casa, plaza, museo, ciudad,
  • 30. Diseño de metáforas Objetos familiares  Escritorio Dibujos, ficheros, carpetas, papeles, clips, notas de papel j , , p ,p p , p , p p  Fotografía Álbumes, fotos, portafotos  Juegos Reglas del juego, piezas del juego, tablero de juego  Contenedores Estanterías, cajas, compartimentos  Ciudades Hitos, perfiles, casas
  • 31. Diseño de metáforas Ejercicio  Objetivo: Diseño de un conjunto de metáforas p j para la g gestión de una biblioteca de imágenes digitales  Pasos: Escoger los objetos que están implicados Asociar un elemento visual a cada objeto Escoger los verbos asociados a las acciones que se pueden ejecutar Construir un elemento visual para cada acción
  • 32. Diseño de metáforas Ejercicio – paso 1  Escoger los objetos que están implicados: Estantería Álbum Hoja Foto
  • 33. Diseño de metáforas Ejercicio – paso 2  Asociar un elemento visual a cada objeto Estantería Álbum Hoja Foto
  • 34. Diseño de metáforas Ejercicio – paso 3  Escoger los verbos asociados a las acciones que se pueden ejecutar Crear estantería, álbum, hoja, foto Añadir estantería, álbum, hoja, foto Borrar estantería álbum, hoja, foto estantería, álbum hoja Seleccionar álbum, hoja, foto Mover álbum, hoja, foto
  • 35. Diseño de metáforas Ejercicio – paso 4  Construir un elemento visual para cada acción Crear/Añadir Borrar Seleccionar Mover
  • 36. Ejemplos de metáforas  Objetos y acciones  Páginas web
  • 37. Ejemplos Papelera  La papelera es una herramienta habitual en la mayoría de las culturas avanzadas y Sirve para poner todos los papeles u otros elementos que no sirven para después tirarlos a la basura  El símbolo d reciclaje es cada vez más h bi l í b l de i l j d á habitual l La papelera permite reciclar los objetos depositados en ella
  • 38. Ejemplos Tijera (Cortar)  Las tijeras nos dan la funcionalidad de cortar papel, tela, etc. ,  La metáfora nos aporta la idea de poder cortar un trozo de documento, una parte de un dibujo, etc.  Su enlace con el portapapeles tiene que ser aprendido
  • 39. Ejemplos Bote de pintura (Pintar)  El bote de pintura es un objeto muy común y de fácil comprensión p  Con el bote de pintura que se vacía queremos hacer comprender al usuario que lo que se hace es llenar de un color el interior de un determinado objeto
  • 40. Ejemplos Portapapeles  Esta metáfora pretende cubrir un componente del sistema operativo q p que nos p permite p pasar información entre aplicaciones diferentes  Su uso es fácil de intuir, pero es una metáfora pobre: no se puede recoger más de una cosa, no se sabe de dónde vienen los documentos y carece de historial  Hay aspectos que no cubre la metáfora y han de ser aprendidos
  • 41. Ejemplos Correo electrónico  El correo es un elemento habitual en nuestra cultura. Nos permite enviar información escrita en papel a un p p p destinatario normalmente lejano  Esta metáfora se utiliza para el correo electrónico
  • 45. Conclusiones  Las metáforas constituyen un elemento fundamental de las interfaces actuales  Hemos expuesto una visión general de su historia y algunos ejemplos actuales  Hemos aprendido algunas ideas sobre cómo diseñar metáforas