SlideShare a Scribd company logo
1 of 32
Download to read offline
Animated	
  TransiSons	
  between	
  
           User	
  Interface	
  Views	
  
     Charles-­‐Eric	
  Dessart,	
  Vivian	
  Genaro	
  Mo6,	
  Jean	
  Vanderdonckt	
  
                                                 	
  

                             Louvain	
  School	
  of	
  Management	
  
                            Université	
  catholique	
  de	
  Louvain	
  	
  
           Place	
  des	
  Doyens,	
  1	
  –	
  B-­‐1348	
  Louvain-­‐la-­‐Neuve,	
  Belgium	
  	
  
                            Vivian.genaromoG@uclouvain.be	
  
jean.vanderdonckt@uclouvain.be	
  –	
  hLp://www.uclouvain.be/jean.vanderdonckt	
  	
  
Louvain	
  InteracSon	
  Laboratory	
  
               (LILab)	
  
                                            	
  
                                              	
  

   Place	
  des	
  Doyens,	
  1	
  –	
  B-­‐1348	
  Louvain-­‐la-­‐Neuve,	
  Belgium	
  	
  
hGp://www.lilab.be,	
  hGp://www.lilab.eu,	
  hGp://www.lilab.info	
  	
  
PresentaSon	
  outline	
  
      ü  MoSvaSons	
  
      ü  Basic	
  concepts	
  
      ü  Background	
  on	
  UI	
  views	
  
         ü    Models	
  and	
  language	
  
         ü    Method	
  
         ü    SoWware	
  support	
  

      ü  Future	
  work	
  




                                         AVI'2012 - Capri, May 21-25, 2012
MoSvaSons	
  
     ü  SoWware	
  development	
  life	
  cycle	
  typically	
  involves	
  many	
  
         steps	
  at	
  various	
  levels	
  of	
  abstracSon	
  
         ü      In	
  Model-­‐Driven	
  Architecture	
  (MDA),	
  3	
  levels	
  of	
  abstracSon	
  
               ü       CompuSng-­‐Independent	
  Model	
  (CIM)	
  
               ü       PlaZorm-­‐Independent	
  Model	
  (PIM)	
  
               ü       PlaZorm-­‐Specific	
  Model	
  (PSM)	
  

     ü  User	
  Interface	
  (UI)	
  development	
  life	
  cycle	
  is	
  similar	
  
         ü      In	
  UI	
  development	
  according	
  to	
  Cameleon	
  Reference	
  Framework	
  
                 (CRF),	
  4	
  levels	
  of	
  abstracSon	
  
               ü       Task	
  and	
  domain	
  models	
  
               ü       Abstract	
  User	
  Interface	
  (AUI)	
  model	
  
               ü       Concrete	
  User	
  Interface	
  (CUI)	
  model	
  
               ü       Final	
  User	
  Interface	
  
         ü      In	
  Model-­‐based	
  UI	
  design,	
  the	
  mapping	
  problem	
  
               ü       Task,	
  domain,	
  presentaSon,	
  dialog,	
  help,	
  tutorial	
  

                                                   AVI'2012 - Capri, May 21-25, 2012
MoSvaSons	
  
     ü  TransiSon	
  between	
  steps,	
  levels	
  is	
  hard	
  to	
  grasp	
  
         (imagine,	
  understand,	
  maintain,	
  evolve)	
  
         ü      Models	
  found	
  at	
  each	
  level	
  are	
  different:	
  concepts,	
  relaSonships,	
  
                 and	
  aLributes	
  are	
  different	
  
         ü      Models	
  may	
  have	
  different	
  views	
  depending	
  on	
  
               ü     The	
  stakeholder	
  (designer,	
  markeSng,	
  end	
  user)	
  
               ü     The	
  step	
  (e.g.,	
  early	
  design	
  vs	
  advanced	
  design)	
  
               ü     The	
  concepts	
  (e.g.,	
  level	
  of	
  details)	
  
         ü      TransiSons	
  between	
  models	
  are	
  complex	
  
               ü     E.g.,	
  mappings,	
  transformaSons	
  in	
  MDA	
  

     ü  Consequences	
  
         ü      Mode	
  switching	
  is	
  frequent	
  
         ü      CogniSve	
  load	
  is	
  high	
  
         ü      Learning	
  curve	
  is	
  slow	
  

                                                   AVI'2012 - Capri, May 21-25, 2012
