SlideShare a Scribd company logo

Animated Transitions between User Interface Views

Download as PPT, PDF
Jean Vanderdonckt, profile picture
Jean Vanderdonckt

The document discusses animated transitions between different user interface (UI) views, emphasizing the challenges posed by the software development life cycle and model-driven architecture. It presents a methodology for creating these transitions, which can reduce cognitive load by visualizing changes between internal, external, and conceptual UI views. The conclusion highlights the potential for animated transitions as a means to depict state changes more effectively, recommending further research and user studies.

TechnologyEducation
1 of 32
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Animated Transitions between User Interface Views Charles-Eric Dessart, Vivian Genaro Motti, Jean Vanderdonckt Louvain School of Management Université catholique de Louvain Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium Vivian.genaromotti@uclouvain.be jean.vanderdonckt@uclouvain.be – http://www.uclouvain.be/jean.vanderdonckt
Louvain Interaction Laboratory (LILab) Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium http://www.lilab.be, http://www.lilab.eu, http://www.lilab.info
Presentation outline  Motivations  Basic concepts  Background on UI views  Models and language  Method  Software support  Future work AVI'2012 - Capri, May 21-25, 2012
Motivations  Software development life cycle typically involves many steps at various levels of abstraction  In Model-Driven Architecture (MDA), 3 levels of abstraction  Computing-Independent Model (CIM)  Platform-Independent Model (PIM)  Platform-Specific Model (PSM)  User Interface (UI) development life cycle is similar  In UI development according to Cameleon Reference Framework (CRF), 4 levels of abstraction  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, presentation, dialog, help, tutorial AVI'2012 - Capri, May 21-25, 2012
Motivations  Transition between steps, levels is hard to grasp (imagine, understand, maintain, evolve)  Models found at each level are different: concepts, relationships, and attributes are different  Models may have different views depending on  The stakeholder (designer, marketing, end user)  The step (e.g., early design vs advanced design)  The concepts (e.g., level of details)  Transitions between models are complex  E.g., mappings, transformations in MDA  Consequences  Mode switching is frequent  Cognitive load is high  Learning curve is slow AVI'2012 - Capri, May 21-25, 2012
Basic concepts  3 types of representation:  Internal: UI code (in programming of markup language)  External: UI as experienced by the end user  Conceptual: UI representation abstracted from the UI code  Semantics  Syntax  Stylistics Concep- tual view External Internal view view AVI'2012 - Capri, May 21-25, 2012
Basic concepts  Possible transitions between representations:  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 transitions between representations:  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 representations:  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 configuration 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 organisation  Almost no links represented between views  When links are represented  Legibility problems  Scalability problems  Variation of link representations  Line, arrows, table, graph, tree  No immediate feedback  High cognitive load AVI'2012 - Capri, May 21-25, 2012
Goal  Replace links between UI views by an animated transition AVI'2012 - Capri, May 21-25, 2012
Methodology  1) Define the initial view  2) Define the final view  3) Define mappings between views  4) Derive the transition based on mappings previously defined AVI'2012 - Capri, May 21-25, 2012
Mappings Transition Internal view External view Birthdate : type Text-to-text <label_short=”Birthdate”> 4 Text-to- <textfield … col=”4”…> Birthdate : position 20 Test-to- <textfield … length=”20”.> Birthdate : length Birthdate : Text-to- <textfield. fgColor=”red”.> color- saturation Text-to- <textfield … Birthdate : color-texture bgTexture=”checkerboard”…> Birthdate : Text-to- <textfield name=”Birthdate”> shape Birthdate *: Text-to- <textfield … symbol required=”yes”… > AVI'2012 - Capri, May 21-25, 2012
Which parameter for animated transition AVI'2012 - Capri, May 21-25, 2012
Methodology 5) Identify animation technique to produce the transition  Text-to-text  Text-to-color  Text-to-shape  Disappearing elements 6) Execute the animated transition AVI'2012 - Capri, May 21-25, 2012
Animated Transition from CV to EV AVI'2012 - Capri, May 21-25, 2012
Animated Transition from IV to EV AVI'2012 - Capri, May 21-25, 2012
Anim. Trans. from IV to EV (identified) 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 transitions between three UI views: internal, external, conceptual  Is implemented in Microsoft Expression Blend  An animated transition is actually a visual effect between two vectorial graphical objects in MS Blend governed by parameters  Location  Speed  Acceleration - Deceleration  Reduces the cognitive load of mode switching AVI'2012 - Capri, May 21-25, 2012
Conclusion and Future Work  Animated transitions are a viable approach for depicting the behaviour of some phenomenon  For a change of context  Between an initial and a final state  Provided that  Temporal aspects are well designed  Spatial aspects are adequately programmed  Effects are derived from the model views, not randomly  Transition types: to be extended  End user studies: to be pursued  Still no systematic approach for animated transitions 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

