SlideShare une entreprise Scribd logo
1  sur  88
Desarrollo de Interfaces de Usuario
          Basadas en Modelos
                         Dr. Juan Manuel González Calleros
                                juan.gonzalez@cs.buap.mx
                                        @Juan__Gonzalez




1    CONACIC 2011   @Juan__Gonzalez
Plan
      Complejidad del Desarrollo de Interfaces de
      Usuario

      Diseño Basado en Modelos como Solución

      Ejemplo Práctico

      Conclusiones




2   CONACIC 2011   @Juan__Gonzalez
Complejidad del Desarrollo de IU




3   CONACIC 2011   @Juan__Gonzalez
Plataformas heterogéneas (1)




                                 CONACIC 2011
4
                               @Juan__Gonzalez
Diversidad de usuarios (2)
     Usuarios “Tradicionales”
      Sin ninguna discapacidad

     Personas con discapacidad
      Visual, motora, cognitiva

     Diversidad Cultural




                                    CONACIC 2011
5
                                  @Juan__Gonzalez
Multiplicidad de Modalidades de Interacción (3)




                                      [Stephanidis,2001]



                                            CONACIC 2011
6
                                          @Juan__Gonzalez
Control de aspectos dinámicos (4)
      Realidad Mixta




                                  CONACIC 2011
7
                                @Juan__Gonzalez
Multiplicidad de Ambientes de trabajo (5)




                                       CONACIC 2011
8
                                     @Juan__Gonzalez
Incluir Aspectos de Usabilidad en el desarrollo (6)




                                           CONACIC 2011
9
                                         @Juan__Gonzalez
Mayor reto hoy en día proliferación
       de desarrollos
                    Plataforma#1    Plataforma #2      Plataforma #3         Plataforma#4

     Aplicación 1   IU #1           IU #2              IU #3                 IU #4

     Aplicación 2   IU #5           IU #6              IU #7                 IU #8

     Aplicación 3   IU #9           IU #10             IU #11                IU #12


                                             Modelo Plataforma #1          Plataforma #1
     Aplicación 1    IU modelo #1
                                             Modelo Plataforma #2          Plataforma #2
     Aplicación 2    IU modelo #2
                                             Modelo Plataforma #3          Plataforma #3
     Aplicación 3    IU modelo #3
                                             Modelo Plataforma #4          Plataforma #4




                                                                             CONACIC 2011
10   Proliferación de desarrollos                   [Abrams et al.,2001]   @Juan__Gonzalez
¿Cuál es la situación actual?
      Los aspectos tecnológicos del desarrollo de Interfaces de
      Usuario (IU) progresan de forma significativa mas rápido
      que:
      1.   Los aspectos relacionados con la ingeniería de software
           Toma tiempo desarrollar una IU para un nuevo dispositivo, una nueva
           técnica de interacción
           Toma mas tiempo hacer un toolkit para ese propósito
           Toma aun mas tiempo basarte en un desarrollo basado en modelos
      2.   Los aspectos de ingeniería de usabilidad
           Una nueva IU es entregada con problemas de usabilidad ya que
              Poca o nula experiencia previa
              No hay evidencia empírica pasada
           Los experimentos empíricos requieren de muchos recursos si se hace
           de buena manera



                                                                 CONACIC 2011
11
                                                               @Juan__Gonzalez
Diseño basado en modelos como
     solución




                              CONACIC 2011
12
                            @Juan__Gonzalez
¿Qué es el diseño basado en
     modelos?
       El diseño basado en modelos consiste en
          Describir la IU en un modelo de IU
          Basarse en este modelo para guiar el ciclo de vida de desarrollo de
          IU
          Mientras se siguen las siguientes metas:
             Generar ambientes de desarrollo de IU compresibles
             Soporte robusto al ciclo de vida de desarrollo de IU
             Mejorar la portabilidad
             Integrar la usabilidad en el desarrollo
             de IU




13   CONACIC 2011       @Juan__Gonzalez
¿Qué es el diseño basado en
     modelos?
      Una estructura de 3 dimensiones




                                          CONACIC 2011
14
                                        @Juan__Gonzalez
¿Qué es el diseño basado en
     modelos?
      Una estructura de 3 dimensiones




                                          CONACIC 2011
15
                                        @Juan__Gonzalez
Widgets independientes de la tecnología
     Porqué hay muchos lenguajes o
     representaciones para ejecutar una tarea
      Por que el mismo widget aparece en diferentes
      tecnologías


           Check Box   XmToggleButton   BoxArray
           (Windows)    (OSF-Motif)     (Garnet)



      Por que hay muchas formas de alcanzar un objetivo
      (e.g., selector)




                                                     CONACIC 2011
16
                                                   @Juan__Gonzalez
Widgets independientes de la tecnología
     La interfaz final (FUI)
       Cualquier lenguaje: (X)HTML, Java, Visual Basic,
       C++
       Cualquier plataforma de computo: Windows, Linux,
       MacOS
     Es abstraída en un modelo concreto (CUI)
       Independiente del lenguaje
       Independiente de la plataforma
       Dependiente de la modalidad de interacción
         Vocal, 3D, GUI   Concrete user
                           Interface S



                            Final user
                           Interface S
                                                 CONACIC 2011
17
                                               @Juan__Gonzalez
Requerimos soluciones más
     generales

      IU no sólo son gráficas, si no que pueden ser
      vocales, táctiles, 3D, hapticas, multimodales
      Entonces, hay necesidad de hacer mayores
      abstracciones                    Abstract Container

                                         Abstract Individual Component with Output

                                                    Abs. Ind. Comp. with Input




                                                 Abs. Ind. Comp. with Control
                                                          CONACIC 2011
18
                                                        @Juan__Gonzalez
Modelos independientes de la
     modalidad de Interacción
      Con este segundo nivel de abstracción, se va de
      lo concreto (CUI) a lo abstracto (AUI)
      Consecuentemente, una AUI es independiente de
       Cualquier modalidad de interacción

                      Abstract user
                       Interface S




                      Concrete user
                       Interface S



                        Final user
                       Interface S

                                              CONACIC 2011
19
                                            @Juan__Gonzalez
Requerimos plantear el problema
     más general
      IUs, incluso si son abstractas, están
      estructuradas acorde al sistema objetivo lo que
      va en contra del paradigma centrado en el           Task and
                                                          Domain S
      usuario
      Entonces, hay necesidad de modelar los
      problemas independientemente de la                Abstract user
                                                         Interface S
      plataforma de computo
        Modelos de Tarea y datos (UML Class Diagram)
      Con este tercer conjunto de abstracciones,        Concrete user
                                                         Interface S
      pasamos del modelo AUI al de tareas y datos
      (T+D)
      Consecuentemente, el T+D es independiente           Final user
                                                         Interface S
      de cualquier implementación de computo


                                                  CONACIC 2011
20
                                                @Juan__Gonzalez
Hay que tomar en cuenta el contexto de
uso
 •El contexto de uso que se define como el usuario, el
 dispositivo y el ambiente de trabajo
     Location   Role        Device   Experience

                Deportivo            Programa de viaje multimedia



                Trabajo              Sitio de reserva de viajes
                                     Interfaz avanzada para operaciones complejas


                Viaje                Notificaciones de reservas
                                     Conecctvidad donde sea para la transferencia de
                                     datos simples

                Familia              TV es el dispotivo familiar #1



                                                                        CONACIC 2011
21
                                                                      @Juan__Gonzalez
Que tenemos hasta ahora
     Marco de Referencia Cameleon
        Contexto de uso

     User S Plataforma SEnvironment S     http://www.plasticity.org

                                           [Calvary et al.,2003]

                         Task and
                         Domain S
                                                 UsiXML
                                                supported
                                                  model

                       Abstract user
                        Interface S




                       Concrete user           Reification
                        Interface S
                                              Abstraction


                         Final user              Reflexion
                        Interface S

                                          CONACIC 2011
22
                                        @Juan__Gonzalez
¿Qué es el diseño basado en
     modelos?
      Una estructura de 3 dimensiones




                                          CONACIC 2011
23
                                        @Juan__Gonzalez
MDE basado en UsiXML

    MDA
 Componentes
      Computing                        Plataforma                       Plataforma
     Independent   Model to Model     Independent   Model to Model       Specific  Model to Code
     Model (CIM)                      Model (PIM)                      Model (PSM)                 Source code




     Tecnicas propuestas en
            UsiXML
       UsiXML                        UsiXML model:                    UsiXML model:
     models: task,      Graph         Abstract user      Graph        Concrete user                 Final user
                   transformations                  transformations                   Rendering
       domain                           interface                        interface                  interface




                                                                                           CONACIC 2011
24
                                                                                         @Juan__Gonzalez
MDE basado en UsiXML
                                                                 S=Source context of use                 T=Target context of use

     Industrial applications      Public applications
                                                             User S    Platform S     Environment S   User T    Platform T   Environment T
                      is applied on


      UI Development methodology                        Computing                     Task and          Task and
                                                        Independent                   Domain S          Domain T
               Software tools                           Model (CIM)
                                           support
            Step-wise method
                                                                                    Abstract User      Abstract User
                                           involves
                                                                                     Interface S        Interface T
                   Models
                                                        Platform Independent
                                           described    Model (PIM)
            UsiXML Language                in
                                                                                                                                   Reification
                                                                                    Concrete User     Concrete User
                               is submitted to                                       Interface S       Interface T
                                                        Platform Specific                                                          Abstraction
                                                        Model (PSM)
               Standardisation actions:
               W3C, OASIS, MAUSE,                                                                                                    Reflexion
               ISO 24744                                                              Final User        Final User
                                                        Final code                   Interface S        Interface T                  Translation

                                                                               Cameleon Reference Framework [Calv03]




                                                                                                                   CONACIC 2011
