SlideShare una empresa de Scribd logo
1 de 45
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente

Etapas del Proceso de la Ingeniería del Software
Etapas del Proceso de la Ingeniería del SoftwareEtapas del Proceso de la Ingeniería del Software
Etapas del Proceso de la Ingeniería del SoftwareT.I.C
 
PRACTICA DE Excel 2014 1° secundaria
PRACTICA DE Excel   2014   1° secundariaPRACTICA DE Excel   2014   1° secundaria
PRACTICA DE Excel 2014 1° secundariaMINEDU/oswaldo
 
Unidad 1 Ingenieria de software
Unidad 1 Ingenieria de softwareUnidad 1 Ingenieria de software
Unidad 1 Ingenieria de softwareJahiro Bojorquez
 
Ventajas y desventajas de visual studio
Ventajas  y desventajas de visual studioVentajas  y desventajas de visual studio
Ventajas y desventajas de visual studioruthmayhuavale
 
Microsoft solution framework (msf)
Microsoft solution framework (msf)Microsoft solution framework (msf)
Microsoft solution framework (msf)kalencl
 
Actualización curricular informática
Actualización curricular informáticaActualización curricular informática
Actualización curricular informáticaBernardita Naranjo
 
Sistemas con interfaces a manipulación directa
Sistemas con interfaces a manipulación directaSistemas con interfaces a manipulación directa
Sistemas con interfaces a manipulación directaKike Salsalazar
 
Prolog ejercicios resueltos
Prolog ejercicios resueltosProlog ejercicios resueltos
Prolog ejercicios resueltosJansel M
 
Tabla comparativa- metodologías de desarrollo
Tabla comparativa-  metodologías de desarrolloTabla comparativa-  metodologías de desarrollo
Tabla comparativa- metodologías de desarrolloitsarellano
 
Estructura de datos power point
Estructura de datos power pointEstructura de datos power point
Estructura de datos power pointunachi
 

La actualidad más candente (20)

tecnicas de revisión del software
tecnicas de revisión del softwaretecnicas de revisión del software
tecnicas de revisión del software
 
Etapas del Proceso de la Ingeniería del Software
Etapas del Proceso de la Ingeniería del SoftwareEtapas del Proceso de la Ingeniería del Software
Etapas del Proceso de la Ingeniería del Software
 
Curso básico de ensamblador
Curso básico de ensambladorCurso básico de ensamblador
Curso básico de ensamblador
 
PRACTICA DE Excel 2014 1° secundaria
PRACTICA DE Excel   2014   1° secundariaPRACTICA DE Excel   2014   1° secundaria
PRACTICA DE Excel 2014 1° secundaria
 
Planes de clases noveno informatica
Planes de clases noveno informaticaPlanes de clases noveno informatica
Planes de clases noveno informatica
 
Proyecto final de software
Proyecto final de softwareProyecto final de software
Proyecto final de software
 
1 Tipos De Datos Ejercicios
1 Tipos De Datos Ejercicios1 Tipos De Datos Ejercicios
1 Tipos De Datos Ejercicios
 
Unidad 1 Ingenieria de software
Unidad 1 Ingenieria de softwareUnidad 1 Ingenieria de software
Unidad 1 Ingenieria de software
 
METODOLOGIA RUP
METODOLOGIA RUPMETODOLOGIA RUP
METODOLOGIA RUP
 
Ventajas y desventajas de visual studio
Ventajas  y desventajas de visual studioVentajas  y desventajas de visual studio
Ventajas y desventajas de visual studio
 
EXPOSICIÓN RUP
 EXPOSICIÓN RUP EXPOSICIÓN RUP
EXPOSICIÓN RUP
 
Microsoft solution framework (msf)
Microsoft solution framework (msf)Microsoft solution framework (msf)
Microsoft solution framework (msf)
 
Actualización curricular informática
Actualización curricular informáticaActualización curricular informática
Actualización curricular informática
 
Sistemas con interfaces a manipulación directa
Sistemas con interfaces a manipulación directaSistemas con interfaces a manipulación directa
Sistemas con interfaces a manipulación directa
 
Prolog ejercicios resueltos
Prolog ejercicios resueltosProlog ejercicios resueltos
Prolog ejercicios resueltos
 
Tabla comparativa- metodologías de desarrollo
Tabla comparativa-  metodologías de desarrolloTabla comparativa-  metodologías de desarrollo
Tabla comparativa- metodologías de desarrollo
 
Estructura de datos power point
Estructura de datos power pointEstructura de datos power point
Estructura de datos power point
 
MOD Unidad 2: Tipos de modelado
MOD Unidad 2: Tipos de modeladoMOD Unidad 2: Tipos de modelado
MOD Unidad 2: Tipos de modelado
 
Tópicos Avanzados de Programación - Unidad 1 GUI
Tópicos Avanzados de Programación - Unidad 1 GUITópicos Avanzados de Programación - Unidad 1 GUI
Tópicos Avanzados de Programación - Unidad 1 GUI
 
Diagramas UML
Diagramas UMLDiagramas UML
Diagramas UML
 

Similar a 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
 

Similar a 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
 

Último

Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....estefaniaortizsalina
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEhayax3
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxNorberto Chacon
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGersonManuelRodrigue1
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosCristianGmez22034
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYkarendaza9506
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio2021ArqROLDANBERNALD
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.docilvrosiebp
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxJustoAlbertoBaltaSmi
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGOyordanespinozanina
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALEvaMaraMorenoLago1
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docAhilynBasabe
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanaMarsielMendoza1
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfslaimenbarakat
 

Último (20)

Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 

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