PDF
Animated transitions across UI views
Vivian Motti
 
PDF
4 - Architetture Software - Architecture Portfolio
Majong DevJfu
 
PPT
On the Composition and Reuse of Viewpoints
Henry Muccini
 
PDF
Uml3
Majong DevJfu
 
PDF
6 - Architetture Software - Model transformation
Majong DevJfu
 
PPS
03 ooad uml-03
Niit Care
 
PDF
480 483
Editor IJARCET
 
PDF
8 - Architetture Software - Architecture centric processes
Majong DevJfu
 
Animated transitions across UI views
Vivian Motti
 
4 - Architetture Software - Architecture Portfolio
Majong DevJfu
 
On the Composition and Reuse of Viewpoints
Henry Muccini
 
Uml3
Majong DevJfu
 
6 - Architetture Software - Model transformation
Majong DevJfu
 
03 ooad uml-03
Niit Care
 
480 483
Editor IJARCET
 
8 - Architetture Software - Architecture centric processes
Majong DevJfu
 

What's hot (20)

PDF
Introducing MDSD
Pedro J. Molina
 
PDF
MODEL: MOdel DrivEn and quaLity
Federico Villa
 
PDF
Modelling and code generation in .NET at Icinetic
Pedro J. Molina
 
PPT
Sa 008 architecture_views
Frank Gielen
 
PDF
Brokerage 2007 presentation hci
imec.archive
 
PDF
EDONA/HMI – Modelling of Advanced Automotive Interfaces
boisgera
 
PPTX
05 architectural design
University of Computer Science and Technology
 
DOCX
Development of Multiplatform CMS System with Zend Framework
Sinisa Vukovic
 
PPT
MDA
Preetam Palwe
 
PDF
2
Majong DevJfu
 
PPTX
Model driven architecture
Biruk Mamo
 
PDF
.Net design pattern
Mohamed Zakarya Abdelgawad
 
PPT
Web technologies: Model Driven Engineering
Piero Fraternali
 
PDF
Software Architecture: Introduction
Henry Muccini
 
PDF
A comparison of component-based software engineering and model-driven develop...
Nikolay Grozev
 
PDF
6
Majong DevJfu
 
PPTX
Grethe Thilly - Portfolio
Grethe Thilly
 
PPT
Introduction to MDA
Orçun Dayıbaş
 
ODP
Transforming a 15 year old model-driven application from C++ to Java
Eric Malotaux
 
PDF
QVT & MTL In Eclipse
Jonathan Musset
 
Introducing MDSD
Pedro J. Molina
 
MODEL: MOdel DrivEn and quaLity
Federico Villa
 
Modelling and code generation in .NET at Icinetic
Pedro J. Molina
 
Sa 008 architecture_views
Frank Gielen
 
Brokerage 2007 presentation hci
imec.archive
 
EDONA/HMI – Modelling of Advanced Automotive Interfaces
boisgera
 
05 architectural design
University of Computer Science and Technology
 
Development of Multiplatform CMS System with Zend Framework
Sinisa Vukovic
 
MDA
Preetam Palwe
 
2
Majong DevJfu
 
Model driven architecture
Biruk Mamo
 
.Net design pattern
Mohamed Zakarya Abdelgawad
 
Web technologies: Model Driven Engineering
Piero Fraternali
 
Software Architecture: Introduction
Henry Muccini
 
A comparison of component-based software engineering and model-driven develop...
Nikolay Grozev
 
6
Majong DevJfu
 
Grethe Thilly - Portfolio
Grethe Thilly
 
Introduction to MDA
Orçun Dayıbaş
 
Transforming a 15 year old model-driven application from C++ to Java
Eric Malotaux
 
QVT & MTL In Eclipse
Jonathan Musset
 
Ad

Similar to Animated Transitions between User Interface Views (20)