25
                                                                                                                 @Juan__Gonzalez
Ejemplo simple

         S=Source context of use              T=Target context of use


     User S    Plataforma S Environment S   User T        Plataforma T Environment T




                            Task and        Task and
                            Domain S        Domain T
                                                                           UsiXML
                                                                           supported
                                                                           model

                            Abstract user   Abstract user
                            Interface S     Interface T                    UsiXML
                                                                           unsupported
                                                                           model



                            Concrete user   Concrete user                Reification
                            Interface S     Interface T
                                                                         Abstraction


                                                                            Reflexion
                            Final user      Final user
                            Interface S     Interface T
                                                                             Translation


                                                                                             CONACIC 2011
26
                                                                                           @Juan__Gonzalez
Ejemplo simple




                        CONACIC 2011
27
                      @Juan__Gonzalez
Ejemplo simple




                        CONACIC 2011
28
                      @Juan__Gonzalez
Ejemplo simple




                        CONACIC 2011
29
                      @Juan__Gonzalez
Ejemplo simple




                        CONACIC 2011
30
                      @Juan__Gonzalez
Una descripción – Muchas
     representaciones




                                  CONACIC 2011
31
                                @Juan__Gonzalez
Tomando en cuenta el contexto de
     uso
     Propiedades de
     plasticidad =
     adaptación al
     contexto de uso
     mientras satisface
     propiedades de
     usabilidad
              [Grolaux et al.,2002]




                                        CONACIC 2011
32
                                      @Juan__Gonzalez
Escenario-Multi-plataforma para
     Emergencias
      Tres plataformas
       Pocket PC
       Desktop PC
       Wall Screens




                                   CONACIC 2011
33
                                 @Juan__Gonzalez
Escenario
       Múltiples usuarios
          Paciente                    ¿Como resolver este
          Doctor                       problema ?
          Recepcionista
          Enfermero
          Radiólogo
            ..
       Múltiples ambientes
          Sala de espera
          Quirófano
          Consultorio

34   CONACIC 2011   @Juan__Gonzalez
Solución Propuesta
      Modelo y método
       Diseñar primero la pantalla de referencia
       Refinar las otras pantallas después
         Aplicando degradación gradual (se vera a detalle mas
         adelante)
         Aplicando técnicas de transformación
      Énfasis también fue puesto sobre los iconos
      usados




                                                       CONACIC 2011
35
                                                     @Juan__Gonzalez
Usando técnicas de degradación gradual de la IU se lograron las diferentes versiones de
pantallas, menús grandes fueron modificados por menús más pequeños, con
herramientas y reglas de degradación agradable




    CONACIC 2011
                                                                                   36
                                                                   [Florins & Vanderdonckt,2004]
  @Juan__Gonzalez
Video Clinica – Poly Medis




37   CONACIC 2011   @Juan__Gonzalez
[Grolaux & Vanderdonckt,2005]



     Problema: cómo diseñar una IU que tome en cuenta múltiples
     pantallas?
     Solución: Migración = DEMIPLAT
     DistriXML = arquitectura de software para migración de una plataforma
     a otra en tiempo de ejecución




                                Painting
                                Pencil




                                Painting
                                  tool
                                Palette



                                                              CONACIC 2011
38
                                                            @Juan__Gonzalez
Así luce la aplicación




                      CONACIC 2011
39
                    @Juan__Gonzalez
UI Migration: DEMIPLAT
     Detach




                                CONACIC 2011
40
                              @Juan__Gonzalez
UI Migration: DEMIPLAT
     Detach - Migrate




                                          CONACIC 2011
41
                                        @Juan__Gonzalez
UI Migration: DEMIPLAT
     Detach - Migrate - Plastify




                                     CONACIC 2011
42
                                   @Juan__Gonzalez
UI Migration: DEMIPLAT
     Detach - Migrate - Plastify - Attach




                                              CONACIC 2011
43
                                            @Juan__Gonzalez
Esto no es una toolbar
               flotante es un control
               independiente
     Process




                                  CONACIC 2011
44
                                @Juan__Gonzalez
Esto Migración de la IU

     Computer A      Computer B
         Process       Process




                                     CONACIC 2011
45
                                   @Juan__Gonzalez
¿Qué es el diseño basado en
     modelos?
      Una estructura de 3 dimensiones




                                          CONACIC 2011
46
                                        @Juan__Gonzalez
Enfoque de Ingeniería de Lenguajes
      UsiXML es diferente de cualquier otro lenguaje de
      desarrollo de sistemas ya que sirve también como
      lenguaje de especificación.
      La meta más importante del lenaguje no sólo es la
      generación de código sino además tener la capacidad
      de hacer rasonamientos sobre la especificaciones de
      la IU:
       Verificación de modelos
       Evaluación de IU
       Desarrollo sistemático (model-driven engineering)
       Almacenamiento de un repositorio de casos de uso o
       patrones de IU
       Análisis estático y dinámico
       Pruebas de modelos

                                                  CONACIC 2011
47
                                                @Juan__Gonzalez
Principios de ingeniería de lenguaje
     Semántica:
     meta modelos como
     diagramas UML




48   CONACIC 2011   @Juan__Gonzalez
Principios de ingeniería de lenguaje
       Semántica:
       meta modelos como
       diagramas UML
       Sintaxis:
       lenguaje UsiXML
      Abstracta XML
     schema




                                     CONACIC 2011
49
                                   @Juan__Gonzalez
Principios de ingeniería de lenguaje
     C2: Se requiere cubrir
                                                          Root
       Semántica:
       meta modelos como
       diagramas UML
       Sintaxis:                insert search
                                   criteria
                                                                                   view
                                                                                  results
       lenguaje UsiXML
       Estilística:
     ¿Qué Notación         edit            submit
                                                                     aux                        show
     gráfica para        criteria
                                                                                                item
     tus modelos? edit       submit
                                                                                               details


                                                show list items                  select item
                        insert criteria

                                                                      show                  show
                                                                      select

                                                                                       view details
                                                                   view items

                                                                  view results
                                                                                     CONACIC 2011
50
                                                                                   @Juan__Gonzalez
¿Qué es el diseño basado en
     modelos?
      Una estructura de 3 dimensiones




                                          CONACIC 2011
51
                                        @Juan__Gonzalez
Herramientas
                                                                                             MethodiXML


                                       TransformiXML
                                                                                      FlashiXML
                         IdealXML                                                      QtkXML
                                                                                       JaviXML
                                                                                        Rendering
       UsiXML                          UsiXML model:                  UsiXML model:
     models: task,        Graph         Abstract user      Graph      Concrete user     Generative        Final user
       domain        transformations      interface   transformations    interface     programming        interface

                                                                                      VisualiXML


                                                                                       Derivation rules

                                        KnowiXML                     GrafiXML          ReversiXML
                                                                      VisiXML
                                                                    SketchiXML
                                                                     FormiXML

                                                                                               CONACIC 2011
52
                                                                                             @Juan__Gonzalez
Lo más complejo del MBUID
      Esfuerzo incremental y motores de render
       UsiXML interpretes para
         Interfaces de Usuario Grafica: XHTML, XUL, Java, Flash,
         Tcl-Tk
         Interfaces de Usuario Vocal : VoiceXML
         Interfaces de Usuario Multimodal : X+V
         Interfaces de Usuario Hapticas : HaptiXML
       Soporte para
         Interfaces de Usuario Distribuidas
         Interfaces de Usuario de Realidad Mixta
         Interfaces de Usuario 3D


                                                       CONACIC 2011
53
                                                     @Juan__Gonzalez
Sistema de prototipos para IU




54   CONACIC 2011   @Juan__Gonzalez
IdealXML




                      CONACIC 2011
55              [Montero,2005]
                    @Juan__Gonzalez
Modelos de mapeo


                        These mappings can be established:

                        triggers (tg):        {    ,       }x
                        updates (up):             x
                        observes (ob):            x
                        isExecutedIn (ex):        x
                        manipulates (ma): {            ,   }x




                                               CONACIC 2011
56                                       [Montero,2005]
                                             @Juan__Gonzalez
GrafiXML- Pestaña de Diseño


                     Components options

        Components
                                          Design window
          toolbar




                                                CONACIC 2011
57
                                              @Juan__Gonzalez
GrafiXML- Lenguaje

 GrafiXML permite la creación de GUI multi – idiomas
 El idioma es un elemento del contexto de uso




                                                  Soporta
                                               mnemonicos y
                                                 shortcuts




                                              CONACIC 2011
58
                                            @Juan__Gonzalez
GrafiXML- Vista Previa con ejemplo
de múltiples idiomas




                              CONACIC 2011
59
                            @Juan__Gonzalez
GrafiXML- Soporte a Multi Dispositivos




                                      CONACIC 2011
60
                                    @Juan__Gonzalez
Ejemplo Práctico
     Aplicación del diseño basado en Modelos para cabinas
     de pilotaje




61   CONACIC 2011     @Juan__Gonzalez
El problema
      El porcentaje de accidentes aéreo es estable,
      varia entre 3 y 4 accidentes por millón de salidas

      Para el futuro se anticipa un aumenta en el
      volumen de vuelos

      En consecuencia se espera tener un accidente
      serio cada semana si no se logra reducir el
      procentaje de accidentes

      55% de los accidentes involucra a la tripulación
                                                CONACIC 2011
62
                                              @Juan__Gonzalez
El problema
     La principal causa son
     errores humanos
     Incremento en la
     automatización del
     vuelo
       Piloto se olvida de
       volar
       Exceso de confianza
       sobre las maquinas
       Sorpresas que los
       sistemas no
       consideran
     Tomar en cuanta
     factores humano en el
     diseño de sistemas es
     crucial


                                            CONACIC 2011
                              [Osterloh 2011]
