User interface - shabaj-ahmed/SAR_for_habit_formation GitHub Wiki

User interface

A screen-based user interface was included to increase transparency around the data being collected (DR9) and to provide participants with an additional modality for interacting with the robot beyond voice dialogue. The user interface was implemented as a Web App using Flask and consisted of four main pages: Home, Check-In, History, and Settings. Each screen was designed to support a specific function, such as initiating interactions, tracking progress, or adjusting configuration settings. The interface also provided real-time feedback on the robot’s current state and offered users insight into the data being processed.

Home

displays the participant's implementation intention, along with the time of the next scheduled reminder and the number of days remaining in the study (Figure 1.A). To access other screens, participants could click the “Open” button located at the top left corner, which revealed a menu for navigation (Figure 1.B).

Figure 1.A: Home Screen. Figure 1.B: Menu Screen.

Check-In

To start a check-in, a user must first navigate to the check-in page. A green “Start Check-In” button initiated the dialogue (Figure 2.A). The check-in interface resembled a messaging application, displaying both the robot’s questions and the participant’s previous responses in a scrollable chat-like format (Figure 2.B). This design helped participants stay oriented during the conversation and review what had already been discussed. Upon completion, participants could choose to save or redo their responses. If no action was taken within 20 seconds, the check-in was saved automatically.

Figure 2.A: Check-in screen. Figure 2.B: Conversation history.

History

The history page allowed participants to view their check-in activity over time. This screen displays the days on which the participant had completed a check-in, providing an overview of adherence to the intervention and the data collected (Figure 3).

Figure 3: History screen.

Settings

The settings page provided controls for modifying aspects of the study configurations. This included options for adjusting the reminder time (Figure 4.A), robot eye colour, robot volume and touchscreen brightness (Figure 4.B).

Figure 4.A: Settings screen - reminder Figure 4.B: Settings screen - robot customisation.

Error handling

Given the long-term nature of the study, robust error management was essential. In the event of a fatal error, an error screen was displayed to inform the participant of the issue. This screen included a description of the error to support debugging and maintain system transparency (Figure 5).

Figure 5: Connection error message.

⚠️ **GitHub.com Fallback** ⚠️