PDF
Modelling the User Interface
Pedro J. Molina
 
PDF
Paper Alejandro Medrano - Use of hierarchical model-view-controller architect...
WTHS
 
PPT
Design rule 3
gopal10scs185
 
PPT
Design rule 3
gopal10scs185
 
PPT
A MDA-Compliant Environment for Developing User Interfaces of Information Sys...
Jean Vanderdonckt
 
KEY
ILook_CHItaly
marcocarnesecchi
 
PDF
4+1view architecture
Tot Bob
 
PDF
4+1view architecture
drewz lin
 
PPTX
UI architecture & designing
Mohammed Fazuluddin
 
PPS
Vp all slides
Aman Adhikari
 
PDF
Information Architecture & UI Design
Ivano Malavolta
 
PDF
Software Architecture: views and viewpoints
Henry Muccini
 
PPTX
User Interface Analysis and Design daa.pptx
Mahesh_gmail_KNL Na
 
PDF
Design in Technology
Isaac Lim
 
PPTX
Design principles
sawsan slii
 
PPT
Ui Design And Usability For Everybody
Empatika
 
PPT
Unit 5
gopal10scs185
 
PPT
Unit 5
gopal10scs185
 
PDF
Ux Meets Code Interaction Usability
Arabella David
 
PPT
From Use to User Interface
abcd82
 
Modelling the User Interface
Pedro J. Molina
 
Paper Alejandro Medrano - Use of hierarchical model-view-controller architect...
WTHS
 
Design rule 3
gopal10scs185
 
Design rule 3
gopal10scs185
 
A MDA-Compliant Environment for Developing User Interfaces of Information Sys...
Jean Vanderdonckt
 
ILook_CHItaly
marcocarnesecchi
 
4+1view architecture
Tot Bob
 
4+1view architecture
drewz lin
 
UI architecture & designing
Mohammed Fazuluddin
 
Vp all slides
Aman Adhikari
 
Information Architecture & UI Design
Ivano Malavolta
 
Software Architecture: views and viewpoints
Henry Muccini
 
User Interface Analysis and Design daa.pptx
Mahesh_gmail_KNL Na
 
Design in Technology
Isaac Lim
 
Design principles
sawsan slii
 
Ui Design And Usability For Everybody
Empatika
 
Unit 5
gopal10scs185
 
Unit 5
gopal10scs185
 
Ux Meets Code Interaction Usability
Arabella David
 
From Use to User Interface
abcd82
 
Ad

More from Jean Vanderdonckt (20)

PPTX
https://dl.acm.org/doi/10.1145/3715336.3735706
Jean Vanderdonckt
 
PPTX
TapStrapGest: Elicitation and Recognition of Ring-based Multi-Finger Gestures
Jean Vanderdonckt
 
PPTX
Congruent and Hierarchical Gesture Set Design
Jean Vanderdonckt
 
PPTX
Paired Sketching of Distributed User Interfaces:Workflow, Protocol, Software ...
Jean Vanderdonckt
 
PPTX
Comparative Testing of 2D Stroke Gesture Recognizers in Multiple Contexts of Use
Jean Vanderdonckt
 
PPTX
Human-AI Interaction in Space: Insights from a Mars Analog Mission with the H...
Jean Vanderdonckt
 
PPTX
Gestural Interaction in Virtual/Augmented Reality
Jean Vanderdonckt
 
PPTX
User-controlled Form Adaptation by Unsupervised Learning
Jean Vanderdonckt
 
PPTX
Engineering Touchscreen Input for 3-Way Displays: Taxonomy, Datasets, and Cla...
Jean Vanderdonckt
 
PPTX
To the end of our possibilities with Adaptive User Interfaces
Jean Vanderdonckt
 
PPTX
Engineering the Transition of Interactive Collaborative Software from Cloud C...
Jean Vanderdonckt
 
PPTX
UsyBus: A Communication Framework among Reusable Agents integrating Eye-Track...
Jean Vanderdonckt
 
PPTX
µV: An Articulation, Rotation, Scaling, and Translation Invariant (ARST) Mult...
Jean Vanderdonckt
 
PPTX
RepliGES and GEStory: Visual Tools for Systematizing and Consolidating Knowle...
Jean Vanderdonckt
 
PPTX
Gesture-based information systems: from DesignOps to DevOps
Jean Vanderdonckt
 
