Adaptive User Interfaces (AUIs) are those user interfaces, mostly graphical, that can adapt themselves (Findlater and Gajos, 2009) depending on varying conditions from the end user (e.g., preferences), the platform (e.g., the screen resolution), or the environment (e.g., a noise level or a location).
In this area, adaptive layout refers to the ability of a Graphical User Interface (GUI) to dynamically adjust its layout and structure based on changing contextual conditions. More specifically, an adaptive GUI layout automatically adapts itself to changing screen sizes, resolutions, and user preferences and helps users get the best user experience by resizing the GUI to fit the available screen real estate (Vernica and Venkata, 2015).
A retrospective view of practices for supporting adaptive GUI layouts shows that they largely evolve over time. A long time ago, purely imperative algorithms were tried, but they were hard to trace and to explain (Vanderdonckt et al., 1994). Many other techniques have been borrowed from Artificial Intelligence (e.g., state-space search, rule-based systems, knowledge-based approaches, hidden Markov Chains, decision trees) and from Software Engineering (Collignon et al., 2008).
More recently, the question of the adaptive GUI layout has been revisited and revived with modern techniques such as grid-based systems (Shiripour et al. 2021) and constraint satisfaction problems (CSP) in forward (Jiang et al. 2020) or reverse engineering (Jiang et al., 2021). We believe that reinforcement learning (Todi et al, 2018) represents a very appropriate and desirable technique for this purpose as it enables the end user to give an opinion:
- “yes, I like this layout” (positive reinforcement leading to +5 to the associated weight),
- “no, I don’t like this layout” (negative reinforcement leading to -5), or
- “Give me other options” or even
- “I want to adapt the layout with this, this, and that, but without that” (which opens the door to Natural Language Processing).
Another potential practice is to design a modular GUI that can be easily rearranged at runtime by involving reusable GUI components and custom layouts that can be swapped in and out, thus enabling the layout not only to be reshuffled but also restructured and subject to widget replacement, such as in widget promotion/demotion (Bouzit et al., 2019). The use of fluid layouts ensures that all elements of the design can adapt to various dimensions by changing the size and location of the GUI elements (Zeidler et al., 2013).
To trace this evolution, we have started to maintain a YouTube playlist of videos demonstrating several examples of adaptive GUI layouts from the old ones to the most recent ones.
For example, the Nokia Applet (Keranen and Plomp, 2002) expands and collapses its GUI hierarchy of widgets according to the screen size, resolution, and user’s task: to manage a set-top box, a media player, and a smart TV. When a device is working, its GUI part is expanded in the layout, while other parts are collapsed with an animated transition (Dessart et al. 2011) between. Another representative example are the OCR-Constraints (Jiang et al. 2020) that solve the adaptive GUI layout by accommodating several variations of the aspect ratio with a constraint solver serving an adaptive GUI renderer.
References
Sara Bouzit, Gaëlle Calvary, Denis Chêne, and Jean Vanderdonckt. Interface adaptivity by widget promotion/demotion. Proc. of EICS’2019, 18:1–18:6. https://doi.org/10.1145/3319499.3328237
Benoît Collignon, Jean Vanderdonckt, and Gaëlle Calvary. Model-Driven Engineering of Multi-target Plastic User Interfaces. In Proc. of IEEE ICAS 2008, pp. 7–14. https://doi.org/10.1109/ICAS.2008.37
Charles-Eric Dessart, Vivian Genaro Motti, and Jean Vanderdonckt. Showing User Interface Adaptivity by Animated Transitions. In Proc. of ACM EICS 2011, pp. 95–104. https://doi.org/10.1145/1996461.1996501
Leah Findlater and Krzysztof Z. Gajos. Design Space and Evaluation Challenges of Adaptive Graphical User Interfaces. AI Magazine 30, 4 (2009), 68–73. https://doi.org/10.1609/aimag.v30i4.2268
Enrique Frias-Martinez, Sherry Y. Chen, and Xiaohui Liu. 2009. Evaluation of a personalized digital library based on cognitive styles: Adaptivity vs. adaptability. International Journal of Information Management 29, 1 (2009), 48–56. https://doi.org/10.1016/j.ijinfomgt.2008.01.012
Yue Jiang, Wolfgang Stuerzlinger, and Christof Lutteroth. 2021. ReverseORC: Reverse Engineering of Resizable User Interface Layouts with OR-Constraints. In Proc. of CHI ’21. 316:1–316:18. https://doi.org/10.1145/3411764.3445043
Yue Jiang, Wolfgang Stuerzlinger, Matthias Zwicker, and Christof Lutteroth. 2020. ORCSolver: An Efficient Solver for Adaptive GUI Layout with OR-Constraints. In Proc. of CHI ’20. ACM, 1–14. https://doi.org/10.1145/3313831.3376610
Heikki Keränen and Johan Plomp. 2002. Adaptive runtime layout of hierarchical UI components. In Proc. of NordiCHI ’02, 251–254. https://doi.org/10.1145/572020.572058
Morteza Shiripour, Niraj Ramesh Dayama, and Antti Oulasvirta. 2021. Grid-Based Genetic Operators for Graphical Layout Generation. Proc. ACM Hum.-Comput. Interact. 5, 208. https://doi.org/10.1145/3461730
Kashyap Todi, Gilles Bailly, Luis A. Leiva, Antti Oulasvirta, Adapting User Interfaces with Model-based Reinforcement Learning. In Proc. of ACM CHI 2021, 573:1-573:13. https://doi.org/10.1145/3411764.3445497
Jean Vanderdonckt, Missiri Ouedraogo, and Banta Ygueitengar. 1994. A Comparison of Placement Strategies for Effective Visual Design. In Proc. of HCI ’94, 125–143. https://dl.acm.org/doi/10.5555/211382.211393
Rares Vernica and Niranjan Damera Venkata. 2015. AERO: An Extensible Framework for Adaptive Web Layout Synthesis. In Proc. of ACM DocEng ’15, 187–190. https://doi.org/10.1145/2682571.2797084
Clemens Zeidler, Christof Lutteroth, Wolfgang Stürzlinger, and Gerald Weber. 2013. The Auckland layout editor: an improved GUI layout specification process. In Proc. of UIST’13, 343–352. https://doi.org/10.1145/2501988.2502007