Basic	
  concepts	
  
      ü  3	
  types	
  of	
  representaSon:	
  
          ü    Internal:	
  UI	
  code	
  (in	
  programming	
  of	
  markup	
  language)	
  
          ü    External:	
  UI	
  as	
  experienced	
  by	
  the	
  end	
  user	
  
          ü    Conceptual:	
  UI	
  representaSon	
  abstracted	
  from	
  the	
  UI	
  code	
  
                ü SemanScs	
  
                ü Syntax	
  
                ü StylisScs	
  


                                             Concep-
                                            tual view


                               External                        Internal
                                 view                            view




                                           AVI'2012 - Capri, May 21-25, 2012
Basic	
  concepts	
  
      ü  Possible	
  transiSons	
  between	
  representaSons:	
  
         ü    From	
  Conceptual	
  to	
  
               ü Internal:	
  e.g.,	
  to	
  generate	
  UI	
  code	
  from	
  models	
  
               ü External:	
  e.g.,	
  to	
  render	
  a	
  UI	
  from	
  its	
  model	
  
         ü    From	
  Internal	
  to	
  
               ü External:	
  e.g.,	
  to	
  compile/interpret	
  a	
  UI	
  from	
  its	
  code/markup	
  
               ü Conceptual:	
  e.g.,	
  UI	
  reverse	
  engineering	
  


                                              Concep-
                                             tual view


                               External                        Internal
                                 view                            view




                                           AVI'2012 - Capri, May 21-25, 2012
Basic	
  concepts	
  
      ü  Possible	
  transiSons	
  between	
  representaSons:	
  
         ü    From	
  External	
  to	
  
               ü Internal:	
  e.g.,	
  to	
  draw	
  a	
  UI	
  and	
  to	
  generate	
  code	
  from	
  drawing	
  
               ü Conceptual:	
  e.g.,	
  to	
  infer	
  a	
  UI	
  model	
  from	
  look	
  and	
  feel	
  




                                                 Concep-
                                                tual view


                                External                          Internal
                                  view                              view




                                              AVI'2012 - Capri, May 21-25, 2012
Basic	
  concepts	
  
      ü  Loops	
  on	
  representaSons:	
  
         ü    From	
  Conceptual	
  to	
  Conceptual:	
  e.g.,	
  M2M	
  in	
  MDE	
  
         ü    From	
  Internal	
  to	
  Internal:	
  e.g.,	
  UI	
  transcoding	
  
         ü    From	
  External	
  to	
  External:	
  e.g.,	
  image	
  processing	
  techniques	
  




                                             Concep-
                                            tual view


                              External                        Internal
                                view                            view




                                          AVI'2012 - Capri, May 21-25, 2012
Background	
  on	
  UI	
  views	
  
            ü  Typical	
  configuraSon	
  in	
  Integrated	
  Development	
  
                Environments	
  
External view:
  final user
   interface




 Conceptual
    view:
 hierarchical
                                                                             Internal view:
 description
                                                                             user interface
                                                                                code and
                                                                               properties




                                         AVI'2012 - Capri, May 21-25, 2012
Background	
  on	
  UI	
  views	
  
            ü  FormsVBT	
  [Avrahami89]	
  synchronizes	
  2	
  UI	
  views	
  




Internal view:
                                                                            External view:
  LaTex-like
                                                                               final user
  description
                                                                                interface
                                                                            (with structure)



                                                                            External view:
                                                                              final user
                                                                               interface
                                                                               (without
                                                                              structure)



                                        AVI'2012 - Capri, May 21-25, 2012
Background	
  on	
  UI	
  views	
  
           ü  Vista	
  [Brown98]	
  synchronizes	
  2	
  UI	
  views	
  in	
  4	
  windows	
  

                                                                                 Conceptual view:
 Conceptual
                                                                                    task model
 view: task
                                                                                   (UAN tables)
 model (UAN
  hierarchy)




                                                                                 Internal view:
                                                                                   Clock code

   Internal
 view: Clock
 architecture




                                             AVI'2012 - Capri, May 21-25, 2012
Background	
  on	
  UI	
  views	
  
           ü  TADEUS++	
  [Stary00]	
  provides	
  3	
  views	
  

                                                                           Internal view:
                                                                             final user
                                                                              interface
                                                                          (with structure)


                                                                          External view:
  Conceptual                                                                 final user
view: domain                                                                  interface
 model (UML                                                               (with structure)
Class Diagram)




                                      AVI'2012 - Capri, May 21-25, 2012
Background	
  on	
  UI	
  views	
  
            ü  TADEUS++	
  [Stary00]	
  provides	
  3	
  views	
  
                                                                      Conceptual view:
                                                                          final user
                                                                           interface
                                                                       (with structure)




  Conceptual
 view: domain                                                                               Conceptual