63
                                         @Juan__Gonzalez
El problema
      Tenemos que tomar en cuenta al piloto (usuario)
      en la fases de desarrollo de un avión

      Hay que reducir el porcentaje de errores
      humanos

      Los sistemas de automatización de cabinas de
      pilotaje han contribuido de forma notable a la
      reducción de este porcentaje


                                              CONACIC 2011
64
                                            @Juan__Gonzalez
El problema
       Pilotos
          Son difíciles de conseguir, tienen una agenda muy
          apretada
          Son muy caros, usarlos para hace pruebas sobre
          prototipos tiene un costo prohibitivo
       Sistemas de Pruebas (Simuladores)
          Caros
          Difícil acceso


          Pilotos + Sistemas de Pruebas
          Exclusivo para centro muy especializados

65   CONACIC 2011    @Juan__Gonzalez
Propuesta de Solución
       Crear un modelo cognitivo de la tripulación
          Piloto Volando (PF) y Piloto no Volando (PNF) para
          reducir necesidad de usar pilotos reales
          Herramientas de software para dar soporte
          Simulador de sistema de vuelo
          Desarrollo basado en modelos de la ergonomía
          de las interfaces
       Con esto se espera predecir ciertos
       comportamientos del piloto que causen errores y
       diseñar sistemas que los prevengan

66   CONACIC 2011   @Juan__Gonzalez
Que tipo de errores comete el piloto
     Se aburre y no sigue
     el procedimiento
     Sobre carga de
     información y omite
     mensajes de alerta
     importantes que lo
     hace no seguir los
     procedimientos

                    [Osterloh 2011]
                                            Acciones   Predicción de
                                            Reales     Acciones
67   CONACIC 2011         @Juan__Gonzalez
La arquitectura Cognitiva
     Modela el comportamiento
     humano tomando en
     cuenta factores:
      Psicológicos
        búsqueda en la memoria
        Olvido
        procesamiento de
        conocimiento)
      Fisiológicos
        movimiento de ojos
        Manos
        voz
        pies
68    CONACIC 2011    @Juan__Gonzalez   [Osterloh 2011]
La Interfaz de Usuario requiere un
     modelo




                                    CONACIC 2011
69
                                  @Juan__Gonzalez
Task &
Concepts



Abstract User
                     Interfaz para navegación
Interface




Concrete
User Interface




Final User
Interface




   70            CONACIC 2011   @Juan__Gonzalez
Task &
Concepts

                     Layout-Interfaz para navegación
Abstract User
Interface




Concrete
User Interface




Final User
Interface




   71            CONACIC 2011   @Juan__Gonzalez
Task &
Concepts

                   Plano de la IU
Abstract User
Interface




Concrete
User Interface




Final User
Interface




   72            CONACIC 2011   @Juan__Gonzalez
Task &
Concepts

                        Semántica del modelo de IU
Abstract User                                                                                                                                                                                                            w in d o w
Interface                                                                                                                                                                                              w i n d o w L e ftM a r g i n : i n te g e r
                                                                                                                   b o rd e rB o x                                                                     w i n d o w T o p M a r g i n : i n te g e r
                                                                                                        1                                                                                              is R e s iza b le : b o o le a n
                                                                       0 ..1
                                                                 to p B o x                                    1       1     1    1



Concrete                                                                           0 ..1
User Interface                                                                                         0 ..1                 0 . .1
                                                                          b o tto m B o x                                        r i g h tB o x
                                                                                                         l e ftB o x



                 b u tto n



Final User       b u t to n

Interface
                      b u tto n


                                  b u t to n           b u t to n




                                                                                                                                          m enu
                                        m e n u It e m                                                                     p o p U p M e n u : b o o le a n
                                          ty p e : s t r i n g                                                             to o l B a r M e n u : b o o l e a n




                                    m e n u It e m                                                                                                                             m e n u Ite m
                                     ty p e : s t r i n g                                                                                                                       t y p e : s tr i n g



                                        m e n u Ite m
                                                                                                                                                       m e n u Ite m
                                         t y p e : s tr i n g                  m e n u Ite m                               m e n u It e m
                                                                                                                                                        t y p e : s tr i n g
                                                                                t y p e : s tr i n g                        ty p e : s t r i n g




   73            CONACIC 2011                                            @Juan__Gonzalez
Task &
Concepts
                     Ingeniería Inversa-Interfaz
                     Abstracta
Abstract User
Interface




Concrete
User Interface




Final User
Interface




   74            CONACIC 2011   @Juan__Gonzalez
Task &               Ingeniería Inversa-Modelo de
Concepts

                     Tareas
Abstract User
Interface




Concrete
User Interface




Final User
Interface




   75            CONACIC 2011   @Juan__Gonzalez
A partir de este modelo se pueden
     generar muchas soluciones




76   CONACIC 2011   @Juan__Gonzalez
Pruebas de usabilidad de IUs




            A representa la Interfaz de usuario tal cual es usada en un tiempo n
            B representa una de tantas posibles variantes de la interfaz para
Page 77   CONACIC 2011 misma@Juan__Gonzalez
            ejecutar la        tarea
Pruebas de usabilidad de IUs




                      La trayectoria es más visible si
                      usamos un control de checkboxes
78   CONACIC 2011   @Juan__Gonzalez
Conclusiones
     MBUI Logros y Fracasos




79   CONACIC 2011   @Juan__Gonzalez
Conclusion
      Puede realmente darse soporte a todo esto
      usando el enfoque MBUI interface
                 Aplicación logic User
                  16000

                  14000

                  12000
                                                                                                 Generated code
                  10000
           Word




                   8000

                   6000

                   4000
                                                                                                 Models
                   2000

                      0
                          KB



                                           Query




                                                                                                       Update
                                                                                             Actions
                                                                  UI states
                               KB Parser




                                                                                                                Interactions
                                                                              Presentation
                                                   Network ops.




                                                                                                                                      CONACIC 2011
80                                                                                                                             [Skezely,1996]
                                                                                                                                    @Juan__Gonzalez
Conclusion
     Éxitos:
      Funciona muy bien en dominios bien definidos
      Favorece la colaboración
      Soporta flexibilidad, mantenimiento
     Fallas
      No funciona para IU complejas y muy dinámicas
      Requiere mucho trabajo
        Modelos (algo)
        Método (más)
        Herramienta (aún más)                         Support for
                                                     mnemonics and
                                                       shortcuts


                                                   CONACIC 2011
81
                                                 @Juan__Gonzalez
¿Por qué debería ser el desarrollo de
Interfaces de Usuario un proceso formal?
     Para mantener la consistencia entre la diferentes
     herramientas de software y así favorecer:
       Modificaciones: Si hay un cambio en el modelo entonces la IU
       cambia.
       Manejo de Complejidad: Dado que una IU es parte de un
       sistema, pudiera representarse con gran cantidad de código.
       Las herramientas de diseño y construcción de la IU deben
       proveer mecanismos para enfrentar dicha complejidad así
       como ser confiables.
       Seguridad en sistemas críticos: Los modelos favorecen la
       inspección e investigación del comportamiento de la
       funcionalidad del sistema. El uso de una herramienta formal
       es extremadamente valiosa ya provee una forma de expresar
       un sistema de forma: no ambigua, completa y concisa.
       Rigurosa: El ciclo de desarrollo de IU debe tener el mismo
       nivel de rigor que lo que se usa para la ingeniería de software.


                                                           CONACIC 2011
82
                                                         @Juan__Gonzalez
¿Por qué debería ser el desarrollo de
Interfaces de Usuario un proceso formal?
     Razonar sobre modelos es posible para:
      Evaluación automática. Un sistema de computo podría
      analizar datos relacionados con una IU y predecir su
      comportamiento.
      Análisis sobre producción de errores. Los modelos
      pueden ser procesados y estudiados.
      Verificar propiedades. Análisis de los efectos producidos
      por diferentes IU modificando propiedades de
      componentes, por ejemplo, cambiar el color de fondo
      (background), tipos de letras, etc.
      Que nos comuniquemos los humanos. Los modelos
      pueden y deberían tener como propiedad de ser
      comprensible por los humanos y como tales servir de
      medio de discusión entre expertos y usuarios.
                                                    CONACIC 2011
83
                                                  @Juan__Gonzalez
¿Por qué tendríamos que estandarizar un
     método de desarrollo de IU?
        Un estándar permitiría:
          Comunicación: Diferentes herramientas de software requieren
          de un estándar como canal de comunicación.
          Consistencia. Diferentes herramientas requieren de un
          estándar para que la información que comparten sea
          consistente.
          Conocimiento común: al recaer sobre un estándar diferentes
          herramientas podrían compartir conocimiento de la IU,
          formulación de tareas, procesos pudieran incluir conocimiento
          de la IU, incluso modelos cognitivos para predecir
          comportamiento de usuarios requieren el conocimiento de la
          IU.
          Escalabilidad (los modelos pueden crecer más fácilmente al
          paso del tiempo en comparación del código): un modelo bien
          estructurado puede incrementarse mejor.

                                                           CONACIC 2011
84
                                                         @Juan__Gonzalez
Hacia donde va la evolución de los
     lenguajes para definir IU
      Hoy
       Programming languages: Visual Basic, Java, C++,
       Markup languages: HTML, XUL,
      Mañana
       Multimodal interfaces: XHTML + VoiceXML = X+V
       Vectorial interfaces: SVG, LZX
       Virtual reality interfaces: VRML97, XVRML
       3D user interfaces: X3D, MEL
       Tabletop interface: OpenGL
       Muchas modalidades han llegado
      Conclusión
       Es imposible evolucionar/sobrevivir sin un enfoque de
       modelado, incluso para las interfaces de usuario
       También se requiere progresar en el proceso de diseño


                                                       CONACIC 2011
