Digital Wellbeing Lens: Design Interfaces That Respect User Attention

Social media – especially on mobile devices – promote endless usage sessions through infinite scroll, creating the illusion that new and exciting content will continue to flow forever [4]. Video streaming platforms, similarly, automatically play videos one after another without requiring user interaction, undermining users’ sense of agency and removing the need for autonomous decision-making [14]. These are just two examples of Attention-Capture Damaging Patterns (ACDPs) [22] that tech companies use in their interfaces to “capture” the attention of the users and keep them using their platforms, often leading users to lose track of their goals, lose their sense of time and control, and later feel regret.

Traditionally, researchers have tried to overcome the issues brought by such an Attention Economy by innovating a range of Digital Self-Control Tools (DSCTs) [16]: employing different strategies, from productivity dashboards to usage timers, these dedicated mobile apps or browser extensions help users self-regulate the usage of distractive apps and websites to achieve digital wellbeing [18]. Nevertheless, studies have shown that these external interventions – especially those that are overly dependent on users’ self-monitoring capabilities – are often ineffective in the long term [24].

This paper endorses and delves deeper into the emerging need to prioritize users’ digital wellbeing directly in the design processes of user interfaces [2, 21, 22], recognizing the critical necessity to foster healthy online experiences and addressing potential negative impacts of ACDPs on users’ mental health without depending on external support. To set the stage for this ambitious goal, we present Digital Wellbeing Lens, a plugin for Figma – one of the most popular interface design tools – that supports designers in respecting and preserving users’ attention at design time. Through the plugin, designers can scan the interfaces they designed and get a “digital wellbeing score,” which is calculated based on the design patterns introduced by the designer. In parallel, the plugin detects and highlights the presence of ACDPs, e.g., the infinite scroll mechanism, suggesting design alternatives to improve the interface score, such as a design with paginated content. We exemplify the usage of the plugin in a use case involving the design of a social media mobile interface, and we report on the results of a first exploratory study with four professional designers, during which we asked them to use the plugin in a 1-hour controlled prototyping session. We use the promising results to explore the opportunities and challenges of embracing a paradigm shift that considers users’ digital wellbeing as a top design goal.

Terms like “addiction [12]” and “compulsive use [26]” are nowadays associated with technology use, signaling a growing research and public interest in digital wellbeing [18], i.e., a new psychological construct that highlights the need for technology that promotes mindful and meaningful digital experiences. Despite the well-documented issues associated with excessive technology use, ranging from sleep disturbances [11] to impaired self of agency [14], tech companies continue to operate within an Attention Economy, monetizing users’ attention. Monge Roffarello et al. [22], in particular, classified 11 ACDPs, from infinite scroll to guilty-pleasure recommendations, shedding light on the practice of designing user interfaces that deliberately exploit psychological vulnerabilities to maximize metrics like time spent and daily visits.

Traditionally, achieving digital wellbeing in the contemporary Attention Economy has been considered an end-user responsibility [7]. HCI researchers and practitioners, in particular, have mainly focused on providing users with a plethora of DSCTs [16], i.e., external mobile apps or browser extensions to counter distractive apps or websites. Most of these tools support exercising self-control by allowing users to self-monitor their tech use and set up interventions on distractive apps or websites, e.g., usage timers and lockout mechanisms [18]. Others allow users to customize the layout of an interface according to their needs, e.g., to remove distractive interface elements like recommendations and prioritize instrumental use [13]. Despite their popularity, the same HCI community has criticized DSCTs for their external nature, highlighting high attrition rates and low effectiveness in the long term [24].

Here, we support the growing research attention into realigning technology with people's digital wellbeing by design. Specifically, the emergence of several workshops [2, 21], frameworks [6], and design guidelines [23] underscores the critical need to support designers in creating technology that better supports the wellbeing of its users. For example, Al-Mansoori et al. [2] demonstrated that designers desire assistance in strengthening their approach to digital wellbeing in order to create user interfaces that support users’ autonomy, competence, and relatedness. Relatedly, Desmet and Pohlmeyer [6] introduced a framework for positive design that considers the main components of subjective wellbeing, i.e., pleasure, personal significance, and virtue. Similarly, Peters [23] developed guidelines to support wellbeing through design, from respecting user autonomy to applying accessibility best practices. Nonetheless, none of these works explicitly address the issue of supporting users’ digital wellbeing within the current Attention Economy, highlighting a gap in providing designers with clear guidelines for crafting user interfaces that go beyond maximizing screen time [7, 21]. Our Digital Wellbeing Lens plugin aims to provide designers with a practical tool for this purpose, enriching a well-known tool for UI design, i.e., Figma, with digital wellbeing supportive features.