model (Object                                                                               view: user
oriented model)                                                                                model




                                                                                    Conceptual
                                                                                    view: task
                                                                                       model




                                       AVI'2012 - Capri, May 21-25, 2012
Background	
  on	
  UI	
  views	
  
             ü  Teallach	
  [Griffith00]	
  has	
  2	
  views:	
  domain	
  and	
  task,	
  UI	
  




Conceptual                                                                         Conceptual view:
view: task                                                                             final user
   model                                                                                interface
                                                                                    (with structure)




                                               AVI'2012 - Capri, May 21-25, 2012
Background	
  on	
  UI	
  views	
  
           ü  IdealXML	
  [Montero06]	
  has	
  conceptual	
  views	
  


                                                                        Conceptual view:
                                                                          task model


  Conceptual
view: domain
 model (UML
Class Diagram)




                                                                          Conceptual
                                                                        view: abstract
                                                                         user interface
                                                                        (with structure)




                                    AVI'2012 - Capri, May 21-25, 2012
Background	
  on	
  UI	
  views	
  
           ü  IdealXML	
  [Montero06]	
  links	
  views	
  by	
  a	
  table	
  


                                                                            Conceptual view:
                                                                              task model


  Conceptual
view: domain                                                                  Conceptual
 model (UML                                                                 view: abstract
Class Diagram)                                                               user interface
                                                                            (with structure)




                                        AVI'2012 - Capri, May 21-25, 2012
Background	
  on	
  UI	
  views	
  
           ü  GEF3D	
  [von	
  Pilgrim	
  08]	
  synchronizes	
  3	
  views	
  




                                                                            External view:
  Conceptual
                                                                              final user
view: domain
                                                                               interface
 model (UML
                                                                               (without
Class Diagram)
                                                                              structure)




                                                                            External view:
                                                                               final user
                                                                                interface
                                                                            (with structure)




                                        AVI'2012 - Capri, May 21-25, 2012
Background	
  on	
  UI	
  views	
  
           ü  GEF3D	
  [von	
  Pilgrim	
  08]	
  synchronizes	
  3	
  views	
  



                                                                            External view:
                                                                              final user
                                                                               interface
                                                                               (without
  Conceptual
                                                                              structure)
view: domain
 model (UML
Class Diagram)




                                                                            External view:
                                                                               final user
                                                                                interface
                                                                            (with structure)




                                        AVI'2012 - Capri, May 21-25, 2012
Shortcomings	
  of	
  UI	
  views	
  organisaSon	
  
      ü  Almost	
  no	
  links	
  represented	
  between	
  views	
  
      ü  When	
  links	
  are	
  represented	
  
         ü  Legibility	
  problems	
  
         ü  Scalability	
  problems	
  
      ü  VariaSon	
  of	
  link	
  representaSons	
  
         ü    Line,	
  arrows,	
  table,	
  graph,	
  tree	
  	
  
      ü  No	
  immediate	
  feedback	
  
      ü  High	
  cogniSve	
  load	
  



                                               AVI'2012 - Capri, May 21-25, 2012
Goal	
  
       ü  Replace	
  links	
  between	
  UI	
  views	
  by	
  an	
  animated	
  
           transiSon	
  




                                    AVI'2012 - Capri, May 21-25, 2012
Methodology	
  
     ü  1)	
  Define	
  the	
  iniSal	
  view	
  

     ü  2)	
  Define	
  the	
  final	
  view	
  

     ü  3)	
  Define	
  mappings	
  between	
  views	
  

     ü  4)	
  Derive	
  the	
  transiSon	
  based	
  on	
  mappings	
  
         previously	
  defined	
  



                                    AVI'2012 - Capri, May 21-25, 2012
Mappings	
  
 T r a n s i t i o n Internal view                       External view
 type                                                      	
   Birthdate :
 Text-to-text        <label_short= Birthdate >
 T e x t - t o - <textfield … col= 4 …>
                                                           	
   4
                                                                  Birthdate :
 position
                                                           	
                          20
 T e s t - t o - <textfield … length= 20 .>                       Birthdate :

 length
 Text-to-color- <textfield. fgColor= red .>
                                                          	
   Birthdate :
 saturation


 Text-to-color- < t e x t f i e l d
 texture        bgTexture= checkerboard …>
                                           …              	
   Birthdate :

 T e x t - t o - <textfield name= Birthdate >              	
   Birthdate :
 shape
                                                                  	
   Birthdate * :
 T e x t - t o - <textfield …
 symbol          required= yes … >




                                           AVI'2012 - Capri, May 21-25, 2012
Which	
  parameter	
  for	
  animated	
  transiSon	
  




                        AVI'2012 - Capri, May 21-25, 2012
