2.5. User interfaces

The optimized UI was developed in collaboration with paid expert consultants from the private sector specialized in UX of digital health care applications, in order to make the UI simple, intuitive and to some extent more automated. The basic UI was analogous with a UI used for over a decade in Swedish regular health care (Hedman et al., 2014) comprising elementary interface features and less automation. See Table 1 for a summary of differences between the UIs, and Fig. 2, Fig. 3 for examples on how the UIs differed visually.

Differences between the UIs.

UI, user interface.

Main menu in optimized UI (left) versus basic UI (right).

Part of the intervention in optimized UI (left) versus basic UI (right).

Since mobile device usage has increased among the general public (Parasuraman et al., 2017), the optimized UI was built with the responsive design method mobile-first, which means that the product design began from the mobile end before expanding to a desktop version. The basic UI was built with the responsive design method desktop-first, meaning that the design was primarily built for full size desktop screens and to be used with a physical keyboard and a mouse or trackpad.

Both UIs contained a navigation menu. In the optimized UI, the intervention related content was divided into three main sections within the navigation menu. The main sections were presented with headlines and accompanying pictograms aiming to visually differentiate the main sections. In the basic UI, all intervention related content was found under one main section, presented with a headline.

In both UIs, main sections were further divided into subsections containing the actual content. In the optimized UI, the first main section contained all information needed before working with the exercises, and was divided into seven subsections with headlines accompanied by pictograms. Within these subsections, content was further divided into pages in order to limit the amount of content displayed simultaneously. In some pages, expandable learn-more options were available. The second main section contained the problem-solving exercises, and new subsections were automatically created when problem-solving attempts were initiated. The third main section contained trial related information, and was divided into subsections presenting an overview of the trial period, a function for reporting system related problems, a re-presentation of the study privacy notice, and a log-out function.

In the basic UI, the main section was divided into two subsections. The first subsection contained all intervention related information, and the second subsection contained the problem-solving exercises. Content was not further divided. However, an overview of the trial period, a function for reporting system related problems, a re-presentation of the study privacy notice, and a log-out function was available separate from the main menu. A default message function was visible in the basic UI, but participants were informed of that the function was turned off during the trial.

In the optimized UI, the content was presented in small chunks, which was made possible by the several subsections, pages and learn-more options built into the design. In the basic UI, all content was presented at once in a scrollable page.

The problem-solving exercises were displayed in a stepwise fashion in the optimized UI, with each new step depending on information entered in previous steps. The intention with the stepwise fashion was to make the exercises simple and intuitive to use. In the basic UI, the exercises were presented in digital worksheets arranged one after another. The worksheets were designed to imitate exercises displayed on a paper sheet, and designed as tables with several rows and columns presented all together on one page.

For each new step in the optimized UI, separate instructions were provided. In the basic UI, all instructions were given at once, on one page, ahead of the exercises.

Through the content and the exercises within the optimized UI, expandable containers were provided, comprising examples and suggestions. In the basic UI, examples and suggestions were provided directly as part of the rest of the content.

The optimized UI comprised automated features. Firstly, within the problem-solving exercises, the text entered by the participant was automatically synched to the upcoming steps when appropriate. Secondly, automatic pop-ups were built into the exercises, exposing the participant to control questions prompting behaviors such as making sure previous exercises were completed. Some of the pop-ups also contained encouraging words, aiming to increase the motivation to use the intervention. Thirdly, new subsections were automatically generated when problem-solving attempts were initiated. The basic UI did not comprise any automated features.