85
                                                     @Juan__Gonzalez
Síguenos en las redes sociales



                                                        @usixml

     http://www.facebook.com/UsiXML




86                  CONACIC 2011      @Juan__Gonzalez
¿Les gustaría participar?
     ¡Únete al consorcio UsiXML hoy!
        www.usixml.eu
     El tema será ampliamente cubierto en 2012
        OPT.TOPIC.SELECT.COMPUTAC. II (LCC 595 )
          sección 101 NRC 40550
     La platica estará disponible
        http://buap.academia.edu/JuanGonzalez

     Contacto en la facultad
     Dra. Josefina Guerrero-García       jguerrero@cs.buap.mx
     Dr. Juan Manuel González-Calleros   juan.gonzalez@cs.buap.mx
                                         @Juan__Gonzalez

                                                            CONACIC 2011
87
                                                          @Juan__Gonzalez
Muchas Gracias por su
                       atención
      Preguntas
      “La persona más inteligente no es aquella que tiene las
      mejores respuestas sino aquella que hace las preguntas
      correctas" (Voltaire)

               Dr. Juan Manuel González Calleros
      Benemérita Universidad Autónoma de Puebla
                      juan.gonzalez@cs.buap.mx
                       Twitter: @Juan__Gonzalez


Page 88   CONACIC 2011

Contenu connexe

Tendances

AD Unidad3: Tecnologías de aplicaciones distribuidas
AD Unidad3: Tecnologías de aplicaciones distribuidasAD Unidad3: Tecnologías de aplicaciones distribuidas
AD Unidad3: Tecnologías de aplicaciones distribuidasFranklin Parrales Bravo
 
Funciones de administracion de memoria
Funciones de administracion de memoriaFunciones de administracion de memoria
Funciones de administracion de memoriaMiguel Magaña
 
Estructura unix
Estructura unixEstructura unix
Estructura unixCalP
 
8.1.- IPO. Estilos y paradigmas de interacción
8.1.- IPO. Estilos y paradigmas de interacción8.1.- IPO. Estilos y paradigmas de interacción
8.1.- IPO. Estilos y paradigmas de interacciónDCU_MPIUA
 
Ventajas y desventajas de moprosoft
Ventajas y desventajas de moprosoftVentajas y desventajas de moprosoft
Ventajas y desventajas de moprosoftChuyito Alvarado
 
1. CaracteríSticas Del Sistema Operativo
1. CaracteríSticas Del Sistema Operativo1. CaracteríSticas Del Sistema Operativo
1. CaracteríSticas Del Sistema OperativoCANDIDO RUIZ
 
SO Unidad 1: Introducción a los Sistemas Operativos
SO Unidad 1: Introducción a los Sistemas OperativosSO Unidad 1: Introducción a los Sistemas Operativos
SO Unidad 1: Introducción a los Sistemas OperativosFranklin Parrales Bravo
 
Estados de un proceso
Estados de un procesoEstados de un proceso
Estados de un procesoi92almaa
 
Tabla comparativa de los sistemas operativos
Tabla comparativa de los sistemas operativosTabla comparativa de los sistemas operativos
Tabla comparativa de los sistemas operativosCarlos Eduardo Roa Lalo
 
Tema N° 14 Especificación de Requisitos del Software
Tema N° 14 Especificación de Requisitos del SoftwareTema N° 14 Especificación de Requisitos del Software
Tema N° 14 Especificación de Requisitos del SoftwareSaraEAlcntaraR
 
Modelo componentes
Modelo componentesModelo componentes
Modelo componentesmartin
 

Tendances (20)

AD Unidad3: Tecnologías de aplicaciones distribuidas
AD Unidad3: Tecnologías de aplicaciones distribuidasAD Unidad3: Tecnologías de aplicaciones distribuidas
AD Unidad3: Tecnologías de aplicaciones distribuidas
 
¿Qué es swap?
¿Qué es swap?¿Qué es swap?
¿Qué es swap?
 
Funciones de administracion de memoria
Funciones de administracion de memoriaFunciones de administracion de memoria
Funciones de administracion de memoria
 
Estructura unix
Estructura unixEstructura unix
Estructura unix
 
Capitulo 6
Capitulo 6Capitulo 6
Capitulo 6
 
8.1.- IPO. Estilos y paradigmas de interacción
8.1.- IPO. Estilos y paradigmas de interacción8.1.- IPO. Estilos y paradigmas de interacción
8.1.- IPO. Estilos y paradigmas de interacción
 
Ventajas y desventajas de moprosoft
Ventajas y desventajas de moprosoftVentajas y desventajas de moprosoft
Ventajas y desventajas de moprosoft
 
1. CaracteríSticas Del Sistema Operativo
1. CaracteríSticas Del Sistema Operativo1. CaracteríSticas Del Sistema Operativo
1. CaracteríSticas Del Sistema Operativo
 
analisis de aplicaciones web
analisis de aplicaciones webanalisis de aplicaciones web
analisis de aplicaciones web
 
IT MARK
IT MARK IT MARK
IT MARK
 
Carga y montaje
Carga y montajeCarga y montaje
Carga y montaje
 
Analizador léxico
Analizador léxicoAnalizador léxico
Analizador léxico
 
SO Unidad 1: Introducción a los Sistemas Operativos
SO Unidad 1: Introducción a los Sistemas OperativosSO Unidad 1: Introducción a los Sistemas Operativos
SO Unidad 1: Introducción a los Sistemas Operativos
 
Presentacion MSF
Presentacion MSFPresentacion MSF
Presentacion MSF
 
Estados de un proceso
Estados de un procesoEstados de un proceso
Estados de un proceso
 
Tabla comparativa de los sistemas operativos
Tabla comparativa de los sistemas operativosTabla comparativa de los sistemas operativos
Tabla comparativa de los sistemas operativos
 
Razonamiento monotono
Razonamiento monotonoRazonamiento monotono
Razonamiento monotono
 
ADMINISTRACION DE MEMORIA
ADMINISTRACION DE MEMORIAADMINISTRACION DE MEMORIA
ADMINISTRACION DE MEMORIA
 
Tema N° 14 Especificación de Requisitos del Software
Tema N° 14 Especificación de Requisitos del SoftwareTema N° 14 Especificación de Requisitos del Software
Tema N° 14 Especificación de Requisitos del Software
 
Modelo componentes
Modelo componentesModelo componentes
Modelo componentes
 

En vedette

Disciplinas del IHC Presentación 2
Disciplinas del IHC Presentación 2Disciplinas del IHC Presentación 2
Disciplinas del IHC Presentación 2selhamra
 
Taller de Desarrollo de Interfaces (Conalep 2014)
Taller de Desarrollo de Interfaces (Conalep 2014)Taller de Desarrollo de Interfaces (Conalep 2014)
Taller de Desarrollo de Interfaces (Conalep 2014)Mario A Moreno Rocha
 
Taller de Desarrollo de Interfaces (UNSIS)
Taller de Desarrollo de Interfaces (UNSIS)Taller de Desarrollo de Interfaces (UNSIS)
Taller de Desarrollo de Interfaces (UNSIS)Mario A Moreno Rocha
 
Sistemas de base de datos rob coronel 5ed
Sistemas de base de datos rob coronel 5edSistemas de base de datos rob coronel 5ed
Sistemas de base de datos rob coronel 5edwingzero 2040
 
Factores humanos 2do semestre iuac
Factores humanos 2do semestre iuacFactores humanos 2do semestre iuac
Factores humanos 2do semestre iuacrichardguerra
 
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-trackingEvaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-trackingPercy Negrete
 
Introducción a la programación y la informática. Tema 1
Introducción a la programación y la informática. Tema 1Introducción a la programación y la informática. Tema 1
Introducción a la programación y la informática. Tema 1Andres Garcia Garcia
 
Tema 2. Los sistemas Interactivos: el factor humano (2013)
Tema 2. Los sistemas Interactivos: el factor humano (2013)Tema 2. Los sistemas Interactivos: el factor humano (2013)
Tema 2. Los sistemas Interactivos: el factor humano (2013)Miguel Gea
 
Confección de interfaces de usuario con JAVA - SWING
Confección de interfaces de usuario con JAVA - SWINGConfección de interfaces de usuario con JAVA - SWING
Confección de interfaces de usuario con JAVA - SWINGJose Benítez Andrades
 
Bases De Datos My Sql
Bases De Datos My SqlBases De Datos My Sql
Bases De Datos My SqlArnulfo Gomez
 
Operaciones Basicas C++
Operaciones Basicas C++Operaciones Basicas C++
Operaciones Basicas C++yesid19
 
generalidades de la teoría de circuitos y de la electrotecnia
generalidades de la teoría de circuitos y de la electrotecniageneralidades de la teoría de circuitos y de la electrotecnia
generalidades de la teoría de circuitos y de la electrotecniaJorge Luis Jaramillo
 
Apuntes De Automatismos.pdf
Apuntes De Automatismos.pdfApuntes De Automatismos.pdf
Apuntes De Automatismos.pdftestgrupocomex
 
Manual autocad
Manual autocadManual autocad
Manual autocadlakuku
 
Atención,memoria y concentración
Atención,memoria y concentraciónAtención,memoria y concentración
Atención,memoria y concentraciónMaria Eugenia Morga
 

En vedette (20)

Disciplinas del IHC Presentación 2
Disciplinas del IHC Presentación 2Disciplinas del IHC Presentación 2
Disciplinas del IHC Presentación 2
 