Methodology	
  
     	
  
     ü  5)	
  IdenSfy	
  animaSon	
  technique	
  to	
  produce	
  the	
  
          transiSon	
  
        ü    Text-­‐to-­‐text	
  
        ü    Text-­‐to-­‐color	
  
        ü    Text-­‐to-­‐shape	
  
        ü    Disappearing	
  elements	
  


     ü  6)	
  Execute	
  the	
  animated	
  transiSon	
  



                                     AVI'2012 - Capri, May 21-25, 2012
Animated	
  TransiSon	
  from	
  CV	
  to	
  EV	
  




                           AVI'2012 - Capri, May 21-25, 2012
Animated	
  TransiSon	
  from	
  IV	
  to	
  EV	
  




                            AVI'2012 - Capri, May 21-25, 2012
Anim.	
  Trans.	
  from	
  IV	
  to	
  EV	
  (idenSfied)	
  




                             AVI'2012 - Capri, May 21-25, 2012
Anim.	
  Trans.	
  from	
  IV	
  to	
  EV	
  (Slow	
  
down)	
  




                               AVI'2012 - Capri, May 21-25, 2012
Results	
  
      	
  
      ü  UsiView	
  
         ü  Supports	
  animated	
  transiSons	
  between	
  three	
  UI	
  
             views:	
  internal,	
  external,	
  conceptual	
  
         ü  Is	
  implemented	
  in	
  MicrosoW	
  Expression	
  Blend	
  
              ü     An	
  animated	
  transiSon	
  is	
  actually	
  a	
  visual	
  effect	
  between	
  two	
  vectorial	
  
                     graphical	
  objects	
  in	
  MS	
  Blend	
  governed	
  by	
  parameters	
  
                    ü       LocaSon	
  
                    ü       Speed	
  
                    ü       AcceleraSon	
  -­‐	
  DeceleraSon	
  

         ü  Reduces	
  the	
  cogniSve	
  load	
  of	
  mode	
  switching	
  




                                                      AVI'2012 - Capri, May 21-25, 2012
Conclusion	
  and	
  Future	
  Work	
  
      ü  Animated	
  transiSons	
  are	
  a	
  viable	
  approach	
  for	
  
          depicSng	
  the	
  behaviour	
  of	
  some	
  phenomenon	
  
          ü    For	
  a	
  change	
  of	
  context	
  
          ü    Between	
  an	
  iniSal	
  and	
  a	
  final	
  state	
  
      ü  Provided	
  that	
  
          ü    Temporal	
  aspects	
  are	
  well	
  designed	
  
          ü    SpaSal	
  aspects	
  are	
  adequately	
  programmed	
  
          ü    Effects	
  are	
  derived	
  from	
  the	
  model	
  views,	
  not	
  randomly	
  
      ü  TransiSon	
  types:	
  to	
  be	
  extended	
  
      ü  End	
  user	
  studies:	
  to	
  be	
  pursued	
  
      ü  SSll	
  no	
  systemaSc	
  approach	
  for	
  animated	
  
          transiSons	
  
                                               AVI'2012 - Capri, May 21-25, 2012
Thank you very much!
User Interface eXtensible Markup Language
http://www.usixml.org

FP7 Serenoa project
http://www.serenoa-fp7.eu

For more information and downloading,
http://www.lilab.be

More Related Content

Viewers also liked (10)

Minicurso grails
Minicurso grailsMinicurso grails
Minicurso grails
 
Java Style Grading
Java Style Grading Java Style Grading
Java Style Grading
 
Motores de busca em redes sociais
Motores de busca em redes sociaisMotores de busca em redes sociais
Motores de busca em redes sociais
 
Sistemas Distribuídos - Publish-Subscribe - Kafka
Sistemas Distribuídos - Publish-Subscribe - KafkaSistemas Distribuídos - Publish-Subscribe - Kafka
Sistemas Distribuídos - Publish-Subscribe - Kafka
 
Listas em Prolog
Listas em PrologListas em Prolog
Listas em Prolog
 
[Android] Google Service Play & Google Maps
[Android] Google Service Play & Google Maps[Android] Google Service Play & Google Maps
[Android] Google Service Play & Google Maps
 
Biografia de Bill Gates - Parte 4
Biografia de Bill Gates - Parte 4Biografia de Bill Gates - Parte 4
Biografia de Bill Gates - Parte 4
 
Educação a Distância
Educação a DistânciaEducação a Distância
Educação a Distância
 
Introducing MDSD
Introducing MDSDIntroducing MDSD
Introducing MDSD
 
