Digital Wellbeing Lens: Design Interfaces That Respect User Attention

User interfaces heavily rely on attention-capture design patterns, e.g., infinite scroll and other variable-rewarding mechanisms, that erode users’ sense of autonomy and undermine their digital wellbeing. Instead of having users rely on external self-regulation tools, this paper advocates that tech companies and designers should prioritize users’ digital wellbeing by design. To take a first step in this direction, we present Digital Wellbeing Lens, a Figma plugin that guides designers in creating user interfaces that respect and preserve user time and attention. The plugin allows the continuous evaluation of prototypes against attention-capture patterns, calculating a digital wellbeing score and suggesting suitable design alternatives. Besides introducing the plugin, we demonstrate its practical application through a use case involving the design of a mobile social media app, and we report on the results of a first exploratory study with four designers, discussing the opportunities and challenges of embracing this paradigm shift.


INTRODUCTION
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 decisionmaking [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 interventionsespecially 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.

RELATED WORK
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.

DIGITAL WELLBEING LENS
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.

Application Use Case
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.

The Plugin at Works
Figure 1 illustrates Digital Wellbeing Lens at works.In Figure 1a, the designer is prototyping a mobile social network using Figma and the predefined components included in our design library.For example, the first screen is a traditional social media newsfeed, with some posts on the homepage that can be scrolled.Using Digital Wellbeing Lens, the designer can scan the designed UIs at any time.As a result of each scanning, the plugin provide the designer with a "digital wellbeing score, " (Figure 1b (i)) which is calculated based on the design patterns introduced by the designer.The plugin exploits a set of semantic tags associated with the predefined components in the design library as well as the properties of each component to automatically detect the following ACDPs: infinite scrolling, neverending autoplay, guilty-pleasure recommendations, disguised ads and recommendations, and recapture notifications.In Figure 1b (ii), Press-to-play: videos start after the user clicks.Casino Pull-to-refresh: animated page reload after swiping.
New-content Indicator: a progress bar shows how much content is left.Infinite Scroll: new content is automatically loaded at the end of the page.Content Pagination: the user has to click to see more content.Disguised Suggestions: suggested content is disguised as regular content.
Visible Suggestions: suggested content has a different background color.Attentional Roach Motel: logging out is purposefully made difficult.
Visible Logout: logging out option is in the home page.Recapture Notifications: system notifications to start a new session.
Friends Activities: notifications about friends' activities.Fake Social Notifications: system notifications disguised as users' messages.Friends Messages: private messages between users.for example, the plugin is highlighting the infinite scrolling mechanism in the prototyped newsfeed, suggesting content pagination as an alternative.Furthermore, the plugin guides users in inspecting their interfaces manually to check the presence of the other patterns reported in Table 1, e.g., those related to notifications, which require an analysis of the included text (Figure 1b (iii)).When an ACDP is detected, either automatically or manually, it is directly highlighted in the interface (Figure 1b (iv)).
Besides detecting and highlighting ACDPs, Digital Wellbeing Lens also detects (Figure 1c (i)) and highlights (Figure 1c (ii)) the "positive" patterns included in the interface, using them to calculate the digital wellbeing score.The plugin, for example, is positively highlighting the fact that videos start after an explicit user interaction, in contrast to the popular neverending autoplay pattern.
As a result of the scanning, the designer discovers that having an infinitely scrollable newsfeed may be problematic for users' digital welbeing.Therefore, she follows the plugin recommendations, replacing infinite scroll with paginated results (Figure 1d).By repeating the scan, she discovers that the digital wellbeing score increased.

EXPLORATORY USER STUDY
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.

Results and Discussion
Participants showcased different approaches in using the plugin.Two of them (P1 and P2) designed a traditional newsfeed with columned posts.They used the plugin to change some of the highlighted ACDPs with a suggested alternative, e.g., by introducing 'press-to-play' videos.Yet, they did not change the structure and interaction possibilities that users can have with a current newsfeed, envisioning it as an endless scrollable list of content.The other two participants, instead, used the plugin and its suggestions more extensively.P4 created an interface with distinct sections for recommended and followed content, vertically scrollable with pagination.Furthermore, he also designed a search section with topic filters and a notification section indicating when all notifications have been viewed.P3, instead, envisioned a newsfeed in which posts are displayed and interconnected by topic through a "honeycomb-like layout" similar to the app gallery adopted by the Apple Watch.
Overall, the plugin was found to be potentially useful in making designers aware of ACDPs and their impact (all), influencing design choices (P2,P4), selecting promising prototypes among a set of alternatives (P3), and assessing existing user interfaces (P1, P2).Furthermore, P2 appreciated the educational nature of the plugin, stating that it could be useful for other stakeholders and activities, e.g., to introduce students to ethical design practices.However, the same participants highlighted that a real paradigm shift must start from the company and be coupled with a change in corporate values and practices (P1, P2).Echoing Docherty and Biega's perspective [7], we stress that designing user interfaces that respect and preserve user attention cannot be an individualistic choice but necessitates collective actions and policies.For example, rising concerns about UIs' dark patterns [10] have driven the adoption of regulations to curb these manipulative practices in Europe and in the US [1,25].That being said, P3 interestingly mentioned an emerging trend: "The market for sustainable and ethical companies is growing, so this plugin is interesting for those studios that want to promote themselves as companies that have a particular focus on these issues." Designers particularly liked and used some of the alternative design patterns suggested by Digital Wellbeing Lens, e.g., content categorization and press-to-play.P1, for example, stated that "'pressto-play' is useful not only in terms of dark patterns but also because it makes users consume much less data." Yet, some patterns, e.g., those related to notifications, would require special attention in their identification.P2, for example, correctly highlighted that classifying notifications would require some text recognition mechanism to inspect their content.Other patterns were found to be more intrusive and potentially associated with a decline in usability.The most prominent example is related to content pagination (P1, P2, P3).P1, in particular, stated that "it's very unusual for a social network to have pagination; the identified dark pattern [infinite scroll] is right, but on the other hand, the user should take an additional click to perform an action; it's always about finding a balance between the dark pattern and adding an extra click, it needs careful consideration."As highlighted by Peters [23], wellbeing-supportive design requires open discussion and agreement among design teams, as experiencing a moderate amount of frustration in the short term can play a crucial role in mitigating more severe or prolonged frustrations in the long term.We hypothesize that users would be willing to tolerate these short-term trade-offs in exchange for a more positive digital experience: several studies demonstrated that users are aware of the Attention-Economy drawbacks and require support to enhance their digital habits [15,19,26].An optimistic economic perspective suggests that emphasizing significance in design may result in increased user loyalty over a prolonged duration, notwithstanding potential temporary declines in engagement [7].Yet, participants' feedback clearly suggests the need to extend and improve the detection and recommendation algorithms employed by Digital Wellbeing Lens, overcoming the main limitation of having fixed 1-to-1 alternative patterns.In some cases, for example, the new-content indicator pattern could also be used to counter infinite scroll (P3).
Finally, participants suggested a range of different ideas to improve the plugin, ranging from real-time assessment, through which the digital wellbeing score dynamically reflects the designer's actions (P4), to the inclusion of additional documentation related to the targeted patterns (P1) and real-world UI examples, especially for the alternative patterns (P4).

CONCLUSIONS AND FUTURE WORK
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.

Figure 1 :
Figure 1: Digital Wellbeing Lens allows designers to evaluate their Figma prototypes against ACDPs.It detects design patterns that may or may not respect the user attention, providing designers with a digital wellbeing score and design suggestions.

Table 1 :
The ACDPs targeted by the first implementation of Digital Wellbeing Lens and the associated alternative patterns.
Guilty-Pleasure Recommendations: viral suggestions to increase use time.Content categorization: suggested content organized into topics.Neverending Autoplay: new video start automatically.