Hibiol

interaction Interface Data visualization time solar psychology dissonance information Extension

Problem

With the recent discussions surrounding misinformation and personal privacy, there has been escalating concern over the effects of the internet and the attention economy. Much of the digital economy is supported by the advertising model which generates revenue by monetizing people's attention.

The contest for people's finite time has incentivized platforms to optimize their designs and content recommendation algorithms to maximize addictiveness and, therefore, advertising revenue.

This led to the creation of movements and organizations such as Time Well Spent which advocate for people to take back control of their time to improve digital well-being.

Initial Solutions

In response, Apple has introduced Screen Time with iOS 12 and Google released Digital Wellbeing for Android. Both help users visualize app usage and self-impose limits on how much time they spend on their mobile devices.

These aids, however, are often tucked away behind menus, reducing their accessibility.

They also focus primarily on total time spent, making it difficult to see apps we are constantly distracted by but spend little time on.

In addition, fixed time limits are very rigid compared to our more fluid behavior. To accommodate for this, time limit mechanisms often include easy bypasses which obviate their purpose.

Hibiol

Hibiol is a web extension which visualizes your browsing history in your browser's new tab page. A timeline displays information for today and a day within the past week.

For both days, the 3 websites you spend the most time on and the 2 websites you visit most frequently are shown.

Keeping data from only the past week allows for comparisons with only recent information while accommodating for off days, like times when we binge read or watch an entire series.

Consistent Feedback Loops

Instead of using onerous interventions, Hibiol continually reminds us of how we spend our time.

When we perceive a divide between how we think we behave and how we actually behave, we experience cognitive dissonance. To resolve this dissonance, we adjust our expectations and actions to make them consistent with one another.

Increasing the visibility of our browsing behavior keeps us conscientious of it and creates a consistent feedback loop driven by cognitive dissonance.

Timeline Design

Hibiol displays events which last for only a few seconds or even milliseconds. With 86,400 seconds per day, these brief events often render to less than a pixel wide on even high resolution displays.

One part of Hibiol’s solution is to have a minimum event render width of one pixel. This prevents short events from becoming effectively invisible but can make closely positioned events appear like a single longer event, obscuring how frequently we visited the website.

To preserve this frequency information, Hibiol also applies a transparency gradient to each event so that visually overlapping events create a fringe-like dye pattern.

To determine which color should represent a website, Hibiol uses the website's favicon to generate a palette with up to 6 swatches.

Using the number of pixels each swatch represents (their populations) and the swatch's HSL (hue, saturation, and luminance) coordinates, Hibiol calculates a prominence value. The swatch with the highest prominence becomes the website's representative color.

Using prominence instead of population lets Hibiol select the most salient color even when its population is low.

Location-Based Themes

To mirror the time of day, Hibiol cycles through different themes for daytime, golden hour, sunrise and sunset, civil twilight, nautical twilight, astronomical twilight, and nighttime.

The theme is chosen based on the solar altitude at the user's latitude and longitude. Hibiol's geographic coordinate-based solution works even during midnight sun and polar night in the Arctic and Antarctic.

Each website's representative color has its saturation and luminance normalized to minimize perceived brightness differences due to the Helmholtz-Kohlrausch effect. The normalized saturation and luminance values are determined by the theme.