MDA - Model Driven Architecture
MDA - Model Driven ArchitectureMDA - Model Driven Architecture
MDA - Model Driven Architecture
 

Similar to Animated transitions across UI views

Guide presentation aegis-fp7-projects-round_table_2011-11-30_v0.1
Guide presentation aegis-fp7-projects-round_table_2011-11-30_v0.1Guide presentation aegis-fp7-projects-round_table_2011-11-30_v0.1
Guide presentation aegis-fp7-projects-round_table_2011-11-30_v0.1
AEGIS-ACCESSIBLE Projects
 
Scct2013 topic6-integrative mediaprojectdevelopment
Scct2013 topic6-integrative mediaprojectdevelopmentScct2013 topic6-integrative mediaprojectdevelopment
Scct2013 topic6-integrative mediaprojectdevelopment
Anies Syahieda
 
Ectel nods v2
Ectel nods v2Ectel nods v2
Ectel nods v2
nodenot
 
EDONA/HMI -- Modelling of Advanced Automotive Interfaces
EDONA/HMI -- Modelling of Advanced Automotive InterfacesEDONA/HMI -- Modelling of Advanced Automotive Interfaces
EDONA/HMI -- Modelling of Advanced Automotive Interfaces
boisgera
 
EDONA/HMI – Modelling of Advanced Automotive Interfaces
EDONA/HMI – Modelling of Advanced Automotive InterfacesEDONA/HMI – Modelling of Advanced Automotive Interfaces
EDONA/HMI – Modelling of Advanced Automotive Interfaces
boisgera
 

Similar to Animated transitions across UI views (20)

Guide presentation aegis-fp7-projects-round_table_2011-11-30_v0.1
Guide presentation aegis-fp7-projects-round_table_2011-11-30_v0.1Guide presentation aegis-fp7-projects-round_table_2011-11-30_v0.1
Guide presentation aegis-fp7-projects-round_table_2011-11-30_v0.1
 
EclipseConEurope2012 SOA - Models As Operational Documentation
EclipseConEurope2012 SOA - Models As Operational DocumentationEclipseConEurope2012 SOA - Models As Operational Documentation
EclipseConEurope2012 SOA - Models As Operational Documentation
 
Multi-Dimensional Context-Aware Adaptation of Service Front-ends
Multi-Dimensional Context-Aware Adaptation of Service Front-endsMulti-Dimensional Context-Aware Adaptation of Service Front-ends
Multi-Dimensional Context-Aware Adaptation of Service Front-ends
 
Scct2013 topic6-integrative mediaprojectdevelopment
Scct2013 topic6-integrative mediaprojectdevelopmentScct2013 topic6-integrative mediaprojectdevelopment
Scct2013 topic6-integrative mediaprojectdevelopment
 
Modelling the User Interface
Modelling the User InterfaceModelling the User Interface
Modelling the User Interface
 
Fundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred DesignFundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred Design
 
UI architecture & designing
UI architecture & designingUI architecture & designing
UI architecture & designing
 
Storyboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools ReviewStoryboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools Review
 
ASE01.ppt
ASE01.pptASE01.ppt
ASE01.ppt
 
From Eclipse to Document Management - Eclipse DemoCamp Grenoble 2012
From Eclipse to Document Management - Eclipse DemoCamp Grenoble 2012From Eclipse to Document Management - Eclipse DemoCamp Grenoble 2012
From Eclipse to Document Management - Eclipse DemoCamp Grenoble 2012
 
MVVM for Modern Applications
MVVM for Modern ApplicationsMVVM for Modern Applications
MVVM for Modern Applications
 
Spec by Role
Spec by RoleSpec by Role
Spec by Role
 
ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina
ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. MolinaACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina
ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina
 
Designing for the Unknown
Designing for the UnknownDesigning for the Unknown
Designing for the Unknown
 
Ectel nods v2
Ectel nods v2Ectel nods v2
Ectel nods v2
 
Good code-isnt-enough
Good code-isnt-enoughGood code-isnt-enough
Good code-isnt-enough
 
Efficient Code Organisation
Efficient Code OrganisationEfficient Code Organisation
Efficient Code Organisation
 
User Interface Design_Csc2204_lecture 1_-_introduction
User Interface Design_Csc2204_lecture 1_-_introduction User Interface Design_Csc2204_lecture 1_-_introduction
User Interface Design_Csc2204_lecture 1_-_introduction
 
EDONA/HMI -- Modelling of Advanced Automotive Interfaces
EDONA/HMI -- Modelling of Advanced Automotive InterfacesEDONA/HMI -- Modelling of Advanced Automotive Interfaces
EDONA/HMI -- Modelling of Advanced Automotive Interfaces
 