PPTX
Engineering Slidable User Interfaces with Slime
Jean Vanderdonckt
 
PPTX
Evaluating Gestural Interaction: Models, Methods, and Measures
Jean Vanderdonckt
 
PPTX
Conducting a Gesture Elicitation Study: How to Get the Best Gestures From Peo...
Jean Vanderdonckt
 
PPTX
Designing Gestural Interaction: Challenges and Pitfalls
Jean Vanderdonckt
 
PPTX
Fundamentals of Gestural Interaction
Jean Vanderdonckt
 
https://dl.acm.org/doi/10.1145/3715336.3735706
Jean Vanderdonckt
 
TapStrapGest: Elicitation and Recognition of Ring-based Multi-Finger Gestures
Jean Vanderdonckt
 
Congruent and Hierarchical Gesture Set Design
Jean Vanderdonckt
 
Paired Sketching of Distributed User Interfaces:Workflow, Protocol, Software ...
Jean Vanderdonckt
 
Comparative Testing of 2D Stroke Gesture Recognizers in Multiple Contexts of Use
Jean Vanderdonckt
 
Human-AI Interaction in Space: Insights from a Mars Analog Mission with the H...
Jean Vanderdonckt
 
Gestural Interaction in Virtual/Augmented Reality
Jean Vanderdonckt
 
User-controlled Form Adaptation by Unsupervised Learning
Jean Vanderdonckt
 
Engineering Touchscreen Input for 3-Way Displays: Taxonomy, Datasets, and Cla...
Jean Vanderdonckt
 
To the end of our possibilities with Adaptive User Interfaces
Jean Vanderdonckt
 
Engineering the Transition of Interactive Collaborative Software from Cloud C...
Jean Vanderdonckt
 
UsyBus: A Communication Framework among Reusable Agents integrating Eye-Track...
Jean Vanderdonckt
 
µV: An Articulation, Rotation, Scaling, and Translation Invariant (ARST) Mult...
Jean Vanderdonckt
 
RepliGES and GEStory: Visual Tools for Systematizing and Consolidating Knowle...
Jean Vanderdonckt
 
Gesture-based information systems: from DesignOps to DevOps
Jean Vanderdonckt
 
Engineering Slidable User Interfaces with Slime
Jean Vanderdonckt
 
Evaluating Gestural Interaction: Models, Methods, and Measures
Jean Vanderdonckt
 
Conducting a Gesture Elicitation Study: How to Get the Best Gestures From Peo...
Jean Vanderdonckt
 
Designing Gestural Interaction: Challenges and Pitfalls
Jean Vanderdonckt
 
Fundamentals of Gestural Interaction
Jean Vanderdonckt
 

Recently uploaded (20)

PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PPTX
MYSQL Presentation for SQL database connectivity
Swati270511
 
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
PDF
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
PPTX
Cloud computing and distributed systems.
kkkkkhan
 
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
PDF
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PDF
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
Approach and Philosophy of On baking technology
30anthuong17
 
MYSQL Presentation for SQL database connectivity
Swati270511
 
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
Cloud computing and distributed systems.
kkkkkhan
 
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 

