Intra-platform plasticity regularly assumes that the display of a computing platform remains fixed and rigid during interactions with the platform in contrast to reconfigurable displays, which can change form depending on the context of use. In this paper, we present a model-based approach for designing and deploying graphical user interfaces that support intra-platform plasticity for reconfigurable displays. We instantiate the model for E3Screen, a new device that expands a conventional laptop with two slidable, rotatable, and foldable lateral displays, enabling slidable user interfaces. Based on a UML class diagram as a domain model and a SCRUD list as a task model, we define an abstract user interface as interaction units with a corresponding master-detail design pattern. We then map the abstract user interface to a concrete user interface by applying rules for the reconfiguration, concrete interaction, unit allocation, and widget selection and implement it in JavaScript. In a first experiment, we determine display configurations most preferred by users, which we organize in the form of a state-transition diagram. In a second experiment, we address reconfiguration rules and widget selection rules. A third experiment provides insights into the impact of the lateral displays on a visual search task.

1. Engineering Slidable User Interfaces with SLIME
Arthur Sluÿters, Jean Vanderdonckt, Radu-Daniel Vatavu
ACM EICS’2021 (Online, June 8th-11th, 2021)

2. Engineering Slidable User Interfaces with SLIME
Jean Vanderdonckt
LouRIM
Université catholique
de Louvain, Belgium
Radu-Daniel Vatavu
Machine Intelligence &
Information Visualization Lab
Stefan cel Mare
University of Suceava, Romania
Arthur Sluÿters
LouRIM
Université catholique de
Louvain, Belgium

3. 3
Introduction and Motivations
• Double monitor: Advantages
Sources: J. Grudin, Partitioning Digital Worlds: Focal and Peripheral Awareness in Multiple Monitor Use, CHI ‘01.
D. Tan, M. Czerwinsky, Effects of Visual Separation and Physical Discontinuities when Distributing Information
across Multiple Displays, Interact ‘03.
People like multiple monitors
Division into two spaces can facilitate versatility in use
A second monitor is not treated as ‘additional space’
Logical organization matches physical layout
Secondary tasks directly support the primary task

4. 4
Introduction and Motivations
• Double monitor: Disadvantages
Sources: J. Grudin, Partitioning Digital Worlds: Focal and Peripheral Awareness in Multiple Monitor Use, CHI ‘01.
D. Tan, M. Czerwinsky, Effects of Visual Separation and Physical Discontinuities when Distributing Information
across Multiple Displays, Interact ‘03.
Displays do not connect seamlessly
Users rarely extend a window across two monitors
Instead, they typically maximize a design to fill one
monitor entirely, leaving the other monitor free for
other uses

5. 5
Introduction and Motivations
• Double monitor: Disadvantages
Sources: J. Grudin, Partitioning Digital Worlds: Focal and Peripheral Awareness in Multiple Monitor Use, CHI ‘01.
D. Tan, M. Czerwinsky, Effects of Visual Separation and Physical Discontinuities when Distributing Information
across Multiple Displays, Interact ‘03.
A second monitor is often considered inferior to a twice-as-large monitor

6. 6
Introduction and Motivations
• Double screen: similar observations
Source: R. Budiu, Multitasking on Microsoft’s Surface Duo, https://www.nngroup.com/articles/surface-duo/
Two screens merged

7. 7
Introduction and Motivations
• Double screen: similar observations
Source: R. Budiu, Multitasking on Microsoft’s Surface Duo, https://www.nngroup.com/articles/surface-duo/
No support for double screen
Two screens merged

8. 8
Introduction and Motivations
• Double screen: similar observations
Source: R. Budiu, Multitasking on Microsoft’s Surface Duo, https://www.nngroup.com/articles/surface-duo/
No support for double screen
Side by side support
Two screens merged

9. 9
Introduction and Motivations
• Double screen: similar observations
Source: R. Budiu, Multitasking on Microsoft’s Surface Duo, https://www.nngroup.com/articles/surface-duo/
No support for double screen
Side by side support
Two screens merged
Some double screen support

10. 10
Introduction and Motivations
• Triple fixed monitor: awkward problem!

11. Introduction and Motivations
• Triple foldable monitor:
even more awkward problem!

