Animated	  TransiSons	  between	             User	  Interface	  Views	       Charles-­‐Eric	  Dessart,	  Vivian	  Genaro	 ...
Louvain	  InteracSon	  Laboratory	                 (LILab)	                                              	                ...
PresentaSon	  outline	        ü  MoSvaSons	        ü  Basic	  concepts	        ü  Background	  on	  UI	  views	        ...
MoSvaSons	       ü  SoWware	  development	  life	  cycle	  typically	  involves	  many	           steps	  at	  various	  ...
MoSvaSons	       ü  TransiSon	  between	  steps,	  levels	  is	  hard	  to	  grasp	           (imagine,	  understand,	  m...
Basic	  concepts	        ü  3	  types	  of	  representaSon:	            ü    Internal:	  UI	  code	  (in	  programming	 ...
Basic	  concepts	        ü  Possible	  transiSons	  between	  representaSons:	           ü    From	  Conceptual	  to	   ...
Basic	  concepts	        ü  Possible	  transiSons	  between	  representaSons:	           ü    From	  External	  to	     ...
Basic	  concepts	        ü  Loops	  on	  representaSons:	           ü    From	  Conceptual	  to	  Conceptual:	  e.g.,	  ...
Background	  on	  UI	  views	              ü  Typical	  configuraSon	  in	  Integrated	  Development	                  Env...
Background	  on	  UI	  views	              ü  FormsVBT	  [Avrahami89]	  synchronizes	  2	  UI	  views	  Internal view:   ...
Background	  on	  UI	  views	             ü  Vista	  [Brown98]	  synchronizes	  2	  UI	  views	  in	  4	  windows	       ...
Background	  on	  UI	  views	             ü  TADEUS++	  [Stary00]	  provides	  3	  views	                                ...
Background	  on	  UI	  views	              ü  TADEUS++	  [Stary00]	  provides	  3	  views	                               ...
Background	  on	  UI	  views	               ü  Teallach	  [Griffith00]	  has	  2	  views:	  domain	  and	  task,	  UI	  Con...
Background	  on	  UI	  views	             ü  IdealXML	  [Montero06]	  has	  conceptual	  views	                          ...
Background	  on	  UI	  views	             ü  IdealXML	  [Montero06]	  links	  views	  by	  a	  table	                    ...
Background	  on	  UI	  views	             ü  GEF3D	  [von	  Pilgrim	  08]	  synchronizes	  3	  views	                    ...
Background	  on	  UI	  views	             ü  GEF3D	  [von	  Pilgrim	  08]	  synchronizes	  3	  views	                    ...
Shortcomings	  of	  UI	  views	  organisaSon	        ü  Almost	  no	  links	  represented	  between	  views	        ü  W...
Goal	         ü  Replace	  links	  between	  UI	  views	  by	  an	  animated	             transiSon	                     ...
Methodology	       ü  1)	  Define	  the	  iniSal	  view	       ü  2)	  Define	  the	  final	  view	       ü  3)	  Define	  ...
Mappings	   T r a n s i t i o n Internal view                       External view type                                    ...
Which	  parameter	  for	  animated	  transiSon	                          AVI2012 - Capri, May 21-25, 2012
Methodology	       	       ü  5)	  IdenSfy	  animaSon	  technique	  to	  produce	  the	            transiSon	          ü...
Animated	  TransiSon	  from	  CV	  to	  EV	                             AVI2012 - Capri, May 21-25, 2012
Animated	  TransiSon	  from	  IV	  to	  EV	                              AVI2012 - Capri, May 21-25, 2012
Anim.	  Trans.	  from	  IV	  to	  EV	  (idenSfied)	                               AVI2012 - Capri, May 21-25, 2012
Anim.	  Trans.	  from	  IV	  to	  EV	  (Slow	  down)	                                 AVI2012 - Capri, May 21-25, 2012
Results	        	        ü  UsiView	           ü  Supports	  animated	  transiSons	  between	  three	  UI	              ...
Conclusion	  and	  Future	  Work	        ü  Animated	  transiSons	  are	  a	  viable	  approach	  for	            depicSn...
Thank you very much!User Interface eXtensible Markup Languagehttp://www.usixml.orgFP7 Serenoa projecthttp://www.serenoa-fp...
Upcoming SlideShare
Loading in …5
×

Animated transitions across UI views

826 views

Published on