EDONA/HMI – Modelling of Advanced Automotive Interfaces
EDONA/HMI – Modelling of Advanced Automotive InterfacesEDONA/HMI – Modelling of Advanced Automotive Interfaces
EDONA/HMI – Modelling of Advanced Automotive Interfaces
 

More from Vivian Motti

UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
Vivian Motti
 

More from Vivian Motti (20)

Keynote speech - Webmedia 2020
Keynote speech - Webmedia 2020Keynote speech - Webmedia 2020
Keynote speech - Webmedia 2020
 
Usable Privacy
Usable PrivacyUsable Privacy
Usable Privacy
 
Smartwatch Applications as Assistive Technologies
Smartwatch Applications as Assistive TechnologiesSmartwatch Applications as Assistive Technologies
Smartwatch Applications as Assistive Technologies
 
Wearable technologies
Wearable technologiesWearable technologies
Wearable technologies
 
Cards - Users with Disabilities - Course Material
Cards - Users with Disabilities - Course MaterialCards - Users with Disabilities - Course Material
Cards - Users with Disabilities - Course Material
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
 
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...
 
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...
 
Wearable privacy skeletons in the data closet
Wearable privacy  skeletons in the data closetWearable privacy  skeletons in the data closet
Wearable privacy skeletons in the data closet
 
Wearable Life: a Wrist-Worn Application to Assist Students in Special Education
Wearable Life: a Wrist-Worn Application to Assist Students in Special EducationWearable Life: a Wrist-Worn Application to Assist Students in Special Education
Wearable Life: a Wrist-Worn Application to Assist Students in Special Education
 
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
 
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
 
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
 
Toward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy ConceptsToward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy Concepts
 
Wearable Health
Wearable HealthWearable Health
Wearable Health
 
Wearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and PrivacyWearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and Privacy
 
Micro interactions and multi dimensional graphical user interfaces in the des...
Micro interactions and multi dimensional graphical user interfaces in the des...Micro interactions and multi dimensional graphical user interfaces in the des...
Micro interactions and multi dimensional graphical user interfaces in the des...
 
An Overview of Wearable Applications for Health Care: Requirements and Challe...
An Overview of Wearable Applications for Health Care: Requirements and Challe...An Overview of Wearable Applications for Health Care: Requirements and Challe...
An Overview of Wearable Applications for Health Care: Requirements and Challe...
 

Recently uploaded

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
UK Journal
 

Recently uploaded (20)

Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 