Taller de Desarrollo de Interfaces (Conalep 2014)
Taller de Desarrollo de Interfaces (Conalep 2014)Taller de Desarrollo de Interfaces (Conalep 2014)
Taller de Desarrollo de Interfaces (Conalep 2014)
 
Taller de Desarrollo de Interfaces (UNSIS)
Taller de Desarrollo de Interfaces (UNSIS)Taller de Desarrollo de Interfaces (UNSIS)
Taller de Desarrollo de Interfaces (UNSIS)
 
2. Diseño de Interfaces (Intro)
2. Diseño de Interfaces (Intro)2. Diseño de Interfaces (Intro)
2. Diseño de Interfaces (Intro)
 
Sistemas de base de datos rob coronel 5ed
Sistemas de base de datos rob coronel 5edSistemas de base de datos rob coronel 5ed
Sistemas de base de datos rob coronel 5ed
 
Factores humanos 2do semestre iuac
Factores humanos 2do semestre iuacFactores humanos 2do semestre iuac
Factores humanos 2do semestre iuac
 
MODELOS MENTALES
MODELOS MENTALESMODELOS MENTALES
MODELOS MENTALES
 
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-trackingEvaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
 
Introducción a la programación y la informática. Tema 1
Introducción a la programación y la informática. Tema 1Introducción a la programación y la informática. Tema 1
Introducción a la programación y la informática. Tema 1
 
Tema 2. Los sistemas Interactivos: el factor humano (2013)
Tema 2. Los sistemas Interactivos: el factor humano (2013)Tema 2. Los sistemas Interactivos: el factor humano (2013)
Tema 2. Los sistemas Interactivos: el factor humano (2013)
 
Confección de interfaces de usuario con JAVA - SWING
Confección de interfaces de usuario con JAVA - SWINGConfección de interfaces de usuario con JAVA - SWING
Confección de interfaces de usuario con JAVA - SWING
 
Bases De Datos My Sql
Bases De Datos My SqlBases De Datos My Sql
Bases De Datos My Sql
 
Operaciones Basicas C++
Operaciones Basicas C++Operaciones Basicas C++
Operaciones Basicas C++
 
generalidades de la teoría de circuitos y de la electrotecnia
generalidades de la teoría de circuitos y de la electrotecniageneralidades de la teoría de circuitos y de la electrotecnia
generalidades de la teoría de circuitos y de la electrotecnia
 
Esquemas basicos automatismos
Esquemas basicos automatismosEsquemas basicos automatismos
Esquemas basicos automatismos
 
Apuntes De Automatismos.pdf
Apuntes De Automatismos.pdfApuntes De Automatismos.pdf
Apuntes De Automatismos.pdf
 
Sesión 5. atención, memoria y aprendizaje
Sesión 5. atención, memoria y aprendizajeSesión 5. atención, memoria y aprendizaje
Sesión 5. atención, memoria y aprendizaje
 
Manual autocad
Manual autocadManual autocad
Manual autocad
 
Manual de AutoCAD 2015 - Mi Avance
Manual de AutoCAD 2015 - Mi Avance Manual de AutoCAD 2015 - Mi Avance
Manual de AutoCAD 2015 - Mi Avance
 
Atención,memoria y concentración
Atención,memoria y concentraciónAtención,memoria y concentración
Atención,memoria y concentración
 

Similaire à Desarrollo de Interfaces de Usuario Basadas en Modelos

Metodologia iterativa
Metodologia iterativaMetodologia iterativa
Metodologia iterativaGRINMER
 
Curso: Diseño de apps y webs móviles - Parte 2
Curso: Diseño de apps y webs móviles - Parte 2Curso: Diseño de apps y webs móviles - Parte 2
Curso: Diseño de apps y webs móviles - Parte 2Juan Eladio Sánchez Rosas
 
Presentac..[1]
Presentac..[1]Presentac..[1]
Presentac..[1]msv3
 
Lo que te dicen y no te dicen de hacer apps móviles
Lo que te dicen y no te dicen de hacer apps móvilesLo que te dicen y no te dicen de hacer apps móviles
Lo que te dicen y no te dicen de hacer apps móvilesSoftware Guru
 
Experiencia Usuaria, mas allá de la facilidad de uso
Experiencia Usuaria, mas allá de la facilidad de usoExperiencia Usuaria, mas allá de la facilidad de uso
Experiencia Usuaria, mas allá de la facilidad de usoPercy Negrete
 
Moodle en dispositivos móviles (MoodleMoot Spain 2011)
Moodle en dispositivos móviles (MoodleMoot Spain 2011)Moodle en dispositivos móviles (MoodleMoot Spain 2011)
Moodle en dispositivos móviles (MoodleMoot Spain 2011)Juan Leyva Delgado
 
Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01hucarre
 
Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01hucarre
 
Files temarios-programa 00005611-p 5611-tem_2083
Files temarios-programa 00005611-p 5611-tem_2083Files temarios-programa 00005611-p 5611-tem_2083
Files temarios-programa 00005611-p 5611-tem_2083uiem
 
JCLIC UN JUEGO INTERACTIVO Y EDUCATIVO.
JCLIC UN JUEGO INTERACTIVO Y EDUCATIVO.JCLIC UN JUEGO INTERACTIVO Y EDUCATIVO.
JCLIC UN JUEGO INTERACTIVO Y EDUCATIVO.Verito Aldana D'Garcia
 
Taller de Desarrollo de Interfaces (UNSIJ 2017)
Taller de Desarrollo de Interfaces (UNSIJ 2017) Taller de Desarrollo de Interfaces (UNSIJ 2017)
Taller de Desarrollo de Interfaces (UNSIJ 2017) Mario A Moreno Rocha
 

Similaire à Desarrollo de Interfaces de Usuario Basadas en Modelos (20)

Enfoque transformacional
Enfoque transformacionalEnfoque transformacional
Enfoque transformacional
 
3.creacion de componentes visuales
3.creacion de componentes visuales3.creacion de componentes visuales
3.creacion de componentes visuales
 
Metodologia iterativa
Metodologia iterativaMetodologia iterativa
Metodologia iterativa
 
Project saia jenn
Project saia jennProject saia jenn
Project saia jenn
 
Project saia luis
Project saia luisProject saia luis
Project saia luis
 
Curso: Diseño de apps y webs móviles - Parte 2
Curso: Diseño de apps y webs móviles - Parte 2Curso: Diseño de apps y webs móviles - Parte 2
Curso: Diseño de apps y webs móviles - Parte 2
 
Presentac..[1]
Presentac..[1]Presentac..[1]
Presentac..[1]
 
Lenguajes de Programación: Android
Lenguajes de Programación: AndroidLenguajes de Programación: Android
Lenguajes de Programación: Android
 
Lo que te dicen y no te dicen de hacer apps móviles
Lo que te dicen y no te dicen de hacer apps móvilesLo que te dicen y no te dicen de hacer apps móviles
Lo que te dicen y no te dicen de hacer apps móviles
 
Experiencia Usuaria, mas allá de la facilidad de uso
Experiencia Usuaria, mas allá de la facilidad de usoExperiencia Usuaria, mas allá de la facilidad de uso
Experiencia Usuaria, mas allá de la facilidad de uso
 
Moodle en dispositivos móviles (MoodleMoot Spain 2011)
Moodle en dispositivos móviles (MoodleMoot Spain 2011)Moodle en dispositivos móviles (MoodleMoot Spain 2011)
Moodle en dispositivos móviles (MoodleMoot Spain 2011)
 
Tarea 1
Tarea 1Tarea 1
Tarea 1
 
Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01
 
Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01
 
Files temarios-programa 00005611-p 5611-tem_2083
Files temarios-programa 00005611-p 5611-tem_2083Files temarios-programa 00005611-p 5611-tem_2083
Files temarios-programa 00005611-p 5611-tem_2083
 
InnovaEDU
InnovaEDU InnovaEDU
InnovaEDU
 
JCLIC UNA HERRAMIENTA EFICAZ
JCLIC UNA HERRAMIENTA EFICAZ JCLIC UNA HERRAMIENTA EFICAZ
JCLIC UNA HERRAMIENTA EFICAZ
 
JCLIC Juego interactivo
JCLIC Juego interactivo JCLIC Juego interactivo
JCLIC Juego interactivo
 
JCLIC UN JUEGO INTERACTIVO Y EDUCATIVO.
JCLIC UN JUEGO INTERACTIVO Y EDUCATIVO.JCLIC UN JUEGO INTERACTIVO Y EDUCATIVO.
JCLIC UN JUEGO INTERACTIVO Y EDUCATIVO.
 
Taller de Desarrollo de Interfaces (UNSIJ 2017)
Taller de Desarrollo de Interfaces (UNSIJ 2017) Taller de Desarrollo de Interfaces (UNSIJ 2017)
Taller de Desarrollo de Interfaces (UNSIJ 2017)
 

Plus de Juan Manuel Gonzalez Calleros

Plus de Juan Manuel Gonzalez Calleros (20)

Pruebas de Software.pptx
Pruebas de Software.pptxPruebas de Software.pptx
Pruebas de Software.pptx
 
Patrón de Diseño Estrategia
Patrón de Diseño EstrategiaPatrón de Diseño Estrategia
Patrón de Diseño Estrategia
 
Modelos de desarrollo de software
Modelos de desarrollo de software Modelos de desarrollo de software
Modelos de desarrollo de software
 
05 Identificación de Tareas y Contexto de Uso (UX)
05 Identificación de Tareas y Contexto de Uso (UX)05 Identificación de Tareas y Contexto de Uso (UX)
05 Identificación de Tareas y Contexto de Uso (UX)
 
Rol del Director de Proyectos
Rol del Director de ProyectosRol del Director de Proyectos
Rol del Director de Proyectos
 