Paper presented at AVI 2012 on May 22nd in Capri, Italy. Work by Charles-Erick Dessart, Vivian Motti and Jean Vanderdonckt from LILAB (Louvain Interaction Laboratory) - UCL (Université catholique de Louvain) - Belgium.

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
826
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Animated transitions across UI views

  1. 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. 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. 3. PresentaSon  outline   ü  MoSvaSons   ü  Basic  concepts   ü  Background  on  UI  views   ü  Models  and  language   ü  Method   ü  SoWware  support   ü  Future  work   AVI2012 - Capri, May 21-25, 2012
  4. 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   AVI2012 - Capri, May 21-25, 2012
  5. 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   AVI2012 - Capri, May 21-25, 2012
  6. 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 AVI2012 - Capri, May 21-25, 2012
  7. 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 AVI2012 - Capri, May 21-25, 2012
  8. 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 AVI2012 - Capri, May 21-25, 2012
  9. 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 AVI2012 - Capri, May 21-25, 2012
  10. 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 AVI2012 - Capri, May 21-25, 2012
  11. 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) AVI2012 - Capri, May 21-25, 2012
  12. 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 AVI2012 - Capri, May 21-25, 2012
  13. 13. Background  on  UI  views   ü  TADEUS++  [Stary00]  provides  3  views   Internal view: final user interface (with structure) External view: Conceptual final userview: domain interface model (UML (with structure)Class Diagram) AVI2012 - Capri, May 21-25, 2012
  14. 14. Background  on  UI  views   ü  TADEUS++  [Stary00]  provides  3  views   Conceptual view: final user interface (with structure) Conceptual view: domain Conceptualmodel (Object view: useroriented model) model Conceptual view: task model AVI2012 - Capri, May 21-25, 2012
  15. 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) AVI2012 - Capri, May 21-25, 2012
  16. 16. Background  on  UI  views   ü  IdealXML  [Montero06]  has  conceptual  views   Conceptual view: task model Conceptualview: domain model (UMLClass Diagram) Conceptual view: abstract user interface (with structure) AVI2012 - Capri, May 21-25, 2012
  17. 17. Background  on  UI  views   ü  IdealXML  [Montero06]  links  views  by  a  table   Conceptual view: task model Conceptualview: domain Conceptual model (UML view: abstractClass Diagram) user interface (with structure) AVI2012 - Capri, May 21-25, 2012
  18. 18. Background  on  UI  views   ü  GEF3D  [von  Pilgrim  08]  synchronizes  3  views   External view: Conceptual final userview: domain interface model (UML (withoutClass Diagram) structure) External view: final user interface (with structure) AVI2012 - Capri, May 21-25, 2012
  19. 19. Background  on  UI  views   ü  GEF3D  [von  Pilgrim  08]  synchronizes  3  views   External view: final user interface (without Conceptual structure)view: domain model (UMLClass Diagram) External view: final user interface (with structure) AVI2012 - Capri, May 21-25, 2012
  20. 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   AVI2012 - Capri, May 21-25, 2012
  21. 21. Goal   ü  Replace  links  between  UI  views  by  an  animated   transiSon   AVI2012 - Capri, May 21-25, 2012
  22. 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   AVI2012 - Capri, May 21-25, 2012
  23. 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 … > AVI2012 - Capri, May 21-25, 2012
  24. 24. Which  parameter  for  animated  transiSon   AVI2012 - Capri, May 21-25, 2012
  25. 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   AVI2012 - Capri, May 21-25, 2012
  26. 26. Animated  TransiSon  from  CV  to  EV   AVI2012 - Capri, May 21-25, 2012
  27. 27. Animated  TransiSon  from  IV  to  EV   AVI2012 - Capri, May 21-25, 2012
  28. 28. Anim.  Trans.  from  IV  to  EV  (idenSfied)   AVI2012 - Capri, May 21-25, 2012
  29. 29. Anim.  Trans.  from  IV  to  EV  (Slow  down)   AVI2012 - Capri, May 21-25, 2012
  30. 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   AVI2012 - Capri, May 21-25, 2012
  31. 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   AVI2012 - Capri, May 21-25, 2012
  32. 32. Thank you very much!User Interface eXtensible Markup Languagehttp://www.usixml.orgFP7 Serenoa projecthttp://www.serenoa-fp7.euFor more information and downloading,http://www.lilab.be

×