Engineering Slidable User Interfaces with Slime
Download as PPTX, PDF0 likes69 views
The document discusses the engineering of slidable user interfaces with a focus on the challenges and advantages of using multiple monitors and foldable screens. It highlights the limitations of current graphical user interfaces (GUIs) in effectively utilizing these multi-screen setups and presents a model-based approach called 'slime' for rendering GUIs across up to three screens. The conclusion notes various limitations of the slime approach and the need for further research into multi-user and multi-tasking scenarios.
Engineering Slidable User Interfaces with Slime
- 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