Animated Transitions between User Interface Views

  • 1. Animated Transitions between User Interface Views Charles-Eric Dessart, Vivian Genaro Motti, Jean Vanderdonckt Louvain School of Management Université catholique de Louvain Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium Vivian.genaromotti@uclouvain.be jean.vanderdonckt@uclouvain.be – http://www.uclouvain.be/jean.vanderdonckt
  • 2. Louvain Interaction Laboratory (LILab) Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium http://www.lilab.be, http://www.lilab.eu, http://www.lilab.info
  • 3. Presentation outline  Motivations  Basic concepts  Background on UI views  Models and language  Method  Software support  Future work AVI'2012 - Capri, May 21-25, 2012
  • 4. Motivations  Software development life cycle typically involves many steps at various levels of abstraction  In Model-Driven Architecture (MDA), 3 levels of abstraction  Computing-Independent Model (CIM)  Platform-Independent Model (PIM)  Platform-Specific Model (PSM)  User Interface (UI) development life cycle is similar  In UI development according to Cameleon Reference Framework (CRF), 4 levels of abstraction  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, presentation, dialog, help, tutorial AVI'2012 - Capri, May 21-25, 2012
  • 5. Motivations  Transition between steps, levels is hard to grasp (imagine, understand, maintain, evolve)  Models found at each level are different: concepts, relationships, and attributes are different  Models may have different views depending on  The stakeholder (designer, marketing, end user)  The step (e.g., early design vs advanced design)  The concepts (e.g., level of details)  Transitions between models are complex  E.g., mappings, transformations in MDA  Consequences  Mode switching is frequent  Cognitive load is high  Learning curve is slow AVI'2012 - Capri, May 21-25, 2012
  • 6. Basic concepts  3 types of representation:  Internal: UI code (in programming of markup language)  External: UI as experienced by the end user  Conceptual: UI representation abstracted from the UI code  Semantics  Syntax  Stylistics Concep- tual view External Internal view view AVI'2012 - Capri, May 21-25, 2012
  • 7. Basic concepts  Possible transitions between representations:  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 transitions between representations:  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 representations:  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 configuration 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 organisation  Almost no links represented between views  When links are represented  Legibility problems  Scalability problems  Variation of link representations  Line, arrows, table, graph, tree  No immediate feedback  High cognitive load AVI'2012 - Capri, May 21-25, 2012
  • 21. Goal  Replace links between UI views by an animated transition AVI'2012 - Capri, May 21-25, 2012
  • 22. Methodology  1) Define the initial view  2) Define the final view  3) Define mappings between views  4) Derive the transition based on mappings previously defined AVI'2012 - Capri, May 21-25, 2012
  • 23. Mappings Transition Internal view External view Birthdate : type Text-to-text <label_short=”Birthdate”> 4 Text-to- <textfield … col=”4”…> Birthdate : position 20 Test-to- <textfield … length=”20”.> Birthdate : length Birthdate : Text-to- <textfield. fgColor=”red”.> color- saturation Text-to- <textfield … Birthdate : color-texture bgTexture=”checkerboard”…> Birthdate : Text-to- <textfield name=”Birthdate”> shape Birthdate *: Text-to- <textfield … symbol required=”yes”… > AVI'2012 - Capri, May 21-25, 2012
  • 24. Which parameter for animated transition AVI'2012 - Capri, May 21-25, 2012
  • 25. Methodology 5) Identify animation technique to produce the transition  Text-to-text  Text-to-color  Text-to-shape  Disappearing elements 6) Execute the animated transition AVI'2012 - Capri, May 21-25, 2012
  • 26. Animated Transition from CV to EV AVI'2012 - Capri, May 21-25, 2012
  • 27. Animated Transition from IV to EV AVI'2012 - Capri, May 21-25, 2012
  • 28. Anim. Trans. from IV to EV (identified) 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 transitions between three UI views: internal, external, conceptual  Is implemented in Microsoft Expression Blend  An animated transition is actually a visual effect between two vectorial graphical objects in MS Blend governed by parameters  Location  Speed  Acceleration - Deceleration  Reduces the cognitive load of mode switching AVI'2012 - Capri, May 21-25, 2012
  • 31. Conclusion and Future Work  Animated transitions are a viable approach for depicting the behaviour of some phenomenon  For a change of context  Between an initial and a final state  Provided that  Temporal aspects are well designed  Spatial aspects are adequately programmed  Effects are derived from the model views, not randomly  Transition types: to be extended  End user studies: to be pursued  Still no systematic approach for animated transitions 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

Editor's Notes

  • #2: December 6, 2010
  • #3: December 6, 2010
  • #4: December 6, 2010
  • #5: December 6, 2010
  • #6: December 6, 2010
  • #7: December 6, 2010
  • #8: December 6, 2010
  • #9: December 6, 2010
  • #10: December 6, 2010
  • #11: December 6, 2010
  • #12: December 6, 2010
  • #13: December 6, 2010
  • #14: December 6, 2010
  • #15: December 6, 2010
  • #16: December 6, 2010
  • #17: December 6, 2010
  • #18: December 6, 2010
  • #19: December 6, 2010
  • #20: December 6, 2010
  • #21: December 6, 2010
  • #22: Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • #23: Mapping problem consist in the need to express link between different Uis views External view: final GUI look an feel December 6, 2010
  • #25: To represent a quantitative variable the position is the most precise then length, angle…. December 6, 2010
  • #26: Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • #27: Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • #28: Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • #29: Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • #30: Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • #31: Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • #32: Mapping problem consist in the need to express link between different Uis views December 6, 2010