12. Introduction and Motivations
• Triple foldable monitor:
Source: https://slidenjoy.com/.

13. Introduction and Motivations
• Triple foldable monitor:
https://www.youtube.com/watch?v=iVzE4EzfGoc
Source: https://slidenjoy.com/.

14. 14
• Conclusion
• GUIs do not make good use of multiple screens
• GUIs do not exploit fold configuration
• Aims and goals
• SLIME: Model-based approach for rendering GUIs
• With up to 3 screens
• With explicit consideration of fold configuration
• SLIME in a nutshell

15. 15
Domain model
(UML Class Diagram)
Task model
(CRUDS list)
Abstract User Interface Configurator
(Recursive Master-Detail)
CATEGORY
CatId
CatLongLabel
CatShortLabel
CatIcon
Catdescription
CatTextColour
CatBackColour
CatRolesPermissions
CreateCat (Role)
ReadCat (Role)
UpdateCat (Role)
ReadCat (Role)
SearchCat (Role)
SUB-CATEGORY
SubId
SubLabel
SubIcon
SubTextColour
SubBackColour
ARTICLE
ArtId
ArtBrief
ArtThumbnail
ArtSize
CONTENT
ContId
ContType={Text,Picture,Video}
ContOrder
AIU_4
AIU_2 AIU_3
AIU_1

16. 16
Domain model
(UML Class Diagram)
Task model
(CRUDS list)
Abstract User Interface Configurator
(Recursive Master-Detail)
Platform
model
Configuration
model
Left L-shape Triangle
U-shape

17. 17
Domain model
(UML Class Diagram)
Task model
(CRUDS list)
Abstract User Interface Configurator
(Recursive Master-Detail)
Platform
model
Configuration
model
AUI2CUI Mapper
Concrete
Interaction Units
Allocation
Widget
Selection
Reconfiguration
CATEGORY
SUB-CATEGORY
ARTICLE
CONTENT
CATEGORY
SUB-CATEGORY
ARTICLE
CONTENT
CONTENT
CONTENT
CATEGORY
SUB-CATEGORY
ARTICLE
CONTENT
ARTICLE
CONTENT
CATEGORY
SUB-CATEGORY
ARTICLE
CONTENT
SUB-CATEGORY
ARTICLE
CONTENT
CATEGORY
SUB-CATEGORY
ARTICLE
CONTENT
CATEGORY
SUB-CATEGORY
ARTICLE
CONTENT

18. 18
Domain model
(UML Class Diagram)
Task model
(CRUDS list)
Abstract User Interface Configurator
(Recursive Master-Detail)
Platform
model
Configuration
model
AUI2CUI Mapper
Concrete
Interaction Units
Allocation
Widget
Selection
Reconfiguration
CATEGORY
SUB-CATEGORY
ARTICLE
CONTENT
CATEGORY
SUB-CATEGORY
ARTICLE
CONTENT
CONTENT
CONTENT
CATEGORY
SUB-CATEGORY
ARTICLE
CONTENT
ARTICLE
CONTENT
CATEGORY
SUB-CATEGORY
ARTICLE
CONTENT
SUB-CATEGORY
ARTICLE
CONTENT
ARTICLE
CONTENT
CONTENT
CONTENT
CATEGORY
SUB-CATEGORY
SUB-CATEGORY
SUB-CATEGORY
ARTICLE
CONTENT
ARTICLE
CONTENT

19. 19
Domain model
(UML Class Diagram)
Task model
(CRUDS list)
Abstract User Interface Configurator
(Recursive Master-Detail)
Platform
model
Configuration
model
Browser Rendering
Twitter Bootstrap Masonry
Slime(Javascript)
AUI2CUI Mapper
Concrete
Interaction Units
Allocation
Widget
Selection
Reconfiguration
Device driver

20. 20
SLIME

21. 21

22. 22
Conclusion
• SLIME: a very first model-based approach for
rendering GUIs instantiated for
• 3 monitors, among which 2 are laterally foldable
• Limitations
• Single window only => Generalization is needed
• Tasks limited to CRUD operations
• Need for multi-user multi-tasking studies
• No consideration of other criteria
• Data importance, frequency of use, criticality, semantic
relations

23. Thank you very much
for your attention