The main goal of our work is to support designers in prioritizing users’ digital wellbeing starting from the early stage of the design of user interfaces, without forcing them to change their current design practices and tools. For this reason, we decided to integrate our solution into Figma [8], a popular design and prototyping tool widely adopted by designers for creating mock-ups of their user interfaces. Specifically, transitioning away from the Attention Economy means avoiding all those attention-capture designs nowadays spread into current user interfaces [22]. For this reason, we envisioned Digital Wellbeing Lens as a tool that continuously analyzes UI designs and detects the presence of ACDPs. Furthermore, designing for digital wellbeing means finding appropriate design patterns that respect and preserve user attention while offering the same functionality of ACDPs [22]. Digital Wellbeing Lens aims at educating designers into adopting these alternative patterns, suggesting their usage in place of the detected ACDPs. Finally, to motivate designers in making design choices that respect and preserve user attention, Digital Wellbeing Lens provides designers with an indication of the extent to which the prototype prioritizes digital wellbeing. Such an indication is calculated based on the ACDPs and alternative design patterns currently present in a UI design.

3.1 Application Use Case

The figure contains a set of screenshot from Digital Wellbeing Lens, a Figma plugin that allows designers to evaluate their prototypes against attention-capturing damaging patterns.

We defined an application use case to implement the first version of the plugin and assess it in a preliminary exploratory study (see Section 4). Inspired by previous works in the digital wellbeing field, which defines smartphones and social media as two of the most critical factors shaping the digital experiences of individuals [15, 26], we decided to focus on the design of a social network mobile app. Specifically, the envisioned social network resembles contemporary similar platforms in functionality, e.g., Instagram and Facebook: it empowers users to post and watch text, graphic, and video content, and it allows users to follow other people and receive notifications. Adopting a well-established methodology used in previous works [17, 20], we conducted an exploratory analysis by manually inspecting the mobile apps of Facebook and Instagram. Specifically, we assessed the two mobile apps against a state-of-the-art taxonomy of ACDPs [22], with the aim of defining a set of patterns to be targeted by the plugin. For each identified ACDP, then, we defined an alternative “positive” pattern, taking inspiration from our own experience in digital wellbeing research and existing design guidelines and initiatives around digital-wellbeing design [9, 23]. Although future works would need to rely on more sophisticated and personalized recommendation algorithms, these one-to-one alternative designs represent a preliminary step that enabled us to assess the potential of our design approach. Results of our analysis are reported in Table 1.

We implemented the Figma plugin using JavaScript and the React framework. Furthermore, similarly to popular Figma design kits made available by Apple [3] and Google [5], we created a design library that contains components useful to prototype mobile UIs for social networks, from post templates to predefined notifications. A working implementation of the plugin for the application use case described in this section is available at https://www.figma.com/community/plugin/1310606990428971215/digital-wellbeing-lens.

We conducted a first exploratory study of Digital Wellbeing Lens to assess the potential of our novel design approach. We recruited a total of four professional designers, two females and two males, using convenience and snowball sampling. Participants were 27.25 years old on average (SD = 1.09). They identified themselves as Figma experts, regularly utilizing the tool in their work for tasks that span from creating presentations to designing complete user interfaces and collaborating with developer teams. During the study, we first introduced participants to digital wellbeing, exemplifying some of the most common ACDPs. Furthermore, we showed a brief tutorial of Digital Wellbeing Lens, demonstrating its main features. Then, we asked participants to freely use Figma and our plugin to design some social media mobile application screens, using the same use case and the design library described in Section 3.1. We concluded the sessions once participants expressed satisfaction with their designs, conducting a final debriefing to gather their thoughts and feedback.

In this paper, we have presented Digital Wellbeing Lens, a Figma plugin that guides designers in prioritizing digital wellbeing while creating user interfaces. The plugin detects and highlights design patterns in Figma designs that may support or undermine users’ sense of agency and self-control, providing designers with a digital wellbeing score and actionable design recommendations to improve it.

Being the first step towards this design paradigm shift, further effort is needed to confirm our approach's benefits and potential applicability. From a technical point of view, we will work on generalizing the plugin functionality to work with multiple kind of user interface, extending the implemented use case. In this respect, numerous challenges need to be explored and resolved, from creating appropriate design kits to using AI strategies to improve the detection of ACDPs and alternative design patterns in an interface. Furthermore, we plan to conduct longer and more ecologically valid evaluations of the plugin with the design community, comparing the usage of Digital Wellbeing Lens with tools and strategies currently adopted by designers.