1. Université catholique de Louvain (UCL) Belgian Laboratory of Computer-Human Interaction (BCHI) Place des Doyens, 1 B-1348 Louvain-la-Neuve (Belgium) Presented by Graceful Degradation of User Interfaces as a Design Method for Multiplatform Systems Murielle Florins & Jean Vanderdonckt

2. Description of the Problem Problem = Building user interfaces for multiplatform systems when the capabilities of each platform are very different (screen size and resolution, input devices, available widgets,…) Our approach to the multiplatform problem is -transformational -model-based

3. Model-based Approach 3 types of model-based approaches to the multiplatform problem: 1) multiplatform generation (e.g. ArtStudio, Teresa) 1 generic task & domain model  N platform specific UI 2) specification-based interface design (e.g. UIML) N platform specific presentation & dialog model  N platform specific UI 3) reverse engineering approach (e.g. Vaquita) 1 source code  1 specification

4. Model-based Approach Multiplatform generation Specification-based design Reverse engineering Graceful Degradation 1 abtract spec (task & domain) N codes N specs (presentation & dialogue) N codes 1 code 1 spec. N codes 1 spec. N adapted spec

5. Transformational Approach Source Interface Target ? Transformation Rules - transformations from large screen to smaller interfaces  degradation - smooth transitions to usable UIs  graceful degradation

6. Graceful Degradation Rules: Exploratory Study GD rules have been - identified on a large number of publicly available applications running on several devices - tested on the ARTHUR system (multidevices information system for emergency services in Belgian hospitals)

7. GD Rules Typology GD rules have been classified using the CAMELEON framework Context-sensitive UIs, Model-based approach

8. GD Rules: Tasks & Concepts Level Task Model Domain Model

9. Tasks Model (example)

10. Transformation Rule on Task Model (example 1)

11. Transformation Rule on Task Model (example 2) >>

12. Domain Model (example) 0-N 1-N writes 1-1 1-N of COPY CopyNbr Localisation BOOK BookNbr Title Publisher PublDate Keywords[1-10] AUTHOR Name FirstName[0-1] Land[0-N]

13. Transformation Rule on Domain Model (example 1) 0-N1-Nwrites 1-1 1-N of COPY CopyNbr Localisation BOOK BookNbr Title Publisher PublDate Keywords[1-10] AUTHOR Name FirstName[0-1] Land[0-N]

14. Transformation Rule on Domain Model (example 2) 0-N 1-Nwrites 1-1 1-N of COPY CopyNbr Localisation BOOK BookNbr Title Publisher PublDate Keywords[1-10] AUTHOR Name FirstName[0-1] Land[0-N]

15. GD Rules: Abstract User Interface Level Description of the UI in terms of Presentation Units (PUs) = list of tasks  same container (window, panel, card,…)

16. Presentation Units (example)

17. Splitting Rules (Example)

18. Splitting Rules Can be applied automatically From: 1. a CTT Task Model 2. a PU designed for the source platform  deduction of correct PUs for the target platform

19. GD Rules: Concrete User Interface Level Description of the UI in terms of - Graphical objects or Interactors - Relationships between graphical objects

20. GD Rules: Concrete User Interface Level 2 types of GD rules at the Concrete UI level Graphical Objects Transformations Layout Relationships Transformations

21. GD Rules : Graphical Objects Transformations - modifications rules modify the appearance of the graphical object - substitution rules replace an interactor by 1 or N alternate interactor(s) with the same functionalities - removal rules

22. GD Rule at the Concrete Interface Level (example 1)

23. GD Rule at the Concrete Interface Level (example 2) Add all >> Add > << Remove all < Remove >> > << < > < Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 1 Group box Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7

24. GD Rules : Layout Relationships Transformations - resizing rules, modify the dimensions of a graphical object - reorientation rules modify the orientation of an object without other change in size or position - moving rules

25. GD Rule at the Concrete Interface Level (example 3)

26. GD Rule at the Concrete Interface Level (example 4)

27. GD Rules: Final User Interface Level Source code

28. GD Rules: Final User Interface Level Examples: - substitution of an image by an image in a compressed format - reduction of the colour number - reduction of font sizes  rules at that level do not benefit from a model-based approach

29. Conclusion Main characteristics of the Graceful Degradation approach: - model-based, transformational approach - input: spec of the less constrainst UI - output: UI adapted to the target platform while minimizing the gap between system versions Automatic application of the rules in two cases: 1. systems able to adapt their user interface at run-time in response to changes in the screen resolution 2. a design environment that will provide designers with assistance in obtaining a graceful degradation of UIs

30. GrafiXML