Animated transitions across UI views

  • 1. Animated  TransiSons  between   User  Interface  Views   Charles-­‐Eric  Dessart,  Vivian  Genaro  Mo6,  Jean  Vanderdonckt     Louvain  School  of  Management   Université  catholique  de  Louvain     Place  des  Doyens,  1  –  B-­‐1348  Louvain-­‐la-­‐Neuve,  Belgium     Vivian.genaromoG@uclouvain.be   jean.vanderdonckt@uclouvain.be  –  hLp://www.uclouvain.be/jean.vanderdonckt    
  • 2. Louvain  InteracSon  Laboratory   (LILab)       Place  des  Doyens,  1  –  B-­‐1348  Louvain-­‐la-­‐Neuve,  Belgium     hGp://www.lilab.be,  hGp://www.lilab.eu,  hGp://www.lilab.info    
  • 3. PresentaSon  outline   ü  MoSvaSons   ü  Basic  concepts   ü  Background  on  UI  views   ü  Models  and  language   ü  Method   ü  SoWware  support   ü  Future  work   AVI'2012 - Capri, May 21-25, 2012
  • 4. MoSvaSons   ü  SoWware  development  life  cycle  typically  involves  many   steps  at  various  levels  of  abstracSon   ü  In  Model-­‐Driven  Architecture  (MDA),  3  levels  of  abstracSon   ü  CompuSng-­‐Independent  Model  (CIM)   ü  PlaZorm-­‐Independent  Model  (PIM)   ü  PlaZorm-­‐Specific  Model  (PSM)   ü  User  Interface  (UI)  development  life  cycle  is  similar   ü  In  UI  development  according  to  Cameleon  Reference  Framework   (CRF),  4  levels  of  abstracSon   ü  Task  and  domain  models   ü  Abstract  User  Interface  (AUI)  model   ü  Concrete  User  Interface  (CUI)  model   ü  Final  User  Interface   ü  In  Model-­‐based  UI  design,  the  mapping  problem   ü  Task,  domain,  presentaSon,  dialog,  help,  tutorial   AVI'2012 - Capri, May 21-25, 2012
  • 5. MoSvaSons   ü  TransiSon  between  steps,  levels  is  hard  to  grasp   (imagine,  understand,  maintain,  evolve)   ü  Models  found  at  each  level  are  different:  concepts,  relaSonships,   and  aLributes  are  different   ü  Models  may  have  different  views  depending  on   ü  The  stakeholder  (designer,  markeSng,  end  user)   ü  The  step  (e.g.,  early  design  vs  advanced  design)   ü  The  concepts  (e.g.,  level  of  details)   ü  TransiSons  between  models  are  complex   ü  E.g.,  mappings,  transformaSons  in  MDA   ü  Consequences   ü  Mode  switching  is  frequent   ü  CogniSve  load  is  high   ü  Learning  curve  is  slow   AVI'2012 - Capri, May 21-25, 2012
  • 6. Basic  concepts   ü  3  types  of  representaSon:   ü  Internal:  UI  code  (in  programming  of  markup  language)   ü  External:  UI  as  experienced  by  the  end  user   ü  Conceptual:  UI  representaSon  abstracted  from  the  UI  code   ü SemanScs   ü Syntax   ü StylisScs   Concep- tual view External Internal view view AVI'2012 - Capri, May 21-25, 2012
  • 7. Basic  concepts   ü  Possible  transiSons  between  representaSons:   ü  From  Conceptual  to   ü Internal:  e.g.,  to  generate  UI  code  from  models   ü External:  e.g.,  to  render  a  UI  from  its  model   ü  From  Internal  to   ü External:  e.g.,  to  compile/interpret  a  UI  from  its  code/markup   ü Conceptual:  e.g.,  UI  reverse  engineering   Concep- tual view External Internal view view AVI'2012 - Capri, May 21-25, 2012
  • 8. Basic  concepts   ü  Possible  transiSons  between  representaSons:   ü  From  External  to   ü Internal:  e.g.,  to  draw  a  UI  and  to  generate  code  from  drawing   ü Conceptual:  e.g.,  to  infer  a  UI  model  from  look  and  feel   Concep- tual view External Internal view view AVI'2012 - Capri, May 21-25, 2012
  • 9. Basic  concepts   ü  Loops  on  representaSons:   ü  From  Conceptual  to  Conceptual:  e.g.,  M2M  in  MDE   ü  From  Internal  to  Internal:  e.g.,  UI  transcoding   ü  From  External  to  External:  e.g.,  image  processing  techniques   Concep- tual view External Internal view view AVI'2012 - Capri, May 21-25, 2012
  • 10. Background  on  UI  views   ü  Typical  configuraSon  in  Integrated  Development   Environments   External view: final user interface Conceptual view: hierarchical Internal view: description user interface code and properties AVI'2012 - Capri, May 21-25, 2012
  • 11. Background  on  UI  views   ü  FormsVBT  [Avrahami89]  synchronizes  2  UI  views   Internal view: External view: LaTex-like final user description interface (with structure) External view: final user interface (without structure) AVI'2012 - Capri, May 21-25, 2012
  • 12. Background  on  UI  views   ü  Vista  [Brown98]  synchronizes  2  UI  views  in  4  windows   Conceptual view: Conceptual task model view: task (UAN tables) model (UAN hierarchy) Internal view: Clock code Internal view: Clock architecture AVI'2012 - Capri, May 21-25, 2012
  • 13. Background  on  UI  views   ü  TADEUS++  [Stary00]  provides  3  views   Internal view: final user interface (with structure) External view: Conceptual final user view: domain interface model (UML (with structure) Class Diagram) AVI'2012 - Capri, May 21-25, 2012
  • 14. Background  on  UI  views   ü  TADEUS++  [Stary00]  provides  3  views   Conceptual view: final user interface (with structure) Conceptual view: domain Conceptual model (Object view: user oriented model) model Conceptual view: task model AVI'2012 - Capri, May 21-25, 2012
  • 15. Background  on  UI  views   ü  Teallach  [Griffith00]  has  2  views:  domain  and  task,  UI   Conceptual Conceptual view: view: task final user model interface (with structure) AVI'2012 - Capri, May 21-25, 2012
  • 16. Background  on  UI  views   ü  IdealXML  [Montero06]  has  conceptual  views   Conceptual view: task model Conceptual view: domain model (UML Class Diagram) Conceptual view: abstract user interface (with structure) AVI'2012 - Capri, May 21-25, 2012
  • 17. Background  on  UI  views   ü  IdealXML  [Montero06]  links  views  by  a  table   Conceptual view: task model Conceptual view: domain Conceptual model (UML view: abstract Class Diagram) user interface (with structure) AVI'2012 - Capri, May 21-25, 2012
  • 18. Background  on  UI  views   ü  GEF3D  [von  Pilgrim  08]  synchronizes  3  views   External view: Conceptual final user view: domain interface model (UML (without Class Diagram) structure) External view: final user interface (with structure) AVI'2012 - Capri, May 21-25, 2012
  • 19. Background  on  UI  views   ü  GEF3D  [von  Pilgrim  08]  synchronizes  3  views   External view: final user interface (without Conceptual structure) view: domain model (UML Class Diagram) External view: final user interface (with structure) AVI'2012 - Capri, May 21-25, 2012
  • 20. Shortcomings  of  UI  views  organisaSon   ü  Almost  no  links  represented  between  views   ü  When  links  are  represented   ü  Legibility  problems   ü  Scalability  problems   ü  VariaSon  of  link  representaSons   ü  Line,  arrows,  table,  graph,  tree     ü  No  immediate  feedback   ü  High  cogniSve  load   AVI'2012 - Capri, May 21-25, 2012
  • 21. Goal   ü  Replace  links  between  UI  views  by  an  animated   transiSon   AVI'2012 - Capri, May 21-25, 2012
  • 22. Methodology   ü  1)  Define  the  iniSal  view   ü  2)  Define  the  final  view   ü  3)  Define  mappings  between  views   ü  4)  Derive  the  transiSon  based  on  mappings   previously  defined   AVI'2012 - Capri, May 21-25, 2012
  • 23. Mappings   T r a n s i t i o n Internal view External view type   Birthdate : Text-to-text <label_short= Birthdate > T e x t - t o - <textfield … col= 4 …>   4 Birthdate : position   20 T e s t - t o - <textfield … length= 20 .> Birthdate : length Text-to-color- <textfield. fgColor= red .>   Birthdate : saturation Text-to-color- < t e x t f i e l d texture bgTexture= checkerboard …> …   Birthdate : T e x t - t o - <textfield name= Birthdate >   Birthdate : shape   Birthdate * : T e x t - t o - <textfield … symbol required= yes … > AVI'2012 - Capri, May 21-25, 2012
  • 24. Which  parameter  for  animated  transiSon   AVI'2012 - Capri, May 21-25, 2012
  • 25. Methodology     ü  5)  IdenSfy  animaSon  technique  to  produce  the   transiSon   ü  Text-­‐to-­‐text   ü  Text-­‐to-­‐color   ü  Text-­‐to-­‐shape   ü  Disappearing  elements   ü  6)  Execute  the  animated  transiSon   AVI'2012 - Capri, May 21-25, 2012
  • 26. Animated  TransiSon  from  CV  to  EV   AVI'2012 - Capri, May 21-25, 2012
  • 27. Animated  TransiSon  from  IV  to  EV   AVI'2012 - Capri, May 21-25, 2012
  • 28. Anim.  Trans.  from  IV  to  EV  (idenSfied)   AVI'2012 - Capri, May 21-25, 2012
  • 29. Anim.  Trans.  from  IV  to  EV  (Slow   down)   AVI'2012 - Capri, May 21-25, 2012
  • 30. Results     ü  UsiView   ü  Supports  animated  transiSons  between  three  UI   views:  internal,  external,  conceptual   ü  Is  implemented  in  MicrosoW  Expression  Blend   ü  An  animated  transiSon  is  actually  a  visual  effect  between  two  vectorial   graphical  objects  in  MS  Blend  governed  by  parameters   ü  LocaSon   ü  Speed   ü  AcceleraSon  -­‐  DeceleraSon   ü  Reduces  the  cogniSve  load  of  mode  switching   AVI'2012 - Capri, May 21-25, 2012
  • 31. Conclusion  and  Future  Work   ü  Animated  transiSons  are  a  viable  approach  for   depicSng  the  behaviour  of  some  phenomenon   ü  For  a  change  of  context   ü  Between  an  iniSal  and  a  final  state   ü  Provided  that   ü  Temporal  aspects  are  well  designed   ü  SpaSal  aspects  are  adequately  programmed   ü  Effects  are  derived  from  the  model  views,  not  randomly   ü  TransiSon  types:  to  be  extended   ü  End  user  studies:  to  be  pursued   ü  SSll  no  systemaSc  approach  for  animated   transiSons   AVI'2012 - Capri, May 21-25, 2012
  • 32. Thank you very much! User Interface eXtensible Markup Language http://www.usixml.org FP7 Serenoa project http://www.serenoa-fp7.eu For more information and downloading, http://www.lilab.be