03 Introduccón a la administracion de proyectos
03 Introduccón a la administracion de proyectos03 Introduccón a la administracion de proyectos
03 Introduccón a la administracion de proyectos
 
02 Mitos de la ingeniería de software
02 Mitos de la ingeniería de software02 Mitos de la ingeniería de software
02 Mitos de la ingeniería de software
 
01 Presentacion curso ingeniería de software
01 Presentacion curso ingeniería de software01 Presentacion curso ingeniería de software
01 Presentacion curso ingeniería de software
 
Ciclo de Vida y roles
Ciclo de Vida y roles Ciclo de Vida y roles
Ciclo de Vida y roles
 
Emociones y HCI
Emociones y HCIEmociones y HCI
Emociones y HCI
 
Patrones de Interfaz de Usuario
Patrones de Interfaz de UsuarioPatrones de Interfaz de Usuario
Patrones de Interfaz de Usuario
 
Algunas Métricas de UX
Algunas Métricas de UXAlgunas Métricas de UX
Algunas Métricas de UX
 
La experiencia de Usuario: Introducción
La experiencia de Usuario: IntroducciónLa experiencia de Usuario: Introducción
La experiencia de Usuario: Introducción
 
Métodos de usabilidad
Métodos de usabilidadMétodos de usabilidad
Métodos de usabilidad
 
Guía de Técnicas de Usabilidad
Guía de Técnicas de UsabilidadGuía de Técnicas de Usabilidad
Guía de Técnicas de Usabilidad
 
Mapas de Empatía, Personas e Historias de Usuario
Mapas de Empatía, Personas e  Historias de UsuarioMapas de Empatía, Personas e  Historias de Usuario
Mapas de Empatía, Personas e Historias de Usuario
 
Guía de Entrevistas
Guía de Entrevistas Guía de Entrevistas
Guía de Entrevistas
 
Hacia un modelo educativo centrado en el alumno
Hacia un modelo educativo centrado en el alumnoHacia un modelo educativo centrado en el alumno
Hacia un modelo educativo centrado en el alumno
 
Técnicas de Recolección de necesidades
Técnicas de Recolección de necesidadesTécnicas de Recolección de necesidades
Técnicas de Recolección de necesidades
 
Framework MDE
Framework MDEFramework MDE
Framework MDE
 

Dernier

Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxdkmeza
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfPaolaRopero2
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMarjorie Burga
 
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática4    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática4    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
Imperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperioImperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperiomiralbaipiales2016
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 
Criterios ESG: fundamentos, aplicaciones y beneficios
Criterios ESG: fundamentos, aplicaciones y beneficiosCriterios ESG: fundamentos, aplicaciones y beneficios
Criterios ESG: fundamentos, aplicaciones y beneficiosJonathanCovena1
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.amayarogel
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfNancyLoaa
 
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptxORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptxnandoapperscabanilla
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónLourdes Feria
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
actividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoactividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoJosDanielEstradaHern
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Carlos Muñoz
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...JonathanCovena1
 

Dernier (20)

Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptx
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grande
 
Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.
 
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática4    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática4    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
 
Imperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperioImperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperio
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
Criterios ESG: fundamentos, aplicaciones y beneficios
Criterios ESG: fundamentos, aplicaciones y beneficiosCriterios ESG: fundamentos, aplicaciones y beneficios
Criterios ESG: fundamentos, aplicaciones y beneficios
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdf
 
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptxORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
actividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoactividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° grado
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 

Desarrollo de Interfaces de Usuario Basadas en Modelos

  • 1. Desarrollo de Interfaces de Usuario Basadas en Modelos Dr. Juan Manuel González Calleros juan.gonzalez@cs.buap.mx @Juan__Gonzalez 1 CONACIC 2011 @Juan__Gonzalez
  • 2. Plan Complejidad del Desarrollo de Interfaces de Usuario Diseño Basado en Modelos como Solución Ejemplo Práctico Conclusiones 2 CONACIC 2011 @Juan__Gonzalez
  • 3. Complejidad del Desarrollo de IU 3 CONACIC 2011 @Juan__Gonzalez
  • 4. Plataformas heterogéneas (1) CONACIC 2011 4 @Juan__Gonzalez
  • 5. Diversidad de usuarios (2) Usuarios “Tradicionales” Sin ninguna discapacidad Personas con discapacidad Visual, motora, cognitiva Diversidad Cultural CONACIC 2011 5 @Juan__Gonzalez
  • 6. Multiplicidad de Modalidades de Interacción (3) [Stephanidis,2001] CONACIC 2011 6 @Juan__Gonzalez
  • 7. Control de aspectos dinámicos (4) Realidad Mixta CONACIC 2011 7 @Juan__Gonzalez
  • 8. Multiplicidad de Ambientes de trabajo (5) CONACIC 2011 8 @Juan__Gonzalez
  • 9. Incluir Aspectos de Usabilidad en el desarrollo (6) CONACIC 2011 9 @Juan__Gonzalez
  • 10. Mayor reto hoy en día proliferación de desarrollos Plataforma#1 Plataforma #2 Plataforma #3 Plataforma#4 Aplicación 1 IU #1 IU #2 IU #3 IU #4 Aplicación 2 IU #5 IU #6 IU #7 IU #8 Aplicación 3 IU #9 IU #10 IU #11 IU #12 Modelo Plataforma #1 Plataforma #1 Aplicación 1 IU modelo #1 Modelo Plataforma #2 Plataforma #2 Aplicación 2 IU modelo #2 Modelo Plataforma #3 Plataforma #3 Aplicación 3 IU modelo #3 Modelo Plataforma #4 Plataforma #4 CONACIC 2011 10 Proliferación de desarrollos [Abrams et al.,2001] @Juan__Gonzalez
  • 11. ¿Cuál es la situación actual? Los aspectos tecnológicos del desarrollo de Interfaces de Usuario (IU) progresan de forma significativa mas rápido que: 1. Los aspectos relacionados con la ingeniería de software Toma tiempo desarrollar una IU para un nuevo dispositivo, una nueva técnica de interacción Toma mas tiempo hacer un toolkit para ese propósito Toma aun mas tiempo basarte en un desarrollo basado en modelos 2. Los aspectos de ingeniería de usabilidad Una nueva IU es entregada con problemas de usabilidad ya que Poca o nula experiencia previa No hay evidencia empírica pasada Los experimentos empíricos requieren de muchos recursos si se hace de buena manera CONACIC 2011 11 @Juan__Gonzalez
  • 12. Diseño basado en modelos como solución CONACIC 2011 12 @Juan__Gonzalez
  • 13. ¿Qué es el diseño basado en modelos? El diseño basado en modelos consiste en Describir la IU en un modelo de IU Basarse en este modelo para guiar el ciclo de vida de desarrollo de IU Mientras se siguen las siguientes metas: Generar ambientes de desarrollo de IU compresibles Soporte robusto al ciclo de vida de desarrollo de IU Mejorar la portabilidad Integrar la usabilidad en el desarrollo de IU 13 CONACIC 2011 @Juan__Gonzalez
  • 14. ¿Qué es el diseño basado en modelos? Una estructura de 3 dimensiones CONACIC 2011 14 @Juan__Gonzalez
  • 15. ¿Qué es el diseño basado en modelos? Una estructura de 3 dimensiones CONACIC 2011 15 @Juan__Gonzalez
  • 16. Widgets independientes de la tecnología Porqué hay muchos lenguajes o representaciones para ejecutar una tarea Por que el mismo widget aparece en diferentes tecnologías Check Box XmToggleButton BoxArray (Windows) (OSF-Motif) (Garnet) Por que hay muchas formas de alcanzar un objetivo (e.g., selector) CONACIC 2011 16 @Juan__Gonzalez
  • 17. Widgets independientes de la tecnología La interfaz final (FUI) Cualquier lenguaje: (X)HTML, Java, Visual Basic, C++ Cualquier plataforma de computo: Windows, Linux, MacOS Es abstraída en un modelo concreto (CUI) Independiente del lenguaje Independiente de la plataforma Dependiente de la modalidad de interacción Vocal, 3D, GUI Concrete user Interface S Final user Interface S CONACIC 2011 17 @Juan__Gonzalez
  • 18. Requerimos soluciones más generales IU no sólo son gráficas, si no que pueden ser vocales, táctiles, 3D, hapticas, multimodales Entonces, hay necesidad de hacer mayores abstracciones Abstract Container Abstract Individual Component with Output Abs. Ind. Comp. with Input Abs. Ind. Comp. with Control CONACIC 2011 18 @Juan__Gonzalez
  • 19. Modelos independientes de la modalidad de Interacción Con este segundo nivel de abstracción, se va de lo concreto (CUI) a lo abstracto (AUI) Consecuentemente, una AUI es independiente de Cualquier modalidad de interacción Abstract user Interface S Concrete user Interface S Final user Interface S CONACIC 2011 19 @Juan__Gonzalez
  • 20. Requerimos plantear el problema más general IUs, incluso si son abstractas, están estructuradas acorde al sistema objetivo lo que va en contra del paradigma centrado en el Task and Domain S usuario Entonces, hay necesidad de modelar los problemas independientemente de la Abstract user Interface S plataforma de computo Modelos de Tarea y datos (UML Class Diagram) Con este tercer conjunto de abstracciones, Concrete user Interface S pasamos del modelo AUI al de tareas y datos (T+D) Consecuentemente, el T+D es independiente Final user Interface S de cualquier implementación de computo CONACIC 2011 20 @Juan__Gonzalez
  • 21. Hay que tomar en cuenta el contexto de uso •El contexto de uso que se define como el usuario, el dispositivo y el ambiente de trabajo Location Role Device Experience Deportivo Programa de viaje multimedia Trabajo Sitio de reserva de viajes Interfaz avanzada para operaciones complejas Viaje Notificaciones de reservas Conecctvidad donde sea para la transferencia de datos simples Familia TV es el dispotivo familiar #1 CONACIC 2011 21 @Juan__Gonzalez
  • 22. Que tenemos hasta ahora Marco de Referencia Cameleon Contexto de uso User S Plataforma SEnvironment S http://www.plasticity.org [Calvary et al.,2003] Task and Domain S UsiXML supported model Abstract user Interface S Concrete user Reification Interface S Abstraction Final user Reflexion Interface S CONACIC 2011 22 @Juan__Gonzalez
  • 23. ¿Qué es el diseño basado en modelos? Una estructura de 3 dimensiones CONACIC 2011 23 @Juan__Gonzalez
  • 24. MDE basado en UsiXML MDA Componentes Computing Plataforma Plataforma Independent Model to Model Independent Model to Model Specific Model to Code Model (CIM) Model (PIM) Model (PSM) Source code Tecnicas propuestas en UsiXML UsiXML UsiXML model: UsiXML model: models: task, Graph Abstract user Graph Concrete user Final user transformations transformations Rendering domain interface interface interface CONACIC 2011 24 @Juan__Gonzalez
  • 25. MDE basado en UsiXML S=Source context of use T=Target context of use Industrial applications Public applications User S Platform S Environment S User T Platform T Environment T is applied on UI Development methodology Computing Task and Task and Independent Domain S Domain T Software tools Model (CIM) support Step-wise method Abstract User Abstract User involves Interface S Interface T Models Platform Independent described Model (PIM) UsiXML Language in Reification Concrete User Concrete User is submitted to Interface S Interface T Platform Specific Abstraction Model (PSM) Standardisation actions: W3C, OASIS, MAUSE, Reflexion ISO 24744 Final User Final User Final code Interface S Interface T Translation Cameleon Reference Framework [Calv03] CONACIC 2011 25 @Juan__Gonzalez
  • 26. Ejemplo simple S=Source context of use T=Target context of use User S Plataforma S Environment S User T Plataforma T Environment T Task and Task and Domain S Domain T UsiXML supported model Abstract user Abstract user Interface S Interface T UsiXML unsupported model Concrete user Concrete user Reification Interface S Interface T Abstraction Reflexion Final user Final user Interface S Interface T Translation CONACIC 2011 26 @Juan__Gonzalez
  • 27. Ejemplo simple CONACIC 2011 27 @Juan__Gonzalez
  • 28. Ejemplo simple CONACIC 2011 28 @Juan__Gonzalez
  • 29. Ejemplo simple CONACIC 2011 29 @Juan__Gonzalez
  • 30. Ejemplo simple CONACIC 2011 30 @Juan__Gonzalez
  • 31. Una descripción – Muchas representaciones CONACIC 2011 31 @Juan__Gonzalez
  • 32. Tomando en cuenta el contexto de uso Propiedades de plasticidad = adaptación al contexto de uso mientras satisface propiedades de usabilidad [Grolaux et al.,2002] CONACIC 2011 32 @Juan__Gonzalez
  • 33. Escenario-Multi-plataforma para Emergencias Tres plataformas Pocket PC Desktop PC Wall Screens CONACIC 2011 33 @Juan__Gonzalez
  • 34. Escenario Múltiples usuarios Paciente ¿Como resolver este Doctor problema ? Recepcionista Enfermero Radiólogo .. Múltiples ambientes Sala de espera Quirófano Consultorio 34 CONACIC 2011 @Juan__Gonzalez
  • 35. Solución Propuesta Modelo y método Diseñar primero la pantalla de referencia Refinar las otras pantallas después Aplicando degradación gradual (se vera a detalle mas adelante) Aplicando técnicas de transformación Énfasis también fue puesto sobre los iconos usados CONACIC 2011 35 @Juan__Gonzalez
  • 36. Usando técnicas de degradación gradual de la IU se lograron las diferentes versiones de pantallas, menús grandes fueron modificados por menús más pequeños, con herramientas y reglas de degradación agradable CONACIC 2011 36 [Florins & Vanderdonckt,2004] @Juan__Gonzalez
  • 37. Video Clinica – Poly Medis 37 CONACIC 2011 @Juan__Gonzalez
  • 38. [Grolaux & Vanderdonckt,2005] Problema: cómo diseñar una IU que tome en cuenta múltiples pantallas? Solución: Migración = DEMIPLAT DistriXML = arquitectura de software para migración de una plataforma a otra en tiempo de ejecución Painting Pencil Painting tool Palette CONACIC 2011 38 @Juan__Gonzalez
  • 39. Así luce la aplicación CONACIC 2011 39 @Juan__Gonzalez
  • 40. UI Migration: DEMIPLAT Detach CONACIC 2011 40 @Juan__Gonzalez
  • 41. UI Migration: DEMIPLAT Detach - Migrate CONACIC 2011 41 @Juan__Gonzalez
  • 42. UI Migration: DEMIPLAT Detach - Migrate - Plastify CONACIC 2011 42 @Juan__Gonzalez
  • 43. UI Migration: DEMIPLAT Detach - Migrate - Plastify - Attach CONACIC 2011 43 @Juan__Gonzalez
  • 44. Esto no es una toolbar flotante es un control independiente Process CONACIC 2011 44 @Juan__Gonzalez
  • 45. Esto Migración de la IU Computer A Computer B Process Process CONACIC 2011 45 @Juan__Gonzalez
  • 46. ¿Qué es el diseño basado en modelos? Una estructura de 3 dimensiones CONACIC 2011 46 @Juan__Gonzalez
  • 47. Enfoque de Ingeniería de Lenguajes UsiXML es diferente de cualquier otro lenguaje de desarrollo de sistemas ya que sirve también como lenguaje de especificación. La meta más importante del lenaguje no sólo es la generación de código sino además tener la capacidad de hacer rasonamientos sobre la especificaciones de la IU: Verificación de modelos Evaluación de IU Desarrollo sistemático (model-driven engineering) Almacenamiento de un repositorio de casos de uso o patrones de IU Análisis estático y dinámico Pruebas de modelos CONACIC 2011 47 @Juan__Gonzalez
  • 48. Principios de ingeniería de lenguaje Semántica: meta modelos como diagramas UML 48 CONACIC 2011 @Juan__Gonzalez
  • 49. Principios de ingeniería de lenguaje Semántica: meta modelos como diagramas UML Sintaxis: lenguaje UsiXML Abstracta XML schema CONACIC 2011 49 @Juan__Gonzalez
  • 50. Principios de ingeniería de lenguaje C2: Se requiere cubrir Root Semántica: meta modelos como diagramas UML Sintaxis: insert search criteria view results lenguaje UsiXML Estilística: ¿Qué Notación edit submit aux show gráfica para criteria item tus modelos? edit submit details show list items select item insert criteria show show select view details view items view results CONACIC 2011 50 @Juan__Gonzalez
  • 51. ¿Qué es el diseño basado en modelos? Una estructura de 3 dimensiones CONACIC 2011 51 @Juan__Gonzalez
  • 52. Herramientas MethodiXML TransformiXML FlashiXML IdealXML QtkXML JaviXML Rendering UsiXML UsiXML model: UsiXML model: models: task, Graph Abstract user Graph Concrete user Generative Final user domain transformations interface transformations interface programming interface VisualiXML Derivation rules KnowiXML GrafiXML ReversiXML VisiXML SketchiXML FormiXML CONACIC 2011 52 @Juan__Gonzalez
  • 53. Lo más complejo del MBUID Esfuerzo incremental y motores de render UsiXML interpretes para Interfaces de Usuario Grafica: XHTML, XUL, Java, Flash, Tcl-Tk Interfaces de Usuario Vocal : VoiceXML Interfaces de Usuario Multimodal : X+V Interfaces de Usuario Hapticas : HaptiXML Soporte para Interfaces de Usuario Distribuidas Interfaces de Usuario de Realidad Mixta Interfaces de Usuario 3D CONACIC 2011 53 @Juan__Gonzalez
  • 54. Sistema de prototipos para IU 54 CONACIC 2011 @Juan__Gonzalez
  • 55. IdealXML CONACIC 2011 55 [Montero,2005] @Juan__Gonzalez
  • 56. Modelos de mapeo These mappings can be established: triggers (tg): { , }x updates (up): x observes (ob): x isExecutedIn (ex): x manipulates (ma): { , }x CONACIC 2011 56 [Montero,2005] @Juan__Gonzalez
  • 57. GrafiXML- Pestaña de Diseño Components options Components Design window toolbar CONACIC 2011 57 @Juan__Gonzalez
  • 58. GrafiXML- Lenguaje GrafiXML permite la creación de GUI multi – idiomas El idioma es un elemento del contexto de uso Soporta mnemonicos y shortcuts CONACIC 2011 58 @Juan__Gonzalez
  • 59. GrafiXML- Vista Previa con ejemplo de múltiples idiomas CONACIC 2011 59 @Juan__Gonzalez
  • 60. GrafiXML- Soporte a Multi Dispositivos CONACIC 2011 60 @Juan__Gonzalez
  • 61. Ejemplo Práctico Aplicación del diseño basado en Modelos para cabinas de pilotaje 61 CONACIC 2011 @Juan__Gonzalez
  • 62. El problema El porcentaje de accidentes aéreo es estable, varia entre 3 y 4 accidentes por millón de salidas Para el futuro se anticipa un aumenta en el volumen de vuelos En consecuencia se espera tener un accidente serio cada semana si no se logra reducir el procentaje de accidentes 55% de los accidentes involucra a la tripulación CONACIC 2011 62 @Juan__Gonzalez
  • 63. El problema La principal causa son errores humanos Incremento en la automatización del vuelo Piloto se olvida de volar Exceso de confianza sobre las maquinas Sorpresas que los sistemas no consideran Tomar en cuanta factores humano en el diseño de sistemas es crucial CONACIC 2011 [Osterloh 2011] 63 @Juan__Gonzalez
  • 64. El problema Tenemos que tomar en cuenta al piloto (usuario) en la fases de desarrollo de un avión Hay que reducir el porcentaje de errores humanos Los sistemas de automatización de cabinas de pilotaje han contribuido de forma notable a la reducción de este porcentaje CONACIC 2011 64 @Juan__Gonzalez
  • 65. El problema Pilotos Son difíciles de conseguir, tienen una agenda muy apretada Son muy caros, usarlos para hace pruebas sobre prototipos tiene un costo prohibitivo Sistemas de Pruebas (Simuladores) Caros Difícil acceso Pilotos + Sistemas de Pruebas Exclusivo para centro muy especializados 65 CONACIC 2011 @Juan__Gonzalez
  • 66. Propuesta de Solución Crear un modelo cognitivo de la tripulación Piloto Volando (PF) y Piloto no Volando (PNF) para reducir necesidad de usar pilotos reales Herramientas de software para dar soporte Simulador de sistema de vuelo Desarrollo basado en modelos de la ergonomía de las interfaces Con esto se espera predecir ciertos comportamientos del piloto que causen errores y diseñar sistemas que los prevengan 66 CONACIC 2011 @Juan__Gonzalez
  • 67. Que tipo de errores comete el piloto Se aburre y no sigue el procedimiento Sobre carga de información y omite mensajes de alerta importantes que lo hace no seguir los procedimientos [Osterloh 2011] Acciones Predicción de Reales Acciones 67 CONACIC 2011 @Juan__Gonzalez
  • 68. La arquitectura Cognitiva Modela el comportamiento humano tomando en cuenta factores: Psicológicos búsqueda en la memoria Olvido procesamiento de conocimiento) Fisiológicos movimiento de ojos Manos voz pies 68 CONACIC 2011 @Juan__Gonzalez [Osterloh 2011]
  • 69. La Interfaz de Usuario requiere un modelo CONACIC 2011 69 @Juan__Gonzalez
  • 70. Task & Concepts Abstract User Interfaz para navegación Interface Concrete User Interface Final User Interface 70 CONACIC 2011 @Juan__Gonzalez
  • 71. Task & Concepts Layout-Interfaz para navegación Abstract User Interface Concrete User Interface Final User Interface 71 CONACIC 2011 @Juan__Gonzalez
  • 72. Task & Concepts Plano de la IU Abstract User Interface Concrete User Interface Final User Interface 72 CONACIC 2011 @Juan__Gonzalez
  • 73. Task & Concepts Semántica del modelo de IU Abstract User w in d o w Interface w i n d o w L e ftM a r g i n : i n te g e r b o rd e rB o x w i n d o w T o p M a r g i n : i n te g e r 1 is R e s iza b le : b o o le a n 0 ..1 to p B o x 1 1 1 1 Concrete 0 ..1 User Interface 0 ..1 0 . .1 b o tto m B o x r i g h tB o x l e ftB o x b u tto n Final User b u t to n Interface b u tto n b u t to n b u t to n m enu m e n u It e m p o p U p M e n u : b o o le a n ty p e : s t r i n g to o l B a r M e n u : b o o l e a n m e n u It e m m e n u Ite m ty p e : s t r i n g t y p e : s tr i n g m e n u Ite m m e n u Ite m t y p e : s tr i n g m e n u Ite m m e n u It e m t y p e : s tr i n g t y p e : s tr i n g ty p e : s t r i n g 73 CONACIC 2011 @Juan__Gonzalez
  • 74. Task & Concepts Ingeniería Inversa-Interfaz Abstracta Abstract User Interface Concrete User Interface Final User Interface 74 CONACIC 2011 @Juan__Gonzalez
  • 75. Task & Ingeniería Inversa-Modelo de Concepts Tareas Abstract User Interface Concrete User Interface Final User Interface 75 CONACIC 2011 @Juan__Gonzalez
  • 76. A partir de este modelo se pueden generar muchas soluciones 76 CONACIC 2011 @Juan__Gonzalez
  • 77. Pruebas de usabilidad de IUs A representa la Interfaz de usuario tal cual es usada en un tiempo n B representa una de tantas posibles variantes de la interfaz para Page 77 CONACIC 2011 misma@Juan__Gonzalez ejecutar la tarea
  • 78. Pruebas de usabilidad de IUs La trayectoria es más visible si usamos un control de checkboxes 78 CONACIC 2011 @Juan__Gonzalez
  • 79. Conclusiones MBUI Logros y Fracasos 79 CONACIC 2011 @Juan__Gonzalez
  • 80. Conclusion Puede realmente darse soporte a todo esto usando el enfoque MBUI interface Aplicación logic User 16000 14000 12000 Generated code 10000 Word 8000 6000 4000 Models 2000 0 KB Query Update Actions UI states KB Parser Interactions Presentation Network ops. CONACIC 2011 80 [Skezely,1996] @Juan__Gonzalez
  • 81. Conclusion Éxitos: Funciona muy bien en dominios bien definidos Favorece la colaboración Soporta flexibilidad, mantenimiento Fallas No funciona para IU complejas y muy dinámicas Requiere mucho trabajo Modelos (algo) Método (más) Herramienta (aún más) Support for mnemonics and shortcuts CONACIC 2011 81 @Juan__Gonzalez
  • 82. ¿Por qué debería ser el desarrollo de Interfaces de Usuario un proceso formal? Para mantener la consistencia entre la diferentes herramientas de software y así favorecer: Modificaciones: Si hay un cambio en el modelo entonces la IU cambia. Manejo de Complejidad: Dado que una IU es parte de un sistema, pudiera representarse con gran cantidad de código. Las herramientas de diseño y construcción de la IU deben proveer mecanismos para enfrentar dicha complejidad así como ser confiables. Seguridad en sistemas críticos: Los modelos favorecen la inspección e investigación del comportamiento de la funcionalidad del sistema. El uso de una herramienta formal es extremadamente valiosa ya provee una forma de expresar un sistema de forma: no ambigua, completa y concisa. Rigurosa: El ciclo de desarrollo de IU debe tener el mismo nivel de rigor que lo que se usa para la ingeniería de software. CONACIC 2011 82 @Juan__Gonzalez
  • 83. ¿Por qué debería ser el desarrollo de Interfaces de Usuario un proceso formal? Razonar sobre modelos es posible para: Evaluación automática. Un sistema de computo podría analizar datos relacionados con una IU y predecir su comportamiento. Análisis sobre producción de errores. Los modelos pueden ser procesados y estudiados. Verificar propiedades. Análisis de los efectos producidos por diferentes IU modificando propiedades de componentes, por ejemplo, cambiar el color de fondo (background), tipos de letras, etc. Que nos comuniquemos los humanos. Los modelos pueden y deberían tener como propiedad de ser comprensible por los humanos y como tales servir de medio de discusión entre expertos y usuarios. CONACIC 2011 83 @Juan__Gonzalez
  • 84. ¿Por qué tendríamos que estandarizar un método de desarrollo de IU? Un estándar permitiría: Comunicación: Diferentes herramientas de software requieren de un estándar como canal de comunicación. Consistencia. Diferentes herramientas requieren de un estándar para que la información que comparten sea consistente. Conocimiento común: al recaer sobre un estándar diferentes herramientas podrían compartir conocimiento de la IU, formulación de tareas, procesos pudieran incluir conocimiento de la IU, incluso modelos cognitivos para predecir comportamiento de usuarios requieren el conocimiento de la IU. Escalabilidad (los modelos pueden crecer más fácilmente al paso del tiempo en comparación del código): un modelo bien estructurado puede incrementarse mejor. CONACIC 2011 84 @Juan__Gonzalez
  • 85. Hacia donde va la evolución de los lenguajes para definir IU Hoy Programming languages: Visual Basic, Java, C++, Markup languages: HTML, XUL, Mañana Multimodal interfaces: XHTML + VoiceXML = X+V Vectorial interfaces: SVG, LZX Virtual reality interfaces: VRML97, XVRML 3D user interfaces: X3D, MEL Tabletop interface: OpenGL Muchas modalidades han llegado Conclusión Es imposible evolucionar/sobrevivir sin un enfoque de modelado, incluso para las interfaces de usuario También se requiere progresar en el proceso de diseño CONACIC 2011 85 @Juan__Gonzalez
  • 86. Síguenos en las redes sociales @usixml http://www.facebook.com/UsiXML 86 CONACIC 2011 @Juan__Gonzalez
  • 87. ¿Les gustaría participar? ¡Únete al consorcio UsiXML hoy! www.usixml.eu El tema será ampliamente cubierto en 2012 OPT.TOPIC.SELECT.COMPUTAC. II (LCC 595 ) sección 101 NRC 40550 La platica estará disponible http://buap.academia.edu/JuanGonzalez Contacto en la facultad Dra. Josefina Guerrero-García jguerrero@cs.buap.mx Dr. Juan Manuel González-Calleros juan.gonzalez@cs.buap.mx @Juan__Gonzalez CONACIC 2011 87 @Juan__Gonzalez
  • 88. Muchas Gracias por su atención Preguntas “La persona más inteligente no es aquella que tiene las mejores respuestas sino aquella que hace las preguntas correctas" (Voltaire) Dr. Juan Manuel González Calleros Benemérita Universidad Autónoma de Puebla juan.gonzalez@cs.buap.mx Twitter: @Juan__Gonzalez Page 88 CONACIC 2011